Untitled
plain_text
23 days ago
2.4 kB
2
Indexable
Never
<!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>