Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexusme | Enterprise OSINT Intelligence Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cyber: { | |
| 900: '#0a0a0f', | |
| 800: '#13131f', | |
| 700: '#1e1e2e', | |
| 600: '#2d2d44', | |
| accent: '#00f0ff', | |
| danger: '#ff003c', | |
| success: '#0aff60', | |
| warning: '#fcee0a' | |
| } | |
| }, | |
| fontFamily: { | |
| mono: ['JetBrains Mono', 'monospace'], | |
| sans: ['Inter', 'sans-serif'] | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'scan': 'scan 2s linear infinite', | |
| 'glitch': 'glitch 1s linear infinite', | |
| 'float': 'float 3s ease-in-out infinite' | |
| }, | |
| keyframes: { | |
| scan: { | |
| '0%': { transform: 'translateY(-100%)' }, | |
| '100%': { transform: 'translateY(100%)' } | |
| }, | |
| glitch: { | |
| '0%, 100%': { transform: 'translate(0)' }, | |
| '20%': { transform: 'translate(-2px, 2px)' }, | |
| '40%': { transform: 'translate(-2px, -2px)' }, | |
| '60%': { transform: 'translate(2px, 2px)' }, | |
| '80%': { transform: 'translate(2px, -2px)' } | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: #00f0ff #0a0a0f; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0a0f; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #00f0ff; | |
| border-radius: 4px; | |
| } | |
| .glass-panel { | |
| background: rgba(19, 19, 31, 0.85); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(0, 240, 255, 0.1); | |
| } | |
| .neon-border { | |
| box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), | |
| inset 0 0 10px rgba(0, 240, 255, 0.05); | |
| } | |
| .danger-border { | |
| box-shadow: 0 0 10px rgba(255, 0, 60, 0.3), | |
| inset 0 0 10px rgba(255, 0, 60, 0.05); | |
| } | |
| .success-border { | |
| box-shadow: 0 0 10px rgba(10, 255, 96, 0.3), | |
| inset 0 0 10px rgba(10, 255, 96, 0.05); | |
| } | |
| .grid-bg { | |
| background-image: | |
| linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .terminal-text { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .typing-cursor::after { | |
| content: '|'; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { opacity: 1; } | |
| 51%, 100% { opacity: 0; } | |
| } | |
| .threat-level { | |
| background: linear-gradient(90deg, #0aff60 0%, #fcee0a 50%, #ff003c 100%); | |
| } | |
| .hex-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2300f0ff' fill-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .data-stream { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .data-stream::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #00f0ff, transparent); | |
| animation: scan 3s linear infinite; | |
| } | |
| .threat-card { | |
| transition: all 0.3s ease; | |
| } | |
| .threat-card:hover { | |
| transform: translateX(5px); | |
| } | |
| .status-dot { | |
| animation: pulse 2s infinite; | |
| } | |
| .matrix-rain { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| pointer-events: none; | |
| opacity: 0.03; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-cyber-900 text-gray-100 font-sans min-h-screen grid-bg"> | |
| <!-- Matrix Rain Background --> | |
| <canvas id="matrixCanvas" class="matrix-rain fixed inset-0"></canvas> | |
| <!-- Header --> | |
| <header class="fixed top-0 left-0 right-0 z-50 glass-panel border-b border-cyber-600"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center gap-4"> | |
| <div class="relative"> | |
| <i class="fas fa-shield-alt text-3xl text-cyber-accent animate-pulse-slow"></i> | |
| <div class="absolute -top-1 -right-1 w-3 h-3 bg-cyber-success rounded-full status-dot"></div> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold tracking-wider"> | |
| <span class="text-cyber-accent">NEXUS</span><span class="text-white">ME</span> | |
| </h1> | |
| <p class="text-xs text-gray-400 terminal-text">ENTERPRISE OSINT INTELLIGENCE</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-6"> | |
| <!-- Built with anycoder --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="text-xs px-3 py-1 rounded bg-cyber-700 hover:bg-cyber-600 transition-colors border border-cyber-accent/30 text-cyber-accent"> | |
| <i class="fas fa-code mr-1"></i>Built with anycoder | |
| </a> | |
| <div class="hidden md:flex items-center gap-4 text-sm"> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-2 h-2 bg-cyber-success rounded-full animate-pulse"></span> | |
| <span class="text-cyber-success">SECURE</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-globe text-cyber-accent"></i> | |
| <span class="terminal-text">127.3.4.5</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-clock text-cyber-warning"></i> | |
| <span id="utcTime" class="terminal-text">00:00:00 UTC</span> | |
| </div> | |
| </div> | |
| <button id="emergencyLock" class="px-4 py-2 bg-cyber-danger/20 border border-cyber-danger text-cyber-danger rounded hover:bg-cyber-danger hover:text-white transition-all"> | |
| <i class="fas fa-lock mr-2"></i>PANIC | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Layout --> | |
| <div class="flex pt-16 min-h-screen"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 glass-panel border-r border-cyber-600 fixed left-0 top-16 bottom-0 z-40"> | |
| <nav class="p-4 space-y-2"> | |
| <button onclick="switchModule('dashboard')" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg bg-cyber-accent/20 text-cyber-accent border border-cyber-accent/50 transition-all"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Threat Dashboard</span> | |
| </button> | |
| <button onclick="switchModule('intelligence')" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-cyber-700 text-gray-300 transition-all"> | |
| <i class="fas fa-brain"></i> | |
| <span>AI Intelligence</span> | |
| </button> | |
| <button onclick="switchModule('osint')" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-cyber-700 text-gray-300 transition-all"> | |
| <i class="fas fa-search"></i> | |
| <span>OSINT Explorer</span> | |
| </button> | |
| <button onclick="switchModule('darkweb')" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-cyber-700 text-gray-300 transition-all"> | |
| <i class="fas fa-mask"></i> | |
| <span>Dark Web Monitor</span> | |
| </button> | |
| <button onclick="switchModule('livestream')" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-cyber-700 text-gray-300 transition-all"> | |
| <i class="fas fa-satellite-dish"></i> | |
| <span>Live Stream</span> | |
| </button> | |
| <button onclick="switchModule('credentials')" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-cyber-700 text-gray-300 transition-all"> | |
| <i class="fas fa-key"></i> | |
| <span>Credential Vault</span> | |
| </button> | |
| <button onclick="switchModule('compliance')" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-cyber-700 text-gray-300 transition-all"> | |
| <i class="fas fa-balance-scale"></i> | |
| <span>Compliance</span> | |
| </button> | |
| </nav> | |
| <div class="p-4 border-t border-cyber-600 mt-auto"> | |
| <div class="glass-panel rounded-lg p-3 neon-border"> | |
| <p class="text-xs text-gray-400 mb-2">SYSTEM STATUS</p> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-xs"> | |
| <span>AI Engine</span> | |
| <span class="text-cyber-success">ONLINE</span> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>Data Ingestion</span> | |
| <span class="text-cyber-success">ACTIVE</span> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>Threat Level</span> | |
| <span id="threatLevelText" class="text-cyber-warning">ELEVATED</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 h-2 bg-cyber-800 rounded-full overflow-hidden"> | |
| <div class="threat-level h-full rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="flex-1 ml-64 p-6"> | |
| <!-- Dashboard Module --> | |
| <div id="module-dashboard" class="module space-y-6"> | |
| <!-- Stats Row --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="glass-panel rounded-xl p-4 neon-border data-stream"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Active Targets</p> | |
| <p class="text-3xl font-bold text-cyber-accent" id="activeTargets">1,247</p> | |
| </div> | |
| <i class="fas fa-crosshairs text-2xl text-cyber-accent/50"></i> | |
| </div> | |
| <p class="text-xs text-cyber-success mt-2">+23 from last hour</p> | |
| </div> | |
| <div class="glass-panel rounded-xl p-4 neon-border data-stream"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Data Sources</p> | |
| <p class="text-3xl font-bold text-cyber-warning" id="dataSources">847</p> | |
| </div> | |
| <i class="fas fa-database text-2xl text-cyber-warning/50"></i> | |
| </div> | |
| <p class="text-xs text-cyber-success mt-2">12 new feeds connected</p> | |
| </div> | |
| <div class="glass-panel rounded-xl p-4 neon-border data-stream"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Threats Detected</p> | |
| <p class="text-3xl font-bold text-cyber-danger" id="threatsDetected">89</p> | |
| </div> | |
| <i class="fas fa-exclamation-triangle text-2xl text-cyber-danger/50"></i> | |
| </div> | |
| <p class="text-xs text-cyber-danger mt-2">Critical: 3 | High: 12</p> | |
| </div> | |
| <div class="glass-panel rounded-xl p-4 neon-border data-stream"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">AI Confidence</p> | |
| <p class="text-3xl font-bold text-cyber-success" id="aiConfidence">94.7%</p> | |
| </div> | |
| <i class="fas fa-robot text-2xl text-cyber-success/50"></i> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-2">Last model update: 2m ago</p> | |
| </div> | |
| </div> | |
| <!-- Main Visualization --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Threat Map --> | |
| <div class="lg:col-span-2 glass-panel rounded-xl p-6 neon-border"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2"> | |
| <i class="fas fa-globe-americas text-cyber-accent"></i> | |
| Global Threat Intelligence Network | |
| </h3> | |
| <div class="flex gap-2"> | |
| <button class="px-3 py-1 text-xs rounded bg-cyber-700 hover:bg-cyber-600">Live</button> | |
| <button class="px-3 py-1 text-xs rounded bg-cyber-700 hover:bg-cyber-600">24H</button> | |
| <button class="px-3 py-1 text-xs rounded bg-cyber-700 hover:bg-cyber-600">7D</button> | |
| </div> | |
| </div> | |
| <div id="threatMap" class="h-96 bg-cyber-800 rounded-lg relative overflow-hidden hex-pattern"> | |
| <canvas id="networkCanvas" class="absolute inset-0 w-full h-full"></canvas> | |
| <div class="absolute top-4 left-4 space-y-2"> | |
| <div class="flex items-center gap-2 text-xs"> | |
| <span class="w-3 h-3 rounded-full bg-cyber-danger animate-pulse"></span> | |
| <span>Critical Threat</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-xs"> | |
| <span class="w-3 h-3 rounded-full bg-cyber-warning"></span> | |
| <span>Elevated Risk</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-xs"> | |
| <span class="w-3 h-3 rounded-full bg-cyber-success"></span> | |
| <span>Secure</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real-time Alerts --> | |
| <div class="glass-panel rounded-xl p-6 neon-border"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-bell text-cyber-warning"></i> | |
| Live Alerts | |
| </h3> | |
| <div id="alertFeed" class="space-y-3 max-h-96 overflow-y-auto"> | |
| <!-- Alerts injected by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Intelligence Feed --> | |
| <div class="glass-panel rounded-xl p-6 neon-border"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-stream text-cyber-accent"></i> | |
| Multi-Source Intelligence Stream | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <i class="fab fa-twitter text-blue-400"></i> | |
| <span class="font-medium">Social Media</span> | |
| </div> | |
| <div id="socialFeed" class="space-y-2 text-sm"> | |
| <!-- Social posts --> | |
| </div> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <i class="fas fa-newspaper text-cyber-warning"></i> | |
| <span class="font-medium">News & Blogs</span> | |
| </div> | |
| <div id="newsFeed" class="space-y-2 text-sm"> | |
| <!-- News items --> | |
| </div> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <i class="fas fa-bug text-cyber-danger"></i> | |
| <span class="font-medium">CVE Database</span> | |
| </div> | |
| <div id="cveFeed" class="space-y-2 text-sm"> | |
| <!-- CVE items --> | |
| </div> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <i class="fas fa-mask text-purple-400"></i> | |
| <span class="font-medium">Dark Web</span> | |
| </div> | |
| <div id="darkFeed" class="space-y-2 text-sm"> | |
| <!-- Dark web items --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Intelligence Module --> | |
| <div id="module-intelligence" class="module hidden space-y-6"> | |
| <div class="glass-panel rounded-xl p-6 neon-border"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-brain text-cyber-accent"></i> | |
| Hybrid Intelligence Core | |
| </h3> | |
| <!-- AI Status Panel --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-cyber-800 rounded-lg p-4 text-center"> | |
| <i class="fas fa-network-wired text-3xl text-cyber-accent mb-2"></i> | |
| <p class="text-sm text-gray-400">Neural Networks</p> | |
| <p class="text-2xl font-bold">12 Active</p> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-4 text-center"> | |
| <i class="fas fa-memory text-3xl text-cyber-warning mb-2"></i> | |
| <p class="text-sm text-gray-400">Processing Power</p> | |
| <p class="text-2xl font-bold">847 TFLOPS</p> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-4 text-center"> | |
| <i class="fas fa-database text-3xl text-cyber-success mb-2"></i> | |
| <p class="text-sm text-gray-400">Training Data</p> | |
| <p class="text-2xl font-bold">4.2 PB</p> | |
| </div> | |
| </div> | |
| <!-- Predictive Analytics --> | |
| <div class="bg-cyber-800 rounded-lg p-4 mb-4"> | |
| <h4 class="font-medium mb-3 flex items-center gap-2"> | |
| <i class="fas fa-chart-area text-cyber-accent"></i> | |
| Predictive Threat Model | |
| </h4> | |
| <div class="relative h-48 bg-cyber-900 rounded overflow-hidden"> | |
| <canvas id="predictionCanvas" class="w-full h-full"></canvas> | |
| </div> | |
| <div class="mt-3 flex gap-4 text-sm"> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-3 h-3 rounded bg-cyber-accent"></span> | |
| <span>Historical Pattern</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-3 h-3 rounded bg-cyber-danger"></span> | |
| <span>Predicted Threat</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="w-3 h-3 rounded bg-cyber-success"></span> | |
| <span>AI Intervention</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Query Interface --> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <h4 class="font-medium mb-3">Intelligence Query</h4> | |
| <div class="flex gap-2"> | |
| <input type="text" id="aiQuery" placeholder="Ask the AI intelligence engine..." | |
| class="flex-1 bg-cyber-900 border border-cyber-600 rounded-lg px-4 py-2 focus:outline-none focus:border-cyber-accent"> | |
| <button onclick="submitAIQuery()" class="px-6 py-2 bg-cyber-accent text-cyber-900 font-semibold rounded-lg hover:bg-cyber-accent/80"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div id="aiResponse" class="mt-4 p-4 bg-cyber-900 rounded-lg min-h-24 hidden"> | |
| <div class="flex items-start gap-3"> | |
| <i class="fas fa-robot text-cyber-accent mt-1"></i> | |
| <div> | |
| <p class="text-sm text-gray-400 mb-1">NexusAI Analysis:</p> | |
| <p id="aiResponseText" class="typing-cursor"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- OSINT Explorer Module --> | |
| <div id="module-osint" class="module hidden space-y-6"> | |
| <div class="glass-panel rounded-xl p-6 neon-border"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-search text-cyber-accent"></i> | |
| Multi-Vector OSINT Investigation | |
| </h3> | |
| <!-- Search Interface --> | |
| <div class="bg-cyber-800 rounded-lg p-4 mb-4"> | |
| <div class="flex gap-2 mb-4"> | |
| <select class="bg-cyber-900 border border-cyber-600 rounded-lg px-4 py-2"> | |
| <option>All Sources</option> | |
| <option>Social Media</option> | |
| <option>Public Records</option> | |
| <option>Domain Intelligence</option> | |
| <option>Cryptocurrency</option> | |
| </select> | |
| <input type="text" id="osintSearch" placeholder="Enter target identifier (email, username, domain, wallet)..." | |
| class="flex-1 bg-cyber-900 border border-cyber-600 rounded-lg px-4 py-2 focus:outline-none focus:border-cyber-accent"> | |
| <button onclick="executeOsintSearch()" class="px-6 py-2 bg-cyber-accent text-cyber-900 font-semibold rounded-lg hover:bg-cyber-accent/80"> | |
| <i class="fas fa-search mr-2"></i>Investigate | |
| </button> | |
| </div> | |
| <!-- Search Filters --> | |
| <div class="flex flex-wrap gap-2"> | |
| <label class="flex items-center gap-2 px-3 py-1 bg-cyber-900 rounded cursor-pointer hover:bg-cyber-700"> | |
| <input type="checkbox" checked class="accent-cyber-accent"> | |
| <span class="text-sm">Historical Data</span> | |
| </label> | |
| <label class="flex items-center gap-2 px-3 py-1 bg-cyber-900 rounded cursor-pointer hover:bg-cyber-700"> | |
| <input type="checkbox" checked class="accent-cyber-accent"> | |
| <span class="text-sm">Associated Entities</span> | |
| </label> | |
| <label class="flex items-center gap-2 px-3 py-1 bg-cyber-900 rounded cursor-pointer hover:bg-cyber-700"> | |
| <input type="checkbox" class="accent-cyber-accent"> | |
| <span class="text-sm">Geolocation</span> | |
| </label> | |
| <label class="flex items-center gap-2 px-3 py-1 bg-cyber-900 rounded cursor-pointer hover:bg-cyber-700"> | |
| <input type="checkbox" class="accent-cyber-accent"> | |
| <span class="text-sm">Image Analysis</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Investigation Results --> | |
| <div id="osintResults" class="hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Digital Footprint --> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <h4 class="font-medium mb-3 flex items-center gap-2"> | |
| <i class="fas fa-fingerprint text-cyber-accent"></i> | |
| Digital Footprint Analysis | |
| </h4> | |
| <div id="footprintData" class="space-y-2 text-sm"> | |
| <!-- Results --> | |
| </div> | |
| </div> | |
| <!-- Network Graph --> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <h4 class="font-medium mb-3 flex items-center gap-2"> | |
| <i class="fas fa-project-diagram text-cyber-warning"></i> | |
| Relationship Network | |
| </h4> | |
| <div id="networkGraph" class="h-48 bg-cyber-900 rounded relative"> | |
| <canvas class="absolute inset-0 w-full h-full"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dark Web Monitor Module --> | |
| <div id="module-darkweb" class="module hidden space-y-6"> | |
| <div class="glass-panel rounded-xl p-6 danger-border"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2 text-cyber-danger"> | |
| <i class="fas fa-mask"></i> | |
| Dark Web Intelligence Monitor | |
| </h3> | |
| <span class="px-3 py-1 bg-cyber-danger/20 text-cyber-danger rounded text-xs"> | |
| RESTRICTED ACCESS | |
| </span> | |
| </div> | |
| <!-- Tor Network Status --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> | |
| <div class="bg-cyber-800 rounded-lg p-3 text-center"> | |
| <p class="text-xs text-gray-400">Tor Nodes</p> | |
| <p class="text-xl font-bold text-cyber-accent">6,847</p> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-3 text-center"> | |
| <p class="text-xs text-gray-400">Active Crawlers</p> | |
| <p class="text-xl font-bold text-cyber-warning">24</p> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-3 text-center"> | |
| <p class="text-xs text-gray-400">Markets Monitored</p> | |
| <p class="text-xl font-bold text-cyber-danger">156</p> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-3 text-center"> | |
| <p class="text-xs text-gray-400">Leaks Detected</p> | |
| <p class="text-xl font-bold text-cyber-success">1,203</p> | |
| </div> | |
| </div> | |
| <!-- Dark Web Feed --> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h4 class="font-medium">Real-time Dark Web Stream</h4> | |
| <div class="flex gap-2"> | |
| <span class="w-2 h-2 bg-cyber-danger rounded-full animate-pulse"></span> | |
| <span class="text-xs text-cyber-danger">LIVE</span> | |
| </div> | |
| </div> | |
| <div id="darkWebFeed" class="space-y-2 max-h-96 overflow-y-auto terminal-text text-sm"> | |
| <!-- Dark web items --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Stream Module --> | |
| <div id="module-livestream" class="module hidden space-y-6"> | |
| <div class="glass-panel rounded-xl p-6 neon-border"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-satellite-dish text-cyber-accent animate-pulse"></i> | |
| 24/7 Continuous Monitoring Stream | |
| </h3> | |
| <!-- Stream Controls --> | |
| <div class="flex gap-4 mb-4"> | |
| <button class="px-4 py-2 bg-cyber-accent/20 text-cyber-accent rounded-lg border border-cyber-accent"> | |
| <i class="fas fa-play mr-2"></i>Active Streams: 47 | |
| </button> | |
| <button class="px-4 py-2 bg-cyber-800 hover:bg-cyber-700 rounded-lg"> | |
| <i class="fas fa-filter mr-2"></i>Filter | |
| </button> | |
| <button class="px-4 py-2 bg-cyber-800 hover:bg-cyber-700 rounded-lg"> | |
| <i class="fas fa-download mr-2"></i>Export | |
| </button> | |
| </div> | |
| <!-- Live Data Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="liveStreamGrid"> | |
| <!-- Stream cards injected by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Credential Vault Module --> | |
| <div id="module-credentials" class="module hidden space-y-6"> | |
| <div class="glass-panel rounded-xl p-6 neon-border"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-key text-cyber-accent"></i> | |
| Secure Credential Intelligence | |
| </h3> | |
| <div class="bg-cyber-800/50 rounded-lg p-4 mb-4 border border-cyber-warning/30"> | |
| <div class="flex items-start gap-3"> | |
| <i class="fas fa-shield-alt text-cyber-warning text-xl mt-1"></i> | |
| <div> | |
| <h4 class="font-medium text-cyber-warning">Legal & Ethical Compliance Required</h4> | |
| <p class="text-sm text-gray-400 mt-1"> | |
| All credential verification operations require authorized scope documentation. | |
| Automated validation uses only publicly disclosed breach data and authorized API endpoints. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Credential Scanner --> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex gap-2 mb-4"> | |
| <input type="text" placeholder="Enter domain or email domain to scan..." | |
| class="flex-1 bg-cyber-900 border border-cyber-600 rounded-lg px-4 py-2"> | |
| <button class="px-6 py-2 bg-cyber-accent text-cyber-900 font-semibold rounded-lg"> | |
| <i class="fas fa-search mr-2"></i>Scan Breach DB | |
| </button> | |
| </div> | |
| <!-- Breach Results --> | |
| <div id="breachResults" class="space-y-2"> | |
| <!-- Results --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compliance Module --> | |
| <div id="module-compliance" class="module hidden space-y-6"> | |
| <div class="glass-panel rounded-xl p-6 neon-border"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-balance-scale text-cyber-accent"></i> | |
| Legal & Compliance Framework | |
| </h3> | |
| <!-- Compliance Dashboard --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-cyber-success/20 flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-cyber-success text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">GDPR Compliance</p> | |
| <p class="text-lg font-bold text-cyber-success">100%</p> | |
| </div> | |
| </div> | |
| <div class="h-2 bg-cyber-900 rounded-full"> | |
| <div class="h-full bg-cyber-success rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-cyber-success/20 flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-cyber-success text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Data Retention</p> | |
| <p class="text-lg font-bold text-cyber-success">Compliant</p> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400">Auto-purge: 90 days</p> | |
| </div> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-cyber-warning/20 flex items-center justify-center"> | |
| <i class="fas fa-exclamation-circle text-cyber-warning text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Audit Logs</p> | |
| <p class="text-lg font-bold text-cyber-warning">Review Required</p> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400">47 entries pending</p> | |
| </div> | |
| </div> | |
| <!-- Audit Trail --> | |
| <div class="bg-cyber-800 rounded-lg p-4"> | |
| <h4 class="font-medium mb-3">Recent Audit Activity</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead class="text-gray-400 border-b border-cyber-600"> | |
| <tr> | |
| <th class="text-left py-2">Timestamp</th> | |
| <th class="text-left py-2">User</th> | |
| <th class="text-left py-2">Action</th> | |
| <th class="text-left py-2">Target</th> | |
| <th class="text-left py-2">Authorization</th> | |
| </tr> | |
| </thead> | |
| <tbody id="auditLog"> | |
| <!-- Audit entries --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Panic Modal --> | |
| <div id="panicModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="absolute inset-0 bg-black/90 flex items-center justify-center"> | |
| <div class="glass-panel rounded-xl p-8 max-w-md text-center neon-border"> | |
| <i class="fas fa-exclamation-triangle text-6xl text-cyber-danger mb-4 animate-pulse"></i> | |
| <h2 class="text-2xl font-bold text-cyber-danger mb-4">EMERGENCY LOCKDOWN</h2> | |
| <p class="text-gray-400 mb-6">All sessions terminated. Data encrypted. Audit trail preserved.</p> | |
| <button onclick="closePanic()" class="px-6 py-3 bg-cyber-800 hover:bg-cyber-700 rounded-lg text-white"> | |
| Acknowledge | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Global State | |
| const state = { | |
| currentModule: 'dashboard', | |
| alerts: [], | |
| liveStreams: [], | |
| darkWebItems: [], | |
| isPanicActive: false | |
| }; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initMatrixRain(); | |
| initNetworkVisualization(); | |
| startDataSimulation(); | |
| updateTime(); | |
| setInterval(updateTime, 1000); | |
| }); | |
| // Matrix Rain Effect | |
| function initMatrixRain() { | |
| const canvas = document.getElementById('matrixCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const resize = () => { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| }; | |
| resize(); | |
| window.addEventListener('resize', resize); | |
| const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン'; | |
| const drops = []; | |
| const fontSize = 14; | |
| const columns = canvas.width / fontSize; | |
| for (let i = 0; i < columns; i++) { | |
| drops[i] = Math.random() * -100; | |
| } | |
| function draw() { | |
| ctx.fillStyle = 'rgba(10, 10, 15, 0.05)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = '#00f0ff'; | |
| ctx.font = fontSize + 'px monospace'; | |
| for (let i = 0; i < drops.length; i++) { | |
| const text = chars[Math.floor(Math.random() * chars.length)]; | |
| ctx.fillText(text, i * fontSize, drops[i] * fontSize); | |
| if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { | |
| drops[i] = 0; | |
| } | |
| drops[i]++; | |
| } | |
| } | |
| setInterval(draw, 35); | |
| } | |
| // Network Visualization | |
| function initNetworkVisualization() { | |
| const canvas = document.getElementById('networkCanvas'); | |
| if (!canvas) return; | |
| const ctx = canvas.getContext('2d'); | |
| const resize = () => { | |
| const rect = canvas.parentElement.getBoundingClientRect(); | |
| canvas.width = rect.width; | |
| canvas.height = rect.height; | |
| }; | |
| resize(); | |
| window.addEventListener('resize', resize); | |
| const nodes = []; | |
| const nodeCount = 50; | |
| for (let i = 0; i < nodeCount; i++) { | |
| nodes.push({ | |
| x: Math.random() * canvas.width, | |
| y: Math.random() * canvas.height, | |
| vx: (Math.random() - 0.5) * 0.5, | |
| vy: (Math.random() - 0.5) * 0.5, | |
| radius: Math.random() * 3 + 2, | |
| threat: Math.random() | |
| }); | |
| } | |
| function animate() { | |
| ctx.fillStyle = 'rgba(19, 19, 31, 0.1)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| // Update and draw nodes | |
| nodes.forEach(node => { | |
| node.x += node.vx; | |
| node.y += node.vy; | |
| if (node.x < 0 || node.x > canvas.width) node.vx *= -1; | |
| if (node.y < 0 || node.y > canvas.height) node.vy *= -1; | |
| // Draw node | |
| ctx.beginPath(); | |
| ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2); | |
| if (node.threat > 0.8) { | |
| ctx.fillStyle = '#ff003c'; | |
| ctx.shadowBlur = 10; | |
| ctx.shadowColor = '#ff003c'; | |
| } else if (node.threat > 0.5) { | |
| ctx.fillStyle = '#fcee0a'; | |
| ctx.shadowBlur = 5; | |
| ctx.shadowColor = '#fcee0a'; | |
| } else { | |
| ctx.fillStyle = '#00f0ff'; | |
| ctx.shadowBlur = 5; | |
| ctx.shadowColor = '#00f0ff'; | |
| } | |
| ctx.fill(); | |
| ctx.shadowBlur = 0; | |
| // Draw connections | |
| nodes.forEach(other => { | |
| const dx = node.x - other.x; | |
| const dy = node.y - other.y; | |
| const dist = Math.sqrt(dx * dx + dy * dy); | |
| if (dist < 100) { | |
| ctx.beginPath(); | |
| ctx.moveTo(node.x, node.y); | |
| ctx.lineTo(other.x |