From e8af468f1e7102c4b4dd3c1ac59f4f8c5f78c0a6 Mon Sep 17 00:00:00 2001 From: Micha Date: Mon, 6 Apr 2026 18:24:24 +0200 Subject: [PATCH] Refine dashboard card icons and storage layout --- .../assets/js/renderers/network-health.js | 113 ++-- apps/dashboard/assets/js/renderers/storage.js | 94 ++- apps/dashboard/dashboard.html | 592 +++++++++++++++++- 3 files changed, 683 insertions(+), 116 deletions(-) diff --git a/apps/dashboard/assets/js/renderers/network-health.js b/apps/dashboard/assets/js/renderers/network-health.js index c69bd7c..4c17602 100644 --- a/apps/dashboard/assets/js/renderers/network-health.js +++ b/apps/dashboard/assets/js/renderers/network-health.js @@ -1,84 +1,69 @@ export function renderNetworkHealth(state) { - _renderAdGuard(state.adguard || {}); - _renderScrutiny(state.scrutiny || {}); + renderAdGuard(state.adguard || {}); + renderScrutiny(state.scrutiny || {}); } -function _renderAdGuard(d) { - const online = d.source_status === "online"; +function renderAdGuard(data) { + const online = data.source_status === "online"; + setPill("adguard-pill", online ? "ONLINE" : "OFFLINE", online ? "pill-online" : "pill-offline"); - const pill = document.getElementById("adguard-pill"); - if (pill) { - pill.textContent = online ? "ONLINE" : "OFFLINE"; - pill.className = "status-pill " + (online ? "pill-online" : "pill-offline"); - } + setText("adguard-total", online ? fmtCompact(data.total_queries) : "\u2014"); + setText("adguard-blocked", online ? fmtCompact(data.blocked_queries) : "\u2014"); + setText("adguard-blocked-pct", online ? `${Math.round(data.blocked_percent ?? 0)}%` : "\u2014"); + setText("adguard-latency", online ? `${Math.round(data.avg_processing_ms ?? 0)}ms` : "\u2014"); - const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; }; - - if (online) { - set("adguard-total", fmtK(d.total_queries)); - set("adguard-blocked", fmtK(d.blocked_queries)); - set("adguard-blocked-pct", `${d.blocked_percent ?? 0}%`); - set("adguard-latency", `${d.avg_processing_ms ?? 0}ms`); - - const bar = document.getElementById("adguard-bar-fill"); - if (bar) bar.style.width = `${Math.min(d.blocked_percent ?? 0, 100)}%`; - } else { - ["adguard-total", "adguard-blocked", "adguard-blocked-pct", "adguard-latency"].forEach(id => set(id, "—")); - const bar = document.getElementById("adguard-bar-fill"); - if (bar) bar.style.width = "0%"; + const fill = document.getElementById("adguard-bar-fill"); + if (fill) { + fill.style.width = `${online ? Math.min(data.blocked_percent ?? 0, 100) : 0}%`; } } -function _renderScrutiny(d) { - const online = d.source_status === "online"; +function renderScrutiny(data) { + const online = data.source_status === "online"; + setPill("scrutiny-pill", online ? "ONLINE" : "OFFLINE", online ? "pill-online" : "pill-offline"); - const pill = document.getElementById("scrutiny-pill"); - if (pill) { - pill.textContent = online ? "ONLINE" : "OFFLINE"; - pill.className = "status-pill " + (online ? "pill-online" : "pill-offline"); - } + const total = data.total_count ?? 0; + const failed = data.failed_count ?? 0; + const passed = Math.max(total - failed, 0); - // stat blocks - const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; }; - if (online) { - set("scrutiny-total", d.total_count ?? 0); - set("scrutiny-failed", d.failed_count ?? 0); - const passedEl = document.getElementById("scrutiny-passed"); - if (passedEl) { - passedEl.textContent = (d.total_count ?? 0) - (d.failed_count ?? 0); - } - } else { - set("scrutiny-total", "—"); - set("scrutiny-failed", "—"); - set("scrutiny-passed", "—"); - } + setText("scrutiny-total", online ? total : "\u2014"); + setText("scrutiny-passed", online ? passed : "\u2014"); + setText("scrutiny-failed", online ? failed : "\u2014"); - // disk list const list = document.getElementById("scrutiny-list"); if (!list) return; - if (!online || !d.devices || d.devices.length === 0) { - list.innerHTML = `
— ${online ? "no devices" : "offline"}
`; + const devices = Array.isArray(data.devices) ? data.devices.slice(0, 3) : []; + if (!online || devices.length === 0) { + list.innerHTML = `
\u2014 ${online ? "no disks" : "offline"}
`; return; } - list.innerHTML = d.devices.map(dev => { - const ok = dev.status === "passed"; - const icon = ok ? "✓" : dev.status === "failed" ? "✗" : "?"; - const cls = ok ? "disk-ok" : dev.status === "failed" ? "disk-fail" : "disk-unk"; - const temp = dev.temperature != null ? `${dev.temperature}°C` : ""; - return ` -
- ${icon} - ${dev.name} - ${dev.model} - ${temp} -
`; - }).join(""); + list.innerHTML = `
${devices.map((device) => { + const status = device.status || "unknown"; + const cls = status === "passed" ? "ok" : status === "failed" ? "fail" : "unk"; + const token = status === "passed" ? "OK" : status === "failed" ? "ER" : "--"; + const name = device.name || device.device || "disk"; + + return `${token}${name}`; + }).join("")}
`; } -function fmtK(n) { - if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M"; - if (n >= 1_000) return (n / 1_000).toFixed(0) + "K"; - return String(n ?? 0); +function setText(id, value) { + const el = document.getElementById(id); + if (el) el.textContent = value; +} + +function setPill(id, label, cls) { + const el = document.getElementById(id); + if (!el) return; + el.textContent = label; + el.className = `status-pill ${cls}`; +} + +function fmtCompact(value) { + const num = Number(value ?? 0); + if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`; + if (num >= 1_000) return `${Math.round(num / 1_000)}K`; + return `${num}`; } diff --git a/apps/dashboard/assets/js/renderers/storage.js b/apps/dashboard/assets/js/renderers/storage.js index 3cc07b9..ee77a51 100644 --- a/apps/dashboard/assets/js/renderers/storage.js +++ b/apps/dashboard/assets/js/renderers/storage.js @@ -3,26 +3,84 @@ export function renderStorage(state) { const grid = document.getElementById("storage-grid"); if (!grid) return; + const root = storage.root || storage.disks?.[0] || null; const disks = storage.disks || []; - if (!disks.length) { - grid.innerHTML = '
No disk data
'; - return; - } + const rootPct = root?.usage_percent ?? 0; + const rootTone = pickTone(rootPct); + const warningCount = disks.filter((disk) => between(disk.usage_percent, 70, 85)).length; + const criticalCount = disks.filter((disk) => (disk.usage_percent ?? 0) > 85).length; + const highest = disks.length + ? disks.reduce((current, disk) => ((disk.usage_percent ?? 0) > (current.usage_percent ?? 0) ? disk : current), disks[0]) + : null; + const matrixPill = criticalCount > 0 ? "pill-offline" : warningCount > 0 ? "pill-degraded" : "pill-online"; + const strip = disks.length + ? disks.slice(0, 4).map((disk) => { + const pct = disk.usage_percent ?? 0; + return `${disk.name || disk.mount} ${pct.toFixed(0)}%`; + }).join("") + : 'No disk data'; - grid.innerHTML = disks.map(disk => { - const pct = disk.usage_percent ?? 0; - const fillClass = pct > 85 ? "danger" : pct > 70 ? "warn" : ""; - const statusColor = disk.status === "critical" ? "var(--red)" : disk.status === "warning" ? "var(--yellow)" : "var(--teal)"; - return ` -
-
- ${disk.name || disk.mount} - ${pct.toFixed(1)}% + grid.innerHTML = ` +
+
+
+ + ROOT STORAGE
-
${disk.mount} · ${disk.used_gb?.toFixed(1)}/${disk.total_gb?.toFixed(1)} GB
-
-
+ ${(root?.status || "stable").toUpperCase()} +
+
+
${root ? `${rootPct.toFixed(1)}%` : "\u2014"}
Usage
+
${root ? fmtNum(root.used_gb) : "\u2014"}
Used GB
+
${root ? fmtNum(root.free_gb) : "\u2014"}
Free GB
+
+
+
${root?.mount || "/"}${root ? `${rootPct.toFixed(1)}%` : "0%"}
+
+
+
+
+
+
+ + DISK MATRIX
-
`; - }).join(""); + ${disks.length} +
+
+
${disks.length || "\u2014"}
Volumes
+
${warningCount}
Warning
+
${criticalCount}
Critical
+
${highest ? `${(highest.usage_percent ?? 0).toFixed(0)}%` : "\u2014"}
Peak
+
+
Mounted Volumes
${strip}
+
+ `; +} + +function fmtNum(value) { + return value == null ? "\u2014" : Number(value).toFixed(1); +} + +function between(value, min, max) { + const num = value ?? 0; + return num > min && num <= max; +} + +function pickTone(pct) { + if (pct > 85) return "danger"; + if (pct > 70) return "warn"; + return ""; +} + +function pickColor(pct) { + if (pct > 85) return "var(--red)"; + if (pct > 70) return "var(--yellow)"; + return "var(--teal-bright)"; +} + +function statusPill(status) { + if (status === "critical") return "pill-offline"; + if (status === "warning") return "pill-degraded"; + return "pill-online"; } diff --git a/apps/dashboard/dashboard.html b/apps/dashboard/dashboard.html index 77483ac..4a718df 100644 --- a/apps/dashboard/dashboard.html +++ b/apps/dashboard/dashboard.html @@ -216,6 +216,491 @@ .net-health-grid { grid-template-columns: 1fr; } #quick-access-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } } + + /* Density / reference lock overrides */ + .wrapper { max-width: 1640px; padding: 8px 12px 20px; } + .header { padding: 10px 0 10px; margin-bottom: 8px; gap: 16px; } + .logo-text { font-size: 18px; letter-spacing: 2px; } + .logo-sub, .overall-status, .date-str, #last-updated { font-size: 10px; } + .clock { font-size: 46px; } + .section-header { margin-bottom: 5px; font-size: 9px; letter-spacing: 3px; } + .widget-row { gap: 6px; margin-bottom: 6px; } + .row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + .card { + max-height: 120px; + min-height: 118px; + height: 118px; + padding: 8px 10px 8px; + border-radius: 10px; + background: linear-gradient(180deg, rgba(7, 17, 14, 0.84), rgba(5, 11, 9, 0.72)); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.22), 0 0 18px rgba(0,220,140,0.05); + overflow: hidden; + } + .card-title { margin-bottom: 6px; min-height: 26px; } + .card-title-left { gap: 7px; } + .card-title .dot { width: 6px; height: 6px; } + .stats-grid { + display: grid; + grid-auto-flow: column; + grid-auto-columns: minmax(0, 1fr); + align-items: end; + justify-content: stretch; + gap: 10px; + flex-wrap: nowrap; + } + .stat-block { + min-width: 0; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2px; + } + .stat-num { + font-size: 22px; + line-height: 0.95; + color: var(--teal-bright); + text-shadow: 0 0 12px var(--teal-glow); + } + .stat-num.dim { font-size: 18px; color: var(--text-bright); } + .stat-label { font-size: 8px; margin-top: 2px; } + #cpu-percent, #ram-percent, #net-rx, #uptime-days, #docker-running { font-size: 30px; } + .service-icon { + width: 28px; + height: 28px; + border-radius: 8px; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--icon-color, var(--teal-bright)); + background: + radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 45%), + linear-gradient(180deg, rgba(16, 36, 29, 0.96), rgba(7, 14, 11, 0.92)); + border: 1px solid rgba(255,255,255,0.06); + box-shadow: + inset 0 0 0 1px rgba(255,255,255,0.02), + 0 0 16px rgba(0,220,140,0.08); + } + .service-icon::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + box-shadow: inset 0 0 14px rgba(0,0,0,0.18); + pointer-events: none; + } + .icon-glyph { + width: 15px; + height: 15px; + display: block; + position: relative; + color: inherit; + opacity: 0.96; + } + .icon-cpu { --icon-color: #82ffbf; } + .icon-memory { --icon-color: #98ffbf; } + .icon-network { --icon-color: #7dc8ff; } + .icon-host { --icon-color: #95ffbf; } + .icon-docker { --icon-color: #81ffc8; } + .icon-storage { --icon-color: #7effb6; } + .icon-matrix { --icon-color: #7fc9ff; } + .icon-scrutiny { --icon-color: #7effb0; } + .icon-ha { --icon-color: #8ea6ff; } + .icon-kuma { --icon-color: #89ffaf; } + .icon-immich { --icon-color: #ffd84f; } + .icon-backrest { --icon-color: #74d7ff; } + .icon-adguard { --icon-color: #66f0ba; } + .icon-services { --icon-color: #8affbe; } + .glyph-cpu { + border: 1.6px solid currentColor; + border-radius: 3px; + } + .glyph-cpu::before { + content: ""; + position: absolute; + inset: 3px; + border: 1.4px solid currentColor; + border-radius: 2px; + opacity: 0.92; + } + .glyph-cpu::after { + content: ""; + position: absolute; + inset: -3px; + background: + linear-gradient(currentColor,currentColor) 2px 1px / 1px 3px no-repeat, + linear-gradient(currentColor,currentColor) 7px 1px / 1px 3px no-repeat, + linear-gradient(currentColor,currentColor) 12px 1px / 1px 3px no-repeat, + linear-gradient(currentColor,currentColor) 2px calc(100% - 1px) / 1px 3px no-repeat, + linear-gradient(currentColor,currentColor) 7px calc(100% - 1px) / 1px 3px no-repeat, + linear-gradient(currentColor,currentColor) 12px calc(100% - 1px) / 1px 3px no-repeat, + linear-gradient(currentColor,currentColor) 1px 2px / 3px 1px no-repeat, + linear-gradient(currentColor,currentColor) 1px 7px / 3px 1px no-repeat, + linear-gradient(currentColor,currentColor) calc(100% - 1px) 2px / 3px 1px no-repeat, + linear-gradient(currentColor,currentColor) calc(100% - 1px) 7px / 3px 1px no-repeat; + opacity: 0.78; + } + .glyph-memory { + background: + linear-gradient(currentColor,currentColor) 2px 9px / 2px 4px no-repeat, + linear-gradient(currentColor,currentColor) 6px 6px / 2px 7px no-repeat, + linear-gradient(currentColor,currentColor) 10px 3px / 2px 10px no-repeat; + } + .glyph-memory::before { + content: ""; + position: absolute; + inset: 1px; + border: 1.4px solid rgba(152,255,191,0.34); + border-radius: 3px; + } + .glyph-network { + background: + radial-gradient(circle at 2px 11px, currentColor 0 2px, transparent 2.4px), + radial-gradient(circle at 13px 11px, currentColor 0 2px, transparent 2.4px), + radial-gradient(circle at 7.5px 3px, currentColor 0 2px, transparent 2.4px), + linear-gradient(currentColor,currentColor) 7px 4px / 1.4px 7px no-repeat, + linear-gradient(32deg, transparent 44%, currentColor 45% 55%, transparent 56%) 2px 5px / 10px 7px no-repeat, + linear-gradient(-32deg, transparent 44%, currentColor 45% 55%, transparent 56%) 4px 5px / 10px 7px no-repeat; + } + .glyph-host { + border: 1.6px solid currentColor; + border-radius: 3px; + } + .glyph-host::before { + content: ""; + position: absolute; + left: 3px; + right: 3px; + bottom: -2px; + height: 1.6px; + background: currentColor; + } + .glyph-host::after { + content: ""; + position: absolute; + left: 5px; + right: 5px; + bottom: -5px; + height: 1.6px; + background: currentColor; + border-radius: 999px; + } + .glyph-docker { + background: + linear-gradient(currentColor,currentColor) 1px 3px / 4px 4px no-repeat, + linear-gradient(currentColor,currentColor) 6px 3px / 4px 4px no-repeat, + linear-gradient(currentColor,currentColor) 11px 3px / 4px 4px no-repeat, + linear-gradient(currentColor,currentColor) 6px 8px / 4px 4px no-repeat, + linear-gradient(currentColor,currentColor) 1px 12px / 14px 1.5px no-repeat; + border-radius: 3px; + } + .glyph-storage { + background: + linear-gradient(currentColor,currentColor) 1px 5px / 13px 1.6px no-repeat, + linear-gradient(currentColor,currentColor) 1px 8px / 13px 1.6px no-repeat, + linear-gradient(currentColor,currentColor) 1px 11px / 13px 1.6px no-repeat; + } + .glyph-storage::before { + content: ""; + position: absolute; + inset: 1px 1px 2px; + border: 1.4px solid rgba(126,255,182,0.36); + border-radius: 4px; + } + .glyph-matrix { + background: + linear-gradient(currentColor,currentColor) 1px 1px / 5px 5px no-repeat, + linear-gradient(currentColor,currentColor) 9px 1px / 5px 5px no-repeat, + linear-gradient(currentColor,currentColor) 1px 9px / 5px 5px no-repeat, + linear-gradient(currentColor,currentColor) 9px 9px / 5px 5px no-repeat; + opacity: 0.95; + } + .glyph-scrutiny { + border: 1.6px solid currentColor; + border-radius: 50%; + } + .glyph-scrutiny::before { + content: ""; + position: absolute; + inset: 3px; + border: 1.4px solid currentColor; + border-radius: 50%; + } + .glyph-scrutiny::after { + content: ""; + position: absolute; + left: 7px; + top: 1px; + width: 1.4px; + height: 13px; + background: currentColor; + box-shadow: -6px 6px 0 -5px currentColor, 6px 6px 0 -5px currentColor; + opacity: 0.9; + } + .glyph-home { + background: + linear-gradient(-35deg, transparent 45%, currentColor 46% 56%, transparent 57%) 0 1px / 8px 7px no-repeat, + linear-gradient(35deg, transparent 45%, currentColor 46% 56%, transparent 57%) 7px 1px / 8px 7px no-repeat, + linear-gradient(currentColor,currentColor) 3px 7px / 9px 6px no-repeat; + } + .glyph-kuma { + background: + linear-gradient(currentColor,currentColor) 1px 8px / 3px 1.5px no-repeat, + linear-gradient(55deg, transparent 43%, currentColor 44% 56%, transparent 57%) 3px 6px / 4px 5px no-repeat, + linear-gradient(-55deg, transparent 43%, currentColor 44% 56%, transparent 57%) 6px 4px / 4px 7px no-repeat, + linear-gradient(55deg, transparent 43%, currentColor 44% 56%, transparent 57%) 9px 6px / 4px 5px no-repeat, + linear-gradient(currentColor,currentColor) 12px 8px / 3px 1.5px no-repeat; + } + .glyph-image { + border: 1.5px solid currentColor; + border-radius: 3px; + } + .glyph-image::before { + content: ""; + position: absolute; + left: 2px; + right: 2px; + bottom: 2px; + height: 5px; + background: + linear-gradient(140deg, transparent 35%, currentColor 36% 48%, transparent 49%) 0 0 / 8px 5px no-repeat, + linear-gradient(45deg, transparent 32%, currentColor 33% 45%, transparent 46%) 5px 0 / 8px 5px no-repeat; + } + .glyph-image::after { + content: ""; + position: absolute; + right: 2px; + top: 2px; + width: 3px; + height: 3px; + border-radius: 50%; + background: currentColor; + } + .glyph-backrest { + border: 1.5px solid currentColor; + border-radius: 3px; + } + .glyph-backrest::before { + content: ""; + position: absolute; + left: 2px; + right: 2px; + top: 3px; + height: 2px; + background: currentColor; + box-shadow: 0 4px 0 currentColor; + } + .glyph-backrest::after { + content: ""; + position: absolute; + left: 5px; + right: 5px; + bottom: -2px; + height: 1.5px; + background: currentColor; + } + .glyph-shield { + background: + linear-gradient(currentColor,currentColor) 7px 2px / 1.8px 9px no-repeat; + clip-path: polygon(50% 0%, 88% 16%, 88% 50%, 50% 100%, 12% 50%, 12% 16%); + background-color: transparent; + border: 1.5px solid currentColor; + } + .glyph-services { + background: + radial-gradient(circle at 2px 7px, currentColor 0 2px, transparent 2.4px), + radial-gradient(circle at 13px 2px, currentColor 0 2px, transparent 2.4px), + radial-gradient(circle at 13px 12px, currentColor 0 2px, transparent 2.4px), + linear-gradient(currentColor,currentColor) 4px 6px / 7px 1.4px no-repeat, + linear-gradient(currentColor,currentColor) 10px 4px / 1.4px 6px no-repeat; + } + .service-name { font-size: 10px; letter-spacing: 1.4px; } + .status-pill { + width: 10px; + height: 10px; + min-width: 10px; + border-radius: 999px; + padding: 0; + font-size: 0; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 12px rgba(0,0,0,0.18); + } + .pill-online { box-shadow: 0 0 10px rgba(0,220,140,0.32); } + .pill-degraded { box-shadow: 0 0 10px rgba(255,204,68,0.28); } + .pill-offline { box-shadow: 0 0 10px rgba(255,68,102,0.28); } + .progress-wrap { + display: flex; + flex-direction: column; + gap: 4px; + margin-top: 6px; + } + .progress-meta { + display: flex; + justify-content: space-between; + gap: 8px; + font-family: var(--font-mono); + font-size: 8px; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.8px; + } + .progress-bar { height: 4px; border-radius: 999px; background: rgba(0,220,140,0.08); } + .mini-graph { + display: flex; + align-items: end; + gap: 3px; + height: 16px; + } + .mini-bar { + flex: 1; + min-width: 0; + border-radius: 2px 2px 0 0; + background: linear-gradient(180deg, rgba(127,255,199,0.9), rgba(0,220,140,0.22)); + box-shadow: 0 0 8px rgba(0,220,140,0.12); + } + .mini-bar.warn { background: linear-gradient(180deg, rgba(255,204,68,0.95), rgba(255,204,68,0.24)); } + .mini-bar.danger { background: linear-gradient(180deg, rgba(255,68,102,0.95), rgba(255,68,102,0.24)); } + .mini-bar.blue { background: linear-gradient(180deg, rgba(68,170,255,0.95), rgba(68,170,255,0.24)); } + .services-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 6px; + margin-bottom: 6px; + } + .service-card { display: flex; flex-direction: column; justify-content: space-between; } + .service-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + margin-top: 4px; + font-family: var(--font-mono); + font-size: 8px; + color: var(--text-dim); + text-transform: uppercase; + } + .micro-strip { display: flex; gap: 3px; min-height: 8px; align-items: center; } + .micro-seg { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.1); } + .micro-seg.up { background: var(--teal); box-shadow: 0 0 8px rgba(0,220,140,0.22); } + .micro-seg.down { background: var(--red); box-shadow: 0 0 8px rgba(255,68,102,0.22); } + .micro-seg.warn { background: var(--yellow); box-shadow: 0 0 8px rgba(255,204,68,0.22); } + #quick-access-grid { + display: grid; + grid-template-columns: repeat(6, minmax(0, 1fr)); + gap: 6px; + } + .quick-tile { + min-height: 74px; + padding: 8px 10px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 9px; + text-align: left; + } + .quick-tile-icon { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; + font-size: 11px; + font-family: var(--font-display); + background: linear-gradient(135deg, var(--teal-bright), var(--teal)); + color: #04110d; + } + .quick-tile-copy { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; + } + .quick-tile-label { font-size: 9px; color: var(--text-bright); } + .quick-tile-meta { + font-family: var(--font-mono); + font-size: 7px; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 1px; + } + .quick-tile-icon-ha { background: linear-gradient(135deg, #6cb8ff, #9e8dff); } + .quick-tile-icon-komodo { background: linear-gradient(135deg, #00e2b3, #68c7ff); } + .quick-tile-icon-kuma { background: linear-gradient(135deg, #00d98a, #7fffc7); } + .quick-tile-icon-beszel { background: linear-gradient(135deg, #53f1b4, #a9ffd8); } + .quick-tile-icon-firefly { background: linear-gradient(135deg, #ffb54d, #ffd66f); } + .quick-tile-icon-paperless { background: linear-gradient(135deg, #89ffdc, #46cfa0); } + .quick-tile-icon-mealie { background: linear-gradient(135deg, #7ec2ff, #f6ff8c); } + .quick-tile-icon-immich { background: linear-gradient(135deg, #ffd15c, #ff9d4d); } + .quick-tile-icon-gitea { background: linear-gradient(135deg, #9cff87, #3cd675); } + .quick-tile-icon-code { background: linear-gradient(135deg, #5cc4ff, #5f92ff); } + .quick-tile-icon-files { background: linear-gradient(135deg, #6ec8ff, #9be1ff); } + .quick-tile-icon-backrest { background: linear-gradient(135deg, #8bb4ff, #6fd8ff); } + .quick-tile-icon-vault { background: linear-gradient(135deg, #ffe173, #ffaa5c); } + .quick-tile-icon-adguard { background: linear-gradient(135deg, #57ffaa, #57d8ff); } + .quick-tile-icon-traefik { background: linear-gradient(135deg, #8f9fff, #6cc4ff); } + .quick-tile-icon-scrutiny { background: linear-gradient(135deg, #9cffcf, #61ffaa); } + .storage-layout { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 6px; + margin-bottom: 6px; + align-items: stretch; + } + .storage-layout > div:first-child { display: contents; } + #storage-grid { display: contents; } + .scrutiny-row { padding: 1px 0; border-bottom: none; gap: 6px; font-size: 8px; } + .scrutiny-offline { font-size: 8px; padding: 2px 0; } + .scrutiny-strip, + .storage-strip { + display: flex; + gap: 4px; + flex-wrap: wrap; + overflow: hidden; + margin-top: 4px; + } + .scrutiny-chip, + .storage-chip { + font-family: var(--font-mono); + font-size: 7px; + color: var(--text-dim); + padding: 2px 5px; + border-radius: 999px; + border: 1px solid rgba(0,220,140,0.12); + background: rgba(255,255,255,0.02); + white-space: nowrap; + } + .scrutiny-chip.ok { color: var(--teal-bright); border-color: rgba(0,220,140,0.22); } + .scrutiny-chip.fail { color: var(--red); border-color: rgba(255,68,102,0.24); } + .scrutiny-chip.unk { color: var(--text-dim); border-color: rgba(255,255,255,0.08); } + .scrutiny-chip strong { + color: currentColor; + font-family: var(--font-display); + font-size: 7px; + letter-spacing: 0.6px; + margin-right: 4px; + } + .storage-matrix-card .stats-grid { margin-bottom: 6px; } + .storage-matrix-card .service-footer { margin-top: auto; } + .system-card .card-title, + .service-card .card-title, + .storage-card .card-title { align-items: center; } + @media (max-width: 1360px) { + .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } + #quick-access-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + } + @media (max-width: 960px) { + .services-grid, #quick-access-grid, #storage-grid, .storage-layout, .row-5 { grid-template-columns: 1fr; } + .card { max-height: none; } + .stats-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } + } @@ -247,57 +732,97 @@
⬡ SYSTEM
-
-
CPU
+
+
+
CPU
+ OK +
—
Usage %
—
Cores
—
Load 5m
+
+
Compute Load0%
+
+
+
-
-
MEMORY
+
+
+
MEMORY
+ OK +
—
Usage %
—
Used GB
—
Total GB
+
+
Memory Pool0%
+
+
+
-
-
NETWORK
+
+
+
NETWORK
+ OK +
—
↓ Mbps
—
↑ Mbps
+
+
Traffic Flow0 Mbps
+
+
+
-
-
HOST
+
+
+
HOST
+ OK +
—
Uptime d
—
OS
+
+
Host Runtime—
+
+
+
-
-
DOCKER
+
+
+
DOCKER
+ OK +
—
Running
—
Stopped
—
Total
+
+
Runtime Surface0%
+
+
+
⬡ STORAGE & HEALTH
-
+
-
+
-
SCRUTINY
+
SCRUTINY
OFFLINE
@@ -311,11 +836,11 @@
⬡ SERVICES
-
-
+
+
- 🏠 + HOME ASSISTANT
OFFLINE @@ -326,12 +851,12 @@
—
Doors
—
Alerts
-
+
Core automation hub
-
+
- 🐻 + UPTIME KUMA
OFFLINE @@ -339,15 +864,15 @@
—
Up
—
Down
+
—
Paused
—
24h %
-
-
+
No monitor data
-
+
- 📷 + IMMICH
OFFLINE @@ -358,14 +883,10 @@
—
Storage
-
- - -
-
+
- 💾 + BACKREST
@@ -377,10 +898,10 @@
—
Errors
-
+
- 🛡️ + ADGUARD DNS
OFFLINE @@ -393,9 +914,12 @@
-
+
-
SERVICES OVERVIEW
+
+ + SERVICES OVERVIEW +
—
@@ -428,4 +952,4 @@ setInterval(updateClock, 1000); - \ No newline at end of file +