pixx/ESP8266-termostat
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

aktualizace stylu - web interface

Browse Source 
resolve #7
This commit is contained in:
David Zálešák
2023-10-30 13:57:32 +01:00
parent 62f8638a8f
commit f912c7bb74
6 changed files with 64 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
data/img/arrow_up.svg → data/img/arrow.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

60
data/img/arrow_down.svg
View File

@@ -1,60 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

60
data/img/arrow_down_offset.svg
View File

@@ -1,60 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

60
data/img/arrow_up_offset.svg
View File

@@ -1,60 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

60
data/index.html
View File

@@ -11,38 +11,36 @@
</head>
<body>
<main>
<header>
<div class="logo">
<img src="img/logo.svg" alt="Logo">
<h1>Termo<sub>stat</sub></h1>
<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>
<span id="actual-state">Netopí</span>
<img id="actual-state-img" src="img/netopi.svg" alt="Stav - netopí">
</div>
<div class="state">
<span>Aktuální stav</span>
<div>
<span id="actual-state">Netopí</span>
<img id="actual-state-img" src="img/netopi.svg" alt="Stav - netopí">
</div>
</div>
</header>
<section>
<h2>Požadovaná teplota</h2>
<div class="inputs">
<img id="tempUp" src="img/arrow_up.svg" alt="Zvýšit požadovanou teplotu">
<div id="reqTemp">0</div>
<img id="tempDown" src="img/arrow_down.svg" alt="Snížit požadovanou teplotu">
<span>Offset</span>
<img id="offsetUp" src="img/arrow_up_offset.svg" alt="Zvýšit offset">
<div id="offset">0</div>
<img id="offsetDown" src="img/arrow_down_offset.svg" alt="Snížit offset">
</div>
</section>
<footer>
<h2>Aktuální teplota</h2>
<div id="temp">0</div>
<div class="git"><a href="https://git.microlab.space/pixx/ESP8266-termostat">Git</a></div>
</footer>
</main>
</div>
</header>
<section>
<h2>Požadovaná teplota</h2>
<div class="inputs">
<img id="tempUp" src="img/arrow.svg" alt="Zvýšit teplotu">
<div id="reqTemp">0</div>
<img id="tempDown" src="img/arrow.svg" alt="Snížit teplotu">
<span>Offset</span>
<img id="offsetUp" src="img/arrow.svg" alt="Zvýšit offset">
<div id="offset">0</div>
<img id="offsetDown" src="img/arrow.svg" alt="Snížit offset">
</div>
</section>
<footer>
<h2>Aktuální teplota</h2>
<div id="temp">0</div>
<div class="git"><a href="https://git.microlab.space/pixx/ESP8266-termostat">Git</a></div>
</footer>
<script src="script.js"></script>
</body>

46
data/style.css
View File

@@ -10,13 +10,13 @@ html {
margin: 0;
font-family: bebas;
font-size: 7vw;
font-size: min(4vh, 6vw);
color: #404040;
}
main {
height: 100vh;
width: 100vw;
body {
display: flex;
flex-direction: column;
}
header {
@@ -39,6 +39,7 @@ header {
grid-template-rows: auto;
align-items: center;
}
.logo h1 {
display: inline-block;
font-weight: 200;
@@ -46,6 +47,7 @@ header {
margin-left: -0.3rem;
font-size: 1.7rem;
}
.logo img {
height: 1.4rem;
margin-top: -0.3rem;
@@ -56,15 +58,24 @@ header {
text-align: right;
align-self: center;
}
#actual-state.topi {
color: #31B907;
}
#actual-state {
color: #e10000;
}
.state img {
vertical-align: middle;
margin-left: 0.2rem;
width: .8rem;
}
section {
flex-grow: 4;
overflow: scroll;
}
section h2 {
@@ -76,16 +87,16 @@ section h2 {
.inputs {
display: grid;
grid-template-columns: 10vw auto auto 8vw;
grid-template-columns: auto auto;
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 .";
". offsetText"
"tempUp offsetUp"
"reqTemp offset"
"tempDown offsetDown";
}
.inputs #tempUp {
@@ -96,6 +107,7 @@ section h2 {
.inputs #tempDown {
grid-area: tempDown;
height: 3.2rem;
transform: rotate(180deg);
}
.inputs #reqTemp {
@@ -115,6 +127,7 @@ section h2 {
grid-area: offsetUp;
height: 2.5rem;
margin-bottom: -1.5rem;
filter: invert(61%) sepia(81%) saturate(13%) hue-rotate(26deg) brightness(88%) contrast(86%);
}
.inputs #offset {
@@ -127,12 +140,12 @@ section h2 {
grid-area: offsetDown;
height: 2.5rem;
margin-top: -1.5rem;
transform: rotate(180deg);
filter: invert(61%) sepia(81%) saturate(13%) hue-rotate(26deg) brightness(88%) contrast(86%);
}
footer {
background-color: #404040;
position: absolute;
bottom: 0;
width: 100vw;
color: white;
}
@@ -162,4 +175,15 @@ a {
a:visited {
color: #c1c1c1;
}
@media only screen and (min-width: 768px) {
.inputs {
grid-template-columns: 35vw auto auto 30vw;
grid-template-areas:
". . offsetText ."
". tempUp offsetUp ."
". reqTemp offset ."
". tempDown offsetDown .";
}
}