Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HyperVision GPS - Système Satellite IA</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=Orbitron:wght@400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #3b82f6; | |
| --secondary: #10b981; | |
| --dark: #0f172a; | |
| --light: #f8fafc; | |
| --neon: #00f7ff; | |
| } | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background-color: #020617; | |
| color: #e2e8f0; | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| min-height: 100vh; | |
| } | |
| .neon-border { | |
| border: 1px solid rgba(0, 247, 255, 0.3); | |
| box-shadow: 0 0 10px rgba(0, 247, 255, 0.2); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px var(--neon); | |
| } | |
| .ai-node { | |
| position: relative; | |
| background: rgba(15, 23, 42, 0.7); | |
| transition: all 0.3s ease; | |
| } | |
| .ai-node:hover { | |
| background: rgba(15, 23, 42, 0.9); | |
| box-shadow: 0 0 15px rgba(0, 247, 255, 0.3); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .map-container { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .zoom-level { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 10px; | |
| border-radius: 5px; | |
| font-size: 0.9rem; | |
| } | |
| .satellite-track { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| background: var(--neon); | |
| border-radius: 50%; | |
| box-shadow: 0 0 5px 2px var(--neon); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .command-btn { | |
| transition: all 0.2s; | |
| } | |
| .command-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 247, 255, 0.4); | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 8px; | |
| } | |
| .status-active { | |
| background-color: #10b981; | |
| box-shadow: 0 0 10px #10b981; | |
| } | |
| .status-warning { | |
| background-color: #f59e0b; | |
| box-shadow: 0 0 10px #f59e0b; | |
| } | |
| .status-critical { | |
| background-color: #ef4444; | |
| box-shadow: 0 0 10px #ef4444; | |
| } | |
| .grid-overlay { | |
| 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; | |
| pointer-events: none; | |
| } | |
| .target-reticle { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| border: 2px solid #ef4444; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| .target-reticle::before, .target-reticle::after { | |
| content: ''; | |
| position: absolute; | |
| background: #ef4444; | |
| } | |
| .target-reticle::before { | |
| width: 2px; | |
| height: 40px; | |
| left: 50%; | |
| top: -40px; | |
| transform: translateX(-50%); | |
| } | |
| .target-reticle::after { | |
| width: 40px; | |
| height: 2px; | |
| top: 50%; | |
| left: -40px; | |
| transform: translateY(-50%); | |
| } | |
| /* Search system styles */ | |
| .search-container { | |
| position: relative; | |
| margin-bottom: 20px; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 12px 20px 12px 45px; | |
| background: rgba(15, 23, 42, 0.8); | |
| border: 1px solid rgba(0, 247, 255, 0.3); | |
| border-radius: 8px; | |
| color: white; | |
| font-size: 14px; | |
| transition: all 0.3s; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--neon); | |
| box-shadow: 0 0 15px rgba(0, 247, 255, 0.3); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: rgba(0, 247, 255, 0.7); | |
| } | |
| .search-results { | |
| position: absolute; | |
| width: 100%; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| background: rgba(15, 23, 42, 0.95); | |
| border: 1px solid rgba(0, 247, 255, 0.3); | |
| border-radius: 8px; | |
| margin-top: 5px; | |
| z-index: 100; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | |
| display: none; | |
| } | |
| .search-result-item { | |
| padding: 12px 20px; | |
| border-bottom: 1px solid rgba(0, 247, 255, 0.1); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .search-result-item:hover { | |
| background: rgba(0, 247, 255, 0.1); | |
| } | |
| .search-result-title { | |
| font-weight: 600; | |
| color: white; | |
| margin-bottom: 3px; | |
| } | |
| .search-result-desc { | |
| font-size: 12px; | |
| color: rgba(200, 200, 200, 0.7); | |
| } | |
| .search-result-coords { | |
| font-size: 11px; | |
| color: var(--neon); | |
| margin-top: 5px; | |
| font-family: monospace; | |
| } | |
| .search-category { | |
| padding: 8px 15px; | |
| background: rgba(0, 0, 0, 0.3); | |
| color: var(--neon); | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .search-no-results { | |
| padding: 20px; | |
| text-align: center; | |
| color: rgba(200, 200, 200, 0.7); | |
| font-size: 14px; | |
| } | |
| /* Animation for search results */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .search-results.show { | |
| display: block; | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="dashboard-grid"> | |
| <!-- Sidebar --> | |
| <div class="bg-slate-900 border-r border-slate-800"> | |
| <div class="p-4 border-b border-slate-800"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-xl"> | |
| <i class="fas fa-satellite-dish"></i> | |
| </div> | |
| <span class="ml-3 text-xl font-semibold text-white">HyperVision GPS</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-8"> | |
| <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Réseau IA</h3> | |
| <div class="space-y-2"> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-sm font-medium">IA Principale</span> | |
| </div> | |
| <span class="text-xs bg-green-900 text-green-400 px-2 py-1 rounded-full">25,000 noeuds</span> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-slate-400"> | |
| <span>Capacité: 15,000x zoom</span> | |
| <span>Version: 7.2.1</span> | |
| </div> | |
| </div> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-sm font-medium">Analyse d'Image</span> | |
| </div> | |
| <span class="text-xs bg-blue-900 text-blue-400 px-2 py-1 rounded-full">8,200 noeuds</span> | |
| </div> | |
| </div> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-sm font-medium">Précision GPS</span> | |
| </div> | |
| <span class="text-xs bg-purple-900 text-purple-400 px-2 py-1 rounded-full">6,500 noeuds</span> | |
| </div> | |
| </div> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-sm font-medium">Contrôle Robotique</span> | |
| </div> | |
| <span class="text-xs bg-yellow-900 text-yellow-400 px-2 py-1 rounded-full">4,300 noeuds</span> | |
| </div> | |
| </div> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-sm font-medium">Sécurité</span> | |
| </div> | |
| <span class="text-xs bg-red-900 text-red-400 px-2 py-1 rounded-full">5,800 noeuds</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Satellites Actifs</h3> | |
| <div class="space-y-2"> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-sm font-medium">HyperVision-1</span> | |
| </div> | |
| <span class="text-xs bg-green-900 text-green-400 px-2 py-1 rounded-full">En orbite</span> | |
| </div> | |
| <div class="mt-2 text-xs text-slate-400"> | |
| Altitude: 1,250 km • Couverture: Globale | |
| </div> | |
| </div> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-active"></span> | |
| <span class="text-sm font-medium">HyperVision-2</span> | |
| </div> | |
| <span class="text-xs bg-green-900 text-green-400 px-2 py-1 rounded-full">En orbite</span> | |
| </div> | |
| <div class="mt-2 text-xs text-slate-400"> | |
| Altitude: 1,250 km • Couverture: Globale | |
| </div> | |
| </div> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <span class="status-indicator status-warning"></span> | |
| <span class="text-sm font-medium">HyperVision-3</span> | |
| </div> | |
| <span class="text-xs bg-yellow-900 text-yellow-400 px-2 py-1 rounded-full">Maintenance</span> | |
| </div> | |
| <div class="mt-2 text-xs text-slate-400"> | |
| Altitude: 1,280 km • Couverture: 85% | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Statut du Système</h3> | |
| <div class="ai-node p-3 rounded-lg neon-border"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm">Puissance du zoom:</span> | |
| <span class="font-bold text-blue-400">15,000x</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4 mb-2"> | |
| <span class="text-sm">Précision:</span> | |
| <span class="font-bold text-green-400">0.1 mm</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4 mb-2"> | |
| <span class="text-sm">Latence:</span> | |
| <span class="font-bold text-purple-400">12 ms</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="p-6 overflow-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-white">Contrôle du Système HyperVision GPS</h1> | |
| <p class="text-slate-400">Réseau de 25,000 IA spécialisées • Zoom 15,000x • Robotisation complète</p> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md command-btn flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Actualiser | |
| </button> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-md command-btn flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> Mode Auto | |
| </button> | |
| <button class="px-4 py-2 bg-red-600 text-white rounded-md command-btn flex items-center"> | |
| <i class="fas fa-shield-alt mr-2"></i> Sécurité | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search System --> | |
| <div class="search-container"> | |
| <div class="relative"> | |
| <i class="fas fa-search search-icon"></i> | |
| <input type="text" id="search-input" class="search-input" placeholder="Rechercher une localisation, point d'intérêt..." autocomplete="off"> | |
| <div id="search-results" class="search-results"> | |
| <!-- Results will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map and Controls --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="map-container rounded-xl overflow-hidden neon-border relative" style="height: 500px;"> | |
| <div id="satellite-map" class="w-full h-full bg-slate-800"> | |
| <!-- Map will be rendered here --> | |
| <div class="grid-overlay"></div> | |
| <div class="target-reticle" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> | |
| <!-- Satellite positions (simulated) --> | |
| <div class="satellite-track" style="top: 20%; left: 30%;"></div> | |
| <div class="satellite-track" style="top: 40%; left: 70%;"></div> | |
| <div class="satellite-track" style="top: 70%; left: 20%;"></div> | |
| <div class="satellite-track" style="top: 10%; left: 80%;"></div> | |
| <!-- Zoom level indicator --> | |
| <div class="zoom-level neon-border"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-search-plus mr-2 text-blue-400"></i> | |
| <span>Zoom: </span> | |
| <span id="zoom-level-value" class="font-bold ml-1">1,250x</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-slate-900 rounded-xl p-6 neon-border h-full"> | |
| <h2 class="text-lg font-bold mb-4 text-white flex items-center"> | |
| <i class="fas fa-sliders-h mr-2 text-blue-400"></i> | |
| Contrôles de Précision | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-1">Niveau de Zoom</label> | |
| <div class="flex items-center"> | |
| <input id="zoom-slider" type="range" min="1" max="15000" value="1250" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer"> | |
| <span id="zoom-value" class="ml-3 text-sm font-mono bg-slate-800 px-2 py-1 rounded">1,250x</span> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-400 mt-1"> | |
| <span>1x</span> | |
| <span>15,000x</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-1">Focalisation Automatique</label> | |
| <div class="flex items-center space-x-4"> | |
| <button id="auto-focus-btn" class="flex-1 py-2 bg-green-600 text-white rounded-md command-btn"> | |
| <i class="fas fa-camera mr-2"></i> Auto-Focus | |
| </button> | |
| <button class="flex-1 py-2 bg-blue-600 text-white rounded-md command-btn"> | |
| <i class="fas fa-ruler-combined mr-2"></i> Mesurer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-slate-800"> | |
| <label class="block text-sm font-medium text-slate-300 mb-2">Coordonnées Cible</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label class="block text-xs text-slate-400 mb-1">Latitude</label> | |
| <input type="text" id="target-lat" value="48.8566° N" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-slate-400 mb-1">Longitude</label> | |
| <input type="text" id="target-lng" value="2.3522° E" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-slate-400 mb-1">Altitude</label> | |
| <input type="text" id="target-alt" value="35.0 m" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-slate-400 mb-1">Précision</label> | |
| <input type="text" id="target-precision" value="±0.1 mm" class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-slate-800"> | |
| <button id="lock-target-btn" class="w-full py-2 bg-purple-600 text-white rounded-md command-btn flex items-center justify-center"> | |
| <i class="fas fa-crosshairs mr-2"></i> Verrouiller la Cible | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Processing and Data --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-slate-900 rounded-xl p-6 neon-border"> | |
| <h2 class="text-lg font-bold mb-4 text-white flex items-center"> | |
| <i class="fas fa-brain mr-2 text-green-400"></i> | |
| Analyse IA en Temps Réel | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-slate-300">Reconnaissance d'objets:</span> | |
| <span class="text-sm font-mono bg-green-900 text-green-400 px-2 py-1 rounded-full">98.7%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 98.7%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-sm text-slate-300">Analyse de mouvement:</span> | |
| <span class="text-sm font-mono bg-blue-900 text-blue-400 px-2 py-1 rounded-full">96.2%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-blue-500 h-1.5 rounded-full" style="width: 96.2%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-sm text-slate-300">Prédiction de trajectoire:</span> | |
| <span class="text-sm font-mono bg-purple-900 text-purple-400 px-2 py-1 rounded-full">94.5%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-purple-500 h-1.5 rounded-full" style="width: 94.5%"></div> | |
| </div> | |
| <div class="pt-4 mt-4 border-t border-slate-800"> | |
| <div class="text-xs text-slate-400"> | |
| <span class="font-semibold text-slate-300">25,000 IA</span> analysent simultanément les données avec une précision de <span class="font-semibold text-blue-400">15,000x</span>. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-xl p-6 neon-border"> | |
| <h2 class="text-lg font-bold mb-4 text-white flex items-center"> | |
| <i class="fas fa-microchip mr-2 text-yellow-400"></i> | |
| Système Robotique | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-slate-300">Stabilisation:</span> | |
| <span class="text-sm font-mono bg-yellow-900 text-yellow-400 px-2 py-1 rounded-full">99.9%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 99.9%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-sm text-slate-300">Précision mécanique:</span> | |
| <span class="text-sm font-mono bg-red-900 text-red-400 px-2 py-1 rounded-full">0.1μm</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-red-500 h-1.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-sm text-slate-300">Vitesse d'ajustement:</span> | |
| <span class="text-sm font-mono bg-green-900 text-green-400 px-2 py-1 rounded-full">12ms</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| <div class="pt-4 mt-4 border-t border-slate-800"> | |
| <div class="text-xs text-slate-400"> | |
| <span class="font-semibold text-slate-300">4,300 robots IA</span> ajustent en temps réel la position avec une précision atomique. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-xl p-6 neon-border"> | |
| <h2 class="text-lg font-bold mb-4 text-white flex items-center"> | |
| <i class="fas fa-satellite mr-2 text-blue-400"></i> | |
| Réseau Satellite | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-slate-300">Couverture globale:</span> | |
| <span class="text-sm font-mono bg-blue-900 text-blue-400 px-2 py-1 rounded-full">100%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-blue-500 h-1.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-sm text-slate-300">Latence:</span> | |
| <span class="text-sm font-mono bg-purple-900 text-purple-400 px-2 py-1 rounded-full">12ms</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-purple-500 h-1.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| <div class="flex justify-between items-center mt-4"> | |
| <span class="text-sm text-slate-300">Bande passante:</span> | |
| <span class="text-sm font-mono bg-green-900 text-green-400 px-2 py-1 rounded-full">1.2Tbps</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <div class="pt-4 mt-4 border-t border-slate-800"> | |
| <div class="text-xs text-slate-400"> | |
| <span class="font-semibold text-slate-300">3 satellites HyperVision</span> fournissent une couverture continue avec redondance quantique. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Visualization --> | |
| <div class="bg-slate-900 rounded-xl p-6 neon-border mb-6"> | |
| <h2 class="text-lg font-bold mb-4 text-white flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-purple-400"></i> | |
| Visualisation des Données (Zoom 15,000x) | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-slate-800 rounded-lg p-4 flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center text-blue-400 mr-3"> | |
| <i class="fas fa-ruler-horizontal"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs text-slate-400">Résolution spatiale</div> | |
| <div class="font-bold text-blue-400">0.1 mm</div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-green-900 flex items-center justify-center text-green-400 mr-3"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs text-slate-400">Vitesse de rafraîchissement</div> | |
| <div class="font-bold text-green-400">120 FPS</div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-800 rounded-lg p-4 flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center text-purple-400 mr-3"> | |
| <i class="fas fa-memory"></i> | |
| </div> | |
| <div> | |
| <div class="text-xs text-slate-400">Mémoire IA allouée</div> | |
| <div class="font-bold text-purple-400">42.7 PB</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-slate-800 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <div class="text-sm font-medium text-slate-300">Activité des IA en temps réel</div> | |
| <div class="text-xs bg-slate-900 text-slate-400 px-2 py-1 rounded-full">25,000 noeuds</div> | |
| </div> | |
| <div class="h-40 w-full relative"> | |
| <!-- Simulated AI activity graph --> | |
| <div class="absolute inset-0 grid grid-cols-25 grid-rows-10 gap-px"> | |
| <!-- This would be replaced with actual data visualization in a real app --> | |
| <script> | |
| // Generate random activity cells | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const container = document.createElement('div'); | |
| container.className = 'absolute inset-0 grid grid-cols-25 grid-rows-10 gap-px'; | |
| for (let i = 0; i < 250; i++) { | |
| const cell = document.createElement('div'); | |
| const intensity = Math.floor(Math.random() * 5); | |
| cell.className = `bg-${['slate-700', 'blue-900', 'blue-700', 'blue-500', 'blue-300'][intensity]} rounded-sm`; | |
| container.appendChild(cell); | |
| } | |
| document.querySelector('.h-40.w-full.relative').appendChild(container); | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-slate-500"> | |
| <span>Analyse d'image</span> | |
| <span>Précision GPS</span> | |
| <span>Robotique</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Logs --> | |
| <div class="bg-slate-900 rounded-xl p-6 neon-border"> | |
| <h2 class="text-lg font-bold mb-4 text-white flex items-center"> | |
| <i class="fas fa-terminal mr-2 text-green-400"></i> | |
| Journal du Système | |
| </h2> | |
| <div class="bg-slate-800 rounded-lg p-4 h-48 overflow-y-auto font-mono text-sm"> | |
| <div class="text-green-400">[12:42:35] Système IA initialisé avec 25,000 noeuds</div> | |
| <div class="text-blue-400">[12:42:37] Synchronisation avec réseau satellite complète</div> | |
| <div class="text-purple-400">[12:42:39] Calibration robotique terminée (précision: 0.1μm)</div> | |
| <div class="text-yellow-400">[12:42:42] Zoom ajusté à 1,250x</div> | |
| <div class="text-green-400">[12:43:15] Cible verrouillée: 48.8566° N, 2.3522° E</div> | |
| <div class="text-blue-400">[12:43:18] Analyse d'image en cours (résolution: 0.1mm)</div> | |
| <div class="text-purple-400">[12:43:22] 8,200 IA spécialisées en analyse d'image activées</div> | |
| <div class="text-green-400">[12:43:45] Précision confirmée: ±0.1 mm</div> | |
| <div class="text-blue-400">[12:43:50] Mode robotique automatique engagé</div> | |
| <div class="text-yellow-400">[12:44:02] Stabilisation à 99.9% atteinte</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample database of locations for search functionality | |
| const locationDatabase = [ | |
| { | |
| id: 1, | |
| title: "Tour Eiffel", | |
| description: "Monument emblématique de Paris, France", | |
| category: "Monument", | |
| coords: "48.8584° N, 2.2945° E", | |
| lat: 48.8584, | |
| lng: 2.2945, | |
| alt: "324 m" | |
| }, | |
| { | |
| id: 2, | |
| title: "Statue de la Liberté", | |
| description: "Monument situé à New York, USA", | |
| category: "Monument", | |
| coords: "40.6892° N, 74.0445° W", | |
| lat: 40.6892, | |
| lng: -74.0445, | |
| alt: "93 m" | |
| }, | |
| { | |
| id: 3, | |
| title: "Grand Canyon", | |
| description: "Formation géologique spectaculaire en Arizona, USA", | |
| category: "Nature", | |
| coords: "36.1069° N, 112.1129° W", | |
| lat: 36.1069, | |
| lng: -112.1129, | |
| alt: "2,000 m" | |
| }, | |
| { | |
| id: 4, | |
| title: "Pyramides de Gizeh", | |
| description: "Anciennes pyramides égyptiennes", | |
| category: "Monument", | |
| coords: "29.9792° N, 31.1342° E", | |
| lat: 29.9792, | |
| lng: 31.1342, | |
| alt: "138 m" | |
| }, | |
| { | |
| id: 5, | |
| title: "Mont Everest", | |
| description: "Point culminant de la Terre", | |
| category: "Nature", | |
| coords: "27.9881° N, 86.9250° E", | |
| lat: 27.9881, | |
| lng: 86.9250, | |
| alt: "8,848 m" | |
| }, | |
| { | |
| id: 6, | |
| title: "Base HyperVision Alpha", | |
| description: "Centre de contrôle principal du réseau satellite", | |
| category: "Installation", | |
| coords: "34.0522° N, 118.2437° W", | |
| lat: 34.0522, | |
| lng: -118.2437, | |
| alt: "93 m" | |
| }, | |
| { | |
| id: 7, | |
| title: "Station HyperVision-1", | |
| description: "Station de contrôle orbital primaire", | |
| category: "Satellite", | |
| coords: "0° N, 100° E", | |
| lat: 0, | |
| lng: 100, | |
| alt: "35,786 km" | |
| }, | |
| { | |
| id: 8, | |
| title: "Laboratoire de Recherche IA", | |
| description: "Centre de développement des 25,000 IA spécialisées", | |
| category: "Installation", | |
| coords: "37.7749° N, 122.4194° W", | |
| lat: 37.7749, | |
| lng: -122.4194, | |
| alt: "16 m" | |
| }, | |
| { | |
| id: 9, | |
| title: "Usine Robotique HyperVision", | |
| description: "Centre de fabrication des systèmes de précision", | |
| category: "Installation", | |
| coords: "48.8566° N, 2.3522° E", | |
| lat: 48.8566, | |
| lng: 2.3522, | |
| alt: "35 m" | |
| }, | |
| { | |
| id: 10, | |
| title: "Centre de Contrôle Quantique", | |
| description: "Gestion des communications quantiques", | |
| category: "Installation", | |
| coords: "51.5074° N, 0.1278° W", | |
| lat: 51.5074, | |
| lng: -0.1278, | |
| alt: "24 m" | |
| } | |
| ]; | |
| // Zoom control functionality | |
| const zoomSlider = document.getElementById('zoom-slider'); | |
| const zoomValue = document.getElementById('zoom-value'); | |
| const zoomLevelValue = document.getElementById('zoom-level-value'); | |
| const autoFocusBtn = document.getElementById('auto-focus-btn'); | |
| const searchInput = document.getElementById('search-input'); | |
| const searchResults = document.getElementById('search-results'); | |
| const targetLat = document.getElementById('target-lat'); | |
| const targetLng = document.getElementById('target-lng'); | |
| const targetAlt = document.getElementById('target-alt'); | |
| const targetPrecision = document.getElementById('target-precision'); | |
| const lockTargetBtn = document.getElementById('lock-target-btn'); | |
| // Search functionality | |
| searchInput.addEventListener('input', function() { | |
| const query = this.value.toLowerCase(); | |
| if (query.length < 2) { | |
| searchResults.classList.remove('show'); | |
| return; | |
| } | |
| const results = locationDatabase.filter(item => | |
| item.title.toLowerCase().includes(query) || | |
| item.description.toLowerCase().includes(query) || | |
| item.category.toLowerCase().includes(query) | |
| ); | |
| displaySearchResults(results); | |
| }); | |
| function displaySearchResults(results) { | |
| searchResults.innerHTML = ''; | |
| if (results.length === 0) { | |
| searchResults.innerHTML = '<div class="search-no-results">Aucun résultat trouvé</div>'; | |
| searchResults.classList.add('show'); | |
| return; | |
| } | |
| // Group by category | |
| const categories = {}; | |
| results.forEach(result => { | |
| if (!categories[result.category]) { | |
| categories[result.category] = []; | |
| } | |
| categories[result.category].push(result); | |
| }); | |
| // Display by category | |
| for (const [category, items] of Object.entries(categories)) { | |
| const categoryElement = document.createElement('div'); | |
| categoryElement.className = 'search-category'; | |
| categoryElement.textContent = category; | |
| searchResults.appendChild(categoryElement); | |
| items.forEach(item => { | |
| const itemElement = document.createElement('div'); | |
| itemElement.className = 'search-result-item'; | |
| itemElement.innerHTML = ` | |
| <div class="search-result-title">${item.title}</div> | |
| <div class="search-result-desc">${item.description}</div> | |
| <div class="search-result-coords">${item.coords} • Alt: ${item.alt}</div> | |
| `; | |
| itemElement.addEventListener('click', () => { | |
| // Update target coordinates | |
| targetLat.value = `${item.lat}° ${item.lat > 0 ? 'N' : 'S'}`; | |
| targetLng.value = `${Math.abs(item.lng)}° ${item.lng > 0 ? 'E' : 'W'}`; | |
| targetAlt.value = item.alt; | |
| targetPrecision.value = "±0.1 mm"; | |
| // Update search input | |
| searchInput.value = item.title; | |
| searchResults.classList.remove('show'); | |
| // Add to system logs | |
| addSystemLog(`Cible localisée: ${item.title} (${item.coords})`, 'green-400'); | |
| }); | |
| searchResults.appendChild(itemElement); | |
| }); | |
| } | |
| searchResults.classList.add('show'); | |
| } | |
| // Close search results when clicking outside | |
| document.addEventListener('click', function(e) { | |
| if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) { | |
| searchResults.classList.remove('show'); | |
| } | |
| }); | |
| zoomSlider.addEventListener('input', function() { | |
| const value = parseInt(this.value); | |
| const formattedValue = value.toLocaleString() + 'x'; | |
| zoomValue.textContent = formattedValue; | |
| zoomLevelValue.textContent = formattedValue; | |
| // Simulate zoom effect | |
| if (value > 10000) { | |
| zoomLevelValue.classList.add('text-red-400'); | |
| zoomLevelValue.classList.remove('text-blue-400', 'text-yellow-400'); | |
| } else if (value > 5000) { | |
| zoomLevelValue.classList.add('text-yellow-400'); | |
| zoomLevelValue.classList.remove('text-blue-400', 'text-red-400'); | |
| } else { | |
| zoomLevelValue.classList.add('text-blue-400'); | |
| zoomLevelValue.classList.remove('text-yellow-400', 'text-red-400'); | |
| } | |
| }); | |
| autoFocusBtn.addEventListener('click', function() { | |
| // Simulate auto-focus action | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Focus en cours...'; | |
| this.classList.add('bg-yellow-600'); | |
| this.classList.remove('bg-green-600'); | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Focus réussi'; | |
| this.classList.add('bg-green-600'); | |
| this.classList.remove('bg-yellow-600'); | |
| // Add to system logs | |
| addSystemLog('Auto-focus terminé avec précision de 0.1μm', 'green-400'); | |
| // Reset after 2 seconds | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-camera mr-2"></i> Auto-Focus'; | |
| }, 2000); | |
| }, 1500); | |
| }); | |
| lockTargetBtn.addEventListener('click', function() { | |
| // Simulate target lock | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Verrouillage...'; | |
| this.classList.add('bg-yellow-600'); | |
| this.classList.remove('bg-purple-600'); | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-lock mr-2"></i> Cible Verrouillée'; | |
| this.classList.add('bg-green-600'); | |
| this.classList.remove('bg-yellow-600'); | |
| // Add to system logs | |
| addSystemLog(`Cible verrouillée: ${targetLat.value}, ${targetLng.value}`, 'purple-400'); | |
| // Reset after 3 seconds | |
| setTimeout(() => { | |
| this.innerHTML = '<i class="fas fa-crosshairs mr-2"></i> Verrouiller la Cible'; | |
| this.classList.add('bg-purple-600'); | |
| this.classList.remove('bg-green-600'); | |
| }, 3000); | |
| }, 2000); | |
| }); | |
| // Simulate satellite movement | |
| function moveSatellites() { | |
| const satellites = document.querySelectorAll('.satellite-track'); | |
| satellites.forEach(sat => { | |
| // Get current position | |
| let top = parseInt(sat.style.top); | |
| let left = parseInt(sat.style.left); | |
| // Calculate new position with slight variation | |
| top = Math.max(5, Math.min(95, top + (Math.random() * 4 - 2))); | |
| left = Math.max(5, Math.min(95, left + (Math.random() * 4 - 2))); | |
| // Apply new position | |
| sat.style.top = `${top}%`; | |
| sat.style.left = `${left}%`; | |
| }); | |
| setTimeout(moveSatellites, 2000); | |
| } | |
| // Add entry to system logs | |
| function addSystemLog(message, colorClass) { | |
| const logs = document.querySelector('.bg-slate-800.h-48'); | |
| const time = new Date().toLocaleTimeString('fr-FR', {hour: '2-digit', minute:'2-digit', second:'2-digit'}); | |
| const logEntry = document.createElement('div'); | |
| logEntry.className = `text-${colorClass}`; | |
| logEntry.textContent = `[${time}] ${message}`; | |
| logs.insertBefore(logEntry, logs.firstChild); | |
| // Keep only 10 log entries | |
| if (logs.children.length > 10) { | |
| logs.removeChild(logs.lastChild); | |
| } | |
| } | |
| // Initialize satellite movement | |
| document.addEventListener('DOMContentLoaded', moveSatellites); | |
| // Initialize system logs | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initial logs | |
| addSystemLog('Système IA initialisé avec 25,000 noeuds', 'green-400'); | |
| addSystemLog('Synchronisation avec réseau satellite complète', 'blue-400'); | |
| addSystemLog('Calibration robotique terminée (précision: 0.1μm)', 'purple-400'); | |
| addSystemLog('Zoom ajusté à 1,250x', 'yellow-400'); | |
| // Start random system updates | |
| updateSystemActivity(); | |
| }); | |
| // Simulate system activity | |
| function updateSystemActivity() { | |
| const messages = [ | |
| {text: 'Analyse thermique en cours', color: 'yellow-400'}, | |
| {text: 'Mise à jour des coordonnées GPS', color: 'blue-400'}, | |
| {text: 'Optimisation du réseau IA', color: 'purple-400'}, | |
| {text: 'Vérification des systèmes robotiques', color: 'green-400'}, | |
| {text: 'Calibration du zoom à 15,000x', color: 'red-400'}, | |
| ]; | |
| const randomMessage = messages[Math.floor(Math.random() * messages.length)]; | |
| addSystemLog(randomMessage.text, randomMessage.color); | |
| setTimeout(updateSystemActivity, 5000 + Math.random() * 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/hypervision-gps" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |