вот би был егэ по барьба

Lab2/fifth.html

@@ -43,7 +43,7 @@
     <main class="flex-shrink-0">
 
         <div class="container mt-2 mx-auto my-5 p-2 rounded-8 fw-bold" style="width: 90%;  min-width: 360px; height: 100%; background-color: white; ">
-            <div class= "rounded row row-cols-2 text-dark float-md-end mx-auto fs-5 fw-medium rounded-7 py-2 mb-2" style="height: fil-content; width: 325px; background-color: #d9d9d9">
+            <div class= "rounded row row-cols-2 text-dark float-md-end mx-auto fs-5 fw-medium rounded-7 py-2 mb-2" style="height: fit-content; width: 325px; background-color: #d9d9d9">
                 <div class="col col-8 text-center my-auto lh-1">
                     <a type="button" class="text-decoration-underline" style="height: fit-content; width: fit-content" data-bs-toggle="modal" data-bs-target="#LogIn" >Войдите в аккаунт</a> или
                     <a type="button" class="text-decoration-underline" style="height: fit-content; width: fit-content" data-bs-toggle="modal" data-bs-target="#Register" >зарегистрируйтесь</a>
@@ -173,7 +173,7 @@
         Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.</i>
         </div>
 
-        <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+        <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style=" background-color: #302b2b ; color : white">
             Для администратора            
         </button>
 
@@ -194,7 +194,7 @@
                     </div>
                     <div class="modal-footer" style="background-color: #302b2b ">
                         
-                            <a style = "font-size:20px" class="nav-link ms-2" href="sixth.html">Войти</a>
+                            <a style = "font-size:20px" class="nav-link ms-2" href="page4.html">Войти</a>
                         
                     </div>
                 </div>

Lab2/fourth.html

@@ -41,33 +41,32 @@
         </nav>
     </header>
     
-    <main class="flex-shrink-0">
-        <div class="container mb-4">
-            <div class="row">
-                <div class = "col-md-9" >
-                    <div class="p-2 mt-4 me-5" >
-                        <img src="img/price.png" alt="Картинка"  class="w-100">
-                    </div>
-                </div>
-                <div class="col-md-3">
-                    <div class="p-2 mt-4 ">
-                        <h1>Объявление</h1>
-                        <p class="mt-3 mb-2">С 01.09 по 31.05 
-                            действуют скидки на аренду спортивного инвентаря. Также возможна аренда на длительный срок. Обращайтесь по телефонам в контактах.
-                        </p>
-                            
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <div class= "mx-auto" style="width: 100%;">
-                        <p class>*аренда производится только при наличии залогового имущества</p>
-         
-                    </div>
-                </div>
-            </div>
+
+
+    <main class="container-fluid p-2">
+        <div>
+            <table id="items-table" class=" mx-auto  table table-secondary table-hover table-bordered  table-striped w-50">
+                <thead>
+                    <th scope="col" class="w-25">№</th>
+                    <th scope="col" class="w-25">Товар</th>
+                    
+                    
+                    <th scope="col" class="w-25" >Сумма</th>
+                    
+                </thead>
+                <tbody></tbody>
+            </table>
         </div>
     </main>
 
+    <script type="module">
+        import { linesForm } from "./js/linesUsers";
+        document.addEventListener('DOMContentLoaded', () => {
+            linesForm();
+        });
+    </script>
+
+
     <footer class="footer mt-auto d-flex justify-content-center align-items-center" style="height: 100px ;">
         Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
     </footer>

Lab2/js/banner.js

@@ -0,0 +1,46 @@
+// модуль для смены изображения в баннере по таймеру
+
+import "../css/banner.css";
+
+// указывается блок, в котором будет баннер
+// блок должен содержать изображения
+function myBanner(root) {
+    console.info("Loaded");
+
+    // получение всех изображений внутри баннера
+    const banners = document.querySelectorAll(`${root} img`);
+
+    // всем изображениям устанавливается класс banner-hide
+    // если были другие классы, то они будут удалены
+    for (let i = 0; i < banners.length; i += 1) {
+        banners[i].setAttribute("class", "banner-hide");
+    }
+
+    let old = banners.length - 1;
+    let current = 0;
+
+    // функция меняет изображения в цикле
+    // изображение с классом banner-show будет показано
+    // изображение с классом banner-hide будет скрыто
+    // функция запускает таймер, который через 5 секунд
+    // запускает функцию, снова создается таймер и т. д.
+    function loop() {
+        banners[current].setAttribute("class", "banner-show");
+        banners[old].setAttribute("class", "banner-hide");
+
+        console.info("Banner changed");
+
+        old = current;
+        current += 1;
+
+        if (current === banners.length) {
+            current = 0;
+        }
+
+        setTimeout(loop, 5000);
+    }
+
+    loop();
+}
+
+export default myBanner;

Lab2/js/bebra.js

@@ -0,0 +1,32 @@
+const serverUrl = "http://localhost:8081";
+
+const lst= document.querySelector("#time");
+
+export async function getAllItemTime() {
+    const response = await fetch(`${serverUrl}/time`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+function createOption( time){
+    const option = document.createElement("option");
+    option.textContent = time.timer;
+//option.text = name;
+    //option.selected = isSelected;
+    lst.appendChild(option);
+}
+
+export default async function fillList(){
+    const data = await getAllItemTime();
+    lst.innerHTML ="";
+    // пустое значение
+    //lst.appendChild(createOption("выберите значение","", true));
+
+    data.forEach((time)=>{
+       // if(time.trim() !== ""){
+            createOption(time);
+     //  }
+    })
+}

Lab2/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.time.value = 1;
+    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.time.value = item.time;
+        // заполнение превью
+        // Если пользователь выбрал изображение, то оно загружается
+        // в тэг 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();
+}

Lab2/js/lines-rest-api.js

@@ -0,0 +1,102 @@
+// модуль для работы с REST API сервера
+
+// адрес сервера
+const serverUrl = "http://localhost:8081";
+
+// функция возвращает объект нужной структуры для отправки на сервер
+function createLineObject(item, price,time, image) {
+    return {
+        itemsId: item,
+        price: parseFloat(price).toFixed(2),
+       time: time,
+       sum: parseFloat(price * time).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,time, image) {
+    const itemObject = createLineObject(item, price, time, image);
+
+    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, time, image) {
+    const itemObject = createLineObject(item, price, time, image);
+
+    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();
+}

Lab2/js/lines-ui.js

@@ -0,0 +1,108 @@
+// модуль для работы с элементами управления
+
+// объект для удобного получения элементов
+// при обращении к атрибуту объекта вызывается
+// нужная функция для поиска элемента
+export const cntrls = {
+    button: document.getElementById("items-add"),
+    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"),
+    time: document.getElementById("time"),
+    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 = "", isSelected = false) {
+    const option = document.createElement("option");
+    option.value = value || "";
+    option.selected = isSelected;
+    option.text = name;
+    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 i = document.createElement("i");
+    i.classList.add("fa-solid", icon);
+
+    const a = document.createElement("a");
+    a.href = "#";
+    a.appendChild(i);
+    a.onclick = (event) => {
+        // чтобы в URL не добавлялась решетка
+        event.preventDefault();
+        event.stopPropagation();
+        callback();
+    };
+
+    const td = document.createElement("td");
+    td.appendChild(a);
+    return td;
+}
+
+// функция создает колонку таблицы с текстом value
+// <td>value</td>
+function createTableColumn(value) {
+    const td = document.createElement("td");
+    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, editCallback, editPageCallback, deleteCallback) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    //row.appendChild(createTableColumn("Сапборд"));
+    row.appendChild(createTableColumn(item.items.name));
+    row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
+    row.appendChild(createTableColumn(item.time));
+    row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
+    // редактировать в модальном окне
+    row.appendChild(createTableAnchor("fa-pencil", editCallback));
+    // удаление
+    row.appendChild(createTableAnchor("fa-trash", deleteCallback));
+    return row;
+}
+
+export function createTableRowUser(item, index) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    row.appendChild(createTableColumn(item.items.name));
+    //row.appendChild(createTableColumn(item.time));
+    row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
+    return row;
+}

Lab2/js/lines.js

@@ -0,0 +1,210 @@
+// модуль с логикой
+
+import { hideUpdateModal, showUpdateModal } from "./lines-modal";
+import {
+    createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
+} from "./lines-rest-api";
+//import { getAllItemTime } from "./bebra";
+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));
+    });
+}
+
+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,
+                // функции передаются в качестве параметра
+                // это очень удобно, так как аргументы функций доступны только
+                // в данном месте кода и не передаются в сервисные модули
+                () => showUpdateModal(item),
+                () => location.assign(`page-edit.html?id=${item.id}`),
+                () => removeLine(item.id),
+            ),
+        );
+    });
+}
+
+async function addLine(item, price, time,  image) {
+    console.info("Try to add item");
+    // вызов метода REST API для добавления записи
+    const data = await createLine(item, price, time, image);
+    console.info("Added");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function editLine(id, item, price, time, image) {
+    console.info("Try to update item");
+    // вызов метода REST API для обновления записи
+    const data = await updateLine(id, item, price, time, image);
+    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;
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через модальное окно
+// Если хотите делать через страницу, то удалите эту функцию
+export function linesForm() {
+    console.info("linesForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события oncahnge в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    //  обработчик события нажатия на кнопку для показа модального окна
+    cntrls.button.addEventListener("click", () => showUpdateModal(null));
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (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);
+        }
+
+        // получение id строки для редактирования
+        // это значение содержится в скрытом input
+        const currentId = cntrls.lineId.value;
+        // если значение id не задано,
+        // то необходимо выполнить добавление записи
+        // иначе обновление записи
+        if (!currentId) {
+            await addLine(
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.time.value,
+                imageBase64,
+            );
+        } else {
+            await editLine(
+                currentId,
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.time.value,
+                imageBase64,
+            );
+        }
+
+        // после выполнения добавления/обновления модальное окно скрывается
+        hideUpdateModal();
+    });
+}
+

Lab2/js/linesUsers.js

@@ -0,0 +1,134 @@
+// модуль с логикой
+import { hideUpdateModal, showUpdateModal } from "./lines-modal";
+import {
+    getAllItemTypes, getAllLines,
+} from "./lines-rest-api";
+import {
+    cntrls, createItemsOption, createTableRowUser,
+} 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));
+    });
+}
+
+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(
+            createTableRowUser(
+                item,
+                index,
+            ),
+        );
+    });
+}
+
+// функция для получения содержимого файла в виде 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;
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через модальное окно
+// Если хотите делать через страницу, то удалите эту функцию
+// eslint-disable-next-line import/prefer-default-export
+export function linesForm() {
+    console.info("linesForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события oncahnge в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    //  обработчик события нажатия на кнопку для показа модального окна
+    cntrls.button.addEventListener("click", () => showUpdateModal(null));
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (button) с типом submit
+    // кнопка должна находится внутри тега form
+    cntrls.form.addEventListener("submit", async (event) => {
+        console.info("Form onSubmit");
+        // отключение стандартного поведения формы при отправке
+        // при отправке страница обновляется и JS перестает работать
+        event.preventDefault();
+        event.stopPropagation();
+        // если форма не прошла валидацию, то ничего делать не нужно
+        if (!cntrls.form.checkValidity()) {
+            return;
+        }
+        // получение id строки для редактирования
+        // это значение содержится в скрытом input
+
+        // если значение id не задано,
+        // то необходимо выполнить добавление записи
+        // иначе обновление записи
+        // после выполнения добавления/обновления модальное окно скрывается
+        hideUpdateModal();
+    });
+}

Lab2/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;

Lab2/package.json

@@ -3,19 +3,25 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "vite": "vite",
     "serve": "http-server -p 3000 ./dist/",
     "build": "vite build",
-    "prod": "npm-run-all build serve"
+    "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.3.2",
-    "@fortawesome/fontawesome-free": "6.4.2"
+    "@fortawesome/fontawesome-free": "6.4.2",
+    "bootstrap": "5.3.2"
   },
   "devDependencies": {
+    "eslint": "8.50.0",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-plugin-import": "2.28.1",
     "http-server": "14.1.1",
-    "vite": "4.4.9",
-    "npm-run-all": "4.1.5"
+    "json-server": "^0.17.4",
+    "npm-run-all": "4.1.5",
+    "vite": "4.4.9"
   },
   "main": "index.js",
   "author": "",

Lab2/page-edit.html

@@ -0,0 +1,87 @@
+<html lang="ru">
+
+<head>
+    <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+</head>
+
+<body class="h-100 d-flex flex-column">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="container-fluid p-2">
+        <div class="text-center">
+            <img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
+                alt="placeholder">
+        </div>
+        <form id="items-form" class="needs-validation" novalidate>
+            <div class="mb-2">
+                <label for="item" class="form-label">Товары</label>
+                <select id="item" class="form-select" name="selected" required>
+                </select>
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="price">Цена</label>
+                <input id="price" name="price" class="form-control" type="number" value="0.00" min="1000.00" step="0.50"
+                    required>
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="time">Время</label>
+                <select id="time" class="form-select" name="selected" required></select>
+                <!--<input id="count" name="count" class="form-control" type="number" value="0" min="1" step="1" required>-->
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="image">Изображение</label>
+                <input id="image" type="file" name="image" class="form-control" accept="image/*">
+            </div>
+            <a href="/page4.html" class="btn btn-secondary">Назад</a>
+            <button type="submit" class="btn btn-primary">Сохранить</button>
+        </form>
+    </main>
+    <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+    <script type="module">
+        import validation from "./js/validation";
+        import { linesPageForm } from "./js/lines"
+
+        document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesPageForm();
+        });
+    </script>
+</body>
+
+</html>

Lab2/page4.html

@@ -0,0 +1,122 @@
+<html lang="ru">
+
+<head>
+    <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+</head>
+
+<body class="h-100 d-flex flex-column">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="container-fluid p-2">
+        <div class="btn-group" role="group">
+            <button id="items-add" class="btn btn-info" style="background-color: #302b2b; color:white ;">Добавить товар </button>  
+        </div>
+        <div>
+            <table id="items-table" class="table table-hover table-striped">
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" class="w-25">Товар</th>
+                    <th scope="col" class="w-25">Цена</th>
+                    <th scope="col" class="w-25">Время</th>
+                    <th scope="col" class="w-25">Сумма</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                    
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    </main>
+    <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+    <div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
+        <div class="modal-dialog">
+            <form id="items-form" class="needs-validation" novalidate>
+                <div class="modal-content">
+                    <div class="modal-header" style="background-color: #302b2b;">
+                        <h1 class="modal-title fs-5" style="color:white" id="items-update-title"></h1>
+                        <button type="button" class="btn-close" style="background-color: white;" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="text-center">
+                            <img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
+                                alt="placeholder">
+                        </div>
+                        <input id="items-line-id" type="number" hidden>
+                        <div class="mb-2">
+                            <label for="item" class="form-label">Товары</label>
+                            <select id="item" class="form-select" name="selected" required>
+                            </select>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="price">Цена за час</label>
+                            <input id="price" name="price" class="form-control" type="number" value="0.00" min="1000.00"
+                                step="0.50" required>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="time">Время</label>
+                            <select id="time" class="form-select" name="selected" required> 
+                            </select>                       
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="image">Изображение</label>
+                            <input id="image" type="file" name="image" class="form-control" accept="image/*">
+                        </div>
+                    </div>
+                    <div class="modal-footer" style="background-color:#302b2b ;">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
+                        <button type="submit" style=" background-color: #d3c725 " class="btn btn-primary">Сохранить</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script type="module">
+        import validation from "./js/validation";
+        import { linesForm } from "./js/lines";
+        import  fillList from "./js/bebra";
+        document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesForm();
+            fillList();
+        });
+    </script>
+
+</body>
+
+</html>

Lab2/second.html

@@ -21,7 +21,7 @@
                     aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
                     <span  style = "color: white" class="navbar-toggler-icon"></span>
                 </button>
-                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                <div class="collapse navbar-collapse align--center" id="navbarNav">
                     <ul class="navbar-nav">
                         <li class="nav-item">
                             <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>

Lab2/sixth.html

@@ -35,6 +35,9 @@
                         <li class="nav-item">
                             <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
                         </li> 
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="page4.html">Таблица</a>
+                        </li> 
                     </ul>
                 </div>
             </div>

Lab2/styles/style.css

@@ -8,27 +8,18 @@
     header nav {
     height: 64px;
     color: #ffffff;
-   
-
+    background-color: #302b2b; /* Цвет фона шапки */
     }
     }
     
-    header .navbar-brand {
-    color: #ffffff; /* Белый цвет текста логотипа */
-    }
-
-    .navbar-dark .navbar-toggler-icon {
-        background-image: url("data:image/svg+xml;..");
-    }
-    
     header .navbar-nav .nav-link {
     color: #ffffff; /* Белый цвет текста навигационных ссылок */
     }
     
     header .navbar-nav .nav-link:hover {
     text-decoration: none;
-    background-color: #7256ae; /* Фон ссылок при наведении */
-    color: #ffffff; /* Цвет текста ссылок при наведении */
+    background-color: yellow; /* Фон ссылок при наведении */
+    color: #302b2b; /* Цвет текста ссылок при наведении */
     }
     
     /* Стиль для футера */
@@ -61,4 +52,11 @@
     pr{
         font-size: 20px;
     }
-    
+    
+    #image-preview {
+        
+        object-fit: cover;
+        width: 200px;
+        height: 200px;
+
+    }

Lab3/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

Lab3/fifth.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="ru" class="h-100">
+    <head>
+        <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+    </head>
+<body class="d-flex flex-column h-100">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1" style = "color: white">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="flex-shrink-0">
+
+        <div class="container mt-2 mx-auto my-5 p-2 rounded-8 fw-bold" style="width: 90%;  min-width: 360px; height: 100%; background-color: white; ">
+            <div class= "rounded row row-cols-2 text-dark float-md-end mx-auto fs-5 fw-medium rounded-7 py-2 mb-2" style="height: fit-content; width: 325px; background-color: #d9d9d9">
+                <div class="col col-8 text-center my-auto lh-1">
+                    <a type="button" class="text-decoration-underline" style="height: fit-content; width: fit-content" data-bs-toggle="modal" data-bs-target="#LogIn" >Войдите в аккаунт</a> или
+                    <a type="button" class="text-decoration-underline" style="height: fit-content; width: fit-content" data-bs-toggle="modal" data-bs-target="#Register" >зарегистрируйтесь</a>
+                </div>
+                <div class="col-2 col-0 mx-auto my-auto">
+                    <img src="img/user.png" alt="Icon" width="60">
+                </div>
+            </div>
+            <div class="text-md-start text-center">
+                
+                <div class="container overflow-y-auto" style="height: 80%">
+                    <button type="button" class="btn rounded btn-lg text-start p-2 rounded-7 my-2" data-bs-toggle="modal" data-bs-target="#review" style="background-color: #302b2b; ">
+                        <h5 class="ms-2 me-2 fw-normal " style=" color: white">Напишите Ваше мнение о нас</h5>
+                    </button>
+                    <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                        <h5 class=" ms-4 fw-normal text-dark">Михаил</h5>
+                        <h6 class ="ms-4 me-4">Чуть не утонул, а инструктор Игорь стоял на берегу и смеялся над тем как я барахтаюсь. А так всё отлично. 4 звезды за поведение Игоря! </h6>
+                    </div>
+                    <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                        <h5 class=" ms-4 fw-normal text-dark">Леша</h5>
+                        <h6 class=" ms-4 me-4">ничего интересного</h6>
+                    </div>
+                    <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                        <h5 class=" ms-4 fw-normal text-dark">Елена</h5>
+                        <h6 class=" ms-4 me-4">Катались с мужем на сапах. Нам попался чудесный инструктор Игорь. В меру наплавались, обязательно вернемся!</h6>
+                    </div>
+                    <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                        <h5 class=" ms-4 fw-normal text-dark">Игорь</h5>
+                        <h6 class=" ms-4 me-4">Работаю инструктором. Недавно к нам заходила женщина Елена с мужем в сильном алкогольном опьянении... Не понравилось!</h6>
+                    </div>
+                    <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                        <h5 class=" ms-4 fw-normal text-dark">Женя</h5>
+                        <h6 class=" ms-4 me-4">Когда я просил инструктора Игоря научить меня уверенно держаться на воде, я не имел ввиду дергать меня за ноги, пока я буду плавать!</h6>
+                    </div>
+                    <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                        <h5 class=" ms-4 fw-normal text-dark">Михаил</h5>
+                        <h6 class ="ms-4 me-4">Чуть не утонул, а инструктор Игорь стоял на берегу и смеялся над тем как я барахтаюсь. А так всё отлично. 4 звезды за поведение Игоря! </h6>
+                    </div>
+                    <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                        <h5 class=" ms-4 fw-normal text-dark">Михаил</h5>
+                        <h6 class ="ms-4 me-4">Чуть не утонул, а инструктор Игорь стоял на берегу и смеялся над тем как я барахтаюсь. А так всё отлично. 4 звезды за поведение Игоря! </h6>
+                    </div>
+                </div>
+            </div>
+        </div>
+         <!--Модальное окно Отзывы-->
+        <div class="modal fade" id="review" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" style="width: 326px;">
+                <div class="modal-content ">
+                    <div class="modal-header" style="background-color: #302b2b ">
+                        <h5 class="modal-title" id="reviewLabel" style="color: white">Новый отзыв</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть" style="background-color: white"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form>
+                            <div class="mb-3">
+                                <label for="reviewText" class="col-form-label">Текст отзыва:</label>
+                                <textarea class="form-control" rows="5" id="reviewText"></textarea>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer" style="background-color: #302b2b ">
+                        <button type="button" class="btn btn-primary" style=" background-color: #d3c725 ">Отправить</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--Модальное окно вход-->
+    <div class="modal fade" id="LogIn" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" style="width: 326px;">
+            <div class="modal-content">
+                <div class="modal-header" style="background-color: #302b2b ">
+                    <h5 class="modal-title" id="LogInLabel" style="color: white">Вход</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть" style="background-color: white;"></button>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="mb-3">
+                            <label for="nameLogIn" class="col-form-label">Номер телефона</label>
+                            <input type="text" class="form-control" id="nameLogIn">
+                        </div>
+                        <div class="mb-3">
+                            <label for="passwordLogIn" class="col-form-label">Пароль</label>
+                            <input type="password" class="form-control" id="passwordLogIn">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer" style="background-color: #302b2b ">
+                    <button type="button" class="btn btn-primary" style=" background-color: #d3c725 ">Войти</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--Модальное окно регистрация-->
+    <div class="modal fade" id="Register" tabindex="-1" aria-labelledby="RegisterLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" style="width: 326px;">
+            <div class="modal-content">
+                <div class="modal-header" style="background-color: #302b2b ">
+                    <h5 class="modal-title" id="exampleModalLabel" style="color: white">Регистрация</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть" style="background-color: white;"></button>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <div class="mb-3">
+                            <label for="nameRegister" class="col-form-label">Имя</label>
+                            <input type="text" class="form-control" id="nameRegister">
+                        </div>
+                        <div class="mb-3">
+                            <label for="mailRegister" class="col-form-label">Номер телефона</label>
+                            <input type="text" class="form-control" id="mailRegister">
+                        </div>
+                        <div class="mb-3">
+                            <label for="passwordRegister" class="col-form-label">Пароль</label>
+                            <input type="password" class="form-control" id="passwordRegister">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer" style="background-color: #302b2b ">
+                    <button type="button" class="btn btn-primary" style=" background-color: #d3c725 ">Зарегистрироваться</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    </main>
+    <footer class="footer mt-auto d-flex justify-content-center align-items-center" style="height: 100px ;">
+        <div class=" d-flex  container align-items-center">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.</i>
+        </div>
+
+        <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style=" background-color: #302b2b ; color : white">
+            Для администратора            
+        </button>
+
+        <div class="modal fade" id="LogInAdmin" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" >
+            <div class="modal-dialog modal-dialog-centered" style="width: 326px;">
+                <div class="modal-content">
+                    <div class="modal-header" style="background-color: #302b2b ">
+                        <h5 class="modal-title" id="LogInLabel" style="color: white">Вход</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть" style="background-color: white;"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form>  
+                            <div class="mb-3">
+                                <label for="passwordLogIn" class="col-form-label">Пароль Администратора</label>
+                                <input type="password" class="form-control" id="passwordLogIn">
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer" style="background-color: #302b2b ">
+                        
+                            <a style = "font-size:20px" class="nav-link ms-2" href="page4.html">Войти</a>
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>

Lab3/fourth.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="ru" class="h-100">
+    <head>
+        <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+    </head>
+<body class="d-flex flex-column h-100" style="height: 100%;">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    
+
+
+    <main class="container-fluid p-2">
+        <div>
+            <table id="items-table" class=" mx-auto  table table-secondary table-hover table-bordered  table-striped w-50">
+                <thead>
+                    <th scope="col" class="w-25">№</th>
+                    <th scope="col" class="w-25">Товар</th>
+                    
+                    
+                    <th scope="col" class="w-25" >Сумма</th>
+                    
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    </main>
+
+    <script type="module">
+        import { linesForm } from "./js/linesUsers";
+        document.addEventListener('DOMContentLoaded', () => {
+            linesForm();
+        });
+    </script>
+
+
+    <footer class="footer mt-auto d-flex justify-content-center align-items-center" style="height: 100px ;">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+</body>
+</html>

Lab3/index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="ru" class="h-100"> 
+    <head>
+        <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+    </head>
+<body class="d-flex flex-column h-100">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="flex-shrink-0">
+        <div class="container mb-2">
+            <div class="row">
+                <div class="col-md-7">
+                    <div class="p-2 mt-4">
+                        <img src="img/image1.jpg" alt="Картинка"  class="w-100">
+                        
+                    </div>
+                </div>
+                <div class="col-md-5">
+                    <div class="p-2">
+                        
+                        <h1 class ="mt-4">Общая информация</h1>
+                        <p ALIGN = "justify" class="mt-0 mb-2 ">Мы - сервис проката спортивного оборудования WhatSUP. Мы специализируемся на активном отдыхе. В нашем арсенале есть каяки, байдарки, надувные матрасы и конечно же сапборды! В нашем коллективе работают опытные инструкторы, которые научат вас уверенно держаться на воде и получать от этого удовольствие!
+                        </p>
+                        <p  class="mt-3 mb-0">
+                            Ищите нас  на пляжах вашего города,
+                    </p >
+                    <p class="mt-0 mb-0">
+                            Искренне Ваша,
+                    </p>
+                    <p class>
+                            Команда WhatSUP !
+                        
+    
+                    </div>
+                </div>
+                
+            </div>
+        </div>
+    </main>
+    <footer class="footer mt-auto d-flex justify-content-center align-items-center" >
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+</body>
+</html>

Lab3/js/banner.js

@@ -0,0 +1,46 @@
+// модуль для смены изображения в баннере по таймеру
+
+import "../css/banner.css";
+
+// указывается блок, в котором будет баннер
+// блок должен содержать изображения
+function myBanner(root) {
+    console.info("Loaded");
+
+    // получение всех изображений внутри баннера
+    const banners = document.querySelectorAll(`${root} img`);
+
+    // всем изображениям устанавливается класс banner-hide
+    // если были другие классы, то они будут удалены
+    for (let i = 0; i < banners.length; i += 1) {
+        banners[i].setAttribute("class", "banner-hide");
+    }
+
+    let old = banners.length - 1;
+    let current = 0;
+
+    // функция меняет изображения в цикле
+    // изображение с классом banner-show будет показано
+    // изображение с классом banner-hide будет скрыто
+    // функция запускает таймер, который через 5 секунд
+    // запускает функцию, снова создается таймер и т. д.
+    function loop() {
+        banners[current].setAttribute("class", "banner-show");
+        banners[old].setAttribute("class", "banner-hide");
+
+        console.info("Banner changed");
+
+        old = current;
+        current += 1;
+
+        if (current === banners.length) {
+            current = 0;
+        }
+
+        setTimeout(loop, 5000);
+    }
+
+    loop();
+}
+
+export default myBanner;

Lab3/js/bebra.js

@@ -0,0 +1,28 @@
+const serverUrl = "http://localhost:8081";
+
+const lst= document.querySelector("#time");
+
+export async function getAllItemTime() {
+    const response = await fetch(`${serverUrl}/time`);
+    if (!response.ok) {
+        throw response.statusText;
+    }
+    return response.json();
+}
+
+function createOption( time){
+    const option = document.createElement("option");
+    option.textContent = time.timer;
+//option.text = name;
+    //option.selected = isSelected;
+    lst.appendChild(option);
+}
+
+export default async function fillList(){
+    const data = await getAllItemTime();
+    lst.innerHTML ="";
+    // пустое значение
+    //lst.appendChild(createOption("выберите значение","", true));
+
+    data.forEach((time)=>{createOption(time)});
+}

Lab3/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.time.value = 1;
+    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.time.value = item.time;
+        // заполнение превью
+        // Если пользователь выбрал изображение, то оно загружается
+        // в тэг 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();
+}

Lab3/js/lines-rest-api.js

@@ -0,0 +1,102 @@
+// модуль для работы с REST API сервера
+
+// адрес сервера
+const serverUrl = "http://localhost:8081";
+
+// функция возвращает объект нужной структуры для отправки на сервер
+function createLineObject(item, price,time, image) {
+    return {
+        itemsId: item,
+        price: parseFloat(price).toFixed(2),
+       time: time,
+       sum: parseFloat(price * time).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,time, image) {
+    const itemObject = createLineObject(item, price, time, image);
+
+    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, time, image) {
+    const itemObject = createLineObject(item, price, time, image);
+
+    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();
+}

Lab3/js/lines-ui.js

@@ -0,0 +1,108 @@
+// модуль для работы с элементами управления
+
+// объект для удобного получения элементов
+// при обращении к атрибуту объекта вызывается
+// нужная функция для поиска элемента
+export const cntrls = {
+    button: document.getElementById("items-add"),
+    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"),
+    time: document.getElementById("time"),
+    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 = "", isSelected = false) {
+    const option = document.createElement("option");
+    option.value = value || "";
+    option.selected = isSelected;
+    option.text = name;
+    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 i = document.createElement("i");
+    i.classList.add("fa-solid", icon);
+
+    const a = document.createElement("a");
+    a.href = "#";
+    a.appendChild(i);
+    a.onclick = (event) => {
+        // чтобы в URL не добавлялась решетка
+        event.preventDefault();
+        event.stopPropagation();
+        callback();
+    };
+
+    const td = document.createElement("td");
+    td.appendChild(a);
+    return td;
+}
+
+// функция создает колонку таблицы с текстом value
+// <td>value</td>
+function createTableColumn(value) {
+    const td = document.createElement("td");
+    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, editCallback, editPageCallback, deleteCallback) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    //row.appendChild(createTableColumn("Сапборд"));
+    row.appendChild(createTableColumn(item.items.name));
+    row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
+    row.appendChild(createTableColumn(item.time));
+    row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
+    // редактировать в модальном окне
+    row.appendChild(createTableAnchor("fa-pencil", editCallback));
+    // удаление
+    row.appendChild(createTableAnchor("fa-trash", deleteCallback));
+    return row;
+}
+
+export function createTableRowUser(item, index) {
+    const rowNumber = document.createElement("th");
+    rowNumber.scope = "row";
+    rowNumber.textContent = index + 1;
+
+    const row = document.createElement("tr");
+    row.id = `line-${item.id}`;
+
+    row.appendChild(rowNumber);
+    row.appendChild(createTableColumn(item.items.name));
+    //row.appendChild(createTableColumn(item.time));
+    row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
+    return row;
+}

Lab3/js/lines.js

@@ -0,0 +1,210 @@
+// модуль с логикой
+
+import { hideUpdateModal, showUpdateModal } from "./lines-modal";
+import {
+    createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
+} from "./lines-rest-api";
+//import { getAllItemTime } from "./bebra";
+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));
+    });
+}
+
+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,
+                // функции передаются в качестве параметра
+                // это очень удобно, так как аргументы функций доступны только
+                // в данном месте кода и не передаются в сервисные модули
+                () => showUpdateModal(item),
+                () => location.assign(`page-edit.html?id=${item.id}`),
+                () => removeLine(item.id),
+            ),
+        );
+    });
+}
+
+async function addLine(item, price, time,  image) {
+    console.info("Try to add item");
+    // вызов метода REST API для добавления записи
+    const data = await createLine(item, price, time, image);
+    console.info("Added");
+    console.info(data);
+    // загрузка и заполнение table
+    drawLinesTable();
+}
+
+async function editLine(id, item, price, time, image) {
+    console.info("Try to update item");
+    // вызов метода REST API для обновления записи
+    const data = await updateLine(id, item, price, time, image);
+    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;
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через модальное окно
+// Если хотите делать через страницу, то удалите эту функцию
+export function linesForm() {
+    console.info("linesForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события oncahnge в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    //  обработчик события нажатия на кнопку для показа модального окна
+    cntrls.button.addEventListener("click", () => showUpdateModal(null));
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (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);
+        }
+
+        // получение id строки для редактирования
+        // это значение содержится в скрытом input
+        const currentId = cntrls.lineId.value;
+        // если значение id не задано,
+        // то необходимо выполнить добавление записи
+        // иначе обновление записи
+        if (!currentId) {
+            await addLine(
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.time.value,
+                imageBase64,
+            );
+        } else {
+            await editLine(
+                currentId,
+                cntrls.itemsType.value,
+                cntrls.price.value,
+                cntrls.time.value,
+                imageBase64,
+            );
+        }
+
+        // после выполнения добавления/обновления модальное окно скрывается
+        hideUpdateModal();
+    });
+}
+

Lab3/js/linesUsers.js

@@ -0,0 +1,134 @@
+// модуль с логикой
+import { hideUpdateModal, showUpdateModal } from "./lines-modal";
+import {
+    getAllItemTypes, getAllLines,
+} from "./lines-rest-api";
+import {
+    cntrls, createItemsOption, createTableRowUser,
+} 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));
+    });
+}
+
+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(
+            createTableRowUser(
+                item,
+                index,
+            ),
+        );
+    });
+}
+
+// функция для получения содержимого файла в виде 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;
+}
+
+// Функция для обработки создания и редактирования элементов таблицы через модальное окно
+// Если хотите делать через страницу, то удалите эту функцию
+// eslint-disable-next-line import/prefer-default-export
+export function linesForm() {
+    console.info("linesForm");
+
+    // загрузка и заполнение select со списком товаров
+    drawItemsSelect();
+    // загрузка и заполнение table
+    drawLinesTable();
+
+    // Вызов функции обновления превью изображения при возникновении
+    // события oncahnge в тэге input с id image
+    cntrls.image.addEventListener("change", () => updateImagePreview());
+
+    //  обработчик события нажатия на кнопку для показа модального окна
+    cntrls.button.addEventListener("click", () => showUpdateModal(null));
+
+    // обработчик события отправки формы
+    // возникает при нажатии на кнопку (button) с типом submit
+    // кнопка должна находится внутри тега form
+    cntrls.form.addEventListener("submit", async (event) => {
+        console.info("Form onSubmit");
+        // отключение стандартного поведения формы при отправке
+        // при отправке страница обновляется и JS перестает работать
+        event.preventDefault();
+        event.stopPropagation();
+        // если форма не прошла валидацию, то ничего делать не нужно
+        if (!cntrls.form.checkValidity()) {
+            return;
+        }
+        // получение id строки для редактирования
+        // это значение содержится в скрытом input
+
+        // если значение id не задано,
+        // то необходимо выполнить добавление записи
+        // иначе обновление записи
+        // после выполнения добавления/обновления модальное окно скрывается
+        hideUpdateModal();
+    });
+}

Lab3/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;

Lab3/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "int-prog",
+  "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": {
+    "@fortawesome/fontawesome-free": "6.4.2",
+    "bootstrap": "5.3.2"
+  },
+  "devDependencies": {
+    "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",
+    "vite": "4.4.9"
+  },
+  "main": "index.js",
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

Lab3/page-edit.html

@@ -0,0 +1,87 @@
+<html lang="ru">
+
+<head>
+    <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+</head>
+
+<body class="h-100 d-flex flex-column">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="container-fluid p-2">
+        <div class="text-center">
+            <img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
+                alt="placeholder">
+        </div>
+        <form id="items-form" class="needs-validation" novalidate>
+            <div class="mb-2">
+                <label for="item" class="form-label">Товары</label>
+                <select id="item" class="form-select" name="selected" required>
+                </select>
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="price">Цена</label>
+                <input id="price" name="price" class="form-control" type="number" value="0.00" min="1000.00" step="0.50"
+                    required>
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="time">Время</label>
+                <select id="time" class="form-select" name="selected" required></select>
+                <!--<input id="count" name="count" class="form-control" type="number" value="0" min="1" step="1" required>-->
+            </div>
+            <div class="mb-2">
+                <label class="form-label" for="image">Изображение</label>
+                <input id="image" type="file" name="image" class="form-control" accept="image/*">
+            </div>
+            <a href="/page4.html" class="btn btn-secondary">Назад</a>
+            <button type="submit" class="btn btn-primary">Сохранить</button>
+        </form>
+    </main>
+    <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+    <script type="module">
+        import validation from "./js/validation";
+        import { linesPageForm } from "./js/lines"
+
+        document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesPageForm();
+        });
+    </script>
+</body>
+
+</html>

Lab3/page4.html

@@ -0,0 +1,122 @@
+<html lang="ru">
+
+<head>
+    <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+</head>
+
+<body class="h-100 d-flex flex-column">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="container-fluid p-2">
+        <div class="btn-group" role="group">
+            <button id="items-add" class="btn btn-info" style="background-color: #302b2b; color:white ;">Добавить товар </button>  
+        </div>
+        <div>
+            <table id="items-table" class="table table-hover table-striped">
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" class="w-25">Товар</th>
+                    <th scope="col" class="w-25">Цена</th>
+                    <th scope="col" class="w-25">Время</th>
+                    <th scope="col" class="w-25">Сумма</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                    
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    </main>
+    <footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+    <div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
+        <div class="modal-dialog">
+            <form id="items-form" class="needs-validation" novalidate>
+                <div class="modal-content">
+                    <div class="modal-header" style="background-color: #302b2b;">
+                        <h1 class="modal-title fs-5" style="color:white" id="items-update-title"></h1>
+                        <button type="button" class="btn-close" style="background-color: white;" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="text-center">
+                            <img id="image-preview" src="https://via.placeholder.com/200" class="rounded rounded-circle"
+                                alt="placeholder">
+                        </div>
+                        <input id="items-line-id" type="number" hidden>
+                        <div class="mb-2">
+                            <label for="item" class="form-label">Товары</label>
+                            <select id="item" class="form-select" name="selected" required>
+                            </select>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="price">Цена за час</label>
+                            <input id="price" name="price" class="form-control" type="number" value="0.00" min="1000.00"
+                                step="0.50" required>
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="time">Время</label>
+                            <select id="time" class="form-select" name="selected" required> 
+                            </select>                       
+                        </div>
+                        <div class="mb-2">
+                            <label class="form-label" for="image">Изображение</label>
+                            <input id="image" type="file" name="image" class="form-control" accept="image/*">
+                        </div>
+                    </div>
+                    <div class="modal-footer" style="background-color:#302b2b ;">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
+                        <button type="submit" style=" background-color: #d3c725 " class="btn btn-primary">Сохранить</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script type="module">
+        import validation from "./js/validation";
+        import { linesForm } from "./js/lines";
+        import  fillList from "./js/bebra";
+        document.addEventListener('DOMContentLoaded', () => {
+            validation();
+            linesForm();
+            fillList();
+        });
+    </script>
+
+</body>
+
+</html>

Lab3/second.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="ru" class="h-100">
+    <head>
+        <meta charset="utf-8">
+        <title>Отзывы</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+    </head>
+<body class="d-flex flex-column h-100">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align--center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="flex-shrink-0" >
+        <div class="container mb-4" >
+            <div class="row">
+                <div class="col-md-20">
+                    <div class="p-2"> 
+                        <div class="container mx-auto my-5 p-2 rounded fw-bold" style="width: 90%; min-width: 320px ;height: fit-content; min-height: 80%; background-color: rgb(170, 165, 165);">
+                            <div class="row row-cols-1 row-cols-lg-2  row-cols-xxl-3 pb-3 text-center">
+                                <button class="btn col-xxl-4 col-lg-6 col-12 mx-auto my-2 my-sm-4 bg-image rounded-8" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image3.jpg" style=" background-image: url('img/image1.jpg'); height: 200px; width: 300px"></button>
+                                <button class="btn col-xxl-4 col-lg-6 col-12 mx-auto my-2 my-sm-4 bg-image rounded-8" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image4.jpg" style=" background-image: url('img/image2.jpg'); height: 200px; width: 300px"></button>
+                                <button class="btn col-xxl-4 col-lg-6 col-12 mx-auto my-2 my-sm-4 bg-image rounded-8" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image5.jpg" style=" background-image: url('img/image5.jpg'); height: 200px; width: 300px"></button>
+                                <button class="btn col-xxl-4 col-lg-6 col-12 mx-auto my-2 my-sm-4 bg-image rounded-8" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image3.jpg" style=" background-image: url('img/image3.jpg'); height: 200px; width: 300px"></button>
+                                <button class="btn col-xxl-4 col-lg-6 col-12 mx-auto my-2 my-sm-4 bg-image rounded-8" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image4.jpg" style=" background-image: url('img/image4.jpg'); height: 200px; width: 300px"></button>
+                                <button class="btn col-xxl-4 col-lg-6 col-12 mx-auto my-2 my-sm-4 bg-image rounded-8" data-bs-toggle="modal" data-bs-target="#exampleModal" data-img="img/image5.jpg" style=" background-image: url('img/image5.jpg'); height: 200px; width: 300px"></button>
+                                <button onclick="file.click()" type="button" class="btn btn-dark col-xxl-4 col-lg-6 col-12 mx-auto my-4 rounded-8 fw-bold fs-1" style="height: 200px; width: 300px">
+                                    +
+                                </button>
+                                <input id="file" type="file" hidden />
+                            </div>
+                        </div>
+                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
+                            <div class="modal-dialog modal-dialog-centered modal-fullscreen mx-auto " style="height: fit-content; width: 80%">
+                                <div class="modal-content" style="height: fit-content; width: 100%">
+                                    <div class="modal-body text-center">
+                                        <button type="button" class="btn-close position-absolute top-0 end-0" data-bs-dismiss="modal" aria-label="Закрыть"></button>
+                                        <img id="image" class="mx-auto" src="" alt="image" style="width: 100% ">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <script>
+                            var exampleModal = document.getElementById('exampleModal')
+                            exampleModal.addEventListener('show.bs.modal', function (event){
+                                var button = event.relatedTarget
+                                var recipient = button.getAttribute('data-img')
+                                document.getElementById('image').setAttribute("src", recipient.toString())
+                            });
+                        </script>
+                    </div>
+                </div>
+               
+            </div>
+           
+        </div>
+    </main>
+    <footer class="footer mt-auto d-flex justify-content-center align-items-center"  >
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+</body>
+</html>

Lab3/sixth.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="ru" class="h-100">
+    <head>
+        <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+    </head>
+<body class="d-flex flex-column h-100">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1" style = "color: white">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="page4.html">Таблица</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main class="flex-shrink-0">
+        <div class="container mt-2 mx-auto my-5 p-2 rounded-8 fw-bold" style="width: 90%;  min-width: 320px; height: 100%; background-color: white; ">
+        <div class="text-md-start text-center mt-4 mb-4">          
+            <div class="container overflow-y-auto"  style="height: 100%">
+                <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                    <h6 class=" ms-4 mt-4 ">Михаил</h5>
+                    <h6 class ="ms-4 me-4 mb-4" style="width: 80%;">Чуть не утонул, а инструктор Игорь стоял на берегу и смеялся над тем как я барахтаюсь. А так всё отлично. 4 звезды за поведение Игоря! </h6>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Удалить            
+                    </button>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Опубликовать           
+                    </button>
+                </div>
+                <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                    <h6 class=" ms-4 mt-4">Леша</h5>
+                    <h6 class=" ms-4 me-4 mb-4" style="width: 100%;">бУЛЬБУЛЬБУЛЬ</h6>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Удалить            
+                    </button>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Опубликовать           
+                    </button>
+                </div>
+                <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                    <h6 class=" ms-4 mt-3">Елена</h5>
+                    <h6 class=" ms-4 me-4 mb-4" style="width: 80%;">Катались с мужем на сапах. Нам попался чудесный инструктор Игорь. В меру наплавались, обязательно вернемся!</h6>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Удалить            
+                    </button>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Опубликовать           
+                    </button>
+                </div>
+                <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                    <h6 class=" ms-4 mt-4">Игорь</h5>
+                    <h6 class=" ms-4 me-4 mb-4" style="width: 80%;">Работаю инструктором. Недавно к нам заходила женщина Елена с мужем в сильном алкогольном опьянении... Не понравилось!</h6>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Удалить            
+                    </button>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Опубликовать           
+                    </button>
+                </div>
+                <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                    <h6 class=" ms-4 mt-4">Женя</h5>
+                    <h6 class=" ms-4 me-4 mb-4" style="width: 80%;">Когда я просил инструктора Игоря научить меня уверенно держаться на воде, я не имел ввиду дергать меня за ноги, пока я буду плавать!</h6>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Удалить            
+                    </button>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Опубликовать           
+                    </button>
+                </div>
+                <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                    <h6 class=" ms-4 mt-4">Женя</h5>
+                    <h6 class=" ms-4 me-4 mb-4" style="width: 80%;">Когда я просил инструктора Игоря научить меня уверенно держаться на воде, я не имел ввиду дергать меня за ноги, пока я буду плавать!</h6>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Удалить            
+                    </button>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Опубликовать           
+                    </button>
+                </div>
+                <div class=" rounded text-start p-2 rounded-7 my-2" style="height: fit-content; width: 90%; background-color: #d9d9d9">
+                    <h6 class=" ms-4 mt-4">Женя</h5>
+                    <h6 class=" ms-4 me-4 mb-4" style="width: 80%;">Когда я просил инструктора Игоря научить меня уверенно держаться на воде, я не имел ввиду дергать меня за ноги, пока я буду плавать!</h6>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Удалить            
+                    </button>
+                    <button type="button" data-bs-toggle="modal" data-bs-target="#LogInAdmin" style="background-color: #302b2b ; color : white">
+                        Опубликовать           
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </main>
+    <footer class="footer  d-flex justify-content-center align-items-center" style="height: 100px ;">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+
+    </footer>
+</body>
+</html>

Lab3/styles/style.css

@@ -0,0 +1,62 @@
+/* Стиль для шапки */
+    header {
+    color: #ffffff;
+    background-color: #302b2b; /* Цвет фона шапки */
+    }
+    
+    @media (min-width: 768px) {
+    header nav {
+    height: 64px;
+    color: #ffffff;
+    background-color: #302b2b; /* Цвет фона шапки */
+    }
+    }
+    
+    header .navbar-nav .nav-link {
+    color: #ffffff; /* Белый цвет текста навигационных ссылок */
+    }
+    
+    header .navbar-nav .nav-link:hover {
+    text-decoration: none;
+    background-color: yellow; /* Фон ссылок при наведении */
+    color: #302b2b; /* Цвет текста ссылок при наведении */
+    }
+    
+    /* Стиль для футера */
+    footer {
+    background-color: #302b2b;
+    height: 80px;
+    color: #8b8b8b;  
+    bottom: 0;
+    right:0;
+    width: 100%;
+    }
+    
+    /* Стиль для заголовков */
+    h1 {
+    font-size: 1.5em;
+    }
+    
+    h2 {
+    font-size: 1.25em;
+    }
+    
+    h3 {
+    font-size: 1.1em;
+    }
+
+    p {
+        font-size: 20px;      
+    }
+
+    pr{
+        font-size: 20px;
+    }
+    
+    #image-preview {
+        
+        object-fit: cover;
+        width: 200px;
+        height: 200px;
+
+    }

Lab3/test.txt

@@ -0,0 +1 @@
+ss

Lab3/third.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="ru" class="h-100">
+    <head>
+        <meta charset="utf-8">
+        <title>Моя страница</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+        rel="stylesheet" />
+        <link rel="stylesheet" href="styles/style.css">
+    </head>
+<body class="d-flex flex-column h-100">
+    <header class>
+        <nav class="navbar navbar-expand-md navbar mb-1">
+            <div class="container">
+                <a class="navbar-brand text-" href="index.html">
+                    <img src="img/logo_header.png" alt="Мой логотип" width="150" height="36" >
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style ="background-color: white">
+                    <span  style = "color: white" class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse align-items-center" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="second.html">Фотогалерея</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="third.html">Контакты</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fourth.html">Прейскурант</a>
+                        </li>
+                        <li class="nav-item">
+                            <a style = "font-size:20px" class="nav-link ms-2" href="fifth.html">Отзывы</a>
+                        </li> 
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    
+    <main class="flex-shrink-0">
+        <div class="container mb-4">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="p-2">
+                        <h1 class ="mt-4">WhatSUP в Ульяновске!</h1>
+                            <p class="mt-0 mb-2">
+                                <ul class="list-unstyled">
+                                    <li>
+                                        <p class ="mb-0"> - Набережная реки Свияги, 81 </p>
+                                    </li>
+                                    <li>
+                                        <p class ="mb-0"></i> - Посёлок Рыбацкий, 1 </p>
+                                    </li>
+                                    <li>
+                                        <p class ="mb-0"></i> - Степана Разина, 12 </p>
+                                    </li>
+                                    <li>
+                                        <p class="mb-0"></i> - Сельдинское ш., 1 </p>
+                                    </li>
+                                    <li>
+                                        <p class="mb-0"></i> - Александровская улица, 60А </p>
+                                    </li>
+                                    <li>
+                                        <p class></i> - Ульяновская улица, 1Б </p>
+                                    </li>
+                                </ul>
+                            </p>
+                            <h1 class ="mt-4">Мы в соцсетях:</h1>
+                            <ul class="list-unstyled">
+                                <li> 
+                                    <div class="container"> 
+                                    <img src="img/instagram.png" alt="Мой логотип" width="50" height="50"  > 
+                                    <pr class ="mb-0"> supsclub </p>
+                                    </div>        
+                                </li>
+                                <li>
+                                    <div class="container"> 
+                                    <img src="img/vk.png" alt="Мой логотип" width="50" height="30" >
+                                    <pr class ="mb-0"> supsclub </p>
+                                    </div>        
+                                </li>
+                            </ul>      
+                    </div>
+                </div>
+                
+                <div class="col-md-6">
+                    <div class="p-2">
+                        <h1 class ="mt-4">Телефоны</h1>
+                        <p class="mt-0 mb-2">
+                            <ul class="list-unstyled">
+                                <li>
+                                    <p class ="mb-0"> +79277895643, Алексей </p>
+                                </li>
+                                <li>
+                                    <p class ="mb-0"></i> +79277895643, Татьяна </p>
+                                </li>
+                                <li>
+                                    <p class ="mb-0"></i> +79277895643, Ольга </p>
+                                </li>
+                                <li>
+                                    <p class="mb-0"></i> +79277895643, Никита</p>
+                                </li>
+                                <li>
+                                    <p class="mb-0"></i> +79277895643, Андрей </p>
+                                </li>
+                                <li>
+                                    <p class></i> +79277895643, Роман </p>
+                                </li>
+                            </ul>
+                        </p>
+            </div>
+        </div>
+    </main>
+    <footer class="footer mt-auto d-flex justify-content-center align-items-center">
+        Все права защищены и принадлежат ИП Абубакаров Абубакар Абубакарович.
+    </footer>
+</body>
+</html>