<div class="column">

      <script> 
        $(document).ready(function(){
        setInterval(function(){
          $("#refresh").load(window.location.href + " #refresh" );
          }, 3000);
        });
      </script>


      <div id="refresh" class="" style="border: 3px solid">

          <img class="Proxy_img" src="/static/images/Proxy33.png" height="300">
          <!-- <img class="Proxy_img" src="/static/images/Proxy22.jpg" height="350"> -->

         <div id="image2" class="View" style="border: 1px solid; float: left">
             <h3> {{ front_proxy_distance }} Mtr  <br><br><br><br> &#11044;</h3>  
            <p >   </p>
         </div>
      </div>
     


<script>
 
    var dist2 = 32;
    var objImage = null;
    function init2() {
        objImage = document.getElementById("image2");
        objImage.style.position = "relative";
        //objImage.style.left = "235px";
        objImage.style.top = "50px";
         if (dist2 >= 0 && dist2 <= 5)
          {
             objImage.style.left = "780px";
          }
          else if (dist2 >= 6 && dist2 <= 10)
          {
             objImage.style.left = "810px";
          }
          else if (dist2 >= 11 && dist2 <= 15)
          {
             objImage.style.left = "840px";
          }
          else if (dist2 >= 16 && dist2 <= 20)
          {
             objImage.style.left = "870px";
          }
          else if (dist2 >= 21 && dist2 <= 25)
          {
             objImage.style.left = "900px";
          }
          else if (dist2 >= 26 && dist2 <= 30)
          {
             objImage.style.left = "930px";
          }
          else if (dist2 >= 31 && dist2 <= 35)
          {
             objImage.style.left = "960px";
          }
          else
          {
             objImage.style.left = "990px";
          }
    }
 
</script>


</div>

{% endblock body %}