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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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 @@
+
+
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
+
+
+
+
+
+
+
+
+
+
Termostat
+
+
+
Aktuální stav
+
+ Netopí
+
+
+
+
+
+
+
+
+
+
\ 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