<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive OTP Input</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1e1e2e;
margin: 0;
}
.container {
text-align: center;
background: #2a2a40;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
h2 {
color: #c792ea;
margin-bottom: 20px;
}
.otp-input {
display: flex;
justify-content: center;
gap: 10px;
}
.otp-input input {
width: 50px;
height: 50px;
text-align: center;
font-size: 1.5em;
border: 2px solid #444;
border-radius: 5px;
outline: none;
transition: all 0.3s ease;
color: #fff;
background: #1e1e2e;
}
.otp-input input:focus {
border-color: #c792ea;
box-shadow: 0 0 10px #c792ea;
}
.otp-input input.correct {
border-color: #4caf50;
box-shadow: 0 0 10px #4caf50;
}
.otp-input input.error {
border-color: #ff4c4c;
box-shadow: 0 0 10px #ff4c4c;
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
}
.message {
margin-top: 15px;
font-size: 1em;
color: #fff;
}
.message.success {
color: #4caf50;
}
.message.error {
color: #ff4c4c;
}
</style>
</head>
<body>
<div class="container">
<h2>Enter OTP</h2>
<div class="otp-input">
<input type="text" maxlength="1" id="digit1">
<input type="text" maxlength="1" id="digit2">
<input type="text" maxlength="1" id="digit3">
<input type="text" maxlength="1" id="digit4">
</div>
<div class="message" id="message"></div>
</div>
<script>
const inputs = document.querySelectorAll('.otp-input input');
const message = document.getElementById('message');
const correctOTP = '0007';
inputs.forEach((input, index) => {
input.addEventListener('input', () => {
if (input.value.length === 1 && index < inputs.length - 1) {
inputs[index + 1].focus();
}
validateOTP();
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && index > 0 && !input.value) {
inputs[index - 1].focus();
}
});
});
function validateOTP() {
const otp = Array.from(inputs).map(input => input.value).join('');
if (otp.length === 4) {
if (otp === correctOTP) {
inputs.forEach(input => input.classList.add('correct'));
message.textContent = '✅ OTP Correct!';
message.className = 'message success';
} else {
inputs.forEach(input => input.classList.add('error'));
message.textContent = '❌ Invalid OTP!';
message.className = 'message error';
setTimeout(() => {
inputs.forEach(input => input.classList.remove('error'));
message.textContent = '';
}, 1000);
}
}
}
</script>
</body>
</html>
Speedy emails, satisfied customers
Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)