intercept/templates/partials/modes/fingerprint.html

<!-- FINGERPRINT MODE -->
<div id="fingerprintMode" class="mode-content">

    <!-- Intro -->
    <div class="section">
        <div style="font-size:11px; color:var(--text-dim); line-height:1.6;">
            RF Fingerprinting captures the baseline radio environment at a location.
            Record a baseline when the environment is "clean", then compare later to
            detect new transmitters, surveillance devices, or signal anomalies.
        </div>
    </div>

    <!-- Workflow tab selector -->
    <div class="section">
        <h3>Workflow</h3>
        <div style="display:flex; gap:4px;">
            <button class="fp-tab-btn active" id="fpTabRecord" onclick="Fingerprint.showTab('record')">
                1 — Record
            </button>
            <button class="fp-tab-btn" id="fpTabCompare" onclick="Fingerprint.showTab('compare')">
                2 — Compare
            </button>
        </div>
        <div id="fpTabHint" style="margin-top:8px; font-size:11px; color:var(--text-dim); line-height:1.5;">
            Record a <strong style="color:var(--text-secondary);">baseline</strong> in a known-clean RF environment, then use <strong style="color:var(--text-secondary);">Compare</strong> later to detect new or anomalous signals.
        </div>
    </div>

    <!-- Record tab -->
    <div id="fpRecordPanel">
        <div class="section">
            <h3>Step 1 — Select Device</h3>
            <div class="form-group">
                <label>SDR Device</label>
                <select id="fpDevice">
                    <option value="">Loading…</option>
                </select>
            </div>
        </div>

        <div class="section">
            <h3>Step 2 — Scanner Status</h3>
            <div style="display:flex; align-items:center; gap:8px; padding:6px 0;">
                <span id="fpScannerDot" style="width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); flex-shrink:0;"></span>
                <span id="fpScannerStatusText" style="font-size:11px; color:var(--text-secondary); flex:1;">Checking…</span>
            </div>
            <div style="display:flex; gap:6px;">
                <button class="run-btn" id="fpScannerStartBtn" onclick="Fingerprint.startScanner()" style="flex:1;">Start Scanner</button>
                <button class="stop-btn" id="fpScannerStopBtn" onclick="Fingerprint.stopScanner()" style="flex:1; display:none;">Stop Scanner</button>
            </div>
        </div>

        <div class="section">
            <h3>Step 3 — Record Baseline</h3>
            <div class="form-group">
                <label>Session Name</label>
                <input type="text" id="fpSessionName" placeholder="e.g. Office — Mon morning">
            </div>
            <div class="form-group">
                <label>Location <span style="color:var(--text-dim); font-weight:normal;">(optional)</span></label>
                <input type="text" id="fpSessionLocation" placeholder="e.g. 3rd floor, room 301">
            </div>
            <div style="display:flex; align-items:center; gap:10px; margin:6px 0;">
                <span style="font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em;">Observations</span>
                <span id="fpObsCount" style="font-size:14px; font-family:var(--font-mono); color:var(--accent-cyan, #4aa3ff);">0</span>
            </div>
            <div id="fpRecordStatus" style="font-size:11px; color:var(--text-dim); margin-bottom:6px; min-height:14px;"></div>
            <button class="run-btn" id="fpStartBtn" onclick="Fingerprint.startRecording()">Start Recording</button>
            <button class="stop-btn" id="fpStopBtn" style="display:none;" onclick="Fingerprint.stopRecording()">Stop &amp; Save</button>
        </div>
    </div>

    <!-- Compare tab -->
    <div id="fpComparePanel" style="display:none;">
        <div class="section">
            <h3>How It Works</h3>
            <div style="font-size:11px; color:var(--text-dim); line-height:1.6;">
                <div style="display:flex; gap:8px; align-items:flex-start; margin-bottom:6px;">
                    <span style="color:var(--accent-cyan); font-weight:700; flex-shrink:0;">1.</span>
                    <span>Ensure the scanner is running (switch to Record tab to start it).</span>
                </div>
                <div style="display:flex; gap:8px; align-items:flex-start; margin-bottom:6px;">
                    <span style="color:var(--accent-cyan); font-weight:700; flex-shrink:0;">2.</span>
                    <span>Select a previously recorded baseline below.</span>
                </div>
                <div style="display:flex; gap:8px; align-items:flex-start; margin-bottom:6px;">
                    <span style="color:var(--accent-cyan); font-weight:700; flex-shrink:0;">3.</span>
                    <span>Click <strong style="color:var(--text-secondary);">Compare Now</strong> — a 3-second live scan is collected.</span>
                </div>
                <div style="display:flex; gap:8px; align-items:flex-start;">
                    <span style="color:var(--accent-cyan); font-weight:700; flex-shrink:0;">4.</span>
                    <span>Anomalies are scored by z-score. <span style="color:#ef4444;">Red = strong deviation</span>, <span style="color:#a855f7;">purple = new signal</span>.</span>
                </div>
            </div>
        </div>

        <div class="section">
            <h3>Baseline</h3>
            <div class="form-group">
                <label>Session</label>
                <select id="fpBaselineSelect">
                    <option value="">No baselines saved yet</option>
                </select>
            </div>
            <div id="fpCompareStatus" style="font-size:11px; color:var(--text-dim); margin-bottom:6px; min-height:14px;"></div>
            <button class="run-btn" onclick="Fingerprint.compareNow()">Compare Now</button>
        </div>

        <div class="section" id="fpAnomalyList" style="display:none;">
            <h3>Anomalies</h3>
            <div id="fpAnomalyItems"></div>
        </div>
    </div>

</div>