<html>
  <head>
    <title>iGibson Web Interface</title>
  </head>
   <style>
    .img {
      width: 512px;
      height: 512px;
      border:2px solid #fff;
      box-shadow: 10px 10px 5px #ccc;
      -moz-box-shadow: 10px 10px 5px #ccc;
      -webkit-box-shadow: 10px 10px 5px #ccc;
      -khtml-box-shadow: 10px 10px 5px #ccc;
    }
    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      
    }

    body, html {
    height: 100%;
    }

    /* The hero image */
    .hero-image {
      /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
      background-image:  url("{{url_for('static', filename='igibson_logo.png')}}");

      /* Set a specific height */
      height: 300px;
      margin-left: auto;
      margin-right: auto;
      width: 900px;
      /* Position and center the image to scale nicely on all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }

        /* Place text in the middle of the image */
    .hero-text {
     margin-top: 30px;
     font-size: 20px;
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
    }

  </style>
  <body>
    <div class="hero-image">
  </div>
</div>

   <img class="img center" id="bg" src="{{ url_for('video_feed') }}?uuid={{uuid}}&robot={{robot}}&scene={{scene}}"> </img>
  <div class="hero-text">
  "ASWD" to send moving signal, "F" to stop, everything is physically simulated in real time.
  </div>
  </body>
  <script>
    document.addEventListener('keydown', (event) => {
            console.log(`key=${event.key},code=${event.code}`);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', "{{ url_for('video_feed') }}?key=" + `${event.key}` + '&uuid={{uuid}}', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.onload = function () {
                // do something to response
                console.log(this.responseText);
            };
            xhr.send('');


           
        });

  </script>
</html>