index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>School ERP Login</title>
  <style>
    /* Add your CSS styles here */
  </style>
</head>
<body>
  <form id="loginForm" action="your_validation_script.php" method="post">
    <h2>School ERP Login</h2>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required>
    <input type="submit" value="Login">
  </form>

  <script>
    document.getElementById('loginForm').addEventListener('submit', function(event) {
      // Simulating successful login
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      // Perform validation and authentication here using AJAX or other means

      // For demonstration purposes, redirect to personal details page if login is successful
      if (username === 'student' && password === 'password') {
        event.preventDefault(); // Prevent the form from submitting
        window.location.href = 'details.html'; // Redirect to personal details page
      } else {
        // Handle incorrect login credentials
        alert('Incorrect username or password. Please try again.');
      }
    });
  </script>
</body>
</html>