System Requirements Document for smart-6

1. Introduction

smart-6 — браузерная HTML-игра в стиле открытого мира Forza Horizon 6, в которой игрок управляет спортивным автомобилем с телефона через сенсорные элементы управления на экране. Продукт создаётся по прямому запросу Повелителя: «Создай Форза хорайзон 6 на html с управлением на телефон».

Назначение продукта — дать игроку мгновенный эмоциональный вход в аркадную гоночную атмосферу фестиваля Horizon прямо в мобильном браузере, без установки приложения и без внешних контроллеров: открыть страницу, нажать старт и поехать по открытому миру, используя крупные сенсорные кнопки поворота и педали газа/тормоза.

Аудитория — игроки на смартфонах, которым нужен быстрый азарт открытой дороги, неоновая энергия фестиваля и понятное сенсорное управление на маленьком экране.

Критерии успеха

• Игра открывается и запускается в мобильном браузере как HTML-страница без установки.
• Игрок может управлять автомобилем с телефона исключительно сенсорными элементами на экране.
• Сенсорные элементы управления полностью помещаются в safe-area экрана на 375px и остаются крупными и точными для касания.
• Открытый мир и вождение читаются как аркадная фестивальная гонка в стиле Horizon, а не как нейтральный интерфейс.
• Переход от Landing к игре происходит по одному понятному действию (арка «START» / CTA «ВЫЕХАТЬ НА ТРАССУ»).

2. System Overview

2a. Product Interpretation and Delivery Boundary

smart-6 — это клиентская браузерная игра, доставляемая как HTML-приложение. Вся игровая логика (открытый мир, автомобиль, физика вождения, сенсорное управление, HUD) выполняется в браузере на телефоне игрока. Продукт не требует учётной записи, входа или серверного профиля: обе поверхности — Landing и Игра — доступны анонимно (access_requirement: none).

Границы доставки:

• Текущий горизонт: две поверхности — публичная входная страница Landing (объясняет, что это браузерная HTML-игра в стиле Forza Horizon 6 с управлением на телефоне, и ведёт в игру) и основной игровой экран Игра (открытый мир и автомобиль в реальном времени с сенсорными элементами управления).
• Владение: обе поверхности принадлежат приложению (first-party custom UI). Внешних провайдеров, сторонних аккаунтов и headless-доставки не заявлено.
• Идентичность: приложение не устанавливает учётную запись; игрок анонимен на обеих поверхностях. Сохранение прогресса между сессиями не заявлено и не добавляется.
• Инфраструктура: фронтенд-приложение (React) обслуживает обе поверхности; общий backend (FastAPI) и база данных (MariaDB) присутствуют в провижининге как инфраструктура приложения, но не создают доменных сущностей, аутентификации или обязательных серверных сценариев, поскольку заявленные требования полностью реализуемы на клиенте.

Removed from scope

• Официальный брендинг, логотипы и защищённые интерфейсные материалы Forza Horizon (имитация запрещена направлением дизайна).

2c. Page Content and Component Coverage

Landing

• Назначение и состояние: анонимная публичная входная поверхность. Объясняет, что smart-6 — браузерная HTML-игра в стиле Forza Horizon 6 с управлением на телефоне, и ведёт игрока в игру. Состояние по умолчанию — статичный постер; при prefers-reduced-motion маршрут и декорации статичны, ticker становится горизонтально прокручиваемой строкой.
• Информация:
  • Слово «SMART‑6» в три гигантские строки Archivo Black, каждая строка на отдельной плоской цветовой полосе, масштаб от 52px до 152px без выхода текста за экран.
  • Короткое пояснение: браузерная HTML-игра в стиле Forza Horizon 6, управление с телефона.
  • Живая бегущая строка фестивального радио (ticker).
• Основные действия:
  • CTA «ВЫЕХАТЬ НА ТРАССУ» — широкая чёрная кнопка с лаймовой рамкой, закреплённая в нижней безопасной зоне.
  • Лаймовая фестивальная арка «START» — крупная интерактивная цель, запускающая цветовой wipe-переход на игровой экран.
• Доменные сущности: нет сохраняемых сущностей; только презентационные элементы (заголовок, маршрут-след, арка, CTA, ticker).
• Компоненты и ответственность:
  • Hero-постер: полноэкранный ночной фестивальный фон #1A1026, слово «SMART‑6» в три строки, диагональный розовый маршрут-след #FF3B8D, спортивный автомобиль, врывающийся с правого нижнего края по диагонали, лаймовая арка «START».
  • CTA-блок: кнопка «ВЫЕХАТЬ НА ТРАССУ» в safe-area.
  • Ticker фестивального радио.
• Состояния:
  • Loading: мгновенная отрисовка постера; при загрузке игровых ресурсов CTA показывает состояние подготовки и остаётся в safe-area.

• Empty: не применимо (контент статичен).
• Success: нажатие CTA или арки «START» запускает цветовой wipe и переводит на Игру.
• Error: если игровые ресурсы не загрузились, CTA остаётся видимым и показывает сообщение о повторной попытке; игрок может повторить нажатие.
• Recovery: повторное нажатие CTA перезапускает загрузку и переход.

Игра

• Назначение и состояние: основной игровой экран — full-bleed дорога открытого мира с автомобилем в реальном времени и сенсорными элементами управления на телефоне. Состояние по умолчанию — автомобиль на трассе, HUD активен, управление доступно.
• Информация (HUD):
  • Огромная наклонная цифра скорости в Archivo Black в верхней части экрана с маленькой подписью «KM/H».
  • Мини-карта с реальной линией навигации #FF3B8D (продолжение маршрута-следа с Landing).
  • Компактный верхний HUD (скорость, мини-карта, чекпоинты/маршрут).
• Основные действия (сенсорное управление):
  • Две круглые кнопки поворота слева (руль).
  • Две высокие педали справа (газ и тормоз).
  • Активное касание оставляет краткий розовый штамп-след внутри кнопки.
  • Пересечение чекпоинта — подпрыгивание маркера и активация лаймового состояния #D8FF38.
• Доменные сущности (в рамках игровой сессии): автомобиль (позиция, скорость, направление), трасса/открытый мир, чекпоинты, маршрут на мини-карте.
• Компоненты и ответственность:
  • Игровое полотно: full-bleed дорога, автомобиль, фестивальные декорации (розовые рекламные арки, лаймовые дорожные ворота, тёплые закатные скалы, сюрреалистические надувные объекты).
  • HUD: наклонная цифра скорости, подпись KM/H, мини-карта с маршрутом.
  • Сенсорное управление: круглые кнопки поворота слева, высокие педали справа, все в safe-area на 375px.
• Состояния:
  • Loading: экран подготовки трассы с индикатором; управление недоступно до готовности.
  • Empty: не применимо.

• Success: автомобиль движется, скорость и мини-карта обновляются в реальном времени, чекпоинты активируются при пересечении.
• Error: при сбое загрузки игрового полотна показывается сообщение и действие возврата на Landing для повторного старта.
• Recovery: возврат на Landing и повторный запуск через CTA/арку «START».
• Reduced motion: при prefers-reduced-motion декорации и маршрут статичны, ticker (если виден) — горизонтально прокручиваемая строка; управление и HUD остаются полностью читаемыми.

3. Functional Requirements

FR-1. HTML-игра в браузере — explicit As a Игрок, I should открывать и запускать игру как HTML-страницу в браузере, чтобы играть без установки приложения.

• Триггер: игрок открывает URL игры в браузере телефона.
• Наблюдаемый результат: отображается Landing, игра запускается в браузере.
• Ограничение: реализация на HTML (жёсткое ограничение источника).
• Продолжение: переход к игре через CTA/арку «START».

FR-2. Открытый мир и вождение в стиле Forza Horizon 6 — explicit As a Игрок, I should ездить по открытому миру в стиле Forza Horizon 6, чтобы получать удовольствие от вождения и гонок.

• Триггер: игрок находится на экране Игра.
• Наблюдаемый результат: full-bleed дорога открытого мира, автомобиль в реальном времени, фестивальные декорации, HUD со скоростью и мини-картой.
• Продолжение: свободное вождение, пересечение чекпоинтов, активация маршрута.

FR-3. Управление автомобилем с телефона — explicit As a Игрок, I should управлять автомобилем сенсорными элементами на экране телефона, чтобы ездить без внешнего контроллера.

• Вход: касания двух круглых кнопок поворота слева и двух высоких педалей справа.
• Наблюдаемый результат: автомобиль поворачивает, ускоряется и тормозит; активное касание оставляет розовый штамп-след внутри кнопки; скорость обновляется в HUD.
• Ограничение: управление рассчитано на телефон (жёсткое ограничение источника); все controls целиком в safe-area на 375px.
• Восстановление: при потере фокуса касания управление возвращается в нейтральное состояние без залипания.

FR-4. Открыть игру в браузере на телефоне — required_inference As a Игрок, I should открыть игру в браузере на телефоне, чтобы начать игровую сессию.

• Триггер: игрок вводит URL и открывает Landing.
• Наблюдаемый результат: постер с «SMART‑6», пояснением и CTA «ВЫЕХАТЬ НА ТРАССУ».
• Продолжение: нажатие CTA или арки «START» запускает цветовой wipe и переход на Игру.

FR-5. Использовать сенсорные элементы управления на экране — required_inference As a Игрок, I should использовать сенсорные элементы управления на экране, чтобы взаимодействовать с автомобилем.

• Вход: касание/удержание кнопок поворота и педалей.
• Наблюдаемый результат: немедленный отклик педалей и руля, визуальный штамп-след касания, обновление скорости и позиции на мини-карте.
• Восстановление: при сбое загрузки игрового полотна — сообщение и возврат на Landing для повторного старта.

4. User Personas

Игрок

• Контекст: играет на смартфоне в мобильном браузере; хочет мгновенного азарта открытой дороги и неоновой энергии фестиваля без установки приложения и без внешнего контроллера.
• Основная цель: свободно ездить по открытому миру в стиле Forza Horizon 6, участвовать в гонках и получать удовольствие от вождения на мобильном устройстве.
• Отличительные обязанности:
  • Открывает игру в браузере на телефоне (Landing).
  • Запускает игру через CTA «ВЫЕХАТЬ НА ТРАССУ» или арку «START».
  • Управляет автомобилем сенсорными кнопками поворота и педалями (Игра).
  • Следит за скоростью и маршрутом по HUD и мини-карте, пересекает чекпоинты.
• Входы и решения: выбор момента старта (нажатие CTA/арки), непрерывные решения о повороте, газе и тормозе.
• Взаимодействие с другими участниками: нет других человеческих участников; игрок взаимодействует только с игровым миром и HUD.
• Наблюдаемый успех: плавное управление, читаемый HUD, прогресс по маршруту и чекпоинтам на мобильном экране.

5. Core User Flows

Поток 1. Открыть игру и выехать на трассу (Игрок)

1. Игрок открывает URL smart-6 в браузере телефона.
2. Отображается Landing: ночной фестивальный постер, слово «SMART‑6» в три строки, диагональный розовый маршрут-след, автомобиль, врывающийся с правого нижнего края, лаймовая арка «START», CTA «ВЫЕХАТЬ НА ТРАССУ» в нижней safe-area.
3. Игрок читает пояснение, что это браузерная HTML-игра в стиле Forza Horizon 6 с управлением на телефоне.
4. Игрок нажимает CTA «ВЫЕХАТЬ НА ТРАССУ» или лаймовую арку «START».
5. Запускается цветовой wipe-переход; при необходимости показывается состояние подготовки.
6. Открывается Игра: full-bleed дорога открытого мира, автомобиль, HUD со скоростью и мини-картой.
7. Ошибка/восстановление: если игровые ресурсы не загрузились, CTA остаётся видимым с сообщением о повторной попытке; игрок повторяет нажатие.

Поток 2. Управлять автомобилем с телефона (Игрок)

1. Игрок находится на экране Игра; управление доступно.
2. Игрок касается и удерживает правую педаль газа — автомобиль ускоряется, наклонная цифра скорости в Archivo Black обновляется, подпись «KM/H» остаётся читаемой.
3. Игрок касается левой круглой кнопки поворота — автомобиль поворачивает; активное касание оставляет краткий розовый штамп-след внутри кнопки.
4. Игрок касается правой педали тормоза — автомобиль замедляется.
5. Игрок следит за мини-картой с реальной линией навигации #FF3B8D и пересекает чекпоинт — маркер подпрыгивает и активируется лаймовым состоянием #D8FF38.
6. Игрок продолжает свободное вождение по открытому миру.
7. Восстановление: при сбое загрузки игрового полотна показывается сообщение и действие возврата на Landing; игрок повторяет Поток 1.

6. Visuals Colors and Theme

Направление: «Скорость как яркий поп-фестиваль», муза — Jessica Walsh. Заголовок направления: аркадный фестивальный мир, а не нейтральный игровой интерфейс.

Палитра (dark mode):

• Фон #1A1026 — глубокий сливово-чёрный, чтобы яркие дорожные маркеры и автомобиль читались с первого взгляда.
• #FF3B8D — главные действия, фестивальные баннеры и маршрут.
• #D8FF38 — нитро, чекпоинты и активные состояния управления.
• #2A1740 — поверхности HUD и меню.
• Текст только #FFF7E8 для надёжной читаемости.

Типографика:

• Заголовки: Archivo Black, верхний регистр, плотно набранный, короткие строки, намеренно огромный масштаб.
• Body и HUD: DM Sans — контрастный и разборчивый для скорости и сенсорных подписей.
• Шкала: дисплей clamp(52px, 12vw, 152px) (52px на mobile, до 152px на desktop); экранный заголовок 32/42/56px; скорость 42/64/92px; UI 16/18px; подписи controls 13/14px.

Форма: жёсткие цветовые плоскости, диагональные срезы, круглые дорожные маркеры, толстые контурные наклейки. Сенсорные кнопки — крупные полупрозрачные диски с 2px светлым контуром и смещённой лаймовой тенью; никакого стеклянного SaaS-эффекта.

Раскладка: Landing — постер: огромный заголовок в левой верхней зоне, диагональная полоса маршрута пересекает экран, вырезанный автомобиль и абстрактные фестивальные пропсы заходят с правого края. Игровой экран — full-bleed дорога с компактным верхним HUD, рулём внизу слева и педалями внизу справа; все подписи и controls целиком в safe-area на 375px.

Изображения: арт-директed arcade-мир — контрастный спортивный автомобиль, розовые рекламные арки, лаймовые дорожные ворота, тёплые закатные скалы, сюрреалистические надувные фестивальные объекты. Визуальные слои могут обрезаться по краям, но не перекрывают текст, HUD и кнопки.

Запрещено: белый/почти белый фон с синими CTA; градиентные blob-герои и стеклянные dashboard-карточки; имитация официального брендинга Forza Horizon; мелкие педали или controls за пределами safe-area; центрированный SaaS-заголовок; сетки одинаковых карточек с hover-lift; мрачные военные гоночные UI; декор, перекрывающий скорость, маршрут, текст или кнопки.

7. Signature Design Concept

Первый экран — полноэкранный ночной фестивальный постер на #1A1026. Слово «SMART‑6» набрано Archivo Black в три строки и занимает около 60% высоты экрана; каждая строка лежит на отдельной плоской цветовой полосе и масштабируется от 52px до 152px без выхода текста за экран. Слово частично перекрывается только розовыми и лаймовыми декоративными полосами.

Спортивный автомобиль под углом врывается с правого нижнего края по диагонали, оставляя плоский розовый след-маршрут #FF3B8D, который ведёт к лаймовой арке «START». CTA «ВЫЕХАТЬ НА ТРАССУ» закреплён в нижней безопасной зоне как широкая чёрная кнопка с лаймовой рамкой. Это не центрированная SaaS-композиция, а интерактивная афиша гонки.

Диагональный маршрут-след продолжается на игровом экране как реальная линия навигации на мини-карте HUD. Старт гонки оформлен как большая лаймовая фестивальная арка: нажатие запускает цветовой wipe и переводит игрока на игровой экран.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Фокальный субъект: слово «SMART‑6» в три гигантские строки на плоских цветовых полосах и спортивный автомобиль, врывающийся по диагонали с правого нижнего края.
• Тезис вход→преобразование→результат: касание CTA «ВЫЕХАТЬ НА ТРАССУ» или лаймовой арки «START» → короткий цветовой wipe-переход → игрок оказывается на игровом экране с автомобилем на трассе.
• Словарь движения: выразительные короткие цветовые wipe-переходы, живая бегущая строка фестивального радио, быстрый отклик педалей, подпрыгивание чекпоинта при пересечении.
• Скомпонованный первый кадр: ночной постер #1A1026, «SMART‑6» в три строки (~60% высоты), розовый маршрут-след, автомобиль справа снизу, лаймовая арка «START», CTA в нижней safe-area.
• Reduced-motion: маршрут и декорации статичны, ticker превращается в горизонтально прокручиваемую строку; текст и controls остаются целиком читаемыми.

9. Non-Functional Requirements

• HTML-реализация — explicit: игра создаётся на HTML и запускается в браузере.
• Мобильное управление — explicit: управление рассчитано на телефон; сенсорные элементы управления крупные, в safe-area, без точного касания.
• Читаемость на всех вьюпортах — explicit (направление): заголовки, wordmark, подписи, числа, текст карточек и controls целиком внутри вьюпорта и контейнера на 375px, 768px и 1280px; декор может обрезаться, но не перекрывает читаемый текст и controls.
• Производительность отклика — required_inference: быстрый отклик педалей и руля для плавного управления на мобильном устройстве.
• Доступность движения — explicit (направление): при prefers-reduced-motion — статичная компоновка, ticker горизонтально прокручиваемый.
• Анонимный доступ — explicit (Planning Scope): обе поверхности доступны без учётной записи (access_requirement: none).

10. Tech Stack

• Frontend: React — приложение UI, обслуживающее поверхности Landing и Игра.
• Backend: общий процесс FastAPI для прикладных API и доменных модулей (инфраструктура приложения; заявленные игровые требования реализуемы на клиенте).
• Database: MariaDB для данных приложения (провижининг; доменные сущности не заявлены).
• Контейнеризация: Docker / docker-compose для запуска сервисов backend, database, frontend.
• Игровая реализация: HTML/CSS/JavaScript в браузере (жёсткое ограничение источника).

11. Assumptions and Constraints

• Жёсткие ограничения: реализация на HTML; управление рассчитано на телефон.
• Анонимность: учётная запись не требуется; прогресс между сессиями не сохраняется (не заявлено).
• Стиль: аркадный фестивальный мир в духе Horizon без имитации официального брендинга, логотипов и защищённых материалов Forza Horizon.
• Инфраструктура: backend и MariaDB присутствуют в провижининге, но не создают обязательных серверных сценариев, аутентификации или доменных сущностей.
• Дизайн-направление «Скорость как яркий поп-фестиваль» авторитетно для визуала и движения.

12. Glossary

• Landing — анонимная публичная входная поверхность, объясняющая игру и ведущая в неё.
• Игра — основной игровой экран с открытым миром, автомобилем и сенсорным управлением.
• HUD — верхний интерфейс игры: наклонная цифра скорости, подпись KM/H, мини-карта с маршрутом.
• Wipe-переход — короткий цветовой переход между Landing и Игрой.
• Чекпоинт — дорожный маркер на маршруте, активирующийся при пересечении.
• Safe-area — безопасная зона экрана телефона, в которой целиком размещаются controls и подписи.