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/components/Layout.tsx
+++ b/src/components/Layout.tsx
--- a/src/components/MagnifierLogo.jsx
+++ b/src/components/MagnifierLogo.jsx
@@ -0,0 +1,85 @@
+import { s } from '../styles/loginStyles';
+import keysIcon from '../assets/passwords_keys_6032.png';
+
+export default function MagnifierLogo() {
+  return (
+      <svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" style={s.logoSvg}>
+        <defs>
+          <radialGradient id="glassGrad" cx="38%" cy="35%" r="60%">
+            <stop offset="0%" stopColor="#7ffff0"/>
+            <stop offset="45%" stopColor="#2de0c8"/>
+            <stop offset="100%" stopColor="#0a7a68"/>
+          </radialGradient>
+          <linearGradient id="rimGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#e8eef5"/>
+            <stop offset="40%" stopColor="#b0bec5"/>
+            <stop offset="100%" stopColor="#607d8b"/>
+          </linearGradient>
+          <linearGradient id="handleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#4a4a4a"/>
+            <stop offset="25%" stopColor="#2a2a2a"/>
+            <stop offset="50%" stopColor="#111111"/>
+            <stop offset="75%" stopColor="#1e1e1e"/>
+            <stop offset="100%" stopColor="#000000"/>
+          </linearGradient>
+          <radialGradient id="innerGlow" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.25"/>
+            <stop offset="100%" stopColor="#ffffff" stopOpacity="0"/>
+          </radialGradient>
+          <linearGradient id="shimmer2" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.7"/>
+            <stop offset="100%" stopColor="#ffffff" stopOpacity="0"/>
+          </linearGradient>
+          <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+            <feDropShadow dx="1" dy="2" stdDeviation="3" floodColor="#000"
+                          floodOpacity="0.5"/>
+          </filter>
+          <clipPath id="lensClip">
+            <circle cx="35" cy="35" r="23"/>
+          </clipPath>
+        </defs>
+
+        {/* Ручка */}
+        <g filter="url(#shadow)">
+          <rect x="60" y="56" width="11" height="28" rx="5.5"
+                fill="url(#handleGrad)" transform="rotate(-45 62.5 71)"/>
+          <rect x="61" y="56" width="3" height="22" rx="1.5"
+                fill="white" opacity="0.12" transform="rotate(-45 62.5 71)" />
+          <g transform="rotate(-45 62.5 71)" opacity="0.08">
+            <line x1="60" y1="62" x2="71" y2="62" stroke="white" strokeWidth="1"/>
+            <line x1="60" y1="66" x2="71" y2="66" stroke="white" strokeWidth="1"/>
+            <line x1="60" y1="70" x2="71" y2="70" stroke="white" strokeWidth="1"/>
+            <line x1="60" y1="74" x2="71" y2="74" stroke="white" strokeWidth="1"/>
+          </g>
+        </g>
+
+        {/* Металлический обод */}
+        <circle cx="35" cy="35" r="28" fill="url(#rimGrad)" filter="url(#shadow)" />
+        <circle cx="35" cy="35" r="26" fill="none" stroke="#ecf0f1" strokeWidth="1" opacity="0.6" />
+        <circle cx="35" cy="35" r="28" fill="none" stroke="#455a64" strokeWidth="1.5" opacity="0.5" />
+
+        {/* Стеклянная линза */}
+        <circle cx="35" cy="35" r="23" fill="url(#glassGrad)" />
+        <circle cx="35" cy="35" r="23" fill="url(#innerGlow)" />
+
+        {/* Иконка внутри линзы */}
+        <image
+            href={keysIcon}
+            x="20"
+            y="20"
+            width="29"
+            height="29"
+            clipPath="url(#lensClip)"
+            opacity="0.6"
+        />
+
+        {/* Блики на стекле */}
+        <ellipse cx="27" cy="25" rx="9" ry="6"
+                 fill="url(#shimmer2)" opacity="0.55" transform="rotate(-20 27 25)" />
+        <ellipse cx="23" cy="29" rx="3" ry="2"
+                 fill="white" opacity="0.3" transform="rotate(-20 23 29)" />
+        <path d="M 14 22 Q 20 10 35 8" stroke="white" strokeWidth="1.5"
+              strokeLinecap="round" fill="none" opacity="0.45" />
+      </svg>
+  );
+}