added frontend design

master
David Zálešák 3 years ago
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;
}