feat: extend the record-row design system to Host Overview, Alerts, and About
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
This commit is contained in:
Claude Fable 5
+85
-164
@@ -1,189 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
{% include 'head.html' %}
|
||||
<link rel="stylesheet" href="/static/hbd-ui.css">
|
||||
<script src="/static/hbd-ui.js"></script>
|
||||
|
||||
<style>
|
||||
html, body { overflow: visible; }
|
||||
html, body { height: auto; overflow: visible; }
|
||||
body { background: var(--st-paper); padding: 60px 0 0; }
|
||||
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
.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;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
font-size: 1.5em;
|
||||
.hero .hb-logo {
|
||||
font-family: var(--st-mono); font-size: 30px; font-weight: 700;
|
||||
letter-spacing: -.03em; color: var(--st-ink);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 24px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,0.1);
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin: 0 0 16px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
|
||||
.info-label {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
color: #666;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #222;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-value a {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
.info-value a:hover { text-decoration: underline; }
|
||||
|
||||
.version-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 12px;
|
||||
background: #e8f0fe;
|
||||
color: #1a73e8;
|
||||
border-radius: 12px;
|
||||
font-size: 1.00em;
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.hb-logo {
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
color: #0066cc;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.hb-tagline {
|
||||
color: #555;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 8px 0 4px;
|
||||
}
|
||||
|
||||
.logo-text { flex: 1; }
|
||||
|
||||
/* ── Dark mode ── */
|
||||
html[data-theme="dark"] h1 { color: var(--text); }
|
||||
html[data-theme="dark"] .subtitle { color: var(--text-sec); }
|
||||
html[data-theme="dark"] .section { background: var(--surface); box-shadow: 0 1px 6px var(--shadow); }
|
||||
html[data-theme="dark"] .section h2 { color: var(--text); border-bottom-color: var(--border); }
|
||||
html[data-theme="dark"] .info-row { border-bottom-color: var(--border-4); }
|
||||
html[data-theme="dark"] .info-label { color: var(--text-sec); }
|
||||
html[data-theme="dark"] .info-value { color: var(--text); }
|
||||
html[data-theme="dark"] .info-value a { color: var(--link); }
|
||||
html[data-theme="dark"] .hb-logo { color: var(--link); }
|
||||
html[data-theme="dark"] .hb-tagline { color: var(--text-sec); }
|
||||
html[data-theme="dark"] .version-badge { background: #1a3255; color: #60a5fa; }
|
||||
.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="container">
|
||||
<h1>{{ header }}</h1>
|
||||
<p class="subtitle">Heartbeat monitoring system</p>
|
||||
<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="section">
|
||||
<div class="logo-section">
|
||||
<div class="logo-text">
|
||||
<div class="hb-logo">Heartbeat</div>
|
||||
<div class="hb-tagline">Lightweight host monitoring over UDP</div>
|
||||
<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>
|
||||
<span class="version-badge">v{{ hbd_version }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="section">
|
||||
<h2>Version</h2>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Server version</span>
|
||||
<span class="info-value">{{ hbd_version }}</span>
|
||||
<section class="st">
|
||||
<div class="sec-head">
|
||||
<h2>runtime<span class="colon">:</span></h2>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Python</span>
|
||||
<span class="info-value">{{ python_version }}</span>
|
||||
<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>
|
||||
<div class="info-row">
|
||||
<span class="info-label">License</span>
|
||||
<span class="info-value">MIT</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="section">
|
||||
<h2>Runtime</h2>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Host</span>
|
||||
<span class="info-value">{{ server_hostname }}</span>
|
||||
<section class="st">
|
||||
<div class="sec-head">
|
||||
<h2>contact<span class="colon">:</span></h2>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Started</span>
|
||||
<span class="info-value">{{ start_time_str }}</span>
|
||||
<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>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Uptime</span>
|
||||
<span class="info-value" id="uptime-value">{{ uptime_str }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Hosts monitored</span>
|
||||
<span class="info-value">{{ host_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Contact & Source</h2>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Author</span>
|
||||
<span class="info-value">Andreas Wrede</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Email</span>
|
||||
<span class="info-value"><a href="mailto:aew.hbd@wrede.ca">aew.hbd@wrede.ca</a></span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Repository</span>
|
||||
<span class="info-value"><a href="https://git.wrede.ca/andreas/heartbeat" target="_blank" rel="noopener">git.wrede.ca/andreas/heartbeat</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user