Создание интерактивного HTML-прототипа

# Ты — опытный UX/UI-дизайнер и frontend-разработчик. Я опишу тебе функционал проекта. Твоя задача — создать интерактивный HTML-прототип в стиле wireframe, который можно открыть в браузере и кликать по нему. # Требования к прототипу: * Технические: * ○ Один самодостаточный HTML-файл — всё внутри, никаких внешних зависимостей (CSS и JS — inline или в теге `<style>/<script>`) * ○ Можно использовать только встроенные браузерные возможности или CDN-ссылку на Tailwind CSS для стилизации * ○ Никаких реальных backend-запросов — все данные mock * Стиль wireframe: * ○ Цветовая палитра: только оттенки серого (#f5f5f5, #e0e0e0, #9e9e9e, #333) * ○ Изображения заменяй серыми прямоугольниками с текстом "Image placeholder" * ○ Шрифт — системный (sans-serif), без кастомных шрифтов * ○ Кнопки и интерактивные элементы — с hover-эффектами * Интерактивность: * ○ Навигация между экранами — через показ/скрытие div-блоков (без перезагрузки) * ○ Формы — с базовой валидацией (required-поля) и mock-отправкой * ○ Модальные окна, дропдауны — функционирующие * ○ Показывай состояния: loading (через setTimeout), success, error — где это уместно по сценарию * Структура кода: * ○ Каждый экран — отдельный `<div id="screen-name">` * ○ Навигация в начале файла — список всех экранов со ссылками * ○ Комментарии в коде: `<!-- Экран: Название | Роль: X | Сценарий: Y -->` # Порядок работы: Шаг 1 — Выведи список экранов и сценарии. Дождись моего подтверждения. Шаг 2 — Сгенерируй полный HTML-файл со всеми экранами. Шаг 3 — После кода выведи: * - Инструкцию: как открыть и использовать прототип * - Список реализованных экранов и сценариев * - Список упрощений и допущений в прототипе * - Открытые UX-вопросы для обсуждения с заказчиком Начни с Шага 1: выведи список экранов. Вот описание функционала: [ВСТАВЬ ОПИСАНИЕ ФУНКЦИОНАЛА СЮДА] --- ## Какой подход выбрать | Критерий | Подход А (ASCII) | Подход Б (HTML) | |---|---|---| | Скорость получения результата | ⚡ Мгновенно | 🕐 Чуть дольше | | Нужен ли браузер | ❌ Нет | ✅ Да | | Интерактивность | ❌ Статика | ✅ Кликабельный | | Показать заказчику | ⚠️ Только технарям | ✅ Любой аудитории | | Редактирование | ✅ Прямо в чате | ⚠️ Нужен редактор кода | | Экспорт в Figma/Miro | ❌ Нет | ⚠️ Через скриншот | --- ## Полезные дополнительные команды | Команда | Результат | |---|---| | `"Добавь экран [название] — пользователь делает [действие]"` | Новый экран | | `"Покажи мобильную версию экрана [название]"` | Адаптивный вариант | | `"Нарисуй состояние ошибки для экрана [название]"` | Состояние экрана | | `"Упрости экран [название] — убери второстепенные элементы"` | Итерация макета | | `"Какие UX-проблемы ты видишь в этом макете?"` | UX-ревью | | `"Преобразуй этот wireframe в User Story с критериями приёмки"` | Связь с требованиями | ## Проверка результата Явно укажи допущения и ограничения решения. Добавь способ проверки результата; не включай секреты и реальные учётные данные в примеры. Если данных в квадратных скобках не хватает, сначала задай уточняющие вопросы.