Одноразовый код (OTP)

Поле ввода шестизначного кода подтверждения

Живой предпросмотр

Промпт

Создайте экран подтверждения OTP с помощью Tailwind CSS. По центру — карточка с сообщением о том, что на email отправлен 6-значный код. Покажите шесть отдельных квадратных полей (size-12, text-center, крупный шрифт) в ряд, активное состояние с фокус-кольцом, кнопку «Подтвердить» и приглушённую строку «Не получили? Повторно через 0:30». Всё чисто и по центру. Затем добавьте JavaScript для поведения, которое ожидается от настоящего поля с кодом: переход к следующему полю при вводе цифры, возврат на шаг назад по Backspace из пустого поля, перемещение стрелками, распределение вставленного 6-значного кода сразу по всем шести полям, удаление всего, кроме цифр; кнопка «Подтвердить» остаётся неактивной, пока не заполнены все шесть полей, а строка повторной отправки идёт от 0:30 до активной кнопки «Отправить код повторно».

Вставьте его в Claude, Cursor, v0 или любой AI-инструмент для кодинга.

Исходный код

Tailwind

<div class="flex min-h-screen items-center justify-center bg-neutral-100 p-6">
  <div class="w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-8 text-center shadow-sm">
    <h1 class="text-lg font-semibold text-neutral-900">Check your email</h1>
    <p class="mt-1 text-sm text-neutral-500">We sent a 6-digit code to you@example.com</p>
    <div id="otp" class="mt-6 flex justify-center gap-2">
      <input maxlength="1" class="size-12 rounded-xl border border-neutral-200 text-center text-lg font-semibold outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <input maxlength="1" class="size-12 rounded-xl border border-neutral-200 text-center text-lg font-semibold outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <input maxlength="1" class="size-12 rounded-xl border border-neutral-200 text-center text-lg font-semibold outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <input maxlength="1" class="size-12 rounded-xl border border-neutral-200 text-center text-lg font-semibold outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <input maxlength="1" class="size-12 rounded-xl border border-neutral-200 text-center text-lg font-semibold outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <input maxlength="1" class="size-12 rounded-xl border border-neutral-200 text-center text-lg font-semibold outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
    </div>
    <button id="verify" disabled class="mt-6 w-full cursor-not-allowed rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white opacity-40 transition hover:bg-neutral-800">Verify</button>
    <p id="resend" class="mt-4 text-xs text-neutral-400">Didn't get it? Resend in 0:30</p>
  </div>
</div>

Исходный код

JavaScript

var boxes = [].slice.call(document.querySelectorAll("#otp input"));
var verify = document.getElementById("verify");
var resend = document.getElementById("resend");

function sync() {
  var complete = boxes.every(function (b) { return b.value !== ""; });
  verify.disabled = !complete;
  verify.classList.toggle("opacity-40", !complete);
  verify.classList.toggle("cursor-not-allowed", !complete);
}

boxes.forEach(function (box, i) {
  box.setAttribute("inputmode", "numeric");
  box.setAttribute("autocomplete", i === 0 ? "one-time-code" : "off");

  box.addEventListener("input", function () {
    box.value = box.value.replace(/\D/g, "").slice(0, 1);
    if (box.value && i < boxes.length - 1) boxes[i + 1].focus();
    sync();
  });

  box.addEventListener("keydown", function (e) {
    if (e.key === "Backspace" && !box.value && i > 0) boxes[i - 1].focus();
    if (e.key === "ArrowLeft" && i > 0) boxes[i - 1].focus();
    if (e.key === "ArrowRight" && i < boxes.length - 1) boxes[i + 1].focus();
  });

  // A pasted code should fill the whole row, not just the box under the cursor.
  box.addEventListener("paste", function (e) {
    e.preventDefault();
    var digits = (e.clipboardData || window.clipboardData).getData("text").replace(/\D/g, "");
    if (!digits) return;
    for (var k = 0; k < boxes.length; k++) boxes[k].value = digits.charAt(i + k) || boxes[k].value;
    boxes[Math.min(i + digits.length, boxes.length - 1)].focus();
    sync();
  });
});

var left = 30;
var tick = setInterval(function () {
  left -= 1;
  if (left > 0) {
    resend.textContent = "Didn't get it? Resend in 0:" + (left < 10 ? "0" + left : left);
    return;
  }
  clearInterval(tick);
  resend.textContent = "Didn't get it? ";
  var again = document.createElement("button");
  again.className = "font-medium text-neutral-900 underline";
  again.textContent = "Resend code";
  again.addEventListener("click", function () {
    boxes.forEach(function (b) { b.value = ""; });
    boxes[0].focus();
    sync();
  });
  resend.appendChild(again);
}, 1000);

sync();

Промт и исходный код для создания страницы с одноразовым OTP кодом

Эта страница — интерактивный референс для разработчиков и дизайнеров, которые создают формы авторизации с подтверждением по одноразовому коду. Она объединяет готовый промпт для AI-инструментов и живой предпросмотр результата, чтобы вы могли сразу оценить внешний вид и поведение будущего компонента.

Основные возможности:

— Живой предпросмотр — форма OTP отображается прямо на странице. Переключайте режимы «Полный экран», «Планшет» и «Мобильный», чтобы увидеть, как вёрстка ведёт себя на разных устройствах.

— Двуязычный промпт — текст задания доступен на русском и английском языках. Переключайте язык кнопками над промптом, чтобы скопировать нужный вариант.

— Готовое поведение — в предпросмотре уже работает JavaScript, который реализует автопереход между полями при вводе цифр, возврат по Backspace, перемещение стрелками, вставку всего кода из буфера обмена, блокировку кнопки «Подтвердить» до заполнения всех шести полей и обратный отсчёт повторной отправки.

— Минималистичный дизайн — страница оформлена строго в чёрно-бело-серой гамме с белым фоном, что делает акцент на содержании и не отвлекает от компонента.

Чтобы воспользоваться страницей, выберите язык промпта, скопируйте текст и вставьте его в ваш AI-инструмент (Claude, Cursor, v0 и другие). Если хотите сразу получить готовую разметку и скрипт, ориентируйтесь на живой предпросмотр — он полностью повторяет то, что сгенерирует модель по этому промпту.