Skip to content

Commit df5a981

Browse files
author
Datanoise
committed
style: move summary stats to a compact fixed bottom bar
1 parent a57179e commit df5a981

1 file changed

Lines changed: 46 additions & 42 deletions

File tree

‎server/templates/admin.html‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,14 @@
6565
.sortable-ghost { opacity: 0.4; background: var(--primary-glow) !important; }
6666
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); }
6767
.modal-content { background: var(--surface); margin: 5% auto; padding: 2rem; border: 1px solid var(--border); border-radius: 16px; width: 500px; max-width: 90%; }
68+
69+
.bottom-stats-bar { position: fixed; bottom: 0; right: 0; left: 240px; background: rgba(22, 27, 44, 0.9); backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 0.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; z-index: 900; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 40px; }
70+
.bottom-stats-bar.collapsed { transform: translateY(32px); }
71+
.stats-items { display: flex; gap: 2rem; align-items: center; }
72+
.stats-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-dim); }
73+
.stats-item strong { color: var(--primary); font-weight: 700; }
74+
.stats-toggle { cursor: pointer; color: var(--text-dim); display: flex; align-items: center; padding: 4px; border-radius: 4px; }
75+
.stats-toggle:hover { background: var(--surface-hover); color: var(--text); }
6876
</style>
6977
</head>
7078
<body>
@@ -104,48 +112,6 @@
104112
</div>
105113
</aside>
106114
<main>
107-
<div class="stat-cards">
108-
<div class="stat-card"><div class="label">Listeners</div><div class="value" id="global-listeners">0</div></div>
109-
<div class="stat-card">
110-
<div class="label">Active Sources</div>
111-
<div class="value" id="global-sources">0</div>
112-
<div style="font-size: 0.7rem; color: var(--text-dim); margin-top: 0.5rem;"><span id="stat-streamers" style="color: var(--success)">0</span> DIRECT / <span id="stat-relays" style="color: var(--warning)">0</span> RELAY</div>
113-
</div>
114-
<div class="stat-card"><div class="label">Traffic MB In</div><div class="value" id="global-mb-in">0.0</div></div>
115-
<div class="stat-card"><div class="label">Traffic MB Out</div><div class="value" id="global-mb-out">0.0</div></div>
116-
</div>
117-
<section id="debug-stats" style="display: none; margin-bottom: 2rem;">
118-
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;">
119-
<div class="card" style="padding: 1rem; text-align: center; border-color: var(--warning);">
120-
<div class="label" style="font-size: 0.7rem; color: var(--text-dim);">SYSTEM RAM</div>
121-
<div class="value" style="font-size: 1.5rem; color: var(--warning);" id="debug-ram">0 Bytes</div>
122-
</div>
123-
<div class="card" style="padding: 1rem; text-align: center; border-color: var(--warning);">
124-
<div class="label" style="font-size: 0.7rem; color: var(--text-dim);">HEAP ALLOC</div>
125-
<div class="value" style="font-size: 1.5rem; color: var(--warning);" id="debug-heap">0 Bytes</div>
126-
</div>
127-
<div class="card" style="padding: 1rem; text-align: center; border-color: var(--warning);">
128-
<div class="label" style="font-size: 0.7rem; color: var(--text-dim);">STACK RAM</div>
129-
<div class="value" style="font-size: 1.5rem; color: var(--warning);" id="debug-stack">0 Bytes</div>
130-
</div>
131-
<div class="card" style="padding: 1rem; text-align: center; border-color: var(--warning);">
132-
<div class="label" style="font-size: 0.7rem; color: var(--text-dim);">GC CYCLES</div>
133-
<div class="value" style="font-size: 1.5rem; color: var(--warning);" id="debug-gc">0</div>
134-
</div>
135-
<div class="card" style="padding: 1rem; text-align: center; border-color: var(--danger);">
136-
<div class="label" style="font-size: 0.7rem; color: var(--text-dim);">GOROUTINES</div>
137-
<div class="value" style="font-size: 1.5rem; color: var(--danger);" id="debug-goroutines">0</div>
138-
</div>
139-
<div class="card" style="padding: 1rem; text-align: center; border-color: var(--danger);">
140-
<div class="label" style="font-size: 0.7rem; color: var(--text-dim);">TOTAL LOSS</div>
141-
<div class="value" style="font-size: 1.5rem; color: var(--danger);" id="debug-loss">0 Bytes</div>
142-
</div>
143-
<div class="card" style="padding: 1rem; text-align: center; border-color: var(--primary);">
144-
<div class="label" style="font-size: 0.7rem; color: var(--text-dim);">SERVER UPTIME</div>
145-
<div class="value" style="font-size: 1.5rem; color: var(--primary);" id="debug-uptime">0s</div>
146-
</div>
147-
</div>
148-
</section>
149115
<div id="tab-overview" class="tab-content active">
150116
<section>
151117
<h2>Live Traffic</h2>
@@ -604,6 +570,32 @@ <h2>Top Connection Scanners (404s)</h2>
604570
</div>
605571
</div>
606572
{{end}}
573+
574+
<!-- Fixed Bottom Stats Bar -->
575+
<div class="bottom-stats-bar" id="bottom-stats-bar">
576+
<div class="stats-items">
577+
<div class="stats-item">
578+
<i data-lucide="users" style="width: 14px; height: 14px;"></i>
579+
<span>Listeners: <strong id="global-listeners">0</strong></span>
580+
</div>
581+
<div class="stats-item">
582+
<i data-lucide="tower-control" style="width: 14px; height: 14px;"></i>
583+
<span>Sources: <strong id="global-sources">0</strong></span>
584+
<span style="font-size: 0.7rem; opacity: 0.7;">(<span id="stat-streamers" style="color: var(--success)">0</span> / <span id="stat-relays" style="color: var(--warning)">0</span>)</span>
585+
</div>
586+
<div class="stats-item">
587+
<i data-lucide="arrow-down-circle" style="width: 14px; height: 14px; color: var(--success);"></i>
588+
<span>In: <strong id="global-mb-in">0.00</strong> MB</span>
589+
</div>
590+
<div class="stats-item">
591+
<i data-lucide="arrow-up-circle" style="width: 14px; height: 14px; color: var(--primary);"></i>
592+
<span>Out: <strong id="global-mb-out">0.00</strong> MB</span>
593+
</div>
594+
</div>
595+
<div class="stats-toggle" onclick="toggleStatsBar()">
596+
<i data-lucide="chevron-down" id="stats-toggle-icon" style="width: 16px; height: 16px;"></i>
597+
</div>
598+
</div>
607599
</main>
608600
</div>
609601

@@ -697,6 +689,18 @@ <h2>Edit AutoDJ</h2>
697689
return false;
698690
}
699691

692+
function toggleStatsBar() {
693+
const bar = document.getElementById('bottom-stats-bar');
694+
const icon = document.getElementById('stats-toggle-icon');
695+
bar.classList.toggle('collapsed');
696+
if (bar.classList.contains('collapsed')) {
697+
icon.setAttribute('data-lucide', 'chevron-up');
698+
} else {
699+
icon.setAttribute('data-lucide', 'chevron-down');
700+
}
701+
lucide.createIcons();
702+
}
703+
700704
function updateAutoDJProgress() {
701705
const bars = document.querySelectorAll('.progress-bar-adj');
702706
const now = Math.floor(Date.now() / 1000);

0 commit comments

Comments
 (0)