index.html

  
 <!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>&nbsp;&nbsp;</span> 
            <span id="upArrow" style='font-size:50px; color:grey;'>&#8679;</span>
            <br>
            <span id="leftArrow" style='font-size:45px; color:grey;'>&#8678;</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
            <span id="rightArrow" style='font-size:45px; color:grey;'>&#8680;</span>
            <br>
            <span>&nbsp;&nbsp;</span> 
            <span id="downArrow" style='font-size:50px; color:grey;'>&#8681;</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>
           <br>
           <span id="ultrasonic_d" style="color:green">&bull;</span> Ultrasonic distance: <span id="ultrasonic"></span>  
           <br>
           <span id="speed_d" style="color:green">&bull;</span> Speed: <span id="speed"></span>
           <br>
           <span id="temperature_d" style="color:green">&bull;</span> Temperature of the Pi: <span id="temperature"></span>
          </p>  
        </div>
    </div>
</div>

  </body>
</html>