Форматировние кода и изменение структуры css файлов

src/App.css

@@ -1,539 +0,0 @@
-
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-@font-face {
-	font-family: "Roboto Regular";
-		src: url("./fonts/roboto-regular/roboto-regular.svg") format("svg");
-		src: url("./fonts/roboto-regular/roboto-regular.ttf") format("truetype");
-		src: url("./fonts/roboto-regular/roboto-regular.woff") format("woff");
-		src: url("./fonts/roboto-regular/roboto-regular.woff2") format("woff2");
-	font-weight: normal;
-	font-style: normal;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.switch-link {
-  margin-top: 15px;
-  text-align: center;
-}
-
-.switch-link button {
-  background: none;
-  border: none;
-  color: #007bff;
-  cursor: pointer;
-  font-size: 14px;
-  text-decoration: underline;
-}
-
-body {
-  font-family: 'Roboto Regular';
-  margin: 0;
-  padding: 0;
-  background-color: #33404d;
-}
-
-body * { transition: all .4s ease; }
-
-ul{
-    list-style-type: none;
-    padding: 0px;
-}
-
-.app {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-/* Страница входа */
-.login-page {
-  background-color: #1f2430;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  margin: 50px auto;
-  max-width: 400px;
-}
-
-.profile-page {
-  background-color: #1f2430;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  margin: 10px auto;
-  max-width: 1200px;
-}  
-
-h2 {
-  text-align: center;
-  color: #CAD1D8;
-  margin-bottom: 20px;
-}
-
-p {
-  text-align: center;
-  color: #CAD1D8;
-  margin-bottom: 0px;
-}
-
-.modal-content p {
-    text-align: left
-}
-
-.modal-content div {
-    margin-bottom: 20px
-}
-.text-block {
-  text-align: left;
-  color: #999999;
-  margin-bottom: 2em;
-}
-
-.com {
-  color: #999999;
-  text-align: left;
-  margin: 10px 0px 10px 0px;
-  margin-bottom: auto;
-}
-
-.com modal-content {
-  text-align: left;
-  color: #999999;
-  margin: 10px 0px 10px 0px;
-  margin-bottom: auto;
-}
-
-.modal-content input{
-    margin: 10px 0px;
-}
-
-.modal-content div{
-    margin: 10px 0px;
-}
-
-.user-info p {
-  text-align: left;
-  color: #CAD1D8;
-  margin: 15px 0;
-  font-size: 20px;
-}
-
-form div {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: #CAD1D8;
-}
-
-input[type="text"],
-input[type="password"] {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.Important-button:hover {
-  background-color: #cb0101;
-}
-
-.Important-button {
-  width: 100%;
-  padding: 12px;
-  margin: 8px;
-  background-color: #e30000;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-button {
-  width: 100%;
-  padding: 12px;
-  margin: 10px auto;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.frame {
-    background-color: #33404d;
-    margin: 10px 0px;
-    width: 30%;
-    padding: 6px;
-    border-radius: 6px;
-    font-size: 16px;
-    border: 2px solid #999999
-}
-
-.frame p {
-    font-size: 16px;
-}
-
-.frame:hover {
-  border-color: #CAD1D8;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
-button:disabled {
-  background-color: #6c757d;
-  cursor: not-allowed;
-}
-
-/* Сообщения об ошибках */
-.error {
-  background-color: #f8d7da;
-  color: #721c24;
-  padding: 10px;
-  border-radius: 4px;
-  margin-bottom: 15px;
-  text-align: center;
-}
-
-/* Страница профиля */
-.form-group {
-  margin-bottom: 10px;
-}
-
-.form-group label {
-  text-align: left;
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.modal-buttons {
-  display: flex;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-.button-small {
-  width: 30%;
-  min-width: auto;
-  height: auto;
-}
-
-.user-info p {
-  text-align: left;
-  margin: 5px 0px 5px 0px;
-  font-size: 20px;
-}
-
-.buttonName {
-    display: flex;
-}
-
-.buttonName button{
-    background-color: #007bff;
-    margin: 10px 5px;
-    width: 5%;
-    padding: 6px;
-    border-radius: 6px;
-    font-size: 20px;
-}
-
-.buttonName button:hover {
-    background-color: #0056b3;
-}
-
-.com p {
-    color: #CAD1D8;
-    font-size: 18px;
-}
-
-
-
-.kan-ban-list-sort{
-    background-color: #2b3245;
-    padding: 10px;
-    border-radius: 6px;
-    margin-bottom: 20px;
-}
-
-h3 {
-    text-align: left;
-    color: #CAD1D8;
-    margin: 0px;
-}
-
-.nav-sort{
-    display: flex;
-}
-
-.nav-sort button+button{
-    margin-left: 10px
-}
-
-.kan-ban-list {
-    background-color: #2b3245;
-    padding: 10px;
-    border-radius: 6px;
-}
-
-.kan-ban-list .inf {
-    padding: 0px 0px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.kan-ban-list .inf button{
-    width: 200px;
-    margin: 0px;
-}
-
-
-.kan-ban-list ul {
-    margin: 0px
-}
-
-.kan-ban-list ul button{
-    border-radius: 6px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    background-color: #3d4763;;
-}
-
-.kan-ban-list ul button:hover{
-	box-shadow: 0 0 10px 2px #08e8de78;
-}
-
-.kan-ban-list .sort-row{
-    display: flex;
-    justify-content: space-between;
-}
-
-.sort-row p, .sort-row h3{
-    margin: 4px 0px;
-}
-
-.sort-row+.sort-row p {
-    margin: 16px 0px 0px 0px;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*header*/
-
-.nav-avatar {
-    height: 32px;
-    height: 32px;
-    margin-left: 8px;
-    border-radius: 1000px
-}
-
-.header {
-  background-color: #1f2430;
-  padding: 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  height: 56px;
-}
-
-.header-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 1rem;
-  height: 56px;
-}
-
-.logo h1 {
-  font-family: 'Roboto Regular';
-  margin: 0;
-  font-size: 24px;
-  color: #CAD1D8;
-  text-decoration: none;
-}
-
-h1:hover {
-  color: white;
-}
-
-.logo a {
-  text-decoration: none;
-}
-
-.nav-list {
-  opacity: 0;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.nav-list.visible {
-    opacity: 1;
-}
-
-.nav-list li {
-  
-  padding: 0 1rem;
-  height: 56px;
-  display: flex;
-  align-items: center;
-}
-
-.nav-list li:hover {
-  box-shadow: #08e8de 0px -2px inset;
-  background-color: rgba(0, 0, 0, 0.25) ;
-}
-
-.nav-list a {
-  text-decoration: none;
-  color: #CAD1D8;
-  display: flex;
-  align-items: center;
-  font-size: 18px;
-  height: 56px;
-}
-
-.nav-list a:hover {
-  color: white;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* Стили для модального окна */
-.confirm-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal-content {
-  background: #1f2430;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-  min-width: 300px;
-}
-
-.modal-buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px 15px;
-}
-
-.modal-buttons button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin: 8px;
-}
-
-.modal-buttons button:first-child {
-  background: #e30000;
-  color: white;
-}
-
-.modal-buttons button:last-child {
-  background: #007bff;
-  color: white;
-}
-
-.modal-buttons button:hover {
-  background-color: #cb0101
-}
-
-.modal-buttons button:last-child:hover {
-  background-color: #0056b3
-  
-}
-
-
-
-
-

src/App.js

@@ -1,6 +1,6 @@
 import logo from './logo.svg';
-import './App.css';
+import './css/App.css';
-import React from 'react';
+import './css/Modal.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom'; // Исправленный импорт
 import Login from './Login';
 import Profile from './Profile';

src/Header.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect  } from 'react';
+import { useState, useEffect  } from 'react';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
+import './css/Header.css';
 
 const Header = () => {
     const [display_name, setDisplay_name] = useState('');
@@ -35,7 +36,11 @@ const Header = () => {
                             {display_name ? (
                                 <>
                                     <li><Link to="/Kanban-Boards-List">Канбан-доски</Link></li>
-                  <li><Link to="/profile">{display_name}<img className="nav-avatar" src={avatar}></img></Link></li>
+                                    <li>
+                                        <Link to="/profile">
+                                            {display_name}<img className="nav-avatar" src={avatar} alt=''></img>
+                                        </Link>
+                                    </li>
                                 </>
                             ) : (
                                 <>

src/KBBoard.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import axios from 'axios';
 import Header from './Header';

src/Login.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import Header from './Header';
@@ -20,14 +20,7 @@ const Login = () => {
         setLoading(true);
         try {
             const newUser = { username, password };
-            await axios.post('/api/users/login', newUser,
+            await axios.post('/api/users/login', newUser, { withCredentials: true });
-                { 
-                    withCredentials: true 
-                    /*headers: { 
-                        'Content-Type': 'application/json' 
-                    }*/
-                }
-            );
             setTimeout(() => {
                 navigate('/profile');
             }, 500);

src/Mainpage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import Header from './Header';
 
@@ -7,10 +7,12 @@ const Mainpage = () => {
     const [error, setError] = useState('');
     
     return (
-        <><Header />
+        <>
+            <Header />
             <div className="">
                 
-    	</div></>
+            </div>
+        </>
 	);
 }
 

src/OtherProfile.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import {useState, useEffect} from 'react';
 import './css/OtherProfile.css';
 import {useParams, useNavigate} from 'react-router-dom';
 import axios from 'axios';

src/Profile.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
 import Header from './Header';
@@ -29,18 +29,18 @@ const Profile = () => {
                 // Если нет сессии - редирект на логин
                 setError('Вы не авторизованы');
                 setTimeout(() => {
-                    window.location.href = '/login';
+                    navigate('/login');
                 }, 1500);
             }
         };
         checkSession();
-    }, []);
+    }, [navigate]);
 
     const handleLogout = async () => {
         try {
             await axios.post('/api/users/logout');
             setUser(null);
-            window.location.href = '/login'; // Редирект после выхода
+            navigate('/login'); // Редирект после выхода
         } catch (err) {
             setError('Ошибка');
         }
@@ -106,21 +106,14 @@ const Profile = () => {
 
         try {
             const NewPassword = {old_password, new_password, new_password_confirm}
-  	  await axios.put('/api/users/change_password',
+            await axios.put('/api/users/change_password', NewPassword, { withCredentials: true });
-    	  NewPassword
-   	 , {
-   	   withCredentials: true
-    	});
-    
             alert('Пароль успешно изменён!');
             setShowChangePassword(false);
             setold_password('');
             setnew_password('');
             setnew_password_confirm('');
         } catch (err) {
-   	 setPasswordError(
+            setPasswordError( err.response?.data?.detail || 'Ошибка при смене пароля' );
-    	  err.response?.data?.detail || 'Ошибка при смене пароля'
-  	    );
         }
 	};
 
@@ -151,11 +144,9 @@ const Profile = () => {
     
 	const deleteAccount = async () => {
         try {
-            await axios.delete('/api/users/me', {
+            await axios.delete('/api/users/me', { withCredentials: true });
-                withCredentials: true
-            });
             setUser(null);
-            window.location.href = '/login';
+            navigate('/login');
             setShowConfirm(false); // Закрываем окно после удаления
         } catch (err) {
             setError('Ошибка удаления');
@@ -164,13 +155,12 @@ const Profile = () => {
     };
   
     return (
-    <><Header />
+        <>
+            <Header />
             <div className="profile-page">
-
                 {
                     error && <div className="error">{error}</div>
                 }	
-
                 {user && (
                     <div className="user-info">
                         <p><strong>Привет, {user}! Добро пожаловать в личный кабинет.</strong></p>
@@ -188,8 +178,7 @@ const Profile = () => {
                         </div>
                         <p>Изменить пароль</p>
                         <div className="com">В целях безопасности мы рекомендуем выбрать пароль, который ещё не использовался вами в других учётных записях.</div>
-		  <button onClick={() => setShowChangePassword(true)}
+                        <button onClick={() => setShowChangePassword(true)}className="button-small">Изменить пароль</button>
-          className="button-small">Изменить пароль</button>
                         <button onClick={handleLogout}>Выйти из аккаунта</button>
                         <button onClick={OpenWindowDelete}>Удалить аккаунт</button>
                     </div>
@@ -307,7 +296,8 @@ const Profile = () => {
                         </div>
                     </div>
                 )}
-    </div></>
+            </div>
+        </>
     );
 };
 

src/Registration.js

@@ -26,7 +26,6 @@ const Registration = () => {
             setPassword('');
             setPassword_confirm('');
         } catch (err) {
-            // Обрабатываем ошибки от сервера (например, дубликат password)
             setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
         } finally {
             setLoading(false);

src/_Shablon.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import axios from 'axios';
 import Header from './Header';
 
@@ -7,10 +7,12 @@ const Name = () => {
     const [error, setError] = useState('');
     
     return (
-        <><Header />
+        <>
+            <Header />
             <div className="">
                 
-    	</div></>
+            </div>
+        </>
 	);
 }
 

src/css/App.css

@@ -0,0 +1,306 @@
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+@font-face {
+    font-family: "Roboto Regular";
+        src: url("./../fonts/roboto-regular/roboto-regular.svg") format("svg");
+        src: url("./../fonts/roboto-regular/roboto-regular.ttf") format("truetype");
+        src: url("./../fonts/roboto-regular/roboto-regular.woff") format("woff");
+        src: url("./../fonts/roboto-regular/roboto-regular.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+from {
+    transform: rotate(0deg);
+}
+to {
+    transform: rotate(360deg);
+}
+}
+
+.switch-link {
+    margin-top: 15px;
+    text-align: center;
+}
+
+.switch-link button {
+    background: none;
+    border: none;
+    color: #007bff;
+    cursor: pointer;
+    font-size: 14px;
+    text-decoration: underline;
+}
+
+body {
+    font-family: 'Roboto Regular';
+    margin: 0;
+    padding: 0;
+    background-color: #33404d;
+}
+
+body * { transition: all .4s ease; }
+
+ul{
+    list-style-type: none;
+    padding: 0px;
+}
+
+.app {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Страница входа */
+.login-page {
+    background-color: #1f2430;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 50px auto;
+    max-width: 400px;
+}
+
+.profile-page {
+    background-color: #1f2430;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 10px auto;
+    max-width: 1200px;
+}  
+
+h2 {
+    text-align: center;
+    color: #CAD1D8;
+    margin-bottom: 20px;
+}
+
+p {
+    text-align: center;
+    color: #CAD1D8;
+    margin-bottom: 0px;
+}
+
+.modal-content p {
+    text-align: left
+}
+
+.modal-content div {
+    margin-bottom: 20px
+}
+
+.text-block {
+    text-align: left;
+    color: #999999;
+    margin-bottom: 2em;
+}
+
+.com {
+    color: #999999;
+    text-align: left;
+    margin: 10px 0px 10px 0px;
+    margin-bottom: auto;
+}
+
+.com modal-content {
+    text-align: left;
+    color: #999999;
+    margin: 10px 0px 10px 0px;
+    margin-bottom: auto;
+}
+
+.modal-content input{
+    margin: 10px 0px;
+}
+
+.modal-content div{
+    margin: 10px 0px;
+}
+
+.user-info p {
+    text-align: left;
+    color: #CAD1D8;
+    margin: 15px 0;
+    font-size: 20px;
+}
+
+form div {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #CAD1D8;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.Important-button:hover {
+    background-color: #cb0101;
+}
+
+.Important-button {
+    width: 100%;
+    padding: 12px;
+    margin: 8px;
+    background-color: #e30000;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button {
+    width: 100%;
+    padding: 12px;
+    margin: 10px auto;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.frame {
+    background-color: #33404d;
+    margin: 10px 0px;
+    width: 30%;
+    padding: 6px;
+    border-radius: 6px;
+    font-size: 16px;
+    border: 2px solid #999999
+}
+
+.frame p {
+    font-size: 16px;
+}
+
+.frame:hover {
+    border-color: #CAD1D8;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+button:disabled {
+    background-color: #6c757d;
+    cursor: not-allowed;
+}
+
+/* Сообщения об ошибках */
+.error {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    text-align: center;
+}
+
+/* Страница профиля */
+.form-group {
+    margin-bottom: 10px;
+}
+
+.form-group label {
+    text-align: left;
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.modal-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.button-small {
+    width: 30%;
+    min-width: auto;
+    height: auto;
+}
+
+.user-info p {
+    text-align: left;
+    margin: 5px 0px 5px 0px;
+    font-size: 20px;
+}
+
+.buttonName {
+    display: flex;
+}
+
+.buttonName button{
+    background-color: #007bff;
+    margin: 10px 5px;
+    width: 5%;
+    padding: 6px;
+    border-radius: 6px;
+    font-size: 20px;
+}
+
+.buttonName button:hover {
+    background-color: #0056b3;
+}
+
+.com p {
+    color: #CAD1D8;
+    font-size: 18px;
+}
+
+h3 {
+    text-align: left;
+    color: #CAD1D8;
+    margin: 0px;
+}

src/css/BoardList.css

@@ -0,0 +1,63 @@
+.kan-ban-list-sort{
+    background-color: #2b3245;
+    padding: 10px;
+    border-radius: 6px;
+    margin-bottom: 20px;
+}
+
+.nav-sort{
+    display: flex;
+}
+
+.nav-sort button+button{
+    margin-left: 10px
+}
+
+.kan-ban-list {
+    background-color: #2b3245;
+    padding: 10px;
+    border-radius: 6px;
+}
+
+.kan-ban-list .inf {
+    padding: 0px 0px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.kan-ban-list .inf button{
+    width: 200px;
+    margin: 0px;
+}
+
+
+.kan-ban-list ul {
+    margin: 0px
+}
+
+.kan-ban-list ul button{
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: #3d4763;;
+}
+
+.kan-ban-list ul button:hover{
+	box-shadow: 0 0 10px 2px #08e8de78;
+}
+
+.kan-ban-list .sort-row{
+    display: flex;
+    justify-content: space-between;
+}
+
+.sort-row p, .sort-row h3{
+    margin: 4px 0px;
+}
+
+.sort-row+.sort-row p {
+    margin: 16px 0px 0px 0px;
+}
+

src/css/Header.css

@@ -0,0 +1,79 @@
+/*header*/
+
+.nav-avatar {
+    height: 32px;
+    height: 32px;
+    margin-left: 8px;
+    border-radius: 1000px
+}
+
+.header {
+  background-color: #1f2430;
+  padding: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 56px;
+}
+
+.header-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+  height: 56px;
+}
+
+.logo h1 {
+  font-family: 'Roboto Regular';
+  margin: 0;
+  font-size: 24px;
+  color: #CAD1D8;
+  text-decoration: none;
+}
+
+h1:hover {
+  color: white;
+}
+
+.logo a {
+  text-decoration: none;
+}
+
+.nav-list {
+  opacity: 0;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-list.visible {
+    opacity: 1;
+}
+
+.nav-list li {
+  
+  padding: 0 1rem;
+  height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+.nav-list li:hover {
+  box-shadow: #08e8de 0px -2px inset;
+  background-color: rgba(0, 0, 0, 0.25) ;
+}
+
+.nav-list a {
+  text-decoration: none;
+  color: #CAD1D8;
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  height: 56px;
+}
+
+.nav-list a:hover {
+  color: white;
+}

src/css/Modal.css

@@ -0,0 +1,52 @@
+/* Стили для модального окна */
+.confirm-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-content {
+  background: #1f2430;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+  min-width: 300px;
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px 15px;
+}
+
+.modal-buttons button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 8px;
+}
+
+.modal-buttons button:first-child {
+  background: #e30000;
+  color: white;
+}
+
+.modal-buttons button:last-child {
+  background: #007bff;
+  color: white;
+}
+
+.modal-buttons button:hover {
+  background-color: #cb0101
+}
+
+.modal-buttons button:last-child:hover {
+  background-color: #0056b3
+}