diff --git a/front/src/assets/partners_dark theme_1_partner.png b/front/src/assets/partners_dark theme_1_partner.png new file mode 100644 index 0000000..e0b823c Binary files /dev/null and b/front/src/assets/partners_dark theme_1_partner.png differ diff --git a/front/src/index.css b/front/src/index.css index 3b9c07f..57b6004 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -15,17 +15,19 @@ --purple: #7700ff; --black: #101828; --orange: #ff4f12; + --light-blue: #749FD6; + --lavander: #E8D2ED; } #root { - max-width: 1280px; + margin: 0 auto; } body { margin: 0; - display: flex; - place-items: center; + /*display: flex; + place-items: center;*/ min-width: 320px; min-height: 100vh; @@ -35,6 +37,10 @@ body { } +p{ + margin: 0; +} + /*button { border-radius: 8px; border: 1px solid transparent; diff --git a/front/src/pages/Layout/Layout.css b/front/src/pages/Layout/Layout.css index e69de29..c717a3e 100644 --- a/front/src/pages/Layout/Layout.css +++ b/front/src/pages/Layout/Layout.css @@ -0,0 +1,4 @@ +.content{ + background-color: white; + margin: 0; +} \ No newline at end of file diff --git a/front/src/pages/Layout/Layout.tsx b/front/src/pages/Layout/Layout.tsx index b9c0288..9c0b137 100644 --- a/front/src/pages/Layout/Layout.tsx +++ b/front/src/pages/Layout/Layout.tsx @@ -3,20 +3,21 @@ import { Outlet } from "react-router"; import { useAppSelector } from '../../app/hooks'; import type { RootState } from "../../app/store"; import { Navigate } from "react-router"; +import './Layout.css' const Layout = () =>{ const { token } = useAppSelector((state: RootState) => state.auth) return( - token ?
+ /*token ?*/
-
: +
/*: */ ); }; diff --git a/front/src/pages/LoginPage/LoginPage.tsx b/front/src/pages/LoginPage/LoginPage.tsx index 54d4500..f9c70ab 100644 --- a/front/src/pages/LoginPage/LoginPage.tsx +++ b/front/src/pages/LoginPage/LoginPage.tsx @@ -38,7 +38,7 @@ const LoginPage: React.FC = () => { // Редирект если пользователь уже авторизован useEffect(() => { if (token) { - navigate('/data-collection'); + navigate('/'); } }, [token, navigate]); @@ -132,7 +132,7 @@ const LoginPage: React.FC = () => { const result = await dispatch(loginThunk(formData)).unwrap(); if (result.token) { - navigate('/data-collection'); + navigate('/'); } } catch (error) { console.error('Login error:', error); diff --git a/front/src/widgets/Header/Header.css b/front/src/widgets/Header/Header.css index e69de29..f80b3b2 100644 --- a/front/src/widgets/Header/Header.css +++ b/front/src/widgets/Header/Header.css @@ -0,0 +1,143 @@ +.header { + /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/ + background-color: var(--purple); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + padding: 0; + position: sticky; + top: 0; + z-index: 1000; + backdrop-filter: blur(10px); +} + +.header-menu { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + padding: 0 20px; +} + +.header-menu a { + position: relative; + color: white; + text-decoration: none; + padding: 1.8rem 2rem; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-weight: 500; + font-size: 1.1rem; + transition: all 0.3s ease; + overflow: hidden; +} + +.header-menu a::before { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 3px; + background: linear-gradient(90deg, var(--lavander), var(--light-blue)); + transition: all 0.3s ease; + transform: translateX(-50%); +} + +.header-menu a::after { + content: ''; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: left 0.5s ease; +} + +.header-logo { + display: flex; + align-items: center; + gap: 12px; + color: white; + text-decoration: none; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-weight: 700; + font-size: 1.4rem; + transition: all 0.3s ease; +} + +.logo-image { + width: 340px; + height: 80px; + border-radius: 8px; + object-fit: contain; + transition: all 0.3s ease; + /*filter: brightness(0) invert(1);*/ +} + +.header-menu a:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); +} + +.header-menu a:hover::before { + width: 80%; +} + +.header-menu a:hover::after { + left: 100%; +} + +.header-menu a.active { + background: rgba(255, 255, 255, 0.15); + font-weight: 600; +} + +.header-menu a.active::before { + width: 100%; + background: linear-gradient(90deg, var(--lavander), var(--light-blue)); +} + +/* Анимация при загрузке */ +.header-menu a { + animation: slideIn 0.6s ease forwards; + opacity: 0; + transform: translateY(-20px); +} + +.header-menu a:nth-child(1) { animation-delay: 0.1s; } +.header-menu a:nth-child(2) { animation-delay: 0.2s; } +.header-menu a:nth-child(3) { animation-delay: 0.3s; } + +@keyframes slideIn { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Адаптивность */ +@media (max-width: 768px) { + .header-menu { + flex-direction: column; + padding: 0; + } + + .header-menu a { + width: 100%; + text-align: center; + padding: 1rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .header-menu a:last-child { + border-bottom: none; + } +} + +/* Эффект пульсации при наведении на кнопку выхода */ +.header-menu a[onclick]:hover { + background: linear-gradient(135deg, #ff6b6b, #ee5a52); +} + +.header-menu a[onclick]:hover::before { + background: linear-gradient(90deg, #ffd89b, #ff6b6b); +} + diff --git a/front/src/widgets/Header/Header.tsx b/front/src/widgets/Header/Header.tsx index 369ec21..4fe88c3 100644 --- a/front/src/widgets/Header/Header.tsx +++ b/front/src/widgets/Header/Header.tsx @@ -1,6 +1,8 @@ import { NavLink } from "react-router"; import { useAppDispatch } from '../../app/hooks'; import { logout } from "../../features/auth/authSlice"; +import './Header.css' +import logo from '../../assets/partners_dark theme_1_partner.png' const Header = () =>{ @@ -8,10 +10,15 @@ const Header = () =>{ return( )