Hugging Face's logo

Spaces:
jahanbaev
/
jaha
Running

App Files Community
jahanbaev commited on
Commit
cdddf83
·
verified ·
1 Parent(s): 2a4d975

not working correctly required inouts fix and check all inputs and buttons and fix that - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +799 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Jaha
3
- emoji: 🐨
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: jaha
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,799 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
6
+ <title>Heealty - Регистрация</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4C6EF5',
15
+ secondary: '#8CE99A',
16
+ accent: '#FF922B',
17
+ dark: '#1E293B',
18
+ light: '#F8FAFC'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
26
+
27
+ body {
28
+ font-family: 'Roboto', sans-serif;
29
+ background: #f8fafc;
30
+ min-height: 100vh;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ padding: 16px;
35
+ }
36
+
37
+ .step-hidden {
38
+ display: none;
39
+ }
40
+
41
+ .step-active {
42
+ display: block;
43
+ }
44
+
45
+ .progress-dot {
46
+ transition: all 0.3s ease;
47
+ }
48
+
49
+ .file-upload {
50
+ border: 2px dashed #cbd5e1;
51
+ border-radius: 12px;
52
+ padding: 24px;
53
+ text-align: center;
54
+ cursor: pointer;
55
+ transition: all 0.3s ease;
56
+ }
57
+
58
+ .file-upload:hover {
59
+ border-color: #4C6EF5;
60
+ background-color: #f0f7ff;
61
+ }
62
+
63
+ .option-card {
64
+ border: 2px solid #e2e8f0;
65
+ border-radius: 12px;
66
+ padding: 16px;
67
+ transition: all 0.2s ease;
68
+ cursor: pointer;
69
+ }
70
+
71
+ .option-card:hover {
72
+ border-color: #4C6EF5;
73
+ background-color: #f0f7ff;
74
+ }
75
+
76
+ .option-card.selected {
77
+ border-color: #4C6EF5;
78
+ background-color: #e7f0ff;
79
+ box-shadow: 0 4px 6px -1px rgba(76, 110, 245, 0.1), 0 2px 4px -1px rgba(76, 110, 245, 0.06);
80
+ }
81
+
82
+ .border-red-500 {
83
+ border-color: #ef4444 !important;
84
+ }
85
+
86
+ .error-border {
87
+ border: 2px solid #ef4444 !important;
88
+ padding: 4px;
89
+ border-radius: 12px;
90
+ }
91
+
92
+ input[type="date"]::-webkit-calendar-picker-indicator {
93
+ filter: invert(0.5);
94
+ }
95
+
96
+ .slide-in {
97
+ animation: slideIn 0.3s forwards;
98
+ }
99
+
100
+ @keyframes slideIn {
101
+ from {
102
+ transform: translateX(30px);
103
+ opacity: 0;
104
+ }
105
+ to {
106
+ transform: translateX(0);
107
+ opacity: 1;
108
+ }
109
+ }
110
+
111
+ .fade-in {
112
+ animation: fadeIn 0.3s forwards;
113
+ }
114
+
115
+ @keyframes fadeIn {
116
+ from {
117
+ opacity: 0;
118
+ }
119
+ to {
120
+ opacity: 1;
121
+ }
122
+ }
123
+ </style>
124
+ </head>
125
+ <body class="bg-gray-50">
126
+ <div class="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden">
127
+ <!-- Шапка с прогресс-баром -->
128
+ <div class="bg-primary p-6">
129
+ <div class="flex justify-between items-center mb-6">
130
+ <button id="backButton" class="text-white bg-white/20 rounded-full p-2 w-10 h-10 flex items-center justify-center">
131
+ <i class="fas fa-arrow-left"></i>
132
+ </button>
133
+ <h1 class="text-xl font-bold text-white">Создание профиля</h1>
134
+ <div class="w-10"></div>
135
+ </div>
136
+
137
+ <div class="flex justify-between mb-3">
138
+ <div class="text-sm text-white/80">Шаг <span id="currentStep">1</span> из 5</div>
139
+ <div class="text-sm text-white/80"><span id="progressPercent">0</span>%</div>
140
+ </div>
141
+
142
+ <div class="w-full bg-white/20 h-2 rounded-full overflow-hidden">
143
+ <div id="progressBar" class="h-full bg-white rounded-full transition-all duration-300" style="width: 20%"></div>
144
+ </div>
145
+
146
+ <div class="flex justify-between mt-4">
147
+ <div class="progress-dot w-3 h-3 rounded-full bg-white"></div>
148
+ <div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div>
149
+ <div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div>
150
+ <div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div>
151
+ <div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Контейнер для шагов -->
156
+ <div class="relative overflow-hidden" style="min-height: 500px;">
157
+ <!-- Шаг 1: Пол и дата рождения -->
158
+ <div id="step1" class="step-active step-transition p-6">
159
+ <h2 class="text-2xl font-bold text-dark mb-6 slide-in">Основная информация</h2>
160
+
161
+ <div class="mb-6 fade-in">
162
+ <label class="block text-gray-700 mb-2 font-medium">Ваш пол <span class="text-red-500">*</span></label>
163
+ <div class="grid grid-cols-2 gap-4">
164
+ <div class="option-card required" data-value="Мужской">
165
+ <div class="text-center">
166
+ <i class="fas fa-mars text-3xl text-blue-500 mb-2"></i>
167
+ <div class="font-medium">Мужской</div>
168
+ </div>
169
+ </div>
170
+ <div class="option-card" data-value="Женский">
171
+ <div class="text-center">
172
+ <i class="fas fa-venus text-3xl text-pink-500 mb-2"></i>
173
+ <div class="font-medium">Женский</div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="mb-6 fade-in">
180
+ <label class="block text-gray-700 mb-2 font-medium">Дата рождения <span class="text-red-500">*</span></label>
181
+ <input type="date" required class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent">
182
+ </div>
183
+
184
+ <div id="step1Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div>
185
+ <button class="next-step w-full bg-primary hover:bg-primary/90 text-white font-bold py-4 px-4 rounded-xl transition duration-200 transform hover:scale-[1.02]">
186
+ Продолжить
187
+ </button>
188
+ </div>
189
+
190
+ <!-- Шаг 2: Физические параметры -->
191
+ <div id="step2" class="step-hidden step-transition p-6">
192
+ <h2 class="text-2xl font-bold text-dark mb-6">Физические параметры</h2>
193
+ <div id="step2Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div>
194
+
195
+ <div class="mb-6">
196
+ <label class="block text-gray-700 mb-2 font-medium">Рост (см) <span class="text-red-500">*</span></label>
197
+ <input type="number" required placeholder="170" min="100" max="250" class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent">
198
+ </div>
199
+
200
+ <div class="mb-6">
201
+ <label class="block text-gray-700 mb-2 font-medium">Вес (кг) <span class="text-red-500">*</span></label>
202
+ <input type="number" required placeholder="65" min="30" max="200" class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent">
203
+ </div>
204
+
205
+ <div class="mb-6">
206
+ <label class="block text-gray-700 mb-2 font-medium">Тип телосложения <span class="text-red-500">*</span></label>
207
+ <div class="grid grid-cols-2 gap-3">
208
+ <div class="option-card required" data-value="Худощавое">
209
+ <div class="text-center">
210
+ <i class="fas fa-user text-2xl text-gray-600 mb-1"></i>
211
+ <div class="text-sm font-medium">Худощавое</div>
212
+ </div>
213
+ </div>
214
+ <div class="option-card" data-value="Обычное">
215
+ <div class="text-center">
216
+ <i class="fas fa-user text-2xl text-gray-600 mb-1"></i>
217
+ <div class="text-sm font-medium">Обычное</div>
218
+ </div>
219
+ </div>
220
+ <div class="option-card" data-value="Мускулистое">
221
+ <div class="text-center">
222
+ <i class="fas fa-user text-2xl text-gray-600 mb-1"></i>
223
+ <div class="text-sm font-medium">Мускулистое</div>
224
+ </div>
225
+ </div>
226
+ <div class="option-card" data-value="Полное">
227
+ <div class="text-center">
228
+ <i class="fas fa-user text-2xl text-gray-600 mb-1"></i>
229
+ <div class="text-sm font-medium">Полное</div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="mb-6">
236
+ <label class="block text-gray-700 mb-2 font-medium">Желаемый внешний вид <span class="text-red-500">*</span></label>
237
+ <div class="grid grid-cols-2 gap-3">
238
+ <div class="option-card required" data-value="Похудеть">
239
+ <div class="text-center">
240
+ <i class="fas fa-weight text-2xl text-red-500 mb-1"></i>
241
+ <div class="text-sm font-medium">Похудеть</div>
242
+ </div>
243
+ </div>
244
+ <div class="option-card" data-value="Подтянутое тело">
245
+ <div class="text-center">
246
+ <i class="fas fa-running text-2xl text-green-500 mb-1"></i>
247
+ <div class="text-sm font-medium">Подтянутое тело</div>
248
+ </div>
249
+ </div>
250
+ <div class="option-card" data-value="Набрать массу">
251
+ <div class="text-center">
252
+ <i class="fas fa-dumbbell text-2xl text-blue-500 mb-1"></i>
253
+ <div class="text-sm font-medium">Набрать массу</div>
254
+ </div>
255
+ </div>
256
+ <div class="option-card" data-value="Поддержать форму">
257
+ <div class="text-center">
258
+ <i class="fas fa-heart text-2xl text-purple-500 mb-1"></i>
259
+ <div class="text-sm font-medium">Поддержать форму</div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <button class="next-step w-full bg-primary hover:bg-primary/90 text-white font-bold py-4 px-4 rounded-xl transition duration-200 transform hover:scale-[1.02]">
266
+ Продолжить
267
+ </button>
268
+ </div>
269
+
270
+ <!-- Шаг 3: Фитнес-цели -->
271
+ <div id="step3" class="step-hidden step-transition p-6">
272
+ <h2 class="text-2xl font-bold text-dark mb-6">Фитнес-цели</h2>
273
+ <div id="step3Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div>
274
+
275
+ <div class="mb-6">
276
+ <label class="block text-gray-700 mb-2 font-medium">Ваша цель <span class="text-red-500">*</span></label>
277
+ <select required class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent">
278
+ <option value="">Выберите цель</option>
279
+ <option value="maintain">Поддержание веса</option>
280
+ <option value="lose_fat">Похудеть</option>
281
+ <option value="lose_fat_preserve_muscle">Похудеть с сохранением мышц</option>
282
+ <option value="gain_weight">Набрать вес</option>
283
+ <option value="gain_muscle">Набрать мышечную массу</option>
284
+ </select>
285
+ </div>
286
+
287
+ <div class="mb-6">
288
+ <label class="block text-gray-700 mb-2 font-medium">Уровень подготовки <span class="text-red-500">*</span></label>
289
+ <div class="grid grid-cols-3 gap-2">
290
+ <div class="option-card required" data-value="Начинающий">
291
+ <div class="text-center">
292
+ <i class="fas fa-seedling text-xl text-green-500 mb-1"></i>
293
+ <div class="text-xs font-medium">Начинающий</div>
294
+ </div>
295
+ </div>
296
+ <div class="option-card" data-value="Средний">
297
+ <div class="text-center">
298
+ <i class="fas fa-mountain text-xl text-yellow-500 mb-1"></i>
299
+ <div class="text-xs font-medium">Средний</div>
300
+ </div>
301
+ </div>
302
+ <div class="option-card" data-value="Продвинутый">
303
+ <div class="text-center">
304
+ <i class="fas fa-fire-alt text-xl text-red-500 mb-1"></i>
305
+ <div class="text-xs font-medium">Продвинутый</div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mb-6">
312
+ <label class="block text-gray-700 mb-2 font-medium">Уровень активности <span class="text-red-500">*</span></label>
313
+ <div class="grid grid-cols-3 gap-2">
314
+ <div class="option-card required" data-value="Низкая">
315
+ <div class="text-center">
316
+ <i class="fas fa-couch text-xl text-gray-500 mb-1"></i>
317
+ <div class="text-xs font-medium">Низкая</div>
318
+ </div>
319
+ </div>
320
+ <div class="option-card" data-value="Средняя">
321
+ <div class="text-center">
322
+ <i class="fas fa-walking text-xl text-blue-500 mb-1"></i>
323
+ <div class="text-xs font-medium">Средняя</div>
324
+ </div>
325
+ </div>
326
+ <div class="option-card" data-value="Высокая">
327
+ <div class="text-center">
328
+ <i class="fas fa-running text-xl text-green-500 mb-1"></i>
329
+ <div class="text-xs font-medium">Высокая</div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="mb-6">
336
+ <label class="block text-gray-700 mb-2 font-medium">Предпочитаемое место тренировок <span class="text-red-500">*</span></label>
337
+ <div class="grid grid-cols-3 gap-2">
338
+ <div class="option-card required" data-value="Зал">
339
+ <div class="text-center">
340
+ <i class="fas fa-dumbbell text-xl text-purple-500 mb-1"></i>
341
+ <div class="text-xs font-medium">Зал</div>
342
+ </div>
343
+ </div>
344
+ <div class="option-card" data-value="Дом">
345
+ <div class="text-center">
346
+ <i class="fas fa-home text-xl text-blue-500 mb-1"></i>
347
+ <div class="text-xs font-medium">Дом</div>
348
+ </div>
349
+ </div>
350
+ <div class="option-card" data-value="Улица">
351
+ <div class="text-center">
352
+ <i class="fas fa-tree text-xl text-green-500 mb-1"></i>
353
+ <div class="text-xs font-medium">Улица</div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="mb-6">
360
+ <label class="block text-gray-700 mb-2 font-medium">Спортивный инвентарь <span class="text-red-500">*</span></label>
361
+ <input type="text" required placeholder="Например: гантели, резинки, штанга" class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent">
362
+ </div>
363
+
364
+
365
+ <div class="flex gap-3">
366
+ <button class="prev-step w-1/3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-4 px-4 rounded-xl transition duration-200">
367
+ Назад
368
+ </button>
369
+ <button class="next-step w-2/3 bg-primary hover:bg-primary/90 text-white font-bold py-4 px-4 rounded-xl transition duration-200 transform hover:scale-[1.02]">
370
+ Продолжить
371
+ </button>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Шаг 4: Здоровье -->
376
+ <div id="step4" class="step-hidden step-transition p-6">
377
+ <h2 class="text-2xl font-bold text-dark mb-6">Состояние здоровья</h2>
378
+ <div id="step4Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div>
379
+
380
+ <div class="mb-6">
381
+ <label class="block text-gray-700 mb-2 font-medium">Хронические заболевания</label>
382
+ <textarea placeholder="Например, гипертония, диабет и т.д." class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent h-24"></textarea>
383
+ </div>
384
+
385
+ <div class="mb-6">
386
+ <label class="block text-gray-700 mb-2 font-medium">Противопоказания</label>
387
+ <textarea placeholder="Противопоказания по нагрузкам, питанию или лекарствам" class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent h-24"></textarea>
388
+ </div>
389
+
390
+ <div class="mb-6">
391
+ <label class="block text-gray-700 mb-2 font-medium">Добавить упражнения?</label>
392
+ <div class="grid grid-cols-2 gap-4">
393
+ <button id="addExercisesYes" class="bg-secondary hover:bg-secondary/90 text-dark font-bold py-3 px-4 rounded-xl transition duration-200">
394
+ <i class="fas fa-check mr-2"></i> Да
395
+ </button>
396
+ <button id="addExercisesNo" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-3 px-4 rounded-xl transition duration-200">
397
+ <i class="fas fa-times mr-2"></i> Нет
398
+ </button>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="flex gap-3">
403
+ <button class="prev-step w-1/3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-4 px-4 rounded-xl transition duration-200">
404
+ Назад
405
+ </button>
406
+ <button class="next-step w-2/3 bg-primary hover:bg-primary/90 text-white font-bold py-4 px-4 rounded-xl transition duration-200 transform hover:scale-[1.02]">
407
+ Продолжить
408
+ </button>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- Шаг 5: Анализы -->
413
+ <div id="step5" class="step-hidden step-transition p-6">
414
+ <h2 class="text-2xl font-bold text-dark mb-6">Медицинские анализы</h2>
415
+
416
+ <div class="mb-6">
417
+ <p class="text-gray-600 mb-4">Вы можете загрузить результаты медицинских анализов для более персонализированных рекомендаций</p>
418
+
419
+ <div class="file-upload mb-4" id="dropZone">
420
+ <i class="fas fa-cloud-upload-alt text-4xl text-primary mb-3"></i>
421
+ <p class="font-medium text-gray-700">Перетащите файлы сюда</p>
422
+ <p class="text-gray-500 text-sm mt-1">или</p>
423
+ <label class="inline-block mt-2 bg-primary text-white py-2 px-6 rounded-lg cursor-pointer">
424
+ <i class="fas fa-folder-open mr-2"></i>Выбрать файлы
425
+ <input type="file" class="hidden" id="fileInput" multiple>
426
+ </label>
427
+ <p class="text-gray-500 text-xs mt-3">Поддерживаемые форматы: JPG, PNG, PDF (макс. 5 МБ)</p>
428
+ </div>
429
+
430
+ <div id="fileList" class="hidden">
431
+ <h3 class="font-medium text-gray-700 mb-2">Загруженные файлы:</h3>
432
+ <ul id="fileItems" class="space-y-2"></ul>
433
+ </div>
434
+ </div>
435
+
436
+ <div class="flex gap-3">
437
+ <button class="prev-step w-1/3 bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-4 px-4 rounded-xl transition duration-200">
438
+ Назад
439
+ </button>
440
+ <button id="submitForm" class="w-2/3 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-bold py-4 px-4 rounded-xl transition duration-200 transform hover:scale-[1.02]">
441
+ Завершить регистрацию
442
+ </button>
443
+ </div>
444
+ </div>
445
+
446
+ <!-- Шаг 6: Упражнения (дополнительный) -->
447
+ <div id="stepExercises" class="step-hidden step-transition p-6">
448
+ <h2 class="text-2xl font-bold text-dark mb-6">Предпочитаемые упражнения</h2>
449
+
450
+ <div class="mb-6">
451
+ <p class="text-gray-600 mb-4">Выбери��е упражнения, которые вы предпочитаете или хотите включить в свою программу</p>
452
+
453
+ <div class="grid grid-cols-2 gap-3 mb-4">
454
+ <div class="option-card" data-value="Кардио">
455
+ <div class="text-center">
456
+ <i class="fas fa-heartbeat text-2xl text-red-500 mb-1"></i>
457
+ <div class="text-sm font-medium">Кардио</div>
458
+ </div>
459
+ </div>
460
+ <div class="option-card" data-value="Силовые">
461
+ <div class="text-center">
462
+ <i class="fas fa-dumbbell text-2xl text-blue-500 mb-1"></i>
463
+ <div class="text-sm font-medium">Силовые</div>
464
+ </div>
465
+ </div>
466
+ <div class="option-card" data-value="Йога">
467
+ <div class="text-center">
468
+ <i class="fas fa-spa text-2xl text-green-500 mb-1"></i>
469
+ <div class="text-sm font-medium">Йога</div>
470
+ </div>
471
+ </div>
472
+ <div class="option-card" data-value="Плиометрика">
473
+ <div class="text-center">
474
+ <i class="fas fa-fire-alt text-2xl text-orange-500 mb-1"></i>
475
+ <div class="text-sm font-medium">Плиометрика</div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="mb-4">
481
+ <label class="block text-gray-700 mb-2 font-medium">Дополнительные пожелания</label>
482
+ <textarea placeholder="Ваши предпочтения по упражнениям..." class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent h-24"></textarea>
483
+ </div>
484
+ </div>
485
+
486
+ <button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-4 px-4 rounded-xl transition duration-200 transform hover:scale-[1.02]">
487
+ Сохранить и завершить
488
+ </button>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <script>
494
+ document.addEventListener('DOMContentLoaded', function() {
495
+ // Текущий шаг
496
+ let currentStep = 1;
497
+ const totalSteps = 5;
498
+ const exerciseStep = 6;
499
+
500
+ // Элементы управления
501
+ const backButton = document.getElementById('backButton');
502
+ const nextButtons = document.querySelectorAll('.next-step');
503
+ const prevButtons = document.querySelectorAll('.prev-step');
504
+ const submitButton = document.getElementById('submitForm');
505
+ const addExercisesYes = document.getElementById('addExercisesYes');
506
+ const addExercisesNo = document.getElementById('addExercisesNo');
507
+
508
+ // Элементы прогресса
509
+ const progressBar = document.getElementById('progressBar');
510
+ const currentStepEl = document.getElementById('currentStep');
511
+ const progressPercent = document.getElementById('progressPercent');
512
+ const progressDots = document.querySelectorAll('.progress-dot');
513
+
514
+ // Функция обновления прогресса
515
+ function updateProgress() {
516
+ const percent = (currentStep / totalSteps) * 100;
517
+ progressBar.style.width = `${percent}%`;
518
+ progressPercent.textContent = Math.round(percent);
519
+ currentStepEl.textContent = currentStep;
520
+
521
+ // Обновление точек прогресса
522
+ progressDots.forEach((dot, index) => {
523
+ if (index < currentStep) {
524
+ dot.classList.remove('bg-white/20');
525
+ dot.classList.add('bg-white');
526
+ } else {
527
+ dot.classList.remove('bg-white');
528
+ dot.classList.add('bg-white/20');
529
+ }
530
+ });
531
+ }
532
+
533
+ // Функция переключения шагов
534
+ function goToStep(step) {
535
+ document.querySelectorAll('.step-transition').forEach(el => {
536
+ el.classList.remove('step-active');
537
+ el.classList.add('step-hidden');
538
+ });
539
+
540
+ const stepEl = document.getElementById(`step${step}`);
541
+ if (stepEl) {
542
+ stepEl.classList.remove('step-hidden');
543
+ stepEl.classList.add('step-active');
544
+
545
+ // Анимация элементов внутри шага
546
+ const elements = stepEl.querySelectorAll('h2, div, button');
547
+ elements.forEach((el, index) => {
548
+ el.classList.remove('slide-in', 'fade-in');
549
+ setTimeout(() => {
550
+ if (el.tagName === 'H2') {
551
+ el.classList.add('slide-in');
552
+ } else {
553
+ el.classList.add('fade-in');
554
+ }
555
+ }, 50 * index);
556
+ });
557
+ }
558
+
559
+ currentStep = step;
560
+ updateProgress();
561
+
562
+ // Скрыть кнопку "Назад" на первом шаге
563
+ backButton.style.visibility = step === 1 ? 'hidden' : 'visible';
564
+ }
565
+
566
+ // Функция проверки заполненности шага
567
+ function validateStep(step) {
568
+ let isValid = true;
569
+ const stepEl = document.getElementById(`step${step}`);
570
+
571
+ // Reset all error states
572
+ stepEl.querySelectorAll('.border-red-500').forEach(el => el.classList.remove('border-red-500'));
573
+ stepEl.querySelectorAll('.error-border').forEach(el => el.classList.remove('error-border'));
574
+ const errorEl = document.getElementById(`step${step}Error`);
575
+ if (errorEl) errorEl.classList.add('hidden');
576
+
577
+ // Проверяем обязательные поля ввода
578
+ const requiredInputs = stepEl.querySelectorAll('input[required], select[required], textarea[required]');
579
+ requiredInputs.forEach(input => {
580
+ if (!input.value) {
581
+ input.classList.add('border-red-500');
582
+ isValid = false;
583
+ }
584
+ });
585
+
586
+ // Проверяем обязательные группы опций
587
+ const optionGroups = {};
588
+ stepEl.querySelectorAll('.option-card.required').forEach(opt => {
589
+ const group = opt.closest('.grid');
590
+ if (!optionGroups[group.id]) {
591
+ optionGroups[group.id] = group.querySelector('.option-card.required.selected') !== null;
592
+ }
593
+ });
594
+
595
+ // Проверяем, что в каждой группе есть выбранная опция
596
+ for (const groupId in optionGroups) {
597
+ if (!optionGroups[groupId]) {
598
+ isValid = false;
599
+ const groupEl = document.getElementById(groupId);
600
+ if (!groupEl) {
601
+ const group = document.querySelector(`[id="${groupId}"]`);
602
+ if (group) group.classList.add('error-border');
603
+ } else {
604
+ groupEl.classList.add('error-border');
605
+ }
606
+ }
607
+ }
608
+
609
+ if (!isValid && errorEl) {
610
+ errorEl.classList.remove('hidden');
611
+ }
612
+
613
+ return isValid;
614
+ }
615
+
616
+ // Обработчики кнопок "Далее"
617
+ nextButtons.forEach(button => {
618
+ button.addEventListener('click', () => {
619
+ if (currentStep < totalSteps) {
620
+ if (validateStep(currentStep)) {
621
+ goToStep(currentStep + 1);
622
+ }
623
+ }
624
+ });
625
+ });
626
+
627
+ // Обработчики кнопок "Назад"
628
+ prevButtons.forEach(button => {
629
+ button.addEventListener('click', () => {
630
+ if (currentStep > 1) {
631
+ // Skip validation when going back
632
+ goToStep(currentStep - 1);
633
+ }
634
+ });
635
+ });
636
+
637
+ // Кнопка "Назад" в шапке
638
+ backButton.addEventListener('click', () => {
639
+ if (currentStep > 1) {
640
+ // Skip validation when going back
641
+ goToStep(currentStep - 1);
642
+ }
643
+ });
644
+
645
+ // Обработка выбора опций
646
+ document.querySelectorAll('.option-card').forEach(card => {
647
+ card.addEventListener('click', function() {
648
+ // Снимаем выделение со всех карточек в этой группе
649
+ const group = this.closest('.grid');
650
+ group.querySelectorAll('.option-card').forEach(el => {
651
+ el.classList.remove('selected');
652
+ });
653
+
654
+ // Выделяем текущую карточку
655
+ this.classList.add('selected');
656
+
657
+ // Убираем ошибку если была
658
+ group.classList.remove('error-border');
659
+ const stepEl = this.closest('.step-transition');
660
+ const errorEl = stepEl.querySelector('.text-red-500.text-sm');
661
+ if (errorEl) errorEl.classList.add('hidden');
662
+ });
663
+ });
664
+
665
+ // Обработка выбора добавления упражнений
666
+ addExercisesYes.addEventListener('click', () => {
667
+ goToStep(exerciseStep);
668
+ });
669
+
670
+ addExercisesNo.addEventListener('click', () => {
671
+ goToStep(totalSteps);
672
+ });
673
+
674
+ // Обработка загрузки файлов
675
+ const dropZone = document.getElementById('dropZone');
676
+ const fileInput = document.getElementById('fileInput');
677
+ const fileList = document.getElementById('fileList');
678
+ const fileItems = document.getElementById('fileItems');
679
+
680
+ dropZone.addEventListener('click', () => {
681
+ fileInput.click();
682
+ });
683
+
684
+ fileInput.addEventListener('change', function() {
685
+ updateFileList(this.files);
686
+ });
687
+
688
+ // Drag and drop
689
+ dropZone.addEventListener('dragover', function(e) {
690
+ e.preventDefault();
691
+ this.classList.add('bg-blue-50');
692
+ });
693
+
694
+ dropZone.addEventListener('dragleave', function() {
695
+ this.classList.remove('bg-blue-50');
696
+ });
697
+
698
+ dropZone.addEventListener('drop', function(e) {
699
+ e.preventDefault();
700
+ this.classList.remove('bg-blue-50');
701
+
702
+ if (e.dataTransfer.files.length) {
703
+ fileInput.files = e.dataTransfer.files;
704
+ updateFileList(e.dataTransfer.files);
705
+ }
706
+ });
707
+
708
+ function updateFileList(files) {
709
+ if (files.length > 0) {
710
+ fileItems.innerHTML = '';
711
+
712
+ for (let i = 0; i < files.length; i++) {
713
+ const file = files[i];
714
+ const listItem = document.createElement('li');
715
+ listItem.className = 'flex items-center justify-between bg-gray-50 p-3 rounded-lg';
716
+
717
+ listItem.innerHTML = `
718
+ <div class="flex items-center">
719
+ <i class="fas fa-file text-gray-500 mr-3"></i>
720
+ <div>
721
+ <div class="text-sm font-medium truncate" style="max-width: 200px">${file.name}</div>
722
+ <div class="text-xs text-gray-500">${formatFileSize(file.size)}</div>
723
+ </div>
724
+ </div>
725
+ <button class="text-red-500 hover:text-red-700 delete-file" data-index="${i}">
726
+ <i class="fas fa-times"></i>
727
+ </button>
728
+ `;
729
+
730
+ fileItems.appendChild(listItem);
731
+ }
732
+
733
+ fileList.classList.remove('hidden');
734
+
735
+ // Добавляем обработчики для кнопок удаления
736
+ document.querySelectorAll('.delete-file').forEach(button => {
737
+ button.addEventListener('click', function() {
738
+ const index = parseInt(this.getAttribute('data-index'));
739
+ removeFile(index);
740
+ });
741
+ });
742
+ } else {
743
+ fileList.classList.add('hidden');
744
+ }
745
+ }
746
+
747
+ function removeFile(index) {
748
+ const dt = new DataTransfer();
749
+ const files = fileInput.files;
750
+
751
+ for (let i = 0; i < files.length; i++) {
752
+ if (i !== index) {
753
+ dt.items.add(files[i]);
754
+ }
755
+ }
756
+
757
+ fileInput.files = dt.files;
758
+ updateFileList(fileInput.files);
759
+ }
760
+
761
+ function formatFileSize(bytes) {
762
+ if (bytes === 0) return '0 Bytes';
763
+ const k = 1024;
764
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
765
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
766
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
767
+ }
768
+
769
+ // Отправка формы
770
+ submitButton.addEventListener('click', function() {
771
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Обработка...';
772
+ this.disabled = true;
773
+
774
+ // Имитация отправки данных
775
+ setTimeout(() => {
776
+ alert('Регистрация успешно завершена! Ваш профиль создан.');
777
+ this.innerHTML = 'Завершить регистрацию';
778
+ this.disabled = false;
779
+ }, 2000);
780
+ });
781
+
782
+ // Добавляем обработчики для очистки ошибок при вводе
783
+ document.querySelectorAll('input[required], select[required], textarea[required]').forEach(input => {
784
+ input.addEventListener('input', function() {
785
+ if (this.value) {
786
+ this.classList.remove('border-red-500');
787
+ const stepEl = this.closest('.step-transition');
788
+ const errorEl = stepEl.querySelector('.text-red-500.text-sm');
789
+ if (errorEl) errorEl.classList.add('hidden');
790
+ }
791
+ });
792
+ });
793
+
794
+ // Инициализация
795
+ updateProgress();
796
+ });
797
+ </script>
798
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jahanbaev/jaha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
799
+ </html>