Apt01/constructolearn-nexus
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Forgot Password</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9</head>10<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">11 <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md">12 <div class="text-center mb-8">13 <h2 class="text-2xl font-bold text-blue-900">Reset Your Password</h2>14 <p class="text-gray-600 mt-2">Enter your email to receive OTP code</p>15 </div>16 17 <form id="forgotPasswordForm" class="space-y-6">18 <div>19 <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>20 <input type="email" id="email" required 21 class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">22 </div>23 24 <button type="submit" 25 class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">26 Send OTP27 </button>28 </form>29 30 <div id="otpSection" class="hidden mt-6 space-y-6">31 <div>32 <label for="otp" class="block text-sm font-medium text-gray-700 mb-1">Enter OTP Code</label>33 <input type="text" id="otp" required 34 class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">35 </div>36 37 <div>38 <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">New Password</label>39 <input type="password" id="newPassword" required 40 class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">41 </div>42 43 <button id="resetPasswordBtn" 44 class="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">45 Reset Password46 </button>47 </div>48 49 <div class="text-center mt-6">50 <a href="/login" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Back to Login</a>51 </div>52 </div>53 54 <script>55 document.getElementById('forgotPasswordForm').addEventListener('submit', function(e) {56 e.preventDefault();57 const email = document.getElementById('email').value;58 59 // In a real app, you would call your backend API here60 console.log('OTP sent to:', email);61 62 // Show OTP section (simulating sending OTP)63 document.getElementById('otpSection').classList.remove('hidden');64 document.getElementById('forgotPasswordForm').classList.add('hidden');65 });66 67 document.getElementById('resetPasswordBtn').addEventListener('click', function() {68 const otp = document.getElementById('otp').value;69 const newPassword = document.getElementById('newPassword').value;70 71 // In a real app, verify OTP and update password72 console.log('Resetting password with OTP:', otp, 'New password:', newPassword);73 74 alert('Password reset successfully! Redirecting to login...');75 window.location.href = '/login';76 });77 </script>78</body>79</html>