<!doctype html>
<html lang="en" style="height: 100vh">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    {{--video js--}}
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">

    <title>Hello, world!</title>

    <style type="text/css">
       p.information {
           margin: 0px auto;
       }

    </style>
</head>
<body style="margin: 0;padding: 0;">
{{--影片播放區--}}
<div style="width: 70vw;float:left;" id="video-layout">
    <video
            id="my-player"
            class="video-js"
            controls
            preload="auto"
            poster="//vjs.zencdn.net/v/oceans.png"
            data-setup='{}'
            width=70vw>
        <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
        <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
        <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">
                supports HTML5 video
            </a>
        </p>
    </video>
</div>

{{--辨識結果顯示區--}}
<div style="width: 25vw;float:left;">
    <ul class="list-unstyled">
        <li class="media" id="media1">
            <img src="http://192.168.5.222:8000/result?topic=RD10501&filename=RD10501_2019-12-10%2013:40:45.jpg" id="face1">
            <div class="media-body">
                <h4>2019-12-17 18:03:15</h4>
                <p class="information">名單：VIP</p>
                <p class="information">姓名：Allen</p>
                <p class="information">性別：男</p>
                <p class="information">相似度：87%</p>
            </div>
        </li>
        <li class="media" id="media2">
            <img src="http://192.168.5.222:8000/result?topic=RD10501&filename=RD10501_2019-12-10%2013:40:45.jpg" id="face2">
            <div class="media-body">
                <h4 style="max-width:inherit;">2019-12-17 18:03:15</h4>
                <p class="information">名單：VIP</p>
                <p class="information">姓名：Allen</p>
                <p class="information">性別：男</p>
                <p class="information">相似度：87%</p>
            </div>
        </li>
        <li class="media" id="media3">
            <img src="http://192.168.5.222:8000/result?topic=RD10501&filename=RD10501_2019-12-10%2013:40:45.jpg" id="face3">
            <div class="media-body">
                <h4>2019-12-17 18:03:15</h4>
                <p class="information">名單：VIP</p>
                <p class="information">姓名：Allen</p>
                <p class="information">性別：男</p>
                <p class="information">相似度：87%</p>
            </div>
        </li>
        <li class="media" id="media4">
            <img src="http://192.168.5.222:8000/result?topic=RD10501&filename=RD10501_2019-12-10%2013:40:45.jpg" id="face4">
            <div class="media-body">
                <h4>2019-12-17 18:03:15</h4>
                <p class="information">名單：VIP</p>
                <p class="information">姓名：Allen</p>
                <p class="information">性別：男</p>
                <p class="information">相似度：87%</p>
            </div>
        </li>

    </ul>
</div>



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
{{--video js--}}
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

<script>
    var player_width=document.getElementById("video-layout").offsetWidth;
    var view_height=document.documentElement.offsetHeight;
    var img_height=view_height*0.9/4;
    var media_padding=view_height*0.1/8;

    document.getElementById("my-player").width=player_width;
    document.getElementById("face1").height=img_height;
    document.getElementById("face2").height=img_height;
    document.getElementById("face3").height=img_height;
    document.getElementById("face4").height=img_height;

    document.getElementById("media1").setAttribute("style","padding-top: 10px;padding-bottom: 10px");
    document.getElementById("media3").setAttribute("style","padding-top: 10px;padding-bottom: 10px");
</script>

</body>
</html>