andreasandClaude Fable 5
5d9f161706
Extract the settings redesign's tokens and components into shared static/hbd-ui.css + hbd-ui.js and dedupe settings.html against them. About becomes yaml-key sections with kv rows; Alerts gets stat tiles, chip filters, and alert record rows (same fetch/ack logic); Host Overview keeps its DOM and live-update JS but is re-skinned to the token system with a page toolbar. Live Dashboard intentionally untouched pending its own redesign. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NfPpSpccTWBfZg1FTveyaU
134 lines
4.7 KiB
HTML
134 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
{% include 'head.html' %}
|
|
<link rel="stylesheet" href="/static/hbd-ui.css">
|
|
<script src="/static/hbd-ui.js"></script>
|
|
|
|
<style>
|
|
html, body { height: auto; overflow: visible; }
|
|
body { background: var(--st-paper); padding: 60px 0 0; }
|
|
|
|
.about-main { max-width: 700px; margin: 0 auto; padding: 0 20px 60px; }
|
|
|
|
.hero {
|
|
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
|
|
padding: 26px 2px 0;
|
|
}
|
|
.hero .hb-logo {
|
|
font-family: var(--st-mono); font-size: 30px; font-weight: 700;
|
|
letter-spacing: -.03em; color: var(--st-ink);
|
|
}
|
|
.hero .hb-logo .tld { color: var(--st-accent); }
|
|
.hero .version { font-family: var(--st-mono); font-size: 13px; color: var(--st-accent);
|
|
background: var(--st-accent-soft); border-radius: 999px; padding: 3px 12px; }
|
|
.hero .tagline { flex-basis: 100%; font-size: 13px; color: var(--st-muted); }
|
|
</style>
|
|
|
|
<body>
|
|
{% include 'nav.html' %}
|
|
|
|
<div class="st-toolbar">
|
|
<span class="brand">hbd<span class="tld">·about</span></span>
|
|
<span class="hintline">heartbeat monitoring system</span>
|
|
</div>
|
|
<svg class="pulse" viewBox="0 0 1200 14" preserveAspectRatio="none" aria-hidden="true">
|
|
<polyline points="0,10 340,10 352,10 358,3 364,13 370,1 378,12 384,10 560,10 572,10 578,3 584,13 590,1 598,12 604,10 1200,10"/>
|
|
</svg>
|
|
|
|
<div class="about-main">
|
|
<div class="hero">
|
|
<span class="hb-logo">heart<span class="tld">beat</span></span>
|
|
<span class="version">v{{ hbd_version }}</span>
|
|
<span class="tagline">Lightweight host monitoring over UDP</span>
|
|
</div>
|
|
|
|
<section class="st">
|
|
<div class="sec-head">
|
|
<h2>version<span class="colon">:</span></h2>
|
|
</div>
|
|
<div class="list kv">
|
|
<div class="row">
|
|
<span class="id"><span class="name">server</span></span>
|
|
<span class="val">{{ hbd_version }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="id"><span class="name">python</span></span>
|
|
<span class="val">{{ python_version }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="id"><span class="name">license</span></span>
|
|
<span class="val">MIT</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="st">
|
|
<div class="sec-head">
|
|
<h2>runtime<span class="colon">:</span></h2>
|
|
</div>
|
|
<div class="list kv">
|
|
<div class="row">
|
|
<span class="id"><span class="name">host</span></span>
|
|
<span class="val">{{ server_hostname }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="id"><span class="name">started</span></span>
|
|
<span class="val">{{ start_time_str }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="id"><span class="name">uptime</span></span>
|
|
<span class="val" id="uptime-value">{{ uptime_str }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="id"><span class="name">hosts_monitored</span></span>
|
|
<span class="val">{{ host_count }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="st">
|
|
<div class="sec-head">
|
|
<h2>contact<span class="colon">:</span></h2>
|
|
</div>
|
|
<div class="list kv">
|
|
<div class="row">
|
|
<span class="id"><span class="name">author</span></span>
|
|
<span class="val">Andreas Wrede</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="id"><span class="name">email</span></span>
|
|
<span class="val"><a href="mailto:aew.hbd@wrede.ca">aew.hbd@wrede.ca</a></span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="id"><span class="name">repository</span></span>
|
|
<span class="val"><a href="https://git.wrede.ca/andreas/heartbeat" target="_blank" rel="noopener">git.wrede.ca/andreas/heartbeat</a></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
var startEpoch = {{ start_epoch }};
|
|
var el = document.getElementById('uptime-value');
|
|
if (!el) return;
|
|
function fmt(s) {
|
|
var d = Math.floor(s / 86400);
|
|
var h = Math.floor((s % 86400) / 3600);
|
|
var m = Math.floor((s % 3600) / 60);
|
|
var sec = s % 60;
|
|
if (d > 0) return d + 'd ' + h + 'h ' + m + 'm';
|
|
if (h > 0) return h + 'h ' + m + 'm ' + sec + 's';
|
|
return m + 'm ' + sec + 's';
|
|
}
|
|
function tick() {
|
|
var up = Math.floor(Date.now() / 1000 - startEpoch);
|
|
el.textContent = fmt(up);
|
|
}
|
|
tick();
|
|
setInterval(tick, 1000);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|