<html>
<head>
<title>Go Bug</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<!--<img src="/static/CellaVerde.png">
<img src="/static/cellaRossa.png">-->
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<style type="text/css">
body {
font-family: 'Hammersmith One', sans-serif;
}
h1,h2,h3,h4 {
color: white;
text-align: center;
}
p {
color: white;
}
body {
background: #009999;
}
table {
table-layout: fixed;
empty-cells: show;
font-size: .55em;
}
div {
float: left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
main {
background-color: #00bbbb;
}
td {
background: white;
font-size: 12px;
text-align: center;
vertical-align: middle;
width: calc((70vw / {{.larghezza}}) - 3px);
color: black;
font-weight: bold;
min-height: calc(((100vw - 4em) / {{.altezza}}) - 8px);
height: 3em;
}
.cibo {
background-image: url("/static/cibo.png");
background-size: 100% 100%;
padding: 0px;
}
.razza1 {
background-image: url("/static/cellaVerde.png");
background-size: 200% 400%;
padding: 0px;
}
.razza2 {
background-image: url("/static/prova1.png");
background-size: 180% 300%;
padding: 0px;
}
div.tabella {
font-family: sans-serif;
float:left;
display:block;
width: 70vw;
}
div.legenda {
margin-left: 1em;
float:left;
display:block;
width: calc(100% - 70vw - 1em);
}
@media screen and (max-width: 800px) {
div.tabella, div.legenda {
margin-left: 0;
width: 100%;
}
td {
width: calc((100vw / {{.larghezza}}) - 3px);
}
}
div.colorsample {
width: 1em;
height: 1em;
display: inline-block;
}
img{
height: 100%
}
img.batteri{
height: 100%
}
</style>
<script>
reload = function() {
var xhr = new XMLHttpRequest()
xhr.open('GET', '/tabella')
xhr.send(null)
xhr.onreadystatechange = function () {
var DONE = 4, OK = 200
if (xhr.readyState === DONE) {
if (xhr.status === OK)
document.getElementById("tb").innerHTML = xhr.responseText
else console.log('Error: ' + xhr.status)
}
}
}
window.setInterval(reload, 1000 * {{ .tempoAggiorna }})
reload()
</script>
</head>
<body>
<h1>Go Bug</h1>
<main class="clearfix">
<div id="tb" class="tabella"></div>
<div class="legenda">
<h1>legenda</h1>
<div class="colorsample"><img src="/static/cibo.png"></div> Cibo<br>
<div class="colorsample"><img class="batteri" src="/static/cellaVerde - Copia.png"></div> Razza 1<br>
<div class="colorsample"><img class="batteri" src="/static/prova1 - Copia.png"></div> Razza 2
</div>
</main>
<!--<div>
<form action="" onsubmit="">
</br>
Height: <input type="text" id="Height" value="10">
</br>
Width: <input type="text" id="Width" value="10">
</br>
Healt: <input type="text" id="Healt" value="50">
</br>
Max Age: <input type="text" id="Maxage" value="30">
</br>
Usage of energy during movement: <input type="text" id="UseEn" value="5">
</br>
Usage of energy during reproduction: <input type="text" id="UseRe" value="5">
</br></br>
<input type="submit" id="Start" value="start">
</br></br>
<input type="submit" id="Stop" value="stop">
</form>
</div>-->
</body>
</html>