2 files changed, 74 insertions, 0 deletions
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..1cc3e44
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,56 @@
+let polling = true
+const blocks = {
+  time: { interval: 30 * 1000, lastUpdate: 0, update: updateTime },        // 30s
+  weather: { interval: 30 * 60000, lastUpdate: 0, update: updateWeather } // 30min
+  // Add more: { interval: X, lastUpdate: 0, update: updateFunction }
+};
+let lastPoll = 0;
+
+function updateTime() {
+  fetch("/time")
+    .then(res => res.json())
+    .then(data => document.getElementById("time").innerText = data.time);
+}
+
+function updateWeather() {
+  const city = document.getElementById("city").value;
+  fetch(`/weather?city=${encodeURIComponent(city)}`)
+    .then(res => res.json())
+    .then(data => {
+      const weatherBlock = document.getElementById("weather");
+      if (!data) weatherBlock.innerText = "Error: Bad city";
+      else weatherBlock.innerText = `${data.summary}`;
+    });
+}
+
+function pollUpdates() {
+  if (!polling) return;
+  const now = Date.now();
+  Object.keys(blocks).forEach(key => {
+    const block = blocks[key];
+    if (now - block.lastUpdate >= block.interval) {
+      block.update();
+      block.lastUpdate = now;
+    }
+  });
+  lastPoll = now;
+}
+
+function reloadAll() {
+  Object.keys(blocks).forEach(key => {
+    blocks[key].update();
+    blocks[key].lastUpdate = Date.now();
+  });
+}
+
+// Header controls
+document.getElementById("reload").addEventListener("click", reloadAll);
+document.getElementById("pause").addEventListener("change", (e) => {
+  polling = e.target.checked;
+});
+
+// Initial load
+reloadAll();
+// Poll every 500ms to check intervals (fast enough for 1s updates, light on CPU)
+// maybe the 1s updates should be special case, but for now let's keep it simple
+setInterval(pollUpdates, 500);
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..ff01a13
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,18 @@
+body { margin: 0 }
+
+header { padding: 10px; text-align: center; }
+header button, header label { margin: 0 10px; }
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+}
+
+.block {
+    aspect-ratio: 1;
+    border: 1px solid #000;
+    background: #fff;
+    padding: 10px;
+    text-align: left;
+}