<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex">
<title>Display Webcam Stream</title>
<style>
#container {
position: center;
margin: 0px auto;
width: 640px;
height: 480px;
border: 10px #333 solid;
}
.wrapper {
text-align: center;
}
.button {
position: center;
top: 100%;
margin:auto;
}
#videoElement {
position: absolute;
width: 640px;
height: 480px;
background-color: #666;
}
</style>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css"
rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container">
<img id="bg" src="{{ url_for('video_feed') }}">
</div>
<div class="ui container">
<h1>5 minute Time-lapse on demand</h1>
<h3>Select Time-lapse start time</h3>
<div class="ui calendar" id="example3">
<div class="ui input left icon">
<div class="ui popup calendar bottom left transition hidden"
style="top: 37px; left: 100px; bottom: auto; right: auto;">
<table class="ui celled center aligned unstackable table four column hour">
<tbody>
<tr>
<td class="link">12:00 AM</td>
<td class="link">1:00 AM</td>
<td class="link">2:00 AM</td>
<td class="link">3:00 AM</td>
</tr>
<tr>
<td class="link">4:00 AM</td>
<td class="link">5:00 AM</td>
<td class="link">6:00 AM</td>
<td class="link">7:00 AM</td>
</tr>
<tr>
<td class="link">8:00 AM</td>
<td class="link">9:00 AM</td>
<td class="link">10:00 AM</td>
<td class="link">11:00 AM</td>
</tr>
<tr>
<td class="link">12:00 PM</td>
<td class="link">1:00 PM</td>
<td class="link focus">2:00 PM</td>
<td class="link">3:00 PM</td>
</tr>
<tr>
<td class="link">4:00 PM</td>
<td class="link">5:00 PM</td>
<td class="link">6:00 PM</td>
<td class="link">7:00 PM</td>
</tr>
<tr>
<td class="link">8:00 PM</td>
<td class="link">9:00 PM</td>
<td class="link">10:00 PM</td>
<td class="link">11:00 PM</td>
</tr>
</tbody>
</table>
</div>
<i class="time icon"></i>
<input type="text" placeholder="Time" class="">
</div>
</div>
<div id="button" class="wrapper">
<form method="GET" action="/button">
<input type="submit" name="submit" value="Make Timelapse" class="button">
</form>
</div>
<br>
</div>
<script id="jsbin-javascript">
$('#example3').calendar({
type: 'time'
});
</script>
<div class="wrapper">
{% if data %}
Your latest Timelapse is available at: <a href={{ data }}>{{ data }}</a>
{% endif %}
</div>
</body>
</html>