fraxle
e55e0df86f
Updated event banner to fit top screen Updated table thermal colours to max hot and min cold for 2h, 3h & 4h Ground Lab preview
62 lines
2.7 KiB
HTML
62 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>SunScope — Ground 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: 14px 0 2px; opacity: 0.8; }
|
|
p.note { text-align:center; opacity:0.45; font-size:12px; margin:0 0 10px; }
|
|
.row-label { text-align:center; font-size:12px; font-weight:700; opacity:0.6; margin:14px 0 2px; letter-spacing:1px; text-transform:uppercase; }
|
|
.grid { display: grid; grid-template-columns: repeat(8, 150px); gap: 6px 8px; justify-content: center; padding: 0 12px; }
|
|
.cell { display: flex; flex-direction: column; align-items: center; }
|
|
.label { font-size: 11px; font-weight: 700; opacity: 0.85; }
|
|
iframe { width: 150px; height: 150px; border: 0; background: transparent; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>SunScope — Ground Lab</h1>
|
|
<p class="note">dev preview · per-environment grounds across the cycle</p>
|
|
<div id="lab"></div>
|
|
|
|
<script>
|
|
const envs = ['open','forest','alpine','urban','beach','openwater','desert','river'];
|
|
const envName = { open:'Grass', forest:'Forest', alpine:'Alpine', urban:'City', beach:'Beach', openwater:'Open Water', desert:'Desert', river:'River' };
|
|
|
|
// [rowLabel, base query]
|
|
const rows = [
|
|
['Midday · clear', 'elev=45&hour=12&glob=800&cc=0&vis=30'],
|
|
['Sunset · clear', 'elev=2&hour=19&glob=110&cc=10&vis=30'],
|
|
['Night · clear', 'elev=-15&hour=23&glob=0&cc=10&vis=30'],
|
|
['Midday · overcast','elev=45&hour=12&glob=300&cc=95&ccLow=90&ccMid=70&vis=18'],
|
|
['Day · rain', 'elev=40&hour=12&glob=220&cc=98&ccLow=92&ccMid=75&precip=5&vis=6'],
|
|
['Day · snow', 'elev=30&hour=12&glob=200&cc=95&ccLow=90&snow=1.2&vis=4'],
|
|
];
|
|
|
|
const lab = document.getElementById('lab');
|
|
for (const [rowLabel, q] of rows) {
|
|
const rl = document.createElement('div');
|
|
rl.className = 'row-label';
|
|
rl.textContent = rowLabel;
|
|
lab.appendChild(rl);
|
|
const grid = document.createElement('div');
|
|
grid.className = 'grid';
|
|
for (const env of envs) {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'cell';
|
|
const lbl = document.createElement('span');
|
|
lbl.className = 'label';
|
|
lbl.textContent = envName[env];
|
|
const ifr = document.createElement('iframe');
|
|
ifr.src = `./scope-cell?${q}&env=${env}&_=${Date.now()}`;
|
|
ifr.loading = 'eager';
|
|
cell.append(lbl, ifr);
|
|
grid.append(cell);
|
|
}
|
|
lab.appendChild(grid);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|