Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumVPN - VPN Intelligent Automatique</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"> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .server-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .server-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .connection-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: #e0e0e0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); | |
| transition: width 0.5s ease; | |
| } | |
| #qrcode-container { | |
| width: 160px; | |
| height: 160px; | |
| margin: 0 auto; | |
| padding: 10px; | |
| background: white; | |
| border-radius: 8px; | |
| border: 1px solid #e0e0e0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white py-6 px-4 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| <h1 class="text-2xl font-bold">QuantumVPN</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="hidden md:inline-block px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm"> | |
| <i class="fas fa-brain mr-1"></i> 500 IA en réseau | |
| </span> | |
| <button class="px-4 py-2 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full transition"> | |
| <i class="fas fa-user mr-1"></i> Mon compte | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Panel --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Connection Status --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold">Statut de connexion</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500">Rotation serveur:</span> | |
| <span id="rotation-timer" class="font-medium">10:00</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div id="connection-indicator" class="w-4 h-4 rounded-full bg-gray-400 mr-3"></div> | |
| <span id="connection-status" class="text-lg">Déconnecté</span> | |
| </div> | |
| <button id="connect-btn" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-medium transition flex items-center"> | |
| <i class="fas fa-power-off mr-2"></i> Se connecter | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Sécurité</span> | |
| <span id="security-level">Optimale</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="security-progress" class="progress-fill" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Current Server --> | |
| <div id="current-server" class="bg-white rounded-xl shadow-md p-6 hidden"> | |
| <h2 class="text-xl font-semibold mb-4">Serveur actuel</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-2xl mb-4 md:mb-0 md:mr-6"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <h3 id="server-name" class="text-lg font-medium">Chargement...</h3> | |
| <div class="flex flex-wrap items-center mt-2 text-sm text-gray-600"> | |
| <span class="flex items-center mr-4"> | |
| <i class="fas fa-map-marker-alt mr-1"></i> | |
| <span id="server-location">Localisation</span> | |
| </span> | |
| <span class="flex items-center mr-4"> | |
| <i class="fas fa-tachometer-alt mr-1"></i> | |
| <span id="server-speed">Vitesse</span> | |
| </span> | |
| <span class="flex items-center"> | |
| <i class="fas fa-shield-alt mr-1"></i> | |
| <span id="server-security">Sécurité</span> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="text-right"> | |
| <div class="text-xs text-gray-500 mb-1">Prochaine rotation</div> | |
| <div id="next-rotation" class="text-xl font-bold">10:00</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Server Network --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold">Réseau Quantum</h2> | |
| <div class="flex items-center space-x-2 text-sm"> | |
| <i class="fas fa-sync-alt text-blue-500"></i> | |
| <span>Mise à jour en temps réel</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Server cards will be added here by JavaScript --> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button class="px-4 py-2 border border-blue-500 text-blue-500 hover:bg-blue-50 rounded-full transition"> | |
| <i class="fas fa-plus mr-1"></i> Afficher plus de serveurs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel --> | |
| <div class="space-y-6"> | |
| <!-- AI Optimization --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Optimisation IA</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Analyse du trafic</span> | |
| <span id="traffic-analysis">Active</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Protection contre les menaces</span> | |
| <span id="threat-protection">Active</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Sélection intelligente des serveurs</span> | |
| <span id="server-selection">Active</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full transition"> | |
| <i class="fas fa-cog mr-1"></i> Paramètres avancés | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Download App --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Télécharger l'application</h2> | |
| <p class="text-gray-600 mb-4">Scannez le QR code pour installer QuantumVPN sur votre mobile</p> | |
| <div class="flex flex-col items-center"> | |
| <div id="qrcode-container"></div> | |
| <div class="text-center mt-4"> | |
| <p class="text-sm text-gray-500 mb-2">Disponible sur</p> | |
| <div class="flex justify-center space-x-3"> | |
| <i class="fab fa-apple text-2xl text-gray-700"></i> | |
| <i class="fab fa-android text-2xl text-gray-700"></i> | |
| <i class="fab fa-windows text-2xl text-gray-700"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Statistics --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Statistiques</h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Données protégées</span> | |
| <span class="font-medium">4.7 GB</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Menaces bloquées</span> | |
| <span class="font-medium">128</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Serveurs disponibles</span> | |
| <span class="font-medium">500+</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Latence moyenne</span> | |
| <span class="font-medium">28 ms</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shield-alt"></i> | |
| <span class="font-medium">QuantumVPN</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mt-1">Protection intelligente par IA</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-blue-300 transition">Confidentialité</a> | |
| <a href="#" class="hover:text-blue-300 transition">Conditions</a> | |
| <a href="#" class="hover:text-blue-300 transition">Support</a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-700 text-center text-sm text-gray-400"> | |
| <p>© 2023 QuantumVPN. Tous droits réservés. Rotation automatique des serveurs gérée par 500 IA.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Sample server data | |
| const servers = [ | |
| { id: 1, name: "Quantum-Node-1", location: "Paris, France", speed: "Ultra Rapide", security: "Maximale", ping: 12, load: 35, premium: false }, | |
| { id: 2, name: "Quantum-Node-2", location: "New York, USA", speed: "Rapide", security: "Élevée", ping: 28, load: 62, premium: false }, | |
| { id: 3, name: "Quantum-Node-3", location: "Tokyo, Japon", speed: "Moyenne", security: "Maximale", ping: 45, load: 41, premium: true }, | |
| { id: 4, name: "Quantum-Node-4", location: "Sydney, Australie", speed: "Rapide", security: "Élevée", ping: 38, load: 57, premium: false }, | |
| { id: 5, name: "Quantum-Node-5", location: "Londres, UK", speed: "Ultra Rapide", security: "Maximale", ping: 9, load: 29, premium: true }, | |
| { id: 6, name: "Quantum-Node-6", location: "Singapour", speed: "Moyenne", security: "Élevée", ping: 52, load: 68, premium: false } | |
| ]; | |
| // Current connection state | |
| let isConnected = false; | |
| let currentServer = null; | |
| let rotationInterval; | |
| let rotationTime = 600; // 10 minutes in seconds | |
| // DOM elements | |
| const connectBtn = document.getElementById('connect-btn'); | |
| const connectionIndicator = document.getElementById('connection-indicator'); | |
| const connectionStatus = document.getElementById('connection-status'); | |
| const currentServerSection = document.getElementById('current-server'); | |
| const serverName = document.getElementById('server-name'); | |
| const serverLocation = document.getElementById('server-location'); | |
| const serverSpeed = document.getElementById('server-speed'); | |
| const serverSecurity = document.getElementById('server-security'); | |
| const nextRotation = document.getElementById('next-rotation'); | |
| const rotationTimer = document.getElementById('rotation-timer'); | |
| const serverNetwork = document.querySelector('.grid.gap-4'); | |
| const securityLevel = document.getElementById('security-level'); | |
| const securityProgress = document.getElementById('security-progress'); | |
| // Generate QR Code | |
| function generateQRCode() { | |
| const qr = qrcode(0, 'L'); | |
| qr.addData('https://quantumvpn.com/download'); | |
| qr.make(); | |
| const qrContainer = document.getElementById('qrcode-container'); | |
| qrContainer.innerHTML = qr.createImgTag(4, 0); | |
| // Style the generated image | |
| const qrImg = qrContainer.querySelector('img'); | |
| qrImg.style.width = '100%'; | |
| qrImg.style.height = '100%'; | |
| } | |
| // Render server cards | |
| function renderServers() { | |
| serverNetwork.innerHTML = ''; | |
| servers.forEach(server => { | |
| const serverCard = document.createElement('div'); | |
| serverCard.className = 'server-card bg-white rounded-lg p-4 border border-gray-200 hover:border-blue-300 cursor-pointer'; | |
| serverCard.innerHTML = ` | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">${server.name}</h3> | |
| ${server.premium ? '<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Premium</span>' : ''} | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3"> | |
| <div class="flex items-center mb-1"> | |
| <i class="fas fa-map-marker-alt text-xs mr-2"></i> | |
| <span>${server.location}</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-tachometer-alt text-xs mr-2"></i> | |
| <span>${server.speed} (${server.ping}ms)</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <div> | |
| <div class="h-2 w-16 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-500" style="width: ${100 - server.load}%"></div> | |
| </div> | |
| <span>Charge: ${server.load}%</span> | |
| </div> | |
| <span class="flex items-center text-blue-600"> | |
| <i class="fas fa-shield-alt mr-1"></i> | |
| ${server.security} | |
| </span> | |
| </div> | |
| `; | |
| serverCard.addEventListener('click', () => selectServer(server)); | |
| serverNetwork.appendChild(serverCard); | |
| }); | |
| } | |
| // Select a server | |
| function selectServer(server) { | |
| currentServer = server; | |
| serverName.textContent = server.name; | |
| serverLocation.textContent = server.location; | |
| serverSpeed.textContent = server.speed; | |
| serverSecurity.textContent = server.security; | |
| if (isConnected) { | |
| // If already connected, just update the current server display | |
| currentServerSection.classList.remove('hidden'); | |
| } | |
| } | |
| // Connect/disconnect function | |
| function toggleConnection() { | |
| if (!isConnected) { | |
| // If no server selected, choose a random one | |
| if (!currentServer) { | |
| const randomServer = servers[Math.floor(Math.random() * servers.length)]; | |
| selectServer(randomServer); | |
| } | |
| // Connect | |
| isConnected = true; | |
| connectBtn.innerHTML = '<i class="fas fa-power-off mr-2"></i> Se déconnecter'; | |
| connectionIndicator.className = 'w-4 h-4 rounded-full bg-green-500 mr-3 connection-animation'; | |
| connectionStatus.textContent = 'Connecté'; | |
| currentServerSection.classList.remove('hidden'); | |
| securityLevel.textContent = 'Optimale'; | |
| securityProgress.style.width = '95%'; | |
| // Start server rotation countdown | |
| startRotationTimer(); | |
| // Simulate AI optimization | |
| simulateAIOptimization(); | |
| } else { | |
| // Disconnect | |
| isConnected = false; | |
| connectBtn.innerHTML = '<i class="fas fa-power-off mr-2"></i> Se connecter'; | |
| connectionIndicator.className = 'w-4 h-4 rounded-full bg-gray-400 mr-3'; | |
| connectionStatus.textContent = 'Déconnecté'; | |
| securityLevel.textContent = 'Non protégé'; | |
| securityProgress.style.width = '0%'; | |
| // Stop rotation timer | |
| clearInterval(rotationInterval); | |
| rotationTimer.textContent = '10:00'; | |
| // Hide current server section | |
| currentServerSection.classList.add('hidden'); | |
| } | |
| } | |
| // Start rotation timer | |
| function startRotationTimer() { | |
| rotationTime = 600; // Reset to 10 minutes | |
| updateRotationDisplay(); | |
| rotationInterval = setInterval(() => { | |
| rotationTime--; | |
| updateRotationDisplay(); | |
| if (rotationTime <= 0) { | |
| // Rotate to a new server | |
| const otherServers = servers.filter(s => s.id !== currentServer.id); | |
| const newServer = otherServers[Math.floor(Math.random() * otherServers.length)]; | |
| selectServer(newServer); | |
| // Reset timer | |
| rotationTime = 600; | |
| // Show notification | |
| showRotationNotification(newServer); | |
| } | |
| }, 1000); | |
| } | |
| // Update rotation display | |
| function updateRotationDisplay() { | |
| const minutes = Math.floor(rotationTime / 60); | |
| const seconds = rotationTime % 60; | |
| rotationTimer.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; | |
| nextRotation.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; | |
| } | |
| // Show rotation notification | |
| function showRotationNotification(server) { | |
| // In a real app, this would be a more elegant notification | |
| alert(`Le serveur a été automatiquement changé pour ${server.name} (${server.location}) pour optimiser votre connexion.`); | |
| } | |
| // Simulate AI optimization | |
| function simulateAIOptimization() { | |
| const aiFeatures = ['traffic-analysis', 'threat-protection', 'server-selection']; | |
| setInterval(() => { | |
| if (!isConnected) return; | |
| // Randomly adjust values to simulate AI working | |
| aiFeatures.forEach(feature => { | |
| const element = document.getElementById(feature); | |
| if (element) { | |
| const currentValue = parseInt(element.textContent === 'Active' ? 85 : element.textContent); | |
| const newValue = Math.min(100, Math.max(80, currentValue + (Math.random() * 10 - 5))); | |
| element.textContent = newValue > 85 ? 'Active' : Math.round(newValue) + '%'; | |
| } | |
| }); | |
| // Randomly adjust security level slightly | |
| const currentSecurity = parseInt(securityProgress.style.width); | |
| const newSecurity = Math.min(95, Math.max(90, currentSecurity + (Math.random() * 4 - 2))); | |
| securityProgress.style.width = `${newSecurity}%`; | |
| }, 3000); | |
| } | |
| // Event listeners | |
| connectBtn.addEventListener('click', toggleConnection); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderServers(); | |
| generateQRCode(); | |
| }); | |
| </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/quantumvpn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |