| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>miles vpn - Fast & Private VPN Service</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> |
| .vpn-gradient { |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); |
| } |
| .server-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px 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; } |
| } |
| .toggle-switch { |
| position: relative; |
| display: inline-block; |
| width: 60px; |
| height: 34px; |
| } |
| .toggle-switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #ccc; |
| transition: .4s; |
| border-radius: 34px; |
| } |
| .slider:before { |
| position: absolute; |
| content: ""; |
| height: 26px; |
| width: 26px; |
| left: 4px; |
| bottom: 4px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| input:checked + .slider { |
| background-color: #4f46e5; |
| } |
| input:checked + .slider:before { |
| transform: translateX(26px); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="min-h-screen flex flex-col"> |
| |
| <header class="vpn-gradient text-white p-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-xl font-bold">miles vpn</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-gray-200">Home</a> |
| <a href="#" class="hover:text-gray-200">Features</a> |
| <a href="#" class="hover:text-gray-200">Pricing</a> |
| <a href="#" class="hover:text-gray-200">Support</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="hidden md:block px-4 py-2 rounded-lg bg-white text-indigo-600 font-medium hover:bg-gray-100 transition">Sign In</button> |
| <button class="md:hidden text-2xl" id="menu-toggle"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div id="mobile-menu" class="hidden bg-white shadow-lg absolute w-full z-10"> |
| <div class="flex flex-col p-4 space-y-3"> |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Home</a> |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Features</a> |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Pricing</a> |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Support</a> |
| <button class="w-full py-2 px-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">Sign In</button> |
| </div> |
| </div> |
|
|
| |
| <main class="flex-grow container mx-auto px-4 py-8"> |
| |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| <div class="p-6"> |
| <div class="flex flex-col items-center"> |
| <div class="relative mb-6"> |
| <div class="w-48 h-48 rounded-full border-8 border-gray-200 flex items-center justify-center"> |
| <div id="connection-circle" class="w-40 h-40 rounded-full bg-gray-100 flex items-center justify-center cursor-pointer transition-all duration-300 hover:shadow-lg"> |
| <div id="connection-status" class="text-center"> |
| <i class="fas fa-power-off text-5xl text-gray-400"></i> |
| <p class="mt-2 font-semibold text-gray-600">Disconnected</p> |
| </div> |
| </div> |
| </div> |
| <div id="connection-animation" class="absolute inset-0 rounded-full border-8 border-transparent hidden"></div> |
| </div> |
| |
| <div class="w-full max-w-md"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-gray-700">Auto Connect</span> |
| <label class="toggle-switch"> |
| <input type="checkbox" id="auto-connect"> |
| <span class="slider"></span> |
| </label> |
| </div> |
| <div class="flex justify-between items-center mb-6"> |
| <span class="text-gray-700">Kill Switch</span> |
| <label class="toggle-switch"> |
| <input type="checkbox" id="kill-switch"> |
| <span class="slider"></span> |
| </label> |
| </div> |
| |
| <button id="connect-btn" class="w-full py-3 px-6 bg-indigo-600 text-white rounded-lg font-bold text-lg hover:bg-indigo-700 transition">Connect</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-3 bg-indigo-100 rounded-full"> |
| <i class="fas fa-globe text-indigo-600 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500">Server Location</p> |
| <h3 id="server-location" class="text-xl font-semibold">Not Connected</h3> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-3 bg-green-100 rounded-full"> |
| <i class="fas fa-tachometer-alt text-green-600 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500">Download Speed</p> |
| <h3 id="download-speed" class="text-xl font-semibold">0 Mbps</h3> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="flex items-center space-x-4"> |
| <div class="p-3 bg-blue-100 rounded-full"> |
| <i class="fas fa-shield-alt text-blue-600 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500">Security</p> |
| <h3 id="security-level" class="text-xl font-semibold">AES-256</h3> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <h2 class="text-2xl font-bold mb-4 text-gray-800">Recommended Servers</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| <div class="server-card bg-white p-6 rounded-xl shadow transition duration-300 cursor-pointer" data-location="Ghana"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <img src="https://flagcdn.com/w20/gh.png" alt="Ghana Flag" class="w-6 h-4"> |
| <h3 class="font-semibold">Ghana</h3> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Load</span> |
| <span class="text-green-500">Low</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Ping</span> |
| <span>65ms</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500"> |
| <span>Speed</span> |
| <span>900 Mbps</span> |
| </div> |
| </div> |
| <div class="server-card bg-white p-6 rounded-xl shadow transition duration-300 cursor-pointer" data-location="United States"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <img src="https://flagcdn.com/w20/us.png" alt="US Flag" class="w-6 h-4"> |
| <h3 class="font-semibold">United States</h3> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Load</span> |
| <span class="text-green-500">Low</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Ping</span> |
| <span>32ms</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500"> |
| <span>Speed</span> |
| <span>1.2 Gbps</span> |
| </div> |
| </div> |
| <div class="server-card bg-white p-6 rounded-xl shadow transition duration-300 cursor-pointer" data-location="United Kingdom"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <img src="https://flagcdn.com/w20/gb.png" alt="UK Flag" class="w-6 h-4"> |
| <h3 class="font-semibold">United Kingdom</h3> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Load</span> |
| <span class="text-yellow-500">Medium</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Ping</span> |
| <span>45ms</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500"> |
| <span>Speed</span> |
| <span>950 Mbps</span> |
| </div> |
| </div> |
| <div class="server-card bg-white p-6 rounded-xl shadow transition duration-300 cursor-pointer" data-location="Japan"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <img src="https://flagcdn.com/w20/jp.png" alt="Japan Flag" class="w-6 h-4"> |
| <h3 class="font-semibold">Japan</h3> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Load</span> |
| <span class="text-green-500">Low</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Ping</span> |
| <span>112ms</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500"> |
| <span>Speed</span> |
| <span>1.1 Gbps</span> |
| </div> |
| </div> |
| <div class="server-card bg-white p-6 rounded-xl shadow transition duration-300 cursor-pointer" data-location="Germany"> |
| <div class="flex items-center space-x-3 mb-3"> |
| <img src="https://flagcdn.com/w20/de.png" alt="Germany Flag" class="w-6 h-4"> |
| <h3 class="font-semibold">Germany</h3> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Load</span> |
| <span class="text-red-500">High</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500 mb-2"> |
| <span>Ping</span> |
| <span>52ms</span> |
| </div> |
| <div class="flex justify-between text-sm text-gray-500"> |
| <span>Speed</span> |
| <span>800 Mbps</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <h2 class="text-2xl font-bold mb-4 text-gray-800">Why Choose miles vpn?</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="text-indigo-600 mb-4"> |
| <i class="fas fa-lock text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Military-Grade Encryption</h3> |
| <p class="text-gray-600">Protect your online activities with AES-256 encryption, the same standard used by governments and security experts.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="text-indigo-600 mb-4"> |
| <i class="fas fa-bolt text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Ultra-Fast Speeds</h3> |
| <p class="text-gray-600">Our global network of high-speed servers ensures buffer-free streaming and lag-free gaming.</p> |
| </div> |
| <div class="bg-white p-6 rounded-xl shadow"> |
| <div class="text-indigo-600 mb-4"> |
| <i class="fas fa-user-shield text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">No Logs Policy</h3> |
| <p class="text-gray-600">We never track, collect, or share your private data. Your online activity stays private.</p> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">miles vpn</h3> |
| <p class="text-gray-400">The fastest and most secure VPN service to protect your online privacy.</p> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Product</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Apps</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Server Locations</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Support</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-4">Legal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 miles vpn. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| const connectBtn = document.getElementById('connect-btn'); |
| const connectionStatus = document.getElementById('connection-status'); |
| const connectionCircle = document.getElementById('connection-circle'); |
| const connectionAnimation = document.getElementById('connection-animation'); |
| const serverLocation = document.getElementById('server-location'); |
| const downloadSpeed = document.getElementById('download-speed'); |
| let isConnected = false; |
| let currentLocation = ''; |
| |
| |
| const serverCards = document.querySelectorAll('.server-card'); |
| serverCards.forEach(card => { |
| card.addEventListener('click', function() { |
| serverCards.forEach(c => c.classList.remove('ring-2', 'ring-indigo-500')); |
| this.classList.add('ring-2', 'ring-indigo-500'); |
| currentLocation = this.getAttribute('data-location'); |
| |
| if (isConnected) { |
| serverLocation.textContent = currentLocation; |
| } |
| }); |
| }); |
| |
| |
| connectBtn.addEventListener('click', function() { |
| if (!currentLocation && !isConnected) { |
| alert('Please select a server location first'); |
| return; |
| } |
| |
| isConnected = !isConnected; |
| |
| if (isConnected) { |
| |
| connectionCircle.classList.remove('bg-gray-100'); |
| connectionCircle.classList.add('bg-indigo-100'); |
| connectionStatus.innerHTML = '<i class="fas fa-circle-notch fa-spin text-5xl text-indigo-600"></i><p class="mt-2 font-semibold text-indigo-600">Connecting...</p>'; |
| |
| |
| setTimeout(() => { |
| connectionStatus.innerHTML = '<i class="fas fa-check-circle text-5xl text-green-500"></i><p class="mt-2 font-semibold text-green-600">Connected</p>'; |
| connectionAnimation.classList.remove('hidden'); |
| connectionAnimation.classList.add('connection-animation'); |
| connectionAnimation.style.borderColor = 'rgba(79, 70, 229, 0.5)'; |
| connectBtn.textContent = 'Disconnect'; |
| connectBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700'); |
| connectBtn.classList.add('bg-red-600', 'hover:bg-red-700'); |
| |
| |
| serverLocation.textContent = currentLocation || 'United States'; |
| downloadSpeed.textContent = (Math.random() * 100 + 50).toFixed(2) + ' Mbps'; |
| }, 2000); |
| } else { |
| |
| connectionCircle.classList.remove('bg-indigo-100'); |
| connectionCircle.classList.add('bg-gray-100'); |
| connectionStatus.innerHTML = '<i class="fas fa-power-off text-5xl text-gray-400"></i><p class="mt-2 font-semibold text-gray-600">Disconnected</p>'; |
| connectionAnimation.classList.add('hidden'); |
| connectBtn.textContent = 'Connect'; |
| connectBtn.classList.remove('bg-red-600', 'hover:bg-red-700'); |
| connectBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700'); |
| |
| |
| serverLocation.textContent = 'Not Connected'; |
| downloadSpeed.textContent = '0 Mbps'; |
| } |
| }); |
| |
| |
| setInterval(() => { |
| if (isConnected) { |
| downloadSpeed.textContent = (Math.random() * 50 + 50).toFixed(2) + ' Mbps'; |
| } |
| }, 3000); |
| </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=Miles6048/miles" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
