refactor from disgusting monolith

static/main.css

@@ -0,0 +1,38 @@
+html, body { 
+  margin:0; padding:0; height:100%; 
+  background:#0b1320; color:#fff; 
+  font-family:system-ui, sans-serif; 
+  overflow:hidden; 
+}
+
+.snowfall { position: fixed; inset:0; pointer-events:none; z-index:1; }
+.flake { 
+  position:absolute; top:-10px; width:6px; height:6px; 
+  background:rgba(255,255,255,0.9); border-radius:50%; 
+  animation:fall linear infinite; 
+}
+@keyframes fall { to { transform: translateY(110vh); } }
+
+.snow-wrapper { 
+  position:fixed; bottom:0; left:0; width:100%; height:0%; 
+  transition:height 2s ease-out; z-index:2; overflow:hidden; 
+}
+svg { position:absolute; top:-80px; width:100%; height:160px; }
+.snow-body { 
+  position:absolute; bottom:0; width:100%; height:100%; 
+  background:
+    radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px),
+    radial-gradient(circle at 60% 40%, #f2f8ff 0 2px, transparent 3px),
+    radial-gradient(circle at 80% 30%, #fff 0 2px, transparent 3px),
+    linear-gradient(#fff, #e6f2ff);
+  background-size:40px 40px,60px 60px,50px 50px,100% 100%; 
+}
+
+.container { 
+  position:relative; z-index:3; height:100%; 
+  display:flex; flex-direction:column; justify-content:center; 
+  align-items:center; gap:.75rem; pointer-events:none; 
+}
+h1 { font-size:clamp(2.5rem,6vw,4rem); margin:0; }
+.amount { font-size:clamp(1.5rem,4vw,2.5rem); opacity:0.9; }
+.meta { opacity:0.6; font-size:0.9rem; }

static/main.js

@@ -0,0 +1,44 @@
+let flakesStarted = false;
+
+async function loadSnow() {
+  if (!navigator.geolocation) return alert('Geolocation not supported');
+
+  navigator.geolocation.getCurrentPosition(async (pos) => {
+    const lat = pos.coords.latitude;
+    const lon = pos.coords.longitude;
+
+    const res = await fetch(`/api/snowfall?lat=${lat}&lon=${lon}`);
+    const data = await res.json();
+
+    document.getElementById('amount').textContent = data.inches + ' inches today';
+    document.getElementById('meta').textContent = data.location + ' • ' + data.today;
+
+    const percent = Math.min(data.inches / data.max_inches, 1);
+    document.getElementById('snowWrapper').style.height = (percent * 100) + '%';
+
+    const now = new Date();
+    document.getElementById('updated').textContent =
+      'Last updated: ' + now.toLocaleTimeString();
+
+    if (data.snowing && !flakesStarted) {
+      spawnSnowflakes();
+      flakesStarted = true;
+    }
+  });
+}
+
+function spawnSnowflakes() {
+  const container = document.getElementById('snowfall');
+  for (let i = 0; i < 90; i++) {
+    const flake = document.createElement('div');
+    flake.className = 'flake';
+    flake.style.left = Math.random()*100+'vw';
+    flake.style.animationDuration = 5+Math.random()*10+'s';
+    flake.style.opacity = Math.random();
+    flake.style.transform = `scale(${Math.random()+0.5})`;
+    container.appendChild(flake);
+  }
+}
+
+loadSnow();
+setInterval(loadSnow, 10*60*1000);