Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>L'Œil Omniscient - Système de Surveillance Cosmique</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Orbitron:wght@400;700&display=swap'); | |
| :root { | |
| --quantum-blue: #00f7ff; | |
| --void-black: #010101; | |
| --cosmic-purple: #8a2be2; | |
| --nebula-pink: #ff00ff; | |
| --singularity-white: #ffffff; | |
| } | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: var(--void-black); | |
| color: var(--singularity-white); | |
| overflow-x: hidden; | |
| background-image: | |
| radial-gradient(circle at 50% 50%, rgba(0, 247, 255, 0.02) 0%, transparent 70%), | |
| radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.02) 0%, transparent 25%), | |
| radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.02) 0%, transparent 25%); | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Aldrich', sans-serif; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .quantum-text { | |
| background: linear-gradient(90deg, var(--quantum-blue), var(--nebula-pink)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 15px rgba(0, 247, 255, 0.5); | |
| } | |
| .quantum-border { | |
| border: 1px solid var(--quantum-blue); | |
| box-shadow: 0 0 25px rgba(0, 247, 255, 0.5); | |
| } | |
| .quantum-button { | |
| background: linear-gradient(45deg, var(--cosmic-purple), var(--quantum-blue)); | |
| box-shadow: 0 0 20px var(--cosmic-purple); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| font-weight: bold; | |
| letter-spacing: 1px; | |
| } | |
| .quantum-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| transparent, transparent, transparent, | |
| rgba(255, 0, 255, 0.3), transparent, transparent, transparent | |
| ); | |
| transform: rotate(30deg); | |
| animation: quantumShine 3s infinite; | |
| } | |
| @keyframes quantumShine { | |
| 0% { transform: rotate(30deg) translate(-30%, -30%); } | |
| 100% { transform: rotate(30deg) translate(30%, 30%); } | |
| } | |
| .quantum-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 0 30px var(--quantum-blue); | |
| } | |
| .omniscient-eye { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| margin: 0 auto; | |
| } | |
| .omniscient-eye::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle at center, var(--quantum-blue) 0%, transparent 70%); | |
| border-radius: 50%; | |
| animation: quantumPulse 3s infinite alternate; | |
| opacity: 0.4; | |
| } | |
| @keyframes quantumPulse { | |
| 0% { transform: scale(0.95); opacity: 0.3; } | |
| 100% { transform: scale(1.05); opacity: 0.6; } | |
| } | |
| .quantum-radar { | |
| position: relative; | |
| width: 100%; | |
| height: 400px; | |
| border-radius: 5px; | |
| background: radial-gradient(circle at center, transparent 60%, rgba(0, 247, 255, 0.1) 100%); | |
| border: 1px solid rgba(0, 247, 255, 0.5); | |
| margin: 0 auto; | |
| overflow: hidden; | |
| } | |
| .quantum-radar::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: conic-gradient( | |
| from 0deg, | |
| transparent 0%, | |
| rgba(255, 0, 255, 0.3) 10%, | |
| transparent 20%, | |
| rgba(0, 247, 255, 0.3) 30%, | |
| transparent 40%, | |
| rgba(138, 43, 226, 0.3) 50%, | |
| transparent 60%, | |
| rgba(255, 0, 255, 0.3) 70%, | |
| transparent 80%, | |
| rgba(0, 247, 255, 0.3) 90%, | |
| transparent 100% | |
| ); | |
| border-radius: 5px; | |
| animation: radarSpin 5s linear infinite; | |
| } | |
| @keyframes radarSpin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .quantum-card { | |
| background: rgba(1, 1, 1, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0, 247, 255, 0.2); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quantum-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0, 247, 255, 0.1) 0%, | |
| rgba(138, 43, 226, 0.1) 50%, | |
| rgba(255, 0, 255, 0.1) 100% | |
| ); | |
| z-index: -1; | |
| } | |
| .quantum-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(138, 43, 226, 0.5); | |
| border-color: rgba(0, 247, 255, 0.5); | |
| } | |
| .quantum-glow { | |
| filter: drop-shadow(0 0 15px rgba(0, 247, 255, 0.7)); | |
| } | |
| .cosmic-glow { | |
| filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.7)); | |
| } | |
| .quantum-scrollbar::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .quantum-scrollbar::-webkit-scrollbar-track { | |
| background: rgba(1, 1, 1, 0.5); | |
| } | |
| .quantum-scrollbar::-webkit-scrollbar-thumb { | |
| background: linear-gradient(var(--quantum-blue), var(--nebula-pink)); | |
| border-radius: 4px; | |
| } | |
| .floating { | |
| animation: floating 8s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .quantum-grid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .distance-line { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--quantum-blue), transparent); | |
| width: 100%; | |
| animation: distanceScan 15s linear infinite; | |
| } | |
| @keyframes distanceScan { | |
| 0% { top: 0%; opacity: 0; } | |
| 10% { opacity: 1; } | |
| 90% { opacity: 1; } | |
| 100% { top: 100%; opacity: 0; } | |
| } | |
| .quantum-pulse { | |
| animation: quantumPulseDot 2s infinite alternate; | |
| } | |
| @keyframes quantumPulseDot { | |
| 0% { transform: scale(1); opacity: 0.7; } | |
| 100% { transform: scale(1.3); opacity: 1; } | |
| } | |
| .quantum-terminal { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| border: 1px solid var(--quantum-blue); | |
| font-family: 'Courier New', monospace; | |
| color: var(--quantum-blue); | |
| text-shadow: 0 0 5px var(--quantum-blue); | |
| overflow-y: auto; | |
| height: 300px; | |
| padding: 15px; | |
| } | |
| .terminal-line { | |
| margin-bottom: 5px; | |
| line-height: 1.3; | |
| } | |
| .terminal-command { | |
| color: var(--nebula-pink); | |
| } | |
| .terminal-response { | |
| color: var(--quantum-blue); | |
| } | |
| .terminal-error { | |
| color: #ff0000; | |
| } | |
| .terminal-success { | |
| color: #00ff00; | |
| } | |
| .quantum-input { | |
| background: transparent; | |
| border: none; | |
| border-bottom: 1px solid var(--quantum-blue); | |
| color: var(--quantum-blue); | |
| font-family: 'Courier New', monospace; | |
| width: 80%; | |
| outline: none; | |
| caret-color: var(--quantum-blue); | |
| } | |
| .quantum-input::placeholder { | |
| color: rgba(0, 247, 255, 0.5); | |
| } | |
| .quantum-alert { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| animation: alertFadeIn 0.5s; | |
| } | |
| @keyframes alertFadeIn { | |
| from { opacity: 0; transform: translateX(100px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Quantum Alert System --> | |
| <div id="quantumAlerts"></div> | |
| <!-- Main Quantum Interface --> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Quantum Header --> | |
| <header class="py-4 px-8 bg-gradient-to-b from-black to-transparent border-b border-gray-800"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="omniscient-eye"> | |
| <div class="w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-eye text-6xl quantum-text"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h1 class="text-4xl quantum-text">SYSTÈME OMNI-1</h1> | |
| <p class="text-sm text-gray-400">Réseau de surveillance quantique - Portée: 5,678,974 KLM</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <div class="text-center"> | |
| <div class="text-xl font-bold quantum-text">ACTIF</div> | |
| <div class="text-xs text-gray-400">Statut</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-xl font-bold quantum-text">∞</div> | |
| <div class="text-xs text-gray-400">Canaux</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-xl font-bold quantum-text">100%</div> | |
| <div class="text-xs text-gray-400">Puissance</div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Quantum Main Content --> | |
| <main class="flex-1 px-8 py-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-8"> | |
| <!-- Quantum Radar --> | |
| <div class="quantum-card rounded-lg p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl quantum-text">RADAR QUANTIQUE</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="h-3 w-3 rounded-full bg-green-500 animate-pulse"></span> | |
| <span class="text-sm">ACTIF</span> | |
| </div> | |
| <button class="quantum-button text-white px-4 py-1 rounded text-sm"> | |
| <i class="fas fa-sync-alt mr-2"></i> Actualiser | |
| </button> | |
| </div> | |
| </div> | |
| <div class="quantum-radar relative"> | |
| <div class="quantum-grid"></div> | |
| <div class="distance-line"></div> | |
| <!-- Radar elements will be added here dynamically --> | |
| </div> | |
| <div class="mt-6 grid grid-cols-4 gap-4"> | |
| <div class="text-center p-2 border border-gray-800 rounded-lg"> | |
| <div class="text-xl font-bold quantum-text">248K</div> | |
| <div class="text-xs text-gray-400">Cibles</div> | |
| </div> | |
| <div class="text-center p-2 border border-gray-800 rounded-lg"> | |
| <div class="text-xl font-bold quantum-text">5.67M KLM</div> | |
| <div class="text-xs text-gray-400">Portée</div> | |
| </div> | |
| <div class="text-center p-2 border border-gray-800 rounded-lg"> | |
| <div class="text-xl font-bold quantum-text">∞</div> | |
| <div class="text-xs text-gray-400">Fréquences</div> | |
| </div> | |
| <div class="text-center p-2 border border-gray-800 rounded-lg"> | |
| <div class="text-xl font-bold quantum-text">100%</div> | |
| <div class="text-xs text-gray-400">Précision</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Terminal --> | |
| <div class="quantum-card rounded-lg p-6"> | |
| <h2 class="text-2xl quantum-text mb-6">TERMINAL DE CONTRÔLE</h2> | |
| <div class="quantum-terminal quantum-scrollbar" id="quantumTerminal"> | |
| <div class="terminal-line"> | |
| <span class="terminal-command">> Initialisation du système OMNI-1...</span> | |
| </div> | |
| <div class="terminal-line"> | |
| <span class="terminal-response">Système de surveillance quantique activé</span> | |
| </div> | |
| <div class="terminal-line"> | |
| <span class="terminal-response">Connexion établie avec 248,000 nœuds quantiques</span> | |
| </div> | |
| <div class="terminal-line"> | |
| <span class="terminal-response">Portée maximale configurée: 5,678,974 KLM</span> | |
| </div> | |
| <div class="terminal-line"> | |
| <span class="terminal-response">Système prêt. Entrez une commande...</span> | |
| </div> | |
| <div class="terminal-line"> | |
| <span class="terminal-command">> scan --full --range=5.678974M</span> | |
| </div> | |
| <div class="terminal-line"> | |
| <span class="terminal-response">Lancement du scan complet à 5.678974M KLM...</span> | |
| </div> | |
| <div class="terminal-line"> | |
| <span class="terminal-response">Scan en cours. 37% complété...</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <span class="text-quantum-blue mr-2">></span> | |
| <input type="text" class="quantum-input" id="terminalInput" placeholder="Entrez une commande..." autocomplete="off"> | |
| <button class="quantum-button text-white px-4 py-1 rounded ml-2" onclick="executeCommand()"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-8"> | |
| <!-- Quantum Control --> | |
| <div class="quantum-card rounded-lg p-6"> | |
| <h2 class="text-2xl quantum-text mb-6">CONTRÔLE OMNI</h2> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-gray-900 rounded-lg border border-gray-800"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold">SURVEILLANCE GLOBALE</h3> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-quantum-blue"></div> | |
| </label> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-3">Active la surveillance sur tous les canaux quantiques</p> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-quantum-blue to-nebula-pink h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-900 rounded-lg border border-gray-800"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold">PORTÉE MAXIMALE</h3> | |
| <span class="text-quantum-blue font-mono">5.678974M KLM</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-3">Définit la distance maximale de surveillance</p> | |
| <input type="range" min="1" max="10" value="10" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="rangeSlider"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>1M KLM</span> | |
| <span>10M KLM</span> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-900 rounded-lg border border-gray-800"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="font-bold">PUISSANCE DU SYSTÈME</h3> | |
| <span class="text-quantum-blue font-mono">100%</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-3">Niveau d'énergie alloué au système</p> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-green-500 to-quantum-blue h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <button class="quantum-button text-white px-4 py-3 rounded-lg font-bold w-full mt-2"> | |
| <i class="fas fa-bolt mr-2"></i> ACTIVER TOUS LES SYSTÈMES | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quantum Targets --> | |
| <div class="quantum-card rounded-lg p-6"> | |
| <h2 class="text-2xl quantum-text mb-6">CIBLES ACTIVES</h2> | |
| <div class="space-y-4 max-h-96 overflow-y-auto quantum-scrollbar pr-2"> | |
| <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all"> | |
| <div class="w-8 h-8 rounded-full bg-purple-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-satellite-dish text-xs text-purple-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">STATION ALPHA-7</h4> | |
| <span class="text-xs text-quantum-blue">3.456M KLM</span> | |
| </div> | |
| <p class="text-xs text-gray-400">Surveillance complète - 100% des canaux</p> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Actif depuis 7h 42m</span> | |
| <span>Signal: <span class="text-green-500">Fort</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all"> | |
| <div class="w-8 h-8 rounded-full bg-blue-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-user-secret text-xs text-blue-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">CIBLE #X-248</h4> | |
| <span class="text-xs text-quantum-blue">1.234M KLM</span> | |
| </div> | |
| <p class="text-xs text-gray-400">Surveillance audio/vidéo - 87% des canaux</p> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Actif depuis 2h 15m</span> | |
| <span>Signal: <span class="text-yellow-500">Moyen</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all"> | |
| <div class="w-8 h-8 rounded-full bg-red-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-building text-xs text-red-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">COMPLEXE OMÉGA</h4> | |
| <span class="text-xs text-quantum-blue">4.567M KLM</span> | |
| </div> | |
| <p class="text-xs text-gray-400">Surveillance réseau - 64% des canaux</p> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Actif depuis 5h 03m</span> | |
| <span>Signal: <span class="text-red-500">Faible</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-3 bg-gray-900 rounded-lg border border-gray-800 hover:border-quantum-blue transition-all"> | |
| <div class="w-8 h-8 rounded-full bg-green-900 bg-opacity-50 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-mobile-alt text-xs text-green-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">RÉSEAU MOBILE #7</h4> | |
| <span class="text-xs text-quantum-blue">0.789M KLM</span> | |
| </div> | |
| <p class="text-xs text-gray-400">Surveillance totale - 100% des canaux</p> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Actif depuis 12h 38m</span> | |
| <span>Signal: <span class="text-green-500">Fort</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="quantum-button text-white px-4 py-2 rounded-lg font-medium w-full mt-4"> | |
| <i class="fas fa-plus mr-2"></i> AJOUTER UNE CIBLE | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Quantum Footer --> | |
| <footer class="py-4 px-8 border-t border-gray-800 bg-gradient-to-t from-black to-transparent"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i class="fas fa-circle-notch fa-spin text-quantum-blue"></i> | |
| <span class="text-sm">SYSTÈME OMNI-1 ACTIF - PORTÉE: 5,678,974 KLM</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-shield-alt"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-cog"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-user-secret"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-quantum-blue transition"><i class="fas fa-power-off"></i></a> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-4 md:mt-0"> | |
| SYSTÈME DE SURVEILLANCE QUANTIQUE © 2023 - TOUS DROITS RÉSERVÉS | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Quantum System Initialization | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize quantum radar | |
| initQuantumRadar(); | |
| // Initialize terminal | |
| initQuantumTerminal(); | |
| // Simulate system activity | |
| simulateSystemActivity(); | |
| // Add event listeners | |
| document.getElementById('rangeSlider').addEventListener('input', function() { | |
| const value = this.value; | |
| const rangeText = value + 'M KLM'; | |
| document.querySelector('#rangeSlider + div span:last-child').textContent = rangeText; | |
| // Show alert | |
| showQuantumAlert('Portée maximale ajustée à ' + rangeText, 'info'); | |
| }); | |
| }); | |
| // Quantum Radar System | |
| function initQuantumRadar() { | |
| const radar = document.querySelector('.quantum-radar'); | |
| // Add random signals | |
| setInterval(() => { | |
| const colors = ['#00f7ff', '#ff00ff', '#8a2be2', '#ffffff']; | |
| const types = ['satellite', 'device', 'person', 'network', 'vehicle']; | |
| for (let i = 0; i < 3; i++) { | |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; | |
| const randomType = types[Math.floor(Math.random() * types.length)]; | |
| const randomX = Math.random() * 90 + 5; | |
| const randomY = Math.random() * 90 + 5; | |
| const signal = document.createElement('div'); | |
| signal.className = 'absolute w-4 h-4 rounded-full quantum-pulse'; | |
| signal.style.backgroundColor = randomColor; | |
| signal.style.top = `${randomY}%`; | |
| signal.style.left = `${randomX}%`; | |
| signal.style.filter = `drop-shadow(0 0 10px ${randomColor})`; | |
| // Add icon based on type | |
| const icon = document.createElement('i'); | |
| icon.className = `fas fa-${randomType} text-xs absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`; | |
| icon.style.color = '#010101'; | |
| signal.appendChild(icon); | |
| radar.appendChild(signal); | |
| // Remove after animation | |
| setTimeout(() => { | |
| if (signal.parentNode) { | |
| signal.remove(); | |
| } | |
| }, 2000); | |
| } | |
| }, 1000); | |
| // Add some permanent signals | |
| const importantTargets = [ | |
| { x: 20, y: 30, color: '#ff00ff', type: 'satellite-dish', size: 6 }, | |
| { x: 70, y: 60, color: '#00f7ff', type: 'building', size: 6 }, | |
| { x: 50, y: 20, color: '#ffffff', type: 'users', size: 5 } | |
| ]; | |
| importantTargets.forEach(target => { | |
| const signal = document.createElement('div'); | |
| signal.className = 'absolute rounded-full quantum-pulse'; | |
| signal.style.backgroundColor = target.color; | |
| signal.style.width = `${target.size}px`; | |
| signal.style.height = `${target.size}px`; | |
| signal.style.top = `${target.y}%`; | |
| signal.style.left = `${target.x}%`; | |
| signal.style.filter = `drop-shadow(0 0 15px ${target.color})`; | |
| const icon = document.createElement('i'); | |
| icon.className = `fas fa-${target.type} text-xs absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2`; | |
| icon.style.color = '#010101'; | |
| signal.appendChild(icon); | |
| radar.appendChild(signal); | |
| }); | |
| } | |
| // Quantum Terminal System | |
| function initQuantumTerminal() { | |
| const terminal = document.getElementById('quantumTerminal'); | |
| const terminalInput = document.getElementById('terminalInput'); | |
| // Add sample terminal activity | |
| setInterval(() => { | |
| const commands = [ | |
| 'scan --target=ALPHA-7 --deep', | |
| 'analyze --frequencies=all', | |
| 'monitor --activate --all', | |
| 'intercept --channel=encrypted', | |
| 'decrypt --algorithm=quantum', | |
| 'track --coordinates=3.456M,4.567M' | |
| ]; | |
| const responses = [ | |
| 'Scan profond en cours... 42% complété', | |
| 'Analyse des fréquences terminée. 248 canaux détectés', | |
| 'Surveillance activée sur tous les canaux', | |
| 'Interception du canal chiffré établie', | |
| 'Déchiffrement réussi. Accès aux données accordé', | |
| 'Cible suivie avec succès. Coordonnées mises à jour' | |
| ]; | |
| const randomCmd = Math.floor(Math.random() * commands.length); | |
| const cmdLine = document.createElement('div'); | |
| cmdLine.className = 'terminal-line'; | |
| cmdLine.innerHTML = `<span class="terminal-command">> ${commands[randomCmd]}</span>`; | |
| const resLine = document.createElement('div'); | |
| resLine.className = 'terminal-line'; | |
| resLine.innerHTML = `<span class="terminal-response">${responses[randomCmd]}</span>`; | |
| terminal.appendChild(cmdLine); | |
| terminal.appendChild(resLine); | |
| // Scroll to bottom | |
| terminal.scrollTop = terminal.scrollHeight; | |
| // Random error | |
| if (Math.random() > 0.8) { | |
| const errLine = document.createElement('div'); | |
| errLine.className = 'terminal-line'; | |
| errLine.innerHTML = `<span class="terminal-error">ERREUR: Signal perdu sur le canal ${Math.floor(Math.random()*100)}. Reconnexion...</span>`; | |
| terminal.appendChild(errLine); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| } | |
| }, 5000); | |
| // Handle enter key in terminal | |
| terminalInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| executeCommand(); | |
| } | |
| }); | |
| } | |
| function executeCommand() { | |
| const terminal = document.getElementById('quantumTerminal'); | |
| const terminalInput = document.getElementById('terminalInput'); | |
| const command = terminalInput.value.trim(); | |
| if (command) { | |
| // Add command to terminal | |
| const cmdLine = document.createElement('div'); | |
| cmdLine.className = 'terminal-line'; | |
| cmdLine.innerHTML = `<span class="terminal-command">> ${command}</span>`; | |
| terminal.appendChild(cmdLine); | |
| // Process command | |
| let response = ''; | |
| if (command.startsWith('scan')) { | |
| response = `Lancement du scan... Portée: 5.678974M KLM. ${Math.floor(Math.random()*100)}% des cibles détectées`; | |
| } else if (command.startsWith('analyze')) { | |
| response = 'Analyse terminée. 248,000 points de données traités'; | |
| } else if (command.startsWith('monitor')) { | |
| response = 'Surveillance activée. 100% des canaux opérationnels'; | |
| } else if (command.startsWith('intercept')) { | |
| response = 'Interception quantique établie. Flux de données en cours'; | |
| } else if (command.startsWith('decrypt')) { | |
| response = 'Déchiffrement réussi. Accès aux données sensibles accordé'; | |
| } else if (command.startsWith('track')) { | |
| response = 'Cible suivie avec succès. Coordonnées mises à jour en temps réel'; | |
| } else if (command === 'clear') { | |
| terminal.innerHTML = ''; | |
| terminalInput.value = ''; | |
| return; | |
| } else if (command === 'help') { | |
| response = 'Commandes disponibles: scan, analyze, monitor, intercept, decrypt, track, clear, help'; | |
| } else { | |
| response = `ERREUR: Commande "${command}" non reconnue. Tapez "help" pour la liste des commandes`; | |
| } | |
| // Add response to terminal | |
| const resLine = document.createElement('div'); | |
| resLine.className = 'terminal-line'; | |
| if (response.startsWith('ERREUR')) { | |
| resLine.innerHTML = `<span class="terminal-error">${response}</span>`; | |
| } else { | |
| resLine.innerHTML = `<span class="terminal-response">${response}</span>`; | |
| } | |
| terminal.appendChild(resLine); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| terminalInput.value = ''; | |
| // Show alert for important commands | |
| if (command.startsWith('scan') || command.startsWith('intercept') || command.startsWith('decrypt')) { | |
| showQuantumAlert(`Commande exécutée: ${command}`, 'success'); | |
| } | |
| } | |
| } | |
| // Simulate system activity | |
| function simulateSystemActivity() { | |
| // Show random alerts | |
| setInterval(() => { | |
| const alerts = [ | |
| { message: 'Nouvelle cible détectée à 3.456M KLM', type: 'info' }, | |
| { message: 'Signal perdu sur le canal quantique #248', type: 'error' }, | |
| { message: 'Analyse complète terminée. 100% des données traitées', type: 'success' }, | |
| { message: 'Attention: Tentative d\'intrusion détectée', type: 'warning' }, | |
| { message: 'Mise à jour du système en cours...', type: 'info' } | |
| ]; | |
| const randomAlert = alerts[Math.floor(Math.random() * alerts.length)]; | |
| showQuantumAlert(randomAlert.message, randomAlert.type); | |
| }, 10000); | |
| // Update distance line | |
| setInterval(() => { | |
| const distanceLine = document.querySelector('.distance-line'); | |
| distanceLine.style.animation = 'none'; | |
| distanceLine.offsetHeight; // Trigger reflow | |
| distanceLine.style.animation = 'distanceScan 15s linear infinite'; | |
| }, 15000); | |
| } | |
| // Show quantum alert | |
| function showQuantumAlert(message, type) { | |
| const alertContainer = document.getElementById('quantumAlerts'); | |
| const alert = document.createElement('div'); | |
| let alertClass = 'bg-gray-900 border-quantum-blue text-quantum-blue'; | |
| let icon = 'fa-info-circle'; | |
| if (type === 'error') { | |
| alertClass = 'bg-red-900 border-red-500 text-red-100'; | |
| icon = 'fa-exclamation-triangle'; | |
| } else if (type === 'success') { | |
| alertClass = 'bg-green-900 border-green-500 text-green-100'; | |
| icon = 'fa-check-circle'; | |
| } else if (type === 'warning') { | |
| alertClass = 'bg-yellow-900 border-yellow-500 text-yellow-100'; | |
| icon = 'fa-exclamation-circle'; | |
| } | |
| alert.className = `quantum-alert p-4 mb-2 rounded-lg border ${alertClass} flex items-start`; | |
| alert.innerHTML = ` | |
| <i class="fas ${icon} mr-3 mt-1"></i> | |
| <div> | |
| <div class="font-bold">SYSTÈME OMNI-1</div> | |
| <div>${message}</div> | |
| </div> | |
| <button class="ml-4" onclick="this.parentElement.remove()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| alertContainer.appendChild(alert); | |
| // Remove after 5 seconds | |
| setTimeout(() => { | |
| if (alert.parentNode) { | |
| alert.remove(); | |
| } | |
| }, 5000); | |
| } | |
| </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/nebulahost" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |