diff --git a/PRD.md b/PRD.md new file mode 100644 index 0000000..741f21d --- /dev/null +++ b/PRD.md @@ -0,0 +1,284 @@ +# PRD — Семейные игры (каталог для всей семьи) + +**Версия:** 3.0 +**Дата:** 26 июня 2026 +**Платформа:** статический лендинг (HTML + CSS + JS) +**URL:** https://pages.git.vibe42.kz/Yuliya/family-games-v3/ +**Репозиторий:** https://git.vibe42.kz/Yuliya/family-games-v3 + +--- + +## 1. Описание продукта + +**«Семейные игры»** — одностраничный каталог игр и активностей для семейного времяпрепровождения. Помогает семье быстро найти, во что поиграть вместе: по сезону, по категории, по возрасту ребёнка. Включает готовые загадки, шарады и сценарии для больших компаний (праздники, дни рождения). + +Продукт решает проблему «не знаем, чем заняться всей семьёй» и подбирает активности так, чтобы было интересно одновременно и трёхлетнему ребёнку, и родителям, и взрослому ребёнку, и даже кошкам. + +--- + +## 2. Цели и задачи + +### Цели +- **G1.** Дать семье единый источник идей для совместного досуга — без поиска в интернете каждый раз. +- **G2.** Подобрать игры, которые развивают ребёнка 3 лет и одновременно интересны взрослым (43, 44, 22 года). +- **G3.** Покрыть все сезоны и типы активности (улица, настольные, развивающие, компьютерные, прочие). +- **G4.** Обеспечить мгновенный доступ с любого устройства, в первую очередь с телефона. + +### Задачи (внутри продукта) +- Каталог игр с фильтрами и поиском. +- Группировка игр по сезонам года. +- Подборка игр, доступных 3-летнему ребёнку. +- Раздел «шарады и загадки» для устных игр без подготовки. +- Раздел для больших компаний (торжества, дни рождения). +- Функция «Сюрприз» — случайная игра, когда не могут выбрать. + +--- + +## 3. Целевая аудитория + +### Основная семья (пользователи продукта) +| Член семьи | Возраст | Роль в играх | +|------------|---------|--------------| +| Папа | 43 года | Ведущий, организатор, партнёр в настольных и компьютерных | +| Мама | 44 года | Наставник малыша, кулинарные и развивающие активности | +| Взрослый ребёнок | 22 года | Партнёр в компьютерных и сложных настольных, помощь с малышом | +| Малыш | 3 года | Главный участник развивающих и подвижных игр | +| 2 кошки | молодые, игривые | Участники «кошачьих» активностей 🐱 | + +### Дополнительная аудитория +- Гости на праздниках и днях рождения (6+ человек) — для раздела «Большая компания». + +### Ключевые потребности +- Игры должны быть **доступны 3-летке** (упрощённые правила, помощь взрослых). +- Игры должны быть **не скучны взрослым** (есть слой стратегии/юмора). +- Минимум подготовки — играть «здесь и сейчас». + +--- + +## 4. Пользовательские сценарии + +**Сценарий 1 — «Вечер пятницы, не знаем чем заняться».** +Пользователь открывает сайт на телефоне → нажимает «🎲 Сюрприз» → получает случайную игру с описанием → семья играет. + +**Сценарий 2 — «Зима, хочется на улицу».** +Пользователь открывает «📅 По сезонам» → раздел «❄️ Зима» → выбирает игру (например, «Снежинки под лупой») → читает «как играть» и «что развивает». + +**Сценарий 3 — «Чем занять 3-летку».** +В каталоге включается фильтр «👶 Для 3-летки» → остаются только игры 2+/3+ → родитель выбирает подходящую. + +**Сценарий 4 — «День рождения, пришли гости».** +Открывается раздел «🎂 Для большой компании» → выбирается сценарий (квест по станциям, квиз, фотобудка) для 6–20 человек. + +**Сценарий 5 — «Устная игра без подготовки».** +Открывается «🤔 Шарады и загадки» → семья по очереди открывает карточки и угадывает ответы. + +--- + +## 5. Структура продукта + +Одна страница, прокрутка вниз. Секции: + +1. **Header (липкий)** — лого «🎲 Семейные игры» + кнопка «🎲 Сюрприз». +2. **Hero** — заголовок, описание, бейджи состава семьи, кнопки навигации по разделам. +3. **Каталог игр** (`#catalog`) — фильтры + сетка карточек игр. +4. **Игры по сезонам** (`#seasons`) — игры, сгруппированные по 5 временам года. +5. **Шарады и загадки** (`#riddles`) — интерактивные карточки с ответами. +6. **Для большой компании** (`#big`) — витрина игр для 6+ человек. +7. **Footer**. + +--- + +## 6. Функциональные требования + +### 6.1. Каталог игр +- **Фильтр по категории:** Все / 🌳 На улице / ♟️ Настольные / 🧠 Развивающие / 💻 Компьютерные / ✨ Прочие. +- **Фильтр по сезону:** В любое время / 🌸 Весна / ☀️ Лето / 🍂 Осень / ❄️ Зима. +- **Фильтр по возрасту:** Все возраста / 👶 Для 3-летки (показывает только игры с возрастом 2+ или 3+). +- **Текстовый поиск** по названию игры. +- **Кнопка «Сбросить»** — обнуляет все фильтры. +- **Счётчик «Найдено игр: N»** — обновляется при фильтрации. +- **Пустое состояние** — если ничего не найдено, показывается подсказка сбросить фильтры. + +### 6.2. Карточка игры +Каждая карточка содержит: +- Эмодзи-иконка. +- Чип категории (с цветом категории). +- Название. +- Метаданные: сезон, 👥 количество игроков, 🎂 возраст. +- Описание «как играть» (2–4 предложения). +- Блок «🎯 Развивает: …» — какие навыки развивает (особенно важно для развивающих и игр малыша). + +### 6.3. Игры по сезонам +- 5 групп с заголовками: 🌸 Весна / ☀️ Лето / 🍂 Осень / ❄️ Зима / 🔄 В любое время. +- В каждой группе — счётчик количества игр. +- Сетка карточек внутри группы (та же карточка, что в каталоге). + +### 6.4. Шарады и загадки +- **Подраздел «Загадки»** — карточки с текстом загадки; клик по карточке открывает ответ. +- **Подраздел «Шарады»** — карточки с частями слова; клик открывает ответ-слово. +- Состояние «ответ скрыт / показан» переключается повторным кликом. + +### 6.5. Для большой компании +- Витрина из 6 сценариев для 6+ человек (Мафия, Крокодил, Музыкальные стулья, Семейный квиз, Квест по станциям, Фотобудка). +- Карточки с описанием и «что развивает». +- Без фильтров (статичная витрина). + +### 6.6. «Сюрприз» (модальное окно) +- Кнопка в header и доступна с любой точки страницы. +- Открывает модал со случайной игрой из текущей отфильтрованной выборки (или из всех, если фильтры пусты). +- Внутри модала: кнопка «🎲 Другая игра» (новый случайный выбор) и «Закрыть». +- Закрытие: клик по фону, кнопка «Закрыть», клавиша Escape. + +--- + +## 7. Контент + +### 7.1. Каталог игр (≈44 игры) +Распределение по категориям: +- 🌳 На улице — 19 игр (по всем сезонам). +- ♟️ Настольные — 5 игр. +- 🧠 Развивающие — 12 игр. +- 💻 Компьютерные — 4 игры. +- ✨ Прочие — 4 игры. + +### 7.2. Загадки — 20 штук +- 15 простых для малыша 3+ (животные, предметы, природа). +- 5 логических для взрослых и 22-летнего. + +### 7.3. Шарады — 6 штук +На сложение слов: ПАР+УС=ПАРУС, БАР+СУК=БАРСУК, ЛИСТ+ПАД=ЛИСТОПАД, САМ+ЛЁТ=САМОЛЁТ, ПАР+ВОЗ=ПАРОВОЗ, ЛЁД+КОЛ=ЛЕДОКОЛ. + +### 7.4. Большая компания — 6 сценариев +Мафия, Крокодил/Шарады, Музыкальные стулья, Семейный квиз, Квест по станциям, Фотобудка + челленджи. + +--- + +## 8. Нефункциональные требования + +### 8.1. Адаптивность +- Mobile-first. Корректно отображается на телефоне (от 320px), планшете и десктопе. +- Сетка карточек: 1 колонка на телефоне, 2 на планшете, 3 на десктопе (`repeat(auto-fill, minmax(290px, 1fr))`). +- Hero-заголовок уменьшается на мобиле (48px → 33px). + +### 8.2. Производительность +- Один файл `index.html` (HTML + CSS + JS inline), без внешних зависимостей и сборщиков. +- Без тяжёлых библиотек (никакого Bootstrap, jQuery, npm-зависимостей). +- Мгновенная загрузка и работа офлайн после открытия. + +### 8.3. Доступность и удобство +- Крупные тап-зоны (чипы, карточки, кнопки). +- Контрастный текст, читаемые шрифты системного стека. +- Эмодзи как иконки (не требуют шрифтовых загрузок). + +### 8.4. Браузеры +- Современные браузеры с поддержкой CSS custom properties и grid (все актуальные Chrome/Safari/Firefox/Edge). + +--- + +## 9. Технологический стек + +| Слой | Технология | +|------|------------| +| Разметка | HTML5 | +| Стили | CSS3 (inline, custom properties, grid, media queries) | +| Логика | Vanilla JavaScript (ES6+, template literals) | +| Данные | Встроенные JS-массивы (GAMES, RIDDLES, CHARADES, BIG) | +| Сборка | отсутствует | +| Хостинг | Gitea Pages (ветка `pages`), обслуживается Caddy | +| Контроль версий | Git, self-hosted Gitea на git.vibe42.kz | + +**Ограничения платформы (песочница Vibe42):** +- Только статика. Никакого бэкенда, БД, аутентификации, Docker, сборщиков. +- Публикация — push/загрузка файлов в ветку `pages` репозитория Gitea. + +--- + +## 10. Дизайн-система + +### Палитра (тёплая, дружелюбная) +| Token | Hex | Назначение | +|-------|-----|------------| +| `--bg` | `#FFF9F0` | Основной фон (кремовый) | +| `--ink` | `#2A2530` | Основной текст (тёмный тёплый) | +| `--card` | `#FFFFFF` | Фон карточек | +| `--muted` | `#7A7382` | Вторичный текст | +| `--line` | `#EEE6D8` | Границы, сепараторы | +| `--accent` | `#FF6B5B` | Основной акцент (коралл) | +| `--accent-soft` | `#FFE7E2` | Мягкий фон акцента | +| `--accent2` | `#2EC4B6` | Вторичный акцент (бирюза) | +| `--accent2-soft` | `#DDF6F3` | Мягкий фон бирюзы | +| `--gold` | `#FFB627` | Декоративный | + +### Цвета категорий +- На улице `#5BBF8A` · Настольные `#8B6FD0` · Развивающие `#FF9149` · Компьютерные `#4A90E2` · Прочие `#E85A8C` · Большая компания `#F2A900` + +### Типографика +- Шрифт: системный стек `-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif`. +- h1 (hero) — 48px / 800 (мобила 33px); h2 (секции) — 30–34px / 800; h3 (карточки) — 19px / 800; body — 17px / 400. + +### Лейаут +- Контейнер `max-width: 1140px`. +- Карточки `border-radius: 16–18px`, кнопки и чипы — `8–999px`. + +--- + +## 11. Метрики успеха + +- **M1.** Все запланированные разделы (5 шт.) присутствуют и работают. +- **M2.** Каталог содержит ≥ 40 игр, из них ≥ 15 доступных 3-летке. +- **M3.** Все фильтры (категория, сезон, возраст, поиск) корректно фильтруют и сбрасываются. +- **M4.** Страница открывается на телефоне без горизонтального скролла. +- **M5.** Время до полной интерактивности < 1 сек (один файл, без внешних запросов). + +--- + +## 12. Roadmap (что можно добавить) + +### Ближайшее (P1) +- Картинки/иллюстрации к играм (плейсхолдеры или эмодзи-сцены). +- Фильтр «по количеству игроков» (2 / 3–4 / 5+). +- Возможность «сохранить» любимые игры (localStorage, без бэкенда). +- Печатная версия карточек (печать выбранного набора). + +### Среднесрочное (P2) +- Больше загадок и шарад (по темам: про кошек, про еду, про транспорт). +- Режим «счётчик очков» для большой компании (квиз, шарады по командам). +- Звуковые эффекты / анимации для малыша. +- Генератор «план выходного дня» — подборка 3 игр на сезон. + +### Долгосрочное (P3) +- Многоязычность (русский / казахский / английский). +- Загрузка собственных игр семьёй через редактор (localStorage). +- PWA-установка на телефон как приложение. + +--- + +## 13. Известные ограничения и риски + +- **Публикация через Gitea API.** `git push` для аккаунта заблокирован pre-receive hook сервера («User permission denied»). Обход — загрузка файлов через Gitea Contents API напрямую в ветку `pages`. Требует ручного шага при каждом обновлении. +- **Нет редактирования контента пользователем.** Все данные зашиты в `index.html`. Добавление игр требует правки кода. +- **Офлайн-данные.** Нет синхронизации между устройствами — каждый открывает свою копию. +- **Эмодзи-рендеринг** зависит от ОС устройства (на старых Windows могут отличаться). + +--- + +## 14. Статус реализации + +| Раздел | Статус | +|--------|--------| +| Hero + навигация | ✅ Готово | +| Каталог с фильтрами (категория/сезон/возраст/поиск) | ✅ Готово | +| Карточка игры (как играть + что развивает) | ✅ Готово | +| Игры по сезонам | ✅ Готово | +| Фильтр «Для 3-летки» | ✅ Готово | +| Шарады и загадки | ✅ Готово | +| Для большой компании | ✅ Готово | +| «Сюрприз» (модал) | ✅ Готово | +| Адаптив под телефон | ✅ Готово | +| Публикация на Pages | ✅ Готово (через API) | +| Картинки к играм | ⏳ Не сделано (roadmap P1) | +| Сохранение избранного | ⏳ Не сделано (roadmap P1) | + +--- + +*Документ сформирован на основе реализованного продукта. Обновлять при добавлении разделов из roadmap.*