Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Sentinel Intelligence Command Center"> | |
| <title>SENTINEL | Intelligence Command Center</title> | |
| <!-- SECURITY GATE --> | |
| <script> | |
| if (!sessionStorage.getItem('sentinel_auth')) { | |
| window.location.href = '/'; | |
| } | |
| </script> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=JetBrains+Mono:wght@300;400;500&family=Rajdhani:wght@400;500;600;700&display=swap" | |
| rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Cytoscape for Graph Visualization --> | |
| <script src="https://unpkg.com/cytoscape@3.25.0/dist/cytoscape.min.js"></script> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="dashboard.css"> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-icon">🍯</div> | |
| <div class="loader-text" id="loader-status">INITIALIZING COMMAND CENTER...</div> | |
| <div class="loader-bar"> | |
| <div class="loader-bar-fill"></div> | |
| </div> | |
| </div> | |
| <!-- Background Effects --> | |
| <div class="bg-grid"></div> | |
| <div class="gradient-overlay"></div> | |
| <!-- Main Layout --> | |
| <div class="app-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="logo"> | |
| <i class="fas fa-cube logo-icon" | |
| style="color: var(--honey-gold); font-size: 1.5rem; margin-right: 10px;"></i> | |
| <span class="logo-text">SENTINEL</span> | |
| </div> | |
| <!-- <div class="version-badge">v2.5.0</div> --> | |
| </div> | |
| <!-- Agent Status --> | |
| <div class="agent-status-panel"> | |
| <div class="panel-title"> | |
| <i class="fas fa-heartbeat"></i> System Agents | |
| </div> | |
| <div class="agent-list" id="agent-list"> | |
| <div class="agent-item"> | |
| <span class="agent-dot loading" id="dot-detector"></span> | |
| <span class="agent-name">Detector</span> | |
| <span class="agent-status" id="status-detector">...</span> | |
| </div> | |
| <div class="agent-item"> | |
| <span class="agent-dot loading" id="dot-brain"></span> | |
| <span class="agent-name">Brain</span> | |
| <span class="agent-status" id="status-brain">...</span> | |
| </div> | |
| <div class="agent-item"> | |
| <span class="agent-dot loading" id="dot-siem"></span> | |
| <span class="agent-name">SIEM</span> | |
| <span class="agent-status" id="status-siem">...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="sidebar-nav"> | |
| <button class="nav-item active" data-view="command" onclick="SentinelDash.switchView('command')"> | |
| <i class="fas fa-satellite-dish"></i> | |
| <span>Command Center</span> | |
| </button> | |
| <button class="nav-item" data-view="forensics" onclick="SentinelDash.switchView('forensics')"> | |
| <i class="fas fa-fingerprint"></i> | |
| <span>Forensic Lab</span> | |
| </button> | |
| <button class="nav-item" data-view="engagement" onclick="SentinelDash.switchView('engagement')"> | |
| <i class="fas fa-mask"></i> | |
| <span>Engagement Tool</span> | |
| </button> | |
| <button class="nav-item" data-view="docs" onclick="SentinelDash.switchView('docs')"> | |
| <i class="fas fa-book"></i> | |
| <span>Documentation</span> | |
| </button> | |
| <button class="nav-item" data-view="settings" onclick="SentinelDash.switchView('settings')"> | |
| <i class="fas fa-cog"></i> | |
| <span>Admin Settings</span> | |
| </button> | |
| </nav> | |
| <!-- Quick Actions --> | |
| <div class="sidebar-actions"> | |
| <button class="action-btn" onclick="SentinelDash.exportLogs('csv')" title="Export Log CSV"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="action-btn" onclick="document.documentElement.requestFullscreen()" title="Fullscreen"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <button class="action-btn" onclick="SentinelDash.refreshAll()" title="Refresh All"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| <!-- Sidebar Footer --> | |
| <div class="sidebar-footer"> | |
| <div class="social-links" | |
| style="display: flex; gap: 10px; margin-bottom: 10px; justify-content: center;"> | |
| <a href="https://github.com/avinash-rai-sentinel" target="_blank" class="social-btn" | |
| style="color: var(--text-muted); transition: 0.3s;"><i class="fab fa-github"></i></a> | |
| <a href="https://linkedin.com/in/avinash-rai-sentinel" target="_blank" class="social-btn" | |
| style="color: var(--text-muted); transition: 0.3s;"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| <div class="connection-status connected" id="connection-status"> | |
| <div class="status-dot"></div> | |
| <span>ONLINE</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Top Bar --> | |
| <header class="top-bar"> | |
| <div class="top-bar-left"> | |
| <h1 class="page-title" id="page-title">Intelligence Command Center</h1> | |
| <span class="breadcrumb">Dashboard / Live Operations</span> | |
| </div> | |
| <div class="top-bar-right"> | |
| <div class="live-clock" id="live-clock">--:--:--</div> | |
| <div class="alert-badge" id="alert-badge" title="Active Threats"> | |
| <i class="fas fa-bell"></i> | |
| <span class="badge-count" id="alert-count">0</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- View Container --> | |
| <div class="view-container"> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| VIEW 1: INTELLIGENCE COMMAND CENTER | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section class="view active" id="view-command"> | |
| <!-- KPI Cards Row --> | |
| <div class="kpi-row"> | |
| <div class="kpi-card" id="kpi-interceptions"> | |
| <div class="kpi-icon"><i class="fas fa-shield-alt"></i></div> | |
| <div class="kpi-content"> | |
| <div class="kpi-value" id="stat-interceptions">---</div> | |
| <div class="kpi-label">Interceptions <span class="truth-tag real">REAL</span></div> | |
| </div> | |
| </div> | |
| <div class="kpi-card" id="kpi-savings"> | |
| <div class="kpi-icon savings"><i class="fas fa-rupee-sign"></i></div> | |
| <div class="kpi-content"> | |
| <div class="kpi-value" id="stat-savings">---</div> | |
| <div class="kpi-label">Est. Savings <span class="truth-tag simulated">PROJ</span></div> | |
| </div> | |
| </div> | |
| <div class="kpi-card" id="kpi-risk"> | |
| <div class="kpi-icon danger"><i class="fas fa-exclamation-triangle"></i></div> | |
| <div class="kpi-content"> | |
| <div class="kpi-value" id="stat-risk">---</div> | |
| <div class="kpi-label">Risk Level <span class="truth-tag real">REAL</span></div> | |
| </div> | |
| <div class="kpi-indicator" id="risk-indicator"> | |
| <div class="risk-bar"></div> | |
| </div> | |
| </div> | |
| <div class="kpi-card" id="kpi-active"> | |
| <div class="kpi-icon active"><i class="fas fa-broadcast-tower"></i></div> | |
| <div class="kpi-content"> | |
| <div class="kpi-value" id="stat-active">---</div> | |
| <div class="kpi-label">Active Nodes <span class="truth-tag real">REAL</span></div> | |
| </div> | |
| <div class="kpi-pulse"></div> | |
| </div> | |
| </div> | |
| <!-- Main Grid --> | |
| <div class="command-grid"> | |
| <!-- Live Threat Feed --> | |
| <div class="panel threat-feed-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-rss"></i> Live Threat Feed <span | |
| class="truth-tag partial">HYBRID</span></h3> | |
| <span class="live-badge"><span class="pulse-dot"></span> UPDATING</span> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="threat-ticker" id="threat-ticker"> | |
| <div class="ticker-item loading"> | |
| <i class="fas fa-spinner fa-spin"></i> Connecting to URLHaus... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Clusters --> | |
| <div class="panel campaigns-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-project-diagram"></i> Threat Clusters <span | |
| class="truth-tag partial">HYBRID</span></h3> | |
| <button class="panel-btn" onclick="SentinelDash.refreshCampaigns()"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="campaign-list" id="campaign-list"> | |
| <div class="campaign-item loading"> | |
| <i class="fas fa-spinner fa-spin"></i> Analyzing vectors... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real-time Logs Terminal --> | |
| <div class="panel terminal-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-terminal"></i> System Kernel Logs <span class="truth-tag real">LIVE | |
| IO</span></h3> | |
| <div class="terminal-controls"> | |
| <button class="terminal-btn" onclick="SentinelDash.clearTerminal()">Clear</button> | |
| </div> | |
| </div> | |
| <div class="panel-body terminal-body"> | |
| <div class="terminal-output" id="terminal-output"> | |
| <div class="log-line system">[KERNEL] Establishing secure stream...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- INTEGRITY FOOTER --> | |
| <div class="truth-footer"> | |
| <span>🛡️ ADMIN MODE: VERIFICATION LAYER ACTIVE</span> | |
| <span> | |
| TYPE: <span style="color:var(--truth-real)">REAL (Operational)</span> | | |
| <span style="color:var(--truth-partial)">HYBRID (Enriched)</span> | | |
| <span style="color:var(--truth-sim)">SIMULATED (Projection)</span> | |
| </span> | |
| <span>v2.5.0-AUDIT</span> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| VIEW 2: FORENSIC LAB | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section class="view" id="view-forensics"> | |
| <div class="forensics-grid"> | |
| <!-- Threat Graph --> | |
| <div class="panel graph-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-project-diagram"></i> Threat Network Graph</h3> | |
| <div class="graph-controls"> | |
| <button class="graph-btn" onclick="SentinelDash.refreshGraph()"> | |
| <i class="fas fa-sync-alt"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="panel-body graph-body"> | |
| <div id="threat-graph" class="graph-container"></div> | |
| <div class="graph-legend"> | |
| <div class="legend-item"> | |
| <span class="legend-dot scammer"></span> Scammer | |
| </div> | |
| <div class="legend-item"> | |
| <span class="legend-dot upi"></span> UPI ID | |
| </div> | |
| <div class="legend-item"> | |
| <span class="legend-dot phone"></span> Phone | |
| </div> | |
| <div class="legend-item"> | |
| <span class="legend-dot campaign"></span> Campaign | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Telemetry Table --> | |
| <div class="panel telemetry-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-fingerprint"></i> Silent Fingerprints</h3> | |
| <span class="record-count" id="telemetry-count">0 records</span> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="table-container"> | |
| <table class="data-table" id="telemetry-table"> | |
| <thead> | |
| <tr> | |
| <th>IP Address</th> | |
| <th>Device OS</th> | |
| <th>Browser</th> | |
| <th>Risk</th> | |
| </tr> | |
| </thead> | |
| <tbody id="telemetry-body"> | |
| <tr class="loading-row"> | |
| <td colspan="4"> | |
| <i class="fas fa-spinner fa-spin"></i> Loading telemetry... | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dossier Generator --> | |
| <div class="panel dossier-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-file-contract"></i> Legal Dossier Generator</h3> | |
| </div> | |
| <div class="panel-body dossier-body"> | |
| <div class="dossier-form"> | |
| <div class="form-group"> | |
| <label>Session ID / Case Number</label> | |
| <input type="text" id="dossier-id" class="form-input" | |
| placeholder="e.g., SESSION_ABC123"> | |
| </div> | |
| <button class="generate-btn" onclick="SentinelDash.generateDossier()"> | |
| <i class="fas fa-gavel"></i> Generate Legal Dossier | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| VIEW 3: SCAMMER ENGAGEMENT TOOL | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section class="view" id="view-engagement"> | |
| <div class="engagement-grid"> | |
| <!-- API Testing Lab --> | |
| <div class="panel testing-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-flask"></i> Scam Detection Lab</h3> | |
| <span class="lab-badge">Interactive</span> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="lab-description"> | |
| <p>Type a message <strong>as a scammer would</strong> to test the AI detection | |
| system.</p> | |
| </div> | |
| <div class="test-terminal"> | |
| <div class="terminal-header"> | |
| <span class="terminal-dot red"></span> | |
| <span class="terminal-dot yellow"></span> | |
| <span class="terminal-dot green"></span> | |
| <span class="terminal-title">sentinel-analyze</span> | |
| </div> | |
| <div class="terminal-content"> | |
| <div class="terminal-history" id="test-history"> | |
| <div class="history-item system"> | |
| [SYSTEM] Detection Lab Ready. Type a scam message. | |
| </div> | |
| </div> | |
| <div class="terminal-input-line"> | |
| <span class="prompt">scammer@test:~$</span> | |
| <input type="text" id="test-input" class="terminal-input" | |
| placeholder="Type scam message here..." | |
| onkeypress="SentinelDash.handleTestInput(event)"> | |
| <button class="action-btn" | |
| onclick="SentinelDash.handleTestInput({key:'Enter', target: {value: 'GUVI_PROBE_SIMULATION'}})" | |
| title="Simulate GUVI Probe" | |
| style="margin-left: 10px; padding: 2px 8px; font-size: 0.7rem;"> | |
| <i class="fas fa-bug"></i> GUVI | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Honeytoken Generator --> | |
| <div class="panel honeytoken-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-honey-pot"></i> Honeytoken Generator</h3> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="honeytoken-grid"> | |
| <div class="honeytoken-card" onclick="SentinelDash.generateHoneytoken('upi')"> | |
| <div class="token-icon"><i class="fas fa-credit-card"></i></div> | |
| <div class="token-title">Fake UPI Link</div> | |
| </div> | |
| <div class="honeytoken-card" onclick="SentinelDash.generateHoneytoken('kyc')"> | |
| <div class="token-icon"><i class="fas fa-id-card"></i></div> | |
| <div class="token-title">Fake KYC Portal</div> | |
| </div> | |
| </div> | |
| <div class="honeytoken-output" id="honeytoken-output" style="display: none;"> | |
| <div class="output-label">Generated Trap Link:</div> | |
| <div class="output-link"> | |
| <code id="honeytoken-link"></code> | |
| <button class="copy-btn" onclick="SentinelDash.copyHoneytoken()"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Admin Export Panel --> | |
| <div class="panel admin-panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-user-shield"></i> Admin Controls</h3> | |
| <span class="admin-badge">Restricted</span> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="admin-section"> | |
| <h4>SIEM Integration / Export</h4> | |
| <div class="export-options"> | |
| <button class="export-btn" onclick="SentinelDash.exportLogs('splunk')"> | |
| <i class="fas fa-database"></i> Splunk Format | |
| </button> | |
| <button class="export-btn" onclick="SentinelDash.exportLogs('csv')"> | |
| <i class="fas fa-file-csv"></i> CSV Export | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| VIEW 4: DOCUMENTATION HUB | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section class="view" id="view-docs"> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-book-open"></i> System Documentation</h3> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="docs-grid"> | |
| <a href="../docs/MASTER_API_CATALOG.md" target="_blank" class="doc-card"> | |
| <div class="doc-icon"><i class="fas fa-code"></i></div> | |
| <div class="doc-title">Master API Catalog</div> | |
| <div class="doc-desc">Exhaustive list of all endpoints and secrets</div> | |
| </a> | |
| <a href="../docs/README.md" target="_blank" class="doc-card"> | |
| <div class="doc-icon"><i class="fas fa-map"></i></div> | |
| <div class="doc-title">Documentation Index</div> | |
| <div class="doc-desc">Start here to navigate the project</div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ═══════════════════════════════════════════════════════════════ | |
| VIEW 5: ADMIN SETTINGS | |
| ═══════════════════════════════════════════════════════════════ --> | |
| <section class="view" id="view-settings"> | |
| <div class="panel admin-panel-full"> | |
| <div class="panel-header"> | |
| <h3><i class="fas fa-user-lock"></i> Platform Configuration</h3> | |
| </div> | |
| <div class="panel-body"> | |
| <div class="settings-group"> | |
| <h4>GUVI Integration Keys</h4> | |
| <p class="settings-desc">Securely store your API keys for the Build-a-Thon | |
| evaluation.</p> | |
| <div class="input-with-action"> | |
| <div class="form-group"> | |
| <label>GUVI x-api-key</label> | |
| <input type="password" id="guvi-api-key" class="form-input" | |
| placeholder="Enter API Key..."> | |
| </div> | |
| <button class="save-btn" onclick="SentinelDash.saveApiKey()"> | |
| <i class="fas fa-save"></i> Save Key | |
| </button> | |
| </div> | |
| <div id="key-status" class="key-status">Not Configured</div> | |
| </div> | |
| <div class="settings-group"> | |
| <h4>System UI Theme</h4> | |
| <div class="theme-toggles"> | |
| <button class="theme-btn active" | |
| onclick="SentinelDash.setTheme('cyber')">Cyberpunk</button> | |
| <button class="theme-btn" onclick="SentinelDash.setTheme('minimal')">Enterprise | |
| Min</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- JavaScript --> | |
| <script src="dashboard.js"></script> | |
| </body> | |
| </html> | |
| <div class="toast" id="toast"> | |
| <i class="fas fa-check-circle" id="toast-icon"></i> | |
| <span id="toast-message">Action completed</span> | |
| </div> | |
| <!-- JavaScript --> | |
| <script src="dashboard.js"></script> | |
| </body> | |
| </html> |