mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 14:50:00 -07:00
Redesign Bluetooth page to match WiFi layout
HTML: - Create bt-layout-container with flex layout - Left side: visualizations (radar, selected device, device types, tracker detection, signal distribution, FindMy detection) - Right side: scrollable device card list CSS: - Add bt-layout-container styles matching wifi-layout-container - Add bt-device-card styles with purple accent - Add device type overview styles - Add signal distribution bar styles - Add responsive breakpoints JavaScript: - Update addBtDeviceCard to create cards in new device list - Add selectBtDevice for device selection - Add updateBtStatsPanels for device type and signal stats - Add updateBtFindMyList for FindMy device tracking Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -2659,6 +2659,144 @@ header p {
|
||||
}
|
||||
}
|
||||
|
||||
/* Bluetooth Layout Container */
|
||||
.bt-layout-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
background: var(--bg-secondary);
|
||||
margin: 0 15px 10px 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
height: calc(100vh - 200px);
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.bt-layout-container .wifi-visuals {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bt-device-list {
|
||||
border-left-color: var(--accent-purple) !important;
|
||||
}
|
||||
|
||||
.bt-device-list .wifi-device-list-header h5 {
|
||||
color: var(--accent-purple);
|
||||
}
|
||||
|
||||
/* Bluetooth Device Type Overview */
|
||||
.bt-type-overview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bt-type-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bt-type-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Bluetooth Signal Distribution */
|
||||
.bt-signal-dist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.signal-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.signal-range span:first-child {
|
||||
width: 70px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.signal-range span:last-child {
|
||||
width: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.signal-bar-bg {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.signal-bar {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.signal-bar.strong {
|
||||
background: var(--accent-green);
|
||||
}
|
||||
|
||||
.signal-bar.medium {
|
||||
background: var(--accent-orange);
|
||||
}
|
||||
|
||||
.signal-bar.weak {
|
||||
background: var(--accent-red);
|
||||
}
|
||||
|
||||
/* Bluetooth Device Cards */
|
||||
.bt-device-card {
|
||||
margin-bottom: 8px;
|
||||
padding: 10px !important;
|
||||
border-left-color: var(--accent-purple) !important;
|
||||
}
|
||||
|
||||
.bt-device-card .header {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bt-device-card .sensor-data {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.bt-device-card.tracker {
|
||||
border-left-color: var(--accent-orange) !important;
|
||||
background: rgba(255, 165, 0, 0.05);
|
||||
}
|
||||
|
||||
.bt-device-card.findmy {
|
||||
border-left-color: #007aff !important;
|
||||
background: rgba(0, 122, 255, 0.05);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.bt-layout-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.bt-layout-container .wifi-visuals {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.bt-device-list {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.wifi-visual-panel {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
Reference in New Issue
Block a user