-
Notifications
You must be signed in to change notification settings - Fork 1
/
ui_modals.html
269 lines (268 loc) · 19.5 KB
/
ui_modals.html
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html>
<html lang="ru" itemscope itemtype="http://schema.org/WebPage">
<head itemscope itemtype="http://schema.org/WPHeader">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title itemprop="headline">Модальные окна</title>
<meta name="keywords" content="" itemprop="keywords">
<meta name="description" content="" itemprop="description">
<link href="css/main.min.css" rel="stylesheet"></head>
<body>
<div class="header d-none"></div>
<div class="py-4 px-5">
<div class="h2 font-weight-bold mb-4">Модальные окна:</div>
<ol class="mb-5 px-3">
<li class="mb-3" style="list-style:decimal;"><a class="text-underline" href="#" data-toggle="modal" data-target="#personal-vin-success">Ваш запрос на подбор по VIN успешно отправлен</a></li>
<li class="mb-3" style="list-style:decimal;"><a class="text-underline" href="#" data-toggle="modal" data-target="#reg">Регистрация</a></li>
<li class="mb-3" style="list-style:decimal;"><a class="text-underline" href="#" data-toggle="modal" data-target="#auth">Авторизация</a></li>
<li class="mb-3" style="list-style:decimal;"><a class="text-underline" href="#" data-toggle="modal" data-target="#pwd">Восстановление пароля</a></li>
<li class="mb-3" style="list-style:decimal;"><a class="text-underline" href="#" data-toggle="modal" data-target="#order-success">Заказ успешно оформлен</a></li>
<li class="mb-3" style="list-style:decimal;"><a class="text-underline" href="#" data-toggle="modal" data-target="#booking-success">Запись на шиномонтаж успешно оформлена</a></li>
</ol>
</div>
<div class="modal fade" id="personal-vin-success" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog_lg">
<div class="modal-content border-0 box-shadow overflow-hidden p-md-5 p-4">
<svg class="modal__bg">
<use xlink:href="img/icons/icons.svg#icon-settings"></use>
</svg>
<div class="modal-header d-flex align-items-center justify-content-between border-0 zi-2 p-0 mb-4">
<div class="h3 font-weight-bold color-theme-blue mr-3">Ваш запрос на подбор по VIN успешно отправлен</div>
<button class="close h2 button-unstyled color-theme-blue py-0" data-dismiss="modal"><span class="ds-icon-close pointer-events-none"></span>
</button>
</div>
<div class="modal-body zi-2 p-0 mb-4">
<div class="h4 mb-3">Ваша заявка №49409 от 07.06.2021 (16:37:23) успешно оформлена и будет обработана в ближайшее время.</div>
<div class="h4 mb-3">Результаты подбора можно будет посмотреть в <a class="color-theme-blue" href="#">личном кабинете.</a>Так же, Вы можете получать информацию в удобных для вас месенджерах, сообщив нам номер своей заявки.</div>
</div>
<div class="row zi-2">
<div class="contacts d-md-flex flex-wrap align-items-center col-xl-10 mb-xl-0 mb-3"><a class="contacts__item h5 text-nowrap mr-0 mr-md-4 mb-2 mb-xl-0" href="#"><span class="ds-icon-tg-filled contacts__icon h3 color-theme-blue mr-2 pointer-events-none"></span><span class="contacts__item-title">Продолжить в Telegram</span></a><a class="contacts__item h5 text-nowrap mb-2 mb-xl-0" href="#"><span class="ds-icon-wapp-filled contacts__icon h3 color-theme-blue mr-2 pointer-events-none"></span><span class="contacts__item-title">Продолжить в WhatsApp</span></a></div>
<div class="col-xl-2 d-flex justify-content-xl-end">
<button class="button text-uppercse px-4" type="button" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="order-success" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog_lg">
<div class="modal-content border-0 box-shadow py-3">
<svg class="modal__bg modal__bg_checked">
<use xlink:href="img/icons/icons.svg#icon-checked-double"></use>
</svg>
<div class="modal-header d-flex align-items-center justify-content-between pt-0 px-4 pb-3 mb-4">
<div class="h3 font-weight-bold color-theme-blue mr-3">Заказ успешно оформлен</div>
<button class="close h2 button-unstyled color-theme-blue py-0" data-dismiss="modal"><span class="ds-icon-close pointer-events-none"></span>
</button>
</div>
<div class="modal-body border-bottom pt-0 px-4 pb-3 mb-3 zi-2">
<div class="h5 mb-4">Ваш заказ успешно оформлен и будет обработан в ближайшее время. С вами свяжется менеджер для его подтверждения.</div>
<div class="h5 mb-4">Вы можете следить за выполнением своего заказа в <a class="color-theme-blue" href="#">личном кабинете. </a>Либо Вы можете получать информацию удобных для вас месенджерах, сообщив нам номер своего заказа.</div>
<div class="desclist">
<div class="d-flex align-items-center mb-1">
<div class="desclist__title h6 text-oneline px-0 col-xl-2 col-sm-3">Номер заказа:</div>
<div class="h5 col-xl-10 col-sm-9">49409</div>
</div>
<div class="d-flex align-items-center mb-1">
<div class="desclist__title h6 text-oneline px-0 col-xl-2 col-sm-3">Дата:</div>
<div class="h5 col-xl-10 col-sm-9">07.06.202</div>
</div>
</div>
</div>
<div class="px-4">
<div class="row align-items-center zi-2">
<div class="contacts d-md-flex flex-wrap align-items-center col-xl-10 mb-xl-0 mb-3">
<div class="h5 color-theme-blue col-12 px-0 mb-2">Добравляйтесь и получайте напоминание там, где это удобно:</div><a class="contacts__item h5 text-nowrap mr-0 mr-md-4 mb-2 mb-xl-0" href="#"><span class="ds-icon-tg-filled contacts__icon h3 color-theme-blue mr-2 pointer-events-none"></span><span class="contacts__item-title">Следить в Telegram</span></a><a class="contacts__item h5 text-nowrap mb-2 mb-xl-0" href="#"><span class="ds-icon-wapp-filled contacts__icon h3 color-theme-blue mr-2 pointer-events-none"></span><span class="contacts__item-title">Следить в WhatsApp</span></a>
</div>
<div class="col-xl-2 d-flex justify-content-xl-end">
<button class="button text-uppercse px-4" type="button" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="booking-success" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog_lg">
<div class="modal-content border-0 box-shadow py-3">
<svg class="modal__bg modal__bg_checked">
<use xlink:href="img/icons/icons.svg#icon-checked-double"></use>
</svg>
<div class="modal-header d-flex align-items-center justify-content-between border-0 py-0 px-4 mb-4">
<div class="h3 font-weight-bold color-theme-blue mr-3">Запись на шиномонтаж успешно оформлена. Ждем вас в назначенное время.</div>
<button class="close h2 button-unstyled color-theme-blue py-0" data-dismiss="modal"><span class="ds-icon-close pointer-events-none"></span>
</button>
</div>
<div class="modal-body border-bottom pt-0 px-4 pb-3 mb-3 zi-2">
<div class="desclist">
<div class="d-flex align-items-center mb-1">
<div class="desclist__title h6 text-oneline px-0 col-xl-2 col-sm-3">Номер записи:</div>
<div class="h3 font-weight-bold col-xl-10 col-sm-9">49409</div>
</div>
<div class="d-flex align-items-center mb-1">
<div class="desclist__title h6 text-oneline px-0 col-xl-2 col-sm-3">Адрес:</div>
<div class="h5 col-xl-10 col-sm-9">ул. Доватора, 11</div>
</div>
<div class="d-flex align-items-center mb-1">
<div class="desclist__title h6 text-oneline px-0 col-xl-2 col-sm-3">Дата:</div>
<div class="h5 col-xl-10 col-sm-9">10 января 2021 г.</div>
</div>
<div class="d-flex align-items-center mb-1">
<div class="desclist__title h6 text-oneline px-0 col-xl-2 col-sm-3">Время:</div>
<div class="h5 col-xl-10 col-sm-9">11 : 00</div>
</div>
</div>
</div>
<div class="px-4">
<div class="row align-items-center zi-2">
<div class="contacts d-md-flex flex-wrap align-items-center col-xl-10 mb-xl-0 mb-3">
<div class="h5 color-theme-blue col-12 px-0 mb-2">Добравляйтесь и получайте напоминание там, где это удобно:</div><a class="contacts__item h5 text-nowrap mr-0 mr-md-4 mb-2 mb-xl-0" href="#"><span class="ds-icon-tg-filled contacts__icon h3 color-theme-blue mr-2 pointer-events-none"></span><span class="contacts__item-title">Следить в Telegram</span></a><a class="contacts__item h5 text-nowrap mb-2 mb-xl-0" href="#"><span class="ds-icon-wapp-filled contacts__icon h3 color-theme-blue mr-2 pointer-events-none"></span><span class="contacts__item-title">Следить в WhatsApp</span></a>
</div>
<div class="col-xl-2 d-flex justify-content-xl-end">
<button class="button text-uppercse px-4" type="button" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reg" tabindex="-1" aria-hidden="true">
<form class="modal-dialog" id="form-reg" action="#">
<div class="modal-content border-0 box-shadow py-3">
<div class="modal-header d-flex align-items-center justify-content-between pt-0 px-4 pb-3 mb-4">
<div class="d-flex align-items-center"><span class="ds-icon-user color-theme-blue h3 mr-2 pointer-events-none"></span>
<div class="h3 font-weight-bold color-theme-blue mr-3">Регистрация</div>
</div>
<button class="close h2 button-unstyled color-theme-blue py-0" data-dismiss="modal"><span class="ds-icon-close pointer-events-none"></span>
</button>
</div>
<div class="modal-body border-bottom pt-0 px-4 pb-3 mb-3">
<div class="form">
<div class="form__item mb-4">
<input class="form__field error" id="reg__username" type="text" value="" name="reg__username">
<label class="error" id="reg__username-error" for="reg__username">Поле обязательно для заполнения</label>
<div class="form__label form__label_title">Ваше имя *</div>
</div>
<div class="form__item mb-4">
<input class="form__field input-phone error" id="reg__phone" type="text" value="" name="reg__phone">
<label class="error" id="reg__phone-error" for="reg__phone">Поле обязательно для заполнения</label>
<div class="form__label form__label_title">Номер телефона *</div>
</div>
<div class="form__item mb-4">
<input class="form__field error" id="reg__email" type="text" value="" name="reg__email">
<label class="error" id="reg__email-error" for="reg__email">Ведите e-mail</label>
<div class="form__label form__label_title">E-mail *</div>
</div>
<div class="form__item">
<input class="form__toggler form__toggler_checkbox" id="reg__confidential" type="checkbox" value="" name="reg__confidential">
<label class="error" id="reg__confidential-error" for="reg__confidential">Необходимо принять условия политики конфидециальности</label>
<label class="form__label h5" for="reg__confidential"><span class="ds-icon-checked form__label-icon pointer-events-none"></span><span class="form__label-title">Я принимаю <a class="text-underline" href="#">политику конфиденциальности </a>*</span>
</label>
</div>
</div>
</div>
<div class="px-4">
<div class="row">
<div class="col-xl-5 text-xl-left text-center mb-xl-0 mb-3">
<div class="h6">*-поля обязательные для заполнения</div>
</div>
<div class="col-xl-7 text-xl-right text-center">
<button class="button text-uppercase px-3" type="submit">Зарегистрироваться</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal fade" id="auth-phone" tabindex="-1" aria-hidden="true">
<form class="modal-dialog" action="#">
<div class="modal-content border-0 box-shadow py-3">
<div class="modal-header d-flex align-items-center justify-content-between pt-0 px-4 pb-3 mb-4">
<div class="d-flex align-items-center"><span class="ds-icon-user color-theme-blue h3 mr-2 pointer-events-none"></span>
<div class="h3 font-weight-bold color-theme-blue mr-3">Войдите или зарегистрируйтесь</div>
</div>
<button class="close h2 button-unstyled color-theme-blue py-0" data-dismiss="modal"><span class="ds-icon-close pointer-events-none"></span>
</button>
</div>
<div class="modal-body border-bottom pt-0 px-4 pb-2 mb-3">
<div class="form mb-4">
<div class="form__item mb-4">
<input class="form__field input-phone" type="text" value="">
<div class="form__label form__label_title">Номер телефона *</div>
</div>
</div>
<div class="d-flex flex-wrap align-items-center justify-content-between"><a class="h5" href="#" data-dismiss="modal" data-toggle="modal" data-target="#auth-email">Войти по почте</a></div>
</div>
<div class="text-center px-4">
<button class="button text-uppercase px-5" type="submit">Получить код</button>
</div>
</div>
</form>
</div>
<div class="modal fade" id="auth-email" tabindex="-1" aria-hidden="true">
<form class="modal-dialog" action="#">
<div class="modal-content border-0 box-shadow py-3">
<div class="modal-header d-flex align-items-center justify-content-between pt-0 px-4 pb-3 mb-4">
<div class="d-flex align-items-center"><span class="ds-icon-user color-theme-blue h3 mr-2 pointer-events-none"></span>
<div class="h3 font-weight-bold color-theme-blue mr-3">Войдите по почте</div>
</div>
<button class="close h2 button-unstyled color-theme-blue py-0" data-dismiss="modal"><span class="ds-icon-close pointer-events-none"></span>
</button>
</div>
<div class="modal-body border-bottom pt-0 px-4 pb-2 mb-3">
<div class="form mb-4">
<div class="form__item mb-4">
<input class="form__field input-email" type="text" value="">
<div class="form__label form__label_title">Только для зарегистрированных пользователей *</div>
</div>
</div>
<div class="d-flex flex-wrap align-items-center justify-content-between"><a class="h5" href="#" data-dismiss="modal" data-toggle="modal" data-target="#auth-phone">Войти или зарегистрироваться</a></div>
</div>
<div class="text-center px-4">
<button class="button text-uppercase px-5" type="submit">Получить код</button>
</div>
</div>
</form>
</div>
<div class="modal fade" id="pwd" tabindex="-1" aria-hidden="true">
<form class="modal-dialog" action="#">
<div class="modal-content border-0 box-shadow py-3">
<div class="modal-header d-flex align-items-center justify-content-between pt-0 px-4 pb-3 mb-4">
<div class="d-flex align-items-center"><span class="ds-icon-user color-theme-blue h3 mr-2 pointer-events-none"></span>
<div class="h3 font-weight-bold color-theme-blue mr-3">Забыли пароль?</div>
</div>
<button class="close h2 button-unstyled color-theme-blue py-0" data-dismiss="modal"><span class="ds-icon-close pointer-events-none"></span>
</button>
</div>
<div class="modal-body border-bottom pt-0 px-4 pb-2 mb-3">
<div class="h5 text-center mb-3">Укажите ваш телефон, и мы отправим <br>вам новый пароль</div>
<div class="form mb-4">
<div class="form__item">
<input class="form__field input-phone" type="text" value="">
<div class="form__label form__label_title">+7 (_ _ _) _ _ _-_ _-_ _</div>
</div>
</div>
<div class="d-flex flex-wrap align-items-center justify-content-end"><a class="h5" href="#" data-dismiss="modal" data-toggle="modal" data-target="#reg">Регистрация</a></div>
</div>
<div class="text-center px-4">
<button class="button text-uppercase px-5" type="submit">Отправить</button>
</div>
</div>
</form>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/swiper@5.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formstone/1.4.20/js/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formstone/1.4.20/js/dropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formstone/1.4.20/js/touch.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js"></script>
<script src="js/main.bundle.js"></script>
<script src="js/validate.bundle.js"></script>
<script src="js/ion.bundle.js"></script>
<script src="js/search.bundle.js"></script></body>
</html>