{% extends "bootstrap/base.html" %}

{% block head %}
{{ super() }}
    <style>
      body { background-color:#555888; font-family:sans-serif; color:#fff; text-align:center }
      code { display:inline-block; max-width:600px;  padding:80px 0 0; line-height:1.5; font-family:monospace; color:#ccc }

      .sc-gauge  { width:200px; height:200px; margin:200px auto; }
      .sc-background { position:relative; height:100px; margin-bottom:10px; background-color:#fff; border-radius:150px 150px 0 0; overflow:hidden; text-align:center; }
      .sc-mask { position:absolute; top:20px; right:20px; left:20px; height:80px; background-color:#555888; border-radius:150px 150px 0 0 }
      .sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#00aeef; }
      .sc-percentage { transform:rotate(158deg); transform-origin:top center; }
      .sc-min { float:left; color: transparent; }
      .sc-max { float:right; color: transparent; }
      .log-gravity { position:absolute; top:25%; left:0; width:100%;  font-size:22px; font-weight:700 }
      .log-temp { position:absolute; top:50%; left:0; width:100%;  font-size:18px; font-weight:700 }
      .log-color { position:absolute; top:75%; left:0; width:100%;  font-size:12px; }
      .log-timestamp { position:absolute; top:90%; left:0; width:100%;  font-size:8px; }
    </style>
    <script src="//code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
          var socket = io.connect('http://' + document.domain + ':' + location.port + '/');
          var start_time;
          window.setInterval(function() {
              start_time = (new Date).getTime();
              socket.emit('refresh');
          }, 2000);
          socket.on('refresh', function(msg) {
              document.getElementById("log-color").innerHTML = msg.data.color + '(' + msg.data.mac + ')';
              document.getElementById("log-gravity").innerHTML = msg.data.gravity;
              document.getElementById("log-temp").innerHTML = msg.data.temp + '&deg;';
              document.getElementById("log-timestamp").innerHTML = 'Last updated: ' + msg.data.timestamp;
          });
      });
    </script>
{% endblock %}

{% block body %}
<!-- Build a custom look here that all pages can inherit. -->
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    {% block content %}
    {% endblock %}
  </div>
</div>
{% endblock %}
