Skip to content

Commit f91d158

Browse files
author
Datanoise
committed
style: upgrade bottom stats bar with glass effect, tongue handle, and fixed debug mode
1 parent df5a981 commit f91d158

2 files changed

Lines changed: 24 additions & 11 deletions

File tree

‎server/templates/admin.html‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,14 @@
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%; }
6868

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); }
69+
.bottom-stats-bar { position: fixed; bottom: 0; right: 0; left: 240px; background: rgba(22, 27, 44, 0.7); backdrop-filter: blur(16px); 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(40px); }
71+
.stats-items { display: flex; gap: 1.5rem; align-items: center; overflow-x: auto; flex: 1; }
72+
.stats-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }
7373
.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); }
74+
.stats-toggle-tongue { position: absolute; top: -24px; right: 2rem; background: rgba(22, 27, 44, 0.7); backdrop-filter: blur(16px); border: 1px solid var(--border); border-bottom: none; padding: 4px 12px; border-radius: 8px 8px 0 0; cursor: pointer; color: var(--text-dim); display: flex; align-items: center; justify-content: center; height: 24px; box-sizing: border-box; }
75+
.stats-toggle-tongue:hover { color: var(--text); background: var(--surface-hover); }
76+
.debug-items { display: flex; gap: 1rem; margin-left: 1.5rem; border-left: 1px solid var(--border); padding-left: 1.5rem; }
7677
</style>
7778
</head>
7879
<body>
@@ -573,6 +574,9 @@ <h2>Top Connection Scanners (404s)</h2>
573574

574575
<!-- Fixed Bottom Stats Bar -->
575576
<div class="bottom-stats-bar" id="bottom-stats-bar">
577+
<div class="stats-toggle-tongue" onclick="toggleStatsBar()">
578+
<i data-lucide="chevron-down" id="stats-toggle-icon" style="width: 16px; height: 16px;"></i>
579+
</div>
576580
<div class="stats-items">
577581
<div class="stats-item">
578582
<i data-lucide="users" style="width: 14px; height: 14px;"></i>
@@ -591,9 +595,16 @@ <h2>Top Connection Scanners (404s)</h2>
591595
<i data-lucide="arrow-up-circle" style="width: 14px; height: 14px; color: var(--primary);"></i>
592596
<span>Out: <strong id="global-mb-out">0.00</strong> MB</span>
593597
</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>
598+
599+
<!-- Debug Stats (only visible in ?debug mode) -->
600+
<div class="debug-items" id="debug-stats-bar" style="display: none;">
601+
<div class="stats-item" title="System RAM"><i data-lucide="cpu"></i> <span id="debug-ram">0 B</span></div>
602+
<div class="stats-item" title="Heap Alloc"><i data-lucide="database"></i> <span id="debug-heap">0 B</span></div>
603+
<div class="stats-item" title="Goroutines"><i data-lucide="layers"></i> <span id="debug-goroutines">0</span></div>
604+
<div class="stats-item" title="GC Cycles"><i data-lucide="refresh-cw"></i> <span id="debug-gc">0</span></div>
605+
<div class="stats-item" title="Total Dropped"><i data-lucide="trash"></i> <span id="debug-loss">0 B</span></div>
606+
<div class="stats-item" title="Uptime"><i data-lucide="clock"></i> <span id="debug-uptime">0s</span></div>
607+
</div>
597608
</div>
598609
</div>
599610
</main>
@@ -1119,7 +1130,10 @@ <h2>Edit AutoDJ</h2>
11191130
var debugGC = document.getElementById('debug-gc'); var debugLoss = document.getElementById('debug-loss');
11201131
var debugUptime = document.getElementById('debug-uptime');
11211132
var isDebug = window.location.search.indexOf('debug') !== -1;
1122-
if (isDebug) document.getElementById('debug-stats').style.display = 'block';
1133+
if (isDebug) {
1134+
const debugBar = document.getElementById('debug-stats-bar');
1135+
if (debugBar) debugBar.style.display = 'flex';
1136+
}
11231137

11241138
function resize() { var rect = canvas.getBoundingClientRect(); canvas.width = rect.width * 2; canvas.height = rect.height * 2; ctx.scale(2, 2); }
11251139
window.addEventListener('resize', resize); resize();

‎tinyice.pid‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)