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