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