Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Login Page</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <link rel="stylesheet" href="styles.css"> <!-- Link to the CSS file --> | |
| </head> | |
| <body> | |
| <div class="overlay p-8 rounded-lg shadow-lg"> | |
| <div class="loader hidden"></div> <!-- Loader div --> | |
| <!-- Login Form --> | |
| <div id="loginForm" class="form-section"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl sm:text-3xl font-semibold text-gray-200">Login</h2> | |
| <button class="text-gray-300 hover:text-gray-500" onclick="closeForm()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-400 mb-6">Enter your credentials to log in.</p> | |
| <form id="loginFormSubmit"> | |
| <div class="mb-6"> | |
| <input id="username" type="text" placeholder="Username" class="w-full px-4 py-3 border border-gray-500 bg-black text-white rounded-lg focus:outline-none focus:border-white" required> | |
| </div> | |
| <div class="mb-6"> | |
| <input id="password" type="password" placeholder="Password" class="w-full px-4 py-3 border border-gray-500 bg-black text-white rounded-lg focus:outline-none focus:border-white" required> | |
| </div> | |
| <button type="submit" class="w-full bg-white text-black py-3 rounded-lg hover:bg-gray-200 transition duration-300">Log In</button> | |
| </form> | |
| <p id="errorMessage" class="text-red-500 text-sm hidden mt-6"></p> | |
| <p class="mt-4"> | |
| <a href="#" onclick="showSection('signupForm')" class="text-blue-500 hover:underline">Sign Up</a> | | |
| <a href="#" onclick="showSection('forgotPasswordForm')" class="text-blue-500 hover:underline">Forgot Password?</a> | |
| </p> | |
| </div> | |
| <!-- Signup Form --> | |
| <div id="signupForm" class="form-section hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl sm:text-3xl font-semibold text-gray-200">Sign Up</h2> | |
| <button class="text-gray-300 hover:text-gray-500" onclick="closeForm()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="signupFormSubmit"> | |
| <div class="mb-6"> | |
| <input id="signupUsername" type="text" placeholder="Username" class="w-full px-4 py-3 border border-gray-500 bg-black text-white rounded-lg focus:outline-none focus:border-white" required> | |
| </div> | |
| <div class="mb-6"> | |
| <input id="signupEmail" type="email" placeholder="Email" class="w-full px-4 py-3 border border-gray-500 bg-black text-white rounded-lg focus:outline-none focus:border-white" required> | |
| </div> | |
| <div class="mb-6"> | |
| <input id="signupPassword" type="password" placeholder="Password" class="w-full px-4 py-3 border border-gray-500 bg-black text-white rounded-lg focus:outline-none focus:border-white" required> | |
| </div> | |
| <button type="submit" class="w-full bg-white text-black py-3 rounded-lg hover:bg-gray-200 transition duration-300">Sign Up</button> | |
| </form> | |
| <p id="signupErrorMessage" class="text-red-500 text-sm hidden mt-6"></p> | |
| <p class="mt-4"> | |
| <a href="#" onclick="showSection('loginForm')" class="text-blue-500 hover:underline">Already have an account? Log In</a> | |
| </p> | |
| </div> | |
| <!-- Forgot Password Form --> | |
| <div id="forgotPasswordForm" class="form-section hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl sm:text-3xl font-semibold text-gray-200">Forgot Password</h2> | |
| <button class="text-gray-300 hover:text-gray-500" onclick="closeForm()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="forgotPasswordFormSubmit"> | |
| <div class="mb-6"> | |
| <input id="forgotEmail" type="email" placeholder="Email" class="w-full px-4 py-3 border border-gray-500 bg-black text-white rounded-lg focus:outline-none focus:border-white" required> | |
| </div> | |
| <button type="submit" class="w-full bg-white text-black py-3 rounded-lg hover:bg-gray-200 transition duration-300">Reset Password</button> | |
| </form> | |
| <p id="forgotPasswordErrorMessage" class="text-red-500 text-sm hidden mt-6"></p> | |
| <p class="mt-4"> | |
| <a href="#" onclick="showSection('loginForm')" class="text-blue-500 hover:underline">Back to Log In</a> | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| // Function to show a specific section (login, signup, or forgot password) | |
| async function showSection(sectionId) { | |
| // Show the loader | |
| document.querySelector('.loader').classList.remove('hidden'); | |
| // Hide all sections | |
| document.querySelectorAll('.form-section').forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| // Simulate loading time (you can remove this timeout in production) | |
| await new Promise(resolve => setTimeout(resolve, 500)); // Adjust duration as needed | |
| // Show the selected section | |
| document.getElementById(sectionId).classList.remove('hidden'); | |
| // Hide the loader | |
| document.querySelector('.loader').classList.add('hidden'); | |
| } | |
| // Function to handle login submission | |
| // Function to handle login submission | |
| async function submitLogin(event) { | |
| event.preventDefault(); | |
| const username = document.getElementById('username').value; | |
| const password = document.getElementById('password').value; | |
| // Show the loader | |
| document.querySelector('.loader').classList.remove('hidden'); | |
| // Simulated login request | |
| // Replace with actual API call | |
| const success = await fakeApiCall(username, password); | |
| if (success) { | |
| alert('Login successful!'); | |
| // Here you might redirect to a different page or perform another action | |
| } else { | |
| // Handle error message for login | |
| document.getElementById('errorMessage').textContent = 'Invalid username or password.'; | |
| document.getElementById('errorMessage').classList.remove('hidden'); | |
| } | |
| // Hide the loader after processing | |
| document.querySelector('.loader').classList.add('hidden'); | |
| } | |
| // Function to handle signup submission | |
| async function submitSignup(event) { | |
| event.preventDefault(); | |
| const username = document.getElementById('signupUsername').value; | |
| const email = document.getElementById('signupEmail').value; | |
| const password = document.getElementById('signupPassword').value; | |
| // Show the loader | |
| document.querySelector('.loader').classList.remove('hidden'); | |
| // Simulated signup request | |
| // Replace with actual API call | |
| const success = await fakeApiCall(username, email, password); | |
| if (success) { | |
| alert('Signup successful! Please log in.'); | |
| showSection('loginForm'); | |
| } else { | |
| document.getElementById('signupErrorMessage').textContent = 'Signup failed. Please try again.'; | |
| document.getElementById('signupErrorMessage').classList.remove('hidden'); | |
| } | |
| // Hide the loader after processing | |
| document.querySelector('.loader').classList.add('hidden'); | |
| } | |
| // Function to handle forgot password submission | |
| async function submitForgotPassword(event) { | |
| event.preventDefault(); | |
| const email = document.getElementById('forgotEmail').value; | |
| // Show the loader | |
| document.querySelector('.loader').classList.remove('hidden'); | |
| // Simulated password reset request | |
| // Replace with actual API call | |
| const success = await fakeApiCall(email); | |
| if (success) { | |
| alert('Password reset link sent to your email.'); | |
| showSection('loginForm'); | |
| } else { | |
| document.getElementById('forgotPasswordErrorMessage').textContent = 'Error in sending reset link. Please try again.'; | |
| document.getElementById('forgotPasswordErrorMessage').classList.remove('hidden'); | |
| } | |
| // Hide the loader after processing | |
| document.querySelector('.loader').classList.add('hidden'); | |
| } | |
| // Simulated API call function (for demonstration) | |
| async function fakeApiCall(...params) { | |
| // Simulate network delay | |
| await new Promise(resolve => setTimeout(resolve, 1000)); | |
| // For demo purposes, just return true | |
| return true; // Replace with actual response handling | |
| } | |
| // Event listeners for form submissions | |
| document.getElementById('loginFormSubmit').addEventListener('submit', submitLogin); | |
| document.getElementById('signupFormSubmit').addEventListener('submit', submitSignup); | |
| document.getElementById('forgotPasswordFormSubmit').addEventListener('submit', submitForgotPassword); | |
| // Function to close the form | |
| function closeForm() { | |
| document.querySelector('.overlay').style.display = 'none'; | |
| } | |
| </script> | |
| </body> | |
| </html> |