feat: frontend design A with scaling, formatting, refresh and error states

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/index.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="nl">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
+<title>Weerscherm</title>
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="Weer">
+<meta name="theme-color" content="#E8EDF1">
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="apple-touch-icon" href="icons/icon-180.png">
+<link rel="icon" href="icons/icon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div id="viewport">
+  <main id="stage" class="da" aria-live="polite">
+    <header class="a-top">
+      <span class="a-date" id="date">&nbsp;</span>
+      <span class="a-right">
+        <span class="a-status" id="status" hidden></span>
+        <span class="a-upd" id="upd">meting –</span>
+        <span class="a-clock num" id="clock">–:–</span>
+      </span>
+    </header>
+
+    <section class="a-hero">
+      <p class="a-label">Buiten <span class="a-trend" id="trend"></span></p>
+      <p class="a-temp num" id="temp">–</p>
+      <div class="a-range">
+        <div class="a-track"><span class="a-mark" id="mark" style="left:50%"></span></div>
+        <div class="a-ends num">
+          <span><b class="cold" id="min">–</b><span id="min-at">laagst om –</span></span>
+          <span><b class="warm" id="max">–</b><span id="max-at">hoogst om –</span></span>
+        </div>
+      </div>
+    </section>
+
+    <section class="a-inside" id="rooms"></section>
+
+    <section class="a-bottom">
+      <div>
+        <p class="a-sub">Regen</p>
+        <div class="a-rainrow">
+          <div>
+            <p class="a-rbig"><span class="num" id="rain-today">–</span> mm</p>
+            <p class="a-rsm">vandaag</p>
+            <p class="a-month"><span id="month-name">–</span><b class="num" id="month-total">–</b></p>
+          </div>
+          <div class="a-bars" id="bars"></div>
+        </div>
+      </div>
+      <div class="a-fc" id="forecast"></div>
+    </section>
+
+    <div class="banner" id="banner">Gegevens laden…</div>
+  </main>
+</div>
+<div id="rotate">Draai de iPad een kwartslag</div>
+<script type="module" src="app.js"></script>
+</body>
+</html>