144 lines
5.8 KiB
HTML
144 lines
5.8 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<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.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
|
|||
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
|||
|
|
<script type="module" src="./js/bootstrap.min.js"></script>
|
|||
|
|
<link rel="stylesheet" href="/fontello.css" type="text/css" />
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
<script src="app.js" defer></script>
|
|||
|
|
</head>
|
|||
|
|
<body class="d-flex flex-column min-vh-100">
|
|||
|
|
<header>
|
|||
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<a class="navbar-brand" href="/index.html">
|
|||
|
|
<img src="/src/logoOfLibrary.png" alt="" width="80" class="d-inline-block align-text-top" border-radius="20%">
|
|||
|
|
|
|||
|
|
</a>
|
|||
|
|
<a class="about-us-link nav-link link-light fs-5" href="/pageAboutUs.html">О нас</a>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|||
|
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" >
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="navbar-collapse collapse justify-content-end p-3 bg-dark" id="navbarNav">
|
|||
|
|
<div class="navbar-nav p-3">
|
|||
|
|
|
|||
|
|
<a class="nav-link fs-5 text-light " href="./pageCatalog.html">Каталог</a>
|
|||
|
|
<a class="nav-link fs-5 text-light " href="./pageBasket.html">Корзина</a>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<section class="menu align-self-center">
|
|||
|
|
<a class="nav-link text-end fs-5 lh-2 text-light" href="./pageSignUp.html">Зарегистрироваться</a>
|
|||
|
|
<a class="nav-link text-end fs-6 text-light" href="./pageSignIn.html">Уже есть аккаунт?</a>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<main class="container-fluid p-2">
|
|||
|
|
|
|||
|
|
<h1>Подборка</h1>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-8">
|
|||
|
|
|
|||
|
|
<table class="table table-borderless" id="table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th scope="col">Товар</th>
|
|||
|
|
<th scope="col">Описание</th>
|
|||
|
|
<th scope="col"></th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<th scope="row row-of-pictures" allign="center"><img src="/src/covers/image1book.png" alt="" width="80px"></th>
|
|||
|
|
<td><p class="mb-0 font-basket">Ведьмак. Меч предназначения</p>
|
|||
|
|
<p class="mb-0 font-basket">Анджей Сапковский</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="input-group quantity-goods mt-1">
|
|||
|
|
|
|||
|
|
<input type="button" value="-" id="button_minus" class = "minus">
|
|||
|
|
<input class="input-number" type="number" step="1" min="1" max="10" value="1" title="Qty">
|
|||
|
|
<input type="button" value="+" id="button_plus" class="plus">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="align-bottom">
|
|||
|
|
<div class="btn btn-delete"> <img src="/src/icons/icons_sigh/trash.svg" alt=""></div>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<th scope="row"><img src="/src/covers/image2book.png" alt="" width="80px"></th></th>
|
|||
|
|
<td><p class="mb-0 font-basket">Ведьмак. Последнее желание</p>
|
|||
|
|
<p class="mb-0 font-basket">Анджей Сапковский</p>
|
|||
|
|
|
|||
|
|
<div class="input-group quantity-goods mt-1 ">
|
|||
|
|
<input type="button" value="-" id="button_minus" class = "minus">
|
|||
|
|
<input class="input-number" type="number" step="1" min="1" max="10" value="1" title="Qty">
|
|||
|
|
<input type="button" value="+" id="button_plus" class="plus">
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td class="align-bottom">
|
|||
|
|
<div class="btn btn-delete"> <img src="/src/icons/icons_sigh/trash.svg" alt=""></div>
|
|||
|
|
</td>
|
|||
|
|
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<hr>
|
|||
|
|
<!-- <a href="./pageCatalog.html">< К библиотеке </a> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
<footer class="footer mt-auto d-flex flex-shrink-0 align-items-center">
|
|||
|
|
<h3 class="ps-0 me-2">Наши соцсети</h3>
|
|||
|
|
<div class="group-sites" role="group">
|
|||
|
|
|
|||
|
|
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-facebook.png" class="button-sm m-auto " alt="" width="35" ></a>
|
|||
|
|
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-viber.png" class="button-sm m-auto" alt="" width="35" ></a>
|
|||
|
|
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-tg.png" class="button-sm m-auto" alt="" width="35" ></a>
|
|||
|
|
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-whats-up.png" class="button-sm m-auto" alt="" width="35" ></a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</footer>
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
let listOfCounters = document.getElementsByClassName('quantity-goods')
|
|||
|
|
document.getElementById('table')
|
|||
|
|
|
|||
|
|
.addEventListener('click', event => { // Step 2
|
|||
|
|
if (event.target.className === 'minus') {
|
|||
|
|
event.target.parentNode.getElementsByClassName("input-number")[0].value > 1 ? event.target.parentNode.getElementsByClassName("input-number")[0].value -= 1 : 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (event.target.className === 'plus') { // Step 3
|
|||
|
|
event.target.parentNode.getElementsByClassName("input-number")[0].value++
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|