Adds application

2025-08-16 16:22:11 +02:00 · 2025-08-16 16:22:11 +02:00 · b2dc69142a
commit b2dc69142a
12 changed files with 1683 additions and 0 deletions
--- a/public/JetBrainsMono-Medium.woff2
+++ b/public/JetBrainsMono-Medium.woff2
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,102 @@
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Watch me melt...</title>
+        <style>
+            @font-face {
+                font-family: 'JetBrains Mono';
+                src: local("JetBrainsMono"), url("JetBrainsMono-Medium.woff2");
+            }
+            
+            :root {
+                --background-color: #f1e1d1;
+                --text-color: black;
+                --muted-color: #777777;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                :root {
+                    --background-color: #282c34;
+                    --text-color: #f1e1d1;
+                    --muted-color: #bca6a2;
+                }
+            }
+
+            body {
+                margin: 0;
+                padding: 0;
+                height: 100vh;
+                font-family: 'JetBrains Mono', monospace;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                background-color: var(--background-color);
+                color: var(--text-color);
+            }
+
+            .centered {
+                text-align: center;
+            }
+
+            h1 {
+                font-size: 6rem;
+            }
+            h2 {
+                font-size: 3rem;
+            }
+            h3 {
+                font-size: 2rem;
+            }
+            
+            #temp_display :after {
+                content: "C";
+            }
+            
+            #moisture :after {
+                content: "%";
+            }
+
+            .muted {
+                color: var(--muted-color);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="centered">
+            <h2 style="margin-bottom: 0.5rem">
+                Watch me melt!
+            </h2>
+
+            <span class="muted">in my office...</span>
+            <h3 id="timestamp"></h3>
+            <h1 id="temp_display">0</h1>
+            <h2 id="moisture">0</h2>
+        </div>
+        
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+              const TEMP_DISPLAY = document.querySelector("#temp_display");
+              const MOISTURE = document.querySelector("#moisture");
+              const TIMESTAMP_DISPLAY = document.querySelector("#timestamp");
+              
+              async function requestValues() {
+                const result = await fetch('/get');
+                const data = await result.json();
+                
+                TIMESTAMP_DISPLAY.textContent = new Date().toLocaleString();
+                TEMP_DISPLAY.textContent = `${data.temperature.toLocaleString(undefined, { minimumFractionDigits: 2 })}°C`;
+                MOISTURE.textContent = `${data.moisture}%`;
+              }
+              
+              setInterval(requestValues, 1000);
+              requestValues();
+              
+            })
+        </script>
+    </body>
+</html>