Untitled

<!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>
</head>
<body>
  <h1>Login</h1>
  <form id="login-form">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required><br>
    <button type="submit">Login</button>
  </form>
  <p id="login-message"></p>

  <script>
    const form = document.getElementById('login-form');
    const loginMessage = document.getElementById('login-message');

    form.addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent the form from submitting

      const usernameInput = form.elements.username;
      const passwordInput = form.elements.password;
      const enteredUsername = usernameInput.value;
      const enteredPassword = passwordInput.value;

      // Predefined username and password
      const correctUsername = 'yourusername';
      const correctPassword = '738474';

      if (enteredUsername === correctUsername && enteredPassword === correctPassword) {
        loginMessage.textContent = 'Login successful!';
        loginMessage.style.color = 'green';
        // You can redirect the user to another page here if needed
      } else {
        loginMessage.textContent = 'Incorrect username or password. Please try again.';
        loginMessage.style.color = 'red';
        usernameInput.value = ''; // Clear the input fields
        passwordInput.value = '';
      }
    });
  </script>
</body>
</html>
Editor is loading...