test

assets/css/style.css

@@ -4,12 +4,14 @@ body {
     display: flex;
     flex-direction: column;
     font-size: 1.2rem;
+    padding-inline: 10%;
+    font-family: sans-serif;
 }
 
 #mainStats {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 1em;
     margin: auto;
     justify-content: center;
     align-items: center;
@@ -28,16 +30,33 @@ body {
     flex-wrap: wrap;
     justify-content: center;
     align-items: stretch;
-    gap: 2rem;
+    gap: 1em 5em;
 }
 
 #mainStats .stats .wrapper {
     display: flex;
-    gap: 2rem;
+    gap: 1em;
+    flex-direction: column;
 }
 
 #mainStats .stats .values {
     background-color: #dddddd;
     padding: 0.5rem 2rem;
     border-radius: 1rem;
+    width: 10em;
+    flex: 1;
+}
+
+p {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0 1em;
 }

templates/sk/index.eta

@@ -1,35 +1,76 @@
 <% layout("/sk/layout") %>
 
-<% /* <%~ include("/sk/partials/navbar") %> */ %>
+<%~ include("/sk/partials/topbar") %>
+
+<% const tickIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <circle cx="12" cy="12" r="10" />
+            <path d="m9 12l2 2l4-4" />
+        </g>
+    </svg>
+` %>
+
+<% const xIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <circle cx="12" cy="12" r="10" />
+            <path d="m15 9l-6 6m0-6l6 6" />
+        </g>
+    </svg>
+` %>
+
+<% const tempIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0" />
+    </svg>
+` %>
+
+<% const pressureIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 14l4-4M3.34 19a10 10 0 1 1 17.32 0" />
+    </svg>
+` %>
+
+<% const humidityIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5S5 13 5 15a7 7 0 0 0 7 7" />
+    </svg>
+` %>
+
+<% const altitudeIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <circle cx="12" cy="12" r="10" />
+            <path d="m16 12l-4-4l-4 4m4 4V8" />
+        </g>
+    </svg>
+` %>
 
 <div id="mainStats">
-    <div class="message">
+    <% /* <div class="message">
         <p>oops</p>
-    </div>
-    
-    <div class="title">
-        <h2>datum cas</h2>
-    </div>
+    </div> */ %>
 
     <div class="stats">
         <div class="wrapper">
             <h3>vnútorné</h3>
             <div class="values indoor">
-                <p>teplota: <%= it.data?.[0]?.indoorTemp / 100 %> °C</p>
-                <p>tlak: <%= it.data?.[0]?.indoorPressure / 100 %> hPa</p>
-                <p>vlhkosť: <%= it.data?.[0]?.indoorHumidity / 100 %>%</p>
-                <p>nadmorská výška: <%= it.data?.[0]?.indoorAltitude / 100 %>m</p>
+                <p><%~ tempIcon %> <%= it.data?.[0]?.indoorTemp / 100 %> °C</p>
+                <p><%~ pressureIcon %> <%= it.data?.[0]?.indoorPressure / 100 %> hPa</p>
+                <p><%~ humidityIcon %> <%= it.data?.[0]?.indoorHumidity / 100 %>%</p>
+                <p><%~ altitudeIcon %> <%= it.data?.[0]?.indoorAltitude / 100 %>m</p>
             </div>
         </div>
 
         <div class="wrapper">
             <h3>vonkajšie</h3>
             <div class="values outdoor">
-                <p>pripojenie <%= it.data?.[0]?.outdoorConnected %></p>
-                <p>teplota: <%= it.data?.[0]?.outdoorTemp / 100 %> °C</p>
-                <p>tlak: <%= it.data?.[0]?.outdoorPressure / 100 %> hPa</p>
-                <p>vlhkosť: <%= it.data?.[0]?.outdoorHumidity / 100 %>%</p>
-                <p>nadmorská výška: <%= it.data?.[0]?.outdoorAltitude / 100 %>m</p>
+                <p><%~ it.data?.[0]?.outdoorConnected ? `${tickIcon} pripojene` : `${xIcon} odpojene` %></p>
+                <p><%~ tempIcon %> <%= it.data?.[0]?.outdoorTemp / 100 %> °C</p>
+                <p><%~ pressureIcon %> <%= it.data?.[0]?.outdoorPressure / 100 %> hPa</p>
+                <p><%~ humidityIcon %> <%= it.data?.[0]?.outdoorHumidity / 100 %>%</p>
+                <p><%~ altitudeIcon %> <%= it.data?.[0]?.outdoorAltitude / 100 %>m</p>
             </div>
         </div>
     </div>

templates/sk/partials/navbar.eta

@@ -1,7 +0,0 @@
-<nav>
-    <h2>meteostanica</h2>
-
-    <ul>
-        <li><a href="/en">🦅🦅🦅🇺🇸🇺🇸🇺🇸</a></li>
-    </ul>
-</nav>

templates/sk/partials/topbar.eta

@@ -0,0 +1,25 @@
+<% const timeIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 6v6l4 2" />
+        </g>
+    </svg>
+` %>
+
+<% const dateIcon = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="M8 2v4m8-4v4" />
+            <rect width="18" height="18" x="3" y="4" rx="2" />
+            <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
+        </g>
+    </svg>
+` %>
+
+<% const date = new Date() %>
+
+<header>
+    <p><%~ timeIcon %> <%= date.getHours() %>:<%= date.getMinutes() %></p>
+    <p><%= date.getDate() %>. <%= date.getMonth() + 1 %>. <%= date.getFullYear() %> <%~ dateIcon %></p>
+</header>