|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> |
|
|
<title>Heealty - Регистрация</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4C6EF5', |
|
|
secondary: '#8CE99A', |
|
|
accent: '#FF922B', |
|
|
dark: '#1E293B', |
|
|
light: '#F8FAFC' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background: #f8fafc; |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
padding: 16px; |
|
|
} |
|
|
|
|
|
.step-hidden { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.step-active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.progress-dot { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.file-upload { |
|
|
border: 2px dashed #cbd5e1; |
|
|
border-radius: 12px; |
|
|
padding: 24px; |
|
|
text-align: center; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.file-upload:hover { |
|
|
border-color: #4C6EF5; |
|
|
background-color: #f0f7ff; |
|
|
} |
|
|
|
|
|
.option-card { |
|
|
border: 2px solid #e2e8f0; |
|
|
border-radius: 12px; |
|
|
padding: 16px; |
|
|
transition: all 0.2s ease; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.option-card:hover { |
|
|
border-color: #4C6EF5; |
|
|
background-color: #f0f7ff; |
|
|
} |
|
|
|
|
|
.option-card.selected { |
|
|
border-color: #4C6EF5; |
|
|
background-color: #e7f0ff; |
|
|
box-shadow: 0 4px 6px -1px rgba(76, 110, 245, 0.1), 0 2px 4px -1px rgba(76, 110, 245, 0.06); |
|
|
} |
|
|
|
|
|
.border-red-500 { |
|
|
border-color: #ef4444 !important; |
|
|
} |
|
|
|
|
|
.error-border { |
|
|
border: 2px solid #ef4444 !important; |
|
|
padding: 4px; |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
input[type="date"]::-webkit-calendar-picker-indicator { |
|
|
filter: invert(0.5); |
|
|
} |
|
|
|
|
|
.slide-in { |
|
|
animation: slideIn 0.3s forwards; |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { |
|
|
transform: translateX(30px); |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
transform: translateX(0); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.3s forwards; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden"> |
|
|
|
|
|
<div class="bg-primary p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<button id="backButton" class="text-white bg-white/20 rounded-full p-2 w-10 h-10 flex items-center justify-center"> |
|
|
<i class="fas fa-arrow-left"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold text-white">Создание профиля</h1> |
|
|
<div class="w-10"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between mb-3"> |
|
|
<div class="text-sm text-white/80">Шаг <span id="currentStep">1</span> из 5</div> |
|
|
<div class="text-sm text-white/80"><span id="progressPercent">0</span>%</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full bg-white/20 h-2 rounded-full overflow-hidden"> |
|
|
<div id="progressBar" class="h-full bg-white rounded-full transition-all duration-300" style="width: 20%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between mt-4"> |
|
|
<div class="progress-dot w-3 h-3 rounded-full bg-white"></div> |
|
|
<div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div> |
|
|
<div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div> |
|
|
<div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div> |
|
|
<div class="progress-dot w-3 h-3 rounded-full bg-white/20"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative overflow-hidden" style="min-height: 500px;"> |
|
|
|
|
|
<div id="step1" class="step-active step-transition p-6"> |
|
|
<h2 class="text-2xl font-bold text-dark mb-6 slide-in">Основная информация</h2> |
|
|
|
|
|
<div class="mb-6 fade-in"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Ваш пол <span class="text-red-500">*</span></label> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="option-card required" data-value="Мужской"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-mars text-3xl text-blue-500 mb-2"></i> |
|
|
<div class="font-medium">Мужской</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Женский"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-venus text-3xl text-pink-500 mb-2"></i> |
|
|
<div class="font-medium">Женский</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6 fade-in"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Дата рождения <span class="text-red-500">*</span></label> |
|
|
<input type="date" required class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
</div> |
|
|
|
|
|
<div id="step1Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div> |
|
|
<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]"> |
|
|
Продолжить |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step2" class="step-hidden step-transition p-6"> |
|
|
<h2 class="text-2xl font-bold text-dark mb-6">Физические параметры</h2> |
|
|
<div id="step2Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Рост (см) <span class="text-red-500">*</span></label> |
|
|
<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"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Вес (кг) <span class="text-red-500">*</span></label> |
|
|
<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"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Тип телосложения <span class="text-red-500">*</span></label> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="option-card required" data-value="Худощавое"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-user text-2xl text-gray-600 mb-1"></i> |
|
|
<div class="text-sm font-medium">Худощавое</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Обычное"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-user text-2xl text-gray-600 mb-1"></i> |
|
|
<div class="text-sm font-medium">Обычное</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Мускулистое"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-user text-2xl text-gray-600 mb-1"></i> |
|
|
<div class="text-sm font-medium">Мускулистое</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Полное"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-user text-2xl text-gray-600 mb-1"></i> |
|
|
<div class="text-sm font-medium">Полное</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Желаемый внешний вид <span class="text-red-500">*</span></label> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="option-card required" data-value="Похудеть"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-weight text-2xl text-red-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Похудеть</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Подтянутое тело"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-running text-2xl text-green-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Подтянутое тело</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Набрать массу"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-dumbbell text-2xl text-blue-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Набрать массу</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Поддержать форму"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-heart text-2xl text-purple-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Поддержать форму</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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]"> |
|
|
Продолжить |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step3" class="step-hidden step-transition p-6"> |
|
|
<h2 class="text-2xl font-bold text-dark mb-6">Фитнес-цели</h2> |
|
|
<div id="step3Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Ваша цель <span class="text-red-500">*</span></label> |
|
|
<select required class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
<option value="">Выберите цель</option> |
|
|
<option value="maintain">Поддержание веса</option> |
|
|
<option value="lose_fat">Похудеть</option> |
|
|
<option value="lose_fat_preserve_muscle">Похудеть с сохранением мышц</option> |
|
|
<option value="gain_weight">Набрать вес</option> |
|
|
<option value="gain_muscle">Набрать мышечную массу</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Уровень подготовки <span class="text-red-500">*</span></label> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<div class="option-card required" data-value="Начинающий"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-seedling text-xl text-green-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Начинающий</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Средний"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-mountain text-xl text-yellow-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Средний</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Продвинутый"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-fire-alt text-xl text-red-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Продвинутый</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Уровень активности <span class="text-red-500">*</span></label> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<div class="option-card required" data-value="Низкая"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-couch text-xl text-gray-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Низкая</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Средняя"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-walking text-xl text-blue-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Средняя</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Высокая"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-running text-xl text-green-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Высокая</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Предпочитаемое место тренировок <span class="text-red-500">*</span></label> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<div class="option-card required" data-value="Зал"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-dumbbell text-xl text-purple-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Зал</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Дом"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-home text-xl text-blue-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Дом</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Улица"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-tree text-xl text-green-500 mb-1"></i> |
|
|
<div class="text-xs font-medium">Улица</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Спортивный инвентарь <span class="text-red-500">*</span></label> |
|
|
<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"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex gap-3"> |
|
|
<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"> |
|
|
Назад |
|
|
</button> |
|
|
<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]"> |
|
|
Продолжить |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step4" class="step-hidden step-transition p-6"> |
|
|
<h2 class="text-2xl font-bold text-dark mb-6">Состояние здоровья</h2> |
|
|
<div id="step4Error" class="text-red-500 text-sm mb-4 hidden">Пожалуйста, заполните обязательные поля</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Хронические заболевания</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Противопоказания</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Добавить упражнения?</label> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button id="addExercisesYes" class="bg-secondary hover:bg-secondary/90 text-dark font-bold py-3 px-4 rounded-xl transition duration-200"> |
|
|
<i class="fas fa-check mr-2"></i> Да |
|
|
</button> |
|
|
<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"> |
|
|
<i class="fas fa-times mr-2"></i> Нет |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex gap-3"> |
|
|
<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"> |
|
|
Назад |
|
|
</button> |
|
|
<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]"> |
|
|
Продолжить |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step5" class="step-hidden step-transition p-6"> |
|
|
<h2 class="text-2xl font-bold text-dark mb-6">Медицинские анализы</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<p class="text-gray-600 mb-4">Вы можете загрузить результаты медицинских анализов для более персонализированных рекомендаций</p> |
|
|
|
|
|
<div class="file-upload mb-4" id="dropZone"> |
|
|
<i class="fas fa-cloud-upload-alt text-4xl text-primary mb-3"></i> |
|
|
<p class="font-medium text-gray-700">Перетащите файлы сюда</p> |
|
|
<p class="text-gray-500 text-sm mt-1">или</p> |
|
|
<label class="inline-block mt-2 bg-primary text-white py-2 px-6 rounded-lg cursor-pointer"> |
|
|
<i class="fas fa-folder-open mr-2"></i>Выбрать файлы |
|
|
<input type="file" class="hidden" id="fileInput" multiple> |
|
|
</label> |
|
|
<p class="text-gray-500 text-xs mt-3">Поддерживаемые форматы: JPG, PNG, PDF (макс. 5 МБ)</p> |
|
|
</div> |
|
|
|
|
|
<div id="fileList" class="hidden"> |
|
|
<h3 class="font-medium text-gray-700 mb-2">Загруженные файлы:</h3> |
|
|
<ul id="fileItems" class="space-y-2"></ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex gap-3"> |
|
|
<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"> |
|
|
Назад |
|
|
</button> |
|
|
<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]"> |
|
|
Завершить регистрацию |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="stepExercises" class="step-hidden step-transition p-6"> |
|
|
<h2 class="text-2xl font-bold text-dark mb-6">Предпочитаемые упражнения</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<p class="text-gray-600 mb-4">Выберите упражнения, которые вы предпочитаете или хотите включить в свою программу</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-3 mb-4"> |
|
|
<div class="option-card" data-value="Кардио"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-heartbeat text-2xl text-red-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Кардио</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Силовые"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-dumbbell text-2xl text-blue-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Силовые</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Йога"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-spa text-2xl text-green-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Йога</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="option-card" data-value="Плиометрика"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-fire-alt text-2xl text-orange-500 mb-1"></i> |
|
|
<div class="text-sm font-medium">Плиометрика</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2 font-medium">Дополнительные пожелания</label> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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]"> |
|
|
Сохранить и завершить |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
let currentStep = 1; |
|
|
const totalSteps = 5; |
|
|
const exerciseStep = 6; |
|
|
|
|
|
|
|
|
const backButton = document.getElementById('backButton'); |
|
|
const nextButtons = document.querySelectorAll('.next-step'); |
|
|
const prevButtons = document.querySelectorAll('.prev-step'); |
|
|
const submitButton = document.getElementById('submitForm'); |
|
|
const addExercisesYes = document.getElementById('addExercisesYes'); |
|
|
const addExercisesNo = document.getElementById('addExercisesNo'); |
|
|
|
|
|
|
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
const currentStepEl = document.getElementById('currentStep'); |
|
|
const progressPercent = document.getElementById('progressPercent'); |
|
|
const progressDots = document.querySelectorAll('.progress-dot'); |
|
|
|
|
|
|
|
|
function updateProgress() { |
|
|
const percent = (currentStep / totalSteps) * 100; |
|
|
progressBar.style.width = `${percent}%`; |
|
|
progressPercent.textContent = Math.round(percent); |
|
|
currentStepEl.textContent = currentStep; |
|
|
|
|
|
|
|
|
progressDots.forEach((dot, index) => { |
|
|
if (index < currentStep) { |
|
|
dot.classList.remove('bg-white/20'); |
|
|
dot.classList.add('bg-white'); |
|
|
} else { |
|
|
dot.classList.remove('bg-white'); |
|
|
dot.classList.add('bg-white/20'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function goToStep(step) { |
|
|
document.querySelectorAll('.step-transition').forEach(el => { |
|
|
el.classList.remove('step-active'); |
|
|
el.classList.add('step-hidden'); |
|
|
}); |
|
|
|
|
|
const stepEl = document.getElementById(`step${step}`); |
|
|
if (stepEl) { |
|
|
stepEl.classList.remove('step-hidden'); |
|
|
stepEl.classList.add('step-active'); |
|
|
|
|
|
|
|
|
const elements = stepEl.querySelectorAll('h2, div, button'); |
|
|
elements.forEach((el, index) => { |
|
|
el.classList.remove('slide-in', 'fade-in'); |
|
|
setTimeout(() => { |
|
|
if (el.tagName === 'H2') { |
|
|
el.classList.add('slide-in'); |
|
|
} else { |
|
|
el.classList.add('fade-in'); |
|
|
} |
|
|
}, 50 * index); |
|
|
}); |
|
|
} |
|
|
|
|
|
currentStep = step; |
|
|
updateProgress(); |
|
|
|
|
|
|
|
|
backButton.style.visibility = step === 1 ? 'hidden' : 'visible'; |
|
|
} |
|
|
|
|
|
|
|
|
function validateStep(step) { |
|
|
let isValid = true; |
|
|
const stepEl = document.getElementById(`step${step}`); |
|
|
|
|
|
|
|
|
stepEl.querySelectorAll('.border-red-500').forEach(el => el.classList.remove('border-red-500')); |
|
|
stepEl.querySelectorAll('.error-border').forEach(el => el.classList.remove('error-border')); |
|
|
const errorEl = document.getElementById(`step${step}Error`); |
|
|
if (errorEl) errorEl.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const requiredInputs = stepEl.querySelectorAll('input[required], select[required], textarea[required]'); |
|
|
requiredInputs.forEach(input => { |
|
|
if (!input.value) { |
|
|
input.classList.add('border-red-500'); |
|
|
isValid = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const optionGroups = {}; |
|
|
stepEl.querySelectorAll('.option-card.required').forEach(opt => { |
|
|
const group = opt.closest('.grid'); |
|
|
if (!optionGroups[group.id]) { |
|
|
optionGroups[group.id] = group.querySelector('.option-card.required.selected') !== null; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
for (const groupId in optionGroups) { |
|
|
if (!optionGroups[groupId]) { |
|
|
isValid = false; |
|
|
const groupEl = document.getElementById(groupId); |
|
|
if (!groupEl) { |
|
|
const group = document.querySelector(`[id="${groupId}"]`); |
|
|
if (group) group.classList.add('error-border'); |
|
|
} else { |
|
|
groupEl.classList.add('error-border'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
if (!isValid && errorEl) { |
|
|
errorEl.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
return isValid; |
|
|
} |
|
|
|
|
|
|
|
|
nextButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
if (currentStep < totalSteps) { |
|
|
if (validateStep(currentStep)) { |
|
|
goToStep(currentStep + 1); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
prevButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
if (currentStep > 1) { |
|
|
|
|
|
goToStep(currentStep - 1); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
backButton.addEventListener('click', () => { |
|
|
if (currentStep > 1) { |
|
|
|
|
|
goToStep(currentStep - 1); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.option-card').forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
|
|
|
const group = this.closest('.grid'); |
|
|
group.querySelectorAll('.option-card').forEach(el => { |
|
|
el.classList.remove('selected'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.add('selected'); |
|
|
|
|
|
|
|
|
group.classList.remove('error-border'); |
|
|
const stepEl = this.closest('.step-transition'); |
|
|
const errorEl = stepEl.querySelector('.text-red-500.text-sm'); |
|
|
if (errorEl) errorEl.classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
addExercisesYes.addEventListener('click', () => { |
|
|
goToStep(exerciseStep); |
|
|
}); |
|
|
|
|
|
addExercisesNo.addEventListener('click', () => { |
|
|
goToStep(totalSteps); |
|
|
}); |
|
|
|
|
|
|
|
|
const dropZone = document.getElementById('dropZone'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const fileList = document.getElementById('fileList'); |
|
|
const fileItems = document.getElementById('fileItems'); |
|
|
|
|
|
dropZone.addEventListener('click', () => { |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', function() { |
|
|
updateFileList(this.files); |
|
|
}); |
|
|
|
|
|
|
|
|
dropZone.addEventListener('dragover', function(e) { |
|
|
e.preventDefault(); |
|
|
this.classList.add('bg-blue-50'); |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('dragleave', function() { |
|
|
this.classList.remove('bg-blue-50'); |
|
|
}); |
|
|
|
|
|
dropZone.addEventListener('drop', function(e) { |
|
|
e.preventDefault(); |
|
|
this.classList.remove('bg-blue-50'); |
|
|
|
|
|
if (e.dataTransfer.files.length) { |
|
|
fileInput.files = e.dataTransfer.files; |
|
|
updateFileList(e.dataTransfer.files); |
|
|
} |
|
|
}); |
|
|
|
|
|
function updateFileList(files) { |
|
|
if (files.length > 0) { |
|
|
fileItems.innerHTML = ''; |
|
|
|
|
|
for (let i = 0; i < files.length; i++) { |
|
|
const file = files[i]; |
|
|
const listItem = document.createElement('li'); |
|
|
listItem.className = 'flex items-center justify-between bg-gray-50 p-3 rounded-lg'; |
|
|
|
|
|
listItem.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-file text-gray-500 mr-3"></i> |
|
|
<div> |
|
|
<div class="text-sm font-medium truncate" style="max-width: 200px">${file.name}</div> |
|
|
<div class="text-xs text-gray-500">${formatFileSize(file.size)}</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-red-500 hover:text-red-700 delete-file" data-index="${i}"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
`; |
|
|
|
|
|
fileItems.appendChild(listItem); |
|
|
} |
|
|
|
|
|
fileList.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.delete-file').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const index = parseInt(this.getAttribute('data-index')); |
|
|
removeFile(index); |
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
fileList.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function removeFile(index) { |
|
|
const dt = new DataTransfer(); |
|
|
const files = fileInput.files; |
|
|
|
|
|
for (let i = 0; i < files.length; i++) { |
|
|
if (i !== index) { |
|
|
dt.items.add(files[i]); |
|
|
} |
|
|
} |
|
|
|
|
|
fileInput.files = dt.files; |
|
|
updateFileList(fileInput.files); |
|
|
} |
|
|
|
|
|
function formatFileSize(bytes) { |
|
|
if (bytes === 0) return '0 Bytes'; |
|
|
const k = 1024; |
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
|
|
} |
|
|
|
|
|
|
|
|
submitButton.addEventListener('click', function() { |
|
|
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Обработка...'; |
|
|
this.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
alert('Регистрация успешно завершена! Ваш профиль создан.'); |
|
|
this.innerHTML = 'Завершить регистрацию'; |
|
|
this.disabled = false; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('input[required], select[required], textarea[required]').forEach(input => { |
|
|
input.addEventListener('input', function() { |
|
|
if (this.value) { |
|
|
this.classList.remove('border-red-500'); |
|
|
const stepEl = this.closest('.step-transition'); |
|
|
const errorEl = stepEl.querySelector('.text-red-500.text-sm'); |
|
|
if (errorEl) errorEl.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
updateProgress(); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
