Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HIGH TECH SECURITY | HTS Investigation Suite</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Rubik:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Rubik', sans-serif; | |
| } | |
| .code-font { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .vanta-canvas { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| opacity: 0.15; | |
| } | |
| .glass-card { | |
| backdrop-filter: blur(16px) saturate(180%); | |
| -webkit-backdrop-filter: blur(16px) saturate(180%); | |
| background-color: rgba(255, 255, 255, 0.85); | |
| } | |
| .threat-critical { | |
| background: linear-gradient(90deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.3) 100%); | |
| } | |
| .threat-high { | |
| background: linear-gradient(90deg, rgba(249,115,22,0.1) 0%, rgba(249,115,22,0.3) 100%); | |
| } | |
| .threat-medium { | |
| background: linear-gradient(90deg, rgba(234,179,8,0.1) 0%, rgba(234,179,8,0.3) 100%); | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div id="vanta-bg" class="vanta-canvas"></div> | |
| <!-- Header --> | |
| <header class="relative z-10 bg-white shadow-lg border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-blue-600 p-2 rounded-lg"> | |
| <i data-feather="shield" class="text-white w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-900">HIGH TECH SECURITY</h1> | |
| <p class="text-sm text-gray-600">HTS Investigation Suite v2.1</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <div class="text-right"> | |
| <div class="text-gray-600">203-205 The Vale, London W3 7QS</div> | |
| <div class="text-gray-600">UK: +44 7591 665201 | Company: 7849187</div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="lock" class="w-5 h-5 text-green-500"></i> | |
| <span class="text-sm text-green-600 font-medium">Sécurisé</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="relative z-10 bg-gray-800 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex space-x-1 overflow-x-auto py-2 hide-scrollbar"> | |
| <a href="/" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-blue-400 text-blue-400 transition-colors"> | |
| <i data-feather="trending-up" class="w-4 h-4"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="/darkbert" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors"> | |
| <i data-feather="brain" class="w-4 h-4"></i> | |
| <span>AI Analysis Suite</span> | |
| </a> | |
| <a href="/investigations" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors"> | |
| <i data-feather="search" class="w-4 h-4"></i> | |
| <span>Investigations</span> | |
| </a> | |
| <a href="/monitoring" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| <span>Monitoring</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- System Status --> | |
| <div class="glass-card rounded-xl shadow-lg p-6 mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-900">System Status</h2> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse-slow"></div> | |
| <span class="text-sm text-gray-600">Real-time active</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <!-- Database Status --> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <i data-feather="database" class="w-5 h-5 text-blue-600"></i> | |
| <span class="font-medium text-blue-900">Database</span> | |
| </div> | |
| <span class="text-blue-700 text-sm">Operational</span> | |
| </div> | |
| <!-- AI Models --> | |
| <div class="bg-purple-50 p-4 rounded-lg border border-purple-200"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <i data-feather="cpu" class="w-5 h-5 text-purple-600"></i> | |
| <span class="font-medium text-purple-900">AI Models</span> | |
| </div> | |
| <span class="text-purple-700 text-sm">3 loaded</span> | |
| </div> | |
| <!-- Security --> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-200"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <i data-feather="shield" class="w-5 h-5 text-green-600"></i> | |
| <span class="font-medium text-green-900">Security</span> | |
| </div> | |
| <span class="text-green-700 text-sm">Maximum</span> | |
| </div> | |
| <!-- Cache --> | |
| <div class="bg-orange-50 p-4 rounded-lg border border-orange-200"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <i data-feather="zap" class="w-5 h-5 text-orange-600"></i> | |
| <span class="font-medium text-orange-900">Redis Cache</span> | |
| </div> | |
| <span class="text-orange-700 text-sm">Operational</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Global Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <!-- Investigations Card --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="file-text" class="w-8 h-8 text-blue-600"></i> | |
| <span class="text-2xl font-bold text-blue-600">42</span> | |
| </div> | |
| <h3 class="font-semibold text-gray-900">Investigations</h3> | |
| <p class="text-sm text-gray-600">8 active</p> | |
| </div> | |
| <!-- AI Analysis Card --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="cpu" class="w-8 h-8 text-purple-600"></i> | |
| <span class="text-2xl font-bold text-purple-600">128</span> | |
| </div> | |
| <h3 class="font-semibold text-gray-900">AI Analyses</h3> | |
| <p class="text-sm text-gray-600">Deux IA pour la paye AI</p> | |
| </div> | |
| <!-- Alerts Card --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="alert-triangle" class="w-8 h-8 text-red-600"></i> | |
| <span class="text-2xl font-bold text-red-600">19</span> | |
| </div> | |
| <h3 class="font-semibold text-gray-900">Alerts</h3> | |
| <p class="text-sm text-gray-600">System secured</p> | |
| </div> | |
| <!-- Performance Card --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <i data-feather="trending-up" class="w-8 h-8 text-green-600"></i> | |
| <span class="text-2xl font-bold text-green-600">99.7%</span> | |
| </div> | |
| <h3 class="font-semibold text-gray-900">Performance</h3> | |
| <p class="text-sm text-gray-600">Uptime</p> | |
| </div> | |
| </div> | |
| <!-- Real-time Activity --> | |
| <div class="glass-card rounded-xl shadow-lg p-6 mb-8"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">Real-time Activity</h3> | |
| <div class="space-y-2 max-h-64 overflow-y-auto"> | |
| <!-- Sample Activity Items --> | |
| <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <span class="text-sm text-gray-700">Analysis #DN42 completed successfully</span> | |
| <span class="text-xs text-gray-500 ml-auto">10:42:35</span> | |
| </div> | |
| <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"> | |
| <div class="w-2 h-2 rounded-full bg-red-500"></div> | |
| <span class="text-sm text-gray-700">Threat detected in cluster #12</span> | |
| <span class="text-xs text-gray-500 ml-auto">10:38:21</span> | |
| </div> | |
| <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500"></div> | |
| <span class="text-sm text-gray-700">New investigation created: Operation Midnight</span> | |
| <span class="text-xs text-gray-500 ml-auto">10:35:07</span> | |
| </div> | |
| <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <span class="text-sm text-gray-700">System backup completed</span> | |
| <span class="text-xs text-gray-500 ml-auto">10:30:45</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">Start New Analysis</h3> | |
| <p class="text-sm text-gray-600 mb-4">Initiate AI analysis with documents or text input</p> | |
| <a href="/ai-analysis" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> | |
| <i data-feather="brain" class="w-4 h-4"></i> | |
| <span>Launch AI Analysis</span> | |
| </a> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Investigations</h3> | |
| <div class="space-y-2"> | |
| <a href="/investigations/operation-midnight" class="block p-2 hover:bg-gray-50 rounded-lg text-sm">Operation Midnight</a> | |
| <a href="/investigations/sigma-protocol" class="block p-2 hover:bg-gray-50 rounded-lg text-sm">Sigma Protocol</a> | |
| <a href="/investigations/phoenix-network" class="block p-2 hover:bg-gray-50 rounded-lg text-sm">Phoenix Network</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">System Alerts</h3> | |
| <div class="space-y-3"> | |
| <div class="p-2 rounded-lg threat-critical"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">Critical threat detected</span> | |
| <span class="text-xs">10:38</span> | |
| </div> | |
| </div> | |
| <div class="p-2 rounded-lg threat-high"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm font-medium">3 new vulnerabilities</span> | |
| <span class="text-xs">09:22</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script> | |
| // Initialize Vanta.js globe effect | |
| feather.replace(); | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf8fafc, | |
| size: 0.8 | |
| }); | |
| </script> | |
| </body> | |
| </html> | |