Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Système de Gestion d'IA - Interface</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .cyber-gradient { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); | |
| } | |
| .cyber-border { | |
| border: 1px solid rgba(74, 222, 128, 0.3); | |
| } | |
| .cyber-glow { | |
| box-shadow: 0 0 15px rgba(74, 222, 128, 0.5); | |
| } | |
| .cyber-text { | |
| text-shadow: 0 0 8px rgba(74, 222, 128, 0.7); | |
| } | |
| .terminal-font { | |
| font-family: 'Courier New', monospace; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="cyber-gradient min-h-screen text-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-green-500 rounded-full cyber-glow flex items-center justify-center"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold cyber-text">NEXUS AI SYSTEM</h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-gray-800 rounded-md cyber-border hover:bg-gray-700 transition"> | |
| <i class="fas fa-user-shield mr-2"></i>Admin | |
| </button> | |
| <button class="px-4 py-2 bg-red-600 rounded-md hover:bg-red-700 transition"> | |
| <i class="fas fa-power-off mr-2"></i>Éteindre | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Stats Dashboard --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-xl cyber-border cyber-glow"> | |
| <h3 class="text-green-400 mb-2"><i class="fas fa-brain mr-2"></i>IA Actives</h3> | |
| <p class="text-4xl font-bold">100,000</p> | |
| <p class="text-green-400 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i>100% opérationnelles</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-xl cyber-border cyber-glow"> | |
| <h3 class="text-blue-400 mb-2"><i class="fas fa-shield-alt mr-2"></i>Protection VPN</h3> | |
| <p class="text-4xl font-bold">256-bit</p> | |
| <p class="text-blue-400 text-sm mt-2">Chiffrement quantique</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-xl cyber-border cyber-glow"> | |
| <h3 class="text-purple-400 mb-2"><i class="fas fa-tachometer-alt mr-2"></i>Vitesse</h3> | |
| <p class="text-4xl font-bold">1.21 TB/s</p> | |
| <p class="text-purple-400 text-sm mt-2">Latence: 0.001ms</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-6 rounded-xl cyber-border cyber-glow"> | |
| <h3 class="text-yellow-400 mb-2"><i class="fas fa-globe mr-2"></i>Localisations</h3> | |
| <p class="text-4xl font-bold">195</p> | |
| <p class="text-yellow-400 text-sm mt-2">Pays couverts</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- AI Network Map --> | |
| <div class="lg:col-span-2 bg-gray-900 bg-opacity-50 rounded-xl cyber-border cyber-glow p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold"><i class="fas fa-project-diagram mr-2 text-green-400"></i>Carte du Réseau IA</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-800 rounded cyber-border text-sm"> | |
| <i class="fas fa-sync-alt mr-1"></i>Actualiser | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-black bg-opacity-70 rounded-lg p-4 h-96 overflow-auto scrollbar-hide terminal-font"> | |
| <div class="text-green-400 mb-4"> | |
| <p>> Initialisation du réseau IA globale...</p> | |
| <p>> Connexion établie avec 100,000 nœuds IA</p> | |
| <p>> Mise en place du système de routage quantique</p> | |
| <p>> Activation des protocoles de furtivité...</p> | |
| <p class="text-white font-bold">> Système opérationnel à 100%</p> | |
| <p>> <span class="animate-pulse">_</span></p> | |
| </div> | |
| <div class="grid grid-cols-5 gap-2 mt-4"> | |
| <div class="bg-green-900 bg-opacity-30 p-2 rounded text-center"> | |
| <i class="fas fa-server text-green-400"></i> | |
| <p class="text-xs mt-1">Nœud #001</p> | |
| </div> | |
| <div class="bg-green-900 bg-opacity-30 p-2 rounded text-center"> | |
| <i class="fas fa-server text-green-400"></i> | |
| <p class="text-xs mt-1">Nœud #002</p> | |
| </div> | |
| <div class="bg-green-900 bg-opacity-30 p-2 rounded text-center"> | |
| <i class="fas fa-server text-green-400"></i> | |
| <p class="text-xs mt-1">Nœud #003</p> | |
| </div> | |
| <div class="bg-green-900 bg-opacity-30 p-2 rounded text-center"> | |
| <i class="fas fa-server text-green-400"></i> | |
| <p class="text-xs mt-1">Nœud #004</p> | |
| </div> | |
| <div class="bg-green-900 bg-opacity-30 p-2 rounded text-center"> | |
| <i class="fas fa-server text-green-400"></i> | |
| <p class="text-xs mt-1">Nœud #005</p> | |
| </div> | |
| <div class="col-span-5 text-center text-xs text-gray-400 mt-2"> | |
| + 99,995 autres nœuds actifs... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Controls --> | |
| <div class="bg-gray-900 bg-opacity-50 rounded-xl cyber-border cyber-glow p-6"> | |
| <h2 class="text-xl font-bold mb-6"><i class="fas fa-sliders-h mr-2 text-blue-400"></i>Contrôles Système</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Mode Opération</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <option>Standard</option> | |
| <option>Furtif</option> | |
| <option>Ultra Sécurisé</option> | |
| <option>Mode Fantôme</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Puissance IA</label> | |
| <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Min</span> | |
| <span>75%</span> | |
| <span>Max</span> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-700"> | |
| <h3 class="font-medium mb-2">Protections Actives</h3> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" checked class="form-checkbox text-green-500 bg-gray-800"> | |
| <span>VPN Quantique</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" checked class="form-checkbox text-green-500 bg-gray-800"> | |
| <span>Brouillage IP</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" checked class="form-checkbox text-green-500 bg-gray-800"> | |
| <span>Chiffrement AES-512</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="form-checkbox text-green-500 bg-gray-800"> | |
| <span>Mode Fantôme (beta)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 bg-green-600 hover:bg-green-700 rounded-md font-medium mt-6 transition flex items-center justify-center"> | |
| <i class="fas fa-rocket mr-2"></i>Activer le Système | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Activity Log --> | |
| <div class="lg:col-span-3 bg-gray-900 bg-opacity-50 rounded-xl cyber-border cyber-glow p-6 mt-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-bold"><i class="fas fa-terminal mr-2 text-purple-400"></i>Journal d'Activité</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-800 rounded cyber-border text-sm"> | |
| <i class="fas fa-trash-alt mr-1"></i>Effacer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-black bg-opacity-70 rounded-lg p-4 h-64 overflow-auto scrollbar-hide terminal-font text-sm"> | |
| <p class="text-green-400">[SYSTEM] Initialisation complète du réseau IA</p> | |
| <p class="text-blue-400">[VPN] Tunnel quantique établi avec succès</p> | |
| <p class="text-yellow-400">[SECURITY] Scan des vulnérabilités en cours...</p> | |
| <p class="text-green-400">[SECURITY] Aucune vulnérabilité détectée</p> | |
| <p class="text-purple-400">[NETWORK] 100,000 nœuds IA synchronisés</p> | |
| <p class="text-blue-400">[VPN] Rotation des serveurs activée</p> | |
| <p class="text-gray-400">[SYSTEM] Tous les systèmes opérationnels</p> | |
| <p class="text-yellow-400">[ANALYTICS] Analyse des modèles de trafic...</p> | |
| <p class="text-green-400">[OPTIMIZATION] Latence réduite de 0.002ms</p> | |
| <p class="text-blue-400">[SECURITY] Mise à jour des certificats SSL</p> | |
| <p class="text-purple-400">[NETWORK] Optimisation des routes complète</p> | |
| <p class="text-gray-400">[SYSTEM] Vérification de l'intégrité...</p> | |
| <p class="text-green-400">[SYSTEM] Tous les systèmes nominaux</p> | |
| <p class="animate-pulse text-white">> _</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-500 text-sm"> | |
| <p class="mb-2">SYSTÈME NEXUS IA - VERSION 9.4.2</p> | |
| <p class="text-xs">© 2023 Nexus Technologies. Pour usage éducatif uniquement.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Animation pour le terminal | |
| function addTerminalEntry() { | |
| const terminal = document.querySelector('.terminal-font'); | |
| const messages = [ | |
| "[UPDATE] Mise à jour des protocoles de sécurité", | |
| "[NETWORK] Optimisation des paquets en cours", | |
| "[AI] Entraînement des modèles complété", | |
| "[VPN] Nouveau serveur ajouté: Tokyo-42", | |
| "[SECURITY] Scan des intrusions négatif", | |
| "[SYSTEM] Vérification des sauvegardes" | |
| ]; | |
| const colors = ['text-green-400', 'text-blue-400', 'text-purple-400', 'text-yellow-400']; | |
| const randomMessage = messages[Math.floor(Math.random() * messages.length)]; | |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; | |
| const newEntry = document.createElement('p'); | |
| newEntry.classList.add(randomColor); | |
| newEntry.textContent = randomMessage; | |
| terminal.insertBefore(newEntry, terminal.lastElementChild); | |
| // Garder seulement les 15 dernières entrées | |
| const entries = terminal.querySelectorAll('p'); | |
| if (entries.length > 15) { | |
| terminal.removeChild(entries[0]); | |
| } | |
| } | |
| setInterval(addTerminalEntry, 3000); | |
| // Simulation de chargement pour la carte réseau | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const networkMap = document.querySelector('.bg-black.bg-opacity-70'); | |
| const loadingMessages = [ | |
| "Connexion aux nœuds IA...", | |
| "Chargement des protocoles...", | |
| "Optimisation des routes...", | |
| "Synchronisation des données..." | |
| ]; | |
| let i = 0; | |
| const loadingInterval = setInterval(() => { | |
| const loadingElement = networkMap.querySelector('.animate-pulse'); | |
| if (loadingElement) { | |
| loadingElement.textContent = `> ${loadingMessages[i]}_`; | |
| i = (i + 1) % loadingMessages.length; | |
| } | |
| }, 2000); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/nexus-ai-system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |