180 lines
7.2 KiB
HTML
180 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Weatherstation Console</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="bg"></div>
|
|
<header class="topbar">
|
|
<div>
|
|
<div class="title">Weatherstation Console</div>
|
|
<div class="subtitle" id="site-meta">
|
|
<a class="site-link" id="site-home" href="/">--</a>
|
|
<span id="site-meta-suffix"></span>
|
|
</div>
|
|
</div>
|
|
<div class="controls">
|
|
<div class="segmented" role="group" aria-label="time range">
|
|
<button class="btn" data-range="6h">6h</button>
|
|
<button class="btn" data-range="24h-last">Last 24h</button>
|
|
<button class="btn active" data-range="24h">24h</button>
|
|
<button class="btn" data-range="72h">72h</button>
|
|
<button class="btn" data-range="7d">7d</button>
|
|
</div>
|
|
<div class="segmented" role="group" aria-label="timezone">
|
|
<button class="btn active" data-tz="local">Local</button>
|
|
<button class="btn" data-tz="utc">UTC</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<section class="panel hero">
|
|
<div class="panel-header">
|
|
<div class="panel-title">Live Snapshot</div>
|
|
<div class="panel-meta" id="last-updated">--</div>
|
|
</div>
|
|
<div class="live-grid">
|
|
<div class="metric">
|
|
<div class="label">Temp C</div>
|
|
<div class="value" id="live-temp">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Humidity</div>
|
|
<div class="value" id="live-rh">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Pressure hPa</div>
|
|
<div class="value" id="live-pressure">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Wind m/s</div>
|
|
<div class="value" id="live-wind">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Gust m/s</div>
|
|
<div class="value" id="live-gust">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Wind Dir deg</div>
|
|
<div class="value" id="live-wdir">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">UVI</div>
|
|
<div class="value" id="live-uvi">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Light Lux</div>
|
|
<div class="value" id="live-lux">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Battery mV</div>
|
|
<div class="value" id="live-battery">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Supercap V</div>
|
|
<div class="value" id="live-supercap">--</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="callouts">
|
|
<div class="callout">
|
|
<div class="callout-title">Deviation Commentary</div>
|
|
<div class="callout-body" id="commentary">Waiting for forecast data...</div>
|
|
</div>
|
|
<div class="callout">
|
|
<div class="callout-title">Observation Summary</div>
|
|
<div class="callout-body" id="obs-summary">--</div>
|
|
</div>
|
|
<div class="callout">
|
|
<div class="callout-title">Forecast Summary</div>
|
|
<div class="callout-body" id="forecast-summary">--</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel charts">
|
|
<div class="panel-header">
|
|
<div class="panel-title">Metrics</div>
|
|
<div class="panel-meta" id="forecast-meta">--</div>
|
|
</div>
|
|
<div class="charts-grid">
|
|
<div class="chart-card" data-chart="chart-temp">
|
|
<div class="chart-header">
|
|
<div class="chart-title">Temperature (obs vs forecast)</div>
|
|
<button class="chart-link" data-chart="chart-temp" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-temp"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-card" data-chart="chart-wind">
|
|
<div class="chart-header">
|
|
<div class="chart-title">Wind (obs vs forecast)</div>
|
|
<button class="chart-link" data-chart="chart-wind" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-wind"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-card" data-chart="chart-rh">
|
|
<div class="chart-header">
|
|
<div class="chart-title">Humidity (obs vs forecast)</div>
|
|
<button class="chart-link" data-chart="chart-rh" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-rh"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-card" data-chart="chart-pressure">
|
|
<div class="chart-header">
|
|
<div class="chart-title">Pressure (obs vs forecast)</div>
|
|
<button class="chart-link" data-chart="chart-pressure" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-pressure"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-card" data-chart="chart-light">
|
|
<div class="chart-header">
|
|
<div class="chart-title">UV Index and Light</div>
|
|
<button class="chart-link" data-chart="chart-light" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-light"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-card" data-chart="chart-power">
|
|
<div class="chart-header">
|
|
<div class="chart-title">Battery + Supercap</div>
|
|
<button class="chart-link" data-chart="chart-power" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-power"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-card" data-chart="chart-rain">
|
|
<div class="chart-header">
|
|
<div class="chart-title" id="chart-rain-title">Rain (obs vs forecast)</div>
|
|
<button class="chart-link" data-chart="chart-rain" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-rain"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|