Накатил человеческий дизайн

2026-07-21 16:01:24 +03:00
parent 9cfc157124
commit 627371b221
35 changed files with 2415 additions and 293 deletions
@@ -0,0 +1,103 @@
+(function () {
+  function initPhoneForm() {
+    var input = document.getElementById("phone");
+    var submit = document.getElementById("han-phone-submit");
+    if (!input || !submit) return;
+
+    function formatPhone(value) {
+      var digits = value.replace(/\D/g, "");
+      if (!digits) return "";
+      if (digits.indexOf("8") === 0) digits = "7" + digits.slice(1);
+      else if (digits.indexOf("7") !== 0) digits = "7" + digits;
+      digits = digits.slice(0, 11);
+
+      var result = "+7";
+      if (digits.length > 1) result += " (" + digits.slice(1, 4);
+      if (digits.length >= 4) result += ") " + digits.slice(4, 7);
+      if (digits.length >= 7) result += " " + digits.slice(7, 9);
+      if (digits.length >= 9) result += " " + digits.slice(9, 11);
+      return result;
+    }
+
+    function updatePhone() {
+      input.value = formatPhone(input.value);
+      submit.disabled = input.value.replace(/\D/g, "").length !== 11;
+    }
+
+    input.addEventListener("input", updatePhone);
+    updatePhone();
+  }
+
+  function initOtpForm() {
+    var fields = Array.prototype.slice.call(document.querySelectorAll(".han-otp-digit"));
+    var hidden = document.getElementById("otp");
+    var submit = document.getElementById("han-otp-submit");
+    if (!fields.length || !hidden || !submit) return;
+
+    function syncOtp() {
+      fields.forEach(function (field) {
+        field.classList.toggle("han-filled", Boolean(field.value));
+      });
+      hidden.value = fields.map(function (field) { return field.value; }).join("");
+      submit.disabled = hidden.value.length !== fields.length;
+    }
+
+    fields.forEach(function (field, index) {
+      field.addEventListener("input", function () {
+        var entered = field.value.replace(/\D/g, "");
+        if (entered.length > 1) {
+          entered.slice(0, fields.length).split("").forEach(function (digit, digitIndex) {
+            fields[digitIndex].value = digit;
+          });
+          fields[Math.min(entered.length, fields.length) - 1].focus();
+        } else {
+          field.value = entered.slice(-1);
+          if (field.value && index < fields.length - 1) fields[index + 1].focus();
+        }
+        syncOtp();
+      });
+
+      field.addEventListener("keydown", function (event) {
+        if (event.key === "Backspace" && !field.value && index > 0) {
+          fields[index - 1].value = "";
+          fields[index - 1].focus();
+          syncOtp();
+        }
+        if (event.key === "ArrowLeft" && index > 0) fields[index - 1].focus();
+        if (event.key === "ArrowRight" && index < fields.length - 1) fields[index + 1].focus();
+      });
+
+      field.addEventListener("paste", function (event) {
+        event.preventDefault();
+        var pasted = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, fields.length);
+        fields.forEach(function (otpField) { otpField.value = ""; });
+        pasted.split("").forEach(function (digit, digitIndex) {
+          fields[digitIndex].value = digit;
+        });
+        if (pasted.length) fields[Math.min(pasted.length, fields.length) - 1].focus();
+        syncOtp();
+      });
+    });
+
+    syncOtp();
+
+    var seconds = 59;
+    var countdown = document.getElementById("han-resend-countdown");
+    var countdownValue = countdown && countdown.querySelector("strong");
+    var resend = document.getElementById("han-resend-button");
+    if (!countdown || !countdownValue || !resend) return;
+
+    var timer = window.setInterval(function () {
+      seconds -= 1;
+      countdownValue.textContent = "0:" + String(seconds).padStart(2, "0");
+      if (seconds <= 0) {
+        window.clearInterval(timer);
+        countdown.hidden = true;
+        resend.hidden = false;
+      }
+    }, 1000);
+  }
+
+  initPhoneForm();
+  initOtpForm();
+})();