| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VerifyNow Pro - Email Verification Service</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
| body { font-family: 'Inter', sans-serif; } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .glass-morphism { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .input-digit { |
| transition: none; |
| } |
| |
| .input-digit:focus { |
| box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); |
| } |
| |
| .pulse-dot { |
| position: relative; |
| } |
| |
| .pulse-dot::before { |
| content: ''; |
| position: absolute; |
| inset: -4px; |
| border-radius: 50%; |
| background: inherit; |
| opacity: 0.3; |
| } |
| </style> |
| </head> |
| <body class="gradient-bg min-h-screen"> |
| |
| <nav class="glass-morphism px-6 py-4"> |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center"> |
| <i data-feather="shield" class="w-6 h-6 text-purple-600"></i> |
| </div> |
| <span class="text-white font-bold text-xl">VerifyNow Pro</span> |
| </div> |
| <div class="hidden md:flex items-center space-x-6"> |
| <a href="index.html" class="text-white/80 hover:text-white transition">Home</a> |
| <a href="#" class="text-white/80 hover:text-white transition">Features</a> |
| <a href="#" class="text-white/80 hover:text-white transition">Pricing</a> |
| <a href="#" class="text-white/80 hover:text-white transition">Docs</a> |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-purple-50 transition"> |
| Sign In |
| </button> |
| </div> |
| <button class="md:hidden text-white" onclick="toggleMobileMenu()"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </nav> |
| |
| <div class="max-w-4xl mx-auto px-6 pt-8"> |
| <div class="flex items-center justify-center space-x-4 mb-12"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center"> |
| <span class="text-white font-semibold">1</span> |
| </div> |
| <span class="text-white ml-2">Email</span> |
| </div> |
| <div class="w-16 h-0.5 bg-white/30"></div> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center"> |
| <span class="text-purple-600 font-semibold">2</span> |
| </div> |
| <span class="text-white ml-2 font-semibold">Verify</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-4xl mx-auto px-6 pb-16"> |
| <div class="text-center mb-12"> |
| <h1 class="text-5xl md:text-6xl font-bold text-white mb-6"> |
| Verify Your Email |
| </h1> |
| <p class="text-xl text-white/80"> |
| Enter the 6-digit verification code sent to your email |
| </p> |
| </div> |
|
|
| |
| <div class="glass-morphism rounded-2xl p-8 md:p-12 shadow-2xl"> |
| |
| <div class="flex items-center justify-center mb-8"> |
| <div class="bg-white/10 rounded-full px-4 py-2 flex items-center space-x-2"> |
| <i data-feather="mail" class="w-5 h-5 text-white"></i> |
| <span class="text-white font-medium" id="userEmail">user@example.com</span> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex justify-center space-x-3" id="otpContainer"> |
| <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 0)"> |
| <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 1)"> |
| <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 2)"> |
| <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 3)"> |
| <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 4)"> |
| <input type="text" maxlength="1" class="input-digit w-14 h-14 text-center text-2xl font-bold bg-white/20 border-2 border-white/30 rounded-lg text-white focus:outline-none focus:border-white" onkeyup="handleOTPInput(event, 5)"> |
| </div> |
| </div> |
|
|
| |
| <div class="text-center mb-6"> |
| <p class="text-white/70 text-sm"> |
| Code expires in <span id="timer" class="font-bold text-white">05:00</span> |
| </p> |
| </div> |
| |
| <div class="space-y-4"> |
| <button onclick="verifyCode()" class="w-full bg-white text-purple-600 font-semibold py-3 rounded-lg hover:bg-purple-50 transition"> |
| Verify Code |
| </button> |
| <button onclick="resendCode()" class="w-full bg-white/10 text-white font-semibold py-3 rounded-lg hover:bg-white/20 transition"> |
| Resend Code |
| </button> |
| </div> |
| |
| <div class="mt-8 pt-8 border-t border-white/20"> |
| <p class="text-center text-white/70 text-sm mb-4">Or verify using:</p> |
| <div class="flex justify-center space-x-4"> |
| <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition"> |
| <i data-feather="smartphone" class="w-6 h-6 text-white"></i> |
| </button> |
| <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition"> |
| <i data-feather="message-circle" class="w-6 h-6 text-white"></i> |
| </button> |
| <button class="bg-white/10 p-3 rounded-lg hover:bg-white/20 transition"> |
| <i data-feather="key" class="w-6 h-6 text-white"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12"> |
| <div class="glass-morphism rounded-lg p-6 text-center"> |
| <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot"> |
| <i data-feather="check" class="w-6 h-6 text-white"></i> |
| </div> |
| <h3 class="text-white font-semibold mb-2">Bank-Level Security</h3> |
| <p class="text-white/70 text-sm">256-bit encryption protects your data</p> |
| </div> |
| <div class="glass-morphism rounded-lg p-6 text-center"> |
| <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot"> |
| <i data-feather="zap" class="w-6 h-6 text-white"></i> |
| </div> |
| <h3 class="text-white font-semibold mb-2">Instant Delivery</h3> |
| <p class="text-white/70 text-sm">Receive codes in seconds</p> |
| </div> |
| <div class="glass-morphism rounded-lg p-6 text-center"> |
| <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-3 pulse-dot"> |
| <i data-feather="shield" class="w-6 h-6 text-white"></i> |
| </div> |
| <h3 class="text-white font-semibold mb-2">Multi-Factor Auth</h3> |
| <p class="text-white/70 text-sm">Multiple verification methods</p> |
| </div> |
| </div> |
| </div> |
| |
| <div id="successModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50"> |
| <div class="bg-white rounded-2xl p-8 max-w-md mx-4" id="modalContent"> |
| <div class="text-center"> |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="check-circle" class="w-12 h-12 text-green-500"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Verification Successful!</h2> |
| <p class="text-gray-600 mb-6">Your account has been successfully verified.</p> |
| <button onclick="closeModal()" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition"> |
| Continue to Dashboard |
| </button> |
| </div> |
| </div> |
| </div> |
| <script> |
| feather.replace(); |
| |
| function handleOTPInput(event, index) { |
| const input = event.target; |
| const value = input.value; |
| |
| if (value.length === 1) { |
| if (index < 5) { |
| const nextInput = input.parentElement.children[index + 1]; |
| nextInput.focus(); |
| } |
| } else if (event.key === 'Backspace' && value.length === 0 && index > 0) { |
| const prevInput = input.parentElement.children[index - 1]; |
| prevInput.focus(); |
| } |
| } |
| |
| let timeLeft = 300; |
| const timerElement = document.getElementById('timer'); |
| |
| const timer = setInterval(() => { |
| const minutes = Math.floor(timeLeft / 60); |
| const seconds = timeLeft % 60; |
| timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
| |
| if (timeLeft <= 60) { |
| timerElement.classList.add('text-red-300'); |
| } |
| |
| if (timeLeft === 0) { |
| clearInterval(timer); |
| timerElement.textContent = 'Expired'; |
| timerElement.classList.add('text-red-400'); |
| } |
| |
| timeLeft--; |
| }, 1000); |
| |
| |
| function verifyCode() { |
| const inputs = document.querySelectorAll('#otpContainer input'); |
| let code = ''; |
| inputs.forEach(input => code += input.value); |
| |
| if (code.length !== 6) { |
| showError('Please enter all 6 digits'); |
| return; |
| } |
| |
| |
| const button = event.target; |
| button.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin inline mr-2"></i>Verifying...'; |
| button.disabled = true; |
| feather.replace(); |
| |
| setTimeout(() => { |
| button.innerHTML = 'Verify Code'; |
| button.disabled = false; |
| showSuccessModal(); |
| }, 1500); |
| } |
| |
| |
| function resendCode() { |
| const button = event.target; |
| button.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin inline mr-2"></i>Sending...'; |
| button.disabled = true; |
| feather.replace(); |
| |
| setTimeout(() => { |
| button.innerHTML = 'Resend Code'; |
| button.disabled = false; |
| |
| |
| clearInterval(timer); |
| timeLeft = 300; |
| timerElement.textContent = '05:00'; |
| timerElement.classList.remove('text-red-300', 'text-red-400'); |
| |
| |
| document.querySelectorAll('#otpContainer input').forEach(input => { |
| input.value = ''; |
| }); |
| document.querySelector('#otpContainer input').focus(); |
| |
| |
| showNotification('New code sent to your email'); |
| }, 1500); |
| } |
| |
| function showSuccessModal() { |
| const modal = document.getElementById('successModal'); |
| modal.classList.remove('hidden'); |
| modal.classList.add('flex'); |
| feather.replace(); |
| } |
| |
| |
| function closeModal() { |
| const modal = document.getElementById('successModal'); |
| modal.classList.add('hidden'); |
| modal.classList.remove('flex'); |
| } |
| |
| function showError(message) { |
| const errorDiv = document.createElement('div'); |
| errorDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2'; |
| errorDiv.innerHTML = `<i data-feather="alert-circle" class="w-5 h-5"></i><span>${message}</span>`; |
| document.body.appendChild(errorDiv); |
| feather.replace(); |
| |
| setTimeout(() => { |
| errorDiv.remove(); |
| }, 3000); |
| } |
| |
| |
| function showNotification(message) { |
| const notifDiv = document.createElement('div'); |
| notifDiv.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center space-x-2'; |
| notifDiv.innerHTML = `<i data-feather="check" class="w-5 h-5"></i><span>${message}</span>`; |
| document.body.appendChild(notifDiv); |
| feather.replace(); |
| |
| setTimeout(() => { |
| notifDiv.remove(); |
| }, 3000); |
| } |
| |
| function toggleMobileMenu() { |
| |
| console.log('Mobile menu toggled'); |
| } |
| |
| |
| window.addEventListener('load', () => { |
| const urlParams = new URLSearchParams(window.location.search); |
| const email = urlParams.get('email') || localStorage.getItem('userEmail') || 'user@example.com'; |
| document.getElementById('userEmail').textContent = email; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
