From 4bc39eb8eb5e45d731d6a1b69ea0807778ec9ecf Mon Sep 17 00:00:00 2001
From: popovspiridon99 <popovspiridon0799@mail.ru>
Date: Tue, 7 Oct 2025 12:17:53 +0900
Subject: [PATCH] styling; Map page is now at /; enable password reset page

---
 client/src/constants/app.tsx            |  26 +++---
 client/src/layouts/MainLayout.tsx       | 100 +++++++++++++++++++++++-
 client/src/pages/auth/PasswordReset.tsx |   3 +-
 client/src/pages/auth/SignIn.tsx        |   3 +-
 client/src/pages/auth/SignUp.tsx        |   3 +-
 5 files changed, 119 insertions(+), 16 deletions(-)

diff --git a/client/src/constants/app.tsx b/client/src/constants/app.tsx
index b040bdb..bc810a4 100644
--- a/client/src/constants/app.tsx
+++ b/client/src/constants/app.tsx
@@ -47,7 +47,7 @@ const pages = [
     component: <PasswordReset />,
     drawer: false,
     dashboard: false,
-    enabled: false,
+    enabled: true,
   },
   {
     label: "Настройки",
@@ -61,8 +61,10 @@ const pages = [
   {
     label: "Главная",
     path: "/",
-    icon: <Home24Color />,
-    component: <Main />,
+    icon: <Map24Filled />,
+    component: <MapTest />,
+    // icon: <Home24Color />,
+    // component: <Main />,
     drawer: true,
     dashboard: true,
     enabled: true,
@@ -121,15 +123,15 @@ const pages = [
     dashboard: true,
     enabled: true,
   },
-  {
-    label: "ИКС",
-    path: "/map-test",
-    icon: <Map24Filled />,
-    component: <MapTest />,
-    drawer: true,
-    dashboard: true,
-    enabled: true,
-  },
+  // {
+  //   label: "ИКС",
+  //   path: "/map-test",
+  //   icon: <Map24Filled />,
+  //   component: <MapTest />,
+  //   drawer: true,
+  //   dashboard: true,
+  //   enabled: true,
+  // },
   {
     label: "Map line test",
     path: "/map-line-test",
diff --git a/client/src/layouts/MainLayout.tsx b/client/src/layouts/MainLayout.tsx
index 505ad42..f528c54 100644
--- a/client/src/layouts/MainLayout.tsx
+++ b/client/src/layouts/MainLayout.tsx
@@ -15,7 +15,105 @@ export default function MainLayout() {
 
     return (
         <div className={classes.root}>
-            <Outlet />
+            <Background />
+            <div style={{ position: 'absolute', inset: 0, display: 'flex', width: '100vw', height: '100vh' }}>
+                <Outlet />
+            </div>
         </div>
     )
+}
+
+const Background = () => {
+    return (
+        <svg id="corp-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100vh', display: 'block' }}>
+            <defs>
+                <style>
+                    {`:root {
+                            --c1: #0f4c81;   /* deep blue */
+                        --c2: #1fb6ff;   /* bright cyan */
+                        --c3: #7bd389;   /* muted green */
+                        --muted: rgba(255,255,255,0.06);
+                        }`}
+                </style>
+
+                <linearGradient id="grad-main" x1="0" x2="1" y1="0" y2="1">
+                    <stop offset="0" stop-color="var(--c2)" stop-opacity="0.95" />
+                    <stop offset="0.45" stop-color="var(--c1)" stop-opacity="0.95" />
+                    <stop offset="1" stop-color="var(--c3)" stop-opacity="0.9" />
+                </linearGradient>
+
+                <filter id="f-blur">
+                    <feGaussianBlur stdDeviation="40" result="b" />
+                    <feColorMatrix type="matrix"
+                        values="1 0 0 0 0
+                0 1 0 0 0
+                0 0 1 0 0
+                0 0 0 0.6 0" in="b" />
+                </filter>
+
+                <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
+                    <rect width="100%" height="100%" fill="none" />
+                    <circle cx="2" cy="2" r="1.1" fill="white" fill-opacity="0.06" />
+                </pattern>
+
+                <pattern id="diagonal" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
+                    <rect width="12" height="12" fill="transparent" />
+                    <path d="M0 0 L0 1" stroke="white" stroke-opacity="0.02" stroke-width="1" />
+                </pattern>
+
+                <radialGradient id="spot" cx="70%" cy="20%" r="50%">
+                    <stop offset="0" stop-color="#ffffff" stop-opacity="0.06" />
+                    <stop offset="1" stop-color="#ffffff" stop-opacity="0" />
+                </radialGradient>
+
+                <clipPath id="blob-clip">
+                    <path id="blobPath"
+                        d="M420 80C520 10 760 10 890 100C1040 210 1080 360 980 470C880 580 640 620 480 540C300 440 320 180 420 80Z" />
+                </clipPath>
+            </defs>
+
+            <rect width="100%" height="100%" fill="url(#grad-main)" />
+
+            <g filter="url(#f-blur)" opacity="0.95">
+                <path d="M-60 150 C180 40 420 10 700 120 C1040 260 1180 520 960 760 C760 980 420 920 140 800 C-80 700 -40 300 -60 150 Z"
+                    fill="white" fill-opacity="0.02" />
+                <path d="M1200 40 C1060 -20 900 10 760 120 C620 240 620 420 760 560 C900 700 1160 760 1320 640 C1460 540 1440 200 1200 40 Z"
+                    fill="white" fill-opacity="0.03" />
+            </g>
+
+            <g transform="translate(60,30) scale(1.2)" opacity="0.9">
+                <g clip-path="url(#blob-clip)">
+                    <rect width="100%" height="100%" fill="url(#spot)" />
+                </g>
+                <path id="morph" fill="white" fill-opacity="0.06">
+                    <animate attributeName="d"
+                        dur="18s"
+                        repeatCount="indefinite"
+                        values="
+                M420 80C520 10 760 10 890 100C1040 210 1080 360 980 470C880 580 640 620 480 540C300 440 320 180 420 80Z;
+                M380 60C520 0 760 40 930 120C1080 220 1060 360 940 460C800 560 600 620 420 560C240 500 250 200 380 60Z;
+                M440 100C580 30 820 10 980 140C1130 280 1100 430 980 540C840 660 600 680 420 600C220 500 300 160 440 100Z;
+                M420 80C520 10 760 10 890 100C1040 210 1080 360 980 470C880 580 640 620 480 540C300 440 320 180 420 80Z"/>
+                </path>
+            </g>
+
+            <g opacity="0.12">
+                <rect x="40" y="60" width="360" height="620" rx="20" fill="url(#diagonal)" />
+                <rect x="980" y="80" width="380" height="540" rx="26" fill="url(#dots)" />
+            </g>
+
+            <g>
+                <rect x="80" y="420" width="1280" height="120" rx="60" fill="white" fill-opacity="0.02" transform="skewX(-18)" />
+                <rect x="-60" y="260" width="820" height="60" rx="30" fill="white" fill-opacity="0.015" transform="skewX(10)" />
+            </g>
+
+            <g stroke="white" stroke-opacity="0.06" stroke-width="1" fill="none">
+                <path d="M120 720 C320 600 520 540 720 580 C920 620 1120 760 1360 700" />
+                <path d="M40 620 C240 540 460 460 680 490 C920 520 1080 680 1360 640" />
+            </g>
+
+            <rect width="100%" height="100%" fill="black" opacity="0.02" />
+
+        </svg>
+    )
 }
\ No newline at end of file
diff --git a/client/src/pages/auth/PasswordReset.tsx b/client/src/pages/auth/PasswordReset.tsx
index 36b66ba..51b44d1 100644
--- a/client/src/pages/auth/PasswordReset.tsx
+++ b/client/src/pages/auth/PasswordReset.tsx
@@ -41,7 +41,8 @@ function PasswordReset() {
             height: 'min-content',
             borderRadius: '1rem',
             border: '1px solid #00000030',
-            padding: '2rem'
+            padding: '2rem',
+            background: 'var(--colorNeutralBackground1)'
         }}>
             <Text size={600} weight='medium'>
                 Восстановление пароля
diff --git a/client/src/pages/auth/SignIn.tsx b/client/src/pages/auth/SignIn.tsx
index efe7e9c..2b79dcc 100644
--- a/client/src/pages/auth/SignIn.tsx
+++ b/client/src/pages/auth/SignIn.tsx
@@ -61,7 +61,8 @@ const SignIn = () => {
       height: 'min-content',
       borderRadius: '1rem',
       border: '1px solid #00000030',
-      padding: '2rem'
+      padding: '2rem',
+      background: 'var(--colorNeutralBackground1)'
     }}>
       <Text align='center' size={500} weight='bold'>
         Вход
diff --git a/client/src/pages/auth/SignUp.tsx b/client/src/pages/auth/SignUp.tsx
index 3d18837..e4f35c4 100644
--- a/client/src/pages/auth/SignUp.tsx
+++ b/client/src/pages/auth/SignUp.tsx
@@ -36,7 +36,8 @@ const SignUp = () => {
             height: 'min-content',
             borderRadius: '1rem',
             border: '1px solid #00000030',
-            padding: '2rem'
+            padding: '2rem',
+            background: 'var(--colorNeutralBackground1)'
         }}>
             <Text align='center' size={500} weight='bold'>
                 Регистрация