Spaces:
Running
Running
File size: 10,068 Bytes
2d87805 4cb5aa3 fb8f5ee 2d87805 4cb5aa3 ed815fb 6c562d8 ed815fb 6c562d8 ed815fb 6c562d8 ed815fb 6c562d8 ed815fb 6c562d8 4cb5aa3 6c562d8 ed815fb 6c562d8 4cb5aa3 ed815fb 6c562d8 ed815fb 6c562d8 ed815fb 6c562d8 ed815fb 6c562d8 fb8f5ee 4cb5aa3 2d87805 4cb5aa3 ed815fb fb8f5ee ed815fb fb8f5ee ed815fb fb8f5ee 824228c 4cb5aa3 fb8f5ee 6c562d8 ed815fb 6c562d8 fb8f5ee 6c562d8 fb8f5ee 6c562d8 fb8f5ee 824228c fb8f5ee 6c562d8 fb8f5ee 6c562d8 4cb5aa3 fb8f5ee ed815fb fb8f5ee 4cb5aa3 2d87805 | 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 193 194 195 196 197 198 199 200 201 | <!DOCTYPE html>
<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> |