diff --git a/site/dashboard.html b/site/dashboard.html index c54a331..a5780b8 100644 --- a/site/dashboard.html +++ b/site/dashboard.html @@ -101,7 +101,7 @@ body { /* Stat cards row */ .stats-row { display: grid; - grid-template-columns: repeat(5, 1fr); + grid-template-columns: repeat(6, 1fr); gap: 1rem; } .stat-card { @@ -125,6 +125,8 @@ body { .stat-card.blocked::before { background: var(--rose); } .stat-card.overrides::before { background: var(--violet); } .stat-card.uptime::before { background: var(--cyan); } +.stat-card.memory::before { background: var(--text-dim); } +.stat-card.memory .stat-value { color: var(--text-secondary); } .stat-label { font-size: 0.7rem; @@ -468,10 +470,74 @@ body { display: none; } +/* Memory sidebar panel */ +.memory-bar { + display: flex; + height: 18px; + border-radius: 4px; + overflow: hidden; + background: var(--bg-surface); + margin-bottom: 0.8rem; +} +.memory-bar-seg { + height: 100%; + min-width: 2px; + transition: width 0.6s ease; +} +.memory-bar-seg.cache { background: var(--teal); } +.memory-bar-seg.blocklist { background: var(--rose); } +.memory-bar-seg.querylog { background: var(--amber); } +.memory-bar-seg.srtt { background: var(--cyan); } +.memory-bar-seg.overrides { background: var(--violet); } +.memory-row { + display: flex; + align-items: center; + padding: 0.3rem 0; + border-bottom: 1px solid var(--border); + font-family: var(--font-mono); + font-size: 0.72rem; +} +.memory-row:last-child { border-bottom: none; } +.memory-row-dot { + width: 8px; + height: 8px; + border-radius: 2px; + flex-shrink: 0; + margin-right: 0.5rem; +} +.memory-row-label { + flex: 1; + color: var(--text-secondary); +} +.memory-row-size { + width: 65px; + text-align: right; + color: var(--text-primary); + font-weight: 500; +} +.memory-row-entries { + width: 90px; + text-align: right; + color: var(--text-dim); +} +.memory-rss { + margin-top: 0.5rem; + padding-top: 0.5rem; + border-top: 1px solid var(--border); + display: flex; + justify-content: space-between; + font-family: var(--font-mono); + font-size: 0.72rem; + color: var(--text-dim); +} + /* Responsive */ @media (max-width: 1100px) { .main-grid { grid-template-columns: 1fr; } } +@media (max-width: 900px) { + .stats-row { grid-template-columns: repeat(3, 1fr); } +} @media (max-width: 700px) { .stats-row { grid-template-columns: repeat(2, 1fr); } .dashboard { padding: 1rem; } @@ -524,6 +590,11 @@ body {