This repository has been archived on 2021-01-15. You can view files and clone it, but cannot push or open issues or pull requests.
goBug/template/Interfaccia.html

116 lines
2.5 KiB
HTML
Raw Normal View History

2017-05-26 13:09:48 +00:00
<html>
<head>
2017-05-26 16:53:04 +00:00
<title>Go Bug</title>
2017-05-26 13:09:48 +00:00
<meta charset="UTF-8">
2017-05-26 16:53:04 +00:00
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
2017-05-26 15:30:17 +00:00
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
2017-05-26 13:09:48 +00:00
<style type="text/css">
2017-05-26 15:30:17 +00:00
body {
font-family: 'Hammersmith One', sans-serif;
}
h1,h2,h3,h4 {
color: white;
text-align: center;
}
p {
2017-05-26 15:30:17 +00:00
color: white;
}
body {
2017-05-26 13:09:48 +00:00
background: #009999;
}
table {
2017-05-26 15:30:17 +00:00
table-layout: fixed;
2017-05-26 13:09:48 +00:00
empty-cells: show;
2017-05-26 17:23:16 +00:00
font-size: .55em;
2017-05-26 14:27:52 +00:00
}
div {
2017-05-26 15:30:17 +00:00
float: left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
main {
background-color: #00bbbb;
2017-05-26 13:09:48 +00:00
}
2017-05-26 15:30:17 +00:00
td {
2017-05-26 13:09:48 +00:00
background: white;
2017-05-26 15:30:17 +00:00
text-align: center;
vertical-align: middle;
width: calc((70vw / {{.larghezza}}) - 3px);
2017-05-26 17:07:52 +00:00
min-height: calc(((100vw - 4em) / {{.altezza}}) - 8px);
height: 3em;
2017-05-26 13:09:48 +00:00
}
2017-05-26 14:43:12 +00:00
.cibo {
2017-05-26 13:38:17 +00:00
background: #FFFF33;
2017-05-26 14:43:12 +00:00
padding: 0px;
2017-05-26 13:38:17 +00:00
}
2017-05-26 14:43:12 +00:00
.razza1 {
2017-05-26 13:38:17 +00:00
background: #00ff00;
2017-05-26 14:43:12 +00:00
padding: 0px;
}
2017-05-26 14:43:12 +00:00
.razza2 {
2017-05-26 13:38:17 +00:00
background: #FF0000;
2017-05-26 14:43:12 +00:00
padding: 0px;
2017-05-26 13:38:17 +00:00
}
2017-05-26 15:30:17 +00:00
div.tabella {
2017-05-26 17:23:16 +00:00
font-family: sans-serif;
2017-05-26 15:30:17 +00:00
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);
}
}
2017-05-26 15:54:45 +00:00
div.colorsample {
width: 1em;
height: 1em;
display: inline-block;
}
2017-05-26 13:09:48 +00:00
</style>
2017-05-26 15:54:45 +00:00
<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>
2017-05-26 13:09:48 +00:00
</head>
<body>
2017-05-26 16:54:56 +00:00
<h1>Go Bug</h1>
2017-05-26 15:54:45 +00:00
<main class="clearfix">
<div id="tb" class="tabella"></div>
2017-05-26 15:30:17 +00:00
<div class="legenda">
<h1>legenda</h1>
2017-05-26 15:54:45 +00:00
<div class="colorsample" style="background-color:#FFFF33"></div>&nbsp;Cibo<br>
<div class="colorsample" style="background-color:#00ff00"></div>&nbsp;Razza 1<br>
<div class="colorsample" style="background-color:#F00"></div>&nbsp;Razza 2
</div>
2017-05-26 15:30:17 +00:00
</main>
</body>
2017-05-26 13:09:48 +00:00
</html>