101 lines
4 KiB
HTML
101 lines
4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark">
|
|
<title>Nereus Ocean Telemetry</title>
|
|
<link rel="stylesheet" href="vendor/leaflet.css">
|
|
<link rel="stylesheet" href="styles.css?v=20260824-2">
|
|
</head>
|
|
<body>
|
|
<main class="dashboard">
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="brand-mark" aria-hidden="true">
|
|
<svg viewBox="0 0 48 48"><path d="M8 29c7-8 14-8 21 0 5 5 9 5 13 1M10 20c5-6 10-6 15 0 4 4 8 4 12 0"/></svg>
|
|
</span>
|
|
<div>
|
|
<p class="eyebrow">Ocean intelligence</p>
|
|
<h1>Nereus</h1>
|
|
</div>
|
|
</div>
|
|
<a class="dev-link" href="https://fiwlabs.dev" target="_blank" rel="noopener noreferrer"><span>fiwlabs.dev</span><b aria-hidden="true">↗</b></a>
|
|
<div class="clock-block">
|
|
<span>Local time</span>
|
|
<strong id="clock">--:--:--</strong>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="status-grid" aria-label="System status">
|
|
<article class="glass status-card version-card">
|
|
<div class="status-icon">V</div>
|
|
<div>
|
|
<p class="card-label">API version</p>
|
|
<strong id="version-value">offline</strong>
|
|
<span id="version-note">Cluster unavailable</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="glass status-card health-card">
|
|
<div>
|
|
<p class="card-label">Cluster health</p>
|
|
<strong>Service probes</strong>
|
|
</div>
|
|
<div class="probes">
|
|
<div class="probe">
|
|
<span id="liveness-dot" class="indicator unknown"></span>
|
|
<div><b>Liveness</b><time id="liveness-time">No transition yet</time></div>
|
|
</div>
|
|
<div class="probe">
|
|
<span id="readiness-dot" class="indicator unknown"></span>
|
|
<div><b>Readiness</b><time id="readiness-time">No transition yet</time></div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="glass status-card error-card">
|
|
<div>
|
|
<p class="card-label">Client-side API errors</p>
|
|
<strong id="error-total">0</strong>
|
|
<span>non-2xx responses</span>
|
|
</div>
|
|
<div class="error-rate">
|
|
<span id="error-rate">0.0%</span>
|
|
<small>rolling 60s</small>
|
|
<em id="error-state">Waiting for API</em>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="workspace">
|
|
<article class="glass map-card">
|
|
<div class="panel-heading">
|
|
<div><p class="card-label">Active network</p><h2>Buoy positions</h2></div>
|
|
<div class="panel-meta"><span id="buoy-count">0 buoys</span><span id="data-age">No telemetry</span></div>
|
|
</div>
|
|
<div id="map" aria-label="Map of buoy positions"></div>
|
|
<div id="map-state" class="quiet-state">Waiting for buoy positions</div>
|
|
</article>
|
|
|
|
<article class="glass telemetry-card">
|
|
<div class="panel-heading">
|
|
<div><p class="card-label">Latest samples</p><h2>Water conditions</h2></div>
|
|
<span id="telemetry-state" class="connection-pill offline">Offline</span>
|
|
</div>
|
|
<div class="legend" aria-hidden="true"><span class="temperature">Water temperature</span><span class="waves">Wave height</span></div>
|
|
<div class="chart-wrap"><canvas id="readings-chart" aria-label="Recent water temperature and wave height chart"></canvas></div>
|
|
<div class="telemetry-summary">
|
|
<div><span>Temperature</span><strong id="latest-temp">--</strong><small>°C</small></div>
|
|
<div><span>Wave height</span><strong id="latest-wave">--</strong><small>m</small></div>
|
|
<div><span>Salinity</span><strong id="latest-salinity">--</strong><small>PSU</small></div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="vendor/leaflet.js"></script>
|
|
<script src="assets/ne_110m_land.js"></script>
|
|
<script src="app.js?v=20260824-3"></script>
|
|
</body>
|
|
</html>
|