mirror of
https://github.com/smittix/intercept.git
synced 2026-06-12 16:03:29 -07:00
Add minimal SVG icon system for signal types
Replace emoji icons with inline SVG for WiFi, Bluetooth, and RF/SDR indicators. Icons are standard symbols (arc, rune, wave) designed for screenshot legibility in reports. - Add Icons utility object in utils.js with SVG generators - Add icon CSS system with sizing variants and state animations - Update TSCM scanner indicators and capabilities bar - Remove decorative sensor type emojis (text labels suffice) - Keep signal strength SVG bars (already implemented) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
+13
-10
@@ -1398,15 +1398,15 @@
|
||||
<!-- Capabilities Summary Bar -->
|
||||
<div id="tscmCapabilitiesBar" class="tscm-capabilities-bar" style="display: none;">
|
||||
<div class="cap-item" id="capWifi" title="WiFi Capability">
|
||||
<span class="cap-icon">📶</span>
|
||||
<span class="cap-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor" stroke="none"/></svg></span>
|
||||
<span class="cap-status" id="capWifiStatus">--</span>
|
||||
</div>
|
||||
<div class="cap-item" id="capBt" title="Bluetooth Capability">
|
||||
<span class="cap-icon">🔵</span>
|
||||
<span class="cap-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6.5 6.5 17.5 17.5 12 22 12 2 17.5 6.5 6.5 17.5"/></svg></span>
|
||||
<span class="cap-status" id="capBtStatus">--</span>
|
||||
</div>
|
||||
<div class="cap-item" id="capRf" title="RF/SDR Capability">
|
||||
<span class="cap-icon">📡</span>
|
||||
<span class="cap-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 12c0-3 2-6 5-6s4 3 5 6c1 3 2 6 5 6s5-3 5-6"/></svg></span>
|
||||
<span class="cap-status" id="capRfStatus">--</span>
|
||||
</div>
|
||||
<div class="cap-item" id="capRoot" title="Privilege Level">
|
||||
@@ -1505,7 +1505,10 @@
|
||||
<span class="badge" id="tscmThreatCount">0</span>
|
||||
</div>
|
||||
<div class="tscm-panel-content" id="tscmThreatList">
|
||||
<div class="tscm-empty">No threats detected</div>
|
||||
<div class="tscm-empty">
|
||||
<div class="tscm-empty-primary">No anomalies detected</div>
|
||||
<div class="tscm-empty-secondary">Start a sweep to scan for signals of interest</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8293,7 +8296,7 @@
|
||||
assessment = `MODERATE CONCERN: ${needsReview.length} item(s) requiring further review`;
|
||||
assessmentClass = 'needs-review';
|
||||
} else {
|
||||
assessment = 'LOW CONCERN: No significant threats detected. Environment appears normal.';
|
||||
assessment = 'LOW CONCERN: No anomalies flagged by automated scan. Manual inspection recommended for comprehensive assessment.';
|
||||
}
|
||||
|
||||
// Helper function to render device row
|
||||
@@ -8986,7 +8989,7 @@
|
||||
function updateHighInterestPanel() {
|
||||
const panel = document.getElementById('tscmThreatList');
|
||||
if (tscmHighInterestDevices.length === 0) {
|
||||
panel.innerHTML = '<div class="tscm-empty">No flagged findings yet</div>';
|
||||
panel.innerHTML = '<div class="tscm-empty"><div class="tscm-empty-primary">Monitoring active — nothing flagged</div><div class="tscm-empty-secondary">Signals are being analyzed against baseline thresholds. This does not rule out passive or dormant devices.</div></div>';
|
||||
} else {
|
||||
// Sort by score (highest first)
|
||||
const sorted = [...tscmHighInterestDevices].sort((a, b) => b.score - a.score);
|
||||
@@ -9475,7 +9478,7 @@
|
||||
// Update threats list
|
||||
const threatList = document.getElementById('tscmThreatList');
|
||||
if (tscmThreats.length === 0) {
|
||||
threatList.innerHTML = '<div class="tscm-empty">No threats detected</div>';
|
||||
threatList.innerHTML = '<div class="tscm-empty"><div class="tscm-empty-primary">Monitoring active — nothing flagged</div><div class="tscm-empty-secondary">Signals are being analyzed against baseline thresholds. This does not rule out passive or dormant devices.</div></div>';
|
||||
} else {
|
||||
threatList.innerHTML = '<div class="tscm-threat-list">' + tscmThreats.map(t => `
|
||||
<div class="tscm-threat-item ${t.severity}">
|
||||
@@ -9797,19 +9800,19 @@
|
||||
<h4>Available Detection Methods</h4>
|
||||
<div class="capabilities-grid">
|
||||
<div class="cap-detail-item ${wifiAvailable ? 'available' : 'unavailable'}">
|
||||
<span class="cap-icon">📶</span>
|
||||
<span class="cap-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor" stroke="none"/></svg></span>
|
||||
<span class="cap-name">WiFi Scanning</span>
|
||||
<span class="cap-status">${wifiAvailable ? caps.wifi.mode : 'Not Available'}</span>
|
||||
${caps.wifi?.interface ? `<span class="cap-detail">${escapeHtml(caps.wifi.interface)}</span>` : ''}
|
||||
</div>
|
||||
<div class="cap-detail-item ${btAvailable ? 'available' : 'unavailable'}">
|
||||
<span class="cap-icon">🔵</span>
|
||||
<span class="cap-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6.5 6.5 17.5 17.5 12 22 12 2 17.5 6.5 6.5 17.5"/></svg></span>
|
||||
<span class="cap-name">Bluetooth Scanning</span>
|
||||
<span class="cap-status">${btAvailable ? caps.bluetooth.mode : 'Not Available'}</span>
|
||||
${caps.bluetooth?.adapter ? `<span class="cap-detail">${escapeHtml(caps.bluetooth.adapter)}</span>` : ''}
|
||||
</div>
|
||||
<div class="cap-detail-item ${rfAvailable ? 'available' : 'unavailable'}">
|
||||
<span class="cap-icon">📡</span>
|
||||
<span class="cap-icon icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 12c0-3 2-6 5-6s4 3 5 6c1 3 2 6 5 6s5-3 5-6"/></svg></span>
|
||||
<span class="cap-name">RF/SDR Scanning</span>
|
||||
<span class="cap-status">${rfAvailable ? 'Available' : 'Not Available'}</span>
|
||||
${caps.rf?.device_type ? `<span class="cap-detail">${escapeHtml(caps.rf.device_type)}</span>` : ''}
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
</select>
|
||||
</div>
|
||||
<button class="preset-btn" onclick="refreshTscmDevices()" style="width: 100%; margin-top: 8px; font-size: 10px;">
|
||||
🔄 Refresh Devices
|
||||
<span class="icon icon-refresh icon--sm" style="margin-right: 4px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></span>Refresh Devices
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,28 +90,28 @@
|
||||
<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>
|
||||
<span class="device-indicator-icon" id="tscmWifiIndicator" title="WiFi"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor" stroke="none"/></svg></span></span>
|
||||
<span class="device-indicator-icon" id="tscmBtIndicator" title="Bluetooth"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6.5 6.5 17.5 17.5 12 22 12 2 17.5 6.5 6.5 17.5"/></svg></span></span>
|
||||
<span class="device-indicator-icon" id="tscmRfIndicator" title="RF/SDR"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 12c0-3 2-6 5-6s4 3 5 6c1 3 2 6 5 6s5-3 5-6"/></svg></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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
|
||||
Generate Report
|
||||
</button>
|
||||
|
||||
<!-- Export Options -->
|
||||
<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
|
||||
<span class="icon icon-export icon--sm" style="margin-right: 2px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></span>PDF
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmDownloadAnnex('json')" style="flex: 1; font-size: 10px;">
|
||||
📊 JSON
|
||||
<span class="icon icon-export icon--sm" style="margin-right: 2px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></span>JSON
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmDownloadAnnex('csv')" style="flex: 1; font-size: 10px;">
|
||||
📈 CSV
|
||||
<span class="icon icon-export icon--sm" style="margin-right: 2px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></span>CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,10 +143,10 @@
|
||||
<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
|
||||
Start Meeting Window
|
||||
</button>
|
||||
<button class="stop-btn" id="tscmEndMeetingBtn" onclick="tscmEndMeeting()" style="width: 100%; padding: 8px; display: none;">
|
||||
⏹ End Meeting Window
|
||||
End Meeting Window
|
||||
</button>
|
||||
<div style="font-size: 9px; color: var(--text-muted); margin-top: 4px;">
|
||||
Devices detected during meetings get flagged
|
||||
@@ -159,16 +159,16 @@
|
||||
<h3 style="margin-bottom: 10px;">Tools</h3>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
|
||||
<button class="preset-btn" onclick="tscmShowCapabilities()" style="font-size: 10px; padding: 8px;">
|
||||
⚙️ Capabilities
|
||||
Capabilities
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmShowKnownDevices()" style="font-size: 10px; padding: 8px;">
|
||||
✅ Known Devices
|
||||
Known Devices
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmShowCases()" style="font-size: 10px; padding: 8px;">
|
||||
📁 Cases
|
||||
Cases
|
||||
</button>
|
||||
<button class="preset-btn" onclick="tscmShowPlaybooks()" style="font-size: 10px; padding: 8px;">
|
||||
📋 Playbooks
|
||||
Playbooks
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user