-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathform.html
222 lines (213 loc) · 11 KB
/
form.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Барбершоп «Бородинский»</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="page-header">
<h1 class="visually-hidden">Барбершоп «Бородинский» - истинно мужская классика</h1>
<div class="page-header__logo page-header__logo--inner-page">
<picture>
<source media="(min-width: 1200px)" srcset="img/logotype-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logotype-tablet.svg">
<img src="img/logotype-mobile.svg" width="370" height="153" alt="Барбершоп «Бородинский»">
</picture>
</div>
<nav class="main-nav main-nav--closed main-nav--nojs">
<button class="main-nav__toggle" type="button">Открыть меню</button>
<div class="main-nav__wrapper">
<ul class="main-nav__items">
<li class="main-nav__item"><a href="index.html">Главная</a></li>
<li class="main-nav__item"><a href="photo.html">Наши работы</a></li>
<li class="main-nav__item main-nav__item--active"><a>Записаться</a></li>
<li class="main-nav__item"><a href="#">Контакты</a></li>
<li class="main-nav__item"><a href="#">HTML Academy</a></li>
</ul>
<ul class="main-nav__user-items">
<li class="main-nav__user-item"><a class="main-nav__user-login" href="#" title="Войти">Вход</a></li>
</ul>
</div>
</nav>
</header>
<section class="form">
<div class="form__wrapper">
<h2 class="form__title">Запись на стрижку</h2>
<a class="btn form__return form__return--show" href="index.html">На главную</a>
<form class="form__inner" action="#" method="POST">
<div class="form__field form__field--fullname">
<h3 class="form__field-title">Ваше ФИО:</h3>
<label for="surname"><span class="visually-hidden">Фамилия</span><input type="text" id="name" name="name" placeholder="Фамилия"></label>
<label for="name"><span class="visually-hidden">Имя</span><input type="text" id="surname" name="surname" placeholder="Имя"></label>
<label for="patronymic"><span class="visually-hidden">Отчество</span><input type="text" name="patronymic" placeholder="Отчество"></label>
</div>
<div class="form__field form__field--contacts">
<h3 class="form__field-title">Ваши контакты:</h3>
<label for="phone"><input type="text" name="phone" placeholder="Контактный телефон"></label>
<label for="email"><input type="email" name="email" placeholder="Контактный e-mail"></label>
</div>
<div class="form__field form__field--comment">
<h3 class="form__field-title">Оставьте комментарий для мастера:</h3>
<textarea name="comment" placeholder="Доп. информация для мастера"></textarea>
</div>
<div class="form__field form__field--beard">
<h3 class="form__field-title">Выберите модель бороды:</h3>
<ul>
<li>
<input type="radio" id="beard-1" name="beard" value="beard-1" checked>
<label for="beard-1">адмирал</label>
<img src="img/beard-1.svg" alt="Тип бороды">
</li>
<li>
<input type="radio" id="beard-2" name="beard" value="beard-2">
<label for="beard-2">лесоруб</label>
<img src="img/beard-2.svg" alt="Тип бороды">
</li>
<li>
<input type="radio" id="beard-3" name="beard" value="beard-3">
<label for="beard-3">полярник</label>
<img src="img/beard-3.svg" alt="Тип бороды">
</li>
<li>
<input type="radio" id="beard-4" name="beard" value="beard-4">
<label for="beard-4">боярин</label>
<img src="img/beard-4.svg" alt="Тип бороды">
</li>
<li>
<input type="radio" id="beard-5" name="beard" value="beard-5">
<label for="beard-5">мудрец</label>
<img src="img/beard-5.svg" alt="Тип бороды">
</li>
</ul>
</div>
<div class="form__field form__field--offers">
<h3 class="form__field-title">Дополнительные услуги:</h3>
<ul>
<li>
<input type="checkbox" id="offer-1" name="offer-1" checked>
<label for="offer-1">Подкрасить бороду</label>
</li>
<li>
<input type="checkbox" id="offer-2" name="offer-2" checked>
<label for="offer-2">Накрутить усы</label>
</li>
<li>
<input type="checkbox" id="offer-3" name="offer-3">
<label for="offer-3">Причесать бороду</label>
</li>
<li>
<input type="checkbox" id="offer-4" name="offer-4">
<label for="offer-4">Подровнять виски</label>
</li>
<li>
<input type="checkbox" id="offer-5" name="offer-5">
<label for="offer-5">Убрать седину</label>
</li>
<li>
<input type="checkbox" id="offer-6" name="offer-6">
<label for="offer-6">Отполировать лысину</label>
</li>
</ul>
</div>
<button class="form__apply" type="button">Отправить заявку</button>
</form>
</section>
<footer class="page-footer">
<div class="page-footer__wrapper">
<p class="page-footer__contacts">
<b>Барбершоп Бородинский</b><br>
г. Санкт-Петербург, ул. Большая Конюшенная 19/8<br>
<a class="btn" href="tel:+78125556666"><span class="page-footer__phone-show">Тел.:</span> +7 (812) 555-66-66</a>
</p>
<p class="page-footer__social">
<span class="page-footer__social-title">Давайте дружить!</span>
<span class="social-links">
<a class="social-link social-link--vk" href="https://vk.com/htmlacademy">Мы в Вконтакте</a>
<a class="social-link social-link--fb" href="https://www.facebook.com/htmlacademy">Мы в Фейсбуке</a>
<a class="social-link social-link--ig" href="https://instagram.com/htmlacademy">Мы в Инстаграме</a>
</span>
</p>
<p class="page-footer__copyright">
Разработано:
<a class="btn" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a>
</p>
</div>
</footer>
<section class="modal-login">
<h2 class="modal-login__title">Личный кабинет</h2>
<p>Введите свой логин и пароль, чтобы войти</p>
<form class="modal-login__form" action="#" method="POST">
<label for="login">
<input type="text" id="login" placeholder="Логин">
</label>
<label for="password">
<input type="text" id="password" placeholder="Пароль">
</label>
<input type="checkbox" name="remember" id="remember">
<label for="remember"><span></span>Запомнить меня</label>
<a href="#">Я забыл пароль!</a>
<button class="modal-login__enter" type="submit">Войти</button>
<button class="modal-login__close btn" type="button">Закрыть</button>
</form>
</div>
</section>
<section class="modal-failure">
<h2 class="modal-failure__title">Неудача</h2>
<p>Что-то пошло не так. Проверьте выделенные красным поля формы</p>
<button class="modal-failure__close btn">Ок</button>
</section>
<section class="modal-success">
<h2 class="modal-success__title">Это успех!</h2>
<p>Ваша заявка отправлена.<br>Ожидайте, мы свяжемся с вами как только будет минутка.</p>
<button class="modal-success__close btn">Закрыть окно</button>
</section>
<script>
var navMain = document.querySelector('.main-nav');
var navToggle = document.querySelector('.main-nav__toggle');
var link = document.querySelector('.main-nav__user-login');
var popup = document.querySelector('.modal-login');
var application = document.querySelector('.form__apply');
var modalSuccess = document.querySelector('.modal-success');
var modalFailure = document.querySelector('.modal-failure');
var modalLoginClose = document.querySelector('.modal-login__close');
var modalSuccessClose = document.querySelector('.modal-success__close');
var modalFailureClose = document.querySelector('.modal-failure__close');
navMain.classList.remove('main-nav--nojs');
navToggle.addEventListener('click', function() {
if (navMain.classList.contains('main-nav--closed')) {
navMain.classList.remove('main-nav--closed');
navMain.classList.add('main-nav--opened');
} else {
navMain.classList.add('main-nav--closed');
navMain.classList.remove('main-nav--opened');
}
});
link.addEventListener('click', function(event) {
event.preventDefault();
popup.classList.add('modal-login--show');
});
modalLoginClose.addEventListener('click', function(event) {
event.preventDefault();
popup.classList.remove('modal-login--show');
});
// application.addEventListener('click', function(event) {
// event.preventDefault();
// modalFailure.classList.add('modal-failure--show');
// });
// modalFailureClose.addEventListener('click', function(event) {
// event.preventDefault();
// modalFailure.classList.remove('modal-failure--show');
// });
application.addEventListener('click', function(event) {
event.preventDefault();
modalSuccess.classList.add('modal-success--show');
});
modalSuccessClose.addEventListener('click', function(event) {
event.preventDefault();
modalSuccess.classList.remove('modal-success--show');
});
</script>
</body>