286 lines
15 KiB
HTML
286 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>Корзина</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|||
|
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
|||
|
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" href="./style.css">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body class="d-flex flex-column min-vh-100 bg-white">
|
|||
|
|
<header class="w-100 position-sticky top-0">
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|||
|
|
<div class="container-md">
|
|||
|
|
<a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
|
|||
|
|
<img src="icons/logo.png" alt="logo" class="me-2">
|
|||
|
|
Читай-комната
|
|||
|
|
</a>
|
|||
|
|
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|||
|
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="navbar-collapse collapse" id="navbarNav">
|
|||
|
|
<ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100">
|
|||
|
|
<li class="header-link nav-item ms-lg-2 me-lg-3">
|
|||
|
|
<a class="nav-link" href="./index.html">Главная</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="header-link nav-item me-lg-3">
|
|||
|
|
<a class="nav-link" href="./catalog.html">Каталог</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="header-link nav-item me-lg-5" id="header-contacts">
|
|||
|
|
<a class="nav-link" href="./contacts.html">Контакты</a>
|
|||
|
|
</li>
|
|||
|
|
<div class="flex-grow-1 me-lg-4" id="header-search">
|
|||
|
|
<input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
|
|||
|
|
</div>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="./login.html">
|
|||
|
|
Вход
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<p class="d-none d-lg-block">
|
|||
|
|
/
|
|||
|
|
</p>
|
|||
|
|
<li class="nav-item me-lg-3">
|
|||
|
|
<a class="nav-link" href="./registration.html">
|
|||
|
|
Регистрация
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link active active-icon pe-lg-0" aria-current="page" href="./cart.html">
|
|||
|
|
<img src="icons/card.png" class="p-1" alt="card" width="35" height="40" id="cart-icon">
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main class="container-md d-flex flex-column flex-grow-1">
|
|||
|
|
<div class="row gy-3 mb-1">
|
|||
|
|
<div class="col-12 mb-3 mb-sm-4 mt-0 px-0">
|
|||
|
|
<div class="block d-flex justify-content-center lh-1" id="cart-title">
|
|||
|
|
Моя корзина
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-8 px-0">
|
|||
|
|
<div class="block d-flex align-items-end lh-1" id="cart-items-num-text">
|
|||
|
|
В корзине два товара:
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-4 d-flex justify-content-end px-0">
|
|||
|
|
<div class="block align-self-end">
|
|||
|
|
<button class="cart-button-remove d-flex justify-content-end align-items-end lh-1 border-0 bg-white pe-0">
|
|||
|
|
<img src="icons/trash.png" class="trash-icon me-sm-2" alt="trash" width="24" height="24">
|
|||
|
|
Удалить все
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 border-top border-black pt-3 d-sm-none">
|
|||
|
|
<div class="block">
|
|||
|
|
<img src="book_covers/cart/1.png" class="cart-book-cover me-3" alt="cart-book-cover-1" width="88" height="138">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-10 pt-3 border-top border-black d-sm-none">
|
|||
|
|
<div class="block ms-4">
|
|||
|
|
<p class="cart-book-description-title mb-2">
|
|||
|
|
Наследник Каладана
|
|||
|
|
</p>
|
|||
|
|
<p class="cart-book-description-author mb-2">
|
|||
|
|
Брайан Герберт, Кевин Андерсон
|
|||
|
|
</p>
|
|||
|
|
<p class="cart-price mb-2">
|
|||
|
|
929 р.
|
|||
|
|
</p>
|
|||
|
|
<div class="d-flex align-items-center">
|
|||
|
|
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
|||
|
|
–
|
|||
|
|
</button>
|
|||
|
|
<label class="cart-input-label d-flex">
|
|||
|
|
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
|||
|
|
</label>
|
|||
|
|
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
|||
|
|
+
|
|||
|
|
</button>
|
|||
|
|
<div class="flex-grow-1"></div>
|
|||
|
|
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
|||
|
|
<img src="icons/trash.png" class="trash-icon" alt="trash" width="24" height="24">
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-1 border-top border-black pt-3 d-none d-sm-block">
|
|||
|
|
<div class="block">
|
|||
|
|
<img src="book_covers/cart/1.png" class="cart-book-cover me-3" alt="cart-book-cover-1" width="88" height="138">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6 pt-3 border-top border-black d-none d-sm-block">
|
|||
|
|
<div class="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
|
|||
|
|
<p class="cart-book-description-title mb-2">
|
|||
|
|
Наследник Каладана
|
|||
|
|
</p>
|
|||
|
|
<p class="cart-book-description-author">
|
|||
|
|
Брайан Герберт, Кевин Андерсон
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-3 pt-2 border-top border-black d-none d-sm-block">
|
|||
|
|
<div class="block d-flex align-items-start justify-content-end">
|
|||
|
|
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
|||
|
|
–
|
|||
|
|
</button>
|
|||
|
|
<label class="cart-input-label">
|
|||
|
|
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
|||
|
|
</label>
|
|||
|
|
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
|||
|
|
+
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 pt-3 border-top border-black d-none d-sm-block">
|
|||
|
|
<div class="block d-flex flex-column align-items-end h-100">
|
|||
|
|
<p class="cart-price">
|
|||
|
|
929 р.
|
|||
|
|
</p>
|
|||
|
|
<div class="flex-grow-1"></div>
|
|||
|
|
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
|||
|
|
<img src="icons/trash.png" class="trash-icon me-2" alt="trash" width="24" height="24">
|
|||
|
|
Удалить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 border-top border-black pt-3 d-sm-none">
|
|||
|
|
<div class="block">
|
|||
|
|
<img src="book_covers/cart/2.png" class="cart-book-cover me-3" alt="cart-book-cover-2" width="88" height="138">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-10 pt-3 border-top border-black d-sm-none">
|
|||
|
|
<div class="block ms-4">
|
|||
|
|
<p class="cart-book-description-title mb-2">
|
|||
|
|
Восхождение фениксов
|
|||
|
|
</p>
|
|||
|
|
<p class="cart-book-description-author mb-2">
|
|||
|
|
Тянься Гуйюань
|
|||
|
|
</p>
|
|||
|
|
<p class="cart-price mb-2">
|
|||
|
|
834 р.
|
|||
|
|
</p>
|
|||
|
|
<div class="d-flex">
|
|||
|
|
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
|||
|
|
–
|
|||
|
|
</button>
|
|||
|
|
<label class="cart-input-label d-flex">
|
|||
|
|
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
|||
|
|
</label>
|
|||
|
|
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
|||
|
|
+
|
|||
|
|
</button>
|
|||
|
|
<div class="flex-grow-1"></div>
|
|||
|
|
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
|||
|
|
<img src="icons/trash.png" class="trash-icon" alt="trash" width="24" height="24">
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-1 border-top border-black pt-3 d-none d-sm-block">
|
|||
|
|
<div class="block">
|
|||
|
|
<img src="book_covers/cart/2.png" class="cart-book-cover me-3" alt="cart-book-cover-2" width="88" height="138">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6 pt-3 border-top border-black d-none d-sm-block">
|
|||
|
|
<div class="cart-book-description block d-flex flex-column justify-content-start ms-5 ms-lg-4 ms-xl-0 ps-0 ps-sm-2 ps-md-0 ps-xl-3 ps-xxl-0">
|
|||
|
|
<p class="cart-book-description-title mb-2">
|
|||
|
|
Восхождение фениксов
|
|||
|
|
</p>
|
|||
|
|
<p class="cart-book-description-author">
|
|||
|
|
Тянься Гуйюань
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-3 pt-2 border-top border-black d-none d-sm-block">
|
|||
|
|
<div class="block d-flex align-items-start justify-content-end">
|
|||
|
|
<button type="button" class="button-minus border border-end-0 rounded-start bg-white">
|
|||
|
|
–
|
|||
|
|
</button>
|
|||
|
|
<label class="cart-input-label">
|
|||
|
|
<input type="tel" class="cart-input h-100 w-100 border text-center" placeholder="1">
|
|||
|
|
</label>
|
|||
|
|
<button type="button" class="button-plus border border-start-0 rounded-end bg-white">
|
|||
|
|
+
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 pt-3 border-top border-black d-none d-sm-block">
|
|||
|
|
<div class="block d-flex flex-column align-items-end h-100">
|
|||
|
|
<p class="cart-price">
|
|||
|
|
834 р.
|
|||
|
|
</p>
|
|||
|
|
<div class="flex-grow-1"></div>
|
|||
|
|
<button class="cart-button-remove d-flex align-items-end lh-1 border-0 bg-white pe-0">
|
|||
|
|
<img src="icons/trash.png" class="trash-icon me-2" alt="trash" width="24" height="24">
|
|||
|
|
Удалить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12 pt-3 border-top border-black px-0">
|
|||
|
|
<div class="block d-flex justify-content-end align-items-end lh-1" id="cart-final-price">
|
|||
|
|
<span class="me-4" id="cart-final-price-text">Итого:</span> <span id="cart-final-price-value">1763 р.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12 px-0">
|
|||
|
|
<div class="block d-flex justify-content-end">
|
|||
|
|
<button class="btn rounded-5" id="cart-btn-checkout">
|
|||
|
|
Перейти к оформлению
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<footer class="footer flex-shrink-0 mt-2">
|
|||
|
|
<div class="container-md" id="footer-container">
|
|||
|
|
<div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
|
|||
|
|
<div class="col-md-6 col-lg-4">
|
|||
|
|
<div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
|
|||
|
|
© И. А. Родионов, 2023.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-lg-3">
|
|||
|
|
<div class="block d-flex align-items-center justify-content-center justify-content-md-end">
|
|||
|
|
<img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
|
|||
|
|
<p id="footer-phone-number-text">
|
|||
|
|
+7 927 818-61-60
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
|
|||
|
|
<div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
|
|||
|
|
<p class="me-3" id="footer-social-media-text">
|
|||
|
|
Мы в соцсетях:
|
|||
|
|
</p>
|
|||
|
|
<a class="me-3" href="/">
|
|||
|
|
<img src="icons/vk.png" alt="vk" width="32" height="32">
|
|||
|
|
</a>
|
|||
|
|
<a class="me-3" href="/">
|
|||
|
|
<img src="icons/youtube.png" alt="youtube" width="32" height="32">
|
|||
|
|
</a>
|
|||
|
|
<a class="me-3" href="/">
|
|||
|
|
<img src="icons/telegram.png" alt="telegram" width="32" height="32">
|
|||
|
|
</a>
|
|||
|
|
<a href="/">
|
|||
|
|
<img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</body>
|
|||
|
|
</html>
|