35 changed files with 7099 additions and 1 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -1,2 +1,47 @@
-# Internet_Programming_PIbd-22_Fedorenko_Galina
+### Окружение:
+- [nodejs 20 LTS latest](https://nodejs.org/en/download/);
+- [VSCode](https://code.visualstudio.com/download);
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) плагин для VSCode;
+- [CSS Class Intellisense](https://marketplace.visualstudio.com/items?itemName=Tarrow.css-class-intellisense) плагин для автодополнения CSS-классов в HTML;
+- для отладки необходимы бразузеры Chrome или Edge.

+Настройки плагина CSS Class Intellisense находятся в файле ./vscode/cssconfig.json
+
+### Команды
+
+#### Создание пустого проекта:
+
+```commandline
+npm create vite@latest ./ -- --template react 
+```
+
+#### Установка зависимостей:
+
+```commandline
+npm install
+```
+
+#### Запуск проекта в режиме разработки (development):
+
+```commandline
+npm run dev
+```
+
+#### Запуск проекта в продуктовом режиме (production):
+
+```commandline
+npm run prod
+```
+
+### Полезные ссылки
+
+1. Updating Objects in State - https://react.dev/learn/updating-objects-in-state
+2. Sharing State Between Components - https://react.dev/learn/sharing-state-between-components
+3. React Hot Toast - https://react-hot-toast.com
+4. Axios - https://axios-http.com
+5. Axios & Error handling like a boss - https://dev.to/mperon/axios-error-handling-like-a-boss-333d
+6. Separation of Concerns in React –How to Use Container and Presentational Components - https://www.freecodecamp.org/news/separation-of-concerns-react-container-and-presentational-components/
+7. Separation of concerns in React and React Native - https://dev.to/sathishskdev/separation-of-concerns-in-react-and-react-native-45b7
+8. React Bootstrap - https://react-bootstrap.netlify.app
+9. React Bootstrap Icons - https://github.com/ismamz/react-bootstrap-icons
+10. JSON Server - https://www.npmjs.com/package/json-server
--- a/data.json
+++ b/data.json
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/book.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Книжный подвальчик</title>
+</head>
+
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "sourceMap": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/json-server.json
+++ b/json-server.json
@ -0,0 +1,5 @@
+{
+    "static": "./node_modules/json-server/public",
+    "port": 8081,
+    "watch": "true"
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,38 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "rest": "json-server data.json",
+    "vite": "vite",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "react-hot-toast": "^2.4.1",
+    "axios": "^1.6.1",
+    "bootstrap": "^5.3.2",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "json-server": "^0.17.4",
+    "npm-run-all": "^4.1.5",
+    "vite": "^4.4.5"
+  }
+}
--- a/public/background.jpg
+++ b/public/background.jpg
--- a/public/backgroung_sign.png
+++ b/public/backgroung_sign.png
--- a/public/book.png
+++ b/public/book.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
+  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+</svg>
--- a/public/mast-marg.png
+++ b/public/mast-marg.png
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Footer from './components/footer/Footer.jsx';
+import Navigation from './components/navigation/Navigation.jsx';
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Navigation routes={routes}></Navigation>
+      <Container className='p-0 d-flex' fluid>
+        <Outlet />
+      </Container>
+      <Footer />
+    </>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;
--- a/src/components/footer/Footer.css
+++ b/src/components/footer/Footer.css
@ -0,0 +1,9 @@
+.footer {
+    font-family: 'Jost', sans-serif;
+    position: fixed; 
+    bottom: 0;
+    width: 100%;
+    padding: 5px 0;
+    background-color: #452A21 !important; 
+    z-index: 999; 
+  }
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@ -0,0 +1,11 @@
+import './Footer.css';
+
+const Footer = () => {
+    return (
+        <footer className="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
+            Федоренко Галина, ПИбд-22
+        </footer>
+    );
+};
+
+export default Footer;
--- a/src/components/navigation/Navigation.css
+++ b/src/components/navigation/Navigation.css
@ -0,0 +1,30 @@
+.nav-link {
+    font-family: 'Jost', sans-serif;
+    font-size: 24px;
+    margin-right: 25px;
+    color: white !important;
+  }
+  
+  .nav-link:hover{
+    color: #91745f !important;
+  }
+  
+  .navbar-brand svg path {
+    transition: fill .4s;
+  }
+  
+  .navbar-brand:hover svg path {
+    fill: #91745f;
+  }
+
+   .navbar {
+    background-color: #452A21 !important;
+  }
+
+  @media (max-width: 767px) {
+    .nav-link {
+      font-size: 18px; 
+      margin-right: 10px; 
+      margin-left: 10px; 
+    }
+  }
--- a/src/components/navigation/Navigation.jsx
+++ b/src/components/navigation/Navigation.jsx
@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+// import { Cart2 } from 'react-bootstrap-icons';
+import { Link, useLocation } from 'react-router-dom';
+import './Navigation.css';
+
+const Navigation = ({ routes }) => {
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false).shift();
+    const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
+
+    return (
+        <Navbar expand='md' bg='dark' data-bs-theme='dark'>
+            <Container>
+                <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                    <svg
+                        width={60}
+                        height={60}
+                        viewBox="0 0 60 60"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                        id="Vector"
+                        d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z"
+                        stroke="white"
+                        strokeWidth={2}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        />
+                        <path
+                        id="Vector_2"
+                        d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z"
+                        stroke="white"
+                        strokeWidth={2}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        />
+                    </svg>
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls='responsive-navbar-nav' />
+                <Navbar.Collapse id='responsive-navbar-nav'>
+                    <Nav className='me-auto' activeKey={location.pathname}>
+                        {pages.map((page) => (
+                            <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
+                                {page.title}
+                            </Nav.Link>
+                        ))}
+                    </Nav>
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200&display=swap');
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,64 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+import ErrorPage from './pages/ErrorPage.jsx';
+import Page1 from './pages/Page1.jsx';
+import Page2 from './pages/Page2.jsx';
+import Page3 from './pages/Page3.jsx';
+import Page4 from './pages/Page4.jsx';
+import Page5 from './pages/Page5.jsx';
+import PageEdit from './pages/PageEdit.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <Page1 />,
+  },
+  {
+    path: '/catalog',
+    element: <Page2 />,
+    title: 'Каталог',
+  },
+  {
+    path: '/book',
+    element: <Page3 />,
+  },
+  {
+    path: '/sign_in',
+    element: <Page3 />,
+    title: 'Вход',
+  },
+  {
+    path: '/sign_up',
+    element: <Page4 />,
+    title: 'Регистрация',
+  },
+  {
+    path: '/admin_page',
+    element: <Page5 />,
+    title: 'Админка',
+  },
+  {
+    path: '/page-edit',
+    element: <PageEdit />,
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={routes} />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
--- a/src/pages/ErrorPage.jsx
+++ b/src/pages/ErrorPage.jsx
@ -0,0 +1,19 @@
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Container fluid className="p-2 row justify-content-center">
+            <Container className='col-md-6'>
+                <Alert variant="danger">
+                    Страница не найдена
+                </Alert>
+                <Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;
--- a/src/pages/Page1.jsx
+++ b/src/pages/Page1.jsx
@ -0,0 +1,26 @@
+// import { Link } from 'react-router-dom';
+import './styles/Title.css';
+
+const Page1 = () => {
+    return (
+        <div className="background-style">
+            <div className="container text-center">
+                <h1 className="display-4">Книжный подвальчик</h1>
+                <div className="row">
+                    <div className="col-6"></div>
+                    <div className="col-6">
+                        <blockquote className="blockquote text-right">
+                            <p>
+                            Без книг пуста человеческая жизнь. Книга не только наш друг, но и
+                            постоянный вечный спутник.
+                            </p>
+                            <footer className="blockquote-footer">Д. Бедный</footer>
+                        </blockquote>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Page1;
--- a/src/pages/Page2.jsx
+++ b/src/pages/Page2.jsx
@ -0,0 +1,47 @@
+// import { Table } from 'react-bootstrap';
+// import ulstuLogo from '../assets/logo.png';
+import './styles/Catalog.css';
+
+const Page2 = () => {
+    return (
+        <main className="container main_pannel">
+            <div id="my-id-for-text" className="row">
+                <div className="col-12 col-md-6 col-lg-4 col-xl-3">
+                    <div className="book">
+                        <img src="public\mast-marg.png" alt="Обложка" />
+                        <h3>Мастер и Маргарита, М.А. Булгаков</h3>
+                        <a href="#link" className="btn btn-custom" role="button">Подробнее</a>
+                        <a href="#link" className="btn btn-custom" role="button">В избранное</a>
+                    </div>
+                </div>
+                <div className="col-12 col-md-6 col-lg-4 col-xl-3">
+                    <div className="book">
+                        <img src="public\mast-marg.png" alt="Обложка" />
+                        <h3>Мастер и Маргарита, М.А. Булгаков</h3>
+                        <a href="#link" className="btn btn-custom" role="button">Подробнее</a>
+                        <a href="#link" className="btn btn-custom" role="button">В избранное</a>
+                    </div>
+                </div>
+                <div className="col-12 col-md-6 col-lg-4 col-xl-3">
+                    <div className="book">
+                        <img src="public\mast-marg.png" alt="Обложка" />
+                        <h3>Мастер и Маргарита, М.А. Булгаков</h3>
+                        <a href="#link" className="btn btn-custom" role="button">Подробнее</a>
+                        <a href="#link" className="btn btn-custom" role="button">В избранное</a>
+                    </div>
+                </div>
+                <div className="col-12 col-md-6 col-lg-4 col-xl-3">
+                    <div className="book">
+                        <img src="public\mast-marg.png" alt="Обложка" />
+                        <h3>Мастер и Маргарита, М.А. Булгаков</h3>
+                        <a href="#link" className="btn btn-custom" role="button">Подробнее</a>
+                        <a href="#link" className="btn btn-custom" role="button">В избранное</a>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+    );
+};
+
+export default Page2;
--- a/src/pages/Page3.jsx
+++ b/src/pages/Page3.jsx
@ -0,0 +1,42 @@
+/* import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap'; */
+
+import './styles/Sign.css';
+import { Link } from 'react-router-dom';
+
+const Page3 = () => {
+    return (
+        <div className="background-image">
+            <div className="sign-in-container">
+                <h2 className="custom-h">Добро пожаловать!</h2>
+                <form id="registrationForm" action="index.html">
+                <div className="row justify-content-center">
+                    <input
+                    type="text"
+                    className="form-control"
+                    id="username"
+                    placeholder="логин"
+                    />
+                    <input
+                    type="password"
+                    className="form-control"
+                    id="password"
+                    placeholder="пароль"
+                    />
+                    <button type="submit" className="btn btn-custom" id="submit-btn">
+                    ВОЙТИ
+                    </button>
+                    <p className="custom-text">
+                    Ещё нет аккаунта?{}
+                    <Link to="/sign_up" className="custom-a">
+                        Зарегистрироваться
+                    </Link>
+                    </p>
+                </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default Page3;
--- a/src/pages/Page4.jsx
+++ b/src/pages/Page4.jsx
@ -0,0 +1,49 @@
+/* import { Button, ButtonGroup, Table } from 'react-bootstrap';
+import { Link } from 'react-router-dom'; */
+
+import './styles/Sign.css';
+import { Link } from 'react-router-dom';
+
+const Page4 = () => {
+    return (
+        <div className="background-image">
+            <div className="sign-up-container">
+                <h2 className="custom-h">Регистрация</h2>
+                <form id="registrationForm" action="">
+                <div className="row justify-content-center">
+                    <input
+                    type="text"
+                    className="form-control"
+                    id="username"
+                    placeholder="логин"
+                    />
+                    <input
+                    type="text"
+                    className="form-control"
+                    id="email"
+                    placeholder="email"
+                    />
+                    <input
+                    type="password"
+                    className="form-control"
+                    id="password"
+                    placeholder="пароль"
+                    />
+                    <button type="submit" className="btn btn-custom" id="submitButton">
+                    ЗАРЕГИСТРИРОВАТЬСЯ
+                    </button>
+                    <p className="custom-text">
+                    Уже есть аккаунт?{}
+                    <Link to="/sign_in" className="custom-a">
+                        Войти
+                    </Link>
+                    </p>
+                </div>
+                </form>
+            </div>
+        </div>
+
+    );
+};
+
+export default Page4;
--- a/src/pages/Page5.jsx
+++ b/src/pages/Page5.jsx
@ -0,0 +1,87 @@
+/* eslint-disable linebreak-style */
+import { Table } from 'react-bootstrap';
+import './styles/Admin.css';
+
+const Page5 = () => {
+    return (
+        <div className="container-fluid p-2 m-2">
+            <div className="btn-group" role="group">
+                <button id="items-add" className="btn btn-admin ">
+                Добавить книгу
+                </button>
+            </div>
+            <div>
+                <Table hover >
+                    <thead className="thead-dark">
+                        <tr>
+                        <th scope="col">№</th>
+                        <th scope="col" className="w-25">
+                            Название
+                        </th>
+                        <th scope="col" className="w-25">
+                            Автор
+                        </th>
+                        <th scope="col" className="w-25">
+                            Жанр
+                        </th>
+                        <th scope="col" className="w-15">
+                            Год выпуска
+                        </th>
+                        <th scope="col" className="w-25">
+                            Описание
+                        </th>
+                        <th scope="col" />
+                        <th scope="col" />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr id="line-4">
+                            <th scope="row">1</th>
+                            <td>Мастер и Маргарита</td>
+                            <td>М.А. Булгаков</td>
+                            <td>Роман</td>
+                            <td>1847</td>
+                            <td>12345</td>
+                            <td>
+
+                            </td>
+                            <td>
+
+                            </td>
+                        </tr>
+                        <tr id="line-5">
+                            <th scope="row">2</th>
+                            <td>Гарри Поттер и философский камень</td>
+                            <td>Дж. К. Роулинг</td>
+                            <td>Фэнтези</td>
+                            <td>1997</td>
+                            <td>оно есть....</td>
+                            <td>
+
+                            </td>
+                            <td>
+
+                            </td>
+                        </tr>
+                        <tr id="line-6">
+                            <th scope="row">3</th>
+                            <td>Грозовой перевал</td>
+                            <td>Э. Бронте</td>
+                            <td>Трагедия</td>
+                            <td>1867</td>
+                            <td>трагедия</td>
+                            <td>
+
+                            </td>
+                            <td>
+
+                            </td>
+                        </tr>
+                    </tbody>
+                </Table>
+            </div>
+        </div>
+    );
+};
+
+export default Page5;
--- a/src/pages/PageEdit.jsx
+++ b/src/pages/PageEdit.jsx
@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const PageEdit = () => {
+    const [validated, setValidated] = useState(false);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        setValidated(true);
+    };
+
+    return (
+        <>
+            <div className="text-center">
+                <img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
+                    alt="placeholder" />
+            </div>
+            <Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2" controlId="item">
+                    <Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
+                    <Form.Select name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="price">
+                    <Form.Label>Цена</Form.Label>
+                    <Form.Control type="number" name="price"
+                        value="0.00" min="1000.00" step="0.50" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="count">
+                    <Form.Label>Количество</Form.Label>
+                    <Form.Control type="number" name="count"
+                        value="0" min="1" step="1" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="file">
+                    <Form.Label>Изображение</Form.Label>
+                    <Form.Control type="file" name="image" accept="image/*" />
+                </Form.Group>
+                <Form.Group className="d-flex flex-md-row flex-column justify-content-center">
+                    <Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/page4" variant="secondary">Назад</Button>
+                    <Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
+                </Form.Group>
+            </Form>
+        </>
+    );
+};
+
+export default PageEdit;
--- a/src/pages/styles/Admin.css
+++ b/src/pages/styles/Admin.css
@ -0,0 +1,48 @@
+.row {
+    display: flex; 
+    flex-wrap: wrap; 
+    justify-content: space-between; 
+    
+}
+
+/*.table {
+    --bs-th-bg: #452A21;
+    --bs-table-border-color: #d6b0a2;
+    --bs-tb-bg: #d6b0a2;
+}
+
+thead {
+    background-color: #452A21 !important;
+  }
+
+  tbody {
+    background-color: #d6b0a2 !important;
+  }
+*/ 
+
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h3 {
+    font-size: 1.1em;
+}
+
+.btn-admin {
+    bottom: 5px;
+    background-color: #452A21 !important;
+    color: white !important;
+}
+
+.btn-admin:hover {
+    background-color: #866a60 !important;
+    color: black !important;
+}
+
+#image-preview {
+    width: 200px;
+}
--- a/src/pages/styles/Catalog.css
+++ b/src/pages/styles/Catalog.css
@ -0,0 +1,88 @@
+body {
+    background-color: #91745f; 
+}
+
+.book {
+    padding: 15px;
+    text-align: center;
+    margin-bottom: 20px;
+    flex: 0 0 calc(25% - 30px);
+}
+
+.book img {
+    max-width: 60%;
+    max-height: 340px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.book h3 {
+    color: #FFF;
+    text-align: center;
+    font-family: Jost;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    margin-bottom: 10px;
+    height: 100px;
+}
+
+.book button {
+    width: 80%;
+    margin-top: 10px;
+}
+
+a.btn-custom {
+    border-radius: 8px;
+    width: 250px;
+    height: 50px;
+    margin-bottom: 20px;
+    background-color: #452B21;
+    color: #fff;
+    text-align: center;
+    font-family: Jost;
+    font-size: 25px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    border: 2px solid #452B21;
+}
+
+a.btn-custom:hover {
+    background-color: #66442B;
+    border: 2px solid #66442B;
+}
+
+.footer {
+    font-family: 'Jost', sans-serif;
+    position: fixed; 
+    bottom: 0;
+    width: 100%;
+    padding: 5px 0;
+    background-color: #452A21 !important; 
+    z-index: 999;
+}
+
+.about {
+    margin-top: 20px;
+    color: white;
+    font-family: Jost;
+    text-align:justify;
+    font-size: 24px; 
+}
+
+@media (max-width: 767px) {
+    a.btn-custom {
+        display: block;
+        margin-bottom: 20px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .about {
+        margin-left: 15px;
+        margin-right: 15px;
+        font-size: 20px;
+    }
+}
--- a/src/pages/styles/Sign.css
+++ b/src/pages/styles/Sign.css
@ -0,0 +1,150 @@
+.nav-item svg path {
+    transition: fill .4s;
+  }
+  
+  .nav-item:hover svg path {
+    fill: #79584c;
+  }
+
+.background-image {
+    background-image: url("../../../public/backgroung_sign.png");
+    background-size: cover;
+    width: 50%;
+    height: 100vh; 
+    display: inline-block;
+}
+
+.sign-in-container {
+    background-color: #ffffff; 
+    border-radius: 15px; 
+    padding: 20px;
+    width: 500px;
+    height: 400px;
+    position: relative;
+    top: 8%;
+    right: 0;
+    bottom: 0;
+    left: 50%;
+    margin: auto;
+}
+
+.sign-up-container {
+    background-color: #ffffff; 
+    border-radius: 15px; 
+    padding: 20px;
+    width: 500px;
+    height: 475px;
+    position: relative;
+    top: 1%;
+    right: 0;
+    bottom: 0;
+    left: 50%;
+    margin: auto;
+}
+
+.custom-h {
+    color: #000;
+    text-align: center;
+    font-family: Jost;
+    font-size: 50px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: normal;
+    margin-bottom: 20px;
+}
+
+.input-box {
+    border-radius: 8px;
+    font-size: 17px;
+    width: 450px;
+    height: 60px;
+    margin-bottom: 20px;
+}
+
+.form-control {
+    border-radius: 8px;
+    font-size: 17px;
+    width: 450px;
+    height: 60px;
+    margin-bottom: 20px;
+}
+
+.btn-custom {
+    border-radius: 8px;
+    width: 450px;
+    height: 60px;
+    background-color: #452B21;
+    margin-bottom: 20px;
+    color: #fff;
+    text-align: center;
+    font-family: Jost;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    border: 2px solid #452B21;
+}
+
+.btn-custom:hover {
+    background-color: #66442B;
+    border: 2px solid #66442B;
+}
+
+.custom-text {
+    color: #8C8C8C;
+    text-align: center;
+    font-family: Jost;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.custom-a {
+    color: #452B21;
+    font-family: Jost;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.custom-a:hover {
+    color: #9c614a;
+}
+
+.error {
+    border-color: red !important;
+    background-color: rgba(255, 222, 222, 0.26) !important;
+}
+
+@media (max-width: 767px) {
+    .sign-in-container {
+        width: 290px;
+        height: 375px;
+        padding: 10px;
+        left:5%;
+
+    }
+
+    .sign-up-container {
+        width: 290px;
+        height: 425px;
+        padding: 10px;
+        top: 5%;
+        left:5%;
+    }
+
+    .custom-h {
+        font-size: 28px;
+    }
+
+    .form-control {
+        width: 80%;
+    }
+
+    .btn-custom {
+        width: 80%;
+        font-size: 90%;
+    }
+}
--- a/src/pages/styles/Title.css
+++ b/src/pages/styles/Title.css
@ -0,0 +1,90 @@
+/*body {
+  background-image: url("../../../public/background.jpg");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+}*/
+
+.background-style{
+  background-image: url("../../../public/background.jpg");
+  background-size: cover;
+  background-position: center;
+  height: 100vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-link {
+  font-family: 'Jost', sans-serif;
+  font-size: 24px;
+  margin-right: 25px;
+  color: white !important;
+}
+
+.nav-link:hover{
+  color: #79584c !important;
+}
+
+.nav-item svg path {
+  transition: fill .4s;
+}
+
+.nav-item:hover svg path {
+  fill: #79584c;
+}
+
+.display-4 {
+  color: #FFF;
+  font-family: 'Source Serif 4';
+  font-size: 96px;
+  font-style: normal;
+  margin-top: 100px; 
+}
+
+blockquote {
+  color: white;
+  font-family: 'Source Serif 4';
+  text-align: right;
+  font-size: 24px;
+  margin-top: 30px; 
+}
+
+blockquote footer {
+  color: white !important;
+  font-family: 'Source Serif 4';
+  text-align: right;
+  font-size: 24px; 
+}
+
+.footer {
+  font-family: 'Jost', sans-serif;
+  position: fixed; 
+  bottom: 0;
+  width: 100%;
+  padding: 5px 0;
+  background-color: #452A21 !important; 
+  z-index: 999; 
+}
+
+@media (max-width: 767px) {
+  .nav-link {
+    font-size: 18px; 
+    margin-right: 10px; 
+    margin-left: 10px; 
+  }
+
+  .display-4 {
+    font-size: 40px; 
+    margin-top: 50px; 
+  }
+
+  blockquote {
+    font-size: 18px !important; 
+    margin-top: 20px; 
+  }
+
+  blockquote footer {
+    font-size: 18px; 
+  }
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});
--- a/Лаб1/Отчёт.docx
+++ b/Лаб1/Отчёт.docx
				`@ -0,0 +1 @@`
				`@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200&display=swap');`