Spaces:

MikeyD333
/

undefined

Running

File size: 15,984 Bytes

<!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">
    <!-- 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="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>
    <!-- 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/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>

    <!-- Hero Section with Verification -->
    <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>

        <!-- Main Verification Card -->
        <div class="glass-morphism rounded-2xl p-8 md:p-12 shadow-2xl">
            <!-- Email Display -->
            <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>
<!-- 6-Digit Input Fields -->
            <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>

            <!-- Timer -->
            <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>
            <!-- Action Buttons -->
            <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>
<!-- Alternative Methods -->
            <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>

        <!-- 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>
    <!-- Success Modal (Hidden by default) -->
    <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();
        // OTP Input Handling
        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();
            }
        }
// Timer Countdown
        let timeLeft = 300; // 5 minutes in seconds
        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);

        // Verify Code Function
        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;
            }
            
            // Simulate verification
            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);
        }

        // Resend Code Function
        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;
                
                // Reset timer
                clearInterval(timer);
                timeLeft = 300;
                timerElement.textContent = '05:00';
                timerElement.classList.remove('text-red-300', 'text-red-400');
                
                // Clear inputs
                document.querySelectorAll('#otpContainer input').forEach(input => {
                    input.value = '';
                });
                document.querySelector('#otpContainer input').focus();
                
                // Show notification
                showNotification('New code sent to your email');
            }, 1500);
        }
        // Show Success Modal
        function showSuccessModal() {
            const modal = document.getElementById('successModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            feather.replace();
        }

        // Close Modal
        function closeModal() {
            const modal = document.getElementById('successModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
        // Show Error Message
        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);
        }

        // Show Notification
        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);
        }
        // Mobile Menu Toggle
        function toggleMobileMenu() {
            // Implementation for mobile menu
            console.log('Mobile menu toggled');
        }

        // Get email from URL parameter or localStorage
        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>