Compare commits
4 Commits
labWork5
...
branch-1.2
| Author | SHA1 | Date | |
|---|---|---|---|
| 8a19ddbffb | |||
| 8f9394c01d | |||
| 600eb67f5a | |||
| f4a1992f8d |
18
MyWebSite/.vscode/launch.json
vendored
18
MyWebSite/.vscode/launch.json
vendored
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
6
MyWebSite/.vscode/settings.json
vendored
6
MyWebSite/.vscode/settings.json
vendored
@@ -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
|
||||
}
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import CatalogPage from './pages/CatalogPage';
|
||||
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="/" element={<CatalogPage />} />
|
||||
<Route path="/discounts" element={<DiscountsPage />} />
|
||||
<Route path="/basket" element={<BasketPage />} />
|
||||
<Route path="/contact" element={<ContactUsPage />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
|
||||
@@ -1,33 +1,70 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Navbar = () => {
|
||||
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>
|
||||
<div className="collapse navbar-collapse" id="navbarContent">
|
||||
<ul className="navbar-nav ms-auto">
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/catalog">Каталог</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link position-relative" to="/cart">
|
||||
<i className="bi bi-cart3"></i>
|
||||
<span className="cart-count badge bg-danger rounded-pill position-absolute top-0 start-100 translate-middle">
|
||||
0
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
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;
|
||||
@@ -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>
|
||||
@@ -91,27 +91,18 @@
|
||||
"image": "images/foundation.jpg",
|
||||
"genreId": 2,
|
||||
"id": 7
|
||||
},
|
||||
{
|
||||
"title": "рл",
|
||||
"author": "л",
|
||||
"genreId": 3,
|
||||
"price": 2,
|
||||
"description": "иоио",
|
||||
"image": "https://u.9111s.ru/uploads/202308/21/7a16d872540b76031e7dbc7590bc6c1b.png",
|
||||
"id": 10
|
||||
}
|
||||
],
|
||||
"cart": [
|
||||
{
|
||||
"bookId": 1,
|
||||
"quantity": 1,
|
||||
"id": 2
|
||||
"bookId": 2,
|
||||
"quantity": 2,
|
||||
"id": 1
|
||||
},
|
||||
{
|
||||
"bookId": 10,
|
||||
"quantity": 1,
|
||||
"id": 3
|
||||
"bookId": 1,
|
||||
"quantity": 4,
|
||||
"id": 2
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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>
|
||||
BIN
MyWebSite/dist/assets/Book1-BdJql_-B.jpg
vendored
BIN
MyWebSite/dist/assets/Book1-BdJql_-B.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
BIN
MyWebSite/dist/assets/Book2-BEB7Ih2u.jpg
vendored
BIN
MyWebSite/dist/assets/Book2-BEB7Ih2u.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 177 KiB |
BIN
MyWebSite/dist/assets/Book3-bPojlso8.jpg
vendored
BIN
MyWebSite/dist/assets/Book3-bPojlso8.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
BIN
MyWebSite/dist/assets/dune-Co1F1vkB.jpg
vendored
BIN
MyWebSite/dist/assets/dune-Co1F1vkB.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 817 KiB |
BIN
MyWebSite/dist/assets/logo-DsrEtJYJ.png
vendored
BIN
MyWebSite/dist/assets/logo-DsrEtJYJ.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
1
MyWebSite/dist/assets/style-CVNOuhRW.css
vendored
1
MyWebSite/dist/assets/style-CVNOuhRW.css
vendored
@@ -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 |
BIN
MyWebSite/dist/assets/the_hobbit-CkJ8H01T.webp
vendored
BIN
MyWebSite/dist/assets/the_hobbit-CkJ8H01T.webp
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB |
200
MyWebSite/dist/basket.html
vendored
200
MyWebSite/dist/basket.html
vendored
@@ -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>
|
||||
211
MyWebSite/dist/catalog.html
vendored
211
MyWebSite/dist/catalog.html
vendored
@@ -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>
|
||||
156
MyWebSite/dist/contactUs.html
vendored
156
MyWebSite/dist/contactUs.html
vendored
@@ -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>
|
||||
155
MyWebSite/dist/discounts.html
vendored
155
MyWebSite/dist/discounts.html
vendored
@@ -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>
|
||||
131
MyWebSite/dist/index.html
vendored
131
MyWebSite/dist/index.html
vendored
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
206
MyWebSite/pages/BasketPage.jsx
Normal file
206
MyWebSite/pages/BasketPage.jsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Alert, Button, Card, Col, Row, Spinner } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Footer from '../components/Footer';
|
||||
import Navbar from '../components/Navbar';
|
||||
import api from '../services/api';
|
||||
|
||||
const BasketPage = () => {
|
||||
const [cartItems, setCartItems] = useState([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadCart();
|
||||
}, []);
|
||||
|
||||
const loadCart = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
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);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuantityChange = async (id, quantity) => {
|
||||
if (quantity < 1) return;
|
||||
|
||||
try {
|
||||
await api.updateCartItem(id, { quantity });
|
||||
// Оптимизация: обновляем локальное состояние вместо полной перезагрузки
|
||||
setCartItems(prevItems =>
|
||||
prevItems.map(item =>
|
||||
item.id === id ? { ...item, quantity } : item
|
||||
)
|
||||
);
|
||||
// Пересчитываем итоговую сумму
|
||||
setCartItems(prevItems => {
|
||||
const newTotal = prevItems.reduce((sum, item) => {
|
||||
return sum + (item.book?.price || 0) * (item.quantity || 1);
|
||||
}, 0);
|
||||
setTotal(newTotal);
|
||||
return prevItems;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Ошибка обновления количества:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveItem = async (id) => {
|
||||
try {
|
||||
await api.removeFromCart(id);
|
||||
// Оптимизация: обновляем локальное состояние
|
||||
setCartItems(prevItems => prevItems.filter(item => item.id !== id));
|
||||
// Пересчитываем итоговую сумму
|
||||
setCartItems(prevItems => {
|
||||
const newTotal = prevItems.reduce((sum, item) => {
|
||||
return sum + (item.book?.price || 0) * (item.quantity || 1);
|
||||
}, 0);
|
||||
setTotal(newTotal);
|
||||
return prevItems;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Ошибка удаления из корзины:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearCart = async () => {
|
||||
if (window.confirm("Вы уверены, что хотите очистить корзину?")) {
|
||||
try {
|
||||
await api.clearCart();
|
||||
setCartItems([]);
|
||||
setTotal(0);
|
||||
} catch (error) {
|
||||
console.error('Ошибка очистки корзины:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckout = async () => {
|
||||
try {
|
||||
await api.clearCart();
|
||||
setCartItems([]);
|
||||
setTotal(0);
|
||||
alert("Заказ оформлен! Спасибо за покупку!");
|
||||
} catch (error) {
|
||||
console.error('Ошибка оформления заказа:', error);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="d-flex justify-content-center align-items-center vh-100">
|
||||
<Spinner animation="border" variant="primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="basket-page">
|
||||
<Navbar cartCount={cartItems.reduce((sum, item) => sum + (item.quantity || 0), 0)} />
|
||||
|
||||
<main className="container mt-5 pt-5">
|
||||
<Row className="justify-content-center">
|
||||
<Col lg={10}>
|
||||
<h2 className="text-center mb-4">Ваша корзина</h2>
|
||||
|
||||
{cartItems.length === 0 ? (
|
||||
<Alert variant="info">Корзина пуста</Alert>
|
||||
) : (
|
||||
<>
|
||||
<div className="cart-items">
|
||||
{cartItems.map(item => (
|
||||
<Card key={item.id} className="mb-3">
|
||||
<Card.Body>
|
||||
<Row className="align-items-center">
|
||||
<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' }}
|
||||
/>
|
||||
</Col>
|
||||
<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>
|
||||
</Col>
|
||||
<Col md={2}>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
value={item.quantity || 1}
|
||||
onChange={(e) => handleQuantityChange(item.id, parseInt(e.target.value))}
|
||||
className="form-control cart-item-quantity"
|
||||
/>
|
||||
</Col>
|
||||
<Col md={2} className="text-center">
|
||||
<Button
|
||||
variant="outline-danger"
|
||||
onClick={() => handleRemoveItem(item.id)}
|
||||
>
|
||||
Удалить
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="mb-4 border-danger">
|
||||
<Card.Body>
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<h4 className="mb-0">Общая стоимость:</h4>
|
||||
<h4 className="mb-0">{total} руб.</h4>
|
||||
</div>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
||||
<div className="d-flex justify-content-between mb-5">
|
||||
<Link to="/catalog" className="btn btn-outline-primary">
|
||||
Продолжить покупки
|
||||
</Link>
|
||||
<div>
|
||||
<Button
|
||||
variant="outline-danger"
|
||||
className="me-2"
|
||||
onClick={handleClearCart}
|
||||
>
|
||||
Очистить корзину
|
||||
</Button>
|
||||
<Button
|
||||
variant="success"
|
||||
className="px-4"
|
||||
onClick={handleCheckout}
|
||||
>
|
||||
Оформить заказ
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasketPage;
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, Container, Row } from 'react-bootstrap';
|
||||
import { BiPlusCircle } from 'react-icons/bi';
|
||||
import { Button, Container, Row, Spinner } from 'react-bootstrap';
|
||||
import BookComponent from '../components/BookComponent';
|
||||
import BookModal from '../components/BookModal';
|
||||
import CartModal from '../components/CartModal';
|
||||
@@ -17,38 +16,57 @@ const CatalogPage = () => {
|
||||
const [showCartModal, setShowCartModal] = useState(false);
|
||||
const [currentBookId, setCurrentBookId] = useState(null);
|
||||
const [cartCount, setCartCount] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
updateCartCount();
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [genresResponse, booksResponse, cartResponse] = await Promise.all([
|
||||
api.fetchGenres(),
|
||||
api.fetchBooks(),
|
||||
api.fetchCartItems()
|
||||
]);
|
||||
|
||||
setGenres(genresResponse.data);
|
||||
setBooks(booksResponse.data);
|
||||
setCartCount(cartResponse.data.reduce((sum, item) => sum + (item.quantity || 0), 0));
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки данных:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Функция для фильтрации жанров с книгами
|
||||
const getGenresWithBooks = () => {
|
||||
return genres.filter(genre =>
|
||||
books.some(book => book.genreId === genre.id)
|
||||
);
|
||||
};
|
||||
|
||||
const loadData = async () => {
|
||||
const handleDeleteGenre = async (genreId) => {
|
||||
if (window.confirm('Вы уверены, что хотите удалить этот жанр? Все книги этого жанра будут без жанра.')) {
|
||||
try {
|
||||
await api.deleteGenre(genreId);
|
||||
const genresResponse = await api.fetchGenres();
|
||||
setGenres(genresResponse.data);
|
||||
|
||||
const booksResponse = await api.fetchBooks();
|
||||
setBooks(booksResponse.data);
|
||||
await updateState(); // Обновляем книги, так как у некоторых мог измениться жанр
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки данных:', error);
|
||||
console.error('Ошибка удаления жанра:', error);
|
||||
alert('Нельзя удалить жанр, если есть книги с этим жанром');
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const updateCartCount = async () => {
|
||||
// Оптимизированная функция для обновления состояния
|
||||
const updateState = async () => {
|
||||
try {
|
||||
const response = await api.fetchCartItems();
|
||||
const totalItems = response.data.reduce((sum, item) => sum + (item.quantity || 0), 0);
|
||||
setCartCount(totalItems);
|
||||
const [booksResponse, cartResponse] = await Promise.all([
|
||||
api.fetchBooks(),
|
||||
api.fetchCartItems()
|
||||
]);
|
||||
|
||||
setBooks(booksResponse.data);
|
||||
setCartCount(cartResponse.data.reduce((sum, item) => sum + (item.quantity || 0), 0));
|
||||
} catch (error) {
|
||||
console.error('Ошибка обновления счетчика корзины:', error);
|
||||
console.error('Ошибка обновления данных:', error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -66,7 +84,7 @@ const CatalogPage = () => {
|
||||
if (window.confirm('Вы уверены, что хотите удалить эту книгу?')) {
|
||||
try {
|
||||
await api.deleteBook(id);
|
||||
loadData();
|
||||
await updateState();
|
||||
} catch (error) {
|
||||
console.error('Ошибка удаления книги:', error);
|
||||
}
|
||||
@@ -75,12 +93,22 @@ const CatalogPage = () => {
|
||||
|
||||
const handleAddToCart = async (bookId) => {
|
||||
try {
|
||||
await api.addToCart(bookId);
|
||||
updateCartCount();
|
||||
alert('Книга добавлена в корзину!');
|
||||
// Проверяем, есть ли уже эта книга в корзине
|
||||
const cartResponse = await api.fetchCartItems();
|
||||
const existingItem = cartResponse.data.find(item => item.bookId === bookId);
|
||||
|
||||
if (existingItem) {
|
||||
await api.updateCartItemQuantity(existingItem.id, existingItem.quantity + 1);
|
||||
} else {
|
||||
await api.addToCart(bookId);
|
||||
}
|
||||
|
||||
// Обновляем счетчик корзины
|
||||
const updatedCart = await api.fetchCartItems();
|
||||
setCartCount(updatedCart.data.reduce((sum, item) => sum + (item.quantity || 0), 0));
|
||||
|
||||
} catch (error) {
|
||||
console.error('Ошибка добавления в корзину:', error);
|
||||
alert('Не удалось добавить книгу в корзину');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -91,35 +119,31 @@ const CatalogPage = () => {
|
||||
} else {
|
||||
await api.createBook(bookData);
|
||||
}
|
||||
loadData();
|
||||
await updateState();
|
||||
setShowBookModal(false);
|
||||
} catch (error) {
|
||||
console.error('Ошибка сохранения книги:', error);
|
||||
alert('Не удалось сохранить книгу');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveGenre = async (genreData) => {
|
||||
try {
|
||||
await api.createGenre(genreData);
|
||||
loadData();
|
||||
const genresResponse = await api.fetchGenres();
|
||||
setGenres(genresResponse.data);
|
||||
setShowGenreModal(false);
|
||||
alert('Жанр успешно добавлен!');
|
||||
} catch (error) {
|
||||
console.error('Ошибка сохранения жанра:', error);
|
||||
alert('Не удалось сохранить жанр');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCheckout = async () => {
|
||||
try {
|
||||
await api.clearCart();
|
||||
updateCartCount();
|
||||
setCartCount(0);
|
||||
setShowCartModal(false);
|
||||
alert('Заказ оформлен! Спасибо за покупку!');
|
||||
} catch (error) {
|
||||
console.error('Ошибка оформления заказа:', error);
|
||||
alert('Не удалось оформить заказ');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -127,6 +151,18 @@ const CatalogPage = () => {
|
||||
return books.filter(book => book.genreId === genreId);
|
||||
};
|
||||
|
||||
const genresWithBooks = genres.filter(genre =>
|
||||
books.some(book => book.genreId === genre.id)
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="d-flex justify-content-center align-items-center vh-100">
|
||||
<Spinner animation="border" variant="primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="catalog-page">
|
||||
<Navbar cartCount={cartCount} onShowCart={() => setShowCartModal(true)} />
|
||||
@@ -138,22 +174,30 @@ const CatalogPage = () => {
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
<div>
|
||||
<Button variant="success" onClick={handleAddBook}>
|
||||
<BiPlusCircle /> Добавить книгу
|
||||
Добавить книгу
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="ms-2"
|
||||
onClick={() => setShowGenreModal(true)}
|
||||
>
|
||||
<BiPlusCircle /> Добавить жанр
|
||||
Добавить жанр
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{getGenresWithBooks().map(genre => (
|
||||
{genresWithBooks.map(genre => (
|
||||
<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 => (
|
||||
@@ -173,7 +217,6 @@ const CatalogPage = () => {
|
||||
|
||||
<Footer />
|
||||
|
||||
{/* Модальные окна */}
|
||||
<BookModal
|
||||
show={showBookModal}
|
||||
onHide={() => setShowBookModal(false)}
|
||||
|
||||
123
MyWebSite/pages/ContactUsPage.jsx
Normal file
123
MyWebSite/pages/ContactUsPage.jsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { useState } from 'react';
|
||||
import { Container, Form, Button, Card } from 'react-bootstrap';
|
||||
import Navbar from '../components/Navbar';
|
||||
import Footer from '../components/Footer';
|
||||
|
||||
const ContactUsPage = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
purchaseCode: '',
|
||||
problemDescription: ''
|
||||
});
|
||||
|
||||
const [validated, setValidated] = useState(false);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[id]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const form = event.currentTarget;
|
||||
|
||||
if (form.checkValidity() === false) {
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
// Здесь можно добавить логику отправки формы
|
||||
console.log('Форма отправлена:', formData);
|
||||
alert('Ваше сообщение отправлено! Мы свяжемся с вами в ближайшее время.');
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
purchaseCode: '',
|
||||
problemDescription: ''
|
||||
});
|
||||
}
|
||||
|
||||
setValidated(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="contact-page">
|
||||
<Navbar />
|
||||
|
||||
<main className="container mt-5 pt-5">
|
||||
<section className="my-5">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-lg-8">
|
||||
<h2 className="text-center mb-4">Свяжитесь с нами</h2>
|
||||
|
||||
<Form noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-3" controlId="name">
|
||||
<Form.Label>Имя</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
<Form.Control.Feedback type="invalid">
|
||||
Пожалуйста, введите ваше имя.
|
||||
</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className="mb-3" controlId="email">
|
||||
<Form.Label>Электронная почта</Form.Label>
|
||||
<Form.Control
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
<Form.Control.Feedback type="invalid">
|
||||
Пожалуйста, введите корректный email.
|
||||
</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className="mb-3" controlId="purchaseCode">
|
||||
<Form.Label>Код покупки (если есть)</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
value={formData.purchaseCode}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className="mb-3" controlId="problemDescription">
|
||||
<Form.Label>Описание проблемы</Form.Label>
|
||||
<Form.Control
|
||||
as="textarea"
|
||||
rows={6}
|
||||
value={formData.problemDescription}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
<Form.Control.Feedback type="invalid">
|
||||
Пожалуйста, опишите вашу проблему.
|
||||
</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
|
||||
<div className="text-center">
|
||||
<Button variant="primary" size="lg" type="submit">
|
||||
Отправить
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactUsPage;
|
||||
107
MyWebSite/pages/DiscountsPage.jsx
Normal file
107
MyWebSite/pages/DiscountsPage.jsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React from 'react';
|
||||
import { Container, Row, Col, Card, Button, Alert } from 'react-bootstrap';
|
||||
import { BiCart } from 'react-icons/bi';
|
||||
import Navbar from '../components/Navbar';
|
||||
import Footer from '../components/Footer';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap/dist/js/bootstrap.bundle.min';
|
||||
|
||||
const DiscountsPage = () => {
|
||||
const discountedBooks = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Девушка с татуировкой дракона",
|
||||
author: "Стиг Ларссон",
|
||||
image: "images/the_girl_with_the_dragon_tattoo.jpg",
|
||||
originalPrice: 700,
|
||||
discountPrice: 525,
|
||||
discountPercent: 25
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Хоббит",
|
||||
author: "Дж.Р.Р. Толкин",
|
||||
image: "images/the_hobbit.webp",
|
||||
originalPrice: 750,
|
||||
discountPrice: 563,
|
||||
discountPercent: 25
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Дюна",
|
||||
author: "Фрэнк Герберт",
|
||||
image: "images/dune.jpg",
|
||||
originalPrice: 500,
|
||||
discountPrice: 375,
|
||||
discountPercent: 25
|
||||
}
|
||||
];
|
||||
|
||||
const handleAddToCart = (bookId) => {
|
||||
// Логика добавления в корзину
|
||||
alert(`Книга ${bookId} добавлена в корзину`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="discounts-page">
|
||||
<Navbar cartCount={0} />
|
||||
|
||||
<main className="container mt-5 pt-5">
|
||||
<section className="my-5">
|
||||
<h2 className="text-center mb-4">Скидки</h2>
|
||||
<hr className="mb-4" />
|
||||
|
||||
<Row className="g-4 justify-content-center">
|
||||
{discountedBooks.map(book => (
|
||||
<Col key={book.id} md={6} lg={4}>
|
||||
<Card className="h-100 border-0 shadow-sm">
|
||||
<Card.Img
|
||||
variant="top"
|
||||
src={book.image}
|
||||
className="p-3"
|
||||
alt={book.title}
|
||||
onError={(e) => { e.target.src = 'images/default-book.jpg' }}
|
||||
/>
|
||||
<Card.Body className="text-center d-flex flex-column">
|
||||
<Card.Title>{book.title}</Card.Title>
|
||||
<Card.Text>{book.author}</Card.Text>
|
||||
<Card.Text className="text-muted">
|
||||
<s>{book.originalPrice} р.</s>
|
||||
</Card.Text>
|
||||
<Card.Text className="text-danger fs-4 fw-bold">
|
||||
{book.discountPrice} р.
|
||||
</Card.Text>
|
||||
<Card.Text className="small text-muted">
|
||||
Экономия {book.originalPrice - book.discountPrice} р. ({book.discountPercent}%)
|
||||
</Card.Text>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="mt-2"
|
||||
onClick={() => handleAddToCart(book.id)}
|
||||
>
|
||||
<BiCart /> В корзину
|
||||
</Button>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
|
||||
<hr className="my-4" />
|
||||
|
||||
<Alert variant="success" className="text-center">
|
||||
<h3>Условия получения скидки:</h3>
|
||||
<p className="lead mb-0">
|
||||
При покупке трех книг одновременно Вы получаете скидку 25%!<br />
|
||||
Скидка действует с 1 по 15 число каждого месяца. Не упустите возможность!
|
||||
</p>
|
||||
</Alert>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DiscountsPage;
|
||||
88
MyWebSite/pages/HomePage.jsx
Normal file
88
MyWebSite/pages/HomePage.jsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap/dist/js/bootstrap.bundle.min';
|
||||
import { Button, Card, Col, Row } from 'react-bootstrap';
|
||||
import { BiCart } from 'react-icons/bi';
|
||||
import Footer from '../components/Footer';
|
||||
import Navbar from '../components/Navbar';
|
||||
|
||||
const HomePage = () => {
|
||||
const bestsellers = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Тимоти Брук «Шляпа Вермеера»",
|
||||
image: "images/Book1.jpg"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Пол Линч «Песнь пророка»",
|
||||
image: "images/Book2.jpg"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Яна Вагнер «Тоннель»",
|
||||
image: "images/Book3.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
const handleAddToCart = (bookId) => {
|
||||
// Здесь будет логика добавления в корзину
|
||||
alert(`Книга ${bookId} добавлена в корзину`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="home-page">
|
||||
<Navbar cartCount={0} />
|
||||
|
||||
<main className="container mt-5 pt-5">
|
||||
{/* Блок с описанием */}
|
||||
<section className="my-5">
|
||||
<Row className="justify-content-center">
|
||||
<Col lg={8} className="text-center">
|
||||
<h2 className="mb-4">Описание:</h2>
|
||||
<p className="lead">
|
||||
Погрузитесь в незабываемые рукописные миры!<br />
|
||||
Бесчисленные литературные направления ждут вас!<br />
|
||||
Познакомьтесь с популярными работами известных<br />
|
||||
писателей! Мы Вам рады!
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</section>
|
||||
|
||||
{/* Блок хитов продаж */}
|
||||
<section className="my-5">
|
||||
<h2 className="text-center mb-4">Хиты продаж</h2>
|
||||
<Row className="g-4 justify-content-center">
|
||||
{bestsellers.map(book => (
|
||||
<Col key={book.id} md={6} lg={4}>
|
||||
<Card className="h-100 border-0 shadow-sm">
|
||||
<Card.Img
|
||||
variant="top"
|
||||
src={book.image}
|
||||
className="p-3"
|
||||
alt={book.title}
|
||||
onError={(e) => { e.target.src = 'images/default-book.jpg' }}
|
||||
/>
|
||||
<Card.Body className="text-center d-flex flex-column">
|
||||
<Card.Title>{book.title}</Card.Title>
|
||||
<Button
|
||||
variant="primary"
|
||||
className="mt-auto"
|
||||
onClick={() => handleAddToCart(book.id)}
|
||||
>
|
||||
<BiCart /> В корзину
|
||||
</Button>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
@@ -1,29 +1,30 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
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),
|
||||
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.get(`${API_URL}/cart`).then((response) => {
|
||||
return Promise.all(response.data.map((item) => axios.delete(`${API_URL}/cart/${item.id}`)));
|
||||
}),
|
||||
axios
|
||||
.get(`${API_URL}/cart`)
|
||||
.then((response) => Promise.all(response.data.map((item) => axios.delete(`${API_URL}/cart/${item.id}`)))),
|
||||
};
|
||||
|
||||
@@ -10,7 +10,6 @@ export default defineConfig({
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
catalog: resolve(__dirname, "catalog.html"),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Binary file not shown.
BIN
MyWebSite/Отчёт_Лб6.docx
Normal file
BIN
MyWebSite/Отчёт_Лб6.docx
Normal file
Binary file not shown.
Reference in New Issue
Block a user