docs: PRD
This commit is contained in:
parent
9cbc401339
commit
9b8236f4f3
284
PRD.md
Normal file
284
PRD.md
Normal file
@ -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.*
|
||||||
Loading…
Reference in New Issue
Block a user