<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.container{
display: flex;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>CS498: IoT -- Lab 2</h2>
<!-- <video class="center" width="600" height="400" controls>
<source src="samplevid.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> -->
<img src="./media/default_background.png" id='pics'>
</div>
</div>
<div class="row">
<div class="container">
<div class="jumbotron text-center col-md-6">
<span> </span>
<span id="upArrow" style='font-size:50px; color:grey;'>⇧</span>
<br>
<span id="leftArrow" style='font-size:45px; color:grey;'>⇦</span>
<span> </span>
<span id="rightArrow" style='font-size:45px; color:grey;'>⇨</span>
<br>
<span> </span>
<span id="downArrow" style='font-size:50px; color:grey;'>⇩</span>
</div>
<div class="jumbotron text-left col-md-6">
<input id="message" type="text" placeholder="message to Pi"/>
<button class="btn btn-success" onclick="update_data()">Sumbit</button>
<p>
<span id="direction_dot" style="color:Green">•</span> Car Direction: <span id="direction"> </span>
<br>
<span id="speed_dot" style="color:green">•</span> Speed: <span id="speed">0.0</span>
<br>
<span id="distance_dot" style="color:green">•</span> Distance Traveled: <span id="distance">0.0</span>
<br>
<span id="temprature_dot" style="color:green">•</span> Temperature of the Pi: <span id="temperature">0.0</span>
<br>
Bluetooth return value: <span id="bluetooth"> </span>
</p>
</div>
</div>
</div>
</body>
</html>