maggicl/goBug
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Lavoro su html

Browse source
This commit is contained in:
Claudio Maggioni 2017-05-26 17:30:17 +02:00
parent 5c99f837cf
commit 4f35cc959b
2 changed files with 72 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
html.go
View file

@ -19,6 +19,8 @@ func handlerRoot(w http.ResponseWriter, r *http.Request) {
varmap := map[string]interface{}{ varmap := map[string]interface{}{
"matrice": Matrix, "matrice": Matrix,
"tempoAggiorna": Clock, "tempoAggiorna": Clock,
"larghezza": Larghezza,
"altezza": Altezza,
} }
templ.Execute(w, varmap) templ.Execute(w, varmap)
} }

112
template/Interfaccia.html
View file

@ -3,35 +3,45 @@
<title>GoBug</title> <title>GoBug</title>
<!--meta http-equiv="refresh" content="{{ .tempoAggiorna }}"--> <!--meta http-equiv="refresh" content="{{ .tempoAggiorna }}"-->
<meta charset="UTF-8"> <meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet">
<style type="text/css"> <style type="text/css">
body {
font-family: 'Hammersmith One', sans-serif;
}
h1,h2,h3,h4 { h1,h2,h3,h4 {
color: white; color: white;
text-align: center; text-align: center;
font-size:2.4em;
} }
p { p {
color: white; color: white;
font-size:2em;
} }
body { body {
background: #009999; background: #009999;
} }
table { table {
border: 1px solid white; table-layout: fixed;
empty-cells: show; empty-cells: show;
background: white; font-size: .6em;
padding: 0px;
width:100%;
height: 100%;
} }
div { div {
width:20%; float: left;
height: 89%;
background-color: #006666;
} }
td,tr { .clearfix:after {
content: "";
display: table;
clear: both;
}
main {
background-color: #00bbbb;
}
tr, td {
}
td {
background: white; background: white;
padding: 0px; text-align: center;
vertical-align: middle;
width: calc((70vw / {{.larghezza}}) - 3px);
height: calc(((100vh - 8em) / {{.altezza}}) - 8px);
} }
.cibo { .cibo {
background: #FFFF33; background: #FFFF33;
@ -45,41 +55,59 @@
background: #FF0000; background: #FF0000;
padding: 0px; padding: 0px;
} }
div.tabella {
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);
}
}
</style> </style>
</head> </head>
<body> <body>
<h1>Go bug</h1> <h1>Go bug</h1>
<div style="float:left; display:block; width:70%; height:89%; "> <main class="clearfix">
<table> <div class="tabella">
{{range $riga := .matrice}} <table>
<tr> {{range $riga := .matrice}}
{{range $cella := $riga}} <tr>
<td {{ if not $cella }} {{range $cella := $riga}}
class="vuoto" <td {{ if not $cella }}
{{ else }} class="vuoto"
{{ if $cella.IsFood }}
class="cibo"
{{ else }} {{ else }}
class="razza1" {{ if $cella.IsFood }}
{{ end }} class="cibo"
{{ end }}>{{ $cella }}</td> {{ else }}
class="razza1"
{{ end }}
{{ end }}>{{ $cella.Health }}</td>
{{ end }}
</tr>
{{ end }} {{ end }}
</tr> </table>
{{ end }}
</table>
</div>
<div style="float:left; display:block; width:1%; height:89%; "></div>
<div style="float:left; display:block; width:29%; height:89%; ">
<h1>legenda</h1>
<div style="float:left; display:block; width:30%; height:20%; background-color:#FFFF33;"></div>
<div style="float:right; display:block; width:65%; height:20%; "><p>Food</p></div>
<div style="float:right; display:block; width:100%; height:2%; "></div>
<div style="float:left; display:block; width:30%; height:20%; background-color:#00ff00;"></div>
<div style="float:right; display:block; width:65%; height:20%; "><p>Razza1</p></div>
<div style="float:right; display:block; width:100%; height:2%;"></div>
<div style="float:left; display:block; width:30%; height:20%; background-color:#F00;"></div>
<div style="float:right; display:block; width:65%; height:20%; "><p>Razza2</p></div>
</div> </div>
</div> <div class="legenda">
<h1>legenda</h1>
<div style="float:left; display:block; width:30%; height:19%; background-color:#FFFF33;"></div>
<div style="float:right; display:block; width:65%; height:20%; ">Cibo</div>
<div style="float:left; display:block; width:30%; height:20%; background-color:#00ff00;"></div>
<div style="float:right; display:block; width:65%; height:20%; ">Razza1</div>
<div style="float:left; display:block; width:30%; height:20%; background-color:#F00;"></div>
<div style="float:right; display:block; width:65%; height:19%; ">Razza2</div>
</div>
</main>
</body> </body>
</html> </html>