| | <!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> |
