Add deauth detection, Alerts tab, Search tab, node detail cards, UI improvements
This commit is contained in:
@@ -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); }
|
||||
|
||||
@@ -471,6 +471,51 @@ function renderAlertsView() {
|
||||
<span>unique sources</span>
|
||||
</div>`;
|
||||
|
||||
// Most targeted networks
|
||||
const targetsTbody = document.getElementById('targets-tbody');
|
||||
const targetsEmpty = document.getElementById('targets-empty');
|
||||
const targetsCount = document.getElementById('targets-count');
|
||||
const topTargets = a.top_targets || [];
|
||||
targetsCount.textContent = `${topTargets.length}`;
|
||||
if (!topTargets.length) {
|
||||
targetsTbody.innerHTML = '';
|
||||
targetsEmpty.style.display = 'block';
|
||||
} else {
|
||||
targetsEmpty.style.display = 'none';
|
||||
targetsTbody.innerHTML = topTargets.map((t, i) => `<tr>
|
||||
<td class="dim">${fmt(t.bssid)}</td>
|
||||
<td>${fmt(t.ssid, '<hidden>')}</td>
|
||||
<td style="color:#e74c3c;font-weight:500">${t.total_frames}</td>
|
||||
<td class="muted">${t.unique_srcs}</td>
|
||||
<td class="${t.node_count > 1 ? 'nodes-multi' : 'muted'}">${t.node_count}</td>
|
||||
<td class="dim">${shortTime(t.last_seen)}</td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
// Most active attackers
|
||||
const attackersTbody = document.getElementById('attackers-tbody');
|
||||
const attackersEmpty = document.getElementById('attackers-empty');
|
||||
const attackersCount = document.getElementById('attackers-count');
|
||||
const topTargetedDevices = a.top_targeted_devices || [];
|
||||
attackersCount.textContent = `${topTargetedDevices.length}`;
|
||||
if (!topTargetedDevices.length) {
|
||||
attackersTbody.innerHTML = '';
|
||||
attackersEmpty.style.display = 'block';
|
||||
} else {
|
||||
attackersEmpty.style.display = 'none';
|
||||
attackersTbody.innerHTML = topTargetedDevices.map(d => {
|
||||
const vendorCls = d.randomized ? 'muted' : 'dim';
|
||||
return `<tr>
|
||||
<td class="dim">${fmt(d.dst)}</td>
|
||||
<td class="${vendorCls}">${d.vendor || '—'}</td>
|
||||
<td style="color:#e74c3c;font-weight:500">${d.total_frames}</td>
|
||||
<td class="muted">${d.networks_used}</td>
|
||||
<td class="${d.node_count > 1 ? 'nodes-multi' : 'muted'}">${d.node_count}</td>
|
||||
<td class="dim">${shortTime(d.last_seen)}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// Bursts
|
||||
const burstsTbody = document.getElementById('bursts-tbody');
|
||||
const burstsEmpty = document.getElementById('bursts-empty');
|
||||
@@ -648,6 +693,165 @@ function renderRssiChart(series) {
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
// ── Search view ───────────────────────────────────────────────────────────────
|
||||
async function doSearch() {
|
||||
const q = document.getElementById('search-input').value.trim();
|
||||
if (q.length < 2) return;
|
||||
const data = await fetch(`/api/search?q=${encodeURIComponent(q)}`).then(r => r.json());
|
||||
renderSearchResults(data, q);
|
||||
}
|
||||
|
||||
function renderSearchResults(data, q) {
|
||||
const container = document.getElementById('search-results');
|
||||
const empty = document.getElementById('search-empty');
|
||||
container.querySelectorAll('.search-section').forEach(el => el.remove());
|
||||
|
||||
if (!Object.keys(data).length) {
|
||||
empty.textContent = `No data found for "${q}".`;
|
||||
empty.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
empty.style.display = 'none';
|
||||
|
||||
// Helper to append a section
|
||||
function addSection(title, html) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'search-section';
|
||||
div.innerHTML = `<div class="search-section-label">${title}</div>${html}`;
|
||||
container.appendChild(div);
|
||||
}
|
||||
|
||||
// As a network
|
||||
if (data.as_network) {
|
||||
const rows = data.as_network.map(r => {
|
||||
const encCls = (!r.encryption || r.encryption === 'OPEN') ? 'enc-open' : 'muted';
|
||||
return `<tr>
|
||||
<td>${fmt(r.ssid, '<hidden>')}</td>
|
||||
<td class="dim">${fmt(r.bssid)}</td>
|
||||
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
|
||||
<td class="muted">${fmt(r.channel)}</td>
|
||||
<td class="${encCls}">${r.encryption || 'OPEN'}</td>
|
||||
<td>${fmt(r.times_seen)}</td>
|
||||
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
|
||||
<td class="dim">${shortTime(r.first_seen)}</td>
|
||||
<td class="dim">${shortTime(r.last_seen)}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
addSection('As a Network', `<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>SSID</th><th>BSSID</th><th>Best RSSI</th><th>Ch</th><th>Enc</th><th>Times Seen</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
|
||||
<tbody>${rows}</tbody></table></div>`);
|
||||
}
|
||||
|
||||
// As a client device
|
||||
if (data.as_client) {
|
||||
const rows = data.as_client.map(r => {
|
||||
const probing = r.probed_ssids.length
|
||||
? r.probed_ssids.join(', ')
|
||||
: '<span style="color:var(--text-muted)">wildcard only</span>';
|
||||
return `<tr>
|
||||
<td>${fmt(r.src_mac)}</td>
|
||||
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
|
||||
<td style="white-space:normal;max-width:300px;line-height:1.8">${probing}</td>
|
||||
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
|
||||
<td>${fmt(r.times_seen)}</td>
|
||||
<td class="dim">${shortTime(r.first_seen)}</td>
|
||||
<td class="dim">${shortTime(r.last_seen)}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
addSection('As a Client Device (Probe Requests)', `<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>MAC</th><th>Vendor</th><th>Probing For</th><th>Best RSSI</th><th>Times Seen</th><th>First Seen</th><th>Last Seen</th></tr></thead>
|
||||
<tbody>${rows}</tbody></table></div>`);
|
||||
}
|
||||
|
||||
// Devices probing for this SSID
|
||||
if (data.probing_for) {
|
||||
const rows = data.probing_for.map(r => `<tr>
|
||||
<td>${fmt(r.src_mac)}</td>
|
||||
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
|
||||
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
|
||||
<td>${fmt(r.times_seen)}</td>
|
||||
<td class="dim">${shortTime(r.first_seen)}</td>
|
||||
<td class="dim">${shortTime(r.last_seen)}</td>
|
||||
</tr>`).join('');
|
||||
addSection('Devices Probing for This SSID', `<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>MAC</th><th>Vendor</th><th>Best RSSI</th><th>Times Seen</th><th>First Seen</th><th>Last Seen</th></tr></thead>
|
||||
<tbody>${rows}</tbody></table></div>`);
|
||||
}
|
||||
|
||||
// As a deauth victim
|
||||
if (data.as_victim) {
|
||||
const rows = data.as_victim.map(r => `<tr>
|
||||
<td>${fmt(r.dst)}</td>
|
||||
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
|
||||
<td style="color:#e74c3c;font-weight:500">${r.total_frames}</td>
|
||||
<td class="muted">${r.networks_used}</td>
|
||||
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
|
||||
<td class="dim">${shortTime(r.first_seen)}</td>
|
||||
<td class="dim">${shortTime(r.last_seen)}</td>
|
||||
</tr>`).join('');
|
||||
addSection('As a Deauth Victim', `<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>MAC</th><th>Vendor</th><th>Frames Received</th><th>Networks Used</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
|
||||
<tbody>${rows}</tbody></table></div>`);
|
||||
}
|
||||
|
||||
// Vendor — client devices
|
||||
if (data.vendor_clients) {
|
||||
const label = data.vendor_name || q;
|
||||
const rows = data.vendor_clients.map(r => {
|
||||
const probing = r.probed_ssids.length
|
||||
? r.probed_ssids.join(', ')
|
||||
: '<span style="color:var(--text-muted)">wildcard only</span>';
|
||||
return `<tr>
|
||||
<td>${fmt(r.src_mac)}</td>
|
||||
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
|
||||
<td style="white-space:normal;max-width:300px;line-height:1.8">${probing}</td>
|
||||
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
|
||||
<td>${fmt(r.times_seen)}</td>
|
||||
<td class="dim">${shortTime(r.last_seen)}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
addSection(`Vendor Match — Client Devices (${label})`, `<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>MAC</th><th>Vendor</th><th>Probing For</th><th>Best RSSI</th><th>Times Seen</th><th>Last Seen</th></tr></thead>
|
||||
<tbody>${rows}</tbody></table></div>`);
|
||||
}
|
||||
|
||||
// Vendor — networks / APs
|
||||
if (data.vendor_networks) {
|
||||
const label = data.vendor_name || q;
|
||||
const rows = data.vendor_networks.map(r => {
|
||||
const encCls = (!r.encryption || r.encryption === 'OPEN') ? 'enc-open' : 'muted';
|
||||
return `<tr>
|
||||
<td>${fmt(r.ssid, '<hidden>')}</td>
|
||||
<td class="dim">${fmt(r.bssid)}</td>
|
||||
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
|
||||
<td class="muted">${fmt(r.channel)}</td>
|
||||
<td class="${encCls}">${r.encryption || 'OPEN'}</td>
|
||||
<td>${fmt(r.times_seen)}</td>
|
||||
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
|
||||
<td class="dim">${shortTime(r.last_seen)}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
addSection(`Vendor Match — Networks / APs (${label})`, `<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>SSID</th><th>BSSID</th><th>Best RSSI</th><th>Ch</th><th>Enc</th><th>Times Seen</th><th>Nodes</th><th>Last Seen</th></tr></thead>
|
||||
<tbody>${rows}</tbody></table></div>`);
|
||||
}
|
||||
|
||||
// As an impersonated AP
|
||||
if (data.as_impersonated) {
|
||||
const rows = data.as_impersonated.map(r => `<tr>
|
||||
<td class="dim">${fmt(r.bssid)}</td>
|
||||
<td style="color:#e74c3c;font-weight:500">${r.total_frames}</td>
|
||||
<td class="muted">${r.unique_targets}</td>
|
||||
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
|
||||
<td class="dim">${shortTime(r.first_seen)}</td>
|
||||
<td class="dim">${shortTime(r.last_seen)}</td>
|
||||
</tr>`).join('');
|
||||
addSection('As an Impersonated AP (Deauth Source)', `<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>BSSID</th><th>Frames Sent</th><th>Unique Targets</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
|
||||
<tbody>${rows}</tbody></table></div>`);
|
||||
}
|
||||
}
|
||||
|
||||
// ── View switching ────────────────────────────────────────────────────────────
|
||||
function setView(view) {
|
||||
currentView = view;
|
||||
@@ -659,12 +863,14 @@ function setView(view) {
|
||||
document.getElementById('view-detail').classList.toggle('active', view === 'detail');
|
||||
document.getElementById('view-presence').classList.toggle('active', view === 'presence');
|
||||
document.getElementById('view-alerts').classList.toggle('active', view === 'alerts');
|
||||
document.getElementById('view-search').classList.toggle('active', view === 'search');
|
||||
document.getElementById('tab-feed').classList.toggle('active', view === 'feed' || view === 'detail');
|
||||
document.getElementById('tab-networks').classList.toggle('active', view === 'networks' || view === 'network-chart');
|
||||
document.getElementById('tab-crossnode').classList.toggle('active', view === 'crossnode');
|
||||
document.getElementById('tab-clients').classList.toggle('active', view === 'clients');
|
||||
document.getElementById('tab-presence').classList.toggle('active', view === 'presence');
|
||||
document.getElementById('tab-alerts').classList.toggle('active', view === 'alerts');
|
||||
document.getElementById('tab-search').classList.toggle('active', view === 'search');
|
||||
}
|
||||
|
||||
function showFeed() {
|
||||
@@ -685,6 +891,8 @@ async function showPresence() { setView('presence'); await fetchPresence(); }
|
||||
|
||||
async function showAlerts() { setView('alerts'); await fetchAlerts(); }
|
||||
|
||||
function showSearch() { setView('search'); document.getElementById('search-input').focus(); }
|
||||
|
||||
async function showDetail(node_id) {
|
||||
currentNode = node_id;
|
||||
setView('detail');
|
||||
|
||||
Reference in New Issue
Block a user