recognition_bot/static/template.html

<!doctype html>
<meta charset="utf-8">
<head>
    <style>
    a {
            color: #FFF;
    }
    a:hover {
            color: yellow;
            text-decoration: underline;
    }
    .thumbnails img {
            height: 80px;
            border: 4px solid #555;
            padding: 1px;
            margin: 0 10px 10px 0;
    }

    .thumbnails img:hover {
            border: 4px solid #00ccff;
            cursor:pointer;
    }
    
    div.desc {
        padding: 15px;
        text-align: center;
    }
    </style>
    <meta http-equiv="refresh" content="10">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../static/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <script src="../static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
    </head>

<body>
  <div class="container">
    <h1>Trick the recognition bot!</h1>
    <div class="row">
        {% for image in sequence_images %}
        <div class="col-md-3">
            <div class="thumbnail">
                <a href="{{ image.path }}" target="_blank">
                <img src="{{ image.path }}" alt="" style="width:100%">
                <div class="caption">
                    <div class="desc">
                        {% if image.humans %}    
                        Person found!<br>
                        {% else %}
                        No person found...<br>
                        {% endif %}
                    </div>
                </div>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
  </div>
</body>