| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>VerifyNow Pro - Enter Email</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> |
| <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); |
| } |
| |
| .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="step1.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 rounded-full flex items-center justify-center"> |
| <span class="text-purple-600 font-semibold">1</span> |
| </div> |
| <span class="text-white ml-2 font-semibold">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/20 rounded-full flex items-center justify-center"> |
| <span class="text-white font-semibold">2</span> |
| </div> |
| <span class="text-white ml-2">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"> |
| Enter Your Email |
| </h1> |
| <p class="text-xl text-white/80"> |
| We'll send you a verification code to secure your account |
| </p> |
| </div> |
|
|
| |
| <div class="glass-morphism rounded-2xl p-8 md:p-12 shadow-2xl max-w-md mx-auto"> |
| <form onsubmit="submitEmail(event)"> |
| |
| <div class="mb-6"> |
| <label for="email" class="block text-white font-medium mb-2">Email Address</label> |
| <div class="relative"> |
| <input |
| type="email" |
| id="email" |
| name="email" |
| required |
| placeholder="Enter your email" |
| class="w-full px-4 py-3 pl-12 bg-white/20 border-2 border-white/30 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white" |
| > |
| <i data-feather="mail" class="w-5 h-5 text-white/70 absolute left-4 top-1/2 transform -translate-y-1/2"></i> |
| </div> |
| </div> |
|
|
| |
| <button type="submit" class="w-full bg-white text-purple-600 font-semibold py-3 rounded-lg hover:bg-purple-50 transition"> |
| Send Verification Code |
| </button> |
| </form> |
|
|
| |
| <div class="mt-8 pt-8 border-t border-white/20"> |
| <p class="text-center text-white/70 text-sm mb-4">Or continue with:</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> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| function submitEmail(event) { |
| event.preventDefault(); |
| const email = document.getElementById('email').value; |
| |
| |
| localStorage.setItem('userEmail', email); |
| |
| |
| const button = event.target.querySelector('button[type="submit"]'); |
| const originalText = button.innerHTML; |
| button.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin inline mr-2"></i>Sending...'; |
| button.disabled = true; |
| feather.replace(); |
| |
| |
| setTimeout(() => { |
| |
| window.location.href = `index.html?email=${encodeURIComponent(email)}`; |
| }, 1500); |
| } |
| |
| |
| function toggleMobileMenu() { |
| console.log('Mobile menu toggled'); |
| } |
| </script> |
| </body> |
| </html> |
