mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 06:40: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>
149 lines
8.2 KiB
HTML
149 lines
8.2 KiB
HTML
<!-- PAGER MODE -->
|
|
<div id="pagerMode" class="mode-content active">
|
|
<div class="section">
|
|
<h3>Frequency</h3>
|
|
<div class="form-group">
|
|
<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">
|
|
<!-- Populated by JavaScript -->
|
|
</div>
|
|
<div style="margin-top: 8px; display: flex; gap: 5px;">
|
|
<input type="text" id="newPresetFreq" placeholder="New freq (MHz)" style="flex: 1; padding: 6px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; font-size: 12px;">
|
|
<button class="preset-btn" onclick="addPreset()" style="background: #2ecc71;">Add</button>
|
|
</div>
|
|
<div style="margin-top: 5px;">
|
|
<button class="preset-btn" onclick="resetPresets()" style="font-size: 11px;">Reset to Defaults</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Protocols</h3>
|
|
<div class="checkbox-group">
|
|
<label><input type="checkbox" id="proto_pocsag512" checked> POCSAG-512</label>
|
|
<label><input type="checkbox" id="proto_pocsag1200" checked> POCSAG-1200</label>
|
|
<label><input type="checkbox" id="proto_pocsag2400" checked> POCSAG-2400</label>
|
|
<label><input type="checkbox" id="proto_flex" checked> FLEX</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Settings</h3>
|
|
<div class="form-group">
|
|
<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 for="squelch">Squelch Level</label>
|
|
<input type="text" id="squelch" value="0" placeholder="0 = off">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ppm">PPM Correction</label>
|
|
<input type="text" id="ppm" value="0" placeholder="Frequency correction">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Logging</h3>
|
|
<div class="checkbox-group" style="margin-bottom: 15px;">
|
|
<label>
|
|
<input type="checkbox" id="loggingEnabled" onchange="toggleLogging()">
|
|
Enable Logging
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="logFilePath">Log file path</label>
|
|
<input type="text" id="logFilePath" value="pager_messages.log" placeholder="pager_messages.log">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Message Filters</h3>
|
|
<div class="checkbox-group" style="margin-bottom: 10px;">
|
|
<label>
|
|
<input type="checkbox" id="filterToneOnly" onchange="savePagerFilters()">
|
|
Hide "Tone Only" messages
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<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;">
|
|
Messages matching these keywords will be hidden from display but still logged.
|
|
</div>
|
|
<div id="mutedAddressInfo" style="margin-top: 8px; display: none;">
|
|
<span style="font-size: 11px; color: var(--text-dim, #888);">
|
|
<span id="mutedAddressCount">0</span> muted source(s)
|
|
</span>
|
|
<button onclick="SignalCards.unmuteAll()" style="margin-left: 6px; font-size: 10px; padding: 2px 8px; cursor: pointer; background: transparent; border: 1px solid var(--border-color, #444); color: var(--text-secondary, #aaa); border-radius: 3px;">
|
|
Unmute All
|
|
</button>
|
|
</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;">
|
|
Pager frequencies vary by region (130–930 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);">Works for:</strong> UHF pager bands (~900 MHz) — the stock antenna is tuned near 1 GHz</li>
|
|
<li><strong style="color: var(--text-primary);">Extend to:</strong> ~8 cm for 929 MHz (quarter-wave)</li>
|
|
<li><strong style="color: var(--text-primary);">For VHF (~150 MHz):</strong> Stock antenna is too short. Build a dipole (see below)</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;">Simple Dipole (Best for VHF Pagers)</strong>
|
|
<ul style="margin: 6px 0 0 14px; padding: 0;">
|
|
<li><strong style="color: var(--text-primary);">For 153 MHz:</strong> Two elements, each ~49 cm (quarter-wave)</li>
|
|
<li><strong style="color: var(--text-primary);">For 929 MHz:</strong> Two elements, each ~8 cm</li>
|
|
<li><strong style="color: var(--text-primary);">Formula:</strong> Element length (cm) = 7500 / frequency (MHz)</li>
|
|
<li><strong style="color: var(--text-primary);">Material:</strong> Any wire, coat hanger, or copper rod</li>
|
|
<li><strong style="color: var(--text-primary);">Orientation:</strong> Vertical (pager signals are vertically polarized)</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);">Common UHF freq</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">929 MHz</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">Common VHF freq</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">153.350 MHz</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">Modulation</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">FM (NFM)</td>
|
|
</tr>
|
|
<tr style="border-bottom: 1px solid var(--border-color);">
|
|
<td style="padding: 3px 4px; color: var(--text-dim);">Bandwidth</td>
|
|
<td style="padding: 3px 4px; color: var(--text-primary); text-align: right;">~12.5 kHz</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="startBtn" onclick="startDecoding()">
|
|
Start Decoding
|
|
</button>
|
|
<button class="stop-btn" id="stopBtn" onclick="stopDecoding()" style="display: none;">
|
|
Stop Decoding
|
|
</button>
|
|
</div>
|