feat(dashboard): add AdGuard + Scrutiny frontend integration

This commit is contained in:
2026-04-05 21:19:13 +00:00
parent e1cac18083
commit 9976a3f85c
+89 -2
View File
@@ -765,7 +765,35 @@
grid-template-columns: 1fr;
}
}
</style>
.net-health-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.net-health-grid .card {
min-width: 0;
}
.adguard-stats,
.scrutiny-stats {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.adguard-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.82rem;
color: var(--text-dim);
}
@media (max-width: 700px) {
.net-health-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="hud-noise"></div>
@@ -1066,13 +1094,72 @@
</div>
</section>
<section class="section">
<div class="section-head">
<span class="section-label">Network &amp; Health</span>
<p>DNS filtering · Disk integrity</p>
</div>
<div class="net-health-grid">
<!-- AdGuard DNS -->
<article class="card">
<div class="card-inner">
<div class="card-head">
<span class="card-label">AdGuard Home</span>
<span class="status-pill offline" id="adguard-pill">Offline</span>
</div>
<h2 class="card-title">DNS Filtering</h2>
<div class="adguard-stats">
<div class="adguard-row">
<span>Total Queries</span>
<span class="metric-accent online" id="adguard-total">0</span>
</div>
<div class="adguard-row">
<span>Blocked</span>
<span class="metric-accent online" id="adguard-blocked">0</span>
</div>
<div class="adguard-row">
<span>Block Rate</span>
<span class="metric-accent online" id="adguard-blocked-pct">0%</span>
</div>
<div class="metric-bar">
<span id="adguard-bar-fill" style="width:0%"></span>
</div>
<div class="adguard-row">
<span>Avg Latency</span>
<span class="metric-accent online" id="adguard-latency">0 MS</span>
</div>
</div>
</div>
</article>
<!-- Scrutiny SMART -->
<article class="card">
<div class="card-inner">
<div class="card-head">
<span class="card-label">Scrutiny</span>
<span class="status-pill offline" id="scrutiny-pill">Offline</span>
</div>
<h2 class="card-title">Disk Health</h2>
<div class="scrutiny-stats" id="scrutiny-list">
<div class="storage-row"><strong style="color:var(--text-dim)">No data</strong><span></span><span></span><span></span></div>
</div>
</div>
</article>
</div>
</section>
<section class="section">
<div class="section-head">
<span class="section-label">Quick Access</span>
<p>Supplemental launch surface only</p>
</div>
<div class="quick-grid" id="quick-grid">
<div class="quick-grid" id="quick-access-grid">
<article class="card quick-card">
<div class="card-inner">
<span class="card-label">Core</span>