mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 06:40:00 -07:00
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>
This commit is contained in:
Smittix
@@ -1,137 +1,25 @@
|
||||
<!-- TSCM MODE (Counter-Surveillance) -->
|
||||
<div id="tscmMode" class="mode-content">
|
||||
<!-- Primary Action Area -->
|
||||
<div class="section">
|
||||
<h3 style="display: flex; align-items: center; gap: 8px;">TSCM Sweep <span style="font-size: 9px; font-weight: normal; background: var(--accent-orange); color: #000; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px;">Alpha</span></h3>
|
||||
<div class="form-group">
|
||||
<label>Sweep Type</label>
|
||||
<select id="tscmSweepType">
|
||||
<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>
|
||||
<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>
|
||||
<div class="form-group">
|
||||
<label>Compare Against</label>
|
||||
<select id="tscmBaselineSelect">
|
||||
<option value="">No Baseline</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Scan Sources</h3>
|
||||
<div class="form-group" style="margin-bottom: 8px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<input type="checkbox" id="tscmWifiEnabled" checked style="margin: 0;">
|
||||
<label for="tscmWifiEnabled" style="flex: 1; margin: 0;">WiFi Networks</label>
|
||||
</div>
|
||||
<select id="tscmWifiInterface" style="width: 100%; margin-top: 4px; font-size: 11px;">
|
||||
<option value="">Select WiFi interface...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 8px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<input type="checkbox" id="tscmBtEnabled" checked style="margin: 0;">
|
||||
<label for="tscmBtEnabled" style="flex: 1; margin: 0;">Bluetooth Devices</label>
|
||||
</div>
|
||||
<select id="tscmBtInterface" style="width: 100%; margin-top: 4px; font-size: 11px;">
|
||||
<option value="">Select Bluetooth adapter...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 8px;">
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<input type="checkbox" id="tscmRfEnabled" style="margin: 0;">
|
||||
<label for="tscmRfEnabled" style="flex: 1; margin: 0;">RF Signals</label>
|
||||
</div>
|
||||
<select id="tscmSdrDevice" style="width: 100%; margin-top: 4px; font-size: 11px;">
|
||||
<option value="">Select SDR device...</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="preset-btn" onclick="refreshTscmDevices()" style="width: 100%; margin-top: 8px; font-size: 10px;">
|
||||
🔄 Refresh Devices
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Baseline Management</h3>
|
||||
<div class="form-group">
|
||||
<input type="text" id="tscmBaselineName" placeholder="Baseline name...">
|
||||
</div>
|
||||
<button class="run-btn" id="tscmRecordBaselineBtn" onclick="tscmRecordBaseline()" style="width: 100%; padding: 8px;">
|
||||
Record New Baseline
|
||||
<button class="stop-btn" id="stopTscmBtn" onclick="stopTscmSweep()" style="display: none; width: 100%;">
|
||||
Stop Sweep
|
||||
</button>
|
||||
<button class="stop-btn" id="tscmStopBaselineBtn" onclick="tscmStopBaseline()" style="width: 100%; padding: 8px; display: none;">
|
||||
Stop Recording
|
||||
</button>
|
||||
<div id="tscmBaselineStatus" style="margin-top: 8px; font-size: 11px; color: var(--text-muted);"></div>
|
||||
</div>
|
||||
|
||||
<button class="run-btn" id="startTscmBtn" onclick="startTscmSweep()">
|
||||
Start Sweep
|
||||
</button>
|
||||
<button class="stop-btn" id="stopTscmBtn" onclick="stopTscmSweep()" style="display: none;">
|
||||
Stop Sweep
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<!-- Meeting Window Control -->
|
||||
<div class="section" id="tscmMeetingSection" style="margin-top: 12px;">
|
||||
<h3>Meeting Window</h3>
|
||||
<div id="tscmMeetingStatus" style="font-size: 11px; color: var(--text-muted); margin-bottom: 8px;">
|
||||
No active meeting
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="tscmMeetingName" placeholder="Meeting name (optional)">
|
||||
</div>
|
||||
<button class="run-btn" id="tscmStartMeetingBtn" onclick="tscmStartMeeting()" style="width: 100%; padding: 8px;">
|
||||
🎯 Start Meeting Window
|
||||
</button>
|
||||
<button class="stop-btn" id="tscmEndMeetingBtn" onclick="tscmEndMeeting()" style="width: 100%; padding: 8px; display: none;">
|
||||
⏹ End Meeting Window
|
||||
</button>
|
||||
<div style="font-size: 9px; color: var(--text-muted); margin-top: 4px;">
|
||||
Devices detected during meetings get flagged
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="section" style="margin-top: 12px;">
|
||||
<h3>Quick Actions</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 6px;">
|
||||
<button class="preset-btn" onclick="tscmShowCapabilities()" style="width: 100%; font-size: 10px;">
|
||||
⚙️ View Capabilities
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmShowKnownDevices()" style="width: 100%; font-size: 10px;">
|
||||
✅ Known Devices
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmShowCases()" style="width: 100%; font-size: 10px;">
|
||||
📁 Cases
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmShowPlaybooks()" style="width: 100%; font-size: 10px;">
|
||||
📋 Playbooks
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export Options -->
|
||||
<div class="section" id="tscmExportSection" style="margin-top: 12px; display: none;">
|
||||
<h3>Export Report</h3>
|
||||
<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>
|
||||
|
||||
<!-- Futuristic Scanner Progress -->
|
||||
@@ -156,6 +44,122 @@
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user