145 lines
5.8 KiB
HTML
Executable File
145 lines
5.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Home Server Control</title>
|
|
<link rel="stylesheet" href="css/shared.css" />
|
|
<link rel="stylesheet" href="css/dashboard.css" />
|
|
</head>
|
|
<body>
|
|
<div id="toast-container"></div>
|
|
|
|
<main class="page">
|
|
<header class="topbar">
|
|
<div>
|
|
<h1>Home Server Control</h1>
|
|
<p class="tagline">Local console and build deck</p>
|
|
</div>
|
|
<div class="header-meta">
|
|
<div class="clock-display" id="clockDisplay">--:--:--</div>
|
|
<div id="dateDisplay"></div>
|
|
<div id="lastUpdated">Checking status...</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="globalStatus" class="global-ok">
|
|
<div class="status-pulse"></div>
|
|
<span>All systems running normally</span>
|
|
</div>
|
|
|
|
<div class="dashboard-grid">
|
|
<aside class="rail">
|
|
<section class="panel" aria-labelledby="statusTitle">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title" id="statusTitle">System</h2>
|
|
<span id="healthBadge" class="badge neutral">Checking</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="status-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-head"><span>Server</span><span id="serverDot" class="dot green"></span></div>
|
|
<div class="stat-value" id="health">Online</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-head"><span>Website</span><span id="webDot" class="dot green"></span></div>
|
|
<div class="stat-value" id="webStatus">Idle</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-head"><span>Emacs</span><span id="emacsDot" class="dot green"></span></div>
|
|
<div class="stat-value" id="emacsStatus">Idle</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-head"><span>Uptime</span><span class="dot green"></span></div>
|
|
<div class="stat-value" id="uptimeStat">--</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" aria-labelledby="linksTitle">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title" id="linksTitle">Links</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<nav class="quick-links" id="quickLinks" aria-label="Services"></nav>
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
|
|
<div class="main-stack">
|
|
<section class="utility-grid" aria-label="Personal utilities">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Daily Message</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p id="dailyMessage" class="daily-message"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Countdown</h2>
|
|
<span id="countdownLabel" class="badge neutral"></span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="countdown-display" id="countdownDisplay">
|
|
<div class="time-unit"><span class="time-number" id="cd-days">--</span><div class="time-label">Days</div></div>
|
|
<div class="time-unit"><span class="time-number" id="cd-hours">--</span><div class="time-label">Hours</div></div>
|
|
<div class="time-unit"><span class="time-number" id="cd-mins">--</span><div class="time-label">Mins</div></div>
|
|
<div class="time-unit"><span class="time-number" id="cd-secs">--</span><div class="time-label">Secs</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" aria-labelledby="monitorTitle">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title" id="monitorTitle">Uptime Monitor</h2>
|
|
<span class="badge neutral">30 checks</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="uptime-grid" id="uptimeGrid">
|
|
<div class="uptime-item"><div class="uptime-item-label">Days up</div><div class="uptime-item-value" id="uptimeDays">--</div></div>
|
|
<div class="uptime-item"><div class="uptime-item-label">Hours</div><div class="uptime-item-value" id="uptimeHours">--</div></div>
|
|
<div class="uptime-item"><div class="uptime-item-label">Minutes</div><div class="uptime-item-value" id="uptimeMins">--</div></div>
|
|
<div class="uptime-item"><div class="uptime-item-label">Started at</div><div class="uptime-item-value" id="uptimeStart">--</div></div>
|
|
</div>
|
|
<div class="uptime-bar-wrap">
|
|
<div class="uptime-label"><span>Ping success</span><span id="uptimePct">--</span></div>
|
|
<div class="uptime-bar"><div class="uptime-fill" id="uptimeFill"></div></div>
|
|
</div>
|
|
<div class="ping-history" id="pingHistory" aria-label="Recent ping history"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" aria-labelledby="integrationsTitle">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title" id="integrationsTitle">Integrations</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="widget-grid" id="widgetGrid" aria-label="Live integrations"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="run-grid" id="buildGrid" aria-label="Build runs"></section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="modalOverlay" class="modal-overlay hidden">
|
|
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
|
<h3 id="modalTitle">Confirm Action</h3>
|
|
<p id="modalBody">Are you sure?</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-ghost" id="modalCancel">Cancel</button>
|
|
<button class="btn btn-primary" id="modalConfirm">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="js/dashboard.js?v=3"></script>
|
|
</body>
|
|
</html>
|