68 lines
3.1 KiB
HTML
68 lines
3.1 KiB
HTML
<!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>
|