| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex, notranslate, none"> |
| <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex, none"> |
| <meta name="bingbot" content="noindex, nofollow, noarchive, nosnippet, none"> |
| <meta name="duckduckbot" content="noindex, nofollow, none"> |
| <meta name="yandexbot" content="noindex, nofollow, none"> |
| <meta name="baiduspider" content="noindex, nofollow, none"> |
| <meta name="slurp" content="noindex, nofollow, noarchive, none"> |
| <meta name="twitter" content="noindex, nofollow, none"> |
| <meta name="referrer" content="no-referrer"> |
| <meta http-equiv="x-dns-prefetch-control" content="off"> |
| <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> |
| <meta http-equiv="pragma" content="no-cache"> |
| <meta http-equiv="expires" content="0"> |
| <link rel="canonical" href="#"> |
| <title>Network - SentinelAI Command Center</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <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=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="network.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| mono: ['JetBrains Mono', 'monospace'], |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-slate-950 text-slate-200 font-sans antialiased min-h-screen overflow-x-hidden"> |
|
|
| |
| <div class="fixed inset-0 z-0 pointer-events-none"> |
| <div class="grid-bg"></div> |
| <div class="absolute top-0 left-1/4 w-[600px] h-[600px] bg-cyan-600/5 rounded-full blur-3xl animate-pulse-slow"></div> |
| <div class="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-3xl animate-pulse-slow-delayed"></div> |
| </div> |
|
|
| |
| <nav class="relative z-20 border-b border-slate-800/60 backdrop-blur-xl bg-slate-950/90 sticky top-0"> |
| <div class="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-14"> |
| <div class="flex items-center gap-4"> |
| <div class="flex items-center gap-2.5"> |
| <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center shadow-lg shadow-cyan-500/20"> |
| <i data-lucide="shield-check" class="w-4 h-4 text-white"></i> |
| </div> |
| <div> |
| <span class="text-base font-bold text-white tracking-tight">Sentinel<span class="text-cyan-400">AI</span></span> |
| <span class="hidden sm:inline text-xs text-slate-500 ml-2 font-mono">COMMAND CENTER v2.0</span> |
| </div> |
| </div> |
| </div> |
| <div class="hidden md:flex items-center gap-1"> |
| <a href="command-center.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="layout-dashboard" class="w-3.5 h-3.5 inline mr-1"></i>Dashboard |
| </a> |
| <a href="index.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="search" class="w-3.5 h-3.5 inline mr-1"></i>GDorks |
| </a> |
| <a href="threats.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="alert-triangle" class="w-3.5 h-3.5 inline mr-1"></i>Threats |
| </a> |
| <a href="network.html" class="nav-link active px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="network" class="w-3.5 h-3.5 inline mr-1"></i>Network |
| </a> |
| <a href="seo-mesh-normal.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="network" class="w-3.5 h-3.5 inline mr-1"></i>Mesh Normal |
| </a> |
| <a href="seo-mesh-inverse.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="brain-circuit" class="w-3.5 h-3.5 inline mr-1"></i>Mesh Inversé |
| </a> |
| <a href="cognitive-inverse-mesh.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="brain-circuit" class="w-3.5 h-3.5 inline mr-1"></i>Cognitive Inversé |
| </a> |
| <a href="cognitive-seo-geo-mesh.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="brain" class="w-3.5 h-3.5 inline mr-1"></i>Cognitive SEO/GEO |
| </a> |
| <a href="seo-inverse.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="eye-off" class="w-3.5 h-3.5 inline mr-1"></i>SEO Inverse |
| </a> |
| <a href="chs-backend.html" class="nav-link px-3 py-1.5 rounded-lg text-xs font-medium transition-all"> |
| <i data-lucide="plug" class="w-3.5 h-3.5 inline mr-1"></i>CHS Backend |
| </a> |
| </div> |
| <div class="flex items-center gap-3"> |
| <div class="threat-indicator flex items-center gap-2 px-3 py-1.5 rounded-lg bg-green-500/10 border border-green-500/20"> |
| <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div> |
| <span class="text-xs font-semibold text-green-400 font-mono">NETWORK OK</span> |
| </div> |
| <button onclick="toggleMobileMenu()" class="md:hidden p-2 text-slate-400 hover:text-white"> |
| <i data-lucide="menu" class="w-5 h-5"></i> |
| </button> |
| <a href="https://github.com/jbsecuritejb-beep/SentinelAI-COMMAND-CENTER" target="_blank" class="hidden sm:flex items-center gap-1.5 text-slate-400 hover:text-white transition-colors"> |
| <i data-lucide="github" class="w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div id="mobileMenu" class="hidden md:hidden border-t border-slate-800/60 bg-slate-950/95 backdrop-blur-xl"> |
| <div class="px-4 py-3 space-y-1"> |
| <a href="command-center.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">Dashboard</a> |
| <a href="index.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">GDorks</a> |
| <a href="threats.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">Threats</a> |
| <a href="network.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-cyan-400 bg-cyan-500/10">Network</a> |
| <a href="seo-mesh-normal.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">Mesh Normal</a> |
| <a href="seo-mesh-inverse.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">Mesh Inversé</a> |
| <a href="cognitive-inverse-mesh.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">Cognitive Inversé</a> |
| <a href="cognitive-seo-geo-mesh.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">Cognitive SEO/GEO</a> |
| <a href="seo-inverse.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">SEO Inverse</a> |
| <a href="chs-backend.html" class="block px-3 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-slate-800">CHS Backend</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="relative z-10 max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6"> |
|
|
| |
| <div class="mb-6 flex items-center gap-3 px-4 py-2.5 bg-slate-900/50 border border-slate-800/60 rounded-xl backdrop-blur-sm"> |
| <div class="flex items-center gap-2"> |
| <div class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div> |
| <span class="text-xs font-mono text-cyan-400">NETWORK MONITOR ONLINE</span> |
| </div> |
| <div class="h-4 w-px bg-slate-800"></div> |
| <span class="text-xs font-mono text-slate-500" id="systemTime">--:--:--</span> |
| <div class="h-4 w-px bg-slate-800"></div> |
| <span class="text-xs font-mono text-slate-500">TOPOLOGY: <span class="text-slate-300">star-mesh hybrid</span></span> |
| <div class="h-4 w-px bg-slate-800 hidden sm:block"></div> |
| <span class="text-xs font-mono text-slate-500 hidden sm:inline">PROTOCOL: <span class="text-slate-300">TCP/IP</span></span> |
| <div class="ml-auto flex items-center gap-2"> |
| <span class="text-xs font-mono text-slate-500">PACKETS/S: <span class="text-cyan-400" id="packetsPerSec">0</span></span> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
| <div class="stat-card bg-slate-900/50 border border-slate-800/80 rounded-xl p-4 backdrop-blur-sm"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Nodes Online</span> |
| <i data-lucide="server" class="w-4 h-4 text-green-400"></i> |
| </div> |
| <div class="text-2xl font-bold text-white font-mono"><span id="nodesOnline">0</span><span class="text-sm text-slate-500">/<span id="nodesTotal">0</span></span></div> |
| <div class="flex items-center gap-1 mt-1"> |
| <i data-lucide="check-circle" class="w-3 h-3 text-green-400"></i> |
| <span class="text-xs text-green-400 font-mono">all operational</span> |
| </div> |
| </div> |
| <div class="stat-card bg-slate-900/50 border border-slate-800/80 rounded-xl p-4 backdrop-blur-sm"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Bandwidth</span> |
| <i data-lucide="gauge" class="w-4 h-4 text-cyan-400"></i> |
| </div> |
| <div class="text-2xl font-bold text-cyan-400 font-mono"><span id="bandwidthVal">0</span><span class="text-sm text-slate-500"> Gbps</span></div> |
| <div class="flex items-center gap-1 mt-1"> |
| <i data-lucide="activity" class="w-3 h-3 text-cyan-400"></i> |
| <span class="text-xs text-cyan-400 font-mono">utilization: 34%</span> |
| </div> |
| </div> |
| <div class="stat-card bg-slate-900/50 border border-slate-800/80 rounded-xl p-4 backdrop-blur-sm"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Avg Latency</span> |
| <i data-lucide="timer" class="w-4 h-4 text-purple-400"></i> |
| </div> |
| <div class="text-2xl font-bold text-purple-400 font-mono"><span id="latencyVal">0</span><span class="text-sm text-slate-500"> ms</span></div> |
| <div class="flex items-center gap-1 mt-1"> |
| <i data-lucide="trending-down" class="w-3 h-3 text-green-400"></i> |
| <span class="text-xs text-green-400 font-mono">-2.1% optimal</span> |
| </div> |
| </div> |
| <div class="stat-card bg-slate-900/50 border border-slate-800/80 rounded-xl p-4 backdrop-blur-sm"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Active Connections</span> |
| <i data-lucide="link" class="w-4 h-4 text-amber-400"></i> |
| </div> |
| <div class="text-2xl font-bold text-amber-400 font-mono" id="connCount">0</div> |
| <div class="flex items-center gap-1 mt-1"> |
| <i data-lucide="trending-up" class="w-3 h-3 text-amber-400"></i> |
| <span class="text-xs text-amber-400 font-mono">+12 new</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| |
| <div class="lg:col-span-2 bg-slate-900/50 border border-slate-800/80 rounded-xl backdrop-blur-sm overflow-hidden"> |
| <div class="flex items-center justify-between px-5 py-3 border-b border-slate-800/60"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="git-fork" class="w-4 h-4 text-cyan-400"></i> |
| <h2 class="text-sm font-semibold text-white">Network Topology</h2> |
| </div> |
| <div class="flex items-center gap-3 text-xs"> |
| <div class="flex items-center gap-1.5"><div class="w-2 h-2 bg-green-400 rounded-full"></div><span class="text-slate-500">Online</span></div> |
| <div class="flex items-center gap-1.5"><div class="w-2 h-2 bg-amber-400 rounded-full"></div><span class="text-slate-500">Warning</span></div> |
| <div class="flex items-center gap-1.5"><div class="w-2 h-2 bg-red-400 rounded-full"></div><span class="text-slate-500">Offline</span></div> |
| <button onclick="refreshTopology()" class="ml-2 text-cyan-400 hover:text-cyan-300 font-mono flex items-center gap-1"> |
| <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>REFRESH |
| </button> |
| </div> |
| </div> |
| <div class="relative p-2" style="min-height: 380px;"> |
| <canvas id="topologyCanvas" class="w-full rounded-lg" style="height: 380px;"></canvas> |
| <div id="topologyTooltip" class="absolute hidden bg-slate-900 border border-cyan-500/20 rounded-lg px-3 py-2 text-xs font-mono pointer-events-none z-10 shadow-xl"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-slate-900/50 border border-slate-800/80 rounded-xl backdrop-blur-sm overflow-hidden"> |
| <div class="flex items-center justify-between px-5 py-3 border-b border-slate-800/60"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="hard-drive" class="w-4 h-4 text-green-400"></i> |
| <h2 class="text-sm font-semibold text-white">Node Status</h2> |
| </div> |
| <span class="text-xs font-mono text-green-400" id="nodeStatusCount">0/0</span> |
| </div> |
| <div class="overflow-y-auto p-3 space-y-2" style="max-height: 380px;" id="nodeStatusList"> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| |
| <div class="lg:col-span-2 bg-slate-900/50 border border-slate-800/80 rounded-xl backdrop-blur-sm overflow-hidden"> |
| <div class="flex items-center justify-between px-5 py-3 border-b border-slate-800/60"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="bar-chart-3" class="w-4 h-4 text-cyan-400"></i> |
| <h2 class="text-sm font-semibold text-white">Traffic Monitor</h2> |
| </div> |
| <div class="flex items-center gap-3 text-xs font-mono"> |
| <span class="flex items-center gap-1.5"><div class="w-2.5 h-2.5 bg-cyan-400 rounded-sm"></div><span class="text-slate-400">Inbound</span></span> |
| <span class="flex items-center gap-1.5"><div class="w-2.5 h-2.5 bg-purple-400 rounded-sm"></div><span class="text-slate-400">Outbound</span></span> |
| </div> |
| </div> |
| <div class="p-4"> |
| <canvas id="trafficChart" class="w-full" style="height: 200px;"></canvas> |
| <div class="grid grid-cols-3 gap-4 mt-4"> |
| <div class="bg-slate-950 rounded-lg p-3 border border-slate-800"> |
| <div class="text-xs text-slate-500 mb-1">Total In</div> |
| <div class="font-mono text-sm text-cyan-400" id="totalIn">0 GB</div> |
| </div> |
| <div class="bg-slate-950 rounded-lg p-3 border border-slate-800"> |
| <div class="text-xs text-slate-500 mb-1">Total Out</div> |
| <div class="font-mono text-sm text-purple-400" id="totalOut">0 GB</div> |
| </div> |
| <div class="bg-slate-950 rounded-lg p-3 border border-slate-800"> |
| <div class="text-xs text-slate-500 mb-1">Peak Rate</div> |
| <div class="font-mono text-sm text-amber-400" id="peakRate">0 Gbps</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-slate-900/50 border border-slate-800/80 rounded-xl backdrop-blur-sm overflow-hidden"> |
| <div class="flex items-center justify-between px-5 py-3 border-b border-slate-800/60"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="link-2" class="w-4 h-4 text-amber-400"></i> |
| <h2 class="text-sm font-semibold text-white">Active Connections</h2> |
| </div> |
| </div> |
| <div class="overflow-y-auto p-3 space-y-2" style="max-height: 260px;" id="connectionsList"> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-slate-900/50 border border-slate-800/80 rounded-xl backdrop-blur-sm overflow-hidden"> |
| <div class="flex items-center justify-between px-5 py-3 border-b border-slate-800/60"> |
| <div class="flex items-center gap-2"> |
| <i data-lucide="plug" class="w-4 h-4 text-purple-400"></i> |
| <h2 class="text-sm font-semibold text-white">Port Scan Results</h2> |
| </div> |
| <span class="text-xs font-mono text-slate-500">Last scan: <span class="text-cyan-400" id="lastScanTime">just now</span></span> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full text-sm"> |
| <thead> |
| <tr class="border-b border-slate-800/60 text-xs text-slate-500 uppercase tracking-wider"> |
| <th class="text-left px-4 py-3 font-medium">Asset</th> |
| <th class="text-left px-4 py-3 font-medium">IP Address</th> |
| <th class="text-left px-4 py-3 font-medium">Port</th> |
| <th class="text-left px-4 py-3 font-medium">Service</th> |
| <th class="text-left px-4 py-3 font-medium">Protocol</th> |
| <th class="text-left px-4 py-3 font-medium">State</th> |
| <th class="text-left px-4 py-3 font-medium hidden sm:table-cell">Banner</th> |
| </tr> |
| </thead> |
| <tbody id="portScanBody"> |
| </tbody> |
| </table> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <div id="netToast" class="fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300"> |
| <div class="bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 shadow-2xl flex items-center gap-3"> |
| <div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center"> |
| <i data-lucide="check" class="w-4 h-4 text-cyan-400"></i> |
| </div> |
| <span class="text-sm font-medium text-slate-200" id="netToastMsg">Done</span> |
| </div> |
| </div> |
|
|
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="api-service.js"></script> |
| <script src="network.js"></script> |
| </body> |
| </html> |
