bot/esp32-cluster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add deauth detection, Alerts tab, Search tab, node detail cards, UI improvements

Browse Source
This commit is contained in:
bot
2026-04-04 12:47:43 +03:00
parent fbf5b5c738
commit 5c0ec8cc5a
7 changed files with 668 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
coordinator/static/dashboard.css
+145 -13
View File
@@ -19,7 +19,7 @@ html, body {
height: 100%;
background: var(--bg);
color: var(--text);
font-family: 'IBM Plex Mono', monospace;
font-family: 'Roboto', sans-serif;
font-size: 13px;
line-height: 1.5;
}
@@ -83,7 +83,7 @@ html, body {
}
.tab-btn {
font-family: 'IBM Plex Mono', monospace;
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
@@ -228,7 +228,7 @@ html, body {
.range-btns { display: flex; gap: 4px; }
.range-btn {
font-family: 'IBM Plex Mono', monospace;
font-family: 'Roboto', sans-serif;
font-size: 10px;
letter-spacing: 0.08em;
background: none;
@@ -242,7 +242,7 @@ html, body {
.range-btn.active { color: var(--green-hi); border-color: var(--green-dim); }
.chart-btn {
font-family: 'IBM Plex Mono', monospace;
font-family: 'Roboto', sans-serif;
font-size: 10px;
background: none;
border: 1px solid var(--border);
@@ -272,27 +272,118 @@ html, body {
/* ── Node detail stats ── */
#detail-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.stat-card {
background: var(--bg-panel);
border: 1px solid var(--border);
padding: 12px 14px;
.stat-outer {
border-radius: 8px;
padding: 1px;
background: radial-gradient(circle 120px at 0% 0%, var(--green-mid), var(--bg));
position: relative;
min-height: 90px;
}
.stat-dot {
width: 4px;
aspect-ratio: 1;
position: absolute;
background: var(--green-live);
box-shadow: 0 0 7px var(--green-live);
border-radius: 50%;
z-index: 2;
right: 10%;
top: 10%;
animation: statDotMove 30s linear infinite;
}
.stat-outer:nth-child(1) .stat-dot { animation-delay: 0s; }
.stat-outer:nth-child(2) .stat-dot { animation-delay: -1s; }
.stat-outer:nth-child(3) .stat-dot { animation-delay: -2s; }
.stat-outer:nth-child(4) .stat-dot { animation-delay: -3s; }
.stat-outer:nth-child(5) .stat-dot { animation-delay: -4s; }
.stat-outer:nth-child(6) .stat-dot { animation-delay: -5s; }
.stat-outer:nth-child(7) .stat-dot { animation-delay: -6s; }
.stat-outer:nth-child(8) .stat-dot { animation-delay: -7s; }
.stat-outer:nth-child(9) .stat-dot { animation-delay: -8s; }
.stat-outer:nth-child(10) .stat-dot { animation-delay: -9s; }
@keyframes statDotMove {
0%, 100% { top: 10%; right: 10%; }
25% { top: 10%; right: calc(100% - 18px); }
50% { top: calc(100% - 14px); right: calc(100% - 18px); }
75% { top: calc(100% - 14px); right: 10%; }
}
.stat-card {
z-index: 1;
width: 100%;
height: 100%;
border-radius: 7px;
border: 1px solid var(--border);
background: radial-gradient(circle 140px at 0% 0%, #152019, var(--bg));
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
position: relative;
overflow: hidden;
}
.stat-ray {
width: 100px;
height: 28px;
border-radius: 100px;
position: absolute;
background: var(--green-mid);
opacity: 0.2;
box-shadow: 0 0 40px var(--green-hi);
filter: blur(8px);
top: 0;
left: 0;
transform: rotate(35deg);
transform-origin: 10%;
pointer-events: none;
}
.stat-card .label {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
color: var(--text);
margin-bottom: 6px;
position: relative;
z-index: 1;
}
.stat-card .value {
font-size: 16px;
font-size: 20px;
font-weight: 500;
color: var(--green-hi);
position: relative;
z-index: 1;
}
.stat-card .value-sm { font-size: 11px; }
.stat-card .sub { font-size: 10px; color: var(--text-dim); margin-top: 3px; position: relative; z-index: 1; }
.stat-card .line {
position: absolute;
background-color: var(--border);
}
.stat-card .topl {
top: 12%; width: 100%; height: 1px;
background: linear-gradient(90deg, var(--green-dim) 20%, transparent 80%);
}
.stat-card .bottoml {
bottom: 12%; width: 100%; height: 1px;
background: linear-gradient(90deg, transparent 20%, var(--border) 80%);
}
.stat-card .leftl {
left: 8%; width: 1px; height: 100%;
background: linear-gradient(180deg, var(--green-dim) 20%, transparent 80%);
}
.stat-card .rightl {
right: 8%; width: 1px; height: 100%;
background: linear-gradient(180deg, transparent 20%, var(--border) 80%);
}
.stat-card .sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
/* ── Table ── */
.tbl-wrap { overflow-x: auto; }
@@ -399,6 +490,47 @@ thead th.sort-active::after { content: ' ' attr(data-arrow); }
td.deauth-type { color: #e74c3c; }
td.disassoc-type { color: var(--orange); }
/* ── Search ── */
.search-bar {
display: flex;
gap: 8px;
}
.search-input {
flex: 1;
background: var(--bg-panel);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Roboto', sans-serif;
font-size: 13px;
padding: 8px 12px;
outline: none;
transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--green-dim); }
.search-input::placeholder { color: var(--text-muted); }
.search-btn {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: none;
border: 1px solid var(--green-dim);
color: var(--green-hi);
padding: 8px 20px;
cursor: pointer;
transition: background 0.15s;
}
.search-btn:hover { background: var(--bg-hover); }
.search-section { display: flex; flex-direction: column; gap: 8px; }
.search-section-label {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }