kyle/Backup-Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update public/index.html

Browse Source
This commit is contained in:
kyle
2026-10-05 04:00:38 +00:00
parent 6c486fbaf3
commit 4d8ee209a5
1 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+85
View File
@@ -0,0 +1,85 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Backup Monitor</title>
<link rel="stylesheet" href="/css/styles.css">
<!-- type="module" is deferred by default; no inline JS so a strict CSP works -->
<script type="module" src="/js/app.js"></script>
</head>
<body>
<header class="topbar">
<h1 class="topbar__title">Backup Monitor</h1>
<div class="topbar__meta">
<span id="last-updated" class="muted" aria-live="polite">Loading…</span>
<button id="refresh-btn" class="btn" type="button">Refresh</button>
</div>
</header>
<main class="container">
<div id="error-banner" class="banner banner--error" role="alert" hidden></div>
<!-- Summary cards double as status filters -->
<section class="summary" aria-label="Status summary and filters">
<button type="button" class="summary-card" data-filter="all" aria-pressed="true">
<span class="summary-card__count" data-count="all">–</span>
<span class="summary-card__label">All jobs</span>
</button>
<button type="button" class="summary-card summary-card--failed" data-filter="failed" aria-pressed="false">
<span class="summary-card__count" data-count="failed">–</span>
<span class="summary-card__label">Failed</span>
</button>
<button type="button" class="summary-card summary-card--warning" data-filter="warning" aria-pressed="false">
<span class="summary-card__count" data-count="warning">–</span>
<span class="summary-card__label">Warning</span>
</button>
<button type="button" class="summary-card summary-card--running" data-filter="running" aria-pressed="false">
<span class="summary-card__count" data-count="running">–</span>
<span class="summary-card__label">Running</span>
</button>
<button type="button" class="summary-card summary-card--success" data-filter="success" aria-pressed="false">
<span class="summary-card__count" data-count="success">–</span>
<span class="summary-card__label">Success</span>
</button>
<button type="button" class="summary-card summary-card--overdue" data-filter="overdue" aria-pressed="false">
<span class="summary-card__count" data-count="overdue">–</span>
<span class="summary-card__label">Overdue</span>
</button>
</section>
<div class="toolbar">
<label for="search" class="visually-hidden">Search jobs</label>
<input id="search" class="input" type="search" placeholder="Search company or job…" autocomplete="off">
</div>
<div class="table-wrap">
<table class="jobs">
<thead>
<tr>
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="company">Company</button></th>
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="name">Backup Job</button></th>
<th scope="col" aria-sort="ascending"><button type="button" class="sort" data-sort="status">Status</button></th>
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="lastRun">Last Run</button></th>
<th scope="col" aria-sort="none"><button type="button" class="sort" data-sort="nextRun">Next Scheduled</button></th>
</tr>
</thead>
<tbody id="jobs-body"></tbody>
</table>
<p id="empty-state" class="empty" hidden>No backup jobs match the current filter.</p>
</div>
</main>
<!-- Native <dialog>: built-in focus trap, Esc-to-close, and top-layer rendering -->
<dialog id="detail-dialog" class="modal" aria-labelledby="detail-title">
<div class="modal__header">
<div>
<h2 id="detail-title" class="modal__title"></h2>
<p id="detail-subtitle" class="muted"></p>
</div>
<button type="button" class="btn btn--icon" data-close aria-label="Close">✕</button>
</div>
<div id="detail-body" class="modal__body"></div>
</dialog>
</body>
</html>