-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
198 lines (198 loc) · 8.27 KB
/
index.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="preload" href="fonts/pt-sans-caption-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="fonts/pt-sans-caption-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<title>Счётчик калорий</title>
</head>
<body class="page">
<main class="main">
<div class="container">
<article class="counter">
<h1 class="counter__heading heading-main">
Счётчик калорий
</h1>
<form class="counter__form form" name="counter" action="#" method="post">
<div class="form__item">
<h2 class="heading">
Пол
</h2>
<ul class="switcher">
<li class="switcher__item">
<input id="gender-male" name="gender" value="male" type="radio" checked required>
<label for="gender-male">
Мужчина
</label>
</li>
<li class="switcher__item">
<input id="gender-female" name="gender" value="female" type="radio" required>
<label for="gender-female">
Женщина
</label>
</li>
</ul>
</div>
<fieldset class="form__item form__parameters" name="parameters">
<legend class="visually-hidden">
Физические параметры
</legend>
<div class="inputs-group">
<div class="input">
<div class="input__heading">
<label class="heading" for="age">
Возраст
</label>
<span class="input__heading-unit">
лет
</span>
</div>
<div class="input__wrapper">
<input type="text" id="age" name="age" placeholder="0" inputmode="decimal" maxlength="3" required>
</div>
</div>
<div class="input">
<div class="input__heading">
<label class="heading" for="height">
Рост
</label>
<span class="input__heading-unit">
см
</span>
</div>
<div class="input__wrapper">
<input type="text" id="height" name="height" placeholder="0" inputmode="decimal" maxlength="3" required>
</div>
</div>
<div class="input">
<div class="input__heading">
<label class="heading" for="weight">
Вес
</label>
<span class="input__heading-unit">
кг
</span>
</div>
<div class="input__wrapper">
<input type="text" id="weight" name="weight" placeholder="0" inputmode="decimal" maxlength="3" required>
</div>
</div>
</div>
</fieldset>
<fieldset class="form__item">
<legend class="heading">
Физическая активность
</legend>
<ul class="radios-group">
<li class="radio">
<div class="radio__wrapper">
<input id="activity-minimal" name="activity" value="min" type="radio" checked required>
<label for="activity-minimal">
Минимальная
</label>
</div>
<p class="radio__description">
Сидячая работа и нет физических нагрузок
</p>
</li>
<li class="radio">
<div class="radio__wrapper">
<input id="activity-low" name="activity" value="low" type="radio" required>
<label for="activity-low">
Низкая
</label>
</div>
<p class="radio__description">
Редкие, нерегулярные тренировки, активность в быту
</p>
</li>
<li class="radio">
<div class="radio__wrapper">
<input id="activity-medium" name="activity" value="medium" type="radio" required>
<label for="activity-medium">
Средняя
</label>
</div>
<p class="radio__description">
Тренировки 3-5 раз в неделю
</p>
</li>
<li class="radio">
<div class="radio__wrapper">
<input id="activity-high" name="activity" value="high" type="radio" required>
<label for="activity-high">
Высокая
</label>
</div>
<p class="radio__description">
Тренировки 6-7 раз в неделю
</p>
</li>
<li class="radio">
<div class="radio__wrapper">
<input id="activity-maximal" name="activity" value="max" type="radio" required>
<label for="activity-maximal">
Очень высокая
</label>
</div>
<p class="radio__description">
Больше 6 тренировок в неделю и физическая работа
</p>
</li>
</ul>
</fieldset>
<div class="form__submit">
<button class="form__submit-button button" name="submit" type="submit" disabled>
Рассчитать
</button>
<button class="form__reset-button" name="reset" type="reset" disabled>
<svg width="24" height="24" viewbox="0 0 24 24" fill="#FD3636" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4143 12.0002L18.7072 6.70725C19.0982 6.31625 19.0982 5.68425 18.7072 5.29325C18.3162 4.90225 17.6842 4.90225 17.2933 5.29325L12.0002 10.5862L6.70725 5.29325C6.31625 4.90225 5.68425 4.90225 5.29325 5.29325C4.90225 5.68425 4.90225 6.31625 5.29325 6.70725L10.5862 12.0002L5.29325 17.2933C4.90225 17.6842 4.90225 18.3162 5.29325 18.7072C5.48825 18.9022 5.74425 19.0002 6.00025 19.0002C6.25625 19.0002 6.51225 18.9022 6.70725 18.7072L12.0002 13.4143L17.2933 18.7072C17.4882 18.9022 17.7443 19.0002 18.0002 19.0002C18.2562 19.0002 18.5122 18.9022 18.7072 18.7072C19.0982 18.3162 19.0982 17.6842 18.7072 17.2933L13.4143 12.0002Z"/>
</svg>
<span>
Очистить поля и расчёт
</span>
</button>
</div>
</form>
<section class="counter__result counter__result--hidden">
<h2 class="heading">
Ваша норма калорий
</h2>
<ul class="counter__result-list">
<li class="counter__result-item">
<h3>
<span id="calories-norm">3 800</span> ккал
</h3>
<p>
поддержание веса
</p>
</li>
<li class="counter__result-item">
<h3>
<span id="calories-minimal">3 300</span> ккал
</h3>
<p>
снижение веса
</p>
</li>
<li class="counter__result-item">
<h3>
<span id="calories-maximal">4 000</span> ккал
</h3>
<p>
набор веса
</p>
</li>
</ul>
</section>
</article>
</div>
</main>
<script type="module" src="js/script.js"></script>
</body>
</html>