{% extends "header.html" %}

{% block body %}

<script>

function checkRefresh()
{
   myVar = setInterval(function(){ getUI() }, 3000000);
}


function getUI()
{
   var xhr;
   var params = "0";
   xhr = new XMLHttpRequest();
   xhr.onreadystatechange = handleStateChange;
   xhr.open("POST", '/refreshpacket/', true);
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhr.setRequestHeader("Content-length", params.length);
   xhr.setRequestHeader("Connection", "close");
   xhr.send(params);

   function handleStateChange() {
       if (xhr.readyState == 4 &&  xhr.status == 200) {
           var element = document.getElementById('textblock');
           element.innerHTML = xhr.responseText;
       }
   }
}
</script>

<style>
body { background-color:#ffffff; }
.center
{
  margin:0 auto;
  width:25%;
}
.wide
{
  border:1px solid black;
  width:600px;
  height:500px;
  margin-top:20px;
  margin-bottom:20px;
}
.lgfont
{
  font-size:24px;
}
.lgfontmargin
{
  font-size:24px;
  margin:20px;
}
.anims
{
  /*animation: draw 1s linear infinite;*/
}

.animcopy
{
  animation: draw 1s linear infinite;
}

@keyframes draw {
  50% { opacity: 0; }
}

.animlines
{
  animation: dashes 0.5s linear infinite;
}

@keyframes dashes {
from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
text
{
  pointer-events: none;
}
path
{
  hover: opacity: 0.5;
}

.cfg {cursor: pointer;}
.play {cursor: pointer;}

.modal {
    display: {{block}};
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 550px;
    height: 700px;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

table { border-collapse: collapse;width:100%; }
th { background-color: #ffffff; border-top:solid thin #ffffff; margin-bottom:10px;}
tr:nth-child(even) {background-color: #fafafa; border-top: solid thin #cccccc; padding:2px; }
tr:nth-child(odd) {background-color: #ffffff; border-top: solid thin #cccccc; padding:2px;}

</style>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="javascript:closeBox();">&times;</span>
    <div id="modaltextblock" style="margin: 0 auto;">
            &nbsp;
    </div>
  </div>
</div>

        <div id="textblock" style="margin: 0 auto;">
            &nbsp;
        </div>
<script>
window.onload = getUI();
window.onload = checkRefresh();
</script>
{% endblock %}