1 Commits

Author SHA1 Message Date
8a19ddbffb LabWork_2.1 2025-10-01 22:54:23 +04:00
21 changed files with 55 additions and 1318 deletions

View File

@@ -1,18 +1,14 @@
{
"configurations": [
{
"type": "chrome",
"name": "Debug",
"type": "java",
"name": "Spring Boot-ServerApplication<server>",
"request": "launch",
"url": "http://localhost:5173"
},
{
"type": "node",
"name": "Start",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "start"],
"console": "integratedTerminal"
"cwd": "${workspaceFolder}",
"mainClass": "com.example.server.ServerApplication",
"projectName": "server",
"args": "",
"envFile": "${workspaceFolder}/.env"
}
]
}

View File

@@ -35,5 +35,9 @@
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
},
"java.configuration.updateBuildConfiguration": "interactive",
"java.compile.nullAnalysis.mode": "automatic",
"java.import.gradle.buildServer.enabled": false,
"java.import.gradle.enabled": true
}

View File

@@ -1,156 +0,0 @@
<!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">
<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>
</html>

View File

@@ -1,155 +0,0 @@
<!-- Сделать кнопку в фантастике "добавить книгу", вводим данные в форму, и карточка книги добавляется в Фантастику-->
<!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">
<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>
</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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 177 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 817 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -1 +0,0 @@
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}}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 370 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 172 KiB

View File

@@ -1,200 +0,0 @@
<!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>

View File

@@ -1,211 +0,0 @@
<!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>

View File

@@ -1,156 +0,0 @@
<!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>

View File

@@ -1,155 +0,0 @@
<!-- Сделать кнопку в фантастике "добавить книгу", вводим данные в форму, и карточка книги добавляется в Фантастику-->
<!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>

View File

@@ -1,136 +1,21 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 -->
<script type="module" crossorigin src="/assets/main-9YKRXbpb.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main-BLg3Q5Rn.css">
</head>
<body>
<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>
<div id="root"></div>
<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>
<!-- Подключение 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>
<!-- Подключение скриптов приложения -->
</body>

View File

@@ -1,136 +0,0 @@
<!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>

View File

@@ -41,6 +41,20 @@ const CatalogPage = () => {
fetchData();
}, []);
const handleDeleteGenre = async (genreId) => {
if (window.confirm('Вы уверены, что хотите удалить этот жанр? Все книги этого жанра будут без жанра.')) {
try {
await api.deleteGenre(genreId);
const genresResponse = await api.fetchGenres();
setGenres(genresResponse.data);
await updateState(); // Обновляем книги, так как у некоторых мог измениться жанр
} catch (error) {
console.error('Ошибка удаления жанра:', error);
alert('Нельзя удалить жанр, если есть книги с этим жанром');
}
}
};
// Оптимизированная функция для обновления состояния
const updateState = async () => {
try {
@@ -176,6 +190,14 @@ const CatalogPage = () => {
<section key={genre.id} className="mb-5">
<div className="genre-title bg-light p-3 rounded text-center mb-4">
<h3>{genre.name}</h3>
<Button
variant="outline-danger"
size="sm"
onClick={() => handleDeleteGenre(genre.id)}
title="Удалить жанр"
>
Удалить
</Button>
</div>
<Row>
{booksByGenre(genre.id).map(book => (

View File

@@ -1,26 +1,27 @@
import axios from "axios";
const API_URL = "http://localhost:3001";
const API_URL = "http://localhost:8080/api/1.0";
export default {
// Жанры
fetchGenres: () => axios.get(`${API_URL}/genres`),
createGenre: (genreData) => axios.post(`${API_URL}/genres`, genreData),
fetchGenres: () => axios.get(`${API_URL}/genre`),
createGenre: (genreData) => axios.post(`${API_URL}/genre`, genreData),
deleteGenre: (id) => axios.delete(`${API_URL}/genre/${id}`),
// Добавить в кард метод патч(в патче должен отображаться квантити) для количества и добавить удаление жанра
// Книги
fetchBooks: () => axios.get(`${API_URL}/books`),
fetchBooksByGenre: (genreId) => axios.get(`${API_URL}/books?genreId=${genreId}`),
fetchBook: (id) => axios.get(`${API_URL}/books/${id}`),
createBook: (bookData) => axios.post(`${API_URL}/books`, bookData),
updateBook: (id, bookData) => axios.put(`${API_URL}/books/${id}`, bookData),
deleteBook: (id) => axios.delete(`${API_URL}/books/${id}`),
fetchBooks: () => axios.get(`${API_URL}/book`),
fetchBooksByGenre: (genreId) => axios.get(`${API_URL}/book?genreId=${genreId}`),
fetchBook: (id) => axios.get(`${API_URL}/book/${id}`),
createBook: (bookData) => axios.post(`${API_URL}/book`, bookData),
updateBook: (id, bookData) => axios.put(`${API_URL}/book/${id}`, bookData),
deleteBook: (id) => axios.delete(`${API_URL}/book/${id}`),
// Корзина
fetchCartItems: () => axios.get(`${API_URL}/cart?_expand=book`),
addToCart: (bookId) => axios.post(`${API_URL}/cart`, { bookId, quantity: 1 }),
getCartItemByBookId: (bookId) => axios.get(`${API_URL}/cart?bookId=${bookId}`),
updateCartItem: (id, data) => axios.patch(`${API_URL}/cart/${id}`, data),
updateCartItemQuantity: (id, quantity) => axios.patch(`${API_URL}/cart/${id}`, { quantity }),
updateCartItem: (id, data) => axios.put(`${API_URL}/cart/${id}`, data),
updateCartItemQuantity: (id, quantity) => axios.patch(`${API_URL}/cart/${id}/${quantity}`),
removeFromCart: (id) => axios.delete(`${API_URL}/cart/${id}`),
clearCart: () =>
axios

View File

@@ -10,7 +10,6 @@ export default defineConfig({
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
catalog: resolve(__dirname, "catalog.html"),
},
},
},