<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>NMEA 2000 Gateway</title>

<script type="text/javascript">
  function reset(){
    fetch('/api/reset');
    alert("Board reset triggered, reconnect WLAN if necessary");
  }
  function update(){
    fetch('/api/status')
      .then(function(resp){
        return resp.json()
      })
      .then(function(jsonData){
        for (let k in jsonData){
          let el=document.getElementById(k);
          if (el) el.textContent=jsonData[k];
        }
      })
  }
  window.setInterval(update,1000);
</script>  
<style type="text/css">
#wrap
{
text-align: center; 
vertical-align: middle; 
max-width: 900px; 
margin:0 auto;
background:#dcd;
border-radius: 10px;
padding:10px;       /*innen*/
}

span.label {
    width: 10em;
    display: inline-block;
    opacity: 0.6;
}
.row {
    margin: 0.5em;
}

</style>
</head>
<body>
<div class="main">
<h1>NMEA 2000 Gateway </h1>
<div class="row">
  <span class="label">VERSION</span>
  <span class="value" id="version">---</span>
</div>
<div class="row">
  <span class="label"># CAN messages</span>
  <span class="value" id="numcan">---</span>
</div>
<button id="reset" onclick="reset();">Reset</button>
</div>
</body>
</html>