YELLOW HIGHLIGHTED IS THE COMMENTS:
SINGLE HTML FILE ONLY!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Defines the character encoding and viewport settings for responsive design -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the page, displayed on the browser tab -->
<title>Admin Login and Registration Form</title>
<!-- Link to the external CSS stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Container for the admin logo -->
<div class="logo-container">
<!-- Admin logo image; the "alt" text will show if the image fails to load -->
<img src="logo.png" alt="Admin Logo" class="admin-logo">
</div>
<!-- Main container for the login and registration forms -->
<div class="form-container">
<!-- Button container for toggling between Login and Register forms -->
<div class="button-container">
<!-- Button to show the Login form when clicked -->
<button id="login-button" onclick="showLogin()">Admin Login</button>
<!-- Button to show the Registration form when clicked -->
<button id="register-button" onclick="showSignUp()">Register as Admin</button>
</div>
<!-- Admin Login Form -->
<form id="login-form" class="form" onsubmit="return loginUser(event)">
<!-- Username input for the login form -->
<input type="text" id="login-username" placeholder="Username" required>
<!-- Password input for the login form -->
<input type="password" id="login-password" placeholder="Password" required>
<!-- Submit button for the login form -->
<button type="submit">Login</button>
<!-- Error message for the login form (shown if login fails) -->
<p id="login-error" class="error-message"></p>
</form>
<!-- Admin Registration Form, hidden by default -->
<form id="signup-form" class="form" style="display: none;" onsubmit="return signUpUser(event)">
<!-- Username input for the signup form -->
<input type="text" id="signup-username" placeholder="Username" required>
<!-- Email input for the signup form -->
<input type="email" id="signup-email" placeholder="Email" required>
<!-- Password input for the signup form -->
<input type="password" id="signup-password" placeholder="Password" required>
<!-- Confirm password input for the signup form -->
<input type="password" id="signup-confirm-password" placeholder="Confirm Password" required>
<!-- Submit button for the signup form -->
<button type="submit">Register</button>
<!-- Error message for the signup form (shown if signup fails) -->
<p id="signup-error" class="error-message"></p>
</form>
</div>
<!-- Link to the external JavaScript file -->
<script src="script.js"></script>
</body>
</html>
