Repository navigation
Expand file tree
/
Copy pathcart.html
More file actions
185 lines (152 loc) · 8.77 KB
/
Copy pathcart.html
File metadata and controls
185 lines (152 loc) · 8.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Корзина</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="./styles/cart.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="./scripts/cart/controller.js" type="module"></script>
</head>
<body class="container-md min-vh-100 d-flex flex-column">
<header>
<nav class="navbar navbar-expand mb-2 mt-3">
<div class="container-fluid d-flex gap-2 flex-wrap flex-sm-nowrap">
<img class="navbar-brand" src="./assets/logo.png" alt="logo" height="48">
<div class="navbar-nav">
<a class="nav-link shadow-none" href="./"><i class="bi bi-list-task h1"></i></a>
<a class="nav-link pe-0 shadow-none" href="./lk.html"><i class="bi bi-person-circle h1"></i></a>
</div>
</div>
</nav>
</header>
<div id="notifications" class="container-md">
<!-- template -->
</div>
<template id="alert-template">
<div class="alert alert-dismissible fade mb-4 js_alert_color">
<span class="js_alert_message"></span>
<button type="button" class="btn-close js_close_alert shadow-none" data-bs-dismiss="alert"></button>
</div>
</template>
<main class="container-md flex-grow-1">
<section>
<header class="mb-4">
<h2>Корзина</h2>
</header>
<div id="empty_cart_banner" class="mt-4 mb-4" hidden>
<p class="h4">Корзина пуста. Перейдите в каталог, чтобы добавить товары.</p>
</div>
<div class="row row-cols-2 row-cols-sm-3 row-cols-lg-4 row-cols-xl-5
row-cols-xxl-6 gy-4 mb-4" id="cart">
<!-- template -->
</div>
<template id="card-template">
<div class="col js_meta" data-main_category="" data-id="">
<div class="ratio">
<div class="card d-flex flex-column overflow-hidden">
<img src="." alt="" class="overflow-hidden h-100 w-100 card-img-top js_image_url">
<div class="card-body p-md-3">
<h6 class="card-title js_name" data-bs-toggle="tooltip" data-bs-title=""
data-bs-delay="500"></h6>
<div class="card-text d-flex gap-1 gap-sm-2 gap-md-3 text-muted">
<span class="js_rating"></span>
<span class="js_rating_stars">
<i class="js_star"></i>
<i class="js_star"></i>
<i class="js_star"></i>
<i class="js_star"></i>
<i class="js_star"></i>
</span>
</div>
<div class="card-text d-flex justify-content-between">
<span><span class="js_discount_price"></span>₽</span>
<s class="text-danger" hidden><span class="js_actual_price"></span>₽</s>
<strong class="text-danger js_percent_off"></strong>
</div>
<button class="btn btn-secondary w-100 js_delete_button">Удалить</button>
</div>
</div>
</div>
</div>
</template>
</section>
<section>
<header class="mb-3">
<h2>Оформление заказа</h2>
</header>
<form class="row row-cols-1 row-cols-sm-2 gy-1" id="order_form">
<fieldset class="col d-flex flex-column gap-2">
<div>
<label for="name" class="form-label">Имя</label>
<input type="text" id="name" class="form-control focus-ring focus-ring-success border"
placeholder="Иван Иванов" name="full_name" required>
</div>
<div>
<label for="phone" class="form-label">Номер телефона</label>
<input type="tel" id="phone" class="form-control focus-ring focus-ring-success border"
placeholder="+74952230523" name="phone" required>
</div>
<div>
<label for="mail" class="form-label">Email</label>
<input type="email" id="mail" class="form-control focus-ring focus-ring-success border"
placeholder="example@mospolytech.ru" name="email" required>
</div>
<div class="form-check mb-0">
<input class="form-check-input focus-ring focus-ring-secondary border" type="checkbox"
id="subscribe" name="subscribe">
<label class="form-check-label" for="subscribe">Подписаться на рассылку</label>
</div>
</fieldset>
<fieldset class="col d-flex flex-column gap-2">
<div>
<label for="address" class="form-label">Адрес доставки</label>
<input type="text" id="address" class="form-control focus-ring focus-ring-success border"
placeholder="ул. Большая Семёновская, 38" name="delivery_address" required>
</div>
<div>
<label for="date" class="form-label">Дата доставки</label>
<input type="date" id="date" class="form-control focus-ring focus-ring-success border"
name="delivery_date" required>
</div>
<div>
<label for="time">Временной интервал доставки</label>
<select id="time" class="form-select mt-2 mb-1 focus-ring focus-ring-success border"
name="delivery_interval" required>
<option value="08:00-12:00">08:00-12:00</option>
<option value="12:00-14:00">12:00-14:00</option>
<option value="14:00-18:00">14:00-18:00</option>
<option value="18:00-22:00">18:00-22:00</option>
</select>
</div>
</fieldset>
<fieldset class="col d-flex flex-column gap-2">
<div>
<label for="comment" class="form-label">Комментарий</label>
<textarea id="comment" rows="5" name="comment"
class="form-control focus-ring focus-ring-secondary border"></textarea>
</div>
</fieldset>
<fieldset class="col d-flex flex-column gap-2">
<div class="text-center flex-grow-1 d-flex flex-column justify-content-center">
<p class="h4 mb-0 mt-4 mt-sm-0">
Итоговая стоимость: <span id="total_price"></span>₽</p>
<p class="h6 mb-4">(стоимость доставки: <span id="delivery_price"></span>₽)</p>
</div>
<div class="d-flex gap-4">
<button type="reset" class="btn btn-outline-secondary w-100">Сбросить</button>
<button type="submit" class="btn btn-success w-100" id="submit_order_button">Оформить</button>
</div>
</fieldset>
</form>
</section>
</main>
<footer class="container-fluid pt-4 mb-3">
<p class="text-center text-sm-start">© 2025 MOSCOW POLYTECH STORE</p>
</footer>
</body>
</html>