OTP Verification Input

<form class="otp-card" method="POST" action="/api/verify-otp">
  <div class="otp-icon">🔐</div>
  <div class="otp-title">Check your email</div>
  <div class="otp-subtitle">
    We sent a 6-digit code to <strong>you@example.com</strong>
  </div>

  <div class="otp-inputs" id="otpInputs">
    <input type="text" inputmode="numeric" maxlength="1"
           class="otp-input" autocomplete="one-time-code" aria-label="Digit 1">
    <input type="text" inputmode="numeric" maxlength="1"
           class="otp-input" aria-label="Digit 2">
    <input type="text" inputmode="numeric" maxlength="1"
           class="otp-input" aria-label="Digit 3">
    <input type="text" inputmode="numeric" maxlength="1"
           class="otp-input" aria-label="Digit 4">
    <input type="text" inputmode="numeric" maxlength="1"
           class="otp-input" aria-label="Digit 5">
    <input type="text" inputmode="numeric" maxlength="1"
           class="otp-input" aria-label="Digit 6">
  </div>

  <button type="submit" class="otp-submit" id="otpSubmit" disabled>
    Verify code
  </button>

  <div class="otp-resend">
    Didn't get the code?
    <button type="button" id="otpResend" disabled>
      Resend in <span id="otpTimer">30</span>s
    </button>
  </div>
</form>

<style>
.otp-card {
  width: 100%; max-width: 400px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 1rem;
  padding: 2rem; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.otp-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 1rem;
}
.otp-title { color: #fff; font-weight: 800; font-size: 1.35rem; margin-bottom: 0.5rem; }
.otp-subtitle { color: #94a3b8; font-size: 0.85rem; line-height: 1.5; margin-bottom: 1.75rem; }
.otp-subtitle strong { color: #cbd5e1; }

.otp-inputs {
  display: flex; justify-content: center;
  gap: 0.5rem; margin-bottom: 1.5rem;
}
.otp-input {
  width: 48px; height: 56px;
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 0.6rem;
  color: #fff; font-size: 1.5rem; font-weight: 700;
  text-align: center; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.otp-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #0c1e37;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.otp-input.filled {
  border-color: #3b82f6;
  background: #0c1e37;
}

.otp-submit {
  width: 100%; background: #3b82f6; color: #fff;
  border: none; padding: 0.8rem;
  border-radius: 0.5rem; font-weight: 700;
  font-size: 0.9rem; cursor: pointer;
  font-family: inherit; transition: background 0.2s;
  margin-bottom: 1rem;
}
.otp-submit:hover { background: #2563eb; }
.otp-submit:disabled { background: #475569; cursor: not-allowed; }

.otp-resend { color: #94a3b8; font-size: 0.8rem; }
.otp-resend button {
  background: none; border: none;
  color: #60a5fa; font-weight: 600;
  cursor: pointer; font-family: inherit;
  font-size: 0.8rem; padding: 0; text-decoration: underline;
}
.otp-resend button:disabled {
  color: #475569; cursor: not-allowed; text-decoration: none;
}
</style>

<script>
const inputs = document.querySelectorAll('.otp-input');
const form = document.getElementById('otpForm');
const submit = document.getElementById('otpSubmit');

// Auto-advance + backspace
inputs.forEach((input, index) => {
  input.addEventListener('input', (e) => {
    const value = e.target.value.replace(/\D/g, '');
    e.target.value = value;

    if (value) {
      e.target.classList.add('filled');
      if (index < inputs.length - 1) {
        inputs[index + 1].focus();
      }
    } else {
      e.target.classList.remove('filled');
    }

    updateSubmitState();
  });

  input.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !e.target.value && index > 0) {
      inputs[index - 1].focus();
    }
    if (e.key === 'ArrowLeft' && index > 0) {
      inputs[index - 1].focus();
      e.preventDefault();
    }
    if (e.key === 'ArrowRight' && index < inputs.length - 1) {
      inputs[index + 1].focus();
      e.preventDefault();
    }
  });

  input.addEventListener('paste', (e) => {
    e.preventDefault();
    const pasted = (e.clipboardData || window.clipboardData).getData('text');
    const digits = pasted.replace(/\D/g, '').slice(0, inputs.length).split('');

    digits.forEach((digit, i) => {
      if (inputs[i]) {
        inputs[i].value = digit;
        inputs[i].classList.add('filled');
      }
    });

    const nextEmpty = Math.min(digits.length, inputs.length - 1);
    inputs[nextEmpty].focus();
    updateSubmitState();
  });
});

function updateSubmitState() {
  const allFilled = Array.from(inputs).every(i => i.value.length === 1);
  submit.disabled = !allFilled;
}

// Resend timer
let countdown = 30;
const timerEl = document.getElementById('otpTimer');
const resendBtn = document.getElementById('otpResend');

const timerInterval = setInterval(() => {
  countdown--;
  timerEl.textContent = countdown;

  if (countdown <= 0) {
    clearInterval(timerInterval);
    resendBtn.textContent = 'Resend code';
    resendBtn.disabled = false;
  }
}, 1000);

resendBtn.addEventListener('click', () => {
  countdown = 30;
  timerEl.textContent = countdown;
  resendBtn.disabled = true;
  resendBtn.innerHTML = 'Resend in <span id="otpTimer">30</span>s';
  // Re-start the timer here
});

// Form submit
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const code = Array.from(inputs).map(i => i.value).join('');
  console.log('Verifying code:', code);
  // Replace with: fetch('/api/verify-otp', { method: 'POST', body: ... })
});
</script>