intercept/templates/partials/modes/pager.html

<!-- PAGER MODE -->
<div id="pagerMode" class="mode-content active">
    <div class="section">
        <h3>Frequency</h3>
        <div class="form-group">
            <label>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>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>
            <input type="text" id="squelch" value="0" placeholder="0 = off">
        </div>
        <div class="form-group">
            <label>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>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>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&ndash;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) &mdash; 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>