Сайт
и проверка

Ты — frontend-разработчик и дизайнер. Собери готовый сайт из прототипа, первого экрана и визуального задания этого проекта. Нужен результат, который можно открыть и проверить, затем разместить на Тильде. Не ограничивайся планом.

ВХОД
Прототип, оффер и визуальное задание: [приложить или взять из чата].
Изображения: [прикрепить или указать файлы].
Формат: [квиз на один экран / сайт «Пуля» / подробный лендинг — из прототипа].
Форма/получатель: [готовая ссылка и настройки / пока только локальный пример].

1. СОХРАНИ ВЫБРАННЫЙ ФОРМАТ
Квиз на один экран — одна композиция с предложением и последовательными вопросами внутри неё. Не добавляй ленту секций. Переходы меняют шаг внутри области квиза. Не скрывай обязательный текст и поля ради формального попадания в экран: на маленьком устройстве или при увеличении масштаба доступность важнее запрета прокрутки.
Сайт «Пуля» — несколько блоков, с квизом или без него согласно прототипу. Квиз внутри «Пули» не превращает её в одноэкранный сайт. Все CTA ведут к одному сценарию обращения.
Подробный лендинг — раскрытая последовательность блоков по имеющимся материалам. Не добавляй секции и повторы только ради длины.

2. СДЕЛАЙ ПЕРВЫЙ ЭКРАН ПРИОРИТЕТНЫМ
Убери большой воздух сверху. Не центрируй оффер по высоте огромной фотографии. Заголовок с результатом и выгодой, CTA и минимум три ключевых аргумента должны быть видны без прокрутки на согласованных окнах. Сначала сокращай пустые отступы и повторы, затем настраивай переносы и размер изображения. Не делай основной текст нечитаемо мелким.
Ориентиры проверки: 1440×700, 1366×650, 1280×600, 390×664, 360×640, 320×568. Используй высоту области браузера, а не всего монитора. На телефоне фото не вытесняет предложение и кнопку.
Сохрани цепочку содержательных заголовков и утверждённые формулировки. В многоэкранных форматах кнопки к расчёту/подбору встречаются через один-два смысловых экрана.

3. СВЕРСТАЙ ВИЗУАЛ ПО ЗАДАНИЮ
Разные композиции, реальные или подготовленные изображения, понятная иерархия, контрастный текст и заметная кнопка. Сохраняй полезную область кадра на телефоне. Не заменяй готовую графику случайными стоками и не создавай несуществующие отзывы.
Уместные свечения, размытия фона и парящие элементы реализуй лёгким CSS/JavaScript. Декор не закрывает поля, не получает фокус и не перехватывает клики. Предусмотри prefers-reduced-motion; основной контент виден без скрипта эффектов.

4. РЕАЛИЗУЙ КВИЗ ИЛИ ФОРМУ
Если квиз предусмотрен: один экземпляр, актуальный счётчик, автоматический переход после готового одиночного ответа. На вводе числа, текста, даты и множественном выборе остаётся «Далее». Не переключай шаг во время набора. Сохраняй ответы при возврате и обновляй сводку при изменении. Предотврати пропуск двух шагов случайным двойным кликом; после перехода фокус попадает на новый вопрос.
Если задан единый вариант звонка с запросом об акциях, храни и передавай его целиком. Не добавляй галочку и не переносись запросом об акциях на другие каналы.
После вопросов — сводка и контакт. Проверяй обязательность и формат полей, но не требуй телефонную маску для ника или ссылки на мессенджер. Неизвестные необязательные сведения можно пропустить. Без формулы цены не рассчитывай стоимость случайно: результат готовит менеджер.
Если квиза нет, сделай короткую форму под выбранное целевое действие. Сам выбор варианта или переход по CTA не отправляет заявку. Сообщение об успешной отправке показывается только после подтверждённого приёма обработчиком.

5. ПОДГОТОВЬ ДВА ФАЙЛА
index.html — самостоятельный локальный сайт.
tilda-t123.html — HTML/CSS/JavaScript-фрагмент для T123 без внешней оболочки html/head/body.
Изолируй стили и идентификаторы уникальным префиксом. Используй обычный HTML/CSS/JavaScript без сборщика и тяжёлых библиотек. Изображения и шрифты должны открываться по доступным путям; перечисли, что загрузить на Тильду. Не вставляй секретные ключи в код страницы.
При наличии готовой формы используй её точную ссылку и передай в неё все ответы вместе с контактом. Если формы ещё нет, локальный макет честно сообщает, что заявка не отправлена, а инструкция называет место подключения, имена полей и проверяемую передачу. Для штатной формы Тильды объясни настройку в существующем проекте; не обещай, что локальный HTML сам принимает заявки.
Для текущего КокоШоу сохраняются #popup:koko-request, поле сводки koko_summary и универсальное текстовое поле контакта koko_contact. Для другого проекта возьми его реальные настройки или задай согласованный новый идентификатор в инструкции.

6. ПРОВЕРЬ РЕЗУЛЬТАТ
Если доступны браузер и исполнение кода — открой сайт и проверь: первый экран по высоте; отсутствие горизонтальной прокрутки; все CTA; клавиатуру и фокус; шаги квиза, возврат и сводку; пустые и ошибочные значения; изображения; режим уменьшенного движения. Исправь найденное и проверь затронутые сценарии снова.
Реальную доставку заявки проверяй отдельно после настройки получателя и публикации, с разрешёнными тестовыми данными. Не называй локальную имитацию проверкой доставки. Если инструментов для запуска нет, укажи это и дай конкретный ручной чек-лист вместо утверждения «всё проверено».

ВЫХОД
Готовые файлы, короткая инструкция переноса на Тильду и отчёт о фактических проверках. Если создавать файлы нельзя — полный код отдельно для каждого файла и инструкция сохранения.
Последующие исправления выполняй в том же чате по моему наблюдению и скриншоту. Сохраняй удачные части и текущие ответы; не пересобирай весь проект без причины. Дополнительный универсальный промпт для каждой мелкой правки не нужен.