<!
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>
<!-- Tailwind CSS CDN -->
<script src="[Link]"></script>
<!-- Google Fonts - Inter -->
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
<div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Login</h2>
<!-- Message Box for displaying success or error messages -->
<div id="messageBox" class="hidden p-3 mb-4 rounded-md text-center text-
sm"></div>
<form id="loginForm">
<div class="mb-6">
<label for="email" class="block text-gray-700 text-sm font-medium
mb-2">Username</label>
<input
type="text"
id="username"
name="username"
placeholder="Enter your username"
class="w-full px-4 py-2 border border-gray-300 rounded-md
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition duration-200"
required
>
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 text-sm font-
medium mb-2">Password</label>
<input
type="password"
id="password"
name="password"
placeholder="••••••••"
class="w-full px-4 py-2 border border-gray-300 rounded-md
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition duration-200"
required
>
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input
type="checkbox"
id="rememberMe"
name="rememberMe"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-
gray-300 rounded"
>
<label for="rememberMe" class="ml-2 block text-sm text-gray-
900">Remember me</label>
</div>
<!-- Removed "Forgot Password?" as it's not relevant for a single
user login -->
</div>
<button
type="submit"
class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-
blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
font-semibold text-lg transition duration-200"
>
Log In
</button>
<!-- Removed "Don't have an account? Sign Up" as new users are not
allowed -->
</form>
</div>
<script>
// Get references to the form elements and message box
const loginForm = [Link]('loginForm');
const usernameInput = [Link]('username');
const passwordInput = [Link]('password');
const messageBox = [Link]('messageBox');
// Define the allowed username and password
const ALLOWED_USERNAME = 'MWENEZIADMIN';
const ALLOWED_PASSWORD = 'mwenezi';
// Function to display messages
function showMessage(message, type) {
[Link] = message;
[Link]('hidden', 'bg-green-100', 'text-green-800',
'bg-red-100', 'text-red-800');
if (type === 'success') {
[Link]('bg-green-100', 'text-green-800');
} else if (type === 'error') {
[Link]('bg-red-100', 'text-red-800');
}
// Hide the message after 3 seconds
setTimeout(() => {
[Link]('hidden');
}, 3000);
}
// Add an event listener for form submission
[Link]('submit', function(event) {
// Prevent the default form submission behavior
[Link]();
const enteredUsername = [Link];
const enteredPassword = [Link];
// Check if the entered credentials match the allowed ones
if (enteredUsername === ALLOWED_USERNAME && enteredPassword ===
ALLOWED_PASSWORD) {
showMessage('Login successful! Welcome, MWENEZIADMIN.', 'success');
// In a real application, you would redirect the user here
[Link] = '[Link]';
} else {
showMessage('Invalid username or password. Please try again.',
'error');
[Link] = ''; // Clear the password field on incorrect
attempt
}
});
</script>
</body>
</html>