mirror of
https://github.com/smittix/intercept.git
synced 2026-04-23 22:30:00 -07:00
e687862043
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>
104 lines
5.9 KiB
HTML
104 lines
5.9 KiB
HTML
<!-- 433MHz SENSOR MODE -->
|
|
<div id="sensorMode" class="mode-content">
|
|
<div class="section">
|
|
<h3>Frequency</h3>
|
|
<div class="form-group">
|
|
<label for="sensorFrequency">Frequency (MHz)</label>
|
|
<input type="text" id="sensorFrequency" value="433.92" placeholder="e.g., 433.92">
|
|
</div>
|
|
<div class="preset-buttons">
|
|
<button class="preset-btn" onclick="setSensorFreq('433.92')">433.92</button>
|
|
<button class="preset-btn" onclick="setSensorFreq('315.00')">315.00</button>
|
|
<button class="preset-btn" onclick="setSensorFreq('868.00')">868.00</button>
|
|
<button class="preset-btn" onclick="setSensorFreq('915.00')">915.00</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Settings</h3>
|
|
<div class="form-group">
|
|
<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 for="sensorPpm">PPM Correction</label>
|
|
<input type="text" id="sensorPpm" value="0" placeholder="Frequency correction">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Protocols</h3>
|
|
<div class="info-text" style="margin-bottom: 10px;">
|
|
rtl_433 auto-detects 200+ device protocols including weather stations, TPMS, doorbells, and more.
|
|
</div>
|
|
<div class="checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="sensorLogging" onchange="toggleSensorLogging()">
|
|
Enable Logging
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Antenna Guide -->
|
|
<div class="section">
|
|
<h3>Antenna Guide</h3>
|
|
<div style="font-size: 11px; color: var(--text-dim); line-height: 1.5;">
|
|
<p style="margin-bottom: 8px; color: var(--accent-cyan); font-weight: 600;">
|
|
ISM band devices (433 / 868 / 915 MHz)
|
|
</p>
|
|
|
|
<div style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; margin-bottom: 10px;">
|
|
<strong style="color: var(--accent-cyan); font-size: 12px;">Stock Telescopic Antenna</strong>
|
|
<ul style="margin: 6px 0 0 14px; padding: 0;">
|
|
<li><strong style="color: var(--text-primary);">433 MHz:</strong> Extend to ~17 cm (quarter-wave). Stock antenna works but isn't ideal</li>
|
|
<li><strong style="color: var(--text-primary);">868/915 MHz:</strong> Extend to ~8 cm. Stock antenna is nearly tuned for this</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; margin-bottom: 10px;">
|
|
<strong style="color: var(--accent-cyan); font-size: 12px;">Quarter-Wave Ground Plane (Best)</strong>
|
|
<ul style="margin: 6px 0 0 14px; padding: 0;">
|
|
<li><strong style="color: var(--text-primary);">433 MHz:</strong> Vertical element 17.3 cm + four 17.3 cm radials at 45°</li>
|
|
<li><strong style="color: var(--text-primary);">868 MHz:</strong> Vertical element 8.6 cm + four 8.6 cm radials</li>
|
|
<li><strong style="color: var(--text-primary);">915 MHz:</strong> Vertical element 8.2 cm + four 8.2 cm radials</li>
|
|
<li><strong style="color: var(--text-primary);">Material:</strong> Stiff copper wire soldered to an SMA connector</li>
|
|
<li><strong style="color: var(--text-primary);">Placement:</strong> Outdoors or near a window. Higher is better for range</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 10px;">
|
|
<strong style="color: var(--accent-cyan); font-size: 12px;">Quick Reference</strong>
|
|
<table style="width: 100%; margin-top: 6px; font-size: 10px; border-collapse: collapse;">
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">433 MHz λ/4</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">17.3 cm</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">868 MHz λ/4</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">8.6 cm</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">915 MHz λ/4</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">8.2 cm</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">Typical range</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">50–300 m</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">Polarization</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">Vertical</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="run-btn" id="startSensorBtn" onclick="startSensorDecoding()">
|
|
Start Listening
|
|
</button>
|
|
<button class="stop-btn" id="stopSensorBtn" onclick="stopSensorDecoding()" style="display: none;">
|
|
Stop Listening
|
|
</button>
|
|
</div>
|