File size: 8,667 Bytes
457f5c6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 |
<!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">
<!-- Navigation -->
<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>
<!-- Progress Steps -->
<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>
<!-- Hero Section with Email Input -->
<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>
<!-- Main Email Card -->
<div class="glass-morphism rounded-2xl p-8 md:p-12 shadow-2xl max-w-md mx-auto">
<form onsubmit="submitEmail(event)">
<!-- Email Input -->
<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>
<!-- Submit Button -->
<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>
<!-- Additional Options -->
<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>
<!-- Security Features -->
<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();
// Submit Email Function
function submitEmail(event) {
event.preventDefault();
const email = document.getElementById('email').value;
// Store email in localStorage
localStorage.setItem('userEmail', email);
// Show loading state
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();
// Simulate API call
setTimeout(() => {
// Redirect to verification page
window.location.href = `index.html?email=${encodeURIComponent(email)}`;
}, 1500);
}
// Mobile Menu Toggle
function toggleMobileMenu() {
console.log('Mobile menu toggled');
}
</script>
</body>
</html> |