diff --git a/static/css/index.css b/static/css/index.css
index fe9e6a4..59be380 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -4018,87 +4018,110 @@ header h1 .tagline {
.wifi-security-ring-name { color: var(--text-dim); flex: 1; }
.wifi-security-ring-count { color: var(--text-primary); font-weight: 600; }
-/* WiFi Detail Drawer */
-.wifi-detail-drawer {
- display: none;
- background: var(--bg-primary);
- border: 1px solid var(--border-color);
- border-radius: 4px;
- overflow: hidden;
-}
-
-.wifi-detail-drawer.open {
- display: block;
-}
-
-.wifi-detail-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 10px 15px;
- background: var(--bg-tertiary);
- border-bottom: 1px solid var(--border-color);
-}
-
-.wifi-detail-title {
+/* WiFi Detail Panel */
+.wifi-detail-inner {
display: flex;
flex-direction: column;
- gap: 2px;
+ gap: 10px;
+ padding: 12px;
+ height: 100%;
}
+.wifi-detail-head { display: flex; flex-direction: column; gap: 3px; }
+
.wifi-detail-essid {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
+ word-break: break-word;
}
.wifi-detail-bssid {
- font-size: 11px;
+ font-size: 10px;
font-family: monospace;
color: var(--text-dim);
}
-.wifi-detail-close {
- background: none;
- border: none;
+.wifi-detail-signal-bar {
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ padding: 8px 10px;
+}
+
+.wifi-detail-signal-labels {
+ display: flex;
+ justify-content: space-between;
+ font-size: 9px;
color: var(--text-dim);
- font-size: 20px;
- cursor: pointer;
- padding: 0 5px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 6px;
}
-.wifi-detail-close:hover {
- color: var(--accent-red);
+.wifi-detail-signal-track {
+ height: 6px;
+ background: var(--bg-elevated);
+ border-radius: 3px;
+ overflow: hidden;
}
-.wifi-detail-content {
- padding: 15px;
+.wifi-detail-signal-fill {
+ height: 100%;
+ border-radius: 3px;
+ background: linear-gradient(90deg, var(--accent-green), var(--accent-orange));
+ transition: width 0.3s;
}
.wifi-detail-grid {
display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 15px;
+ grid-template-columns: 1fr 1fr;
+ gap: 6px;
}
.wifi-detail-stat {
- display: flex;
- flex-direction: column;
- gap: 3px;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ padding: 6px 8px;
}
.wifi-detail-stat .label {
- font-size: 10px;
+ display: block;
+ font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 2px;
}
.wifi-detail-stat .value {
- font-size: 13px;
- font-weight: 500;
+ font-size: 12px;
+ font-weight: 600;
color: var(--text-primary);
}
+.wifi-detail-actions {
+ display: flex;
+ gap: 6px;
+ margin-top: auto;
+ padding-top: 4px;
+}
+
+.wifi-detail-close-btn {
+ padding: 7px 12px;
+ font-family: inherit;
+ font-size: 10px;
+ background: var(--bg-secondary);
+ color: var(--text-dim);
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ cursor: pointer;
+ transition: color 0.15s;
+}
+
+.wifi-detail-close-btn:hover { color: var(--text-primary); }
+
.wifi-detail-clients {
margin-top: 15px;
padding-top: 15px;
@@ -4225,9 +4248,6 @@ header h1 .tagline {
grid-column: span 1;
}
- .wifi-detail-grid {
- grid-template-columns: repeat(2, 1fr);
- }
}
/* Bluetooth Layout Container */
diff --git a/static/js/modes/wifi.js b/static/js/modes/wifi.js
index 10eb929..89f75bb 100644
--- a/static/js/modes/wifi.js
+++ b/static/js/modes/wifi.js
@@ -216,8 +216,8 @@ const WiFiMode = (function() {
zoneNear: document.getElementById('wifiZoneNear'),
zoneFar: document.getElementById('wifiZoneFar'),
- // Detail drawer
- detailDrawer: document.getElementById('wifiDetailDrawer'),
+ // Detail panel
+ detailSignalFill: document.getElementById('wifiDetailSignalFill'),
detailEssid: document.getElementById('wifiDetailEssid'),
detailBssid: document.getElementById('wifiDetailBssid'),
detailRssi: document.getElementById('wifiDetailRssi'),
@@ -1252,12 +1252,17 @@ const WiFiMode = (function() {
function selectNetwork(bssid) {
selectedBssid = bssid;
- // Update row selection
+ // Highlight selected row
elements.networkList?.querySelectorAll('.network-row').forEach(row => {
row.classList.toggle('selected', row.dataset.bssid === bssid);
});
- // Update detail panel
+ // Show detail in right panel
+ if (elements.heatmapView) elements.heatmapView.style.display = 'none';
+ if (elements.detailView) elements.detailView.style.display = 'flex';
+ if (elements.rightPanelTitle) elements.rightPanelTitle.textContent = 'Network Detail';
+ if (elements.detailBackBtn) elements.detailBackBtn.style.display = 'inline-block';
+
updateDetailPanel(bssid);
// Highlight on radar
@@ -1272,7 +1277,6 @@ const WiFiMode = (function() {
function updateDetailPanel(bssid, options = {}) {
const { refreshClients = true } = options;
- if (!elements.detailDrawer) return;
const network = networks.get(bssid);
if (!network) {
@@ -1280,7 +1284,7 @@ const WiFiMode = (function() {
return;
}
- // Update drawer header
+ // Update detail header
if (elements.detailEssid) {
elements.detailEssid.textContent = network.display_name || network.essid || '[Hidden SSID]';
}
@@ -1314,8 +1318,12 @@ const WiFiMode = (function() {
elements.detailFirstSeen.textContent = formatTime(network.first_seen);
}
- // Show the drawer
- elements.detailDrawer.classList.add('open');
+ // Update signal bar
+ if (elements.detailSignalFill) {
+ const rssi = network.rssi_current;
+ const pct = rssi != null ? Math.max(0, Math.min(100, (rssi + 100) / 80 * 100)) : 0;
+ elements.detailSignalFill.style.width = pct.toFixed(1) + '%';
+ }
// Fetch and display clients for this network
if (refreshClients) {
@@ -1325,12 +1333,17 @@ const WiFiMode = (function() {
function closeDetail() {
selectedBssid = null;
- if (elements.detailDrawer) {
- elements.detailDrawer.classList.remove('open');
- }
+
+ // Deselect all rows
elements.networkList?.querySelectorAll('.network-row').forEach(row => {
row.classList.remove('selected');
});
+
+ // Restore heatmap in right panel
+ if (elements.detailView) elements.detailView.style.display = 'none';
+ if (elements.heatmapView) elements.heatmapView.style.display = 'flex';
+ if (elements.rightPanelTitle) elements.rightPanelTitle.textContent = 'Channel Heatmap';
+ if (elements.detailBackBtn) elements.detailBackBtn.style.display = 'none';
}
// ==========================================================================
diff --git a/templates/index.html b/templates/index.html
index 3912819..832e40f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -970,62 +970,70 @@
-
-
-
-
+
+
-
-
-
-
-
-
-
Signal
-
+
+
+
+
+ Channel
+ —
+
+
+ Band
+ —
+
+
+ Security
+ —
+
+
+ Cipher
+ —
+
+
+ Clients
+ —
+
+
+ First Seen
+ —
+
+
+ Vendor
+ —
+
+
+
+
+
+
+
+
+
-
- Channel
- --
-
-
- Band
- --
-
-
- Security
- --
-
-
- Cipher
- --
-
-
- Vendor
- --
-
-
- Clients
- --
-
-
- First Seen
- --
-
-
-