Lab4

2023-11-21 12:37:22 +04:00 · 2023-11-21 12:37:22 +04:00 · cdc58ce5cc
commit cdc58ce5cc
parent 73fdc92ab3
40 changed files with 7747 additions and 0 deletions
--- a/vite/.gitignore
+++ b/vite/.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/vite/Old_HTMLs/Courses.css
+++ b/vite/Old_HTMLs/Courses.css
@ -0,0 +1,53 @@
+.modal-dialog-style{
+    height: fit-content !important;
+    width: 80% !important;
+}
+.modalStyle{
+    background-color: #9b9b9b !important;
+    border: 7px solid #424242 !important
+}
+.purple{
+    background-color: #8c00e2 !important;
+}
+.dark-grey{
+    background-color: #424242 !important;
+}
+.light-grey{
+    background-color: #d9d9d9 !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;
+}
+.minW-160{
+    min-width: 160px !important;
+}
+.width-100{
+    width: 100% !important;
+}
+.height-200{
+    height: 200px !important;
+}
+.height-300{
+    height: 300px !important;
+}
+.height-500{
+    height: 500px !important;
+}
--- a/vite/Old_HTMLs/Courses.html
+++ b/vite/Old_HTMLs/Courses.html
@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>Courses</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="../src/myStyle.css">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" >
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
+    <!-- Bootstrap JS -->
+    <script defer src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+
+</head>
+<body class="bg-image overflow-visible pageBackground">
+    <!--Шапка-->
+    <nav class="navbar navbar-expand-lg navbar-light navbar-style">
+        <div class="container-fluid">
+            <a class="navbar-brand btn btn-outline-dark" href="index1.html" >
+                <img src="../img/lable.png" alt="Logo" height="60" class="align-text-top">
+            </a>
+            <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <img src="../img/togglerIcon.png" alt="Toggler" height="40">
+            </button>
+            <div class="collapse navbar-collapse " id="navbarSupportedContent">
+                <ul class="navbar-nav">
+                    <li class="nav-item ">
+                        <a class="nav-link  me-3 ms-3 fs-4 fw-bold" href="index1.html">Главная</a>
+                    </li>
+                    <li class="nav-item ">
+                        <a class="nav-link  me-3 ms-3 fs-4 fw-bold" href="Galery.html" >Галерея</a>
+                    </li>
+                    <li class="nav-item " >
+                        <a class="nav-link active me-3 ms-3  fs-3 fw-bold"  aria-current="page" href="./Courses.html">Курсы</a>
+                    </li>
+                    <li class="nav-item " >
+                        <a class="nav-link me-3 ms-3  fs-4 fw-bold" href="Contacts.html"  >Контакты</a>
+                    </li>
+                    <li class="nav-item " >
+                        <a class="nav-link me-3 ms-3  fs-4 fw-bold" href="Reviews.html" >Отзывы</a>
+                    </li>
+                    <li class="nav-item " >
+                        <a class="nav-link me-3 ms-3  fs-4 fw-bold" href="Admin.html" >Админ</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!--Шапка-->
+    <!--Курсы-->
+    <div class="container mx-auto my-5 formSizeStyle">
+        <div class="row row-cols-xl-3 row-cols-md-2 row-cols-1 pd-3  text-center text-secondary-emphasis">
+            <div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon" >
+                <img src="../img/CourseImage1.jpg" class="my-3 rounded-9" alt="image" height="150">
+                <div class="my-3 fs-3 fw-bold">
+                1 занятие <br>
+                2500 рублей
+                </div>
+                <button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
+                    Записаться
+                </button>
+            </div>
+            <div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
+                <img src="../img/CourseImage2.jpg" class="my-3 rounded-9" alt="image" height="150">
+                <div class="my-3 fs-3 fw-bold">
+                    5 занятий <br>
+                    10000 рублей
+                </div>
+                <button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
+                    Записаться
+                </button>
+            </div>
+            <div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
+                <img src="../img/CourseImage3.jpg" class="my-3 rounded-9" alt="image" height="150">
+                <div class="my-3 fs-3 fw-bold">
+                    11 занятий <br>
+                    20000 рублей
+                </div>
+                <button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
+                    Записаться
+                </button>
+            </div>
+        </div>
+    </div>
+    <!--Модальное окно-->
+    <div class="modal fade" id="signUp" tabindex="-1" aria-labelledby="signUp" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content rounded-8 modalStyle">
+                <div class="modal-header">
+                    <h5 class="modal-title fw-bold fs-3 text-secondary-emphasis" id="signUpLabel">Запись на курс</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="mb-3">
+                            <label for="recipient-name" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваше имя:</label>
+                            <input type="text" class="form-control rounded-8 light-grey" id="recipient-name">
+                        </div>
+                        <div class="mb-3">
+                            <label for="signUpText" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваш номер телефона +7-...:</label>
+                            <input type="tel" class="form-control rounded-8 light-grey" id="signUpText">
+                        </div>
+                        <p class="fw-bold fw-5 text-secondary-emphasis">С вами свяжется наш оператор для уточнения деталей</p>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn rounded-pill text-light fw-normal fs-6 purple">Ввод</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--Подвал-->
+    <footer class="position-sticky top-100 footer-style">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
+                    Техническая поддержка <br>
+                    8-800-555-3535 <br>
+                    valitzhoska73@gmail.com
+                </div>
+                <div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
+                    Работаем без выходных с 8:00 до 21:30
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!--Подвал-->
+</body>
+</html>
--- a/vite/Old_HTMLs/Galery.css
+++ b/vite/Old_HTMLs/Galery.css
@ -0,0 +1,36 @@
+.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;
+}
+.wfitcon{
+    width: fit-content !important;
+}
+.hfitcon{
+    height: fit-content !important;
+}
+.minH-500{
+    min-height: 500px !important;
+}
+.minW-160{
+    min-width: 160px !important;
+}
+.width-100{
+    width: 100% !important;
+}
+.height-200{
+    height: 200px !important;
+}
+.height-300{
+    height: 300px !important;
+}
+.height-500{
+    height: 500px !important;
+}
--- a/vite/Old_HTMLs/MainPage.css
+++ b/vite/Old_HTMLs/MainPage.css
@ -0,0 +1,8 @@
+.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;
+}
--- a/vite/counter.js
+++ b/vite/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/vite/data.json
+++ b/vite/data.json
--- a/vite/imgs.txt
+++ b/vite/imgs.txt
@ -0,0 +1,3 @@
+img/image 4.jpg
+img/image 5.jpg
+img/image 3.jpg
--- a/vite/index.html
+++ b/vite/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/vite/javascript.svg
+++ b/vite/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/vite/js/GaleryFilling.js
+++ b/vite/js/GaleryFilling.js
@ -0,0 +1,31 @@
+var imgContainer = document.getElementById('response-container')
+function filling(line){
+    const Container =
+        `<button class="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
+                <img src="` + line + `" class="rounded-8 width-100" alt="image">
+        </button>`
+    imgContainer.innerHTML += Container
+}
+function Fill(){
+    fetch('imgs.txt')
+        .then(response => response.text())
+        .then(data => {
+            readFile(data)
+        })
+        .catch(error => {
+            console.error('Ошибка:', error);
+        });
+}
+
+
+async function readFile(file) {
+    console.log(file);
+    const arr = file.split(/\r?\n/gm)
+    arr.map(line => filling(line))
+    console.log('done')
+    imgContainer.innerHTML += `
+        <button onclick="file.click()" type="button" class="col-xxl-4 col-lg-6 col-12 p-0 btn btn-dark mx-auto my-4 rounded-8 fw-bold fs-1 PictureButton">
+            +
+        </button>
+        <input id="file" type="file" hidden`
+}
--- a/vite/js/ModalWindowImg.js
+++ b/vite/js/ModalWindowImg.js
--- a/vite/js/lines-modal.js
+++ b/vite/js/lines-modal.js
@ -0,0 +1,59 @@
+// Модуль для работы с модальным окном
+
+// импорт компонента Modal из bootstrap
+import { Modal } from "bootstrap";
+import { cntrls, imagePlaceholder } from "./lines-ui";
+
+// поиск модального окна на странице
+const modal = document.getElementById("items-update");
+// если он найден, то создается экземпляр компонента Modal
+// для программного управления модальным окном
+const myModal = modal ? new Modal(modal, {}) : null;
+
+// поиск тега с заголовком модального кона для его смены
+const modalTitle = document.getElementById("items-update-title");
+
+// обнуление значений модального окна, т. к.
+// используется одно окно для всех операций
+function resetValues() {
+    cntrls.lineId.value = "";
+    cntrls.itemsType.value = "";
+    cntrls.price.value = parseFloat(0).toFixed(2);
+    cntrls.count.value = 0;
+    cntrls.image.value = "";
+    cntrls.imagePreview.src = imagePlaceholder;
+}
+
+// функция для показа модального окна
+// перед показом происходит заполнение формы для редактирования
+// если объект item не пуст
+export function showUpdateModal(item) {
+    modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
+    console.info(item);
+
+    if (item) {
+        cntrls.lineId.value = item.id;
+        cntrls.itemsType.value = item.itemsId;
+        cntrls.price.value = item.price;
+        cntrls.count.value = item.count;
+        // заполнение превью
+        // Если пользователь выбрал изображение, то оно загружается
+        // в тэг image с id image - preview
+        // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
+        cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
+    } else {
+        resetValues();
+    }
+
+    myModal.show();
+}
+
+// функция для скрытия модального окна
+export function hideUpdateModal() {
+    resetValues();
+
+    // удаление класса was-validated для скрытия результатов валидации
+    cntrls.form.classList.remove("was-validated");
+
+    myModal.hide();
+}
--- a/vite/js/lines-rest-api.js
+++ b/vite/js/lines-rest-api.js
@ -0,0 +1,101 @@
+// модуль для работы с REST API сервера
+
+// адрес сервера
+const serverUrl = "http://localhost:8081";
+
+// функция возвращает объект нужной структуры для отправки на сервер
+function createLineObject(item, price, count, image, basePrice) {
+    return {
+        itemsId: item,
+        price: parseFloat(price).toFixed(2),
+        count,
+        sum: parseFloat(price * count).toFixed(2),
+        benefit: parseFloat((basePrice-price)*count).toFixed(2),
+        image,
+    };
+}
+
+// обращение к серверу для получения всех типов товара (get)
+export async function getAllItemTypes() {
+    const response = await fetch(`${serverUrl}/items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения всех записей (get)
+export async function getAllLines() {
+    const response = await fetch(`${serverUrl}/lines?_expand=items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для получения записи по первичному ключу (id) (get)
+// id передается в качестве части пути URL get-запроса
+export async function getLine(id) {
+    const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для создания записи (post)
+// объект отправляется в теле запроса (body)
+export async function createLine(item, price, count, image, basePrice) {
+    const itemObject = createLineObject(item, price, count, image, basePrice);
+
+    const options = {
+        method: "POST",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для обновления записи по id (put)
+// объект отправляется в теле запроса (body)
+// id передается в качестве части пути URL get-запроса
+export async function updateLine(id, item, price, count, image, basePrice) {
+    const itemObject = createLineObject(item, price, count, image, basePrice);
+
+    const options = {
+        method: "PUT",
+        body: JSON.stringify(itemObject),
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json",
+        },
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+// обращение к серверу для удаления записи по id (delete)
+// id передается в качестве части пути URL get-запроса
+export async function deleteLine(id) {
+    const options = {
+        method: "DELETE",
+    };
+
+    const response = await fetch(`${serverUrl}/lines/${id}`, options);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
--- a/vite/js/lines-ui.js
+++ b/vite/js/lines-ui.js
@ -0,0 +1,102 @@
+// модуль для работы с элементами управления
+
+// объект для удобного получения элементов
+// при обращении к атрибуту объекта вызывается
+// нужная функция для поиска элемента
+export const cntrls = {
+    table: document.querySelector("#items-table tbody"),
+    form: document.getElementById("items-form"),
+    lineId: document.getElementById("items-line-id"),
+    itemsType: document.getElementById("item"),
+    price: document.getElementById("price"),
+    count: document.getElementById("count"),
+    image: document.getElementById("image"),
+    imagePreview: document.getElementById("image-preview"),
+};
+
+// Дефолтное превью
+export const imagePlaceholder = "https://via.placeholder.com/200";
+
+// функция создает тег option для select
+// <option value="" selected>name</option>
+export function createItemsOption(name, value = "", basePriceIn = "", isSelected = false) {
+    var basePrice = "";
+    if(basePriceIn != "")
+        basePrice = basePriceIn + " рублей";
+    const option = document.createElement("option");
+    option.value = value || "";
+    option.selected = isSelected;
+    option.text = name + " " + basePrice;
+    option.setAttribute('basePrice', basePriceIn);
+    return option;
+}
+
+// функция создает ссылку (a) для таблицы
+// содержимое тега a заполняется необходимой иконкой (icon)
+// при нажатии вызывается callback
+// ссылка "оборачивается" тегом td
+// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
+function createTableAnchor(icon, callback) {
+    const img = document.createElement("img");
+    img.src = "./img/" + icon + ".png";
+    img.height = 20;
+    img.alt = "img";
+
+    const a = document.createElement("a");
+    a.href = "#";
+    a.appendChild(img);
+    a.onclick = (event) => {
+        // чтобы в URL не добавлялась решетка
+        event.preventDefault();
+        event.stopPropagation();
+        callback();
+    };
+
+    const td = document.createElement("td");
+    td.setAttribute('class', 'align-middle text-center');
+    td.appendChild(a);
+    return td;
+}
+
+// функция создает колонку таблицы с текстом value
+// <td>value</td>
+function createTableColumn(value) {
+    const td = document.createElement("td");
+    td.setAttribute('class', 'align-middle text-center');
+    td.textContent = value;
+    return td;
+}
+
+// функция создает строку таблицы
+// <tr>
+// <th scope="row">index + 1</th>
+// <td>item.items.name</td>
+// <td>parseFloat(item.price).toFixed(2))</td>
+// <td>item.count</td>
+// <td>parseFloat(item.sum).toFixed(2))</td>
+// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
+// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
+// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
+// </tr>
+export function createTableRow(item, index, editPageCallback, deleteCallback) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+    rowNumber.setAttribute('class', 'fw-bold align-middle text-center')
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    row.appendChild(createTableColumn(item.items.name ));
+    row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
+    row.appendChild(createTableColumn(item.count));
+    row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
+    row.appendChild(createTableColumn(item.benefit));
+
+    // редактировать на странице page-edit
+    row.appendChild(createTableAnchor("pen-to-square", editPageCallback));
+    // удаление
+    row.appendChild(createTableAnchor("trash", deleteCallback));
+    return row;
+}
--- a/vite/js/lines.js
+++ b/vite/js/lines.js
@ -0,0 +1,233 @@
+// модуль с логикой
+
+import {
+    createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
+} from "./lines-rest-api";
+import {
+    cntrls, createItemsOption, createTableRow, imagePlaceholder,
+} from "./lines-ui";
+
+async function drawItemsSelect() {
+    // вызов метода REST API для получения списка типов товаров
+    const data = await getAllItemTypes();
+    // очистка содержимого select
+    // удаляется все, что находится между тегами <select></select>
+    // но не атрибуты
+    cntrls.itemsType.innerHTML = "";
+    // пустое значение
+    cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", "",  true));
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item) => {} аналогично function(item) {}
+    data.forEach((item) => {
+        cntrls.itemsType.appendChild(createItemsOption(item.name, item.id, item.basePrice));
+    });
+}
+
+async function drawLinesTable() {
+    console.info("Try to load data");
+    if (!cntrls.table) {
+        return;
+    }
+    // вызов метода REST API для получения всех записей
+    const data = await getAllLines();
+    // очистка содержимого table
+    // удаляется все, что находится между тегами <table></table>
+    // но не атрибуты
+    cntrls.table.innerHTML = "";
+    // цикл по результату ответа от сервера
+    // используется лямбда-выражение
+    // (item, index) => {} аналогично function(item, index) {}
+    data.forEach((item, index) => {
+        cntrls.table.appendChild(
+            createTableRow(
+                item,
+                index,
+                // функции передаются в качестве параметра
+                // это очень удобно, так как аргументы функций доступны только
+                // в данном месте кода и не передаются в сервисные модули
+                () => location.assign(`page-edit.html?id=${item.id}`),
+                () => removeLine(item.id),
+            ),
+        );
+    });
+}
+
+async function addLine(item, price, count, image, basePrice) {
+    console.info("Try to add item");
+    // вызов метода REST API для добавления записи
+    const data = await createLine(item, price, count, image, basePrice);
+    console.info("Added");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function editLine(id, item, price, count, image, basePrice) {
+    console.info("Try to update item");
+    // вызов метода REST API для обновления записи
+    const data = await updateLine(id, item, price, count, image, basePrice);
+    console.info("Updated");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function removeLine(id) {
+    if (!confirm("Do you really want to remove this item?")) {
+        console.info("Canceled");
+        return;
+    }
+    console.info("Try to remove item");
+    // вызов метода REST API для удаления записи
+    const data = await deleteLine(id);
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+// функция для получения содержимого файла в виде base64 строки
+// https://ru.wikipedia.org/wiki/Base64
+async function readFile(file) {
+    const reader = new FileReader();
+
+    // создание Promise-объекта для использования функции
+    // с помощью await (асинхронно) без коллбэков (callback)
+    // https://learn.javascript.ru/promise
+    return new Promise((resolve, reject) => {
+        // 2. "Возвращаем" содержимое когда файл прочитан
+        // через вызов resolve
+        // Если не использовать Promise, то всю работу по взаимодействию
+        // с REST API пришлось бы делать в обработчике (callback) функции
+        // onloadend
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            // Здесь могла бы быть работа с REST API
+            // Чтение заканчивает выполняться здесь
+            resolve(fileContent);
+        };
+        // 3. Возвращаем ошибку
+        reader.onerror = () => {
+            // Или здесь в случае ошибки
+            reject(new Error("oops, something went wrong with the file reader."));
+        };
+        // Шаг 1. Сначала читаем файл
+        // Чтение начинает выполняться здесь
+        reader.readAsDataURL(file);
+    });
+}
+
+// функция для обновления блока с превью выбранного изображения
+async function updateImagePreview() {
+    // получение выбранного файла
+    // возможен выбор нескольких файлов, поэтому необходимо получить только первый
+    const file = cntrls.image.files[0];
+    // чтение содержимого файла в виде base64 строки
+    const fileContent = await readFile(file);
+    console.info("base64 ", fileContent);
+    // обновление атрибута src для тега img с id image-preview
+    cntrls.imagePreview.src = fileContent;
+}
+
+
+// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
+// Если хотите делать через модальное окно, то удалите эту функцию
+export async function linesPageForm() {
+    console.info("linesPageForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+    // func1 = (id) => {} аналогично function func1(id) {}
+    const goBack = () => location.assign("./Admin.html");
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события onchange в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+    cntrls.itemsType.addEventListener("change", () => cntrls.price.value = parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')))
+
+    // получение параметров GET-запроса из URL
+    // параметры перечислены после символа ? (?id=1&color=black&...)
+    const urlParams = new URLSearchParams(location.search);
+
+    // получение значения конкретного параметра (id)
+    // указан только при редактировании
+    const currentId = urlParams.get("id");
+    // если id задан
+    if (currentId) {
+        try {
+            // вызов метода REST API для получения записи по первичному ключу(id)
+            const line = await getLine(currentId);
+            // заполнение формы для редактирования
+            cntrls.itemsType.value = line.itemsId;
+            cntrls.price.value = line.price;
+            cntrls.count.value = line.count;
+            // заполнение превью
+            // Если пользователь выбрал изображение, то оно загружается
+            // в тэг image с id image - preview
+            // иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
+            cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
+        } catch {
+            // в случае ошибки происходит возврат к page4
+            goBack();
+        }
+    }
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (button) с типом submit
+    // кнопка должна находится внутри тега form
+    cntrls.form.addEventListener("submit", async (event) => {
+        console.info("Form onSubmit");
+        // отключение стандартного поведения формы при отправке
+        // при отправке страница обновляется и JS перестает работать
+        event.preventDefault();
+        event.stopPropagation();
+        // если форма не прошла валидацию, то ничего делать не нужно
+        if (!cntrls.form.checkValidity()) {
+            return;
+        }
+
+        let imageBase64 = "";
+        // Получение выбранного пользователем изображения в виде base64 строки
+        // Если пользователь ничего не выбрал, то не нужно сохранять в БД
+        // дефолтное изображение
+        if (cntrls.imagePreview.src !== imagePlaceholder) {
+            // Загрузка содержимого атрибута src тэга img с id image-preview
+            // Здесь выполняется HTTP запрос с типом GET
+            const result = await fetch(cntrls.imagePreview.src);
+            // Получение из HTTP-ответа бинарного содержимого
+            const blob = await result.blob();
+            // Получение base64 строки для файла
+            // Здесь выполняется Promise из функции readFile
+            // Promise позволяет писать линейный код для работы с асинхронными методами
+            // без использования обработчиков (callback) с помощью await
+            imageBase64 = await readFile(blob);
+        }
+
+        // если значение параметра запроса не задано,
+        // то необходимо выполнить добавление записи
+        // иначе обновление записи
+        if (!currentId) {
+            await addLine(
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.count.value,
+                imageBase64,
+                parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')),
+            );
+        } else {
+            await editLine(
+                currentId,
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.count.value,
+                imageBase64,
+                parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')),
+            );
+        }
+        // возврат к странице page4
+        goBack();
+    });
+}
--- a/vite/js/validation.js
+++ b/vite/js/validation.js
@ -0,0 +1,25 @@
+// модуль используется для валидации форма на странице
+
+function validation() {
+    // поиск всех форма с классом .needs-validation
+    const forms = document.querySelectorAll("form.needs-validation");
+
+    for (let i = 0; i < forms.length; i += 1) {
+        const form = forms[i];
+        // для каждой формы добавляется обработчик события отправки
+        form.addEventListener("submit", (event) => {
+            // если форма не прошла валидацию
+            // то выключить стандартное действие
+            if (!form.checkValidity()) {
+                event.preventDefault();
+                // предотвращает распространение preventDefault
+                // на другие объекты
+                event.stopPropagation();
+            }
+            // добавляет к форме класс was-validated
+            form.classList.add("was-validated");
+        });
+    }
+}
+
+export default validation;
--- a/Lab4/web-site
+++ b/Lab4/web-site
@ -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/vite/package-lock.json
+++ b/vite/package-lock.json
--- a/vite/package.json
+++ b/vite/package.json
@ -0,0 +1,38 @@
+{
+  "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-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/vite/public/vite.svg
+++ b/vite/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/vite/src/App.css
+++ b/vite/src/App.css
--- a/vite/src/App.jsx
+++ b/vite/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/nav-bar.jsx';
+
+const App = ({ routes }) => {
+    return (
+        <>
+            <Navigation routes={routes}></Navigation>
+            <Container className='p-2' as="main" fluid>
+                <Outlet />
+            </Container>
+            <Footer />
+        </>
+    );
+};
+
+App.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default App;
--- a/vite/src/assets/placeHolder.png
+++ b/vite/src/assets/placeHolder.png
--- a/vite/src/components/footer/footer.css
+++ b/vite/src/components/footer/footer.css
@ -0,0 +1,4 @@
+.footer-style{
+    background-color: rgba(249,134,23,0.8) !important;
+    border-top: 7px solid #7c2d00 !important;
+}
--- a/vite/src/components/footer/footer.jsx
+++ b/vite/src/components/footer/footer.jsx
@ -0,0 +1,22 @@
+import './footer.css'
+
+const Footer = () => {
+    return (
+        <footer className="position-sticky 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/vite/src/components/navigation/nav-bar.css
+++ b/vite/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/vite/src/components/navigation/nav-bar.jsx
+++ b/vite/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='xl' 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/vite/src/main.jsx
+++ b/vite/src/main.jsx
@ -0,0 +1,67 @@
+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 Galery from './pages/Galery.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: '/Galery',
+        element: <Galery />,
+        title: 'Галерея',
+    },
+    {
+        path: '/Courses',
+        element: <Courses />,
+        title: 'Курсы',
+    },
+    {
+        path: '/Contacts',
+        element: <Contacts />,
+        title: 'Контакты',
+    },
+    {
+        path: '/Reviews',
+        element: <Reviews />,
+        title: 'Отзывы',
+    },
+    {
+        path: '/Admin',
+        element: <Admin />,
+        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/vite/src/myStyle.css
+++ b/vite/src/myStyle.css
@ -0,0 +1,80 @@
+.pageBackground{
+    background-image: url('./assets/MainBackGround.jpg') !important;
+    background-attachment: fixed  !important;
+    height: auto  !important; min-height: 100vh  !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;
+}
+.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;
+}
+.minW-160{
+    min-width: 160px !important;
+}
+.width-100{
+    width: 100% !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/vite/src/pages/Admin.jsx
+++ b/vite/src/pages/Admin.jsx
@ -0,0 +1,32 @@
+import {Button, Table} from "react-bootstrap";
+import {Link} from "react-router-dom";
+import React from "react";
+
+const Admin = () => {
+    return(
+        <>
+            <main className="container p-2 formStyle formSizeStyle rounded-8 my-4">
+                <Button as={Link} to={'/page-edit'} variant="dark" className="btn purple text-light rounded-pill mb-3">Добавить курс</Button>
+                <div className="overflow-x-auto height-500 p-0">
+                    <Table id="items-table" className="table">
+                        <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"></tbody>
+                    </Table>
+                </div>
+            </main>
+        </>
+    )
+}
+
+export default Admin;
--- a/vite/src/pages/Contacts.jsx
+++ b/vite/src/pages/Contacts.jsx
@ -0,0 +1,24 @@
+const Contacts = () => {
+    return(
+        <div className="container mx-auto my-5 p-2 rounded-8 fw-bold formStyle formSizeStyle minH-500 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 col-12 col-xl-7">
+                    <script type="text/javascript" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aa04c81f9d2fb99b1196ebaa14018b658af59476c09548a9d1ed257c055abf2c1&amp;width=100%&amp;height=400px&amp;lang=ru_RU&amp;scroll=true"></script>
+                </div>
+                <div className="col col-12 col-xl-5 text-dark fs-4 fw-bold text-center text-xl-start mt-4 mt-xl-0">
+                    Группа в ВКонтакте <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/vite/src/pages/Courses.jsx
+++ b/vite/src/pages/Courses.jsx
@ -0,0 +1,72 @@
+import img1 from '../assets/CourseImage1.jpg'
+import img2 from '../assets/CourseImage2.jpg'
+import img3 from '../assets/CourseImage3.jpg'
+
+const Courses = () => {
+    return(
+        <>
+            <div className="container mx-auto my-5 formSizeStyle">
+                <div className="row row-cols-xl-3 row-cols-md-2 row-cols-1 pd-3  text-center text-secondary-emphasis">
+                    <div className="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon" >
+                        <img src={img1} className="my-3 rounded-8" alt="image" height="150"></img>
+                        <div className="my-3 fs-3 fw-bold">
+                            1 занятие <br/>
+                            2500 рублей
+                        </div>
+                        <button className="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
+                            Записаться
+                        </button>
+                    </div>
+                    <div className="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
+                        <img src={img2} className="my-3 rounded-8" alt="image" height="150"/>
+                        <div className="my-3 fs-3 fw-bold">
+                            5 занятий <br/>
+                            10000 рублей
+                        </div>
+                        <button className="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
+                            Записаться
+                        </button>
+                    </div>
+                    <div className="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
+                        <img src={img3} className="my-3 rounded-8" alt="image" height="150"/>
+                        <div className="my-3 fs-3 fw-bold">
+                            11 занятий <br/>
+                            20000 рублей
+                        </div>
+                        <button className="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
+                            Записаться
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div className="modal fade" id="signUp" tabIndex="-1" aria-labelledby="signUp" aria-hidden="true">
+                <div className="modal-dialog modal-dialog-centered">
+                    <div className="modal-content rounded-8 modalStyle">
+                        <div className="modal-header">
+                            <h5 className="modal-title fw-bold fs-3 text-secondary-emphasis" id="signUpLabel">Запись на курс</h5>
+                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+                        </div>
+                        <div className="modal-body">
+                            <form>
+                                <div className="mb-3">
+                                    <label htmlFor="recipient-name" className="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваше имя:</label>
+                                    <input type="text" className="form-control rounded-8 light-grey" id="recipient-name"></input>
+                                </div>
+                                <div className="mb-3">
+                                    <label htmlFor="signUpText" className="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваш номер телефона +7-...:</label>
+                                    <input type="tel" className="form-control rounded-8 light-grey" id="signUpText"></input>
+                                </div>
+                                <p className="fw-bold fw-5 text-secondary-emphasis">С вами свяжется наш оператор для уточнения деталей</p>
+                            </form>
+                        </div>
+                        <div className="modal-footer">
+                            <button type="button" className="btn rounded-pill text-light fw-normal fs-6 purple">Ввод</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Courses;
--- a/vite/src/pages/ErrorPage.jsx
+++ b/vite/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/vite/src/pages/Galery.jsx
+++ b/vite/src/pages/Galery.jsx
@ -0,0 +1,49 @@
+import img3 from '../assets/image 3.jpg';
+import img4 from '../assets/image 4.jpg';
+import img5 from '../assets/image 5.jpg';
+
+const Galery = () => {
+
+    return (
+        <>
+            <div className="container mx-auto my-5 p-2 fw-bold rounded-8 formStyle formSizeStyle hfitcon">
+                <div className="row row-cols-1 row-cols-lg-2  row-cols-xxl-3 pb-3 text-center response-container" id="response-container">
+                    <button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
+                        <img src={img3} className="rounded-8 width-100" alt="image"/>
+                    </button>
+                    <button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
+                        <img src={img4} className="rounded-8 width-100" alt="image"/>
+                    </button>
+                    <button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
+                        <img src={img5} className="rounded-8 width-100" alt="image"/>
+                    </button>
+                    <button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
+                        <img src={img3} className="rounded-8 width-100" alt="image"/>
+                    </button>
+                    <button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
+                        <img src={img4} className="rounded-8 width-100" alt="image"/>
+                    </button>
+                    <button className="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
+                        <img src={img5} className="rounded-8 width-100" alt="image"/>
+                    </button>
+                    <button type="button" className="col-xxl-4 col-lg-6 col-12 p-0 btn btn-dark mx-auto my-4 rounded-8 fw-bold fs-1 PictureButton">
+                        +
+                    </button>
+                    <input id="file" type="file" hidden/>
+                </div>
+            </div>
+            <div className="modal fade " id="imageModal" tabIndex="-1" aria-labelledby="imageModalLabel">
+                <div className="modal-dialog modal-dialog-centered modal-fullscreen mx-auto modal-dialog-style">
+                    <div className="modal-content rounded-8">
+                        <div className="modal-body text-center rounded-8 modalStyle hfitcon width-100">
+                            <button type="button" className="btn-close position-absolute top-0 end-0 me-1" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+                            <img id="image" className="mx-auto width-100" src="" alt="image"></img>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Galery;
--- a/vite/src/pages/MainPage.jsx
+++ b/vite/src/pages/MainPage.jsx
@ -0,0 +1,16 @@
+
+const MainPage = () => {
+    return (
+        <div className="text-light mx-auto mt-5 mb-5 fw-bold p-4 mainPageInf">
+            <h2>Рад приветствовать вас на моем сайте!</h2>
+            <h4 className="mt-4">Меня зовут Илья, я иструктор по экстремальному вождению с 15-летним стажем. В течение многих лет я участвовал и
+                побеждал во многих ралли заездах, таких как
+                "Париж-Дакар", "Симбирский тракт" и др.
+            </h4>
+            <h4 className="mt-4">Обучение экстримальному вождению добавит вам уверенности при езде не только по грунтовым дорогам, но и по асфальту,
+                а также в условиях снега, дождя и при других экстримальных ситуациях. Помните, что ваша безопасность на дороге зависит от ваших навыков вождения!</h4>
+        </div>
+    );
+};
+
+export default MainPage;
--- a/vite/src/pages/Reviews.jsx
+++ b/vite/src/pages/Reviews.jsx
@ -0,0 +1,48 @@
+import AccountImg from '../assets/AccountIcon.png'
+
+const Reviews = () => {
+    return(
+        <>
+            <div className="container mx-auto my-5 p-2 rounded-8 fw-bold formStyle formStyle height-450">
+                <div className="row row-cols-2 text-dark float-md-end mx-auto fs-5 fw-medium rounded-8 light-grey accauntPanel">
+                    <div className="col col-8 text-center my-auto lh-1">
+                        <a type="button" className="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#LogIn">Войдите</a> в аккаунт или
+                        <a type="button" className="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#Register">зарегистрируйтесь</a>
+                    </div>
+                    <div className="col col-4 mx-auto my-auto">
+                        <img src={AccountImg} alt="Icon" width="80"/>
+                    </div>
+                </div>
+                <div className="text-md-start text-center">
+                    <button type="button" id="reviewBtn" className="btn rounded-pill btn-lg text-light my-2 mt-md-4 mb-md-5 ms-sm-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#review">
+                        Написать отзыв
+                    </button>
+                    <div className="container overflow-y-auto height-300" >
+                        <div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
+                            <h5 className="fw-normal text-dark">Михаил</h5>
+                            <h6>Разбил аппарат, рекомендую</h6>
+                        </div>
+                        <div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
+                            <h5 className="fw-normal text-dark">Леша</h5>
+                            <h6>Марк 2 лучше</h6>
+                        </div>
+                        <div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
+                            <h5 className="fw-normal text-dark">Женя</h5>
+                            <h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
+                                все таки дело полезное. Отлично провели время, инструктор объяснил что и как
+                                теперь я действительно чувствую себя увереннее за рулем</h6>
+                        </div>
+                        <div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
+                            <h5 className="fw-normal text-dark">Женя</h5>
+                            <h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
+                                все таки дело полезное. Отлично провели время, инструктор объяснил что и как
+                                теперь я действительно чувствую себя увереннее за рулем</h6>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Reviews;
--- a/vite/src/pages/page-edit.jsx
+++ b/vite/src/pages/page-edit.jsx
@ -0,0 +1,40 @@
+import placeHolder from '../assets/placeHolder.png';
+import {Button} from "react-bootstrap";
+import {Link} from "react-router-dom";
+
+const pageEdit = () => {
+    return(
+        <>
+            <main className="container-fluid p-2 formStyle formSizeStyle rounded-8 my-4">
+                <div className="text-center">
+                    <img id="image-preview" src={placeHolder} className="rounded-8 height-200"
+                         alt="placeholder"/>
+                </div>
+                <form id="items-form" className="needs-validation" noValidate>
+                    <div className="mb-2">
+                        <label htmlFor="item" className="form-label">Курсы</label>
+                        <select id="item" className="form-select light-grey rounded-8" name="selected" required>
+                        </select>
+                    </div>
+                    <div className="mb-2">
+                        <label className="form-label" htmlFor="price">Цена за занятие</label>
+                        <input id="price" name="price" className="form-control light-grey rounded-8" type="number" value="0.00" min="1000.00" step="10"
+                               required/>
+                    </div>
+                    <div className="mb-2">
+                        <label className="form-label" htmlFor="count">Количество занятий</label>
+                        <input id="count" name="count" className="form-control light-grey rounded-8" type="number" value="0" min="1" step="1" required/>
+                    </div>
+                    <div className="mb-2">
+                        <label className="form-label" htmlFor="image">Изображение</label>
+                        <input id="image" type="file" name="image" className="form-control light-grey rounded-8" accept="image/*"/>
+                    </div>
+                    <Button as={Link} to={'/Admin'} variant={'dark'} className="btn dark-grey text-light rounded-pill me-2">Назад</Button>
+                    <button type="submit" className="btn purple text-light rounded-pill">Сохранить</button>
+                </form>
+            </main>
+        </>
+    )
+}
+
+export default pageEdit;
--- a/vite/style.css
+++ b/vite/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/vite/vite.config.js
+++ b/vite/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,
+  },
+});
				`@ -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>