Новый отчёт

Удаление старого отчёта
Отчёт
2025-05-28 15:38:06 +04:00 · 2025-05-28 15:37:32 +04:00 · 2025-05-24 13:32:30 +04:00 · 2025-05-24 11:06:40 +04:00 · 2025-05-22 22:00:03 +04:00 · 2025-05-17 11:42:19 +04:00
15794 changed files with 1953910 additions and 619 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 !.vscode/launch.json
 !.vscode/extensions.json
 !.vscode/*.code-snippets
+.history/*

 # Local History for Visual Studio Code
 .history/
@@ -12,3 +13,35 @@
 # Built Visual Studio Code Extensions
 *.vsix

+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/MyWebSite/.eslintrc.json
+++ b/MyWebSite/.eslintrc.json
@@ -0,0 +1,16 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": ["airbnb-base", "prettier"],
+    "plugins": ["prettier", "html"],
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "rules": {
+        "prettier/prettier": "error",
+        "no-console": "off"
+    }
+}
--- a/MyWebSite/.prettierrc
+++ b/MyWebSite/.prettierrc
@@ -0,0 +1,7 @@
+{
+    "tabWidth": 4,
+    "singleQuote": false,
+    "printWidth": 120,
+    "trailingComma": "es5",
+    "useTabs": false
+}
--- a/MyWebSite/.vscode/extensions.json
+++ b/MyWebSite/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+    "recommendations": [
+        "usernamehw.errorlens",
+        "AndersEAndersen.html-class-suggestions",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
+    ]
+}
--- a/MyWebSite/.vscode/launch.json
+++ b/MyWebSite/.vscode/launch.json
@@ -0,0 +1,18 @@
+{
+    "configurations": [
+        {
+            "type": "chrome",
+            "name": "Debug",
+            "request": "launch",
+            "url": "http://localhost:5173"
+        },
+        {
+            "type": "node",
+            "name": "Start",
+            "request": "launch",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": ["run-script", "start"],
+            "console": "integratedTerminal"
+        }
+    ]
+}
--- a/MyWebSite/.vscode/settings.json
+++ b/MyWebSite/.vscode/settings.json
@@ -0,0 +1,39 @@
+{
+    "files.autoSave": "onFocusChange",
+    "files.eol": "\n",
+    "editor.detectIndentation": false,
+    "editor.formatOnType": false,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true,
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.codeActionsOnSave": {
+        "source.organizeImports": "explicit",
+        "source.sortImports": "explicit"
+    },
+    "editor.snippetSuggestions": "bottom",
+    "debug.toolBarLocation": "commandCenter",
+    "debug.showVariableTypes": true,
+    "errorLens.gutterIconsEnabled": true,
+    "errorLens.messageEnabled": false,
+    "prettier.tabWidth": 4,
+    "prettier.singleQuote": false,
+    "prettier.printWidth": 120,
+    "prettier.trailingComma": "es5",
+    "prettier.useTabs": false,
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[jsonc]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[html]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}
--- a/MyWebSite/App.jsx
+++ b/MyWebSite/App.jsx
@@ -0,0 +1,24 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+import BasketPage from './pages/BasketPage';
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import CatalogPage from './pages/CatalogPage';
+import DiscountsPage from './pages/DiscountsPage';
+import HomePage from './pages/HomePage';
+import ContactUsPage from './pages/ContactUsPage';
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/catalog" element={<CatalogPage />} />
+        <Route path="/discounts" element={<DiscountsPage />} />
+        <Route path="/basket" element={<BasketPage />} />
+        <Route path="/contact" element={<ContactUsPage />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;
--- a/MyWebSite/basket.html
+++ b/MyWebSite/basket.html
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Корзина</title>
-    <link rel="stylesheet" href="style.css" />
-</head>
-<body><header class="header">
-    <img class="logo" src="logo.png" alt="logo" />
-    <h1>
-        Книжный интернет-магазин "Тома"
-    </h1>
-    <nav class="navbar">
-        <ul class="menu">
-            <li class="dropdown">
-                <span>Страницы ▾</span>
-                <ul class="features-menu">
-                    <li><a href="index.html">Главная</a></li>
-                    <li><a href="catalog.html">Каталог</a></li>
-                    <li><a href="discounts.html">Скидки</a></li>
-                    <li><a href="basket.html">Корзина</a></li>
-                    <li><a href="contactUs.html">Свяжитесь с нами</a></li>
-                </ul>
-            </li>
-        </ul>
-    </nav>
-</header>
-    <div class="container">
-        <h2>Корзина</h2>
-        <div class="book-basket">
-            <img src="images/dune.jpg" alt="Дюна" />
-            <p><strong>Фрэнк Герберт</strong><br>"Дюна"<br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.<br>Цена: 500 руб.</p>
-        </div>
-        <div class="book-basket">
-            <img src="images/the_hobbit.webp" alt="Хоббит" />
-            <p><strong>Дж.Р.Р. Толкин</strong><br>"Хоббит"<br>Путешествие Бильбо Бэггинса в мир приключений и драконов.<br>Цена: 750 руб.</p>
-        </div>
-        <hr/>
-        <p style="color: red; font-weight: bold;">Условия скидки не применены.</p>
-        <p>Общая стоимость покупки : 1250 руб.</p>
-        <hr/>
-    </div>
-    <footer class="footer">
-        <div class="contact-info">
-            <p>Контакты: info@toma.ru</p>
-            <p>Телефон: +7 (123) 456-78-90</p>
-            <p>Время работы: Пн-Пт 9:00-18:00</p>
-            <p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
-        </div>
-        <div class="social-media">
-            <a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
-            <a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
-            <a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
-        </div>
-    </footer>
-</body>
-</html>
--- a/MyWebSite/basket1.html
+++ b/MyWebSite/basket1.html
@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Корзина | Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="logo.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link position-relative show-cart-btn" href="#">
+                                <i class="bi bi-cart3"></i>
+                                <span
+                                    class="cart-count badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle"
+                                    style="display: none"
+                                ></span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <div class="row justify-content-center">
+                <div class="col-lg-10">
+                    <h2 class="text-center mb-4">Ваша корзина</h2>
+
+                    <!-- Список товаров -->
+                    <div id="cartItemsContainer">
+                        <!-- Товары будут загружены через JavaScript -->
+                    </div>
+
+                    <!-- Итоговая информация -->
+                    <div class="card mb-4 border-danger">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <h4 class="mb-0">Общая стоимость:</h4>
+                                <h4 class="mb-0" id="cartTotal">0 руб.</h4>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Кнопки действий -->
+                    <div class="d-flex justify-content-between mb-5">
+                        <a href="catalog.html" class="btn btn-outline-primary">
+                            <i class="bi bi-arrow-left me-2"></i>Продолжить покупки
+                        </a>
+                        <div>
+                            <button id="clearCartBtn" class="btn btn-outline-danger me-2">
+                                <i class="bi bi-trash me-2"></i>Очистить корзину
+                            </button>
+                            <button id="checkoutBtn" class="btn btn-success btn-lg px-4">
+                                <i class="bi bi-credit-card me-2"></i>Оформить заказ
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Контакты</h5>
+                        <ul class="list-unstyled">
+                            <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                            <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                            <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                            <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                        </ul>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+
+        <!-- Наш компонент -->
+        <script src="bookComponent.js"></script>
+
+        <script>
+            // Инициализация корзины на странице basket.html
+            document.addEventListener("DOMContentLoaded", async () => {
+                const model = new BookModel();
+                const view = new BookView();
+                const controller = new BookController(model, view);
+
+                // Загружаем и отображаем корзину при загрузке страницы
+                const cartItems = await model.fetchCartItems();
+                view.renderCart(cartItems);
+
+                // Обновляем счетчик в навигации
+                await controller.updateCartCount();
+
+                // Обработчики для кнопок на странице корзины
+                document.getElementById("clearCartBtn").addEventListener("click", async () => {
+                    if (confirm("Вы уверены, что хотите очистить корзину?")) {
+                        await model.clearCart();
+                        view.renderCart([]);
+                        await controller.updateCartCount();
+                    }
+                });
+
+                document.getElementById("checkoutBtn").addEventListener("click", () => {
+                    alert("Заказ оформлен! Спасибо за покупку!");
+                    model.clearCart();
+                    view.renderCart([]);
+                    controller.updateCartCount();
+                });
+
+                // Обработчик изменения количества товаров
+                document.addEventListener("change", async (event) => {
+                    if (event.target.classList.contains("cart-item-quantity")) {
+                        const id = parseInt(event.target.dataset.id);
+                        const quantity = parseInt(event.target.value);
+
+                        if (quantity > 0) {
+                            await model.updateCartItem(id, { quantity });
+                            const cartItems = await model.fetchCartItems();
+                            view.renderCart(cartItems);
+                            await controller.updateCartCount();
+                        } else {
+                            event.target.value = 1;
+                        }
+                    }
+                });
+
+                // Обработчик удаления товаров
+                document.addEventListener("click", async (event) => {
+                    if (
+                        event.target.classList.contains("remove-from-cart") ||
+                        event.target.closest(".remove-from-cart")
+                    ) {
+                        const id = parseInt(
+                            event.target.dataset.id || event.target.closest(".remove-from-cart").dataset.id
+                        );
+                        await model.removeFromCart(id);
+                        const cartItems = await model.fetchCartItems();
+                        view.renderCart(cartItems);
+                        await controller.updateCartCount();
+                    }
+                });
+            });
+        </script>
+    </body>
+</html>
--- a/MyWebSite/bookComponent.js
+++ b/MyWebSite/bookComponent.js
@@ -0,0 +1,794 @@
+import React from "react";
+
+// Модель
+class BookModel {
+    constructor() {
+        this.API_URL = "http://localhost:3001";
+    }
+
+    async fetchGenres() {
+        try {
+            const response = await fetch(`${this.API_URL}/genres`);
+            if (!response.ok) throw new Error("Ошибка загрузки жанров");
+            return await response.json();
+        } catch (error) {
+            console.error("fetchGenres error:", error);
+            return [];
+        }
+    }
+    async createGenre(genreData) {
+        try {
+            const response = await fetch(`${this.API_URL}/genres`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(genreData),
+            });
+            if (!response.ok) throw new Error("Ошибка создания жанра");
+            return await response.json();
+        } catch (error) {
+            console.error("createGenre error:", error);
+            throw error;
+        }
+    }
+    async fetchBooksByGenre(genreId) {
+        try {
+            const response = await fetch(`${this.API_URL}/books?genreId=${genreId}`);
+            if (!response.ok) throw new Error("Ошибка загрузки книг");
+            return await response.json();
+        } catch (error) {
+            console.error("fetchBooksByGenre error:", error);
+            return [];
+        }
+    }
+
+    async fetchBook(id) {
+        try {
+            const response = await fetch(`${this.API_URL}/books/${id}`);
+            if (!response.ok) throw new Error("Ошибка загрузки книги");
+            return await response.json();
+        } catch (error) {
+            console.error("fetchBook error:", error);
+            return null;
+        }
+    }
+
+    async createBook(bookData) {
+        try {
+            const response = await fetch(`${this.API_URL}/books`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(bookData),
+            });
+            if (!response.ok) throw new Error("Ошибка создания книги");
+            return await response.json();
+        } catch (error) {
+            console.error("createBook error:", error);
+            throw error;
+        }
+    }
+
+    async updateBook(id, bookData) {
+        try {
+            const response = await fetch(`${this.API_URL}/books/${id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(bookData),
+            });
+            if (!response.ok) throw new Error("Ошибка обновления книги");
+            return await response.json();
+        } catch (error) {
+            console.error("updateBook error:", error);
+            throw error;
+        }
+    }
+
+    async deleteBook(id) {
+        try {
+            const response = await fetch(`${this.API_URL}/books/${id}`, {
+                method: "DELETE",
+            });
+            if (!response.ok) throw new Error("Ошибка удаления книги");
+            return await response.json();
+        } catch (error) {
+            console.error("deleteBook error:", error);
+            throw error;
+        }
+    }
+
+    async fetchCartItems() {
+        try {
+            const response = await fetch(`${this.API_URL}/cart?_expand=book`);
+            if (!response.ok) throw new Error("Ошибка загрузки корзины");
+            return await response.json();
+        } catch (error) {
+            console.error("fetchCartItems error:", error);
+            return [];
+        }
+    }
+
+    async addToCart(bookId) {
+        try {
+            const existingItem = await this.getCartItemByBookId(bookId);
+
+            if (existingItem) {
+                return await this.updateCartItem(existingItem.id, { quantity: existingItem.quantity + 1 });
+            } else {
+                const response = await fetch(`${this.API_URL}/cart`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ bookId, quantity: 1 }),
+                });
+                if (!response.ok) throw new Error("Ошибка добавления в корзину");
+                return await response.json();
+            }
+        } catch (error) {
+            console.error("addToCart error:", error);
+            throw error;
+        }
+    }
+
+    async getCartItemByBookId(bookId) {
+        try {
+            const response = await fetch(`${this.API_URL}/cart?bookId=${bookId}`);
+            if (!response.ok) throw new Error("Ошибка проверки корзины");
+            const items = await response.json();
+            return items[0] || null;
+        } catch (error) {
+            console.error("getCartItemByBookId error:", error);
+            return null;
+        }
+    }
+
+    async updateCartItem(id, data) {
+        try {
+            const response = await fetch(`${this.API_URL}/cart/${id}`, {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(data),
+            });
+            if (!response.ok) throw new Error("Ошибка обновления корзины");
+            return await response.json();
+        } catch (error) {
+            console.error("updateCartItem error:", error);
+            throw error;
+        }
+    }
+
+    async removeFromCart(id) {
+        try {
+            const response = await fetch(`${this.API_URL}/cart/${id}`, {
+                method: "DELETE",
+            });
+            if (!response.ok) throw new Error("Ошибка удаления из корзины");
+            return await response.json();
+        } catch (error) {
+            console.error("removeFromCart error:", error);
+            throw error;
+        }
+    }
+
+    async clearCart() {
+        try {
+            const items = await this.fetchCartItems();
+            await Promise.all(items.map((item) => this.removeFromCart(item.id)));
+            return true;
+        } catch (error) {
+            console.error("clearCart error:", error);
+            throw error;
+        }
+    }
+}
+
+// Представление
+class BookView {
+    constructor() {
+        this.bookModal = document.getElementById("bookModal")
+            ? new bootstrap.Modal(document.getElementById("bookModal"))
+            : null;
+        this.bookModalTitle = document.getElementById("bookModalLabel");
+        this.bookForm = document.getElementById("bookForm");
+        this.genreSelect = document.getElementById("bookGenre");
+        this.genreModal = document.getElementById("genreModal")
+            ? new bootstrap.Modal(document.getElementById("genreModal"))
+            : null;
+        this.genreModalTitle = document.getElementById("genreModalLabel");
+        this.genreForm = document.getElementById("genreForm");
+        this.cartModal = document.getElementById("cartModal")
+            ? new bootstrap.Modal(document.getElementById("cartModal"))
+            : null;
+
+        // Ищем контейнеры корзины на разных страницах
+        this.cartItemsContainer = document.getElementById("cartItemsContainer") || document.getElementById("cartItems");
+        this.cartTotal = document.getElementById("cartTotal") || document.querySelector("#cartModal #cartTotal");
+        // Инициализация refs для модальных окон
+        this.modalRefs = {
+            bookModal: React.createRef(),
+            genreModal: React.createRef(),
+            cartModal: React.createRef(),
+        };
+    }
+
+    renderBooks(books, genreName) {
+        const container = document.getElementById("books-container");
+        if (!container) return;
+        container = document.getElementById(`${genreName.toLowerCase()}-books`);
+        if (!container) {
+            console.warn(`Контейнер для жанра ${genreName} не найден`);
+            return;
+        }
+
+        container.innerHTML = "";
+
+        if (!books || books.length === 0) {
+            container.innerHTML = '<div class="col-12 text-muted">Книги не найдены</div>';
+            return;
+        }
+
+        books.forEach((book) => {
+            const bookCard = this.createBookCard(book);
+            container.appendChild(bookCard);
+        });
+    }
+
+    renderGenresSections(genres) {
+        const main = document.querySelector("main");
+        if (!main) return;
+
+        // Удаляем старые секции жанров
+        document.querySelectorAll(".genre-section").forEach((section) => section.remove());
+
+        // Создаём новые секции для каждого жанра
+        genres.forEach((genre) => {
+            const section = document.createElement("section");
+            section.className = "mb-5 genre-section";
+            section.innerHTML = `
+                <div class="genre-title bg-light p-3 rounded text-center mb-4">
+                    <h3>${genre.name}</h3>
+                </div>
+                <div class="row g-4" id="${genre.name.toLowerCase()}-books"></div>
+            `;
+            main.insertBefore(section, main.querySelector("footer"));
+        });
+    }
+
+    createBookCard(book) {
+        const col = document.createElement("div");
+        col.className = "col-md-6 mb-4";
+
+        col.innerHTML = `
+            <div class="card h-100 border-0 shadow-sm" data-id="${book.id}">
+                <div class="row g-0">
+                    <div class="col-md-4">
+                        <img src="${book.image || "images/default-book.jpg"}" 
+                            class="img-fluid rounded-start h-100" 
+                            alt="${book.title || "Без названия"}" 
+                            style="object-fit: cover"
+                            onerror="this.src='images/default-book.jpg'">
+                    </div>
+                    <div class="col-md-8">
+                        <div class="card-body">
+                            <h5 class="card-title">${book.title || "Без названия"}</h5>
+                            <p class="card-text text-muted">${book.author || "Автор не указан"}</p>
+                            <p class="card-text">${book.description || "Описание отсутствует"}</p>
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="h5 mb-0">${book.price || 0} руб.</p>
+                                <div>
+                                    <button class="btn btn-primary me-2 mb-2 add-to-cart">В корзину</button>
+                                    <button class="btn btn-outline-secondary me-2 mb-2 edit-book">Редактировать</button>
+                                    <button class="btn btn-outline-danger delete-book">Удалить</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        return col;
+    }
+
+    renderGenreSelect(genres) {
+        if (!this.genreSelect) {
+            console.error("Элемент выбора жанра не найден");
+            return;
+        }
+
+        this.genreSelect.innerHTML = (genres || [])
+            .map((genre) => `<option value="${genre.id}">${genre.name}</option>`)
+            .join("");
+    }
+
+    renderCart(cartItems) {
+        if (!this.cartItemsContainer || !this.cartTotal) {
+            console.error("Элементы корзины не найдены");
+            return;
+        }
+
+        this.cartItemsContainer.innerHTML = "";
+
+        let total = 0;
+
+        if (!cartItems || cartItems.length === 0) {
+            this.cartItemsContainer.innerHTML = '<p class="text-muted">Корзина пуста</p>';
+            this.cartTotal.textContent = "0 руб.";
+            return;
+        }
+
+        cartItems.forEach((item) => {
+            if (!item.book) return;
+
+            const book = item.book;
+            const itemTotal = (book.price || 0) * (item.quantity || 1);
+            total += itemTotal;
+
+            const cartItem = document.createElement("div");
+            cartItem.className = "card mb-3";
+            cartItem.innerHTML = `
+                <div class="card-body">
+                    <div class="row align-items-center">
+                        <div class="col-md-2">
+                            <img src="${book.image || "images/default-book.jpg"}" 
+                                alt="${book.title || "Без названия"}" 
+                                class="img-fluid rounded"
+                                onerror="this.src='images/default-book.jpg'">
+                        </div>
+                        <div class="col-md-6">
+                            <h5>${book.title || "Без названия"}</h5>
+                            <p class="text-muted">${book.author || "Автор не указан"}</p>
+                            <p>Цена: ${book.price || 0} руб. × ${item.quantity || 1} = ${itemTotal} руб.</p>
+                        </div>
+                        <div class="col-md-2">
+                            <input type="number" min="1" value="${item.quantity || 1}" 
+                                class="form-control cart-item-quantity" 
+                                data-id="${item.id}">
+                        </div>
+                        <div class="col-md-2 text-center">
+                            <button class="btn btn-outline-danger remove-from-cart" data-id="${item.id}">
+                                <i class="bi bi-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            `;
+            this.cartItemsContainer.appendChild(cartItem);
+        });
+
+        this.cartTotal.textContent = `${total} руб.`;
+    }
+
+    showBookModal(title, bookData = null) {
+        if (!this.bookModal || !this.bookModalTitle || !this.bookForm) {
+            console.error("Элементы модального окна книги не найдены");
+            return;
+        }
+
+        this.bookModalTitle.textContent = title || "Книга";
+
+        if (bookData) {
+            document.getElementById("bookId").value = bookData.id || "";
+            document.getElementById("bookTitle").value = bookData.title || "";
+            document.getElementById("bookAuthor").value = bookData.author || "";
+            document.getElementById("bookPrice").value = bookData.price || "";
+            document.getElementById("bookDescription").value = bookData.description || "";
+            document.getElementById("bookImage").value = (bookData.image || "").replace("images/", "");
+            document.getElementById("bookGenre").value = bookData.genreId || "";
+        } else {
+            this.bookForm.reset();
+            document.getElementById("bookId").value = "";
+        }
+
+        this.bookModal.show();
+    }
+
+    showCartModal() {
+        if (this.cartModal) {
+            this.cartModal.show();
+        } else {
+            console.error("Модальное окно корзины не найдено");
+        }
+    }
+
+    bindAddBook(handler) {
+        document.querySelectorAll(".add-book-btn").forEach((btn) => {
+            btn.addEventListener("click", handler);
+        });
+    }
+
+    bindEditBook(handler) {
+        document.addEventListener("click", (event) => {
+            if (event.target.classList.contains("edit-book")) {
+                const card = event.target.closest(".card");
+                if (card) {
+                    const id = parseInt(card.dataset.id);
+                    if (!isNaN(id)) handler(id);
+                }
+            }
+        });
+    }
+
+    bindDeleteBook(handler) {
+        document.addEventListener("click", (event) => {
+            if (event.target.classList.contains("delete-book")) {
+                const card = event.target.closest(".card");
+                if (card) {
+                    const id = parseInt(card.dataset.id);
+                    if (!isNaN(id) && confirm("Вы уверены, что хотите удалить эту книгу?")) {
+                        handler(id);
+                    }
+                }
+            }
+        });
+    }
+
+    bindAddToCart(handler) {
+        document.addEventListener("click", (event) => {
+            if (event.target.classList.contains("add-to-cart")) {
+                const card = event.target.closest(".card");
+                if (card) {
+                    const id = parseInt(card.dataset.id);
+                    if (!isNaN(id)) handler(id);
+                }
+            }
+        });
+    }
+
+    bindShowCart(handler) {
+        document.querySelectorAll(".show-cart-btn").forEach((btn) => {
+            btn.addEventListener("click", (e) => {
+                e.preventDefault();
+                handler();
+            });
+        });
+    }
+
+    bindRemoveFromCart(handler) {
+        document.addEventListener("click", (event) => {
+            const removeBtn = event.target.closest(".remove-from-cart");
+            if (removeBtn) {
+                const id = parseInt(removeBtn.dataset.id);
+                if (!isNaN(id)) handler(id);
+            }
+        });
+    }
+
+    bindUpdateCartItem(handler) {
+        document.addEventListener("change", (event) => {
+            if (event.target.classList.contains("cart-item-quantity")) {
+                const id = parseInt(event.target.dataset.id);
+                const quantity = parseInt(event.target.value);
+                if (!isNaN(id) && !isNaN(quantity) && quantity > 0) {
+                    handler(id, quantity);
+                } else {
+                    event.target.value = 1;
+                }
+            }
+        });
+    }
+
+    bindClearCart(handler) {
+        const clearBtn = document.getElementById("clearCartBtn");
+        if (clearBtn) {
+            clearBtn.addEventListener("click", async (e) => {
+                e.preventDefault();
+                if (confirm("Вы уверены, что хотите очистить корзину?")) {
+                    await handler();
+                    // После очистки обновляем отображение
+                    const cartItems = await this.model.fetchCartItems();
+                    this.renderCart(cartItems);
+                    await this.controller.updateCartCount();
+                }
+            });
+        }
+    }
+
+    bindCheckout(handler) {
+        const checkoutBtn = document.getElementById("checkoutBtn");
+        if (checkoutBtn) {
+            checkoutBtn.addEventListener("click", handler);
+        }
+    }
+
+    bindSubmitBookForm(handler) {
+        if (this.bookForm) {
+            this.bookForm.addEventListener("submit", (event) => {
+                event.preventDefault();
+
+                const id = document.getElementById("bookId").value;
+                const bookData = {
+                    title: document.getElementById("bookTitle").value,
+                    author: document.getElementById("bookAuthor").value,
+                    price: parseInt(document.getElementById("bookPrice").value) || 0,
+                    description: document.getElementById("bookDescription").value,
+                    image: document.getElementById("bookImage").value.startsWith("http")
+                        ? document.getElementById("bookImage").value
+                        : `images/${document.getElementById("bookImage").value}`,
+                    genreId: parseInt(document.getElementById("bookGenre").value),
+                };
+
+                if (!bookData.title || !bookData.author) {
+                    alert("Пожалуйста, заполните обязательные поля");
+                    return;
+                }
+
+                handler(id, bookData);
+            });
+        }
+    }
+    // Метод для показа модального окна жанра
+    showGenreModal(title) {
+        if (!this.genreModal || !this.genreModalTitle || !this.genreForm) {
+            console.error("Элементы модального окна жанра не найдены");
+            return;
+        }
+
+        this.genreModalTitle.textContent = title || "Жанр";
+        this.genreForm.reset();
+        this.genreModal.show();
+    }
+
+    // Привязка обработчика добавления жанра
+    bindAddGenre(handler) {
+        document.querySelectorAll(".add-genre-btn").forEach((btn) => {
+            btn.addEventListener("click", handler);
+        });
+    }
+
+    // Привязка обработчика отправки формы жанра
+    bindSubmitGenreForm(handler) {
+        if (this.genreForm) {
+            this.genreForm.addEventListener("submit", (event) => {
+                event.preventDefault();
+
+                const genreData = {
+                    name: document.getElementById("genreName").value,
+                };
+
+                if (!genreData.name) {
+                    alert("Пожалуйста, укажите название жанра");
+                    return;
+                }
+
+                handler(genreData);
+            });
+        }
+    }
+}
+
+// Контроллер
+class BookController {
+    constructor(model, view) {
+        this.model = model;
+        this.view = view;
+        this.view.controller = this;
+        this.init();
+    }
+
+    async init() {
+        try {
+            // Инициализация обработчиков событий
+            this.view.bindAddGenre(() => this.handleAddGenre());
+            this.view.bindSubmitGenreForm((genreData) => this.handleSubmitGenreForm(genreData));
+            this.view.bindAddBook(() => this.handleAddBook());
+            this.view.bindEditBook((id) => this.handleEditBook(id));
+            this.view.bindDeleteBook((id) => this.handleDeleteBook(id));
+            this.view.bindAddToCart((id) => this.handleAddToCart(id));
+            this.view.bindShowCart(() => this.handleShowCart());
+            this.view.bindRemoveFromCart((id) => this.handleRemoveFromCart(id));
+            this.view.bindUpdateCartItem((id, quantity) => this.handleUpdateCartItem(id, quantity));
+            this.view.bindClearCart(() => this.handleClearCart());
+            this.view.bindCheckout(() => this.handleCheckout());
+            this.view.bindSubmitBookForm((id, bookData) => this.handleSubmitBookForm(id, bookData));
+
+            // Загрузка данных только если мы на странице каталога
+            if (document.getElementById("fantasy-books")) {
+                await this.loadData();
+            }
+
+            // Обновляем счетчик корзины всегда
+            await this.updateCartCount();
+
+            // Если мы на странице корзины, загружаем ее содержимое
+            if (document.getElementById("cartItemsContainer")) {
+                const cartItems = await this.model.fetchCartItems();
+                this.view.renderCart(cartItems);
+            }
+        } catch (error) {
+            console.error("Ошибка инициализации:", error);
+        }
+    }
+    // Новые методы обработчиков:
+    async handleAddGenre() {
+        this.view.showGenreModal("Добавить новый жанр");
+    }
+
+    async handleSubmitGenreForm(genreData) {
+        try {
+            const newGenre = await this.model.createGenre(genreData);
+            const genres = await this.model.fetchGenres();
+
+            // Обновляем интерфейс
+            this.view.renderGenreSelect(genres);
+            this.view.renderGenresSections(genres);
+
+            // Загружаем книги для ВСЕХ жанров после обновления секций
+            for (const genre of genres) {
+                const books = await this.model.fetchBooksByGenre(genre.id);
+                this.view.renderBooks(books, genre.name);
+            }
+
+            if (this.view.genreModal) {
+                this.view.genreModal.hide();
+            }
+            alert("Жанр успешно добавлен!");
+        } catch (error) {
+            console.error("Ошибка сохранения жанра:", error);
+            alert("Не удалось сохранить жанр");
+        }
+    }
+    async loadData() {
+        try {
+            const genres = await this.model.fetchGenres();
+            this.view.renderGenreSelect(genres);
+            this.view.renderGenresSections(genres);
+
+            for (const genre of genres) {
+                const books = await this.model.fetchBooksByGenre(genre.id);
+                this.view.renderBooks(books, genre.name);
+            }
+        } catch (error) {
+            console.error("Ошибка загрузки данных:", error);
+        }
+    }
+
+    async handleAddBook() {
+        this.view.showBookModal("Добавить новую книгу");
+    }
+
+    async handleEditBook(id) {
+        try {
+            const book = await this.model.fetchBook(id);
+            if (book) {
+                this.view.showBookModal("Редактировать книгу", book);
+            } else {
+                alert("Книга не найдена");
+            }
+        } catch (error) {
+            console.error("Ошибка редактирования книги:", error);
+            alert("Не удалось загрузить данные книги");
+        }
+    }
+
+    async handleDeleteBook(id) {
+        try {
+            await this.model.deleteBook(id);
+            location.reload();
+        } catch (error) {
+            console.error("Ошибка удаления книги:", error);
+            alert("Не удалось удалить книгу");
+        }
+    }
+
+    async handleAddToCart(bookId) {
+        try {
+            await this.model.addToCart(bookId);
+            await this.updateCartCount();
+            alert("Книга добавлена в корзину");
+        } catch (error) {
+            console.error("Ошибка добавления в корзину:", error);
+            alert("Не удалось добавить книгу в корзину");
+        }
+    }
+
+    async handleShowCart() {
+        try {
+            const cartItems = await this.model.fetchCartItems();
+            this.view.renderCart(cartItems);
+            this.view.showCartModal();
+        } catch (error) {
+            console.error("Ошибка загрузки корзины:", error);
+            alert("Не удалось загрузить корзину");
+        }
+    }
+
+    async handleRemoveFromCart(id) {
+        try {
+            await this.model.removeFromCart(id);
+            const cartItems = await this.model.fetchCartItems();
+            this.view.renderCart(cartItems);
+            await this.updateCartCount();
+        } catch (error) {
+            console.error("Ошибка удаления из корзины:", error);
+            alert("Не удалось удалить товар из корзины");
+        }
+    }
+
+    async handleUpdateCartItem(id, quantity) {
+        try {
+            await this.model.updateCartItem(id, { quantity });
+            const cartItems = await this.model.fetchCartItems();
+            this.view.renderCart(cartItems);
+            await this.updateCartCount();
+        } catch (error) {
+            console.error("Ошибка обновления корзины:", error);
+            alert("Не удалось обновить количество товара");
+        }
+    }
+
+    async handleClearCart() {
+        try {
+            await this.model.clearCart();
+            // Обновляем отображение корзины
+            const cartItems = await this.model.fetchCartItems();
+            this.view.renderCart(cartItems);
+            await this.updateCartCount();
+
+            // Показываем сообщение об успехе
+            alert("Корзина успешно очищена");
+        } catch (error) {
+            console.error("Ошибка очистки корзины:", error);
+            alert("Не удалось очистить корзину");
+        }
+    }
+
+    async handleCheckout() {
+        try {
+            alert("Заказ оформлен! Спасибо за покупку!");
+            await this.model.clearCart();
+            this.view.renderCart([]);
+            await this.updateCartCount();
+        } catch (error) {
+            console.error("Ошибка оформления заказа:", error);
+            alert("Не удалось оформить заказ");
+        }
+    }
+
+    async handleSubmitBookForm(id, bookData) {
+        try {
+            if (id) {
+                await this.model.updateBook(id, bookData);
+            } else {
+                await this.model.createBook(bookData);
+            }
+
+            location.reload();
+        } catch (error) {
+            console.error("Ошибка сохранения книги:", error);
+            alert("Не удалось сохранить книгу");
+        }
+    }
+
+    async updateCartCount() {
+        try {
+            const cartItems = await this.model.fetchCartItems();
+            const totalItems = cartItems.reduce((sum, item) => sum + (item.quantity || 0), 0);
+
+            document.querySelectorAll(".cart-count").forEach((el) => {
+                el.textContent = totalItems;
+                el.style.display = totalItems > 0 ? "inline-block" : "none";
+            });
+        } catch (error) {
+            console.error("Ошибка обновления счетчика корзины:", error);
+        }
+    }
+}
+
+// Инициализация приложения
+document.addEventListener("DOMContentLoaded", () => {
+    try {
+        const model = new BookModel();
+        const view = new BookView();
+        new BookController(model, view);
+    } catch (error) {
+        console.error("Ошибка инициализации приложения:", error);
+    }
+});
--- a/MyWebSite/catalog.html
+++ b/MyWebSite/catalog.html
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Добавлен мета-тег для адаптивности -->
-    <title>Каталог</title>
-    <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-    <header class="header">
-        <img class="logo" src="logo.png" alt="logo" />
-        <h1>
-            Книжный интернет-магазин "Тома"
-        </h1>
-        <nav class="navbar">
-            <ul class="menu">
-                <li class="dropdown">
-                    <span>Страницы ▾</span>
-                    <ul class="features-menu">
-                        <li><a href="index.html">Главная</a></li>
-                        <li><a href="catalog.html">Каталог</a></li>
-                        <li><a href="discounts.html">Скидки</a></li>
-                        <li><a href="basket.html">Корзина</a></li>
-                        <li><a href="contactUs.html">Свяжитесь с нами</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </nav>
-    </header>
-    <div class="container">
-        <h2>Каталог книг</h2>
-        
-        <h3 class = "genre-title">Фантастика</h3>
-        
-        <div class="bestsellers">
-            <div class="book">
-                <img src="images/dune.jpg" alt="Дюна" />
-                <p>Фрэнк Герберт<br><strong>"Дюна"</strong><br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.<br><strong>Цена : 500 р.</strong></p>
-            </div>
-            <div class="book">
-                <img src="images/foundation.jpg" alt="Основание" />
-                <p>Айзек Азимов<br><strong>"Основание"</strong><br>Сага о падении и возрождении галактической империи, основанная на научных принципах.<br><strong>Цена : 600 р.</strong></p>
-            </div>
-        </div>
-        
-        <h3 class = "genre-title">Детектив</h3>
-        
-        <div class="bestsellers">
-            <div class="book">
-                <img src="images/murder_on_the_orient_express.jpg" alt="Убийство в Восточном экспрессе" />
-                <p>Агата Кристи<br><strong>"Убийство в Восточном экспрессе"</strong><br>Загадочное убийство на поезде, где каждый пассажир может быть подозреваемым.<br><strong>Цена : 750 р.</strong></p>
-            </div>
-            <div class="book">
-                <img src="images/the_girl_with_the_dragon_tattoo.jpg" alt="Девушка с татуировкой дракона" />
-                <p>Стиг Ларссон<br><strong>"Девушка с татуировкой дракона"</strong><br>История о расследовании исчезновения девушки, связанная с мрачными тайнами семьи.<br><strong>Цена : 700 р.</strong></p>
-            </div>
-        </div>
-        
-        <h3 class = "genre-title">Роман</h3>
-        
-        <div class="bestsellers">
-            <div class="book">
-                <img src="images/pride_and_prejudice.jpg" alt="Гордость и предубеждение" />
-                <p>Джейн Остин<br><strong>"Гордость и предубеждение"</strong><br>Классический роман о любви и социальном статусе в Англии XIX века.<br><strong>Цена : 650 р.</strong></p>
-            </div>
-            <div class="book">
-                <img src="images/the_great_gatsby.jpg" alt="Великий Гэтсби" />
-                <p>Фрэнсис Скотт Фицджеральд<br><strong>"Великий Гэтсби"</strong><br>История о любви, богатстве и утраченных мечтах в эпоху джаза.<br><strong>Цена : 500 р.</strong></p>
-            </div>
-        </div>
-        
-        <h3 class = "genre-title">Фэнтези</h3>
-        
-        <div class="bestsellers">
-            <div class="book">
-                <img src="images/harry_potter.webp" alt="Гарри Поттер" />
-                <p>Дж.К. Роулинг<br><strong>"Гарри Поттер и философский камень"</strong><br>Приключения молодого волшебника в школе магии Хогвартс.<br><strong>Цена : 800 р.</strong></p>
-            </div>
-            <div class="book">
-                <img src="images/the_hobbit.webp" alt="Хоббит" />
-                <p>Дж.Р.Р. Толкин<br><strong>"Хоббит"</strong><br>Путешествие Бильбо Бэггинса в мир приключений и драконов.<br><strong>Цена : 750 р.</strong></p>
-            </div>
-        </div>
-        <hr/>
-    </div>
-    <footer class="footer">
-        <div class="contact-info">
-            <p>Контакты: info@toma.ru</p>
-            <p>Телефон: +7 (123) 456-78-90</p>
-            <p>Время работы: Пн-Пт 9:00-18:00</p>
-            <p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
-        </div>
-        <div class="social-media">
-            <a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
-            <a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
-            <a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
-        </div>
-    </footer>
-</body>
-</html>
--- a/MyWebSite/components/BookComponent.jsx
+++ b/MyWebSite/components/BookComponent.jsx
@@ -0,0 +1,65 @@
+import { Button, Card } from 'react-bootstrap';
+import { BiCart, BiEdit, BiTrash } from 'react-icons/bi';
+
+const BookComponent = ({ book, onEdit, onDelete, onAddToCart }) => {
+    const displayPrice = book.price === 0 ? "Бесплатно" : `${book.price || 0} руб.`;
+  return (
+    <div className="col-md-6 mb-4">
+      <Card className="h-100 border-0 shadow-sm">
+        <div className="row g-0 h-100">
+          <div className="col-md-4">
+            <Card.Img
+              variant="top"
+              src={book.image || "images/default-book.jpg"}
+              alt={book.title || "Без названия"}
+              className="h-100 rounded-start"
+              style={{ objectFit: 'cover' }}
+              onError={(e) => { e.target.src = 'images/default-book.jpg' }}
+            />
+          </div>
+          <div className="col-md-8">
+            <Card.Body className="d-flex flex-column h-100">
+              <Card.Title>{book.title || "Без названия"}</Card.Title>
+              <Card.Subtitle className="mb-2 text-muted">
+                {book.author || "Автор не указан"}
+              </Card.Subtitle>
+              <Card.Text className="flex-grow-1">
+                {book.description || "Описание отсутствует"}
+              </Card.Text>
+              <div className="d-flex justify-content-between align-items-center">
+                <Card.Text className="h5 me-2 mb-2">
+                    {displayPrice}
+                </Card.Text>
+                <div>
+                  <Button 
+                    variant="primary" 
+                    className="me-2 mb-2" 
+                    onClick={() => onAddToCart(book.id)}
+                  >
+                    <BiCart /> В корзину
+                  </Button>
+                  <Button 
+                    variant="outline-secondary" 
+                    className="me-2 mb-2" 
+                    onClick={() => onEdit(book.id)}
+                  >
+                    <BiEdit /> Редактировать
+                  </Button>
+                  <Button 
+                    variant="outline-danger" 
+                    className="mb-2" 
+                    onClick={() => onDelete(book.id)}
+                  >
+                    <BiTrash /> Удалить
+                  </Button>
+                </div>
+              </div>
+            </Card.Body>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default BookComponent;
--- a/MyWebSite/components/BookModal.jsx
+++ b/MyWebSite/components/BookModal.jsx
@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+import api from '../services/api';
+
+const BookModal = ({ show, onHide, bookId, genres, onSave }) => {
+  const [formData, setFormData] = useState({
+    title: '',
+    author: '',
+    genreId: '',
+    price: '',
+    description: '',
+    image: ''
+  });
+
+  useEffect(() => {
+    if (bookId) {
+      api.fetchBook(bookId).then(response => {
+        const book = response.data;
+        setFormData({
+          title: book.title,
+          author: book.author,
+          genreId: book.genreId,
+          price: book.price,
+          description: book.description,
+          image: book.image?.replace('images/', '') || ''
+        });
+      });
+    } else {
+      setFormData({
+        title: '',
+        author: '',
+        genreId: genres[0]?.id || '',
+        price: '',
+        description: '',
+        image: ''
+      });
+    }
+  }, [bookId, genres]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const bookData = {
+      ...formData,
+      price: Number(formData.price),
+      genreId: Number(formData.genreId),
+      image: formData.image.startsWith('http') 
+        ? formData.image 
+        : `images/${formData.image}`
+    };
+    onSave(bookData);
+  };
+
+  return (
+    <Modal show={show} onHide={onHide} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>{bookId ? 'Редактировать книгу' : 'Добавить книгу'}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={handleSubmit}>
+          <Form.Group className="mb-3">
+            <Form.Label>Название книги</Form.Label>
+            <Form.Control
+              type="text"
+              value={formData.title}
+              onChange={(e) => setFormData({...formData, title: e.target.value})}
+              required
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3">
+            <Form.Label>Автор</Form.Label>
+            <Form.Control
+              type="text"
+              value={formData.author}
+              onChange={(e) => setFormData({...formData, author: e.target.value})}
+              required
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3">
+            <Form.Label>Жанр</Form.Label>
+            <Form.Select
+              value={formData.genreId}
+              onChange={(e) => setFormData({...formData, genreId: e.target.value})}
+              required
+            >
+              {genres.map(genre => (
+                <option key={genre.id} value={genre.id}>{genre.name}</option>
+              ))}
+            </Form.Select>
+          </Form.Group>
+
+          <Form.Group className="mb-3">
+            <Form.Label>Цена</Form.Label>
+            <Form.Control
+              type="number"
+              value={formData.price}
+              onChange={(e) => setFormData({...formData, price: e.target.value})}
+              required
+              min="0"
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3">
+            <Form.Label>Описание</Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={3}
+              value={formData.description}
+              onChange={(e) => setFormData({...formData, description: e.target.value})}
+              required
+            />
+          </Form.Group>
+
+          <Form.Group className="mb-3">
+            <Form.Label>Изображение</Form.Label>
+            <Form.Control
+              type="text"
+              value={formData.image}
+              onChange={(e) => setFormData({...formData, image: e.target.value})}
+              placeholder="Имя файла (например, book.jpg) или полный URL"
+              required
+            />
+            <Form.Text className="text-muted">
+              Можно указать имя файла из папки images (например, "book.jpg") или полный URL изображения
+            </Form.Text>
+          </Form.Group>
+
+          <Modal.Footer>
+            <Button variant="secondary" onClick={onHide}>Отмена</Button>
+            <Button variant="primary" type="submit">Сохранить</Button>
+          </Modal.Footer>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default BookModal;
--- a/MyWebSite/components/CartModal.jsx
+++ b/MyWebSite/components/CartModal.jsx
@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Card, Form } from 'react-bootstrap';
+import { BiTrash } from 'react-icons/bi';
+import api from '../services/api';
+
+const CartModal = ({ show, onHide, onCheckout }) => {
+  const [cartItems, setCartItems] = useState([]);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    if (show) {
+      loadCart();
+    }
+  }, [show]);
+
+  const loadCart = async () => {
+    try {
+      const response = await api.fetchCartItems();
+      const items = response.data;
+      setCartItems(items);
+      
+      const newTotal = items.reduce((sum, item) => {
+        return sum + (item.book?.price || 0) * (item.quantity || 1);
+      }, 0);
+      setTotal(newTotal);
+    } catch (error) {
+      console.error('Ошибка загрузки корзины:', error);
+    }
+  };
+
+  const handleQuantityChange = async (id, quantity) => {
+    if (quantity < 1) return;
+    
+    try {
+      await api.updateCartItem(id, { quantity });
+      loadCart();
+    } catch (error) {
+      console.error('Ошибка обновления количества:', error);
+    }
+  };
+
+  const handleRemoveItem = async (id) => {
+    try {
+      await api.removeFromCart(id);
+      loadCart();
+    } catch (error) {
+      console.error('Ошибка удаления из корзины:', error);
+    }
+  };
+
+  return (
+    <Modal show={show} onHide={onHide} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Ваша корзина</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        {cartItems.length === 0 ? (
+          <p className="text-muted">Корзина пуста</p>
+        ) : (
+          <>
+            {cartItems.map(item => (
+              <Card key={item.id} className="mb-3">
+                <Card.Body>
+                  <div className="row align-items-center">
+                    <div className="col-md-2">
+                      <img
+                        src={item.book?.image || "images/default-book.jpg"}
+                        alt={item.book?.title || "Без названия"}
+                        className="img-fluid rounded"
+                        onError={(e) => { e.target.src = 'images/default-book.jpg' }}
+                      />
+                    </div>
+                    <div className="col-md-6">
+                      <h5>{item.book?.title || "Без названия"}</h5>
+                      <p className="text-muted">{item.book?.author || "Автор не указан"}</p>
+                      <p>
+                        Цена: {item.book?.price || 0} руб. × {item.quantity || 1} = 
+                        {(item.book?.price || 0) * (item.quantity || 1)} руб.
+                      </p>
+                    </div>
+                    <div className="col-md-2">
+                      <Form.Control
+                        type="number"
+                        min="1"
+                        value={item.quantity || 1}
+                        onChange={(e) => handleQuantityChange(item.id, parseInt(e.target.value))}
+                        className="cart-item-quantity"
+                      />
+                    </div>
+                    <div className="col-md-2 text-center">
+                      <Button
+                        variant="outline-danger"
+                        onClick={() => handleRemoveItem(item.id)}
+                      >
+                        <BiTrash />
+                      </Button>
+                    </div>
+                  </div>
+                </Card.Body>
+              </Card>
+            ))}
+            
+            <div className="d-flex justify-content-between align-items-center mt-3">
+              <h4>Итого:</h4>
+              <h4>{total} руб.</h4>
+            </div>
+          </>
+        )}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onHide}>Продолжить покупки</Button>
+        <Button 
+          variant="success" 
+          onClick={onCheckout}
+          disabled={cartItems.length === 0}
+        >
+          Оформить заказ
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default CartModal;
--- a/MyWebSite/components/Footer.jsx
+++ b/MyWebSite/components/Footer.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-light py-4 mt-5">
+      <div className="container">
+        <div className="row">
+          <div className="col-md-6 mb-4 mb-md-0">
+            <h5 className="mb-3">Контакты</h5>
+            <ul className="list-unstyled">
+              <li><i className="bi bi-envelope me-2"></i> info@toma.ru</li>
+              <li><i className="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+              <li><i className="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+              <li><i className="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+            </ul>
+          </div>
+          <div className="col-md-6 text-md-end">
+            <h5 className="mb-3">Социальные сети</h5>
+            <div className="social-media">
+              <a href="#" className="text-decoration-none me-3"><i className="bi bi-facebook fs-3"></i></a>
+              <a href="#" className="text-decoration-none me-3"><i className="bi bi-vk fs-3"></i></a>
+              <a href="#" className="text-decoration-none"><i className="bi bi-telegram fs-3"></i></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
--- a/MyWebSite/components/GenreModal.jsx
+++ b/MyWebSite/components/GenreModal.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Modal, Button, Form } from 'react-bootstrap';
+
+const GenreModal = ({ show, onHide, onSave }) => {
+  const [genreName, setGenreName] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!genreName.trim()) return;
+    onSave({ name: genreName });
+    setGenreName('');
+    onHide();
+  };
+
+  return (
+    <Modal show={show} onHide={onHide}>
+      <Modal.Header closeButton>
+        <Modal.Title>Добавить жанр</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form onSubmit={handleSubmit}>
+          <Form.Group className="mb-3">
+            <Form.Label>Название жанра</Form.Label>
+            <Form.Control
+              type="text"
+              value={genreName}
+              onChange={(e) => setGenreName(e.target.value)}
+              required
+            />
+          </Form.Group>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={onHide}>Отмена</Button>
+            <Button variant="primary" type="submit">Сохранить</Button>
+          </Modal.Footer>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+export default GenreModal;
--- a/MyWebSite/components/Navbar.jsx
+++ b/MyWebSite/components/Navbar.jsx
@@ -0,0 +1,70 @@
+import { Link } from 'react-router-dom';
+
+const Navbar = ({ cartCount }) => {
+    return (
+        <nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div className="container">
+                <Link className="navbar-brand d-flex align-items-center" to="/">
+                    <img src="/logo.png" alt="Логотип" className="logo me-2" />
+                    <span className="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span className="d-lg-none">"Тома"</span>
+                </Link>
+                
+                {/* Кнопка для мобильного меню */}
+                <button 
+                    className="navbar-toggler" 
+                    type="button" 
+                    data-bs-toggle="collapse" 
+                    data-bs-target="#navbarContent"
+                    aria-controls="navbarContent" 
+                    aria-expanded="false" 
+                    aria-label="Toggle navigation"
+                >
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+
+                {/* Основное меню */}
+                <div className="collapse navbar-collapse" id="navbarContent">
+                    <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/">Главная страница</Link>
+                        </li>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/catalog">Каталог</Link>
+                        </li>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/discounts">Скидки</Link>
+                        </li>
+                        <li className="nav-item">
+                            <Link className="nav-link" to="/contact">Связаться с нами</Link>
+                        </li>
+                        <li className="nav-item d-lg-none">
+                            <Link className="nav-link position-relative" to="/basket">
+                                <i className="bi bi-cart3 me-1"></i> Корзина
+                                {cartCount > 0 && (
+                                    <span className="cart-count badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle">
+                                        {cartCount}
+                                    </span>
+                                )}
+                            </Link>
+                        </li>
+                    </ul>
+
+                    {/* Иконка корзины для десктопной версии */}
+                    <div className="d-none d-lg-block ms-3">
+                        <Link className="nav-link position-relative" to="/basket">
+                            <i className="bi bi-cart3 fs-5"></i>
+                            {cartCount > 0 && (
+                                <span className="cart-count badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle">
+                                    {cartCount}
+                                </span>
+                            )}
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Navbar;
--- a/MyWebSite/contactUs.html
+++ b/MyWebSite/contactUs.html
@@ -1,68 +1,156 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ru">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Добавлен мета-тег для адаптивности -->
-    <title>Свяжитесь с нами</title>
-    <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-    <header class="header">
-        <img class="logo" src="logo.png" alt="logo" />
-        <h1>
-            Книжный интернет-магазин "Тома"
-        </h1>
-        <nav class="navbar">
-            <ul class="menu">
-                <li class="dropdown">
-                    <span>Страницы ▾</span>
-                    <ul class="features-menu">
-                        <li><a href="index.html">Главная</a></li>
-                        <li><a href="catalog.html">Каталог</a></li>
-                        <li><a href="discounts.html">Скидки</a></li>
-                        <li><a href="basket.html">Корзина</a></li>
-                        <li><a href="contactUs.html">Свяжитесь с нами</a></li>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Свяжитесь с нами | Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <!-- Навигация -->
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="logo.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
                    </ul>
-                </li>
-            </ul>
+                </div>
+            </div>
        </nav>
-    </header>
-    <div class="container">
-        <h2>Свяжитесь с нами</h2>
-        <form>
-            <div class="form-group">
-                <label for="name">Имя:</label>
-                <input type="text" id="name" name="name" required>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <section class="my-5">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8">
+                        <h2 class="text-center mb-4">Свяжитесь с нами</h2>
+
+                        <form class="needs-validation" novalidate>
+                            <div class="mb-3">
+                                <label for="name" class="form-label">Имя</label>
+                                <input type="text" class="form-control" id="name" required />
+                                <div class="invalid-feedback">Пожалуйста, введите ваше имя.</div>
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="email" class="form-label">Электронная почта</label>
+                                <input type="email" class="form-control" id="email" required />
+                                <div class="invalid-feedback">Пожалуйста, введите корректный email.</div>
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="purchase-code" class="form-label">Код покупки (если есть)</label>
+                                <input type="text" class="form-control" id="purchase-code" />
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="problem-description" class="form-label">Описание проблемы</label>
+                                <textarea class="form-control" id="problem-description" rows="6" required></textarea>
+                                <div class="invalid-feedback">Пожалуйста, опишите вашу проблему.</div>
+                            </div>
+
+                            <div class="text-center">
+                                <button type="submit" class="btn btn-primary btn-lg px-4">Отправить</button>
+                            </div>
+                        </form>
+
+                        <!-- Контактная информация -->
+                        <div class="card mt-5">
+                            <div class="card-body">
+                                <h5 class="card-title">Контактная информация</h5>
+                                <ul class="list-unstyled">
+                                    <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                                    <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                                    <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                                    <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Книжный магазин "Тома"</h5>
+                        <p>Ваш надежный партнер в мире литературы с 2025 года.</p>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
            </div>
-            <div class="form-group">
-                <label for="email">Электронная почта:</label>
-                <input type="email" id="email" name="email" required>
-            </div>
-            <div class="form-group">
-                <label for="purchase-code">Код покупки:</label>
-                <input type="text" id="purchase-code" name="purchase-code" required>
-            </div>
-            <div class="form-group">
-                <label for="problem-description">Описание проблемы:</label>
-                <textarea id="problem-description" name="problem-description" rows="8" required></textarea>
-            </div>
-            <div>
-                <button type="submit" class="large-button">Отправить</button>
-            </div>
-        </form>
-    </div>
-    <footer class="footer">
-        <div class="contact-info">
-            <p>Контакты: info@toma.ru</p>
-            <p>Телефон: +7 (123) 456-78-90</p>
-            <p>Время работы: Пн-Пт 9:00-18:00</p>
-            <p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
-        </div>
-        <div class="social-media">
-            <a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
-            <a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
-            <a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
-        </div>
-    </footer>
-</body>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+
+        <!-- Валидация формы -->
+        <script>
+            (function () {
+                "use strict";
+
+                const forms = document.querySelectorAll(".needs-validation");
+
+                Array.from(forms).forEach((form) => {
+                    form.addEventListener(
+                        "submit",
+                        (event) => {
+                            if (!form.checkValidity()) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }
+                            form.classList.add("was-validated");
+                        },
+                        false
+                    );
+                });
+            })();
+        </script>
+    </body>
 </html>
--- a/MyWebSite/db.json
+++ b/MyWebSite/db.json
@@ -0,0 +1,108 @@
+{
+  "genres": [
+    {
+      "id": 1,
+      "name": "ФАНТАСТИКА"
+    },
+    {
+      "id": 2,
+      "name": "ДЕТЕКТИВ"
+    },
+    {
+      "id": 3,
+      "name": "РОМАН"
+    },
+    {
+      "id": 4,
+      "name": "ФЭНТЕЗИ"
+    },
+    {
+      "name": "УЖАС",
+      "id": 5
+    },
+    {
+      "name": "ужас3",
+      "id": 7
+    },
+    {
+      "name": "класс2",
+      "id": 9
+    },
+    {
+      "name": "ввв",
+      "id": 10
+    },
+    {
+      "name": "уу",
+      "id": 11
+    }
+  ],
+  "books": [
+    {
+      "title": "Дюна",
+      "author": "Фрэнк Герберт",
+      "genreId": 1,
+      "price": 0,
+      "description": "Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.",
+      "image": "images/dune.jpg",
+      "id": 1
+    },
+    {
+      "title": "Основание",
+      "author": "Айзек Азимов",
+      "price": 700,
+      "description": "Сага о падении и возрождении галактической империи, основанная на научных принципах.",
+      "image": "images/foundation.jpg",
+      "genreId": 1,
+      "id": 2
+    },
+    {
+      "id": 3,
+      "title": "Убийство в Восточном экспрессе",
+      "author": "Агата Кристи",
+      "price": 750,
+      "description": "Загадочное убийство на поезде, где каждый пассажир может быть подозреваемым.",
+      "image": "images/murder_on_the_orient_express.jpg",
+      "genreId": 2
+    },
+    {
+      "id": 5,
+      "title": "Гарри Поттер и философский камень",
+      "author": "Дж.К. Роулинг",
+      "price": 800,
+      "description": "Приключения молодого волшебника в школе магии Хогвартс.",
+      "image": "images/harry_potter.webp",
+      "genreId": 4
+    },
+    {
+      "title": "Песнь льда и огня",
+      "author": "Джордж Р. Р. Мартин",
+      "price": 5,
+      "description": "роарапс",
+      "image": "images/asongoficeandfire.jpg",
+      "genreId": 4,
+      "id": 6
+    },
+    {
+      "title": "Песнь льда и огня",
+      "author": "ыыы",
+      "price": 3455,
+      "description": "кцакровчвепп",
+      "image": "images/foundation.jpg",
+      "genreId": 2,
+      "id": 7
+    }
+  ],
+  "cart": [
+    {
+      "bookId": 2,
+      "quantity": 2,
+      "id": 1
+    },
+    {
+      "bookId": 1,
+      "quantity": 4,
+      "id": 2
+    }
+  ]
+}
--- a/MyWebSite/discounts.html
+++ b/MyWebSite/discounts.html
@@ -1,67 +1,155 @@
-<!DOCTYPE html>
+<!-- Сделать кнопку в фантастике "добавить книгу", вводим данные в форму, и карточка книги добавляется в Фантастику-->
+
+<!doctype html>
 <html lang="ru">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Добавлен мета-тег для адаптивности -->
-    <title>Скидки</title>
-    <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-    <header class="header">
-        <img class="logo" src="logo.png" alt="logo" />
-        <h1>
-            Книжный интернет-магазин "Тома"
-        </h1>
-        <nav class="navbar">
-            <ul class="menu">
-                <li class="dropdown">
-                    <span>Страницы ▾</span>
-                    <ul class="features-menu">
-                        <li><a href="index.html">Главная</a></li>
-                        <li><a href="catalog.html">Каталог</a></li>
-                        <li><a href="discounts.html">Скидки</a></li>
-                        <li><a href="basket.html">Корзина</a></li>
-                        <li><a href="contactUs.html">Свяжитесь с нами</a></li>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Скидки | Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="logo.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
                    </ul>
-                </li>
-            </ul>
+                </div>
+            </div>
        </nav>
-    </header>
-    <div class="container">
-        <h2>Скидки</h2>
-        <hr/>
-        <div class="bestsellers">
-            <div class="book">
-                <img src="images/the_girl_with_the_dragon_tattoo.jpg" alt="Девушка с татуировкой дракона" />
-                <p>Стиг Ларссон<br><strong>"Девушка с татуировкой дракона"</strong><br>История о расследовании исчезновения девушки, связанная с мрачными тайнами семьи.<br>Цена : 700 р.<br><strong>Со скидкой : 525 р.</strong></p>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <section class="my-5">
+                <h2 class="text-center mb-4">Скидки</h2>
+                <hr class="mb-4" />
+
+                <div class="row g-4 justify-content-center">
+                    <!-- Книга 1 -->
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img
+                                src="images/the_girl_with_the_dragon_tattoo.jpg"
+                                class="card-img-top p-3"
+                                alt="Девушка с татуировкой дракона"
+                            />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Девушка с татуировкой дракона</h5>
+                                <p class="card-text">Стиг Ларссон</p>
+                                <p class="text-muted"><s>700 р.</s></p>
+                                <p class="text-danger fs-4 fw-bold">525 р.</p>
+                                <p class="small text-muted">Экономия 175 р. (25%)</p>
+                                <button class="btn btn-primary mt-2">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Книга 2 -->
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="images/the_hobbit.webp" class="card-img-top p-3" alt="Хоббит" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Хоббит</h5>
+                                <p class="card-text">Дж.Р.Р. Толкин</p>
+                                <p class="text-muted"><s>750 р.</s></p>
+                                <p class="text-danger fs-4 fw-bold">563 р.</p>
+                                <p class="small text-muted">Экономия 187 р. (25%)</p>
+                                <button class="btn btn-primary mt-2">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Книга 3 -->
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="images/dune.jpg" class="card-img-top p-3" alt="Дюна" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Дюна</h5>
+                                <p class="card-text">Фрэнк Герберт</p>
+                                <p class="text-muted"><s>500 р.</s></p>
+                                <p class="text-danger fs-4 fw-bold">375 р.</p>
+                                <p class="small text-muted">Экономия 125 р. (25%)</p>
+                                <button class="btn btn-primary mt-2">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="my-4" />
+
+                <div class="alert alert-success text-center">
+                    <h3>Условия получения скидки:</h3>
+                    <p class="lead mb-0">
+                        При покупке трех книг одновременно Вы получаете скидку 25%!<br />
+                        Скидка действует с 1 по 15 число каждого месяца. Не упустите возможность!
+                    </p>
+                </div>
+            </section>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Контакты</h5>
+                        <ul class="list-unstyled">
+                            <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                            <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                            <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                            <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                        </ul>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
            </div>
-            <div class="book">
-                <img src="images/the_hobbit.webp" alt="Хоббит" />
-                <p>Дж.Р.Р. Толкин<br><strong>"Хоббит"</strong><br>Путешествие Бильбо Бэггинса в мир приключений и драконов.<br>Цена : 750 р.<br><strong>Со скидкой : 563 р.</strong></p>
-            </div>
-            <div class="book">
-                <img src="images/dune.jpg" alt="Дюна" />
-                <p>Фрэнк Герберт<br><strong>"Дюна"</strong><br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.<br>Цена : 500 р.<br><strong>Со скидкой : 375 р.</strong></p>
-            </div>
-        </div>
-        <hr/>
-        <h3>Условия получения скидки:</h3>
-        <p>При покупке трех книг одновременно Вы получаете скидку 25%!<br>
-        Скидка действует с 1 по 15 число каждого месяца. Не упустите возможность!</p>
-        <hr/>
-    </div>
-    <footer class="footer">
-        <div class="contact-info">
-            <p>Контакты: info@toma.ru</p>
-            <p>Телефон: +7 (123) 456-78-90</p>
-            <p>Время работы: Пн-Пт 9:00-18:00</p>
-            <p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
-        </div>
-        <div class="social-media">
-            <a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
-            <a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
-            <a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
-        </div>
-    </footer>
-</body>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+    </body>
 </html>
--- a/MyWebSite/dist/assets/Book1-BdJql_-B.jpg
+++ b/MyWebSite/dist/assets/Book1-BdJql_-B.jpg
--- a/MyWebSite/dist/assets/Book2-BEB7Ih2u.jpg
+++ b/MyWebSite/dist/assets/Book2-BEB7Ih2u.jpg
--- a/MyWebSite/dist/assets/Book3-bPojlso8.jpg
+++ b/MyWebSite/dist/assets/Book3-bPojlso8.jpg
--- a/MyWebSite/dist/assets/background-oYp1cNqc.png
+++ b/MyWebSite/dist/assets/background-oYp1cNqc.png
--- a/MyWebSite/dist/assets/dune-Co1F1vkB.jpg
+++ b/MyWebSite/dist/assets/dune-Co1F1vkB.jpg
--- a/MyWebSite/dist/assets/logo-DsrEtJYJ.png
+++ b/MyWebSite/dist/assets/logo-DsrEtJYJ.png
--- a/MyWebSite/dist/assets/style-CVNOuhRW.css
+++ b/MyWebSite/dist/assets/style-CVNOuhRW.css
@@ -0,0 +1 @@
+body{background-color:#fff;background-image:url(/assets/background-oYp1cNqc.png);background-size:100% auto;background-repeat:no-repeat;background-position:center center;background-attachment:fixed;color:#036;font-family:Arial,sans-serif;padding-top:56px;image-rendering:crisp-edges;image-rendering:high-quality;-ms-interpolation-mode:bicubic}.logo{border-radius:50%;width:50px;height:50px;object-fit:cover}.navbar-brand{font-weight:600}.card{transition:transform .3s ease;background-color:#ffffffe6}.card:hover{transform:translateY(-5px)}.btn-primary{background-color:#036;border-color:#036}.btn-primary:hover{background-color:#024;border-color:#024}@media (max-width: 768px){.navbar-brand span{font-size:1rem}body{background-size:auto;background-position:center}}.social-media a{color:#036;transition:color .3s ease}.social-media a:hover{color:#024}.card-img-top{height:300px;object-fit:contain}@media (max-width: 576px){.card{margin-bottom:20px}footer .col-md-6{text-align:center!important;margin-bottom:20px}}
--- a/MyWebSite/dist/assets/the_girl_with_the_dragon_tattoo-CgrgasX2.jpg
+++ b/MyWebSite/dist/assets/the_girl_with_the_dragon_tattoo-CgrgasX2.jpg
--- a/MyWebSite/dist/assets/the_hobbit-CkJ8H01T.webp
+++ b/MyWebSite/dist/assets/the_hobbit-CkJ8H01T.webp
--- a/MyWebSite/dist/basket.html
+++ b/MyWebSite/dist/basket.html
@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Корзина | Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+
+      <link rel="stylesheet" crossorigin href="/assets/style-CVNOuhRW.css">
+    </head>
+    <body>
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="/assets/logo-DsrEtJYJ.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link position-relative show-cart-btn" href="#">
+                                <i class="bi bi-cart3"></i>
+                                <span
+                                    class="cart-count badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle"
+                                    style="display: none"
+                                ></span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <div class="row justify-content-center">
+                <div class="col-lg-10">
+                    <h2 class="text-center mb-4">Ваша корзина</h2>
+
+                    <!-- Список товаров -->
+                    <div id="cartItemsContainer">
+                        <!-- Товары будут загружены через JavaScript -->
+                    </div>
+
+                    <!-- Итоговая информация -->
+                    <div class="card mb-4 border-danger">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <h4 class="mb-0">Общая стоимость:</h4>
+                                <h4 class="mb-0" id="cartTotal">0 руб.</h4>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Кнопки действий -->
+                    <div class="d-flex justify-content-between mb-5">
+                        <a href="catalog.html" class="btn btn-outline-primary">
+                            <i class="bi bi-arrow-left me-2"></i>Продолжить покупки
+                        </a>
+                        <div>
+                            <button id="clearCartBtn" class="btn btn-outline-danger me-2">
+                                <i class="bi bi-trash me-2"></i>Очистить корзину
+                            </button>
+                            <button id="checkoutBtn" class="btn btn-success btn-lg px-4">
+                                <i class="bi bi-credit-card me-2"></i>Оформить заказ
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Контакты</h5>
+                        <ul class="list-unstyled">
+                            <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                            <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                            <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                            <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                        </ul>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+
+        <!-- Наш компонент -->
+        <script src="bookComponent.js"></script>
+
+        <script>
+            // Инициализация корзины на странице basket.html
+            document.addEventListener("DOMContentLoaded", async () => {
+                const model = new BookModel();
+                const view = new BookView();
+                const controller = new BookController(model, view);
+
+                // Загружаем и отображаем корзину при загрузке страницы
+                const cartItems = await model.fetchCartItems();
+                view.renderCart(cartItems);
+
+                // Обновляем счетчик в навигации
+                await controller.updateCartCount();
+
+                // Обработчики для кнопок на странице корзины
+                document.getElementById("clearCartBtn").addEventListener("click", async () => {
+                    if (confirm("Вы уверены, что хотите очистить корзину?")) {
+                        await model.clearCart();
+                        view.renderCart([]);
+                        await controller.updateCartCount();
+                    }
+                });
+
+                document.getElementById("checkoutBtn").addEventListener("click", () => {
+                    alert("Заказ оформлен! Спасибо за покупку!");
+                    model.clearCart();
+                    view.renderCart([]);
+                    controller.updateCartCount();
+                });
+
+                // Обработчик изменения количества товаров
+                document.addEventListener("change", async (event) => {
+                    if (event.target.classList.contains("cart-item-quantity")) {
+                        const id = parseInt(event.target.dataset.id);
+                        const quantity = parseInt(event.target.value);
+
+                        if (quantity > 0) {
+                            await model.updateCartItem(id, { quantity });
+                            const cartItems = await model.fetchCartItems();
+                            view.renderCart(cartItems);
+                            await controller.updateCartCount();
+                        } else {
+                            event.target.value = 1;
+                        }
+                    }
+                });
+
+                // Обработчик удаления товаров
+                document.addEventListener("click", async (event) => {
+                    if (
+                        event.target.classList.contains("remove-from-cart") ||
+                        event.target.closest(".remove-from-cart")
+                    ) {
+                        const id = parseInt(
+                            event.target.dataset.id || event.target.closest(".remove-from-cart").dataset.id
+                        );
+                        await model.removeFromCart(id);
+                        const cartItems = await model.fetchCartItems();
+                        view.renderCart(cartItems);
+                        await controller.updateCartCount();
+                    }
+                });
+            });
+        </script>
+    </body>
--- a/MyWebSite/dist/catalog.html
+++ b/MyWebSite/dist/catalog.html
@@ -0,0 +1,211 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Каталог | Книжный интернет-магазин "Тома"</title>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+
+      <link rel="stylesheet" crossorigin href="/assets/style-CVNOuhRW.css">
+    </head>
+    <body>
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="/assets/logo-DsrEtJYJ.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link position-relative show-cart-btn" href="#">
+                                <i class="bi bi-cart3"></i>
+                                <span
+                                    class="cart-count badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle"
+                                    style="display: none"
+                                ></span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <main class="container mt-5 pt-5">
+            <h2 class="text-center mb-5">Каталог книг</h2>
+            <div class="d-flex justify-content-between mb-2">
+                <div>
+                    <button class="btn btn-success add-book-btn">
+                        <i class="bi bi-plus-circle"></i> Добавить книгу
+                    </button>
+                    <button class="btn btn-primary add-genre-btn ms-2">
+                        <i class="bi bi-plus-circle"></i> Добавить жанр
+                    </button>
+                </div>
+            </div>
+            <section class="mb-5">
+                <div class="row g-4" id="fantasy-books"></div>
+            </section>
+            <section class="mb-5">
+                <div class="row g-4" id="detective-books"></div>
+            </section>
+            <section class="mb-5">
+                <div class="row g-4" id="novel-books"></div>
+            </section>
+            <section class="mb-5">
+                <div class="row g-4" id="fantasy2-books"></div>
+            </section>
+        </main>
+        <!-- Модальное окно для добавления/редактирования книги -->
+        <div class="modal fade" id="bookModal" tabindex="-1" aria-labelledby="bookModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="bookModalLabel">Добавить книгу</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="bookForm">
+                            <input type="hidden" id="bookId" />
+                            <div class="mb-3">
+                                <label for="bookTitle" class="form-label">Название книги</label>
+                                <input type="text" class="form-control" id="bookTitle" required />
+                            </div>
+                            <div class="mb-3">
+                                <label for="bookAuthor" class="form-label">Автор</label>
+                                <input type="text" class="form-control" id="bookAuthor" required />
+                            </div>
+                            <div class="mb-3">
+                                <label for="bookGenre" class="form-label">Жанр</label>
+                                <select class="form-select" id="bookGenre" required></select>
+                            </div>
+                            <div class="mb-3">
+                                <label for="bookPrice" class="form-label">Цена</label>
+                                <input type="number" class="form-control" id="bookPrice" required />
+                            </div>
+                            <div class="mb-3">
+                                <label for="bookDescription" class="form-label">Описание</label>
+                                <textarea class="form-control" id="bookDescription" rows="3" required></textarea>
+                            </div>
+                            <div class="mb-3">
+                                <label for="bookImage" class="form-label">Изображение</label>
+                                <input
+                                    type="text"
+                                    class="form-control"
+                                    id="bookImage"
+                                    placeholder="Имя файла (например, book.jpg) или полный URL"
+                                    required
+                                />
+                                <div class="form-text">
+                                    Можно указать имя файла из папки images (например, "book.jpg") или полный URL
+                                    изображения
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
+                                <button type="submit" class="btn btn-primary">Сохранить</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Модальное окно для добавления жанра -->
+        <div class="modal fade" id="genreModal" tabindex="-1" aria-labelledby="genreModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="genreModalLabel">Добавить жанр</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="genreForm">
+                            <div class="mb-3">
+                                <label for="genreName" class="form-label">Название жанра</label>
+                                <input type="text" class="form-control" id="genreName" required />
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
+                                <button type="submit" class="btn btn-primary">Сохранить</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Модальное окно корзины -->
+        <div class="modal fade" id="cartModal" tabindex="-1" aria-labelledby="cartModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="cartModalLabel">Ваша корзина</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div id="cartItems"></div>
+                        <div class="d-flex justify-content-between align-items-center mt-3">
+                            <h4>Итого:</h4>
+                            <h4 id="cartTotal">0 руб.</h4>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                            Продолжить покупки
+                        </button>
+                        <button id="checkoutBtnModal" class="btn btn-success">Оформить заказ</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Контакты</h5>
+                        <ul class="list-unstyled">
+                            <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                            <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                            <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                            <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                        </ul>
+                    </div>
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+        <script src="bookComponent.js"></script>
+    </body>
--- a/MyWebSite/dist/contactUs.html
+++ b/MyWebSite/dist/contactUs.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Свяжитесь с нами | Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+
+      <link rel="stylesheet" crossorigin href="/assets/style-CVNOuhRW.css">
+    </head>
+    <body>
+        <!-- Навигация -->
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="/assets/logo-DsrEtJYJ.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <section class="my-5">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8">
+                        <h2 class="text-center mb-4">Свяжитесь с нами</h2>
+
+                        <form class="needs-validation" novalidate>
+                            <div class="mb-3">
+                                <label for="name" class="form-label">Имя</label>
+                                <input type="text" class="form-control" id="name" required />
+                                <div class="invalid-feedback">Пожалуйста, введите ваше имя.</div>
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="email" class="form-label">Электронная почта</label>
+                                <input type="email" class="form-control" id="email" required />
+                                <div class="invalid-feedback">Пожалуйста, введите корректный email.</div>
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="purchase-code" class="form-label">Код покупки (если есть)</label>
+                                <input type="text" class="form-control" id="purchase-code" />
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="problem-description" class="form-label">Описание проблемы</label>
+                                <textarea class="form-control" id="problem-description" rows="6" required></textarea>
+                                <div class="invalid-feedback">Пожалуйста, опишите вашу проблему.</div>
+                            </div>
+
+                            <div class="text-center">
+                                <button type="submit" class="btn btn-primary btn-lg px-4">Отправить</button>
+                            </div>
+                        </form>
+
+                        <!-- Контактная информация -->
+                        <div class="card mt-5">
+                            <div class="card-body">
+                                <h5 class="card-title">Контактная информация</h5>
+                                <ul class="list-unstyled">
+                                    <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                                    <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                                    <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                                    <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Книжный магазин "Тома"</h5>
+                        <p>Ваш надежный партнер в мире литературы с 2025 года.</p>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+
+        <!-- Валидация формы -->
+        <script>
+            (function () {
+                "use strict";
+
+                const forms = document.querySelectorAll(".needs-validation");
+
+                Array.from(forms).forEach((form) => {
+                    form.addEventListener(
+                        "submit",
+                        (event) => {
+                            if (!form.checkValidity()) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }
+                            form.classList.add("was-validated");
+                        },
+                        false
+                    );
+                });
+            })();
+        </script>
+    </body>
--- a/MyWebSite/dist/discounts.html
+++ b/MyWebSite/dist/discounts.html
@@ -0,0 +1,155 @@
+<!-- Сделать кнопку в фантастике "добавить книгу", вводим данные в форму, и карточка книги добавляется в Фантастику-->
+
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Скидки | Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+
+      <link rel="stylesheet" crossorigin href="/assets/style-CVNOuhRW.css">
+    </head>
+    <body>
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="/assets/logo-DsrEtJYJ.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <section class="my-5">
+                <h2 class="text-center mb-4">Скидки</h2>
+                <hr class="mb-4" />
+
+                <div class="row g-4 justify-content-center">
+                    <!-- Книга 1 -->
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img
+                                src="/assets/the_girl_with_the_dragon_tattoo-CgrgasX2.jpg"
+                                class="card-img-top p-3"
+                                alt="Девушка с татуировкой дракона"
+                            />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Девушка с татуировкой дракона</h5>
+                                <p class="card-text">Стиг Ларссон</p>
+                                <p class="text-muted"><s>700 р.</s></p>
+                                <p class="text-danger fs-4 fw-bold">525 р.</p>
+                                <p class="small text-muted">Экономия 175 р. (25%)</p>
+                                <button class="btn btn-primary mt-2">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Книга 2 -->
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="/assets/the_hobbit-CkJ8H01T.webp" class="card-img-top p-3" alt="Хоббит" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Хоббит</h5>
+                                <p class="card-text">Дж.Р.Р. Толкин</p>
+                                <p class="text-muted"><s>750 р.</s></p>
+                                <p class="text-danger fs-4 fw-bold">563 р.</p>
+                                <p class="small text-muted">Экономия 187 р. (25%)</p>
+                                <button class="btn btn-primary mt-2">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Книга 3 -->
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="/assets/dune-Co1F1vkB.jpg" class="card-img-top p-3" alt="Дюна" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Дюна</h5>
+                                <p class="card-text">Фрэнк Герберт</p>
+                                <p class="text-muted"><s>500 р.</s></p>
+                                <p class="text-danger fs-4 fw-bold">375 р.</p>
+                                <p class="small text-muted">Экономия 125 р. (25%)</p>
+                                <button class="btn btn-primary mt-2">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="my-4" />
+
+                <div class="alert alert-success text-center">
+                    <h3>Условия получения скидки:</h3>
+                    <p class="lead mb-0">
+                        При покупке трех книг одновременно Вы получаете скидку 25%!<br />
+                        Скидка действует с 1 по 15 число каждого месяца. Не упустите возможность!
+                    </p>
+                </div>
+            </section>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Контакты</h5>
+                        <ul class="list-unstyled">
+                            <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                            <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                            <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                            <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                        </ul>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+    </body>
--- a/MyWebSite/dist/index.html
+++ b/MyWebSite/dist/index.html
@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+
+      <link rel="stylesheet" crossorigin href="/assets/style-CVNOuhRW.css">
+    </head>
+    <body>
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="/assets/logo-DsrEtJYJ.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <section class="my-5">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="mb-4">Описание:</h2>
+                        <p class="lead">
+                            Погрузитесь в незабываемые рукописные миры!<br />
+                            Бесчисленные литературные направления ждут вас!<br />
+                            Познакомьтесь с популярными работами известных<br />
+                            писателей! Мы Вам рады!
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <section class="my-5">
+                <h2 class="text-center mb-4">Хиты продаж</h2>
+                <div class="row g-4 justify-content-center">
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="/assets/Book1-BdJql_-B.jpg" class="card-img-top p-3" alt="Книга 1" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Тимоти Брук «Шляпа Вермеера»</h5>
+                                <button class="btn btn-primary mt-3">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="/assets/Book2-BEB7Ih2u.jpg" class="card-img-top p-3" alt="Книга 2" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Пол Линч «Песнь пророка»</h5>
+                                <button class="btn btn-primary mt-3">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="/assets/Book3-bPojlso8.jpg" class="card-img-top p-3" alt="Книга 3" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Яна Вагнер «Тоннель»</h5>
+                                <button class="btn btn-primary mt-3">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Контакты</h5>
+                        <ul class="list-unstyled">
+                            <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                            <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                            <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                            <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                        </ul>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+    </body>
--- a/MyWebSite/home.html
+++ b/MyWebSite/home.html
@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Книжный интернет-магазин "Тома"</title>
+        <!-- Bootstrap CSS -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+        <!-- Ваш CSS -->
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <!-- Навигация -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+            <div class="container">
+                <a class="navbar-brand d-flex align-items-center" href="index.html">
+                    <img src="logo.png" alt="Логотип" class="logo me-2" />
+                    <span class="d-none d-lg-block">Книжный магазин "Тома"</span>
+                    <span class="d-lg-none">"Тома"</span>
+                </a>
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item dropdown">
+                            <a
+                                class="nav-link dropdown-toggle"
+                                href="#"
+                                id="navbarDropdown"
+                                role="button"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                Страницы
+                            </a>
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                <li><a class="dropdown-item" href="index.html">Главная</a></li>
+                                <li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
+                                <li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
+                                <li><a class="dropdown-item" href="basket.html">Корзина</a></li>
+                                <li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Основной контент -->
+        <main class="container mt-5 pt-5">
+            <section class="my-5">
+                <div class="row justify-content-center">
+                    <div class="col-lg-8 text-center">
+                        <h2 class="mb-4">Описание:</h2>
+                        <p class="lead">
+                            Погрузитесь в незабываемые рукописные миры!<br />
+                            Бесчисленные литературные направления ждут вас!<br />
+                            Познакомьтесь с популярными работами известных<br />
+                            писателей! Мы Вам рады!
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <section class="my-5">
+                <h2 class="text-center mb-4">Хиты продаж</h2>
+                <div class="row g-4 justify-content-center">
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="images/Book1.jpg" class="card-img-top p-3" alt="Книга 1" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Тимоти Брук «Шляпа Вермеера»</h5>
+                                <button class="btn btn-primary mt-3">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="images/Book2.jpg" class="card-img-top p-3" alt="Книга 2" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Пол Линч «Песнь пророка»</h5>
+                                <button class="btn btn-primary mt-3">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6 col-lg-4">
+                        <div class="card h-100 border-0 shadow-sm">
+                            <img src="images/Book3.jpg" class="card-img-top p-3" alt="Книга 3" />
+                            <div class="card-body text-center">
+                                <h5 class="card-title">Яна Вагнер «Тоннель»</h5>
+                                <button class="btn btn-primary mt-3">В корзину</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- Подвал -->
+        <footer class="bg-light py-4 mt-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-6 mb-4 mb-md-0">
+                        <h5 class="mb-3">Контакты</h5>
+                        <ul class="list-unstyled">
+                            <li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
+                            <li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
+                            <li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
+                            <li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
+                        </ul>
+                    </div>
+
+                    <div class="col-md-6 text-md-end">
+                        <h5 class="mb-3">Социальные сети</h5>
+                        <div class="social-media">
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
+                            <a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
+                            <a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+
+        <!-- Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
+    </body>
+</html>
--- a/MyWebSite/images/asongoficeandfire.jpg
+++ b/MyWebSite/images/asongoficeandfire.jpg
--- a/MyWebSite/index.html
+++ b/MyWebSite/index.html
@@ -1,72 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ru">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-    <header class="header">
-        <img class="logo" src="logo.png" alt="logo" />
-        <h1>
-            Книжный интернет-магазин "Тома"
-        </h1>
-        <nav class="navbar">
-            <ul class="menu">
-                <li class="dropdown">
-                    <span>Страницы ▾</span>
-                    <ul class="features-menu">
-                        <li><a href="index.html">Главная</a></li>
-                        <li><a href="catalog.html">Каталог</a></li>
-                        <li><a href="discounts.html">Скидки</a></li>
-                        <li><a href="basket.html">Корзина</a></li>
-                        <li><a href="contactUs.html">Свяжитесь с нами</a></li>
-                    </ul>
-                </li>
-            </ul>
-        </nav>
-    </header>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Книжный интернет-магазин "Тома"</title>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+    </head>
+    <body>
+        <div id="root"></div>

-    <div class="container">
-        <h2>Описание:</h2>
-        <p> 
-            Погрузитесь в незабываемые рукописные миры! 
-            <br> 
-            Бесчисленные литературные направления ждут вас!  
-            <br>
-            Познакомьтесь с популярными работами известных
-            <br>
-            писателей! Мы Вам рады!
-        </p>
+        <!-- Подключение React и Bootstrap JS -->
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

-        <h2>Хиты продаж:</h2>
-        <div class="bestsellers">
-            <div class="book">
-                <img src="images/Book1.jpg" alt="Книга 1" />
-                <p><strong>Тимоти Брук «Шляпа Вермеера»</strong></p>
-            </div>
-            <div class="book">
-                <img src="images/Book2.jpg" alt="Книга 2" />
-                <p><strong>Пол Линч «Песнь пророка»</strong></p>
-            </div>
-            <div class="book">
-                <img src="images/Book3.jpg" alt="Книга 3" />
-                <p><strong>Яна Вагнер «Тоннель»</strong></p>
-            </div>
-        </div>
-    </div>
-    <footer class="footer">
-        <div class="contact-info">
-            <p>Контакты: info@toma.ru</p>
-            <p>Телефон: +7 (123) 456-78-90</p>
-            <p>Время работы: Пн-Пт 9:00-18:00</p>
-            <p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
-        </div>
-        <div class="social-media">
-            <a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
-            <a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
-            <a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
-        </div>
-    </footer>
-</body>
+        <!-- Подключение скриптов приложения -->
+        <script type="module" src="main.jsx"></script>
+    </body>
 </html>
--- a/MyWebSite/main.jsx
+++ b/MyWebSite/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
--- a/MyWebSite/node_modules/.bin/acorn
+++ b/MyWebSite/node_modules/.bin/acorn
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../acorn/bin/acorn" "$@"
+else 
+  exec node  "$basedir/../acorn/bin/acorn" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/acorn.cmd
+++ b/MyWebSite/node_modules/.bin/acorn.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\acorn\bin\acorn" %*
--- a/MyWebSite/node_modules/.bin/acorn.ps1
+++ b/MyWebSite/node_modules/.bin/acorn.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../acorn/bin/acorn" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../acorn/bin/acorn" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../acorn/bin/acorn" $args
+  } else {
+    & "node$exe"  "$basedir/../acorn/bin/acorn" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/browserslist
+++ b/MyWebSite/node_modules/.bin/browserslist
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../browserslist/cli.js" "$@"
+else 
+  exec node  "$basedir/../browserslist/cli.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/browserslist.cmd
+++ b/MyWebSite/node_modules/.bin/browserslist.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\browserslist\cli.js" %*
--- a/MyWebSite/node_modules/.bin/browserslist.ps1
+++ b/MyWebSite/node_modules/.bin/browserslist.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../browserslist/cli.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../browserslist/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../browserslist/cli.js" $args
+  } else {
+    & "node$exe"  "$basedir/../browserslist/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/esbuild
+++ b/MyWebSite/node_modules/.bin/esbuild
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../esbuild/bin/esbuild" "$@"
+else 
+  exec node  "$basedir/../esbuild/bin/esbuild" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/esbuild.cmd
+++ b/MyWebSite/node_modules/.bin/esbuild.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\esbuild\bin\esbuild" %*
--- a/MyWebSite/node_modules/.bin/esbuild.ps1
+++ b/MyWebSite/node_modules/.bin/esbuild.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../esbuild/bin/esbuild" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../esbuild/bin/esbuild" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../esbuild/bin/esbuild" $args
+  } else {
+    & "node$exe"  "$basedir/../esbuild/bin/esbuild" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/eslint
+++ b/MyWebSite/node_modules/.bin/eslint
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../eslint/bin/eslint.js" "$@"
+else 
+  exec node  "$basedir/../eslint/bin/eslint.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/eslint-config-prettier
+++ b/MyWebSite/node_modules/.bin/eslint-config-prettier
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../eslint-config-prettier/build/bin/cli.js" "$@"
+else 
+  exec node  "$basedir/../eslint-config-prettier/build/bin/cli.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/eslint-config-prettier.cmd
+++ b/MyWebSite/node_modules/.bin/eslint-config-prettier.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\eslint-config-prettier\build\bin\cli.js" %*
--- a/MyWebSite/node_modules/.bin/eslint-config-prettier.ps1
+++ b/MyWebSite/node_modules/.bin/eslint-config-prettier.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../eslint-config-prettier/build/bin/cli.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../eslint-config-prettier/build/bin/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../eslint-config-prettier/build/bin/cli.js" $args
+  } else {
+    & "node$exe"  "$basedir/../eslint-config-prettier/build/bin/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/eslint.cmd
+++ b/MyWebSite/node_modules/.bin/eslint.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\eslint\bin\eslint.js" %*
--- a/MyWebSite/node_modules/.bin/eslint.ps1
+++ b/MyWebSite/node_modules/.bin/eslint.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../eslint/bin/eslint.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../eslint/bin/eslint.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../eslint/bin/eslint.js" $args
+  } else {
+    & "node$exe"  "$basedir/../eslint/bin/eslint.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/he
+++ b/MyWebSite/node_modules/.bin/he
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../he/bin/he" "$@"
+else 
+  exec node  "$basedir/../he/bin/he" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/he.cmd
+++ b/MyWebSite/node_modules/.bin/he.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\he\bin\he" %*
--- a/MyWebSite/node_modules/.bin/he.ps1
+++ b/MyWebSite/node_modules/.bin/he.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../he/bin/he" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../he/bin/he" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../he/bin/he" $args
+  } else {
+    & "node$exe"  "$basedir/../he/bin/he" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/http-server
+++ b/MyWebSite/node_modules/.bin/http-server
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../http-server/bin/http-server" "$@"
+else 
+  exec node  "$basedir/../http-server/bin/http-server" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/http-server.cmd
+++ b/MyWebSite/node_modules/.bin/http-server.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\http-server\bin\http-server" %*
--- a/MyWebSite/node_modules/.bin/http-server.ps1
+++ b/MyWebSite/node_modules/.bin/http-server.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../http-server/bin/http-server" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../http-server/bin/http-server" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../http-server/bin/http-server" $args
+  } else {
+    & "node$exe"  "$basedir/../http-server/bin/http-server" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/js-yaml
+++ b/MyWebSite/node_modules/.bin/js-yaml
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../js-yaml/bin/js-yaml.js" "$@"
+else 
+  exec node  "$basedir/../js-yaml/bin/js-yaml.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/js-yaml.cmd
+++ b/MyWebSite/node_modules/.bin/js-yaml.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\js-yaml\bin\js-yaml.js" %*
--- a/MyWebSite/node_modules/.bin/js-yaml.ps1
+++ b/MyWebSite/node_modules/.bin/js-yaml.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../js-yaml/bin/js-yaml.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../js-yaml/bin/js-yaml.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../js-yaml/bin/js-yaml.js" $args
+  } else {
+    & "node$exe"  "$basedir/../js-yaml/bin/js-yaml.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/jsesc
+++ b/MyWebSite/node_modules/.bin/jsesc
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../jsesc/bin/jsesc" "$@"
+else 
+  exec node  "$basedir/../jsesc/bin/jsesc" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/jsesc.cmd
+++ b/MyWebSite/node_modules/.bin/jsesc.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\jsesc\bin\jsesc" %*
--- a/MyWebSite/node_modules/.bin/jsesc.ps1
+++ b/MyWebSite/node_modules/.bin/jsesc.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../jsesc/bin/jsesc" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../jsesc/bin/jsesc" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../jsesc/bin/jsesc" $args
+  } else {
+    & "node$exe"  "$basedir/../jsesc/bin/jsesc" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/json-server
+++ b/MyWebSite/node_modules/.bin/json-server
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../json-server/lib/cli/bin.js" "$@"
+else 
+  exec node  "$basedir/../json-server/lib/cli/bin.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/json-server.cmd
+++ b/MyWebSite/node_modules/.bin/json-server.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\json-server\lib\cli\bin.js" %*
--- a/MyWebSite/node_modules/.bin/json-server.ps1
+++ b/MyWebSite/node_modules/.bin/json-server.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../json-server/lib/cli/bin.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../json-server/lib/cli/bin.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../json-server/lib/cli/bin.js" $args
+  } else {
+    & "node$exe"  "$basedir/../json-server/lib/cli/bin.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/json5
+++ b/MyWebSite/node_modules/.bin/json5
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../json5/lib/cli.js" "$@"
+else 
+  exec node  "$basedir/../json5/lib/cli.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/json5.cmd
+++ b/MyWebSite/node_modules/.bin/json5.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\json5\lib\cli.js" %*
--- a/MyWebSite/node_modules/.bin/json5.ps1
+++ b/MyWebSite/node_modules/.bin/json5.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../json5/lib/cli.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../json5/lib/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../json5/lib/cli.js" $args
+  } else {
+    & "node$exe"  "$basedir/../json5/lib/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/loose-envify
+++ b/MyWebSite/node_modules/.bin/loose-envify
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../loose-envify/cli.js" "$@"
+else 
+  exec node  "$basedir/../loose-envify/cli.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/loose-envify.cmd
+++ b/MyWebSite/node_modules/.bin/loose-envify.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\loose-envify\cli.js" %*
--- a/MyWebSite/node_modules/.bin/loose-envify.ps1
+++ b/MyWebSite/node_modules/.bin/loose-envify.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../loose-envify/cli.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../loose-envify/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../loose-envify/cli.js" $args
+  } else {
+    & "node$exe"  "$basedir/../loose-envify/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/mime
+++ b/MyWebSite/node_modules/.bin/mime
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../mime/cli.js" "$@"
+else 
+  exec node  "$basedir/../mime/cli.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/mime.cmd
+++ b/MyWebSite/node_modules/.bin/mime.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\mime\cli.js" %*
--- a/MyWebSite/node_modules/.bin/mime.ps1
+++ b/MyWebSite/node_modules/.bin/mime.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../mime/cli.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../mime/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../mime/cli.js" $args
+  } else {
+    & "node$exe"  "$basedir/../mime/cli.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/nanoid
+++ b/MyWebSite/node_modules/.bin/nanoid
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../nanoid/bin/nanoid.cjs" "$@"
+else 
+  exec node  "$basedir/../nanoid/bin/nanoid.cjs" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/nanoid.cmd
+++ b/MyWebSite/node_modules/.bin/nanoid.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\nanoid\bin\nanoid.cjs" %*
--- a/MyWebSite/node_modules/.bin/nanoid.ps1
+++ b/MyWebSite/node_modules/.bin/nanoid.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../nanoid/bin/nanoid.cjs" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../nanoid/bin/nanoid.cjs" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../nanoid/bin/nanoid.cjs" $args
+  } else {
+    & "node$exe"  "$basedir/../nanoid/bin/nanoid.cjs" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/node-which
+++ b/MyWebSite/node_modules/.bin/node-which
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../which/bin/node-which" "$@"
+else 
+  exec node  "$basedir/../which/bin/node-which" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/node-which.cmd
+++ b/MyWebSite/node_modules/.bin/node-which.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\which\bin\node-which" %*
--- a/MyWebSite/node_modules/.bin/node-which.ps1
+++ b/MyWebSite/node_modules/.bin/node-which.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../which/bin/node-which" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../which/bin/node-which" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../which/bin/node-which" $args
+  } else {
+    & "node$exe"  "$basedir/../which/bin/node-which" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/npm-run-all
+++ b/MyWebSite/node_modules/.bin/npm-run-all
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../npm-run-all/bin/npm-run-all/index.js" "$@"
+else 
+  exec node  "$basedir/../npm-run-all/bin/npm-run-all/index.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/npm-run-all.cmd
+++ b/MyWebSite/node_modules/.bin/npm-run-all.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\npm-run-all\bin\npm-run-all\index.js" %*
--- a/MyWebSite/node_modules/.bin/npm-run-all.ps1
+++ b/MyWebSite/node_modules/.bin/npm-run-all.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../npm-run-all/bin/npm-run-all/index.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../npm-run-all/bin/npm-run-all/index.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../npm-run-all/bin/npm-run-all/index.js" $args
+  } else {
+    & "node$exe"  "$basedir/../npm-run-all/bin/npm-run-all/index.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/opener
+++ b/MyWebSite/node_modules/.bin/opener
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../opener/bin/opener-bin.js" "$@"
+else 
+  exec node  "$basedir/../opener/bin/opener-bin.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/opener.cmd
+++ b/MyWebSite/node_modules/.bin/opener.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\opener\bin\opener-bin.js" %*
--- a/MyWebSite/node_modules/.bin/opener.ps1
+++ b/MyWebSite/node_modules/.bin/opener.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../opener/bin/opener-bin.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../opener/bin/opener-bin.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../opener/bin/opener-bin.js" $args
+  } else {
+    & "node$exe"  "$basedir/../opener/bin/opener-bin.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/parser
+++ b/MyWebSite/node_modules/.bin/parser
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../@babel/parser/bin/babel-parser.js" "$@"
+else 
+  exec node  "$basedir/../@babel/parser/bin/babel-parser.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/parser.cmd
+++ b/MyWebSite/node_modules/.bin/parser.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\@babel\parser\bin\babel-parser.js" %*
--- a/MyWebSite/node_modules/.bin/parser.ps1
+++ b/MyWebSite/node_modules/.bin/parser.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../@babel/parser/bin/babel-parser.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../@babel/parser/bin/babel-parser.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../@babel/parser/bin/babel-parser.js" $args
+  } else {
+    & "node$exe"  "$basedir/../@babel/parser/bin/babel-parser.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/pidtree
+++ b/MyWebSite/node_modules/.bin/pidtree
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../pidtree/bin/pidtree.js" "$@"
+else 
+  exec node  "$basedir/../pidtree/bin/pidtree.js" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/pidtree.cmd
+++ b/MyWebSite/node_modules/.bin/pidtree.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\pidtree\bin\pidtree.js" %*
--- a/MyWebSite/node_modules/.bin/pidtree.ps1
+++ b/MyWebSite/node_modules/.bin/pidtree.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../pidtree/bin/pidtree.js" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../pidtree/bin/pidtree.js" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../pidtree/bin/pidtree.js" $args
+  } else {
+    & "node$exe"  "$basedir/../pidtree/bin/pidtree.js" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/prettier
+++ b/MyWebSite/node_modules/.bin/prettier
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../prettier/bin/prettier.cjs" "$@"
+else 
+  exec node  "$basedir/../prettier/bin/prettier.cjs" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/prettier.cmd
+++ b/MyWebSite/node_modules/.bin/prettier.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\prettier\bin\prettier.cjs" %*
--- a/MyWebSite/node_modules/.bin/prettier.ps1
+++ b/MyWebSite/node_modules/.bin/prettier.ps1
@@ -0,0 +1,28 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../prettier/bin/prettier.cjs" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../prettier/bin/prettier.cjs" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../prettier/bin/prettier.cjs" $args
+  } else {
+    & "node$exe"  "$basedir/../prettier/bin/prettier.cjs" $args
+  }
+  $ret=$LASTEXITCODE
+}
+exit $ret
--- a/MyWebSite/node_modules/.bin/resolve
+++ b/MyWebSite/node_modules/.bin/resolve
@@ -0,0 +1,16 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../resolve/bin/resolve" "$@"
+else 
+  exec node  "$basedir/../resolve/bin/resolve" "$@"
+fi
--- a/MyWebSite/node_modules/.bin/resolve.cmd
+++ b/MyWebSite/node_modules/.bin/resolve.cmd
@@ -0,0 +1,17 @@
+@ECHO off
+GOTO start
+:find_dp0
+SET dp0=%~dp0
+EXIT /b
+:start
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\resolve\bin\resolve" %*
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
145Game	6994c92de0	Новый отчёт	2025-05-28 15:38:06 +04:00
145Game	a6f201cffe	Удаление старого отчёта	2025-05-28 15:37:32 +04:00
145Game	8f9394c01d	Отчёт	2025-05-24 13:32:30 +04:00
145Game	600eb67f5a	всё	2025-05-24 11:06:40 +04:00
145Game	f4a1992f8d	главная страница	2025-05-22 22:00:03 +04:00
145Game	ebe36b8d49	Отчет	2025-05-17 11:42:19 +04:00
145Game	55c427a847	React	2025-05-17 11:41:06 +04:00
145Game	60f316d27a	Каталог	2025-05-17 09:25:26 +04:00
145Game	e2a32ad09d	Отчет	2025-05-14 14:53:52 +04:00
145Game	66e2e28e05	Full LabWork	2025-05-14 14:22:49 +04:00
145Game	ccf842efd6	все изменения	2025-04-12 11:52:18 +04:00
145Game	f60ff53313	адоптация под планшет	2025-03-15 10:52:34 +04:00
145Game	7a0803c6b9	Футер, хедер и адаптация под смартфон	2025-03-13 22:05:07 +04:00
145Game	c450cc9983	1 лабораторная	2025-02-15 13:21:34 +04:00
				`@@ -0,0 +1 @@`
				body{background-color:#fff;background-image:url(/assets/background-oYp1cNqc.png);background-size:100% auto;background-repeat:no-repeat;background-position:center center;background-attachment:fixed;color:#036;font-family:Arial,sans-serif;padding-top:56px;image-rendering:crisp-edges;image-rendering:high-quality;-ms-interpolation-mode:bicubic}.logo{border-radius:50%;width:50px;height:50px;object-fit:cover}.navbar-brand{font-weight:600}.card{transition:transform .3s ease;background-color:#ffffffe6}.card:hover{transform:translateY(-5px)}.btn-primary{background-color:#036;border-color:#036}.btn-primary:hover{background-color:#024;border-color:#024}@media (max-width: 768px){.navbar-brand span{font-size:1rem}body{background-size:auto;background-position:center}}.social-media a{color:#036;transition:color .3s ease}.social-media a:hover{color:#024}.card-img-top{height:300px;object-fit:contain}@media (max-width: 576px){.card{margin-bottom:20px}footer .col-md-6{text-align:center!important;margin-bottom:20px}}