217 lines
8.8 KiB
HTML
217 lines
8.8 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="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">
|
|
<link rel="icon" href="/favicon.ico" sizes="any">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<link rel="stylesheet" href="/vendor/fonts/fonts.css">
|
|
<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 active" data-range="24h">24h</button>
|
|
<button class="btn" data-range="72h">72h</button>
|
|
<button class="btn" data-range="7d">7d</button>
|
|
<button class="btn" data-range="1m">1mo</button>
|
|
</div>
|
|
<div class="segmented" role="group" aria-label="window">
|
|
<button class="btn active" data-mode="current">Current</button>
|
|
<button class="btn" data-mode="last">Last</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 metric-weather">
|
|
<div class="label">Weather</div>
|
|
<div class="weather-icons" aria-label="weather icons">
|
|
<span class="weather-icon" id="live-icon-sun" title="Sunny">☀️</span>
|
|
<span class="weather-icon" id="live-icon-cloud" title="Cloudy">☁️</span>
|
|
<span class="weather-icon" id="live-icon-rain" title="Rain">🌧️</span>
|
|
</div>
|
|
<div class="weather-caption" id="live-weather-text">--</div>
|
|
</div>
|
|
<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">Rain 1h %</div>
|
|
<div class="value" id="live-rain-prob">--</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="label">Rain hour mm</div>
|
|
<div class="value" id="live-rain-hour">--</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">Barometer Outlook</div>
|
|
<div class="callout-body" id="baro-outlook">--</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 class="chart-card" data-chart="chart-rain-prob">
|
|
<div class="chart-header">
|
|
<div class="chart-title">Predicted Rain Probability (Model)</div>
|
|
<button class="chart-link" data-chart="chart-rain-prob" title="Copy chart link">Share</button>
|
|
</div>
|
|
<div class="chart-canvas">
|
|
<canvas id="chart-rain-prob"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/vendor/js/chart.umd.min.js"></script>
|
|
<script src="/vendor/js/chartjs-adapter-date-fns.bundle.min.js"></script>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|