|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NeuroVPN - Le VPN Intelligent</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@1.5.1/build/qrcode.min.js"></script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.server-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.connection-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 0.7; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.7; } |
|
|
} |
|
|
.glow { |
|
|
box-shadow: 0 0 15px rgba(167, 119, 227, 0.7); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<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-3xl"></i> |
|
|
<h1 class="text-2xl font-bold">Neuro<span class="font-light">VPN</span></h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="hidden md:flex items-center space-x-2 bg-white bg-opacity-20 px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
<span>Mode IA Actif</span> |
|
|
</div> |
|
|
<button class="bg-white text-purple-700 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition"> |
|
|
<i class="fas fa-user mr-2"></i>Mon Compte |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Statut de Connexion</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm text-gray-500">IA #487 en charge</span> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</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 class="relative"> |
|
|
<div id="connectionCircle" class="w-24 h-24 rounded-full gradient-bg flex items-center justify-center connection-animation"> |
|
|
<i class="fas fa-lock text-white text-4xl"></i> |
|
|
</div> |
|
|
<div class="absolute -bottom-2 -right-2 bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ml-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-800">Connecté</h3> |
|
|
<p class="text-gray-600">Protection maximale activée</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center md:text-right"> |
|
|
<div class="text-gray-600 mb-2">Serveur actuel</div> |
|
|
<div class="text-xl font-bold text-purple-700">Tokyo #17</div> |
|
|
<div class="text-sm text-gray-500">Changement dans 8:32</div> |
|
|
<button id="toggleConnection" class="mt-4 bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-full font-semibold transition"> |
|
|
Déconnecter |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Rotation Automatique des Serveurs</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="relative"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
<div class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-green-500 animate-ping"></div> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">Actif</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-semibold">Fréquence de rotation</h3> |
|
|
<p class="text-sm text-gray-500">Optimisée par l'IA pour la meilleure performance</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 px-4 py-2 rounded-full"> |
|
|
<span class="font-semibold">10 minutes</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-semibold">Prochain serveur</h3> |
|
|
<p class="text-sm text-gray-500">Sélectionné parmi 500 serveurs disponibles</p> |
|
|
</div> |
|
|
<div class="bg-purple-100 text-purple-700 px-4 py-2 rounded-full"> |
|
|
<span class="font-semibold">Singapour #42</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div id="rotationProgress" class="h-full gradient-bg rounded-full" style="width: 65%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>Dernier changement: 5:28</span> |
|
|
<span>Prochain: 4:32</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6">Tableau de Bord Sécurité</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h3 class="font-semibold text-gray-700">Protection DNS</h3> |
|
|
<i class="fas fa-check-circle text-green-500"></i> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500">Aucune fuite détectée</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h3 class="font-semibold text-gray-700">Anti-traçage</h3> |
|
|
<i class="fas fa-shield-alt text-blue-500"></i> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500">Actif - Niveau maximum</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h3 class="font-semibold text-gray-700">Chiffrement</h3> |
|
|
<i class="fas fa-lock text-purple-500"></i> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500">AES-256-GCM</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6">Actions Rapides</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<button class="w-full flex items-center justify-between bg-gray-100 hover:bg-gray-200 p-4 rounded-lg transition"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-random text-purple-500 mr-3"></i> |
|
|
<span>Forcer la rotation du serveur</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between bg-gray-100 hover:bg-gray-200 p-4 rounded-lg transition"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-user-secret text-blue-500 mr-3"></i> |
|
|
<span>Mode furtif activé</span> |
|
|
</div> |
|
|
<i class="fas fa-toggle-on text-green-500"></i> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center justify-between bg-gray-100 hover:bg-gray-200 p-4 rounded-lg transition"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-rocket text-orange-500 mr-3"></i> |
|
|
<span>Boost de vitesse</span> |
|
|
</div> |
|
|
<i class="fas fa-chevron-right text-gray-400"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Télécharger l'application</h2> |
|
|
<p class="text-gray-600 mb-6">Scannez le QR code pour installer NeuroVPN sur votre mobile</p> |
|
|
|
|
|
<div class="flex flex-col items-center"> |
|
|
<div id="qrcode" class="p-4 bg-white rounded-lg border border-gray-200 mb-4"></div> |
|
|
<p class="text-sm text-gray-500 text-center">Disponible sur iOS et Android</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">Paramètres IA</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="flex items-center justify-between cursor-pointer"> |
|
|
<span class="text-gray-700">Optimisation automatique</span> |
|
|
<div class="relative"> |
|
|
<input type="checkbox" class="sr-only" checked> |
|
|
<div class="block bg-purple-500 w-12 h-6 rounded-full"></div> |
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div> |
|
|
</div> |
|
|
</label> |
|
|
<p class="text-xs text-gray-500 mt-1">L'IA ajuste les paramètres en temps réel</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="flex items-center justify-between cursor-pointer"> |
|
|
<span class="text-gray-700">Rotation intelligente</span> |
|
|
<div class="relative"> |
|
|
<input type="checkbox" class="sr-only" checked> |
|
|
<div class="block bg-purple-500 w-12 h-6 rounded-full"></div> |
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div> |
|
|
</div> |
|
|
</label> |
|
|
<p class="text-xs text-gray-500 mt-1">Changement de serveur toutes les 10 min</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="flex items-center justify-between cursor-pointer"> |
|
|
<span class="text-gray-700">Protection avancée</span> |
|
|
<div class="relative"> |
|
|
<input type="checkbox" class="sr-only" checked> |
|
|
<div class="block bg-purple-500 w-12 h-6 rounded-full"></div> |
|
|
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div> |
|
|
</div> |
|
|
</label> |
|
|
<p class="text-xs text-gray-500 mt-1">Double chiffrement des données</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">NeuroVPN</h3> |
|
|
<p class="text-gray-400">Le VPN le plus intelligent au monde, protégé par 500 IA spécialisées.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Fonctionnalités</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white">Rotation automatique</a></li> |
|
|
<li><a href="#" class="hover:text-white">Protection IA</a></li> |
|
|
<li><a href="#" class="hover:text-white">Mode furtif</a></li> |
|
|
<li><a href="#" class="hover:text-white">Double VPN</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Support</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white">Centre d'aide</a></li> |
|
|
<li><a href="#" class="hover:text-white">Contact IA</a></li> |
|
|
<li><a href="#" class="hover:text-white">FAQ</a></li> |
|
|
<li><a href="#" class="hover:text-white">Statut</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Legal</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li><a href="#" class="hover:text-white">Politique de confidentialité</a></li> |
|
|
<li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li> |
|
|
<li><a href="#" class="hover:text-white">Transparence</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 NeuroVPN. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const qrcodeElement = document.getElementById('qrcode'); |
|
|
QRCode.toCanvas(qrcodeElement, 'https://neurovpn.example.com/download', { |
|
|
width: 160, |
|
|
margin: 1, |
|
|
color: { |
|
|
dark: '#6e8efb', |
|
|
light: '#ffffff' |
|
|
} |
|
|
}, function(error) { |
|
|
if (error) console.error(error); |
|
|
}); |
|
|
|
|
|
|
|
|
const toggleConnection = document.getElementById('toggleConnection'); |
|
|
const connectionCircle = document.getElementById('connectionCircle'); |
|
|
|
|
|
toggleConnection.addEventListener('click', function() { |
|
|
if (toggleConnection.textContent.includes('Déconnecter')) { |
|
|
toggleConnection.textContent = 'Connecter'; |
|
|
toggleConnection.classList.remove('bg-red-500', 'hover:bg-red-600'); |
|
|
toggleConnection.classList.add('bg-green-500', 'hover:bg-green-600'); |
|
|
connectionCircle.classList.remove('gradient-bg', 'connection-animation'); |
|
|
connectionCircle.classList.add('bg-gray-300'); |
|
|
connectionCircle.innerHTML = '<i class="fas fa-unlock text-gray-600 text-4xl"></i>'; |
|
|
} else { |
|
|
toggleConnection.textContent = 'Déconnecter'; |
|
|
toggleConnection.classList.remove('bg-green-500', 'hover:bg-green-600'); |
|
|
toggleConnection.classList.add('bg-red-500', 'hover:bg-red-600'); |
|
|
connectionCircle.classList.remove('bg-gray-300'); |
|
|
connectionCircle.classList.add('gradient-bg', 'connection-animation'); |
|
|
connectionCircle.innerHTML = '<i class="fas fa-lock text-white text-4xl"></i>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
let progress = 65; |
|
|
const rotationProgress = document.getElementById('rotationProgress'); |
|
|
|
|
|
setInterval(() => { |
|
|
progress -= 1; |
|
|
if (progress <= 0) progress = 100; |
|
|
rotationProgress.style.width = `${progress}%`; |
|
|
|
|
|
|
|
|
const minutes = Math.floor(progress / 10); |
|
|
const seconds = (progress % 10) * 6; |
|
|
document.querySelector('#rotationProgress + div > span:last-child').textContent = `Prochain: ${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; |
|
|
}, 1000); |
|
|
}); |
|
|
</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/neurovpn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
