# 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.*