Files
intercept/templates/partials/modes/tscm.html
Smittix 5047fee431 Simplify TSCM menu for better UX
Redesign the sidebar to be more minimal with collapsible sections
for Settings and Advanced options. Primary sweep action is now
prominently displayed, with tool buttons condensed to compact icons.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-16 17:01:29 +00:00

166 lines
12 KiB
HTML

<!-- TSCM MODE (Counter-Surveillance) -->
<div id="tscmMode" class="mode-content">
<!-- Primary Action Area -->
<div class="section">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
<h3 style="margin: 0;">TSCM Sweep</h3>
<span style="font-size: 9px; background: var(--accent-orange); color: #000; padding: 2px 6px; border-radius: 3px; text-transform: uppercase;">Alpha</span>
</div>
<select id="tscmSweepType" style="width: 100%; margin-bottom: 12px;">
<option value="quick">Quick Scan (2 min)</option>
<option value="standard" selected>Standard (5 min)</option>
<option value="full">Full Sweep (15 min)</option>
<option value="wireless_cameras">Wireless Cameras</option>
<option value="body_worn">Body-Worn Devices</option>
<option value="gps_trackers">GPS Trackers</option>
</select>
<button class="run-btn" id="startTscmBtn" onclick="startTscmSweep()" style="width: 100%;">
Start Sweep
</button>
<button class="stop-btn" id="stopTscmBtn" onclick="stopTscmSweep()" style="display: none; width: 100%;">
Stop Sweep
</button>
</div>
<!-- Futuristic Scanner Progress -->
<div id="tscmProgress" class="tscm-scanner-progress" style="display: none;">
<div class="scanner-ring">
<svg viewBox="0 0 100 100">
<circle class="scanner-track" cx="50" cy="50" r="45" />
<circle class="scanner-progress" id="tscmScannerCircle" cx="50" cy="50" r="45" />
<line class="scanner-sweep" x1="50" y1="50" x2="50" y2="8" />
</svg>
<div class="scanner-center">
<span class="scanner-percent" id="tscmProgressPercent">0%</span>
</div>
</div>
<div class="scanner-info">
<div class="scanner-status" id="tscmProgressLabel">INITIALIZING</div>
<div class="scanner-devices">
<span class="device-indicator" id="tscmWifiIndicator" title="WiFi">📶</span>
<span class="device-indicator" id="tscmBtIndicator" title="Bluetooth">🔵</span>
<span class="device-indicator" id="tscmRfIndicator" title="RF/SDR">📡</span>
</div>
</div>
</div>
<!-- Report Button (shown after scan) -->
<button class="preset-btn" id="tscmReportBtn" onclick="generateTscmReport()" style="display: none; width: 100%; margin-top: 8px; background: var(--accent-cyan); color: #000; font-weight: 600;">
Generate Report
</button>
<!-- Export Options (shown after scan) -->
<div id="tscmExportSection" style="display: none; margin-top: 8px;">
<div style="display: flex; gap: 6px;">
<button class="preset-btn" onclick="tscmDownloadPdf()" style="flex: 1; font-size: 10px;">PDF</button>
<button class="preset-btn" onclick="tscmDownloadAnnex('json')" style="flex: 1; font-size: 10px;">JSON</button>
<button class="preset-btn" onclick="tscmDownloadAnnex('csv')" style="flex: 1; font-size: 10px;">CSV</button>
</div>
</div>
<!-- Collapsible Settings -->
<div class="section tscm-collapsible" style="margin-top: 12px;">
<div class="tscm-collapsible-header" onclick="toggleTscmSection('tscmSettingsContent')">
<span>Settings</span>
<span class="tscm-collapse-icon" id="tscmSettingsContentIcon">+</span>
</div>
<div class="tscm-collapsible-content" id="tscmSettingsContent" style="display: none;">
<!-- Scan Sources -->
<div style="margin-bottom: 12px;">
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px;">Scan Sources</div>
<div style="display: flex; flex-direction: column; gap: 6px;">
<label style="display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer;">
<input type="checkbox" id="tscmWifiEnabled" checked style="margin: 0;">
<span>WiFi</span>
<select id="tscmWifiInterface" style="margin-left: auto; font-size: 10px; padding: 2px 4px; max-width: 120px;">
<option value="">Auto</option>
</select>
</label>
<label style="display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer;">
<input type="checkbox" id="tscmBtEnabled" checked style="margin: 0;">
<span>Bluetooth</span>
<select id="tscmBtInterface" style="margin-left: auto; font-size: 10px; padding: 2px 4px; max-width: 120px;">
<option value="">Auto</option>
</select>
</label>
<label style="display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer;">
<input type="checkbox" id="tscmRfEnabled" style="margin: 0;">
<span>RF/SDR</span>
<select id="tscmSdrDevice" style="margin-left: auto; font-size: 10px; padding: 2px 4px; max-width: 120px;">
<option value="">Select...</option>
</select>
</label>
</div>
<button class="preset-btn" onclick="refreshTscmDevices()" style="width: 100%; margin-top: 8px; font-size: 10px; padding: 4px;">
Refresh Devices
</button>
</div>
<!-- Baseline Comparison -->
<div>
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;">Compare Against</div>
<select id="tscmBaselineSelect" style="width: 100%;">
<option value="">No Baseline</option>
</select>
</div>
</div>
</div>
<!-- Collapsible Advanced -->
<div class="section tscm-collapsible" style="margin-top: 8px;">
<div class="tscm-collapsible-header" onclick="toggleTscmSection('tscmAdvancedContent')">
<span>Advanced</span>
<span class="tscm-collapse-icon" id="tscmAdvancedContentIcon">+</span>
</div>
<div class="tscm-collapsible-content" id="tscmAdvancedContent" style="display: none;">
<!-- Baseline Recording -->
<div style="margin-bottom: 12px;">
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;">Record Baseline</div>
<input type="text" id="tscmBaselineName" placeholder="Baseline name..." style="width: 100%; margin-bottom: 6px;">
<button class="preset-btn" id="tscmRecordBaselineBtn" onclick="tscmRecordBaseline()" style="width: 100%; font-size: 11px;">
Record New Baseline
</button>
<button class="stop-btn" id="tscmStopBaselineBtn" onclick="tscmStopBaseline()" style="width: 100%; display: none; font-size: 11px;">
Stop Recording
</button>
<div id="tscmBaselineStatus" style="margin-top: 6px; font-size: 10px; color: var(--text-muted);"></div>
</div>
<!-- Meeting Window -->
<div id="tscmMeetingSection">
<div style="font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;">Meeting Window</div>
<div id="tscmMeetingStatus" style="font-size: 10px; color: var(--text-secondary); margin-bottom: 6px;">
No active meeting
</div>
<input type="text" id="tscmMeetingName" placeholder="Meeting name (optional)" style="width: 100%; margin-bottom: 6px;">
<button class="preset-btn" id="tscmStartMeetingBtn" onclick="tscmStartMeeting()" style="width: 100%; font-size: 11px;">
Start Meeting Window
</button>
<button class="stop-btn" id="tscmEndMeetingBtn" onclick="tscmEndMeeting()" style="width: 100%; display: none; font-size: 11px;">
End Meeting Window
</button>
<div style="font-size: 9px; color: var(--text-muted); margin-top: 4px;">
Devices detected during meetings get flagged
</div>
</div>
</div>
</div>
<!-- Compact Tools Row -->
<div style="display: flex; gap: 6px; margin-top: 12px;">
<button class="preset-btn tscm-tool-btn" onclick="tscmShowCapabilities()" title="Capabilities">
<span style="font-size: 14px;">⚙️</span>
</button>
<button class="preset-btn tscm-tool-btn" onclick="tscmShowKnownDevices()" title="Known Devices">
<span style="font-size: 14px;"></span>
</button>
<button class="preset-btn tscm-tool-btn" onclick="tscmShowCases()" title="Cases">
<span style="font-size: 14px;">📁</span>
</button>
<button class="preset-btn tscm-tool-btn" onclick="tscmShowPlaybooks()" title="Playbooks">
<span style="font-size: 14px;">📋</span>
</button>
</div>
<!-- Device Warnings -->
<div id="tscmDeviceWarnings" style="display: none; margin-top: 8px; padding: 8px; background: rgba(255,153,51,0.1); border: 1px solid rgba(255,153,51,0.3); border-radius: 4px;"></div>
</div>