80 lines
4.2 KiB
HTML
80 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<!-- @dsCard group="Brand" name="Badges & Status" subtitle="System (online/offline/degraded/error) · Process (running/complete/failed) · Labels" viewport="700x200" -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); display: flex; flex-direction: column; gap: 12px; }
|
|
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
.section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
|
|
|
|
.badge {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
|
|
letter-spacing: 0.1em; text-transform: uppercase;
|
|
padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
}
|
|
.dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
|
|
|
|
/* System / connectivity status */
|
|
.b-online { color: var(--green-bright); border-color: var(--green-dim); background: rgba(152,151,26,0.1); }
|
|
.b-offline { color: var(--fg-muted); border-color: var(--border); background: var(--bg-surface); }
|
|
.b-degraded { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
|
|
.b-error { color: var(--red-bright); border-color: var(--red-dim); background: rgba(204,36,29,0.1); }
|
|
|
|
/* Process / job status */
|
|
.b-running { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(215,153,33,0.1); }
|
|
.b-complete { color: var(--green-bright); border-color: var(--green-dim); background: rgba(152,151,26,0.1); }
|
|
.b-failed { color: var(--red-bright); border-color: var(--red-dim); background: rgba(204,36,29,0.1); }
|
|
.b-pending { color: var(--fg-caption); border-color: var(--border); background: var(--bg-surface); }
|
|
.b-warning { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
|
|
|
|
/* Labels / tags */
|
|
.b-info { color: var(--blue-bright); border-color: var(--blue-dim); background: rgba(69,133,136,0.1); }
|
|
.b-version { color: var(--gold-bright); border-color: var(--gold-dim); background: rgba(215,153,33,0.1); }
|
|
.b-neutral { color: var(--fg-caption); border-color: var(--border); background: var(--bg-surface); }
|
|
|
|
.def { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div>
|
|
<div class="section-label">System / connectivity</div>
|
|
<div class="row">
|
|
<div class="badge b-online"><div class="dot" style="background:var(--green-bright)"></div>Online</div>
|
|
<div class="badge b-offline"><div class="dot" style="background:var(--fg-muted)"></div>Offline</div>
|
|
<div class="badge b-degraded"><div class="dot" style="background:var(--orange-bright)"></div>Degraded</div>
|
|
<div class="badge b-error"><div class="dot" style="background:var(--red-bright)"></div>Error</div>
|
|
</div>
|
|
<div class="def" style="margin-top:5px">Online = reachable and responding · Offline = unreachable · Degraded = reachable but unhealthy · Error = fault condition</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="section-label">Process / job</div>
|
|
<div class="row">
|
|
<div class="badge b-running">Running</div>
|
|
<div class="badge b-complete">✓ Complete</div>
|
|
<div class="badge b-failed">✕ Failed</div>
|
|
<div class="badge b-pending">Pending</div>
|
|
<div class="badge b-warning">Warning</div>
|
|
</div>
|
|
<div class="def" style="margin-top:5px">Running = in progress · Complete = finished successfully · Failed = finished with error · Pending = queued · Warning = finished with caveats</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="section-label">Labels / tags</div>
|
|
<div class="row">
|
|
<div class="badge b-info">Info</div>
|
|
<div class="badge b-version">v2.4.1</div>
|
|
<div class="badge b-neutral">Staging</div>
|
|
<div class="badge b-neutral">Beta</div>
|
|
<div class="badge b-neutral">Read-only</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|