mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 06:40:00 -07:00
feat: UI/UX overhaul — CSS cleanup, accessibility, error handling, inline style extraction
Phase 0 — CSS-only fixes: - Fix --font-mono to use real monospace stack (JetBrains Mono, Fira Code, etc.) - Replace hardcoded hex colors with CSS variables across 16+ files - Merge global-nav.css (507 lines) into layout.css, delete original - Reduce !important in responsive.css from 71 to 8 via .app-shell specificity - Standardize breakpoints to 480/768/1024/1280px Phase 1 — Loading states & SSE connection feedback: - Add centralized SSEManager (sse-manager.js) with exponential backoff - Add SSE status indicator dot in nav bar - Add withLoadingButton() + .btn-loading CSS spinner - Add mode section crossfade transitions Phase 2 — Accessibility: - Add aria-labels to icon-only buttons across mode partials - Add for/id associations to 42 form labels in 5 mode partials - Add aria-live on toast stack, enableListKeyNav() utility Phase 3 — Destructive action guards & list overflow: - Add confirmAction() styled modal, replace all 25 native confirm() calls - Add toast cap at 5 simultaneous toasts - Add list overflow indicator CSS Phase 4 — Inline style extraction: - Refactor switchMode() in app.js and index.html to use classList.toggle() - Add CSS toggle rules for all switchMode-controlled elements - Remove inline style="display:none" from 7+ HTML elements - Add utility classes (.hidden, .d-flex, .d-grid, etc.) Phase 5 — Mobile UX polish: - pre/code overflow handling already in place - Touch target sizing via --touch-min variable Phase 6 — Error handling consistency: - Add reportActionableError() to user-facing catch blocks in 5 mode JS files - 28 error toast additions alongside existing console.error calls Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
@@ -14,13 +14,13 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Adapter</label>
|
||||
<label for="btAdapterSelect">Adapter</label>
|
||||
<select id="btAdapterSelect">
|
||||
<option value="">Detecting adapters...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Scan Mode</label>
|
||||
<label for="btScanMode">Scan Mode</label>
|
||||
<select id="btScanMode">
|
||||
<option value="auto">Auto (Recommended)</option>
|
||||
<option value="bleak">Bleak Library</option>
|
||||
@@ -30,7 +30,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Transport</label>
|
||||
<label for="btTransport">Transport</label>
|
||||
<select id="btTransport">
|
||||
<option value="auto">Auto (BLE + Classic)</option>
|
||||
<option value="le">BLE Only</option>
|
||||
@@ -38,11 +38,11 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Duration (seconds, 0 = continuous)</label>
|
||||
<label for="btScanDuration">Duration (seconds, 0 = continuous)</label>
|
||||
<input type="number" id="btScanDuration" value="0" min="0" max="300" placeholder="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Min RSSI Filter (dBm)</label>
|
||||
<label for="btMinRssi">Min RSSI Filter (dBm)</label>
|
||||
<input type="number" id="btMinRssi" value="-100" min="-100" max="-20" placeholder="-100">
|
||||
</div>
|
||||
<button class="preset-btn" onclick="btCheckCapabilities()" style="width: 100%;">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div id="btLocateHandoffCard" style="display: none; background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.3); border-radius: 6px; padding: 8px; margin-bottom: 8px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-size: 10px; color: var(--accent-green); text-transform: uppercase; font-weight: 600;">Handed off from BT</span>
|
||||
<button onclick="BtLocate.clearHandoff()" style="background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 10px;">×</button>
|
||||
<button onclick="BtLocate.clearHandoff()" aria-label="Clear handoff" style="background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 10px;">×</button>
|
||||
</div>
|
||||
<div id="btLocateHandoffName" style="font-size: 12px; font-weight: 600; color: var(--text-primary); margin-top: 4px;"></div>
|
||||
<div id="btLocateHandoffMeta" style="font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);"></div>
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
<div class="signal-details-modal-content">
|
||||
<div class="signal-details-modal-header">
|
||||
<h3>Configure Channel <span id="meshModalChannelIndex">0</span></h3>
|
||||
<button class="signal-details-modal-close" onclick="Meshtastic.closeChannelModal()">×</button>
|
||||
<button class="signal-details-modal-close" onclick="Meshtastic.closeChannelModal()" aria-label="Close channel config">×</button>
|
||||
</div>
|
||||
<div class="signal-details-modal-body">
|
||||
<div class="signal-details-section">
|
||||
@@ -175,7 +175,7 @@
|
||||
<div class="signal-details-modal-content">
|
||||
<div class="signal-details-modal-header">
|
||||
<h3>Traceroute to <span id="meshTracerouteDest">--</span></h3>
|
||||
<button class="signal-details-modal-close" onclick="Meshtastic.closeTracerouteModal()">×</button>
|
||||
<button class="signal-details-modal-close" onclick="Meshtastic.closeTracerouteModal()" aria-label="Close traceroute">×</button>
|
||||
</div>
|
||||
<div class="signal-details-modal-body">
|
||||
<div id="meshTracerouteContent" class="mesh-traceroute-content">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="section">
|
||||
<h3>Frequency</h3>
|
||||
<div class="form-group">
|
||||
<label>Frequency (MHz)</label>
|
||||
<label for="frequency">Frequency (MHz)</label>
|
||||
<input type="text" id="frequency" value="153.350" placeholder="e.g., 153.350">
|
||||
</div>
|
||||
<div class="preset-buttons" id="presetButtons">
|
||||
@@ -31,15 +31,15 @@
|
||||
<div class="section">
|
||||
<h3>Settings</h3>
|
||||
<div class="form-group">
|
||||
<label>Gain (dB, 0 = auto)</label>
|
||||
<label for="gain">Gain (dB, 0 = auto)</label>
|
||||
<input type="text" id="gain" value="0" placeholder="0-49 or 0 for auto">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Squelch Level</label>
|
||||
<label for="squelch">Squelch Level</label>
|
||||
<input type="text" id="squelch" value="0" placeholder="0 = off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>PPM Correction</label>
|
||||
<label for="ppm">PPM Correction</label>
|
||||
<input type="text" id="ppm" value="0" placeholder="Frequency correction">
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,7 +53,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Log file path</label>
|
||||
<label for="logFilePath">Log file path</label>
|
||||
<input type="text" id="logFilePath" value="pager_messages.log" placeholder="pager_messages.log">
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +67,7 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Hide messages containing (comma-separated)</label>
|
||||
<label for="filterKeywords">Hide messages containing (comma-separated)</label>
|
||||
<input type="text" id="filterKeywords" placeholder="e.g. test, spam, alert" oninput="savePagerFilters()">
|
||||
</div>
|
||||
<div class="info-text" style="font-size: 10px; color: #666; margin-top: 5px;">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="section">
|
||||
<h3>Frequency</h3>
|
||||
<div class="form-group">
|
||||
<label>Frequency (MHz)</label>
|
||||
<label for="sensorFrequency">Frequency (MHz)</label>
|
||||
<input type="text" id="sensorFrequency" value="433.92" placeholder="e.g., 433.92">
|
||||
</div>
|
||||
<div class="preset-buttons">
|
||||
@@ -17,11 +17,11 @@
|
||||
<div class="section">
|
||||
<h3>Settings</h3>
|
||||
<div class="form-group">
|
||||
<label>Gain (dB, 0 = auto)</label>
|
||||
<label for="sensorGain">Gain (dB, 0 = auto)</label>
|
||||
<input type="text" id="sensorGain" value="0" placeholder="0-49 or 0 for auto">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>PPM Correction</label>
|
||||
<label for="sensorPpm">PPM Correction</label>
|
||||
<input type="text" id="sensorPpm" value="0" placeholder="Frequency correction">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<div class="section">
|
||||
<h3>Device</h3>
|
||||
<div class="form-group">
|
||||
<label>SDR Device</label>
|
||||
<label for="wfDevice">SDR Device</label>
|
||||
<select id="wfDevice" onchange="Waterfall && Waterfall.onDeviceChange && Waterfall.onDeviceChange()">
|
||||
<option value="">Loading devices...</option>
|
||||
</select>
|
||||
@@ -60,11 +60,11 @@
|
||||
<div class="section">
|
||||
<h3>Tuning</h3>
|
||||
<div class="form-group">
|
||||
<label>Center Frequency (MHz)</label>
|
||||
<label for="wfCenterFreq">Center Frequency (MHz)</label>
|
||||
<input type="number" id="wfCenterFreq" value="100.0000" step="0.001" min="0.001" max="6000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Span (MHz)</label>
|
||||
<label for="wfSpanMhz">Span (MHz)</label>
|
||||
<input type="number" id="wfSpanMhz" value="2.4" step="0.1" min="0.05" max="30">
|
||||
</div>
|
||||
<div class="wf-side-grid-2">
|
||||
@@ -130,11 +130,11 @@
|
||||
Identify current frequency using local catalog and SigID Wiki matches.
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Frequency (MHz)</label>
|
||||
<label for="wfSigIdFreq">Frequency (MHz)</label>
|
||||
<input type="number" id="wfSigIdFreq" value="100.0000" step="0.0001" min="0.001" max="6000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Mode Hint</label>
|
||||
<label for="wfSigIdMode">Mode Hint</label>
|
||||
<select id="wfSigIdMode">
|
||||
<option value="auto" selected>Auto (Current Mode)</option>
|
||||
<option value="wfm">WFM</option>
|
||||
@@ -156,15 +156,15 @@
|
||||
<div class="section">
|
||||
<h3>Scan</h3>
|
||||
<div class="form-group">
|
||||
<label>Range Start (MHz)</label>
|
||||
<label for="wfScanStart">Range Start (MHz)</label>
|
||||
<input type="number" id="wfScanStart" value="98.8000" step="0.001" min="0.001" max="6000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Range End (MHz)</label>
|
||||
<label for="wfScanEnd">Range End (MHz)</label>
|
||||
<input type="number" id="wfScanEnd" value="101.2000" step="0.001" min="0.001" max="6000">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Step (kHz)</label>
|
||||
<label for="wfScanStepKhz">Step (kHz)</label>
|
||||
<select id="wfScanStepKhz">
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
@@ -176,15 +176,15 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Dwell (ms)</label>
|
||||
<label for="wfScanDwellMs">Dwell (ms)</label>
|
||||
<input type="number" id="wfScanDwellMs" value="450" min="60" max="10000" step="10">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Signal Threshold <span id="wfScanThresholdValue" class="wf-inline-value">170</span></label>
|
||||
<label for="wfScanThreshold">Signal Threshold <span id="wfScanThresholdValue" class="wf-inline-value">170</span></label>
|
||||
<input type="range" id="wfScanThreshold" min="0" max="255" value="170">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Hold On Hit (ms)</label>
|
||||
<label for="wfScanHoldMs">Hold On Hit (ms)</label>
|
||||
<input type="number" id="wfScanHoldMs" value="2500" min="0" max="30000" step="100">
|
||||
</div>
|
||||
<div class="checkbox-group wf-scan-checkboxes">
|
||||
@@ -246,11 +246,11 @@
|
||||
<div class="section">
|
||||
<h3>Capture</h3>
|
||||
<div class="form-group">
|
||||
<label>Gain <span class="wf-inline-value">(dB or AUTO)</span></label>
|
||||
<label for="wfGain">Gain <span class="wf-inline-value">(dB or AUTO)</span></label>
|
||||
<input type="text" id="wfGain" value="AUTO" placeholder="AUTO or numeric">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>FFT Size</label>
|
||||
<label for="wfFftSize">FFT Size</label>
|
||||
<select id="wfFftSize">
|
||||
<option value="256">256</option>
|
||||
<option value="512">512</option>
|
||||
@@ -260,7 +260,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Frame Rate</label>
|
||||
<label for="wfFps">Frame Rate</label>
|
||||
<select id="wfFps">
|
||||
<option value="10">10 fps</option>
|
||||
<option value="20" selected>20 fps</option>
|
||||
@@ -269,7 +269,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>FFT Averaging</label>
|
||||
<label for="wfAvgCount">FFT Averaging</label>
|
||||
<select id="wfAvgCount">
|
||||
<option value="1">1 (none)</option>
|
||||
<option value="2">2</option>
|
||||
@@ -279,7 +279,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>PPM Correction</label>
|
||||
<label for="wfPpm">PPM Correction</label>
|
||||
<input type="number" id="wfPpm" value="0" step="1" min="-200" max="200" placeholder="0">
|
||||
</div>
|
||||
<div class="checkbox-group wf-scan-checkboxes">
|
||||
@@ -293,7 +293,7 @@
|
||||
<div class="section">
|
||||
<h3>Display</h3>
|
||||
<div class="form-group">
|
||||
<label>Color Palette</label>
|
||||
<label for="wfPalette">Color Palette</label>
|
||||
<select id="wfPalette" onchange="Waterfall.setPalette(this.value)">
|
||||
<option value="turbo" selected>Turbo</option>
|
||||
<option value="plasma">Plasma</option>
|
||||
@@ -302,11 +302,11 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Noise Floor (dB)</label>
|
||||
<label for="wfDbMin">Noise Floor (dB)</label>
|
||||
<input type="number" id="wfDbMin" value="-100" step="5" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Ceiling (dB)</label>
|
||||
<label for="wfDbMax">Ceiling (dB)</label>
|
||||
<input type="number" id="wfDbMax" value="-20" step="5" disabled>
|
||||
</div>
|
||||
<div class="checkbox-group wf-scan-checkboxes">
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<div class="section">
|
||||
<h3>WiFi Adapter</h3>
|
||||
<div class="form-group">
|
||||
<label>Select Device</label>
|
||||
<label for="wifiInterfaceSelect">Select Device</label>
|
||||
<select id="wifiInterfaceSelect" style="font-size: 12px;">
|
||||
<option value="">Detecting interfaces...</option>
|
||||
</select>
|
||||
@@ -62,7 +62,7 @@
|
||||
<div class="section">
|
||||
<h3>Scan Settings</h3>
|
||||
<div class="form-group">
|
||||
<label>Band</label>
|
||||
<label for="wifiBand">Band</label>
|
||||
<select id="wifiBand">
|
||||
<option value="abg">All (2.4 + 5 GHz)</option>
|
||||
<option value="bg">2.4 GHz only</option>
|
||||
@@ -70,7 +70,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Channel Preset</label>
|
||||
<label for="wifiChannelPreset">Channel Preset</label>
|
||||
<select id="wifiChannelPreset">
|
||||
<option value="">Auto hop (all)</option>
|
||||
<option value="2.4-common">2.4 GHz Common (1,6,11)</option>
|
||||
@@ -81,11 +81,11 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Channel List (overrides preset)</label>
|
||||
<label for="wifiChannelList">Channel List (overrides preset)</label>
|
||||
<input type="text" id="wifiChannelList" placeholder="e.g., 1,6,11 or 36,40,44,48">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Channel (single)</label>
|
||||
<label for="wifiChannel">Channel (single)</label>
|
||||
<input type="text" id="wifiChannel" placeholder="e.g., 6 or 36">
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,15 +110,15 @@
|
||||
<span class="icon icon--sm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span> Only use on authorized networks
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Target BSSID</label>
|
||||
<label for="targetBssid">Target BSSID</label>
|
||||
<input type="text" id="targetBssid" placeholder="AA:BB:CC:DD:EE:FF">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Target Client (optional)</label>
|
||||
<label for="targetClient">Target Client (optional)</label>
|
||||
<input type="text" id="targetClient" placeholder="FF:FF:FF:FF:FF:FF (broadcast)">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Deauth Count</label>
|
||||
<label for="deauthCount">Deauth Count</label>
|
||||
<input type="text" id="deauthCount" value="5" placeholder="5">
|
||||
</div>
|
||||
<button class="preset-btn" onclick="sendDeauth()" style="width: 100%; border-color: var(--accent-red); color: var(--accent-red);">
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div id="wflHandoffCard" style="display: none; background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.3); border-radius: 6px; padding: 8px; margin-bottom: 8px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-size: 10px; color: var(--accent-green); text-transform: uppercase; font-weight: 600;">Handed off from WiFi</span>
|
||||
<button onclick="WiFiLocate.clearHandoff()" style="background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 10px;">×</button>
|
||||
<button onclick="WiFiLocate.clearHandoff()" aria-label="Clear handoff" style="background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 10px;">×</button>
|
||||
</div>
|
||||
<div id="wflHandoffName" style="font-size: 12px; font-weight: 600; color: var(--text-primary); margin-top: 4px;"></div>
|
||||
<div id="wflHandoffMeta" style="font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);"></div>
|
||||
|
||||
Reference in New Issue
Block a user