intercept/templates/partials/modes/rfheatmap.html

<!-- RF HEATMAP MODE -->
<div id="rfheatmapMode" class="mode-content">

    <!-- What is this? -->
    <div class="section">
        <h3>RF Heatmap</h3>
        <div style="background:rgba(74,163,255,0.07); border:1px solid rgba(74,163,255,0.2); border-radius:6px; padding:10px; font-size:11px; color:var(--text-secondary); line-height:1.6;">
            Walk around with INTERCEPT running. Your GPS position and the current signal strength are saved as a point on the map every few metres. The result is a <strong style="color:var(--accent-cyan);">coverage heatmap</strong> — bright areas have strong signal, dark areas are weak or absent.
        </div>
    </div>

    <!-- Step 1 — Signal source -->
    <div class="section">
        <h3><span style="color:var(--accent-cyan); margin-right:6px;">1</span>What to Map</h3>
        <div class="form-group">
            <label>Signal Source</label>
            <select id="rfhmSource" onchange="RFHeatmap.setSource(this.value); RFHeatmap.onSourceChange()">
                <option value="wifi">WiFi — RSSI of nearby networks</option>
                <option value="bluetooth">Bluetooth — RSSI of nearby devices</option>
                <option value="scanner">SDR Scanner — broadband RF power</option>
            </select>
        </div>

        <!-- SDR device picker — only shown for Scanner source -->
        <div id="rfhmDeviceGroup" style="display:none;">
            <div class="form-group">
                <label>SDR Device</label>
                <select id="rfhmDevice">
                    <option value="">Loading…</option>
                </select>
            </div>
        </div>

        <div id="rfhmSourceHint" style="font-size:11px; color:var(--text-dim); margin-top:4px; line-height:1.5;">
            Walk near WiFi access points — their signal strength at each location is recorded.
        </div>

        <!-- Source running status + inline start/stop -->
        <div id="rfhmSourceStatusRow" style="margin-top:10px; padding:8px 10px; background:rgba(0,0,0,0.3); border-radius:6px;">
            <div style="display:flex; align-items:center; gap:7px; margin-bottom:6px;">
                <span id="rfhmSourceDot" style="width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.2); flex-shrink:0;"></span>
                <span id="rfhmSourceStatusText" style="font-size:11px; color:var(--text-dim);">Checking…</span>
            </div>
            <button id="rfhmSourceStartBtn" class="run-btn" style="padding:6px; font-size:11px;" onclick="RFHeatmap.startSource()">Start Scanner</button>
            <button id="rfhmSourceStopBtn" class="stop-btn" style="display:none; padding:6px; font-size:11px;" onclick="RFHeatmap.stopSource()">Stop Scanner</button>
        </div>
    </div>

    <!-- Step 2 — Location -->
    <div class="section">
        <h3><span style="color:var(--accent-cyan); margin-right:6px;">2</span>Your Location</h3>

        <div style="display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.06);">
            <span style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;">GPS</span>
            <span id="rfhmGpsPill" style="font-family:var(--font-mono); font-size:11px; color:var(--text-dim);">No Fix</span>
        </div>

        <div style="margin-top:8px;">
            <div style="font-size:10px; color:var(--text-muted); margin-bottom:6px; line-height:1.5;">
                No GPS? Enter a fixed location to map signals from a stationary point.
            </div>
            <div style="display:flex; gap:6px;">
                <div class="form-group" style="flex:1; margin-bottom:0;">
                    <label>Latitude</label>
                    <input type="number" id="rfhmManualLat" step="0.0001" placeholder="37.7749" oninput="RFHeatmap.setManualCoords()">
                </div>
                <div class="form-group" style="flex:1; margin-bottom:0;">
                    <label>Longitude</label>
                    <input type="number" id="rfhmManualLon" step="0.0001" placeholder="-122.4194" oninput="RFHeatmap.setManualCoords()">
                </div>
            </div>
            <button class="preset-btn" onclick="RFHeatmap.useObserverLocation()" style="font-size:10px; margin-top:5px;">
                Use Saved Observer Location
            </button>
        </div>
    </div>

    <!-- Step 3 — Verify live signal -->
    <div class="section">
        <h3><span style="color:var(--accent-cyan); margin-right:6px;">3</span>Live Signal</h3>
        <div style="background:rgba(0,0,0,0.3); border-radius:6px; padding:10px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                <span style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;">Current</span>
                <span id="rfhmLiveSignal" style="font-family:var(--font-mono); font-size:16px; color:var(--text-dim);">— dBm</span>
            </div>
            <!-- Signal strength bar -->
            <div style="height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden;">
                <div id="rfhmSignalBar" style="height:100%; width:0%; background:var(--accent-cyan); border-radius:2px; transition:width 0.3s ease;"></div>
            </div>
            <div id="rfhmSignalStatus" style="font-size:10px; color:var(--text-dim); margin-top:5px;">Waiting for signal data…</div>
        </div>
    </div>

    <!-- Step 4 — Record -->
    <div class="section">
        <h3><span style="color:var(--accent-cyan); margin-right:6px;">4</span>Record</h3>

        <div class="form-group">
            <label>Sample Every</label>
            <div style="display:flex; align-items:center; gap:8px;">
                <input type="range" id="rfhmMinDist" min="1" max="50" value="5" step="1" style="flex:1;"
                       oninput="document.getElementById('rfhmMinDistVal').textContent=this.value+'m'; RFHeatmap.setMinDist(parseInt(this.value))">
                <span id="rfhmMinDistVal" style="font-family:var(--font-mono); font-size:11px; color:var(--accent-cyan); min-width:28px; text-align:right;">5m</span>
            </div>
            <div style="font-size:10px; color:var(--text-dim); margin-top:3px;">A new point is added after you move this distance.</div>
        </div>

        <div style="display:flex; justify-content:space-between; align-items:center; padding:6px 0; margin-bottom:4px; border-top:1px solid rgba(255,255,255,0.06);">
            <span style="font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;">Points Captured</span>
            <span id="rfhmPointCount" style="font-family:var(--font-mono); font-size:14px; color:var(--accent-cyan);">0</span>
        </div>

        <button class="run-btn" id="rfhmRecordBtn" onclick="RFHeatmap.startRecording()">Start Recording</button>
        <button class="stop-btn" id="rfhmStopBtn" style="display:none;" onclick="RFHeatmap.stopRecording()">Stop Recording</button>
    </div>

    <!-- Map actions -->
    <div class="section">
        <h3>Map</h3>
        <div style="display:flex; gap:6px;">
            <button class="preset-btn" style="flex:1;" onclick="RFHeatmap.clearPoints()">Clear</button>
            <button class="preset-btn" style="flex:1;" onclick="RFHeatmap.exportGeoJSON()">Export GeoJSON</button>
        </div>
    </div>

</div>