ILRodionov/Internet_Programming_PIbd-21_Rodionov_I_A
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: ILRodionov:main
Branches Tags
ILRodionov:main
ILRodionov:lab5
ILRodionov:lab4
ILRodionov:lab3
ILRodionov:lab2
ILRodionov:lab1
...
pull from: ILRodionov:lab2
Branches Tags
ILRodionov:lab5
ILRodionov:lab4
ILRodionov:lab3
ILRodionov:lab2
ILRodionov:lab1
ILRodionov:main

6 Commits
main ... lab2

Author SHA1 Message Date
Илья
bbd1a705b9 lab2_code 2023-11-13 19:15:21 +04:00
ILRodionov
7072f16e11 Загрузил(а) файлы в 'отчеты' 2023-11-13 18:51:35 +04:00
ILRodionov
e1f14b7116 Удалить 'отчеты/PIbd-21_Rodionov_2.docx' 2023-11-13 18:51:04 +04:00
ILRodionov
44e6ca1e00 Загрузил(а) файлы в 'отчеты' 2023-11-13 18:50:32 +04:00
ILRodionov
0dd01c5211 Загрузил(а) файлы в 'png' 2023-11-11 16:27:05 +04:00
ILRodionov
c8e161d7d6 Загрузил(а) файлы в 'отчеты' 2023-11-11 16:17:22 +04:00
69 changed files with 5477 additions and 0 deletions
Show Stats Expand all files Collapse all files

181
add-item.html Normal file
View File

@ -0,0 +1,181 @@
<!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" aria-current="page" 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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column flex-grow-1 my-0">
<div class="row justify-content-center">
<form class="col-lg-8 col-xl-7 col-xxl-6" action="./add-item.html" method="get">
<div class="mb-4 mt-5">
<label class="form-label" for="item-name">Название книги</label>
<input id="item-name" class="form-control" type="text" required>
</div>
<div class="mb-4">
<label class="form-label" for="item-author">Автор</label>
<input id="item-author" class="form-control" type="text" required>
</div>
<div class="mb-4">
<label class="form-label" for="price">Цена</label>
<input id="price" class="form-control" type="number" required>
</div>
<div class="mb-4">
<label class="form-label" for="item-descrition">Описание книги</label>
<textarea class="form-control" id="item-descrition" rows="3"></textarea>
</div>
<div class="mb-4">
<label class="form-label" for="item-annotation">Аннотация</label>
<textarea class="form-control" id="item-annotation" rows="3"></textarea>
</div>
<p class="mb-3">
Xарактеристики:
</p>
<div class="mb-4 border border-1 border-secondary p-2">
<div class="mb-3">
<label class="form-label" for="item-id">ID товара</label>
<input id="item-id" class="form-control" type="number" required>
</div>
<div class="mb-3">
<label class="form-label" for="item-publisher">Издательство</label>
<input id="item-publisher" class="form-control" type="text">
</div>
<div class="mb-3">
<label class="form-label" for="item-series">Серия</label>
<input id="item-series" class="form-control" type="text">
</div>
<div class="mb-3">
<label class="form-label" for="item-publication-year">Год издания</label>
<input id="item-publication-year" class="form-control" type="number">
</div>
<div class="mb-3">
<label class="form-label" for="item-pages-num">Количество страниц</label>
<input id="item-pages-num" class="form-control" type="number">
</div>
<div class="mb-3">
<label class="form-label" for="item-size">Размер</label>
<input id="item-size" class="form-control" type="text">
</div>
<div class="mb-3">
<label class="form-label" for="item-cover-type">Тип обложки</label>
<input id="item-cover-type" class="form-control" type="text">
</div>
<div class="mb-3">
<label class="form-label" for="item-circulation">Тираж</label>
<input id="item-circulation" class="form-control" type="number">
</div>
<div>
<label class="form-label" for="item-weight">Вес, г</label>
<input id="item-weight" class="form-control" type="number">
</div>
</div>
<div class="mb-4">
<label class="form-label" for="item-cover">Обложка книги</label>
<input type="file" class="form-control" id="item-cover">
</div>
<div class="text-center mb-5">
<button class="btn btn-primary w-50 rounded-5" type="submit" id="add-btn">Добавить товар</button>
</div>
</form>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

162
admin.html Normal file
View File

@ -0,0 +1,162 @@
<!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" aria-current="page" 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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column flex-grow-1 my-0">
<div class="row gy-3">
<div class="col-12 mt-4 px-0">
<div class="block d-flex justify-content-center fs-2 fw-bold mb-3 mb-sm-4" id="admin-title">
Панель администратора
</div>
</div>
<div class="col-12 px-0">
<div class="block table-responsive">
<table class="table table-hover table-bordered align-middle">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Название книги</th>
<th scope="col">Автор</th>
<th scope="col">Цена</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row">1</th>
<td>Форсайт</td>
<td>Сергей Лукьяненко</td>
<td>775 ₽</td>
<td><a class="btn btn-primary w-100" href="add-item.html">Редактировать</a></td>
<td><a class="btn btn-primary w-100">Удалить</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Колесо времени. Книга 11. Нож сновидений</td>
<td>Роберт Джордан</td>
<td>977 ₽</td>
<td><a class="btn btn-primary w-100" href="add-item.html">Редактировать</a></td>
<td><a class="btn btn-primary w-100">Удалить</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Четвертое крыло</td>
<td>Яррос Ребекка</td>
<td>999 ₽</td>
<td><a class="btn btn-primary w-100" href="add-item.html">Редактировать</a></td>
<td><a class="btn btn-primary w-100">Удалить</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 px-0">
<div class="block mb-4">
<a class="btn btn-primary" href="add-item.html">Добавить товар</a>
</div>
</div>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

BIN
book_covers/cart/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
book_covers/cart/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
book_covers/catalog/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 KiB

BIN
book_covers/catalog/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
book_covers/catalog/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

BIN
book_covers/catalog/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
book_covers/catalog/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
book_covers/catalog/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 754 KiB

BIN
book_covers/catalog/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
book_covers/catalog/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 932 KiB

BIN
book_covers/catalog/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 519 KiB

BIN
book_covers/novelties/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
book_covers/novelties/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

BIN
book_covers/novelties/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
book_covers/novelties/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 573 KiB

BIN
book_covers/novelties/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
book_covers/novelties/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
book_covers/product_card/cover13d__w410.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

BIN
book_covers/promotions/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 534 KiB

BIN
book_covers/promotions/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 KiB

BIN
book_covers/promotions/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 KiB

BIN
book_covers/promotions/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
book_covers/promotions/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
book_covers/promotions/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 366 KiB

BIN
book_covers/recommendations/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
book_covers/recommendations/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 426 KiB

BIN
book_covers/recommendations/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 511 KiB

BIN
book_covers/recommendations/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 355 KiB

BIN
book_covers/recommendations/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
book_covers/recommendations/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 504 KiB

286
cart.html Normal file
View File

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

148
catalog-mobile.html Normal file
View File

@ -0,0 +1,148 @@
<!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">
<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 active" aria-current="page" 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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column justify-content-center flex-grow-1 my-0">
<div class="row">
<div class="col-12 ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories-mobile">
<div class="block d-flex flex-column justify-content-center p-2 h-100">
<p class="mb-4" id="catalog-categories-mobile-title">
Категории
</p>
<ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-mobile-list">
<li> <a href="/">Книги для подростков</a> </li>
<li><a href="/">Комиксы</a></li>
<li><a href="/">Манга</a></li>
<li><a href="/">Эзотерика</a></li>
<li><a href="/">Медицина и здоровье</a></li>
<li><a href="/">Кулинария</a></li>
<li><a href="/">Детские книги</a></li>
<li class="active-category-mobile"><a href="./catalog.html">Художественная литература</a></li>
<li><a href="/">Дом и хобби</a></li>
<li><a href="/">Наука. Техника. IT</a></li>
<li><a href="/">Религия и философия</a></li>
<li><a href="/">Психология</a></li>
<li><a href="/">Искусство</a></li>
<li><a href="/">История. Общество</a></li>
<li><a href="/">Право</a></li>
<li><a href="/">Книги на английском</a></li>
<li><a href="/">Новый год</a></li>
<li><a href="/">Публицистика</a></li>
<li><a href="/">Эксклюзивные товары</a></li>
<li><a href="/">Педагогика и воспитание</a></li>
<li><a href="/">Литературные премии</a></li>
<li><a href="/">Фэнтези</a></li>
<li><a href="/">Ужасы. Мистика</a></li>
<li><a href="/">Любовный роман</a></li>
<li><a href="/">Юмор и сатира</a></li>
<li><a href="/">Проза</a></li>
<li><a href="/">Боевики и триллеры</a></li>
<li><a href="/">Эпос и фольклор</a></li>
<li><a href="/">Научная фантастика</a></li>
<li><a href="/">Детективы</a></li>
</ul>
</div>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

430
catalog.html Normal file
View File

@ -0,0 +1,430 @@
<!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.bundle.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="stylesheet" href="./style.css">
<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">
</head>
<body class="d-flex flex-column min-vh-100 h-100">
<header class="w-100 position-sticky top-0 z-3">
<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 active" aria-current="page" 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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column justify-content-center flex-grow-1 my-0">
<div class="row gy-3 flex-grow-1">
<div class="col-2 d-none d-md-block ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories">
<div class="block d-flex flex-column justify-content-center p-2 h-100">
<p class="mb-4" id="catalog-categories-title">
Категории
</p>
<ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-list">
<li> <a href="/">Книги для подростков</a> </li>
<li><a href="/">Комиксы</a></li>
<li><a href="/">Манга</a></li>
<li><a href="/">Эзотерика</a></li>
<li><a href="/">Медицина и здоровье</a></li>
<li><a href="/">Кулинария</a></li>
<li><a href="/">Детские книги</a></li>
<li class="active-category"><a href="./catalog.html">Художественная литература</a></li>
<li><a href="/">Дом и хобби</a></li>
<li><a href="/">Наука. Техника. IT</a></li>
<li><a href="/">Религия и философия</a></li>
<li><a href="/">Психология</a></li>
<li><a href="/">Искусство</a></li>
<li><a href="/">История. Общество</a></li>
<li><a href="/">Право</a></li>
<li><a href="/">Книги на английском</a></li>
<li><a href="/">Новый год</a></li>
<li><a href="/">Публицистика</a></li>
<li><a href="/">Эксклюзивные товары</a></li>
<li><a href="/">Педагогика и воспитание</a></li>
<li><a href="/">Литературные премии</a></li>
<li><a href="/">Фэнтези</a></li>
<li><a href="/">Ужасы. Мистика</a></li>
<li><a href="/">Любовный роман</a></li>
<li><a href="/">Юмор и сатира</a></li>
<li><a href="/">Проза</a></li>
<li><a href="/">Боевики и триллеры</a></li>
<li><a href="/">Эпос и фольклор</a></li>
<li><a href="/">Научная фантастика</a></li>
<li><a href="/">Детективы</a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-10 d-flex flex-column bg-white mt-0 pt-2 pt-lg-5">
<div class="row gy-3">
<div class="col-12 mb-3 mb-lg-5 px-0 d-md-none">
<div class="block d-flex lh-1" id="catalog-section-navigation">
<a href="./catalog-mobile.html" class="me-2 text-decoration-none">
Каталог
</a>
<span class="text-secondary me-2">></span>
<a href="./catalog.html" class="text-decoration-none">
Художественная литература
</a>
</div>
</div>
<div class="col-12 mb-3 mb-lg-5 px-0">
<div class="block d-flex justify-content-center lh-1" id="catalog-title">
<div>
Художественная литература
</div>
</div>
</div>
<div class="col-12 mb-3 mb-lg-5 gx-0">
<div class="block">
<select class="form-select border-black" id="catalog-select">
<option selected>Сначала популярные</option>
<option value="1">Сначала дешевые</option>
<option value="2">Сначала дорогие</option>
<option value="3">Сначала со скидкой</option>
<option value="4">Сначала новые</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/1.png" class="catalog-book-cover" alt="book-cover-catalog-1" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
593 ₽
</p>
<p class="catalog-book-title mb-3">
Граф Аверин. Колдун Российской империи
</p>
<p class="catalog-author mb-3">
Виктор Дашкевич
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/2.png" class="catalog-book-cover" alt="book-cover-catalog-2" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
977 ₽
</p>
<p class="catalog-book-title mb-3">
Колесо времени. Книга 11. Нож сновидений
</p>
<p class="catalog-author mb-3">
Роберт Джордан
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="./product_card.html">
<img src="book_covers/catalog/3.png" class="catalog-book-cover" alt="book-cover-catalog-3" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
775 ₽
</p>
<p class="catalog-book-title mb-3">
Форсайт
</p>
<p class="catalog-author mb-3">
Сергей Лукьяненко
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/4.png" class="catalog-book-cover" alt="book-cover-catalog-4" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
662 ₽
</p>
<p class="catalog-book-title mb-3">
Шолох. Долина Колокольчиков
</p>
<p class="catalog-author mb-3">
Антонина Крейн
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/5.png" class="catalog-book-cover" alt="book-cover-catalog-5" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
594 ₽
</p>
<p class="catalog-book-title mb-3">
Скрижаль Исет. Грешные души
</p>
<p class="catalog-author mb-3">
Мишина Влада
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/6.png" class="catalog-book-cover" alt="book-cover-catalog-6" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
2 112 ₽
</p>
<p class="catalog-book-title mb-3">
Мир игры Pathologic 2. Хроники второй эпидемии
</p>
<p class="catalog-author mb-3">
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/7.png" class="catalog-book-cover" alt="book-cover-catalog-7" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
1 250 ₽
</p>
<p class="catalog-book-title mb-3">
Благословение небожителей. Том 5
</p>
<p class="catalog-author mb-3">
Тунсю Мосян
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/8.png" class="catalog-book-cover" alt="book-cover-catalog-8" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
999 ₽
</p>
<p class="catalog-book-title mb-3">
Четвертое крыло
</p>
<p class="catalog-author mb-3">
Яррос Ребекка
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 d-none d-md-block d-lg-none">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/9.png" class="catalog-book-cover" alt="book-cover-catalog-9" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
519 ₽
</p>
<p class="catalog-book-title mb-3">
Волкодав
</p>
<p class="catalog-author mb-3">
Семенова М.
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-12 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0">
<div class="block d-flex">
<div class="me-2" id="catalog-page-navigation">
<a href="./catalog.html" id="catalog-selected-page">1</a>
<a href="/">2</a>
<a href="/">3</a>
<a href="/">4</a>
<a href="/">5</a>
<a href="/">6</a>
<a href="/">...</a>
<a href="/">2310</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

164
contacts.html Normal file
View File

@ -0,0 +1,164 @@
<!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 active" aria-current="page" 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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column justify-content-center flex-grow-1">
<div class="row">
<div class="col-lg-5 px-0 me-lg-5">
<div class="block d-flex flex-column align-items-start">
<p class="mb-4 mb-sm-5 lh-1" id="contacts-title">
Контакты
</p>
<div class="contacts-item d-flex mb-5">
<img src="icons/phone-call.png" class="contacts-icon me-4" alt="phone-call" width="88" height="88">
<div class="d-flex flex-column">
<p class="contacts-item-main-info mb-3">
+7 927 818-61-60
</p>
<p class="contacts-item-clarification">
Служба клиентской поддержки
c 8:00 - 22:00 (Мск)
</p>
</div>
</div>
<div class="contacts-item d-flex mb-5">
<img src="icons/email.png" class="contacts-icon me-4" alt="email" width="88" height="88">
<div class="d-flex flex-column justify-content-center">
<p class="contacts-item-main-info mb-3">
readroom@mail.ru
</p>
<p class="contacts-item-clarification">
Электронный адрес компании
</p>
</div>
</div>
<div class="contacts-item d-flex mb-3">
<img src="icons/skype.png" class="contacts-icon me-4" alt="skype" width="88" height="88">
<div class="d-flex flex-column justify-content-center">
<p class="contacts-item-main-info">
Пообщайтесь с сотрудниками по видеосвязи
</p>
</div>
</div>
<a href="/" class="mb-3 mb-sm-4 text-decoration-none" id="skype-link">
Перейти в Skype
</a>
<div class="mb-4 mb-sm-5 mt-2 mb-lg-0">
<p class="mb-3" id="contacts-address">
Наш адрес:
</p>
<p id="contacts-address-value">
432064, Россия, г. Ульяновск, проспект Врача Сурова, 2А
</p>
</div>
</div>
</div>
<div class="col px-0 align-self-center">
<div class="block d-flex justify-content-center justify-content-lg-end">
<img src="icons/map.png" class="border border-black border-2 img-fluid h-100" alt="map" width="665" height="689">
</div>
</div>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

BIN
icons/card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
icons/cart_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 B

BIN
icons/check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 B

BIN
icons/discont.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 B

BIN
icons/email.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
icons/fire.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
icons/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 B

BIN
icons/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
icons/map.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 950 KiB

BIN
icons/novelty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 709 B

BIN
icons/odnoklassniki.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
icons/phone-call.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
icons/skype.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
icons/telegram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 733 B

BIN
icons/telephone-call.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
icons/trash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
icons/vk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1019 B

BIN
icons/youtube.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 714 B

501
index.html Normal file
View File

@ -0,0 +1,501 @@
<!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">
<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 active" aria-current="page" 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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column justify-content-center flex-grow-1">
<div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
<div class="col-12 ms-2 mt-1">
<div class="main-page-section-title block d-flex align-items-end">
<img src="icons/fire.png" class="me-2" alt="fire" width="25" height="30" id="fire-icon">
<p class="main-page-section-title-text lh-1 m-0">
Горячие новинки
</p>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/novelties/1.png" class="main-page-book-cover" alt="book-cover-novelties-1" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
932 ₽
</p>
<p class="main-page-book-title">
Вавилон. Сокрытая история
</p>
<p class="main-page-author">
Ребекка Ф. Куанг
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="./product_card.html">
<img src="book_covers/novelties/2.png" class="main-page-book-cover" alt="book-cover-novelties-2" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
775 ₽
</p>
<p class="main-page-book-title">
Форсайт
</p>
<p class="main-page-author">
Сергей Лукьяненко
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/novelties/3.png" class="main-page-book-cover" alt="book-cover-novelties-3" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
642 ₽
</p>
<p class="main-page-book-title">
Во главе раздора
</p>
<p class="main-page-author">
Лия Арден
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/novelties/4.png" class="main-page-book-cover" alt="book-cover-novelties-4" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
949 ₽
</p>
<p class="main-page-book-title">
Путешествие в Элевсин
</p>
<p class="main-page-author">
Виктор Пелевин
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/novelties/5.png" class="main-page-book-cover" alt="book-cover-novelties-5" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
699 ₽
</p>
<p class="main-page-book-title">
Восстание клана Чан
</p>
<p class="main-page-author">
Тянься Гуйюань
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/novelties/6.png" class="main-page-book-cover" alt="book-cover-novelties-6" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
551 ₽
</p>
<p class="main-page-book-title">
Дебютная постановка. Том 2
</p>
<p class="main-page-author">
Александра Маринина
</p>
</div>
</div>
</div>
</div>
<div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
<div class="col-12 ms-2 mt-1">
<div class="main-page-section-title block d-flex align-items-end">
<p class="main-page-section-title-text lh-1 m-0">
Книги по акциям
</p>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/promotions/1.png" class="main-page-book-cover" alt="book-cover-promotions-1" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
576 ₽
</p>
<p class="main-page-book-title">
Шестерка воронов
</p>
<p class="main-page-author">
Ли Бардуго
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="./product_card.html">
<img src="book_covers/promotions/2.png" class="main-page-book-cover" alt="book-cover-promotions-2" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
200 ₽
</p>
<p class="main-page-book-title">
Портрет Дориана Грея
</p>
<p class="main-page-author">
Оскар Уальд
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/promotions/3.png" class="main-page-book-cover" alt="book-cover-promotions-3" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
768 ₽
</p>
<p class="main-page-book-title">
Царство Страха
</p>
<p class="main-page-author">
Керри Манискалко
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/promotions/4.png" class="main-page-book-cover" alt="book-cover-promotions-4" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
162 ₽
</p>
<p class="main-page-book-title">
Клуб самоубийц
</p>
<p class="main-page-author">
Роберт Льюис Стивенсон
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/promotions/5.png" class="main-page-book-cover" alt="book-cover-promotions-5" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
600 ₽
</p>
<p class="main-page-book-title">
Некромант-одиночка. Новелла. Том 1
</p>
<p class="main-page-author">
JJJ
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/promotions/6.png" class="main-page-book-cover" alt="book-cover-promotions-6" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
711 ₽
</p>
<p class="main-page-book-title">
Кристальный пик
</p>
<p class="main-page-author">
Гор А.
</p>
</div>
</div>
</div>
</div>
<div class="row bg-white pb-1 rounded-3 gy-3">
<div class="col-12 ms-2 mt-1">
<div class="main-page-section-title block d-flex align-items-end">
<p class="main-page-section-title-text lh-1 m-0">
Выбор редакции
</p>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/recommendations/1.png" class="main-page-book-cover" alt="book-cover-recommendations-1" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
1001 ₽
</p>
<p class="main-page-book-title">
Испытание
</p>
<p class="main-page-author">
Трейси Вульф
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="./product_card.html">
<img src="book_covers/recommendations/2.png" class="main-page-book-cover" alt="book-cover-recommendations-2" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
210 ₽
</p>
<p class="main-page-book-title">
Мастер и Маргарита
</p>
<p class="main-page-author">
Михаил Булгаков
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/recommendations/3.png" class="main-page-book-cover" alt="book-cover-recommendations-3" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
618 ₽
</p>
<p class="main-page-book-title">
Песнь Сорокопута
</p>
<p class="main-page-author">
Фрэнсис Кель
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/recommendations/4.png" class="main-page-book-cover" alt="book-cover-recommendations-4" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
754 ₽
</p>
<p class="main-page-book-title">
Кодекс Алеры. Кн. 1. Фурии Кальдерона
</p>
<p class="main-page-author">
Джим Батчер
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/recommendations/5.png" class="main-page-book-cover" alt="book-cover-recommendations-5" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
711 ₽
</p>
<p class="main-page-book-title">
Небесная река
</p>
<p class="main-page-author">
Деннис Тейлор
</p>
</div>
</div>
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="block d-flex flex-column">
<div class="d-flex justify-content-center">
<a href="/">
<img src="book_covers/recommendations/6.png" class="main-page-book-cover" alt="book-cover-recommendations-6" width="100" height="152">
</a>
</div>
<div class="d-flex flex-column align-items-center align-items-md-start">
<p class="main-page-price">
699 ₽
</p>
<p class="main-page-book-title">
Кузнец магии. Клинок тайн
</p>
<p class="main-page-author">
Триша Левенселлер
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

136
login.html Normal file
View File

@ -0,0 +1,136 @@
<!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 active" aria-current="page" 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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column flex-grow-1 my-0">
<div class="row gy-3 justify-content-center">
<div class="col-12 mt-4">
<div class="block d-flex justify-content-center mb-3 mb-sm-4" id="login-title">
Вход на сайт
</div>
</div>
<form class="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" action="./login.html" method="get">
<div class="d-flex justify-content-center mb-3 mb-sm-4">
<input type="email" class="form-control w-75 border-black" id="login-input-email" placeholder="Имя пользователя / email" required>
</div>
<div class="d-flex justify-content-center mb-3 mb-sm-4">
<input type="password" class="form-control w-75 border-black" id="login-input-password" placeholder="Пароль" required>
</div>
<div class="text-center">
<button class="btn btn-primary w-50 rounded-5" type="submit" id="login-btn">Войти</button>
</div>
</form>
<div class="col-12">
<div class="block d-flex justify-content-center my-2 my-sm-3" id="password-help">
<a href="/"> Забыли пароль? </a>
</div>
</div>
<div class="col-12">
<div class="block d-flex justify-content-center mb-2 mb-sm-3" id="login-admin">
<a href="./admin.html"> Админ </a>
</div>
</div>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

2240
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "ip_rodionov",
"version": "1.0.0",
"main": "index.html",
"type": "module",
"scripts": {
"start": "vite",
"serve": "http-server -p 3000 ./dist/",
"build": "vite build",
"prod": "npm-run-all build serve"
},
"dependencies": {
"bootstrap": "5.3.2",
"@fortawesome/fontawesome-free": "6.4.2"
},
"devDependencies": {
"http-server": "14.1.1",
"vite": "4.4.9",
"npm-run-all": "4.1.5"
}
}

BIN
png/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 364 KiB

BIN
png/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 578 KiB

BIN
png/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB

BIN
png/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
png/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

224
product_card.html Normal file
View File

@ -0,0 +1,224 @@
<!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 pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column justify-content-center flex-grow-1">
<div class="row gy-3">
<div class="col-md-6 col-lg-3 mt-0 px-0">
<div class="block d-flex justify-content-center justify-content-md-start">
<img src="book_covers/product_card/cover13d__w410.png" class="img-fluid" alt="book-cover-product-card" width="270" height="416">
</div>
</div>
<div class="col-md-6 col-lg-5 mt-5 mt-md-0 px-0">
<div class="block d-flex flex-column align-items-center align-items-md-start ms-md-4">
<div class="d-flex align-self-center align-self-md-end align-self-lg-start mb-4">
<img src="icons/novelty.png" class="me-5" alt="novelty" width="95" height="32" id="novelty-icon">
<img src="icons/discont.png" alt="discont" width="63" height="32" id="discont-icon">
</div>
<p class="mb-2" id="product-card-book-name">
Форсайт
</p>
<p class="mb-4" id="product-card-author">
Сергей Лукьяненко
</p>
<dl class="row gx-5 gy-2 text-center text-md-start" id="product-card-characteristics">
<dt class="col-md-6 mt-0">ID товара</dt>
<dd class="col-md-6 mt-0">3001249</dd>
<dt class="col-md-6">Издательство</dt>
<dd class="col-md-6">АСТ</dd>
<dt class="col-md-6">Серия</dt>
<dd class="col-md-6">Книги Сергея Лукьяненко</dd>
<dt class="col-md-6">Год издания</dt>
<dd class="col-md-6">2023</dd>
<dt class="col-md-6">Количество страниц</dt>
<dd class="col-md-6">352</dd>
<dt class="col-md-6">Размер</dt>
<dd class="col-md-6">20.5x13x2</dd>
<dt class="col-md-6">Тип обложки</dt>
<dd class="col-md-6">Твердый переплёт</dd>
<dt class="col-md-6">Тираж</dt>
<dd class="col-md-6">20000</dd>
<dt class="col-md-6">Вес, г</dt>
<dd class="col-md-6">350</dd>
</dl>
</div>
</div>
<div class="col-lg-4 mt-0 px-0 d-none d-lg-block">
<div class="block d-flex flex-column align-items-center align-items-lg-end">
<div class="border border-secondary-subtle rounded-1 p-3" id="product-card-order-container">
<div class="d-flex align-items-center mb-3">
<img src="icons/check.png" class="me-4" alt="check" width="24" height="24">
<p id="product-card-text-available">
В наличии
</p>
</div>
<p class="mb-3" id="product-card-price">
775 ₽
</p>
<div>
<button type="button" class="btn rounded-1 p-3" id="product-card-button-add">
Добавить в корзину
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4 mt-md-0 mb-4">
<div class="col px-0">
<div class="block">
<p class="product-card-book-description-h mb-2">
О товаре
</p>
<p class="product-card-book-description-text">
Новый долгожданный роман от автора бестселлеров «Ночной дозор» и «Черновик».
Увлекательная история о Мире После и мире настоящего, где 5 процентов людей знают о надвигающемся апокалипсисе больше,
чем кто-либо может представить.
</p>
</div>
</div>
</div>
<div class="row gy-3">
<div class="col-12 px-0 mb-4 mb-lg-0">
<div class="block">
<p class="product-card-book-description-h mb-2">
Аннотация
</p>
<p class="product-card-book-description-text">
Людям порой снится прошлое. Иногда хорошее, иногда не очень.
Но что делать, если тебе начинает сниться будущее? И в нём ничего хорошего нет совсем.
</p>
</div>
</div>
<div class="col px-0 d-lg-none">
<div class="block d-flex flex-column align-items-center border border-secondary-subtle rounded-1 p-3">
<div class="d-flex align-items-center mb-3">
<img src="icons/check.png" class="me-4" alt="check" width="24" height="24">
<p id="product-card-text-available">
В наличии
</p>
</div>
<p class="mb-3" id="product-card-price">
775 ₽
</p>
<div>
<button type="button" class="btn rounded-1 p-3" id="product-card-button-add">
Добавить в корзину
</button>
</div>
</div>
</div>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

132
registration.html Normal file
View File

@ -0,0 +1,132 @@
<!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 active" aria-current="page" href="./registration.html">
Регистрация
</a>
</li>
<li class="nav-item">
<a class="nav-link pe-lg-0" href="./cart.html">
<img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-md d-flex flex-column flex-grow-1 my-0">
<div class="row gy-3 justify-content-center">
<div class="col-12 mt-4">
<div class="block d-flex justify-content-center mb-3 mb-sm-4" id="reg-title">
Регистрация
</div>
</div>
<form class="col-lg-8 col-xl-7 col-xxl-6 m-0 mt-2 mt-sm-3 d-flex flex-column gap-2" action="./registration.html" method="get">
<div class="d-flex justify-content-center mb-3 mb-sm-4">
<input type="text" class="form-control w-75 border-black" id="reg-input-name" placeholder="Имя пользователя" required>
</div>
<div class="d-flex justify-content-center mb-3 mb-sm-4">
<input type="email" class="form-control w-75 border-black" id="reg-input-email" placeholder="Адрес электронной почты" required>
</div>
<div class="d-flex justify-content-center mb-3 mb-sm-4">
<input type="password" class="reg-input-password form-control w-75 border-black" placeholder="Пароль" required>
</div>
<div class="d-flex justify-content-center mb-3 mb-sm-4">
<input type="password" class="reg-input-password form-control w-75 border-black" placeholder="Подтвердите пароль" required>
</div>
<div class="text-center">
<button class="btn btn-primary w-50 rounded-5" type="submit" id="reg-btn">Создать аккаунт</button>
</div>
</form>
</div>
</main>
<footer class="footer flex-shrink-0">
<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>

837
style.css Normal file
View File

@ -0,0 +1,837 @@
body {
font-family: Montserrat, Arial;
background-color: rgb(238, 236, 236);
}
p {
margin: 0;
}
main {
margin: 4%;
}
.row {
margin: 0;
}
header nav {
background-color: rgb(23, 154, 183);
color: white;
}
#logo, .nav-link, #catalog-categories-list li a,
#catalog-page-navigation a, #catalog-categories-mobile-list li a,
#password-help a, #login-admin a {
color: inherit;
text-decoration: none;
}
#logo {
font-size: 20px;
font-weight: 800;
}
.nav-link {
font-size: 16px;
font-weight: 600;
}
.active {
font-weight: 900 !important;
text-decoration: underline;
text-decoration-skip-ink: none;
color: white !important;
}
#cart-icon {
transition: border-color 0.15s;
}
.active-icon #cart-icon {
border-width: 1px;
border-style: solid;
border-color: white;
}
#search-bar {
min-width: 94px;
}
#search-bar::placeholder {
font-size: 14px;
font-weight: 400;
color: rgb(145, 141, 141);
}
header nav a {
transition: color 0.15s;
}
header nav a:hover {
color: rgb(6, 69, 173) !important;
}
#cart-icon:hover {
border-width: 1px;
border-style: solid;
border-color: white;
}
.active-icon #cart-icon:hover {
border-color: rgb(6, 69, 173);
}
.main-page-section-title {
min-height: 32px;
}
.main-page-section-title-text {
font-size: 20px;
font-weight: 700;
}
.main-page-price {
font-size: 14px;
font-weight: 700;
}
.main-page-book-title {
font-size: 11px;
font-weight: 500;
}
.main-page-author {
font-size: 11px;
font-weight: 500;
color: rgb(97, 95, 95);
}
#product-card-order-container {
width: 294px;
}
#product-card-book-name {
font-size: 26px;
font-weight: 600;
}
#product-card-author {
font-size: 16px;
font-weight: 600;
color: rgb(14, 173, 208)
}
#product-card-characteristics {
font-size: 16px;
}
#product-card-characteristics dt {
color: rgb(97, 95, 95);
font-weight: 600 !important;
padding-left: 0;
}
#product-card-characteristics dd {
padding-left: 0;
font-weight: 700;
}
#product-card-text-available {
font-size: 21px;
font-weight: 600;
color: rgb(80, 176, 84);
}
#product-card-price {
font-size: 28px;
font-weight: 600;
}
#product-card-button-add {
font-size: 21px;
font-weight: 600;
color: white;
background-color: rgb(23, 154, 183);
transition: opacity 0.25s;
}
#product-card-button-add:hover {
opacity: 0.85;
}
.product-card-book-description-h {
font-size: 18px;
font-weight: 700;
}
.product-card-book-description-text {
font-size: 18px;
font-weight: 500;
}
#contacts-title {
font-size: 30px;
font-weight: 900;
}
.contacts-item {
font-weight: 900;
}
.contacts-item-main-info {
font-size: 20px;
}
.contacts-item-clarification {
font-size: 16px;
color: rgb(145, 141, 141);
}
#skype-link {
font-size: 20px;
font-weight: 900;
color: rgb(6, 69, 173);
}
#contacts-address {
font-size: 20px;
font-weight: 900;
}
#contacts-address-value {
font-size: 16px;
font-weight: 600;
}
#cart-title {
font-size: 36px;
font-weight: 900;
}
#cart-items-num-text {
font-size: 24px;
font-weight: 900;
}
.cart-button-remove {
font-size: 18px;
font-weight: 700;
color: rgb(145, 141, 141);
transition: color 0.15s;
}
.cart-button-remove:hover {
color: blue;
}
.cart-book-description {
font-weight: 500;
}
.cart-book-description-title {
font-size: 20px;
}
.cart-book-description-author {
font-size: 16px;
color: rgb(145, 141, 141);
}
.button-minus, .button-plus {
font-size: 20px;
font-weight: 600;
width: 32px;
height: 34px;
color: rgb(145, 141, 141);
transition: background-color 0.15s, color 0.15s;
}
.button-minus:hover, .button-plus:hover {
background-color: rgb(114, 187, 5) !important;
color: white;
}
.cart-input-label {
width: 42px;
height: 34px;
}
.cart-input {
font-size: 16px;
font-weight: 900;
border-color: rgb(222, 226, 230) !important;
}
.cart-input::placeholder {
color:black;
}
.cart-price {
font-size: 18px;
font-weight: 700;
}
#cart-final-price {
font-weight: 700;
}
#cart-final-price-text {
font-size: 24px;
}
#cart-final-price-value {
font-size: 20px;
}
#cart-btn-checkout {
font-size: 18px;
font-weight: 700;
background-color: rgb(217, 217, 217);
transition: opacity 0.25s;
}
#cart-btn-checkout:hover {
opacity: 0.85;
}
#catalog-categories, #catalog-categories-mobile {
border-color: rgb(23, 154, 183) !important;
}
#catalog-categories-title, #catalog-categories-mobile-title {
font-weight: 700;
}
#catalog-categories-title {
font-size: 24px;
}
#catalog-categories-list, #catalog-categories-mobile-list {
font-weight: 500;
color:rgb(6, 69, 173) !important;
}
#catalog-categories-list {
font-size: 14px;
}
.active-category, .active-category-mobile {
font-weight: 700;
}
#catalog-categories-mobile-title {
font-size: 48px;
}
#catalog-categories-mobile-list {
font-size: 24px;
}
#catalog-title {
font-size: 40px;
font-weight: 900;
}
#catalog-select {
font-size: 14px;
font-weight: 500;
width: 264px;
height: 35px;
}
.catalog-price {
font-size: 18px;
font-weight: 700;
}
.catalog-book-title,
.catalog-author {
font-size: 12px;
font-weight: 600;
}
.catalog-bth-checkout {
font-size: 14px;
font-weight: 600;
background-color: rgb(217, 217, 217);
transition: background-color 0.15s, color 0.15s;
}
.catalog-bth-checkout:hover {
background-color: rgb(114, 187, 5) !important;
color: white;
}
#catalog-page-navigation {
font-size: 20px;
font-weight: 700;
}
#catalog-selected-page {
color: rgb(80, 176, 84) !important;
}
#catalog-page-navigation a {
transition: color 0.15s;
}
#catalog-page-navigation a:hover {
color: rgb(0, 0, 238) !important;
}
#catalog-section-navigation {
font-size: 16px;
}
#login-input-email, #login-input-password,
#reg-input-name, #reg-input-email, .reg-input-password {
font-size: 16px;
min-width: 165px;
}
#login-title, #reg-title {
font-size: 24px;
font-weight: 900;
}
#login-btn, #reg-btn {
font-size: 16px;
font-weight: 900;
background-color: rgb(6, 69, 173);
transition: opacity 0.25s;
min-width: 160px;
}
#login-btn:hover, #reg-btn:hover {
opacity: 0.85;
}
#password-help, #login-admin {
font-size: 16px;
font-weight: 900;
color: rgb(145, 141, 141);
}
#add-btn {
min-width: 150px;
}
footer {
background-color: rgb(23, 154, 183);
color: white;
min-height: 60px;
}
#footer-container {
min-height: 60px;
}
#footer-row {
min-height: 60px;
}
#footer-copyright {
font-size: 24px;
font-weight: 900;
}
#footer-phone-number-text {
font-size: 20px;
font-weight: 900;
}
#footer-social-media-text {
font-size: 19px;
font-weight: 900;
}
@media (min-width: 992px) and (max-width: 1200px) {
#logo {
margin-right: 25px !important;
}
.header-link {
margin-right: 10px !important;
}
#header-contacts, #header-search {
margin-right: 20px !important;
}
}
@media (min-width: 992px) {
header nav {
height: 60px;
}
main {
margin: 2%;
}
}
@media (max-width: 1200px) {
#catalog-categories-list {
font-size: 12px;
}
.active-category {
font-size: 11px;
}
#catalog-categories-title {
font-size: 18px;
}
#catalog-title {
font-size: 36px;
}
}
@media (max-width: 992px) {
#catalog-categories-title {
font-size: 16px;
}
#catalog-categories-list {
font-size: 11px;
}
.active-category {
font-size: 10px;
}
#catalog-title {
font-size: 30px;
}
}
@media (max-width: 768px) {
#product-card-characteristics {
display: inline-block;
}
#product-card-characteristics dt,
#product-card-characteristics dd {
text-align: left;
padding-right: 0;
}
}
@media (max-width: 576px) {
.cart-book-cover {
width: 66px;
height: 104px;
}
.cart-button-remove {
font-size: 0 !important;
}
.catalog-book-description, .catalog-btn-checkout-div {
margin-left: 15%;
}
#admin-title {
font-size: 18px !important;
}
}
@media (max-width: 510px) {
#login-input-email, #login-input-password,
#login-btn, #password-help, #login-admin {
font-size: 12px;
}
#reg-input-name, #reg-input-email,
.reg-input-password, #reg-btn {
font-size: 12px;
}
#login-title, #reg-title {
font-size: 20px;
}
}
@media (max-width: 475px) {
#cart-title {
font-size: 30px;
}
#cart-items-num-text, #cart-final-price-text {
font-size: 20px;
}
.cart-book-description-title, #cart-final-price-value {
font-size: 16px;
}
.cart-book-description-author {
font-size: 12px;
}
.cart-price, #cart-btn-checkout,
.cart-input {
font-size: 14px;
}
.button-minus, .button-plus {
font-size: 16px;
width: 26px;
height: 28px;
}
.cart-input-label {
width: 34px;
height: 28px;
}
#catalog-categories-mobile-title {
font-size: 44px;
}
#catalog-categories-mobile-list {
font-size: 18px;
}
}
@media (max-width: 400px) {
.main-page-book-title, .main-page-author {
font-size: 0 !important;
}
.main-page-book-cover {
width: 80px;
height: 122px;
}
#footer-copyright {
font-size: 20px !important;
}
#footer-phone-number-text {
font-size: 18px !important;
}
#footer-social-media-text {
font-size: 0 !important;
margin-right: 0 !important;
}
#catalog-section-navigation {
font-size: 12px;
}
#login-btn, #password-help, #login-admin,
.reg-input-password, #reg-btn {
font-size: 16px;
}
#reg-input-name, #reg-input-email,
#login-input-email, #login-input-password {
font-size: 14px;
}
#login-title, #reg-title {
font-size: 20px;
}
}
@media (max-width: 361px) {
#logo {
font-size: 0 !important;
}
.contacts-icon {
width: 55px !important;
height: 55px !important;
}
#contacts-title {
font-size: 22px;
}
.contacts-item-main-info, #skype-link,
#contacts-address {
font-size: 14px;
}
.contacts-item-clarification, #contacts-address-value {
font-size: 12px;
}
#catalog-title {
font-size: 20px;
}
#catalog-select {
font-size: 11px;
width: 164px;
height: 28px;
padding: 5px;
}
}
@media (max-width: 335px) {
#cart-title {
font-size: 24px;
}
#cart-items-num-text {
font-size: 14px;
}
.cart-book-description-title, #cart-final-price-value {
font-size: 10px;
}
.cart-book-description-author {
font-size: 8px;
}
#cart-final-price-text {
font-size: 12px;
}
.button-minus, .button-plus {
font-size: 10px;
width: 16px;
height: 18px;
}
.cart-input-label {
width: 22px;
height: 18px;
}
.cart-input, #cart-btn-checkout,
.cart-price {
font-size: 9px;
}
.trash-icon {
width: 16px;
height: 16px;
}
.cart-book-cover {
width: 44px;
height: 69px;
}
}
@media (max-width: 320px) {
#product-card-price {
font-size: 22px !important;
}
#novelty-icon {
width: 74px !important;
height: 25px !important;
}
#discont-icon {
width: 49px !important;
height: 25px !important;
}
.product-card-book-description-h, .product-card-book-description-text,
#product-card-button-add, #product-card-text-available {
font-size: 16px !important;
}
#catalog-section-navigation {
font-size: 11px;
}
#catalog-categories-mobile-title {
font-size: 38px;
}
#catalog-categories-mobile-list {
font-size: 16px;
}
}
@media (max-width: 282px) {
#footer-copyright {
font-size: 14px !important;
}
#footer-phone-number-text {
font-size: 12px !important;
}
#admin-title {
font-size: 16px !important;
}
}
@media (max-width: 272px) {
#fire-icon {
height: 38px;
width: 30px;
}
.catalog-book-description, .catalog-btn-checkout-div {
margin-left: 0;
}
.contacts-icon {
width: 44px !important;
height: 44px !important;
margin-right: 20px !important;
}
#contacts-title {
font-size: 16px;
}
.contacts-item-main-info, #skype-link
#contacts-address {
font-size: 11px;
}
#catalog-title {
font-size: 16px;
}
#catalog-select {
width: 140px;
height: 22px;
padding: 5px;
}
#catalog-select, #contacts-address-value,
.contacts-item-clarification {
font-size: 9px;
}
#catalog-page-navigation {
font-size: 15px;
font-weight: 700;
}
#catalog-section-navigation {
font-size: 11px;
}
#catalog-categories-mobile-title {
font-size: 26px;
}
#catalog-categories-mobile-list {
font-size: 13px;
}
}
@media (max-width: 204px) {
#footer-copyright {
font-size: 13px !important;
}
#footer-phone-number-text {
font-size: 11px !important;
}
}

14
vite.config.js Normal file
View File

@ -0,0 +1,14 @@
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
page2: resolve(__dirname, 'page2.html'),
page3: resolve(__dirname, 'page3.html'),
},
},
},
})

BIN
отчеты/PIbd-21_Rodionov_IP_1.docx Normal file
View File

Binary file not shown.

BIN
отчеты/PIbd-21_Rodionov_IP_2.docx Normal file
View File

Binary file not shown.