added frontend design
parent
4654bdaf5d
commit
e1acd18fbd
Binary file not shown.
@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="36px"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="36px"
|
||||||
|
fill="#000000"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="arrow_down.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
inkscape:window-height="1007"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="8.8486557"
|
||||||
|
inkscape:cx="22.477872"
|
||||||
|
inkscape:cy="17.505968"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
id="path2" />
|
||||||
|
<path
|
||||||
|
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
|
||||||
|
id="path4"
|
||||||
|
style="fill:#404040;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="36px"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="36px"
|
||||||
|
fill="#000000"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="arrow_down_offset.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
inkscape:window-height="1007"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="8.8486557"
|
||||||
|
inkscape:cx="22.477872"
|
||||||
|
inkscape:cy="17.505968"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
id="path2" />
|
||||||
|
<path
|
||||||
|
d="M 16.59,8.59 12,13.17 7.41,8.59 6,10 l 6,6 6,-6 z"
|
||||||
|
id="path4"
|
||||||
|
style="fill:#9a9a9a;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="36px"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="36px"
|
||||||
|
fill="#000000"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="arrow_up.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
inkscape:window-height="1007"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="8.8486557"
|
||||||
|
inkscape:cx="22.477872"
|
||||||
|
inkscape:cy="17.505968"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
id="path2" />
|
||||||
|
<path
|
||||||
|
d="M 16.59,16 12,11.42 7.41,16 6,14.59 l 6,-6 6,6 z"
|
||||||
|
id="path4"
|
||||||
|
style="fill:#404040;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="36px"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="36px"
|
||||||
|
fill="#000000"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="arrow_up_offset.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
inkscape:window-height="1007"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="8.8486557"
|
||||||
|
inkscape:cx="22.477872"
|
||||||
|
inkscape:cy="17.505968"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
id="path2" />
|
||||||
|
<path
|
||||||
|
d="M 16.59,16 12,11.42 7.41,16 6,14.59 l 6,-6 6,6 z"
|
||||||
|
id="path4"
|
||||||
|
style="fill:#9a9a9a;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,90 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
enable-background="new 0 0 24 24"
|
||||||
|
height="36px"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="36px"
|
||||||
|
fill="#000000"
|
||||||
|
version="1.1"
|
||||||
|
id="svg10"
|
||||||
|
sodipodi:docname="logo.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
|
||||||
|
<metadata
|
||||||
|
id="metadata16">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs14">
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
id="linearGradient978">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#de0e0e;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop974" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#0209e9;stop-opacity:1"
|
||||||
|
offset="1"
|
||||||
|
id="stop976" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient978"
|
||||||
|
id="linearGradient980"
|
||||||
|
x1="11.974338"
|
||||||
|
y1="1.9892023"
|
||||||
|
x2="12.014193"
|
||||||
|
y2="21.970095"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
inkscape:window-height="1007"
|
||||||
|
id="namedview12"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="17.697311"
|
||||||
|
inkscape:cx="20.53043"
|
||||||
|
inkscape:cy="16.334294"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg10" />
|
||||||
|
<g
|
||||||
|
id="g4">
|
||||||
|
<path
|
||||||
|
d="M0,0h24v24H0V0z"
|
||||||
|
fill="none"
|
||||||
|
id="path2" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g8">
|
||||||
|
<path
|
||||||
|
d="M 15,13 V 5 C 15,3.34 13.66,2 12,2 10.34,2 9,3.34 9,5 v 8 c -1.21,0.91 -2,2.37 -2,4 0,2.76 2.24,5 5,5 2.76,0 5,-2.24 5,-5 0,-1.63 -0.79,-3.09 -2,-4 z M 11,11 V 5 c 0,-0.55 0.45,-1 1,-1 0.55,0 1,0.45 1,1 v 1 h -1 v 1 h 1 v 1 1 h -1 v 1 h 1 v 1 z"
|
||||||
|
id="path6"
|
||||||
|
style="mix-blend-mode:normal;fill:url(#linearGradient980);fill-opacity:1;fill-rule:nonzero" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,60 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="24px"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24px"
|
||||||
|
fill="#000000"
|
||||||
|
version="1.1"
|
||||||
|
id="svg6"
|
||||||
|
sodipodi:docname="netopi.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
|
||||||
|
<metadata
|
||||||
|
id="metadata12">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs10" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1280"
|
||||||
|
inkscape:window-height="1007"
|
||||||
|
id="namedview8"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="13.272984"
|
||||||
|
inkscape:cx="14.810086"
|
||||||
|
inkscape:cy="8.2117367"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg6" />
|
||||||
|
<path
|
||||||
|
d="M0 0h24v24H0z"
|
||||||
|
fill="none"
|
||||||
|
id="path2" />
|
||||||
|
<path
|
||||||
|
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
|
||||||
|
id="path4"
|
||||||
|
style="fill:#e10000;fill-opacity:1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Termostat</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<div class="logo">
|
||||||
|
<img src="img/logo.svg" alt="Logo">
|
||||||
|
<h1>Termo<sub>stat</sub></h1>
|
||||||
|
</div>
|
||||||
|
<div class="state">
|
||||||
|
<span>Aktuální stav</span>
|
||||||
|
<div id="actual-state">
|
||||||
|
Netopí
|
||||||
|
<img src="img/netopi.svg" alt="Stav - netopí">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Požadovaná teplota</h2>
|
||||||
|
<div class="inputs">
|
||||||
|
<img class="tempUp" src="img/arrow_up.svg" alt="Zvýšit požadovanou teplotu">
|
||||||
|
<div id="reqTemp">27.1</div>
|
||||||
|
<img class="tempDown" src="img/arrow_down.svg" alt="Snížit požadovanou teplotu">
|
||||||
|
<span>Offset</span>
|
||||||
|
<img class="offsetUp" src="img/arrow_up_offset.svg" alt="Zvýšit offset">
|
||||||
|
<div id="offset">0.3</div>
|
||||||
|
<img class="offsetDown" src="img/arrow_down_offset.svg" alt="Snížit offset">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<h2>Aktuální teplota</h2>
|
||||||
|
<div id="temp">23,5</div>
|
||||||
|
<div class="git"><a href="https://git.microlab.space/pixx/ESP8266-termostat">Git</a></div>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: bebas;
|
||||||
|
src: url(BebasNeue-Regular.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-family: bebas;
|
||||||
|
font-size: 7vw;
|
||||||
|
color: #404040;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: white;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
padding: 1rem 0.8rem 1rem 0.2rem;
|
||||||
|
border-bottom: 1px solid #d2d2d2;
|
||||||
|
outline: 1px solid #d2d2d2;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
justify-self: start;
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.logo h1 {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 200;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: -0.3rem;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
.logo img {
|
||||||
|
height: 1.4rem;
|
||||||
|
margin-top: -0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
font-size: 0.6rem;
|
||||||
|
text-align: right;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
#actual-state {
|
||||||
|
color: #e10000;
|
||||||
|
}
|
||||||
|
.state img {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 10vw auto auto 8vw;
|
||||||
|
grid-template-rows: auto auto auto auto;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
grid-template-areas:
|
||||||
|
". . offsetText ."
|
||||||
|
". tempUp offsetUp ."
|
||||||
|
". reqTemp offset ."
|
||||||
|
". tempDown offsetDown .";
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs .tempUp {
|
||||||
|
grid-area: tempUp;
|
||||||
|
height: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs .tempDown {
|
||||||
|
grid-area: tempDown;
|
||||||
|
height: 3.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs #reqTemp {
|
||||||
|
grid-area: reqTemp;
|
||||||
|
font-size: 3.4rem;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs span {
|
||||||
|
grid-area: offsetText;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
color: #c1c1c1;
|
||||||
|
margin-bottom: -2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs .offsetUp {
|
||||||
|
grid-area: offsetUp;
|
||||||
|
height: 2.5rem;
|
||||||
|
margin-bottom: -1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs #offset {
|
||||||
|
grid-area: offset;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #9a9a9a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputs .offsetDown {
|
||||||
|
grid-area: offsetDown;
|
||||||
|
height: 2.5rem;
|
||||||
|
margin-top: -1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #404040;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100vw;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer #temp {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 2.1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.3rem;
|
||||||
|
right: 0.3rem;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
Reference in New Issue