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{}{
"matrice": Matrix,
"tempoAggiorna": Clock,
"larghezza": Larghezza,
"altezza": Altezza,
}
templ.Execute(w, varmap)
}

74
template/Interfaccia.html
View File

@ -3,35 +3,45 @@
<title>GoBug</title>
<!--meta http-equiv="refresh" content="{{ .tempoAggiorna }}"-->
<meta charset="UTF-8">
<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;
font-size:2.4em;
}
p {
color: white;
font-size:2em;
}
body {
background: #009999;
}
table {
border: 1px solid white;
table-layout: fixed;
empty-cells: show;
background: white;
padding: 0px;
width:100%;
height: 100%;
font-size: .6em;
}
div {
width:20%;
height: 89%;
background-color: #006666;
float: left;
}
td,tr {
.clearfix:after {
content: "";
display: table;
clear: both;
}
main {
background-color: #00bbbb;
}
tr, td {
}
td {
background: white;
padding: 0px;
text-align: center;
vertical-align: middle;
width: calc((70vw / {{.larghezza}}) - 3px);
height: calc(((100vh - 8em) / {{.altezza}}) - 8px);
}
.cibo {
background: #FFFF33;
@ -45,11 +55,32 @@
background: #FF0000;
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>
</head>
<body>
<h1>Go bug</h1>
<div style="float:left; display:block; width:70%; height:89%; ">
<main class="clearfix">
<div class="tabella">
<table>
{{range $riga := .matrice}}
<tr>
@ -62,24 +93,21 @@
{{ else }}
class="razza1"
{{ end }}
{{ end }}>{{ $cella }}</td>
{{ end }}>{{ $cella.Health }}</td>
{{ end }}
</tr>
{{ end }}
</table>
</div>
<div style="float:left; display:block; width:1%; height:89%; "></div>
<div style="float:left; display:block; width:29%; height:89%; ">
<div class="legenda">
<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: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%; "><p>Razza1</p></div>
<div style="float:right; display:block; width:100%; height:2%;"></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:20%; "><p>Razza2</p></div>
</div>
<div style="float:right; display:block; width:65%; height:19%; ">Razza2</div>
</div>
</main>
</body>
</html>