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="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <button type="submit">Login</button>
  </form>
  <p id="error-message" style="color: red;"></p>
  <p id="attempts" style="color: red;"></p>
  <p id="timer" style="display: none;"></p>

  <script>
    const form = document.getElementById('login-form');
    const errorMessage = document.getElementById('error-message');
    const attemptsMessage = document.getElementById('attempts');
    const timerElement = document.getElementById('timer');
    
    let incorrectAttempts = 0;
    let timerInterval;

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

      const passwordInput = form.elements.password;
      const enteredPassword = passwordInput.value;

      // Correct password
      const correctPassword = '12345';

      if (enteredPassword === correctPassword) {
        errorMessage.textContent = '';
        attemptsMessage.textContent = '';
        // Perform successful login action here
      } else {
        incorrectAttempts++;

        if (incorrectAttempts >= 3) {
          errorMessage.textContent = 'Incorrect password. Please try again later.';
          attemptsMessage.textContent = '';
          timerElement.style.display = 'block';

          let remainingTime = 30;
          timerElement.textContent = `Try again in ${remainingTime} seconds`;

          timerInterval = setInterval(() => {
            remainingTime--;
            if (remainingTime <= 0) {
              clearInterval(timerInterval);
              timerElement.textContent = '';
              errorMessage.textContent = '';
              incorrectAttempts = 0;
            } else {
              timerElement.textContent = `Try again in ${remainingTime} seconds`;
            }
          }, 1000);
        } else {
          errorMessage.textContent = 'Incorrect password. Please try again.';
          attemptsMessage.textContent = `Failed attempts: ${incorrectAttempts}/3`;
        }
      }

      passwordInput.value = ''; // Clear the input field
    });
  </script>
</body>
</html>
Editor is loading...