Квиз для подбора тренировок: цель, опыт и план на неделю

Собери одностраничное веб-приложение «Квиз: фитнес» — подбор тренировок по цели и опыту человека. Один HTML-файл, CSS и vanilla JS внутри, без библиотек, внешних скриптов, шрифтов и картинок.

Моя задача: человек без тренера рядом проходит опрос и получает понятный план тренировок под свою цель, уровень, свободное время и место занятий.

Сначала короткий опрос на понятном языке — 8–15 вопросов с вариантами ответов: для кого квиз, какие цели и уровни, нужны ли ветки, что показывать в конце, собирать ли контакт, куда сохранять прохождения. Не спрашивай про фреймворки, базы данных, компоненты, API и архитектуру. После ответов коротко перескажи, что понял, и только потом начинай.

Спроектируй сущности со стабильными ID и связями:
1) вопрос — текст, блок (цель, опыт, время, место, ограничения), порядок;
2) вариант — текст, баллы по направлениям (сила, выносливость, мобильность, дом, зал), ID следующего вопроса;
3) ветка — правило, какой вопрос задать после выбранного варианта;
4) результат — ведущие направления, формат и частота тренировок, план первой недели;
5) лид — имя, удобный способ связи, цель, уровень, дата прохождения.

Статусы прохождения: старт → вопросы → результат → заявка. Экраны: стартовый, вопросы, результат, список прохождений. Показывай прогресс «вопрос N из M», разрешай вернуться назад и поменять ответ. Связанные объекты открываются друг из друга: из прохождения — результат и лид, из лида — его ответы.

Модули: вопросы с вариантами, ветвление, подсчёт по блокам, результат с рекомендацией, сбор контакта, статистика прохождений. Добавь только то, что следует из задачи, без функций «для галочки».

Сделай 12 вопросов с разными весами: подходящий вариант +2, нейтральный +1, рискованный 0. Ветвление: если человек выбрал «никогда не тренировался», добавь вопрос про бытовую активность; если «занимаюсь больше года» — вопрос про нагрузку и прогресс.

Экраны подробнее:
- стартовый: название, 2–3 предложения о пользе, кнопка «Начать подбор», строка «займёт 2 минуты»;
- вопросы: один вопрос на экране, 3–4 варианта, ветвление по ответам, счётчик прогресса;
- результат: ведущее направление, формат (дом / зал / улица), частота и длительность, 3 упражнения или блока на первую неделю, кнопка «Получить план на почту»;
- заявка: имя и удобный способ связи, валидация, экран благодарности;
- список прохождений: таблица с именем, целью, уровнем, рекомендованным форматом, датой; фильтр по цели и счётчик сверху.

Тон текстов: дружелюбный, без стыда за тело и без обещаний «минус 10 кг за месяц». Предусмотри пустые состояния, пустые поля, битые данные в localStorage, удаление связанных записей и закрытие модальных окон по Escape и клику на фон.

Дизайн выбери сам — цельная система: крупная типографика, понятная иерархия, единые компоненты, состояния hover и focus, адаптив от 360 px. Никаких декоративных цифр и визуального шума.

Технически: один HTML-файл, CSS и vanilla JS внутри, localStorage как хранилище, без backend, сборщиков, npm и обязательного сервера. Раздели слои: хранение → сущности → действия → компоненты → экраны → навигация. После любого изменения данные сохраняются, интерфейс обновляется сразу, без перезагрузки.

Добавь немного реалистичных демо-данных и кнопку «Удалить тестовые данные» — с подтверждением и одноразово. Перед выдачей сам пройди основные сценарии: создание, изменение, удаление, переходы, перезагрузку, телефон. Ответ — полный готовый HTML-файл. Дальнейшие правки — тоже полным файлом. Если пришлю DESIGN.md — следуй ему.

Вставьте промпт в поле сообщения проекта и нажмите «Отправить» ↑. Свои цели и вопросы допишите в первом абзаце — бот пересоберёт квиз под них.