diff --git a/jsapp/favicon.ico b/jsapp/favicon.ico new file mode 100644 index 0000000..e69de29 diff --git a/jsapp/font/BebasNeue-Regular.ttf b/jsapp/font/BebasNeue-Regular.ttf new file mode 100644 index 0000000..83a29bf Binary files /dev/null and b/jsapp/font/BebasNeue-Regular.ttf differ diff --git a/jsapp/img/arrow_down.svg b/jsapp/img/arrow_down.svg new file mode 100644 index 0000000..138d871 --- /dev/null +++ b/jsapp/img/arrow_down.svg @@ -0,0 +1,60 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/jsapp/img/arrow_down_offset.svg b/jsapp/img/arrow_down_offset.svg new file mode 100644 index 0000000..d1288c3 --- /dev/null +++ b/jsapp/img/arrow_down_offset.svg @@ -0,0 +1,60 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/jsapp/img/arrow_up.svg b/jsapp/img/arrow_up.svg new file mode 100644 index 0000000..7a8b885 --- /dev/null +++ b/jsapp/img/arrow_up.svg @@ -0,0 +1,60 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/jsapp/img/arrow_up_offset.svg b/jsapp/img/arrow_up_offset.svg new file mode 100644 index 0000000..2c24f6a --- /dev/null +++ b/jsapp/img/arrow_up_offset.svg @@ -0,0 +1,60 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/jsapp/img/logo.svg b/jsapp/img/logo.svg new file mode 100644 index 0000000..aa063ca --- /dev/null +++ b/jsapp/img/logo.svg @@ -0,0 +1,90 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/jsapp/img/netopi.svg b/jsapp/img/netopi.svg new file mode 100644 index 0000000..87372b0 --- /dev/null +++ b/jsapp/img/netopi.svg @@ -0,0 +1,60 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/jsapp/index.html b/jsapp/index.html new file mode 100644 index 0000000..7b8292a --- /dev/null +++ b/jsapp/index.html @@ -0,0 +1,48 @@ + + + + + + + + Termostat + + + + + +
+
+ +
+ Aktuální stav +
+ Netopí + Stav - netopí +
+
+
+
+

Požadovaná teplota

+
+ Zvýšit požadovanou teplotu +
27.1
+ Snížit požadovanou teplotu + Offset + Zvýšit offset +
0.3
+ Snížit offset +
+
+ +
+ + + \ No newline at end of file diff --git a/jsapp/style.css b/jsapp/style.css new file mode 100644 index 0000000..e420eaa --- /dev/null +++ b/jsapp/style.css @@ -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; +} \ No newline at end of file