<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="noindex">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Display Webcam Stream</title>
<style>
#container {
position: center;
margin: 5px auto;
width: 100%;
height: 480px;
border: 5px #333 solid;
}
.button {
top: 100%;
margin:auto;
}
#videoElement {
width: 100%;
height: 480px;
background-color: #666;
}
#textwrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}
</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 class="container-fluid ">
<div class="row">
<div class="col-sm-6 text-center">
<h1>Time-lapse on demand</h1>
<h4>Select Time-lapse start time</h4>
<form name="form1" action="button" method="POST">
<div class="ui container">
<div id="textwrapper">
<div id="left">
<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>
<div id="right">
<div class="wrapper">
<input type="submit" class="btn btn-info" value="Make Timelapse">
</div>
</div>
</div>
<br>
</div>
</form>
<script>
function submitform() {
$('#submit_handle').click();
}
</script>
<script>
function required()
{
var empt = document.forms["form1"]["Time"].value;
if (empt == "")
{
alert("Please select Time!");
return false;
}
else
{
return true;
}
}
</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 =="NoDataFound" %}
<script>
alert("No Images found for the selected time period. Please enter different time")
</script>
{% else %}
Your latest Timelapse is available at: <a href={{ data }}>{{ data }}</a>
{% endif %}
</div>
</div>
<div class="col-sm-6">
<div id="container">
<h1>Live Video feed</h1>
<img id="bg" src="{{ url_for('video_feed') }}">
</div>
</div>
</div>
</div>
</body>
</html>