<!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>
<form action="button" method="POST">
<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"></table>
</div>
<i class="time icon"></i>
<input type="text" placeholder="Time" class="" name="Time" required>
</div>
</div>
<div id="button" onclick="submitform()" class="wrapper">
<input type="submit" value="Make Timelapse"/>
</div>
<br>
</div>
</form>
<script>
function submitform() {
$('#submit_handle').click();
}
</script>
<script id="jsbin-javascript">
$('#example3').calendar({
type: 'time'
});
</script>
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
<div class="wrapper">
{% if data %}
Your latest Timelapse is available at: <a href={{ data }}>{{ data }}</a>
{% endif %}
</div>
</body>
</html>