Lab5

2023-12-05 14:12:50 +04:00 · 2023-12-05 14:12:50 +04:00 · 0342b1c52b
commit 0342b1c52b
parent 82435eb44c
93 changed files with 8357 additions and 0 deletions
--- a/Lab4/.idea/Lab4.iml
+++ b/Lab4/.idea/Lab4.iml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/Lab4/.idea/misc.xml
+++ b/Lab4/.idea/misc.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
--- a/Lab4/.idea/modules.xml
+++ b/Lab4/.idea/modules.xml
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Lab4.iml" filepath="$PROJECT_DIR$/.idea/Lab4.iml" />
+    </modules>
+  </component>
+</project>
--- a/Lab4/.idea/vcs.xml
+++ b/Lab4/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>
--- a/Lab4/.idea/workspace.xml
+++ b/Lab4/.idea/workspace.xml
@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="9301f391-9a91-404b-b7fd-ad4901208d23" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
+  </component>
+  <component name="ProjectColorInfo"><![CDATA[{
+  "associatedIndex": 3
+}]]></component>
+  <component name="ProjectId" id="2YtoV34KcD3vZhAHxL1qQc5S7yt" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "main",
+    "last_opened_file_path": "C:/Users/123/Desktop/Internt_Programmirovanie_PIbd23_Yashin/Lab4",
+    "nodejs_package_manager_path": "npm",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="9301f391-9a91-404b-b7fd-ad4901208d23" name="Changes" comment="" />
+      <created>1701354257151</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1701354257151</updated>
+      <workItem from="1701354258219" duration="195000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
--- a/Lab4/package-lock.json
+++ b/Lab4/package-lock.json
@ -0,0 +1,6 @@
+{
+  "name": "Lab4",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
--- a/Lab5/.gitignore
+++ b/Lab5/.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/Lab5/counter.js
+++ b/Lab5/counter.js
@ -0,0 +1,9 @@
+export function setupCounter(element) {
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}
--- a/Lab5/data.json
+++ b/Lab5/data.json
--- a/Lab5/imgs.txt
+++ b/Lab5/imgs.txt
@ -0,0 +1,3 @@
+img/image 4.jpg
+img/image 5.jpg
+img/image 3.jpg
--- a/Lab5/index.html
+++ b/Lab5/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Extremal Driving</title>
+    <link rel="stylesheet" href="src/myStyle.css">
+</head>
+
+<body class="bg-image overflow-visible pageBackground">
+    <div id="root" class="h-100 d-flex flex-column"></div>
+    <script type="module" src="./src/main.jsx"></script>
+</body>
+</html>
--- a/Lab5/javascript.svg
+++ b/Lab5/javascript.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
--- a/Lab5/main.js
+++ b/Lab5/main.js
@ -0,0 +1,24 @@
+import './style.css'
+import javascriptLogo from './javascript.svg'
+import viteLogo from '/vite.svg'
+import { setupCounter } from './counter.js'
+
+document.querySelector('#app').innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello Vite!</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite logo to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector('#counter'))
--- a/Lab5/package-lock.json
+++ b/Lab5/package-lock.json
--- a/Lab5/package.json
+++ b/Lab5/package.json
@ -0,0 +1,40 @@
+{
+  "name": "web-site-vite",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "vite": "vite",
+    "serve": "http-server -p 3000 ./dist/",
+    "build": "vite build",
+    "rest": "json-server --watch data.json -p 8081",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all build --parallel serve rest"
+  },
+  "dependencies": {
+    "bootstrap": "5.2.1",
+    "@fortawesome/fontawesome-free": "6.4.2",
+    "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",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "vite": "4.4.9",
+    "eslint": "8.50.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "http-server": "14.1.1",
+    "json-server": "0.17.4",
+    "npm-run-all": "4.1.5",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3"
+  }
+}
--- a/Lab5/public/vite.svg
+++ b/Lab5/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/Lab5/src/App.jsx
+++ b/Lab5/src/App.jsx
@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import {Toaster} from 'react-hot-toast';
+import Footer from './components/footer/footer.jsx';
+import Navigation from './components/navigation/nav-bar.jsx';
+
+const App = ({ routes }) => {
+    return (
+        <>
+            <Navigation routes={routes}></Navigation>
+            <Container className='p-2' as="main" fluid>
+                <Outlet />
+            </Container>
+            <Footer />
+            <Toaster />
+        </>
+    );
+};
+
+App.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default App;
--- a/Lab5/src/assets/AccountIcon.png
+++ b/Lab5/src/assets/AccountIcon.png
--- a/Lab5/src/assets/CourseImage1.jpg
+++ b/Lab5/src/assets/CourseImage1.jpg
--- a/Lab5/src/assets/CourseImage2.jpg
+++ b/Lab5/src/assets/CourseImage2.jpg
--- a/Lab5/src/assets/CourseImage3.jpg
+++ b/Lab5/src/assets/CourseImage3.jpg
--- a/Lab5/src/assets/MainBackGround.jpg
+++ b/Lab5/src/assets/MainBackGround.jpg
--- a/Lab5/src/assets/image
+++ b/Lab5/src/assets/image
--- a/Lab5/src/assets/image
+++ b/Lab5/src/assets/image
--- a/Lab5/src/assets/image
+++ b/Lab5/src/assets/image
--- a/Lab5/src/assets/lable.png
+++ b/Lab5/src/assets/lable.png
--- a/Lab5/src/assets/map.png
+++ b/Lab5/src/assets/map.png
--- a/Lab5/src/assets/pen-to-square.png
+++ b/Lab5/src/assets/pen-to-square.png
--- a/Lab5/src/assets/placeHolder.png
+++ b/Lab5/src/assets/placeHolder.png
--- a/Lab5/src/assets/togglerIcon.png
+++ b/Lab5/src/assets/togglerIcon.png
--- a/Lab5/src/assets/trash.png
+++ b/Lab5/src/assets/trash.png
--- a/Lab5/src/components/Courses/CourseCard.jsx
+++ b/Lab5/src/components/Courses/CourseCard.jsx
@ -0,0 +1,39 @@
+import {Button} from "react-bootstrap";
+import PropTypes from "prop-types";
+import placeHolder from "../../assets/placeHolder.png";
+
+const CourseCard = ({line, onClick}) => {
+    var sale = 'text-danger mt-2';
+    if(line.benefit == 0) {
+        sale = 'opacity-0 mt-2';
+    }
+    const handleButtonClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+
+    return (
+        <div className="col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-1 px-xl-3 rounded-8 formStyle wfitcon minW-260 height-420">
+            <div className="my-3 fs-5 fw-bold">
+                <h4 className='fw-bold'>{line.type.name}</h4>
+                <img src={line.image || placeHolder} className="my-3 rounded-8" alt="image" height="150" /><br/>
+                Занятия: {line.count} <br/>
+                {parseInt(line.sum).toFixed(0)} рублей <br/>
+                <h5 id='diffrens' className={sale}>Скидка {parseInt(line.benefit).toFixed(0)} рублей!</h5>
+            </div>
+            <Button className="rounded-pill btn-lg text-light mt-2 fs-6 purple" onClick={(event) => handleButtonClick(event, onClick)}>
+                Записаться
+            </Button>
+        </div>
+    )
+}
+
+CourseCard.propTypes = {
+    sum: PropTypes.string,
+    count: PropTypes.string,
+    benefit: PropTypes.string,
+    image: PropTypes.string,
+    onClick: PropTypes.func
+};
+
+export default CourseCard;
--- a/Lab5/src/components/Courses/CourseForm.jsx
+++ b/Lab5/src/components/Courses/CourseForm.jsx
@ -0,0 +1,22 @@
+import {Container} from "react-bootstrap";
+import PropTypes from "prop-types";
+import ModalForm from "../modal/ModalForm.jsx";
+import ReviewsItemForm from "../reviews/Reviews/ReviewsItemForm.jsx";
+import ModalLogIn from "../modal/ModalLogIn.jsx";
+
+const CourseForm = ({ children }) => {
+    return(
+        <>
+            <Container className='width-90 mx-auto my-5'>
+                <div className='row row-cols-xl-3 row-cols-md-2 row-cols-1 pd-3  text-center text-secondary-emphasis'>
+                    { children }
+                </div>
+            </Container>
+        </>
+    )
+}
+CourseForm.propTypes = {
+    children: PropTypes.node,
+};
+
+export default CourseForm;
--- a/Lab5/src/components/Courses/Courses.jsx
+++ b/Lab5/src/components/Courses/Courses.jsx
@ -0,0 +1,43 @@
+import useTypeFilter from "../lines/hooks/LinesFilterHook.js";
+import useLines from "../lines/hooks/LinesHook.js";
+import useCoursesFormModal from "./hooks/CoursesFormModalHook.js";
+import SelectWithOutPrice from "../input/SelectWithOutPrice.jsx";
+import CourseForm from "./CourseForm.jsx";
+import CourseCard from "./CourseCard.jsx";
+import ModalForm from "../modal/ModalForm.jsx";
+import {useState} from "react";
+import Input from "../input/Input.jsx";
+import useInputValue from "./hooks/InputValueHook.js";
+import ModalLogIn from "../modal/ModalLogIn.jsx";
+import useModal from "../modal/ModalHook.js";
+
+const Courses = () => {
+    const { types, currentFilter, handleFilterChange } = useTypeFilter();
+    const {lines, handelLinesChange} = useLines(currentFilter);
+    const input = useInputValue('');
+    const { isModalShow, showModal, hideModal } = useModal();
+
+
+
+
+    return (
+        <div className='formStyle width-90 rounded-8 p-2 mx-auto '>
+            <SelectWithOutPrice className='mt-2' values={types} label='Фильтр по категориям'
+                                value={currentFilter} onChange={handleFilterChange} />
+            <CourseForm>
+                {
+                    lines.map((line, index) =>
+                        <CourseCard key={line.id} line={line} onClick={() => showModal()}/>
+                    )
+                }
+            </CourseForm>
+            <ModalForm show={isModalShow}
+                       onClick={input.onClick} onClose={hideModal}
+                       title='Запись'>
+                <ModalLogIn input={input}/>
+            </ModalForm>
+        </div>
+    )
+}
+
+export default Courses;
--- a/Lab5/src/components/Courses/hooks/CoursesFormModalHook.js
+++ b/Lab5/src/components/Courses/hooks/CoursesFormModalHook.js
@ -0,0 +1,45 @@
+import { useState } from 'react';
+import useModal from '../../modal/ModalHook';
+import useCoursesItemForm from "./CoursesItemFormHook.js";
+
+const useCoursesFormModal = (reviewsChangeHandle) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    } = useCoursesItemForm(currentId, reviewsChangeHandle);
+
+    const showModalDialog = (id) => {
+        setCurrentId(id);
+        resetValidity();
+        showModal();
+    };
+
+    const onClose = () => {
+        setCurrentId(-1);
+        hideModal();
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+            onClose();
+        }
+    };
+
+    return {
+        isFormModalShow: isModalShow,
+        isFormValidated: validated,
+        showFormModal: showModalDialog,
+        currentItem: item,
+        handleItemChange: handleChange,
+        handleFormSubmit: onSubmit,
+        handleFormClose: onClose,
+    };
+};
+
+export default useCoursesFormModal;
--- a/Lab5/src/components/Courses/hooks/CoursesItemFormHook.js
+++ b/Lab5/src/components/Courses/hooks/CoursesItemFormHook.js
@ -0,0 +1,62 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import getBase64FromFile from '../../utils/Base64';
+import LinesApiService from "../../lines/service/LinesApiService.js";
+import useReviewsItem from "./CoursesItemHook.js";
+
+const useReviewsItemForm = (id, linesChangeHandle) => {
+    const { item, setItem } = useReviewsItem(id);
+
+    const [validated, setValidated] = useState(false);
+
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const getReviewObject = (formData) => {
+        const name = formData.name;
+        const text = formData.text;
+        return {
+            name: name.toString(),
+            text: text.toString()
+        };
+    };
+
+    const handleChange = (event) => {
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+        setItem({
+            ...item,
+            [inputName]: inputValue,
+        });
+    };
+
+    const handleSubmit = async (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        const body = getReviewObject(item);
+        if (form.checkValidity()) {
+            if (id === undefined) {
+                await LinesApiService.create(body);
+            } else {
+                await LinesApiService.update(id, body);
+            }
+            if (linesChangeHandle) linesChangeHandle();
+            toast.success('Отзыв успешно сохранен', { id: 'Reviews' });
+            return true;
+        }
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    };
+};
+
+export default useReviewsItemForm;
--- a/Lab5/src/components/Courses/hooks/CoursesItemHook.js
+++ b/Lab5/src/components/Courses/hooks/CoursesItemHook.js
@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../../lines/service/LinesApiService';
+
+const useLinesItem = (id) => {
+    const emptyItem = {
+        id: '',
+        typeId: '',
+        price: '0',
+        count: '0',
+        image: '',
+    };
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await LinesApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default useLinesItem;
--- a/Lab5/src/components/Courses/hooks/InputComponent.jsx
+++ b/Lab5/src/components/Courses/hooks/InputComponent.jsx
@ -0,0 +1,15 @@
+import useInputValue from './InputValueHook.js';
+
+const InputComponent = () => {
+    const input = useInputValue('');
+
+    return (
+        <input
+            type="text"
+            value={input.value}
+            onChange={input.onChange}
+        />
+    );
+};
+
+export default InputComponent
--- a/Lab5/src/components/Courses/hooks/InputValueHook.js
+++ b/Lab5/src/components/Courses/hooks/InputValueHook.js
@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+import PropTypes from "prop-types";
+
+const useInputValue = (initialValue) => {
+    const emptyReqvest = {
+        name: '',
+        tel: '',
+    };
+    const [reqvest, setReqvest] = useState({ ...emptyReqvest });
+    const handleChange = (event) => {
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+        setReqvest({
+            ...reqvest,
+            [inputName]: inputValue,
+        });
+    };
+
+    const onClick = () => {
+        if(reqvest)
+            localStorage.setItem('inputValue', `Имя: ${reqvest.name} || Номер телефона: ${reqvest.tel}`);
+    };
+
+    return {
+        reqvest,
+        onChange: handleChange,
+        onClick: onClick,
+    };
+};
+useInputValue.propType = {
+    name: PropTypes.string,
+    tel: PropTypes.string
+}
+
+export default useInputValue;
--- a/Lab5/src/components/api/ApiClient.js
+++ b/Lab5/src/components/api/ApiClient.js
@ -0,0 +1,40 @@
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+export class HttpError extends Error {
+    constructor(message = '') {
+        super(message);
+        this.name = 'HttpError';
+        Object.setPrototypeOf(this, new.target.prototype);
+        toast.error(message, { id: 'HttpError' });
+    }
+}
+
+function responseHandler(response) {
+    if (response.status === 200 || response.status === 201) {
+        const data = response?.data;
+        if (!data) {
+            throw new HttpError('API Error. No data!');
+        }
+        return data;
+    }
+    throw new HttpError(`API Error! Invalid status code ${response.status}!`);
+}
+
+function responseErrorHandler(error) {
+    if (error === null) {
+        throw new Error('Unrecoverable error!! Error is null!');
+    }
+    toast.error(error.message, { id: 'AxiosError' });
+    return Promise.reject(error.message);
+}
+
+export const ApiClient = axios.create({
+    baseURL: 'http://localhost:8081/',
+    timeout: '5000',
+    headers: {
+        Accept: 'application/json',
+    },
+});
+
+ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
--- a/Lab5/src/components/api/ApiService.js
+++ b/Lab5/src/components/api/ApiService.js
@ -0,0 +1,29 @@
+import { ApiClient } from './ApiClient';
+
+class ApiService {
+    constructor(url) {
+        this.url = url;
+    }
+
+    async getAll(expand) {
+        return ApiClient.get(`${this.url}${expand || ''}`);
+    }
+
+    async get(id, expand) {
+        return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+    }
+
+    async create(body) {
+        return ApiClient.post(this.url, body);
+    }
+
+    async update(id, body) {
+        return ApiClient.put(`${this.url}/${id}`, body);
+    }
+
+    async delete(id) {
+        return ApiClient.delete(`${this.url}/${id}`);
+    }
+}
+
+export default ApiService;
--- a/Lab5/src/components/footer/footer.css
+++ b/Lab5/src/components/footer/footer.css
@ -0,0 +1,5 @@
+.footer-style{
+    background-color: rgba(249,134,23,0.8) !important;
+    border-top: 7px solid #7c2d00 !important;
+    width: 100%;
+}
--- a/Lab5/src/components/footer/footer.jsx
+++ b/Lab5/src/components/footer/footer.jsx
@ -0,0 +1,22 @@
+import './footer.css'
+
+const Footer = () => {
+    return (
+        <footer className="position-absolute top-100 footer-style">
+            <div className="container">
+                <div className="row">
+                    <div className="col-sm text-center text-sm-start text-light fw-bold fs-5">
+                        Техническая поддержка <br/>
+                        8-800-555-3535 <br/>
+                        valitzhoska73@gmail.com
+                    </div>
+                    <div className="col-sm text-center text-sm-end text-light fw-bold fs-5">
+                        Работаем без выходных с 8:00 до 21:30
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
--- a/Lab5/src/components/input/Input.jsx
+++ b/Lab5/src/components/input/Input.jsx
@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+import {useEffect} from "react";
+
+const Input = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label>{label}</Form.Label>
+            <Form.Control className='light-grey rounded-8'  name={name || ''} value={value || ''} onChange={onChange} {...rest} />
+        </Form.Group>
+    );
+};
+
+Input.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Input;
--- a/Lab5/src/components/input/Select.jsx
+++ b/Lab5/src/components/input/Select.jsx
@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+import {useNavigate} from "react-router-dom";
+
+const Select = ({
+    values, name, label, value, onChange, className, ...rest
+}) => {
+
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label className='form-label'>{label}</Form.Label>
+            <Form.Select className='light-grey rounded-8' name={name || ''} value={value || ''} onChange={onChange} {...rest}>
+                <option value=''>Выберите значение</option>
+                {
+                    values.map((type) => <option key={type.id} value={type.id}>{type.name + " " + type.basePrice + " рублей"}</option>)
+                }
+            </Form.Select>
+        </Form.Group>
+    );
+};
+
+Select.propTypes = {
+    values: PropTypes.array,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Select;
--- a/Lab5/src/components/input/SelectWithOutPrice.jsx
+++ b/Lab5/src/components/input/SelectWithOutPrice.jsx
@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const SelectWithOutPrice = ({
+                    values, name, label, value, onChange, className, ...rest
+                }) => {
+
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label className='form-label'>{label}</Form.Label>
+            <Form.Select className='light-grey rounded-8' name={name || ''} value={value || ''} onChange={onChange} {...rest}>
+                <option value=''>Выберите значение</option>
+                {
+                    values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
+                }
+            </Form.Select>
+        </Form.Group>
+    );
+};
+
+SelectWithOutPrice.propTypes = {
+    values: PropTypes.array,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default SelectWithOutPrice;
--- a/Lab5/src/components/lines/form/LinesForm.jsx
+++ b/Lab5/src/components/lines/form/LinesForm.jsx
@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import useLinesItemForm from '../hooks/LinesItemFormHook';
+import LinesItemForm from './LinesItemForm.jsx';
+
+const LinesForm = ({ id }) => {
+    const navigate = useNavigate();
+
+    const {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+    } = useLinesItemForm(id);
+
+    const onBack = () => {
+        navigate(-1);
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+            onBack();
+        }
+    };
+
+    return (
+        <>
+            <Form className='m-0 p-2 formStyle formSizeStyle rounded-8 mx-auto' noValidate validated={validated} onSubmit={onSubmit}>
+                <LinesItemForm item={item} handleChange={handleChange} />
+                <Form.Group className='row justify-content-center m-0 mt-3'>
+                    <Button className='col-5 col-lg-2 m-0 me-2 dark-grey rounded-pill text-light' onClick={() => onBack()}>
+                        Назад
+                    </Button>
+                    <Button className='col-5 col-lg-2 m-0 ms-2 purple rounded-pill text-light' type='submit'>
+                        Сохранить
+                    </Button>
+                </Form.Group>
+            </Form>
+        </>
+    );
+};
+
+LinesForm.propTypes = {
+    id: PropTypes.string,
+};
+
+export default LinesForm;
--- a/Lab5/src/components/lines/form/LinesItemForm.css
+++ b/Lab5/src/components/lines/form/LinesItemForm.css
@ -0,0 +1,3 @@
+#image-preview {
+    width: 200px;
+}
--- a/Lab5/src/components/lines/form/LinesItemForm.jsx
+++ b/Lab5/src/components/lines/form/LinesItemForm.jsx
@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import imgPlaceholder from '../../../assets/placeHolder.png';
+import Input from '../../input/Input.jsx';
+import Select from '../../input/Select.jsx';
+import useTypes from '../../types/hooks/TypesHook';
+import './LinesItemForm.css';
+
+const LinesItemForm = ({ item, handleChange }) => {
+    const { types } = useTypes();
+
+
+    return (
+        <>
+            <div className='text-center'>
+                <img className='rounded-8' alt='placeholder'
+                    src={item.image || imgPlaceholder} height={200} />
+            </div>
+            <Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
+                required />
+            <Input name='price' label='Цена' value={item.price} onChange={handleChange}
+                type='number' min='1000.0' step='0.50' required />
+            <Input name='count' label='Количество' value={item.count} onChange={handleChange}
+                type='number' min='1' step='1' required />
+            <Input name='image' label='Изображение' onChange={handleChange}
+                type='file' accept='image/*' />
+        </>
+    );
+};
+
+LinesItemForm.propTypes = {
+    item: PropTypes.object,
+    handleChange: PropTypes.func,
+};
+
+export default LinesItemForm;
--- a/Lab5/src/components/lines/form/LogIn.jsx
+++ b/Lab5/src/components/lines/form/LogIn.jsx
@ -0,0 +1,13 @@
+import Input from '../../input/Input.jsx';
+import PropTypes from "prop-types";
+
+const LogIn = () => {
+    return (
+        <>
+            <Input label="Имя" name='name' className='light-grey' type='string' required/>
+            <Input label='Пароль' name='password' className='light-grey' type='string' required/>
+        </>
+    )
+}
+
+export default LogIn;
--- a/Lab5/src/components/lines/form/NewReview.jsx
+++ b/Lab5/src/components/lines/form/NewReview.jsx
@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+import {Textarea} from "react-bootstrap-icons";
+
+const NewReview = ({handleChange}) => {
+    return (
+        <>
+            <Textarea label='Текст Отзыва' name='review' className='light-grey' type='text' onChange={handleChange} required/>
+        </>
+    )
+}
+
+NewReview.propTypes ={
+    handleChange: PropTypes.func,
+}
+export default NewReview;
--- a/Lab5/src/components/lines/form/Register.jsx
+++ b/Lab5/src/components/lines/form/Register.jsx
@ -0,0 +1,15 @@
+import Input from '../../input/Input.jsx';
+import PropTypes from "prop-types";
+
+const Register = () => {
+    return (
+        <>
+            <Input label="Имя" name='name' className='light-grey' type='string' required/>
+            <Input label="Адрес электронной почты" name='mail' className='light-grey' type='string' required/>
+            <Input label='Пароль' name='password' className='light-grey' type='string' required/>
+        </>
+    )
+}
+
+
+export default Register;
--- a/Lab5/src/components/lines/hooks/LinesDeleteModalHook.js
+++ b/Lab5/src/components/lines/hooks/LinesDeleteModalHook.js
@ -0,0 +1,34 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useModal from '../../modal/ModalHook';
+import LinesApiService from '../service/LinesApiService';
+
+const useLinesDeleteModal = (linesChangeHandle) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const showModalDialog = (id) => {
+        showModal();
+        setCurrentId(id);
+    };
+
+    const onClose = () => {
+        hideModal();
+    };
+
+    const onDelete = async () => {
+        await LinesApiService.delete(currentId);
+        linesChangeHandle();
+        toast.success('Элемент успешно удален', { id: 'LinesTable' });
+        onClose();
+    };
+
+    return {
+        isDeleteModalShow: isModalShow,
+        showDeleteModal: showModalDialog,
+        handleDeleteConfirm: onDelete,
+        handleDeleteCancel: onClose,
+    };
+};
+
+export default useLinesDeleteModal;
--- a/Lab5/src/components/lines/hooks/LinesFilterHook.js
+++ b/Lab5/src/components/lines/hooks/LinesFilterHook.js
@ -0,0 +1,28 @@
+import { useSearchParams } from 'react-router-dom';
+import useTypes from '../../types/hooks/TypesHook';
+
+const useTypeFilter = () => {
+    const filterName = 'type';
+
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const { types } = useTypes();
+
+    const handleFilterChange = (event) => {
+        const type = event.target.value;
+        if (type) {
+            searchParams.set(filterName, event.target.value);
+        } else {
+            searchParams.delete(filterName);
+        }
+        setSearchParams(searchParams);
+    };
+
+    return {
+        types,
+        currentFilter: searchParams.get(filterName) || '',
+        handleFilterChange,
+    };
+};
+
+export default useTypeFilter;
--- a/Lab5/src/components/lines/hooks/LinesHook.js
+++ b/Lab5/src/components/lines/hooks/LinesHook.js
@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLines = (typeFilter) => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [lines, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        let expand = '?_expand=type';
+        if (typeFilter) {
+            expand = `${expand}&typeId=${typeFilter}`;
+        }
+        const data = await LinesApiService.getAll(expand);
+        setLines(data ?? []);
+    };
+
+    useEffect(() => {
+        getLines();
+    }, [linesRefresh, typeFilter]);
+
+    return {
+        lines,
+        handleLinesChange,
+    };
+};
+
+export default useLines;
--- a/Lab5/src/components/lines/hooks/LinesItemFormHook.js
+++ b/Lab5/src/components/lines/hooks/LinesItemFormHook.js
@ -0,0 +1,85 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import getBase64FromFile from '../../utils/Base64';
+import LinesApiService from '../service/LinesApiService';
+import useLinesItem from './LinesItemHook';
+import useTypes from "../../types/hooks/TypesHook.js";
+
+const useLinesItemForm = (id, linesChangeHandle) => {
+    const { item, setItem } = useLinesItem(id);
+    const {types} = useTypes();
+
+    const [validated, setValidated] = useState(false);
+
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const getLineObject = (formData) => {
+        const typeId = parseInt(formData.typeId, 10);
+        const price = parseFloat(formData.price);
+        const count = parseInt(formData.count, 10);
+        const sum = parseFloat(price * count);
+        const benefit = parseFloat((types.at(formData.typeId-1).basePrice-price)*count);
+        const image = formData.image.startsWith('data:image') ? formData.image : '';
+        return {
+            typeId: typeId.toString(),
+            price: price.toString(),
+            count: count.toString(),
+            sum: sum.toString(),
+            benefit: benefit.toString(),
+            image,
+        };
+    };
+
+    const handleImageChange = async (event) => {
+        const { files } = event.target;
+        const file = await getBase64FromFile(files.item(0));
+        setItem({
+            ...item,
+            image: file,
+        });
+    };
+
+    const handleChange = (event) => {
+        if (event.target.type === 'file') {
+            handleImageChange(event);
+            return;
+        }
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+        setItem({
+            ...item,
+            [inputName]: inputValue,
+        });
+    };
+
+    const handleSubmit = async (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        const body = getLineObject(item);
+        if (form.checkValidity()) {
+            if (id === undefined) {
+                await LinesApiService.create(body);
+            } else {
+                await LinesApiService.update(id, body);
+            }
+            if (linesChangeHandle) linesChangeHandle();
+            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
+            return true;
+        }
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    };
+};
+
+export default useLinesItemForm;
--- a/Lab5/src/components/lines/hooks/LinesItemHook.js
+++ b/Lab5/src/components/lines/hooks/LinesItemHook.js
@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLinesItem = (id) => {
+    const emptyItem = {
+        id: '',
+        typeId: '',
+        price: '0',
+        count: '0',
+        image: '',
+    };
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await LinesApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default useLinesItem;
--- a/Lab5/src/components/lines/service/LinesApiService.js
+++ b/Lab5/src/components/lines/service/LinesApiService.js
@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const LinesApiService = new ApiService('lines');
+
+export default LinesApiService;
--- a/Lab5/src/components/lines/table/Lines.jsx
+++ b/Lab5/src/components/lines/table/Lines.jsx
@ -0,0 +1,54 @@
+import { Button, ButtonGroup } from 'react-bootstrap';
+import { Link, useNavigate } from 'react-router-dom';
+import ModalConfirm from '../../modal/ModalConfirm.jsx';
+import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
+import useTypeFilter from '../hooks/LinesFilterHook';
+import useLines from '../hooks/LinesHook';
+import LinesTable from './LinesTable.jsx';
+import LinesTableRow from './LinesTableRow.jsx';
+import React from "react";
+import SelectWithOutPrice from "../../input/SelectWithOutPrice.jsx";
+
+const Lines = () => {
+    const { types, currentFilter, handleFilterChange } = useTypeFilter();
+
+    const { lines, handleLinesChange } = useLines(currentFilter);
+
+    const {
+        isDeleteModalShow,
+        showDeleteModal,
+        handleDeleteConfirm,
+        handleDeleteCancel,
+    } = useLinesDeleteModal(handleLinesChange);
+
+    const navigate = useNavigate();
+
+    const showEditPage = (id) => {
+        navigate(`/page-edit/${id}`);
+    };
+
+    return (
+        <div className='formStyle formSizeStyle rounded-8 mx-auto p-2 hfitcon'>
+            <ButtonGroup>
+                <Button as={Link} to={'/page-edit'} variant="dark" className="btn purple text-light rounded-pill">Добавить курс</Button>
+            </ButtonGroup>
+            <SelectWithOutPrice className='mt-2' values={types} label='Фильтр по категориям'
+                value={currentFilter} onChange={handleFilterChange} />
+            <LinesTable>
+                {
+                    lines.map((line, index) =>
+                        <LinesTableRow className='no-color' key={line.id}
+                            index={index} line={line}
+                            onDelete={() => showDeleteModal(line.id)}
+                            onEditInPage={() => showEditPage(line.id)}
+                        />)
+                }
+            </LinesTable>
+            <ModalConfirm show={isDeleteModalShow}
+                onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
+                title='Удаление' message='Удалить элемент?' />
+        </div>
+    );
+};
+
+export default Lines;
--- a/Lab5/src/components/lines/table/LinesTable.jsx
+++ b/Lab5/src/components/lines/table/LinesTable.jsx
@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+import React from "react";
+
+const LinesTable = ({ children }) => {
+    return (
+        <div className='overflow-x-auto hfitcon maxh-400 p-0'>
+            <Table className="table" responsive>
+                <thead>
+                <tr>
+                    <th scope="col" className="fw-bold text-center no-color">№</th>
+                    <th scope="col" className="w-25 fw-bold text-center no-color">Курс</th>
+                    <th scope="col" className="w-25 fw-bold text-center no-color">Цена</th>
+                    <th scope="col" className="fw-bold minW-160 text-center no-color">Кол-во занятий</th>
+                    <th scope="col" className="w-25 fw-bold text-center no-color">Сумма</th>
+                    <th scope="col" className="w-25 fw-bold text-center no-color">Выгода</th>
+                    <th scope="col" className="no-color"></th>
+                    <th scope="col" className="no-color"></th>
+                </tr>
+                </thead>
+                <tbody className="fw-bold overflow-y-scroll">
+                {children}
+                </tbody>
+            </Table>
+        </div>
+    );
+};
+
+LinesTable.propTypes = {
+    children: PropTypes.node,
+};
+
+export default LinesTable;
--- a/Lab5/src/components/lines/table/LinesTableRow.jsx
+++ b/Lab5/src/components/lines/table/LinesTableRow.jsx
@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import EditIcon from '../../../assets/pen-to-square.png';
+import Trash from '../../../assets/trash.png';
+
+const LinesTableRow = ({
+    index, line, onDelete, onEditInPage,
+}) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+
+    return (
+        <tr className='no-color'>
+            <th className='no-color text-center' scope="row">{index + 1}</th>
+            <td className='no-color text-center'>{line.type.name}</td>
+            <td className='no-color text-center'>{parseFloat(line.price).toFixed(2)}</td>
+            <td className='no-color text-center'>{line.count}</td>
+            <td className='no-color text-center'>{parseFloat(line.sum).toFixed(2)}</td>
+            <td className='no-color text-center'>{parseFloat(line.benefit).toFixed(2)}</td>
+            <td className='no-color text-center'><a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}><img src={EditIcon} height={20}/></a></td>
+            <td className='no-color text-center'><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><img src={Trash}/></a></td>
+        </tr>
+    );
+};
+
+LinesTableRow.propTypes = {
+    index: PropTypes.number,
+    line: PropTypes.object,
+    onDelete: PropTypes.func,
+    onEditInPage: PropTypes.func,
+};
+
+export default LinesTableRow;
--- a/Lab5/src/components/modal/Modal.css
+++ b/Lab5/src/components/modal/Modal.css
@ -0,0 +1,8 @@
+.modal-dialog-style{
+    height: fit-content !important;
+    width: 80% !important;
+}
+.modalStyle{
+    background-color: #9b9b9b !important;
+    border: 7px solid #424242 !important
+}
--- a/Lab5/src/components/modal/ModalConfirm.jsx
+++ b/Lab5/src/components/modal/ModalConfirm.jsx
@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { Button, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+import './Modal.css';
+import Input from "../input/Input.jsx";
+
+const ModalConfirm = ({
+    show, title, message, onConfirm, onClose
+}) => {
+
+    return createPortal(
+        <Modal show={show} onHide={() => onClose()}>
+            <div className='modalStyle rounded-3'>
+                <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                    <Modal.Title>{title}</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body>
+                    {message}
+                </Modal.Body>
+
+
+                <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                    <Button className='col-5 m-0 me-2 dark-grey rounded-pill'
+                        onClick={() => onClose()}>
+                        Нет
+                    </Button>
+                    <Button className='col-5 m-0 ms-2 purple rounded-pill'
+                        onClick={() => onConfirm()}>
+                        Да
+                    </Button>
+                </Modal.Footer>
+            </div>
+        </Modal>,
+        document.body,
+    );
+};
+
+ModalConfirm.propTypes = {
+    show: PropTypes.bool,
+    title: PropTypes.string,
+    message: PropTypes.string,
+    onConfirm: PropTypes.func,
+    onClose: PropTypes.func,
+};
+
+export default ModalConfirm;
--- a/Lab5/src/components/modal/ModalForm.jsx
+++ b/Lab5/src/components/modal/ModalForm.jsx
@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+import './Modal.css';
+
+const ModalForm = ({
+    show, title, validated, onSubmit, onClose, onClick, children,
+}) => {
+    const Click = () => {
+        onClick();
+        onClose();
+    }
+    return createPortal(
+        <Modal show={show} backdrop='static' onHide={() => onClose()}>
+            <div className='modalStyle rounded-3'>
+                <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                    <Modal.Title>{title}</Modal.Title>
+                </Modal.Header>
+                <Form className='m-0' noValidate validated={validated}>
+                    <Modal.Body>
+                        {children}
+                    </Modal.Body>
+
+                    <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                        <Button className='col-5 m-0 me-2 dark-grey rounded-pill text-light'
+                                onClick={() => onClose()}>
+                            Отмена
+                        </Button>
+                        <Button className='col-5 m-0 ms-2 purple rounded-pill text-light' onClick={Click}>
+                            Ввод
+                        </Button>
+                    </Modal.Footer>
+                </Form>
+            </div>
+        </Modal>,
+        document.body,
+    );
+};
+
+ModalForm.propTypes = {
+    show: PropTypes.bool,
+    title: PropTypes.string,
+    validated: PropTypes.bool,
+    onSubmit: PropTypes.func,
+    onClose: PropTypes.func,
+    children: PropTypes.node,
+};
+
+export default ModalForm;
--- a/Lab5/src/components/modal/ModalHook.js
+++ b/Lab5/src/components/modal/ModalHook.js
@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+const useModal = () => {
+    const [showModal, setShowModal] = useState(false);
+
+    const showModalDialog = () => {
+        setShowModal(true);
+    };
+
+    const hideModalDialog = () => {
+        setShowModal(false);
+    };
+
+    return {
+        isModalShow: showModal,
+        showModal: showModalDialog,
+        hideModal: hideModalDialog,
+    };
+};
+
+export default useModal;
--- a/Lab5/src/components/modal/ModalLogIn.jsx
+++ b/Lab5/src/components/modal/ModalLogIn.jsx
@ -0,0 +1,15 @@
+import './Modal.css';
+
+const ModalLogIn = ({input}) => {
+    return (
+        <>
+            <h6 className='text-dark'>Введите ваши контактные данные. Наш оператор свяжется с вами для уточнения деталей</h6>
+            <h6 className='text-dark'>Имя</h6>
+            <input name="name" className='width-100 rounded-pill light-grey p-2 mb-3' type='text' onChange={input.onChange}/>
+            <h6 className='text-dark'>Номер телефона</h6>
+            <input name="tel" className='width-100 rounded-pill light-grey p-2' type='tel' onChange={input.onChange}/>
+        </>
+    );
+}
+
+export default ModalLogIn;
--- a/Lab5/src/components/navigation/nav-bar.css
+++ b/Lab5/src/components/navigation/nav-bar.css
@ -0,0 +1,4 @@
+.navbar-style{
+    background-color: rgba(249,134,23,0.8)  !important;
+    border-bottom: 7px solid #7c2d00 !important;
+}
--- a/Lab5/src/components/navigation/nav-bar.jsx
+++ b/Lab5/src/components/navigation/nav-bar.jsx
@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
+import './nav-bar.css';
+import label from '../../assets/lable.png';
+
+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 (
+        <header>
+            <Navbar expand='lg' bg='light' data-bs-theme='light' className='navbar-style'>
+                <Container fluid>
+                    <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                        <button className="btn btn-outline-dark">
+                            <img src={label} alt="Logo" height="60" className="align-text-top"></img>
+                        </button>
+                    </Navbar.Brand>
+                    <Navbar.Toggle aria-controls='main-navbar' />
+                    <Navbar.Collapse id='main-navbar'>
+                        <Nav className='me-auto link' activeKey={location.pathname}>
+                            {
+                                pages.map((page) =>
+                                    <Nav.Link as={Link} className="fw-bold fs-3 mx-3" key={page.path} eventKey={page.path} to={page.path ?? '/'}>
+                                        {page.title}
+                                    </Nav.Link>)
+                            }
+                        </Nav>
+                    </Navbar.Collapse>
+                </Container>
+            </Navbar >
+        </header>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;
--- a/Lab5/src/components/reviews.zip
+++ b/Lab5/src/components/reviews.zip
--- a/Lab5/src/components/reviews/Reviews/ReviewCard.jsx
+++ b/Lab5/src/components/reviews/Reviews/ReviewCard.jsx
@ -0,0 +1,20 @@
+import Trash from '../../../assets/trash.png';
+
+const ReviewCard = ({item, onDelete}) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+
+    return (
+        <div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
+            <div className='row'>
+                <h5 className="fw-normal text-start text-dark col">{item.name}</h5>
+                <a href="#" className='col text-end me-2'  onClick={(event) => handleAnchorClick(event, onDelete)}><img src={Trash}/></a>
+            </div>
+            <h6>{item.text}</h6>
+        </div>
+    )
+}
+
+export default ReviewCard;
--- a/Lab5/src/components/reviews/Reviews/Reviews.jsx
+++ b/Lab5/src/components/reviews/Reviews/Reviews.jsx
@ -0,0 +1,59 @@
+import { Button } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import ModalConfirm from '../../modal/ModalConfirm.jsx';
+import ModalForm from '../../modal/ModalForm.jsx';
+import useReviews from "../hooks/RevievsHook.js";
+import useReviewsFormModal from "../hooks/ReviewsFormModalHook.js";
+import ReviewsItemForm from "./ReviewsItemForm.jsx";
+import ReviewCard from "./ReviewCard.jsx";
+import useReviewsDeleteModal from "../hooks/ReviewsDeleteModalHook.js";
+
+const Reviews = () => {
+    const { reviews, handleReviewsChange } = useReviews();
+
+    const {
+        isDeleteModalShow,
+        showDeleteModal,
+        handleDeleteConfirm,
+        handleDeleteCancel,
+    } = useReviewsDeleteModal(handleReviewsChange);
+
+    const {
+        isFormModalShow,
+        isFormValidated,
+        showFormModal,
+        currentItem,
+        handleItemChange,
+        handleFormSubmit,
+        handleFormClose,
+    } = useReviewsFormModal(handleReviewsChange);
+
+    const navigate = useNavigate();
+
+
+    return (
+        <div className='formStyle formSizeStyle rounded-8 p-2 mx-auto'>
+            <Button variant='info' className='rounded-pill ms-3 mb-3 purple text-light' onClick={() => showFormModal()}>
+                Написать отзыв
+            </Button>
+            <div className='container overflow-y-auto height-500'>
+                {
+                    reviews.map((item) =>
+                        <ReviewCard key={item.id} item={item}
+                        onDelete={() => showDeleteModal(item.id)}/>
+                    )
+                }
+            </div>
+            <ModalConfirm show={isDeleteModalShow}
+                          onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
+                          title='Удаление' message='Удалить отзыв?' />
+            <ModalForm show={isFormModalShow} validated={isFormValidated}
+                       onSubmit={handleFormSubmit} onClose={handleFormClose}
+                       title='Новый отзыв'>
+                <ReviewsItemForm item={currentItem} handleChange={handleItemChange} />
+            </ModalForm>
+        </div>
+    );
+};
+
+export default Reviews;
--- a/Lab5/src/components/reviews/Reviews/ReviewsItemForm.jsx
+++ b/Lab5/src/components/reviews/Reviews/ReviewsItemForm.jsx
@ -0,0 +1,22 @@
+import Input from "../../input/Input.jsx";
+import PropTypes from "prop-types";
+import LinesItemForm from "../../lines/form/LinesItemForm.jsx";
+
+
+const ReviewsItemForm = ({item, handleChange}) => {
+    return (
+        <>
+            <Input name='name' label='Имя' value={item.name} onChange={handleChange}
+                    type='text' required />
+            <Input name='text' label='Текст отзыва' value={item.text} onChange={handleChange}
+                    type='text' required/>
+        </>
+    );
+};
+
+ReviewsItemForm.propTypes = {
+    item: PropTypes.object,
+    handleChange: PropTypes.func,
+};
+
+export default ReviewsItemForm;
--- a/Lab5/src/components/reviews/hooks/RevievsHook.js
+++ b/Lab5/src/components/reviews/hooks/RevievsHook.js
@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import ReviewApiService from "../service/ReviewApiService.js";
+
+const useReviews = () => {
+    const [reviewsRefresh, setReviewsRefresh] = useState(false);
+    const [reviews, setReviews] = useState([]);
+    const handleReviewsChange = () => setReviewsRefresh(!reviewsRefresh);
+
+    const getReviews = async () => {
+        const data = await ReviewApiService.getAll();
+        setReviews(data ?? []);
+    };
+
+    useEffect(() => {
+        getReviews();
+    }, [reviewsRefresh]);
+
+    return {
+        reviews,
+        handleReviewsChange,
+    };
+};
+
+export default useReviews;
--- a/Lab5/src/components/reviews/hooks/ReviewsDeleteModalHook.js
+++ b/Lab5/src/components/reviews/hooks/ReviewsDeleteModalHook.js
@ -0,0 +1,34 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useModal from '../../modal/ModalHook';
+import ReviewsApiService from "../service/ReviewApiService.js";
+
+const useReviewsDeleteModal = (linesChangeHandle, admin) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const showModalDialog = (id) => {
+        showModal();
+        setCurrentId(id);
+    };
+
+    const onClose = () => {
+        hideModal();
+    };
+
+    const onDelete = async () => {
+        await ReviewsApiService.delete(currentId);
+        linesChangeHandle();
+        toast.success('Элемент успешно удален', { id: 'LinesTable' });
+        onClose();
+    };
+
+    return {
+        isDeleteModalShow: isModalShow,
+        showDeleteModal: showModalDialog,
+        handleDeleteConfirm: onDelete,
+        handleDeleteCancel: onClose,
+    };
+};
+
+export default useReviewsDeleteModal;
--- a/Lab5/src/components/reviews/hooks/ReviewsFormModalHook.js
+++ b/Lab5/src/components/reviews/hooks/ReviewsFormModalHook.js
@ -0,0 +1,45 @@
+import { useState } from 'react';
+import useModal from '../../modal/ModalHook';
+import useReviewsItemForm from "./ReviewsItemFormHook.js";
+
+const useReviewsFormModal = (reviewsChangeHandle) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    } = useReviewsItemForm(currentId, reviewsChangeHandle);
+
+    const showModalDialog = (id) => {
+        setCurrentId(id);
+        resetValidity();
+        showModal();
+    };
+
+    const onClose = () => {
+        setCurrentId(-1);
+        hideModal();
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+            onClose();
+        }
+    };
+
+    return {
+        isFormModalShow: isModalShow,
+        isFormValidated: validated,
+        showFormModal: showModalDialog,
+        currentItem: item,
+        handleItemChange: handleChange,
+        handleFormSubmit: onSubmit,
+        handleFormClose: onClose,
+    };
+};
+
+export default useReviewsFormModal;
--- a/Lab5/src/components/reviews/hooks/ReviewsItemFormHook.js
+++ b/Lab5/src/components/reviews/hooks/ReviewsItemFormHook.js
@ -0,0 +1,62 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import getBase64FromFile from '../../utils/Base64';
+import ReviewApiService from "../service/ReviewApiService.js";
+import useReviewsItem from "./ReviewsItemHook.js";
+
+const useReviewsItemForm = (id, linesChangeHandle) => {
+    const { item, setItem } = useReviewsItem(id);
+
+    const [validated, setValidated] = useState(false);
+
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const getReviewObject = (formData) => {
+        const name = formData.name;
+        const text = formData.text;
+        return {
+            name: name.toString(),
+            text: text.toString()
+        };
+    };
+
+    const handleChange = (event) => {
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+        setItem({
+            ...item,
+            [inputName]: inputValue,
+        });
+    };
+
+    const handleSubmit = async (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        const body = getReviewObject(item);
+        if (form.checkValidity()) {
+            if (id === undefined) {
+                await ReviewApiService.create(body);
+            } else {
+                await ReviewApiService.update(id, body);
+            }
+            if (linesChangeHandle) linesChangeHandle();
+            toast.success('Отзыв успешно сохранен', { id: 'Reviews' });
+            return true;
+        }
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    };
+};
+
+export default useReviewsItemForm;
--- a/Lab5/src/components/reviews/hooks/ReviewsItemHook.js
+++ b/Lab5/src/components/reviews/hooks/ReviewsItemHook.js
@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import ReviewApiService from "../service/ReviewApiService.js";
+
+const useReviewsItem = (id) => {
+    const emptyItem = {
+        id: '',
+        name: '',
+        text: ''
+    };
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await ReviewApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default useReviewsItem;
--- a/Lab5/src/components/reviews/service/ReviewApiService.js
+++ b/Lab5/src/components/reviews/service/ReviewApiService.js
@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const ReviewsApiService = new ApiService('reviews');
+
+export default ReviewsApiService;
--- a/Lab5/src/components/types/hooks/TypesHook.js
+++ b/Lab5/src/components/types/hooks/TypesHook.js
@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import TypesApiService from '../service/TypesApiService';
+
+const useTypes = () => {
+    const [types, setTypes] = useState([]);
+
+    const getTypes = async () => {
+        const data = await TypesApiService.getAll();
+        setTypes(data ?? []);
+    };
+
+    useEffect(() => {
+        getTypes();
+    }, []);
+
+    return {
+        types,
+    };
+};
+
+export default useTypes;
--- a/Lab5/src/components/types/service/TypesApiService.js
+++ b/Lab5/src/components/types/service/TypesApiService.js
@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const TypesApiService = new ApiService('types');
+
+export default TypesApiService;
--- a/Lab5/src/components/utils/Base64.js
+++ b/Lab5/src/components/utils/Base64.js
@ -0,0 +1,15 @@
+const getBase64FromFile = async (file) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            resolve(fileContent);
+        };
+        reader.onerror = () => {
+            reject(new Error('Oops, something went wrong with the file reader.'));
+        };
+        reader.readAsDataURL(file);
+    });
+};
+
+export default getBase64FromFile;
--- a/Lab5/src/main.jsx
+++ b/Lab5/src/main.jsx
@ -0,0 +1,61 @@
+import '../node_modules/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 './myStyle.css'
+import ErrorPage from './pages/ErrorPage.jsx';
+import MainPage from './pages/MainPage.jsx';
+import Courses from './pages/Courses.jsx';
+import Contacts from './pages/Contacts.jsx';
+import Reviews from './pages/Reviews.jsx';
+import Admin from './pages/Admin.jsx';
+import PageEdit from './pages/page-edit.jsx';
+
+const routes = [
+    {
+        index: true,
+        path: '/',
+        element: <MainPage />,
+        title: 'Главная',
+    },
+    {
+        path: '/Courses',
+        element: <Courses />,
+        title: 'Курсы',
+    },
+    {
+        path: '/Contacts',
+        element: <Contacts />,
+        title: 'Контакты',
+    },
+    {
+        path: '/Reviews',
+        element: <Reviews />,
+        title: 'Отзывы',
+    },
+    {
+        path: '/Admin',
+        element: <Admin />,
+        title: 'Админ',
+    },
+    {
+        path: '/page-edit/:id?',
+        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/Lab5/src/myStyle.css
+++ b/Lab5/src/myStyle.css
@ -0,0 +1,93 @@
+.pageBackground{
+    background-image: url('./assets/MainBackGround.jpg') !important;
+    background-attachment: fixed  !important;
+    height: fit-content  !important; min-height: 87vh  !important;
+}
+.mainPageInf{
+    width: 70% !important;
+    min-width: 320px !important;
+    height: fit-content !important;
+    background-color: rgba(66,66,66,0.8) !important;
+    padding:2% !important;
+    border-radius: 20px !important;
+}
+.rounded-8{
+    border-radius: 20px;
+}
+.modal-dialog-style{
+    height: fit-content !important;
+    width: 80% !important;
+}
+.modalStyle{
+    background-color: #9b9b9b !important;
+    border: 7px solid #424242 !important
+}
+.PictureButton{
+    height: 200px !important;
+    width: 300px !important;
+}
+.purple{
+    background-color: #8c00e2 !important;
+}
+.dark-grey{
+    background-color: #424242 !important;
+}
+.light-grey{
+    background-color: #d9d9d9 !important;
+}
+.no-color{
+    background-color: rgba(155,155,155,0) !important;
+    text-emphasis-color: rgba(155,155,155,0) !important;
+}
+.formStyle{
+    background-color: rgba(155,155,155,0.8) !important;
+    border: 7px solid #424242 !important
+}
+.formSizeStyle{
+    width: 70% !important;
+    min-width: 320px!important;
+}
+.accauntPanel{
+    height: 100px !important;
+    width: 290px !important;
+}
+.wfitcon{
+    width: fit-content !important;
+}
+.hfitcon{
+    height: fit-content !important;
+}
+.minH-500{
+    min-height: 500px !important;
+}
+.height-420{
+    height: 420px;
+}
+.minW-160{
+    min-width: 160px !important;
+}
+.minW-260{
+    min-width: 260px !important;
+}
+.maxh-400{
+    max-height: 400px !important;
+}
+.width-100{
+    width: 100% !important;
+}
+.width-90{
+    width: 90% !important;
+}
+.height-200{
+    height: 200px !important;
+}
+.height-300{
+    height: 300px !important;
+}
+.height-450{
+    height: 450px !important;
+}
+.height-500{
+    height: 500px !important;
+}
+.bg-image{position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:50%}
--- a/Lab5/src/pages/Admin.jsx
+++ b/Lab5/src/pages/Admin.jsx
@ -0,0 +1,9 @@
+import Lines from "../components/lines/table/Lines.jsx";
+
+const Admin = () => {
+    return(
+        <Lines className='p-2 formStyle formSizeStyle rounded-8 my-4' />
+    )
+}
+
+export default Admin;
--- a/Lab5/src/pages/Contacts.jsx
+++ b/Lab5/src/pages/Contacts.jsx
@ -0,0 +1,26 @@
+import Map from '../assets/map.png';
+
+const Contacts = () => {
+    return(
+        <div className="container mx-auto my-5 p-2 pb-5 rounded-8 fw-bold formStyle formSizeStyle hfitcon">
+            <div className="text-dark mx-auto fw-bold fs-3 mb-3 wfitcon">
+                Контактная информация
+            </div>
+            <div className="row row-cols-1 row-cols-xl-2">
+                <div className="col-12 col-lg-6 mx-auto text-center">
+                    <img src={Map} alt='map' className='width-100'/>
+                </div>
+                <div className="col col-12 col-lg-6 text-dark fs-4 fw-bold text-center text-lg-start mx-auto mt-4 mt-lg-0 wfitcon">
+                    Группа в ВКонтакте <br/>
+                    <a className="text-reset" href="https://vk.com/mackmaffin">@NaStolb73</a> <br/>
+                    Телефон для связи <br/>
+                    8-800-555-35-35 <br/>
+                    Адрес электронной почты<br/>
+                    valitzhoska73@gmail.com
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Contacts;
--- a/Lab5/src/pages/Courses.jsx
+++ b/Lab5/src/pages/Courses.jsx
@ -0,0 +1,18 @@
+import useLines from "../components/lines/hooks/LinesHook.js";
+import useTypeFilter from "../components/lines/hooks/LinesFilterHook.js";
+import CourseForm from "../components/Courses/CourseForm.jsx";
+import CourseCard from "../components/Courses/CourseCard.jsx";
+import SelectWithOutPrice from "../components/input/SelectWithOutPrice.jsx";
+import ModalForm from "../components/modal/ModalForm.jsx";
+import useCoursesFormModal from '../components/Courses/hooks/CoursesFormModalHook';
+import ModalLogIn from "../components/modal/ModalLogIn.jsx";
+import CoursesBody from '../components/Courses/Courses.jsx';
+
+const Courses = () => {
+    return (
+        <CoursesBody/>
+    )
+}
+
+export default Courses;
+
--- a/Lab5/src/pages/ErrorPage.jsx
+++ b/Lab5/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 dark-grey" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;
--- a/Lab5/src/pages/MainPage.jsx
+++ b/Lab5/src/pages/MainPage.jsx
@ -0,0 +1,16 @@
+
+const MainPage = () => {
+    return (
+        <div className="text-light mx-auto mt-3 fw-bold p-4 mainPageInf">
+            <h2>Рад приветствовать вас на моем сайте!</h2>
+            <h4 className="mt-4">Меня зовут Илья, я иструктор по экстремальному вождению с 15-летним стажем. В течение многих лет я участвовал и
+                побеждал во многих ралли заездах, таких как
+                "Париж-Дакар", "Симбирский тракт" и др.
+            </h4>
+            <h4 className="mt-4">Обучение экстримальному вождению добавит вам уверенности при езде не только по грунтовым дорогам, но и по асфальту,
+                а также в условиях снега, дождя и при других экстримальных ситуациях. Помните, что ваша безопасность на дороге зависит от ваших навыков вождения!</h4>
+        </div>
+    );
+};
+
+export default MainPage;
--- a/Lab5/src/pages/Reviews.jsx
+++ b/Lab5/src/pages/Reviews.jsx
@ -0,0 +1,9 @@
+import ReviewsForm from "../components/reviews/Reviews/Reviews.jsx";
+
+const Reviews = () => {
+    return(
+        <ReviewsForm/>
+    )
+}
+
+export default Reviews;
--- a/Lab5/src/pages/page-edit.jsx
+++ b/Lab5/src/pages/page-edit.jsx
@ -0,0 +1,14 @@
+import placeHolder from '../assets/placeHolder.png';
+import {Button} from "react-bootstrap";
+import {Link, useParams} from "react-router-dom";
+import LinesForm from "../components/lines/form/LinesForm.jsx";
+
+const pageEdit = () => {
+    const {id} = useParams();
+
+    return(
+        <LinesForm id={id} />
+    )
+}
+
+export default pageEdit;
--- a/Lab5/style.css
+++ b/Lab5/style.css
@ -0,0 +1,97 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/Lab5/vite.config.js
+++ b/Lab5/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/Lab5/Отчет
+++ b/Lab5/Отчет
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>