Fool-Stack/Kanban-Front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vladiysss
2026-02-04 17:52:36 +03:00
parent 4f58b675fb
commit c07e560362
15 changed files with 765 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

539
src/App.css
View File

@@ -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
}

26
src/App.js
View File

@@ -1,6 +1,6 @@
import logo from './logo.svg';
import './App.css';
import React from 'react';
import './css/App.css';
import './css/Modal.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'; // Исправленный импорт
import Login from './Login';
import Profile from './Profile';
@@ -13,17 +13,17 @@ import OtherProfile from './OtherProfile';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/profile" element={<Profile />} />
<Route path="/registration" element={<Registration />} />
<Route path="/main" element={<Mainpage />} />
<Route path="/kanban-boards-list" element={<KBBoardsList />} />
<Route path="/kanban-board/:id" element={<KBBoard />} />
<Route path="/profile/:id" element={<OtherProfile />} />
{/* Корректный редирект на страницу входа */}
<Route path="*" element={<Mainpage />} />
</Routes>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/profile" element={<Profile />} />
<Route path="/registration" element={<Registration />} />
<Route path="/main" element={<Mainpage />} />
<Route path="/kanban-boards-list" element={<KBBoardsList />} />
<Route path="/kanban-board/:id" element={<KBBoard />} />
<Route path="/profile/:id" element={<OtherProfile />} />
{/* Корректный редирект на страницу входа */}
<Route path="*" element={<Mainpage />} />
</Routes>
</BrowserRouter>
);
}

59
src/Header.js
View File

@@ -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('');
@@ -22,32 +23,36 @@ const Header = () => {
}, []);
return (
<header className="header">
<div className="header-container">
<div className="logo">
<Link to="/main">
<h1>Fool-stack</h1>
</Link>
</div>
<nav className="nav">
{!isLoading && (
<ul className={`nav-list ${isAnimated ? 'visible' : ''}`}>
{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="/registration">Регистрация</Link></li>
<li><Link to="/login">Вход</Link></li>
</>
)}
</ul>
)}
</nav>
</div>
</header>
<header className="header">
<div className="header-container">
<div className="logo">
<Link to="/main">
<h1>Fool-stack</h1>
</Link>
</div>
<nav className="nav">
{!isLoading && (
<ul className={`nav-list ${isAnimated ? 'visible' : ''}`}>
{display_name ? (
<>
<li><Link to="/Kanban-Boards-List">Канбан-доски</Link></li>
<li>
<Link to="/profile">
{display_name}<img className="nav-avatar" src={avatar} alt=''></img>
</Link>
</li>
</>
) : (
<>
<li><Link to="/registration">Регистрация</Link></li>
<li><Link to="/login">Вход</Link></li>
</>
)}
</ul>
)}
</nav>
</div>
</header>
);
};

2
src/KBBoard.js
View File

@@ -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';

83
src/Login.js
View File

@@ -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,
{
withCredentials: true
/*headers: {
'Content-Type': 'application/json'
}*/
}
);
await axios.post('/api/users/login', newUser, { withCredentials: true });
setTimeout(() => {
navigate('/profile');
}, 500);
@@ -38,43 +31,43 @@ const Login = () => {
}
};
return (
<>
<Header />
<div className="login-page">
<h2>Вход в систему</h2>
{
error && <div className="error">{error}</div>
}
<form onSubmit={handleLogin}>
<div>
<label>Логин:</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
return (
<>
<Header />
<div className="login-page">
<h2>Вход в систему</h2>
{
error && <div className="error">{error}</div>
}
<form onSubmit={handleLogin}>
<div>
<label>Логин:</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
</div>
<div>
<label>Пароль:</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Вход...' : 'Войти'}
</button>
</form>
<button onClick={handleRegisterClick}>
Зарегистрироваться
</button>
</div>
<div>
<label>Пароль:</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Вход...' : 'Войти'}
</button>
</form>
<button onClick={handleRegisterClick}>
Зарегистрироваться
</button>
</div>
</>
);
</>
);
};
export default Login;

12
src/Mainpage.js
View File

@@ -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 />
<div className="">
</div></>
<>
<Header />
<div className="">
</div>
</>
);
}

2
src/OtherProfile.js
View File

@@ -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';

334
src/Profile.js
View File

@@ -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('Ошибка');
}
@@ -100,28 +100,21 @@ const Profile = () => {
}
};
const changePassword = async (e) => {
e.preventDefault();
setPasswordError('');
const changePassword = async (e) => {
e.preventDefault();
setPasswordError('');
try {
const NewPassword = {old_password, new_password, new_password_confirm}
await axios.put('/api/users/change_password',
NewPassword
, {
withCredentials: true
});
alert('Пароль успешно изменён!');
setShowChangePassword(false);
setold_password('');
setnew_password('');
setnew_password_confirm('');
} catch (err) {
setPasswordError(
err.response?.data?.detail || 'Ошибка при смене пароля'
);
}
try {
const NewPassword = {old_password, new_password, new_password_confirm}
await axios.put('/api/users/change_password', NewPassword, { withCredentials: true });
alert('Пароль успешно изменён!');
setShowChangePassword(false);
setold_password('');
setnew_password('');
setnew_password_confirm('');
} catch (err) {
setPasswordError( err.response?.data?.detail || 'Ошибка при смене пароля' );
}
};
@@ -151,11 +144,9 @@ const Profile = () => {
const deleteAccount = async () => {
try {
await axios.delete('/api/users/me', {
withCredentials: true
});
await axios.delete('/api/users/me', { withCredentials: true });
setUser(null);
window.location.href = '/login';
navigate('/login');
setShowConfirm(false); // Закрываем окно после удаления
} catch (err) {
setError('Ошибка удаления');
@@ -163,152 +154,151 @@ const Profile = () => {
}
};
return (
<><Header />
<div className="profile-page">
return (
<>
<Header />
<div className="profile-page">
{
error && <div className="error">{error}</div>
}
{user && (
<div className="user-info">
<p><strong>Привет, {user}! Добро пожаловать в личный кабинет.</strong></p>
<div className="text-block">Здесь ты сможешь управлять данными своей учётной записи.</div>
<p>Информация об учётной записи</p>
<div className="com">Отображаемое имя</div>
<div className="buttonName">
<div className="frame"><p>{user}</p></div>
<button onClick={OpenWindowName}>✎</button>
</div>
<div className="com">Логин</div>
<div className="buttonName">
<div className="frame"><p>{userName}</p></div>
<button onClick={OpenWindowUserName}>✎</button>
</div>
<p>Изменить пароль</p>
<div className="com">В целях безопасности мы рекомендуем выбрать пароль, который ещё не использовался вами в других учётных записях.</div>
<button onClick={() => setShowChangePassword(true)}className="button-small">Изменить пароль</button>
<button onClick={handleLogout}>Выйти из аккаунта</button>
<button onClick={OpenWindowDelete}>Удалить аккаунт</button>
</div>
)}
{ShowConfirmUserName && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Обновите логин</h3></div>
<div><p>Текущий логин: {userName}</p></div>
<div className="com">Новый логин</div>
<form onSubmit={NewUserName}>
<div>
<input
type="text"
value={new_username}
onChange={(e) => setnew_username(e.target.value)}
required
/>
</div>
<button type="submit">Подтвердить</button>
</form>
<button onClick={closeWindowUserName}>Отменить</button>
</div>
</div>
)}
{ShowConfirmName && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Обновите отображаемое имя</h3></div>
<div><p>Текущее отображаемое имя: {user}</p></div>
<div className="com">Новое отображаемое имя</div>
<form onSubmit={NewDisplayName}>
<div>
<input
type="text"
value={new_display_name}
onChange={(e) => setnew_display_name(e.target.value)}
required
/>
</div>
<button type="submit">Подтвердить</button>
</form>
<button onClick={closeWindowName}>Отменить</button>
</div>
</div>
)}
{showChangePassword && (
<div className="confirm-modal">
<div className="modal-content">
<h3>Изменить пароль</h3>
{passwordError && (
<div className="error" style={{ color: 'red' }}>
{passwordError}
</div>
)}
{
error && <div className="error">{error}</div>
}
<form onSubmit={changePassword}>
<div className="form-group">
<label>Текущий пароль:</label>
<input
type="password"
value={old_password}
onChange={(e) => setold_password(e.target.value)}
required
/>
</div>
{user && (
<div className="user-info">
<p><strong>Привет, {user}! Добро пожаловать в личный кабинет.</strong></p>
<div className="text-block">Здесь ты сможешь управлять данными своей учётной записи.</div>
<p>Информация об учётной записи</p>
<div className="com">Отображаемое имя</div>
<div className="buttonName">
<div className="frame"><p>{user}</p></div>
<button onClick={OpenWindowName}>✎</button>
</div>
<div className="com">Логин</div>
<div className="buttonName">
<div className="frame"><p>{userName}</p></div>
<button onClick={OpenWindowUserName}>✎</button>
</div>
<p>Изменить пароль</p>
<div className="com">В целях безопасности мы рекомендуем выбрать пароль, который ещё не использовался вами в других учётных записях.</div>
<button onClick={() => setShowChangePassword(true)}
className="button-small">Изменить пароль</button>
<button onClick={handleLogout}>Выйти из аккаунта</button>
<button onClick={OpenWindowDelete}>Удалить аккаунт</button>
</div>
)}
{ShowConfirmUserName && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Обновите логин</h3></div>
<div><p>Текущий логин: {userName}</p></div>
<div className="com">Новый логин</div>
<form onSubmit={NewUserName}>
<div>
<input
type="text"
value={new_username}
onChange={(e) => setnew_username(e.target.value)}
required
/>
<div className="form-group">
<label>Новый пароль:</label>
<input
type="password"
value={new_password}
onChange={(e) => setnew_password(e.target.value)}
required
/>
</div>
<div className="form-group">
<label>Повторите новый пароль:</label>
<input
type="password"
value={new_password_confirm}
onChange={(e) => setnew_password_confirm(e.target.value)}
required
/>
</div>
<div className="modal-buttons">
<button type="submit">Изменить пароль</button>
<button
type="button"
onClick={() => setShowChangePassword(false)}
>
Отменить
</button>
</div>
</form>
</div>
</div>
)}
{/* Всплывающее окно подтверждения */}
{showConfirm && (
<div className="confirm-modal">
<div className="modal-content">
<p><strong>Вы действительно хотите удалить аккаунта?</strong></p>
<div className="modal-buttons">
<button onClick={deleteAccount}>Подтвердить</button>
<button onClick={closeWindowDelete}>Отменить</button>
</div>
</div>
</div>
)}
</div>
<button type="submit">Подтвердить</button>
</form>
<button onClick={closeWindowUserName}>Отменить</button>
</div>
</div>
)}
{ShowConfirmName && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Обновите отображаемое имя</h3></div>
<div><p>Текущее отображаемое имя: {user}</p></div>
<div className="com">Новое отображаемое имя</div>
<form onSubmit={NewDisplayName}>
<div>
<input
type="text"
value={new_display_name}
onChange={(e) => setnew_display_name(e.target.value)}
required
/>
</div>
<button type="submit">Подтвердить</button>
</form>
<button onClick={closeWindowName}>Отменить</button>
</div>
</div>
)}
{showChangePassword && (
<div className="confirm-modal">
<div className="modal-content">
<h3>Изменить пароль</h3>
{passwordError && (
<div className="error" style={{ color: 'red' }}>
{passwordError}
</div>
)}
<form onSubmit={changePassword}>
<div className="form-group">
<label>Текущий пароль:</label>
<input
type="password"
value={old_password}
onChange={(e) => setold_password(e.target.value)}
required
/>
</div>
<div className="form-group">
<label>Новый пароль:</label>
<input
type="password"
value={new_password}
onChange={(e) => setnew_password(e.target.value)}
required
/>
</div>
<div className="form-group">
<label>Повторите новый пароль:</label>
<input
type="password"
value={new_password_confirm}
onChange={(e) => setnew_password_confirm(e.target.value)}
required
/>
</div>
<div className="modal-buttons">
<button type="submit">Изменить пароль</button>
<button
type="button"
onClick={() => setShowChangePassword(false)}
>
Отменить
</button>
</div>
</form>
</div>
</div>
)}
{/* Всплывающее окно подтверждения */}
{showConfirm && (
<div className="confirm-modal">
<div className="modal-content">
<p><strong>Вы действительно хотите удалить аккаунта?</strong></p>
<div className="modal-buttons">
<button onClick={deleteAccount}>Подтвердить</button>
<button onClick={closeWindowDelete}>Отменить</button>
</div>
</div>
</div>
)}
</div></>
);
</>
);
};
export default Profile;

3
src/Registration.js
View File

@@ -26,7 +26,6 @@ const Registration = () => {
setPassword('');
setPassword_confirm('');
} catch (err) {
// Обрабатываем ошибки от сервера (например, дубликат password)
setError(err.response.data.detail || 'Пароль должен иметь длинну от 8 до 16 символов, содержать заглавные и строчные буквы, цифры и спец символ(_-?.!@\'`)');
} finally {
setLoading(false);
@@ -81,7 +80,7 @@ const Registration = () => {
/>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Регистрация...' : 'Зарегистрироваться'}
{loading ? 'Регистрация...' : 'Зарегистрироваться'}
</button>
</form>
<button onClick={handleLoginClick}>

12
src/_Shablon.js
View File

@@ -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 />
<div className="">
</div></>
<>
<Header />
<div className="">
</div>
</>
);
}

306
src/css/App.css Normal file
View File

@@ -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;
}

63
src/css/BoardList.css Normal file
View File

@@ -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;
}

79
src/css/Header.css Normal file
View File

@@ -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;
}

52
src/css/Modal.css Normal file
View File

@@ -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
}

6
src/index.js
View File

@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function