Add webserver functionality and HTML interface for alarm clock

2026-02-19 10:06:06 +02:00
parent 8643892414
commit f4e6cdbeea
4 changed files with 243 additions and 1 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alarm Clock</title>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+        }
+        .container {
+            background: rgba(255,255,255,0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 40px;
+            text-align: center;
+            max-width: 400px;
+            width: 90%;
+        }
+        h1 { margin-bottom: 30px; font-size: 1.8rem; }
+        .time { font-size: 3rem; font-weight: 300; margin-bottom: 20px; }
+        .alarm-time { font-size: 1.5rem; color: #4fc3f7; margin-bottom: 30px; }
+        .alarm-active { color: #ff5252; animation: pulse 1s infinite; }
+        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+        .controls { display: flex; flex-direction: column; gap: 15px; }
+        .time-input { display: flex; justify-content: center; gap: 10px; align-items: center; }
+        input[type="number"] {
+            width: 60px; padding: 10px; font-size: 1.2rem;
+            border: none; border-radius: 8px; text-align: center;
+            background: rgba(255,255,255,0.2); color: #fff;
+        }
+        input[type="number"]:focus { outline: 2px solid #4fc3f7; }
+        button {
+            padding: 12px 24px; font-size: 1rem; border: none;
+            border-radius: 8px; cursor: pointer; transition: all 0.2s;
+        }
+        .btn-primary { background: #4fc3f7; color: #1a1a2e; }
+        .btn-primary:hover { background: #29b6f6; }
+        .btn-danger { background: #ff5252; color: #fff; }
+        .btn-danger:hover { background: #ff1744; }
+        .status { margin-top: 20px; font-size: 0.9rem; color: #aaa; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Alarm Clock</h1>
+        <div class="time" id="currentTime">--:--:--</div>
+        <div class="alarm-time" id="alarmTime">Alarm: --:--</div>
+        <div class="controls">
+            <div class="time-input">
+                <input type="number" id="hour" min="0" max="23" placeholder="HH">
+                <span>:</span>
+                <input type="number" id="minute" min="0" max="59" placeholder="MM">
+            </div>
+            <button class="btn-primary" onclick="setAlarm()">Set Alarm</button>
+            <button class="btn-danger" id="dismissBtn" onclick="dismissAlarm()" style="display:none">Dismiss Alarm</button>
+        </div>
+        <div class="status" id="status"></div>
+    </div>
+    <script>
+        async function fetchStatus() {
+            try {
+                const res = await fetch('/api/status');
+                const data = await res.json();
+                document.getElementById('currentTime').textContent = data.current_time;
+                const alarmEl = document.getElementById('alarmTime');
+                alarmEl.textContent = 'Alarm: ' + (data.alarm_time || '--:--');
+                alarmEl.classList.toggle('alarm-active', data.alarm_active);
+                document.getElementById('dismissBtn').style.display = data.alarm_active ? 'block' : 'none';
+            } catch (e) {
+                document.getElementById('status').textContent = 'Connection error';
+            }
+        }
+        async function setAlarm() {
+            const hour = parseInt(document.getElementById('hour').value);
+            const minute = parseInt(document.getElementById('minute').value);
+            if (isNaN(hour) || isNaN(minute)) {
+                document.getElementById('status').textContent = 'Please enter valid hour and minute';
+                return;
+            }
+            try {
+                const res = await fetch('/api/alarm', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ hour, minute })
+                });
+                const data = await res.json();
+                document.getElementById('status').textContent = data.success ? 'Alarm set!' : data.error;
+                fetchStatus();
+            } catch (e) {
+                document.getElementById('status').textContent = 'Failed to set alarm';
+            }
+        }
+        async function dismissAlarm() {
+            try {
+                await fetch('/api/dismiss', { method: 'POST' });
+                fetchStatus();
+            } catch (e) {
+                document.getElementById('status').textContent = 'Failed to dismiss alarm';
+            }
+        }
+        fetchStatus();
+        setInterval(fetchStatus, 1000);
+    </script>
+</body>
+</html>