2.8

Animated sunscope with day cycle
2026-06-06 14:49:56 +01:00
parent 6da2f34b26
commit f22833ee63
7 changed files with 433 additions and 19 deletions
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SunScope — Scope Lab (dev)</title>
+  <style>
+    body { margin: 0; background: #1a140c; font-family: Manrope, system-ui, sans-serif; color: #f5edd6; }
+    h1 { text-align: center; font-weight: 700; font-size: 18px; padding: 16px 0 4px; opacity: 0.8; }
+    p.note { text-align:center; opacity:0.45; font-size:12px; margin:0 0 12px; }
+    .grid { display: grid; grid-template-columns: repeat(4, 220px); gap: 18px 18px; justify-content: center; padding: 16px 16px 40px; }
+    .cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+    .label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; opacity: 0.9; }
+    iframe { width: 220px; height: 220px; border: 0; background: transparent; }
+  </style>
+</head>
+<body>
+  <h1>SunScope — Scope Lab</h1>
+  <p class="note">dev preview · not shipped · each scope is a real ScopeReticle instance</p>
+  <div id="lab" class="grid"></div>
+
+  <script>
+    const clear  = 'cc=0&ccLow=0&ccMid=0&ccHigh=0&precip=0&snow=0&vis=30';
+    const cloudy = 'cc=75&ccLow=60&ccMid=50&ccHigh=30&precip=0&snow=0&vis=20';
+    const rain   = 'cc=95&ccLow=90&ccMid=70&ccHigh=40&precip=5&snow=0&vis=6';
+    const snowwx = 'cc=95&ccLow=90&ccMid=70&ccHigh=30&precip=0&snow=1.2&vis=4';
+    const storm  = 'cc=100&ccLow=95&ccMid=80&ccHigh=50&precip=9&snow=0&vis=3&storm=1';
+
+    // hour: 7 = sunrise palette, 19 = sunset palette, 12 = noon, 23 = night
+    const scenes = [
+      ['Day · clear',      'elev=45&hour=12&glob=800&' + clear],
+      ['Day · cloudy',     'elev=45&hour=12&glob=500&' + cloudy],
+      ['Day · rain',       'elev=45&hour=12&glob=250&' + rain],
+      ['Day · snow',       'elev=30&hour=12&glob=200&' + snowwx],
+
+      ['Sunrise · clear',  'elev=2&hour=7&glob=120&'  + clear],
+      ['Sunrise · cloudy', 'elev=2&hour=7&glob=90&'   + cloudy],
+      ['Sunrise · rain',   'elev=2&hour=7&glob=60&'   + rain],
+      ['Sunrise · snow',   'elev=2&hour=7&glob=70&'   + snowwx],
+
+      ['Sunset · clear',   'elev=2&hour=19&glob=120&' + clear],
+      ['Sunset · cloudy',  'elev=2&hour=19&glob=90&'  + cloudy],
+      ['Sunset · rain',    'elev=2&hour=19&glob=60&'  + rain],
+      ['Sunset · storm',   'elev=1&hour=19&glob=40&'  + storm],
+
+      ['Night · clear',    'elev=-15&hour=23&glob=0&' + clear],
+      ['Night · cloudy',   'elev=-15&hour=23&glob=0&' + cloudy],
+      ['Night · rain',     'elev=-12&hour=23&glob=0&' + rain],
+      ['Night · snow',     'elev=-12&hour=23&glob=0&' + snowwx],
+    ];
+
+    const lab = document.getElementById('lab');
+    for (const [label, qs] of scenes) {
+      const cell = document.createElement('div');
+      cell.className = 'cell';
+      const lab2 = document.createElement('span');
+      lab2.className = 'label';
+      lab2.textContent = label;
+      const ifr = document.createElement('iframe');
+      ifr.src = './scope-cell.html?' + qs;
+      ifr.loading = 'eager';
+      cell.append(lab2, ifr);
+      lab.append(cell);
+    }
+  </script>
+</body>
+</html>