Init front

2025-12-12 20:22:50 +05:00
parent a79c26085b
commit 55c42a115d
26 changed files with 8222 additions and 0 deletions
--- a/app/reg/page.jsx
+++ b/app/reg/page.jsx
@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const RegPage = () => {
+  const router = useRouter();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
+  const [checkboxError, setCheckboxError] = useState(false);
+
+  const isEmailValid = emailRegex.test(email);
+  const isFormValid = isEmailValid && password.length > 0;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!rememberMe) {
+      setCheckboxError(true);
+      return;
+    }
+
+    setCheckboxError(false);
+
+    if (!isFormValid) return;
+
+    console.log("Email:", email, "Password:", password, "Remember:", rememberMe);
+    router.push("/regCode");
+  };
+
+  return (
+    <div className="min-h-screen w-full bg-[#90D2F9] flex items-center justify-center px-4">
+      <div className="w-full max-w-md bg-white/10 rounded-2xl p-6 sm:p-8 shadow-lg relative">
+        {/* Красный баннер ошибки по чекбоксу */}
+        {checkboxError && (
+          <div
+            className="absolute -top-10 left-0 w-full bg-red-500 text-white text-xs sm:text-sm font-montserrat px-3 py-2 rounded-t-2xl flex items-center justify-center shadow-md"
+            role="alert"
+          >
+            Вы не согласны с условиями использования
+          </div>
+        )}
+
+        {/* Кнопка Назад */}
+        <div className="flex items-center justify-between mb-4">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="text-[#ebebeb] text-sm font-montserrat hover:underline"
+          >
+            Назад
+          </button>
+          <span className="flex-1 text-center font-montserrat text-white font-extrabold text-2xl">
+            Регистрация
+          </span>
+          {/* Пустой блок для выравнивания по центру заголовка */}
+          <span className="w-[48px]" />
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-2 space-y-4">
+          {/* Почта */}
+          <div className="space-y-1">
+            <label className="block font-montserrat font-extrabold text-xs text-white">
+              Почта
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
+            />
+            {!isEmailValid && email.length > 0 && (
+              <p className="text-[11px] text-red-600 font-montserrat">
+                Введите корректный email
+              </p>
+            )}
+          </div>
+
+          {/* Пароль */}
+          <div className="space-y-1">
+            <label className="block font-montserrat font-extrabold text-xs text-white">
+              Пароль
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
+            />
+          </div>
+
+          {/* Чекбокс */}
+          <div className="flex items-start space-x-2">
+            <button
+              type="button"
+              onClick={() => {
+                setRememberMe((prev) => !prev);
+                if (!rememberMe) setCheckboxError(false);
+              }}
+              className={`w-5 h-5 rounded-full border border-white flex items-center justify-center ${rememberMe ? "bg-white" : "bg-transparent"
+                }`}
+            >
+              {rememberMe && (
+                <span className="h-2 w-2 rounded-full bg-[#90D2F9]" />
+              )}
+            </button>
+            <p className="font-montserrat text-[10px] leading-[12px] text-white">
+              Подтверждаю, что я прочитал условия использования данного приложения
+            </p>
+          </div>
+
+          {/* Кнопка Войти */}
+          <button
+            type="submit"
+            disabled={!isFormValid}
+            className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
+              ${isFormValid
+                ? "bg-green-500 text-white hover:bg-green-600"
+                : "bg-white text-[#C4C4C4] cursor-not-allowed"
+              }`}
+          >
+            Регистрация
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default RegPage;