add auth window

2026-04-29 23:24:53 +03:00
parent bfbe5f9873
commit eb180a7da8
22 changed files with 460 additions and 19 deletions
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
+
+.fi {
+  position: fixed;
+  opacity: 0.15;
+  filter: grayscale(1) brightness(2);
+  pointer-events: none;
+  user-select: none;
+  animation: float 7s ease-in-out infinite;
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(-6deg); }
+  50%       { transform: translateY(-18px) rotate(6deg); }
+}
+
+.card-in {
+  animation: cardIn .7s cubic-bezier(.34,1.56,.64,1) both;
+}
+@keyframes cardIn {
+  from { opacity: 0; transform: scale(.86) translateY(40px); }
+  to   { opacity: 1; transform: scale(1)   translateY(0); }
+}
+
+@keyframes logoPulse {
+  0%, 100% { filter: drop-shadow(0 0 18px rgba(45,224,200,.45)); }
+  50%       { filter: drop-shadow(0 0 38px rgba(45,224,200,.8)); }
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.li:focus {
+  border-color: #2de0c8 !important;
+  background: rgba(45,224,200,.07) !important;
+  box-shadow: 0 0 0 3px rgba(45,224,200,.12) !important;
+}
+.li::placeholder { color: rgba(255,255,255,.32); }
+
+.btn-l:hover  { opacity: .88; transform: translateY(-2px); transition: all .15s; }
+.btn-l:active { transform: translateY(0); }
+
+.soc:hover {
+  background: rgba(255,255,255,.1) !important;
+  border-color: rgba(255,255,255,.22) !important;
+  transform: translateY(-1px);
+  transition: all .2s;
+}
+
+.div-line::before, .div-line::after {
+  content: ''; flex: 1;
+  height: 1px; background: rgba(255,255,255,.08);
+}
--- a/src/styles/loginStyles.js
+++ b/src/styles/loginStyles.js
@@ -0,0 +1,88 @@
+export const s = {
+  page: {
+    fontFamily: "'Nunito', sans-serif",
+    minHeight: "100vh",
+    display: "flex", alignItems: "center", justifyContent: "center",
+    background: "radial-gradient(ellipse at 30% 40%, #1a2340 0%, #0d1018 60%)",
+    overflow: "hidden", position: "relative",
+  },
+  bgGlow: {
+    position: "fixed", top: "40%", right: 0,
+    width: "500px", height: "400px",
+    background: "radial-gradient(ellipse, #0f2a22 0%, transparent 70%)",
+    pointerEvents: "none", opacity: 0.7,
+  },
+  card: {
+    position: "relative", zIndex: 10, width: "360px",
+    background: "linear-gradient(155deg, #1d2436 0%, #131720 100%)",
+    border: "1px solid rgba(255,255,255,0.08)",
+    borderRadius: "30px", padding: "40px 38px 34px",
+    boxShadow: "0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03)",
+  },
+  dotsBtn: {
+    position: "absolute", top: "18px", right: "20px",
+    background: "none", border: "none",
+    color: "rgba(255,255,255,0.25)", fontSize: "1.3rem",
+    cursor: "pointer", letterSpacing: "3px",
+  },
+  logoWrap: { textAlign: "center", marginBottom: "2px" },
+  logoSvg: {
+    width: "130px", height: "130px",
+    animation: "logoPulse 3s ease-in-out infinite",
+  },
+  title: {
+    textAlign: "center", color: "#fff",
+    fontSize: "2rem", fontWeight: 900,
+    letterSpacing: "-0.5px", margin: "14px 0 26px",
+  },
+  inputWrap: { marginBottom: "13px" },
+  input: {
+    width: "100%", boxSizing: "border-box",
+    background: "rgba(255,255,255,0.055)",
+    border: "1.5px solid rgba(255,255,255,0.09)",
+    borderRadius: "14px", padding: "14px 18px",
+    color: "#fff", fontFamily: "'Nunito', sans-serif",
+    fontSize: "0.93rem", outline: "none",
+  },
+  eyeBtn: {
+    position: "absolute", right: "13px", top: "50%",
+    transform: "translateY(-50%)",
+    background: "none", border: "none", cursor: "pointer",
+    color: "rgba(255,255,255,0.35)", fontSize: "1.05rem", lineHeight: 1,
+  },
+  errMsg: {
+    color: "#ff6b6b", fontSize: "0.83rem",
+    textAlign: "center", margin: "6px 0 10px",
+  },
+  btnLogin: {
+    width: "100%",
+    background: "linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0)",
+    backgroundSize: "200% 100%",
+    border: "none", borderRadius: "14px", padding: "15px",
+    color: "#082320", fontFamily: "'Nunito', sans-serif",
+    fontSize: "1.05rem", fontWeight: 900, cursor: "pointer", marginTop: "6px",
+    boxShadow: "0 6px 24px rgba(45,224,200,0.35)",
+    animation: "shimmer 3s linear infinite",
+  },
+  forgotBtn: {
+    display: "block", width: "100%", textAlign: "center",
+    color: "#2de0c8", fontSize: "0.87rem", marginTop: "14px",
+    background: "none", border: "none", cursor: "pointer",
+    fontFamily: "'Nunito', sans-serif",
+  },
+  regRow: {
+    textAlign: "center", color: "rgba(255,255,255,0.4)",
+    fontSize: "0.87rem", marginTop: "9px",
+  },
+  link: { color: "#2de0c8", textDecoration: "none" },
+  divider: { display: "flex", alignItems: "center", gap: "10px", margin: "18px 0 14px" },
+  divText: { color: "rgba(255,255,255,0.25)", fontSize: "0.78rem" },
+  socials: { display: "flex", gap: "10px" },
+  socBtn: {
+    flex: 1, padding: "11px 0", borderRadius: "12px",
+    border: "1.5px solid rgba(255,255,255,0.09)",
+    background: "rgba(255,255,255,0.04)",
+    cursor: "pointer", fontWeight: 800,
+    fontFamily: "'Nunito', sans-serif", fontSize: "0.88rem", color: "#fff",
+  },
+};