744 lines
35 KiB
Markdown
744 lines
35 KiB
Markdown
Вот подробно расписанное **Техническое задание (ТЗ)** для разработки Telegram Mini App с викторинами, QR-сканированием и внутренней валютой:
|
||
|
||
---
|
||
## 1. 🎯 Общее описание проекта
|
||
|
||
Необходимо разработать **Telegram Mini App** — веб-приложение, встроенное в Telegram, где пользователи могут:
|
||
|
||
- Проходить викторины и получать за них внутреннюю валюту.
|
||
- Сканировать QR-коды (вне приложения и внутри) для получения валюты.
|
||
- Тратить накопленную валюту в магазине на призы.
|
||
- Быстро открывать конкретные викторины по QR-коду.
|
||
|
||
Приложение должно быть **быстрым**, **интуитивно понятным**, **мобильным** и **интегрированным с Telegram Web App API**.
|
||
|
||
---
|
||
|
||
## 2. 🧩 Основные функциональные требования
|
||
|
||
### 2.1. 🎓 Викторины
|
||
|
||
- Пользователь может просматривать список доступных викторин.
|
||
- Каждая викторина имеет:
|
||
- Название
|
||
- Описание
|
||
- Количество вопросов
|
||
- Награду в валюте за прохождение (фиксированная или по количеству правильных ответов)
|
||
- Статус (доступна / уже пройдена / скоро доступна)
|
||
- Прохождение викторины:
|
||
- По одному вопросу на экране
|
||
- Варианты ответов (один или несколько — уточнить по типу вопроса)
|
||
- Таймер на вопрос (опционально, если требуется)
|
||
- По завершению — показ результатов и начисление валюты
|
||
- Повторное прохождение викторины — **запрещено** (или с ограничением, например, раз в N дней — уточнить).
|
||
- История пройденных викторин с датой и полученной наградой.
|
||
|
||
### 2.2. 💰 Внутренняя валюта
|
||
|
||
- Единая валюта для всей системы (например, “Коины”, “Звезды”, “Баллы” — название уточняется).
|
||
- Баланс отображается в шапке приложения.
|
||
- Начисляется:
|
||
- За прохождение викторин
|
||
- За сканирование QR-кодов
|
||
- Не сгорает, накапливается.
|
||
- История транзакций (начисления и траты).
|
||
|
||
### 2.3. 🛒 Магазин призов
|
||
|
||
- Раздел с товарами/призами, которые можно купить за валюту.
|
||
- Каждый приз имеет:
|
||
- Название
|
||
- Описание
|
||
- Изображение
|
||
- Стоимость в валюте
|
||
- Статус (доступен / закончился / скоро появится)
|
||
- При покупке:
|
||
- Списание валюты
|
||
- Уведомление об успешной покупке
|
||
- Инструкция по получению приза (например, код, ссылка, инструкция “забрать в университете” и т.п.)
|
||
- История покупок.
|
||
|
||
### 2.4. 📷 QR-сканирование
|
||
|
||
#### 2.4.1. Сканирование через приложение
|
||
|
||
- В приложении есть кнопка “Сканировать QR-код”.
|
||
- При нажатии открывается камера телефона (с разрешения пользователя).
|
||
- Поддержка сканирования QR-кодов, содержащих:
|
||
- Просто награду (например, `reward:50`)
|
||
- Ссылку на открытие конкретной викторины (например, `quiz:id=123`)
|
||
- После сканирования:
|
||
- Если это награда — начисляется валюта, показывается уведомление.
|
||
- Если это викторина — открывается страница этой викторины с возможностью сразу начать прохождение.
|
||
- Логирование всех сканирований (дата, тип, ID пользователя, результат).
|
||
|
||
#### 2.4.2. Сканирование вне приложения (через камеру телефона)
|
||
|
||
- QR-коды должны содержать ссылку вида:
|
||
`https://t.me/your_bot?startapp=reward_50`
|
||
или
|
||
`https://t.me/your_bot?startapp=quiz_123`
|
||
- При открытии такой ссылки через камеру или другой сканер — открывается Telegram Mini App с параметром.
|
||
- Приложение должно обработать параметр:
|
||
- Если `reward_X` — начислить X валюты.
|
||
- Если `quiz_Y` — открыть викторину с ID=Y.
|
||
- Показать пользователю уведомление о результате (например: “+50 монет получено!” или “Викторина ‘Знаешь ли ты бренд?’ готова к прохождению!”).
|
||
|
||
### 2.5. 🔗 Глубокие ссылки (Deep Links)
|
||
|
||
- Поддержка параметров `startapp=...` для:
|
||
- Начисления валюты
|
||
- Открытия викторины
|
||
- Перехода в магазин
|
||
- Перехода к конкретному призу
|
||
- Все ссылки должны работать как из QR, так и из сообщений, постов, рекламы и т.п.
|
||
|
||
---
|
||
|
||
## 3. 🖥️ Технические требования
|
||
|
||
### 3.1. Платформа
|
||
|
||
- Telegram Mini App (веб-приложение на React / Vue / Svelte / чистом JS — на выбор команды).
|
||
- Работает внутри Telegram на iOS, Android, Desktop.
|
||
- Адаптивный дизайн (мобильный first).
|
||
|
||
### 3.2. Интеграции
|
||
|
||
- Telegram Web App SDK (для получения данных пользователя, закрытия приложения, отправки данных и т.п.)
|
||
- Хранение данных: Firebase / Supabase / собственный бэкенд (уточнить).
|
||
- Аутентификация: через Telegram User ID (никаких логинов/паролей).
|
||
|
||
### 3.3. QR-сканер
|
||
|
||
- Использовать библиотеку типа `zxing-js/library` или `html5-qrcode` для встроенного сканирования.
|
||
- Запрос разрешения на камеру.
|
||
- Обработка ошибок (камера недоступна, QR не распознан и т.п.).
|
||
|
||
### 3.4. Безопасность
|
||
|
||
- Все действия пользователя привязаны к его `Telegram User ID`.
|
||
- Проверка на сервере при начислении валюты (чтобы нельзя было подделать запросы).
|
||
- Валидация QR-данных на стороне сервера (если QR генерируется динамически).
|
||
|
||
### 3.5. Производительность
|
||
|
||
- Быстрая загрузка приложения (< 2 сек).
|
||
- Минимизация размера бандла.
|
||
- Кэширование статики.
|
||
- Lazy loading для изображений и неосновных экранов.
|
||
|
||
---
|
||
|
||
## 4. 🎨 UI/UX требования
|
||
|
||
- Чистый, современный дизайн, адаптированный под Telegram.
|
||
- Минимум анимаций, но с приятными микро-интеракциями.
|
||
- Интуитивная навигация (вкладки: Викторины, Магазин, Профиль, Сканер).
|
||
- Уведомления о начислениях и действиях (всплывающие тосты).
|
||
- Темная/светлая тема — по системным настройкам пользователя.
|
||
|
||
---
|
||
|
||
## 5. 📊 Административная часть (опционально, но желательно)
|
||
|
||
- Панель администратора (отдельная или встроенная) для:
|
||
- Создания/редактирования викторин
|
||
- Настройки наград
|
||
- Генерации QR-кодов с наградами/викторинами
|
||
- Просмотра статистики (пользователи, активность, сканирования, покупки)
|
||
- Управления товарами в магазине
|
||
|
||
---
|
||
|
||
## 6. 📅 Этапы разработки (ориентировочно)
|
||
|
||
| Этап | Описание | Срок |
|
||
| ----------------------- | --------------------------------------------------- | -------- |
|
||
| 1. Прототип и дизайн | Создание wireframe, дизайн-макетов, согласование | 3–5 дней |
|
||
| 2. Ядро приложения | Настройка Telegram Mini App, авторизация, навигация | 3 дня |
|
||
| 3. Викторины | Создание, прохождение, начисление валюты | 5 дней |
|
||
| 4. QR-сканирование | Встроенное + обработка deep links | 4 дня |
|
||
| 5. Магазин и валюта | Баланс, покупки, история | 4 дня |
|
||
| 6. Админка (если нужно) | CRUD для контента | 5 дней |
|
||
| 7. Тестирование и фиксы | QA, оптимизация, багфиксы | 3–5 дней |
|
||
| 8. Деплой и запуск | Публикация, настройка бота, генерация QR | 2 дня |
|
||
|
||
---
|
||
|
||
## 7. ✅ Ожидаемый результат
|
||
|
||
- Работающее Telegram Mini App, доступное по ссылке через бота.
|
||
- Возможность проходить викторины и получать валюту.
|
||
- Возможность сканировать QR-коды как внутри приложения, так и через камеру телефона — с начислением валюты или открытием викторины.
|
||
- Магазин с обменом валюты на призы.
|
||
- Адаптивный интерфейс, быстрая работа, интуитивная навигация.
|
||
- Документация по генерации QR-кодов и deep links.
|
||
|
||
---
|
||
|
||
## 8. 📌 Дополнительно (уточнить заказчику)
|
||
|
||
- Название валюты?
|
||
- Будут ли викторины с таймером?
|
||
- Можно ли повторно проходить викторины? С каким интервалом?
|
||
- Типы вопросов: только один правильный ответ, или множественный выбор?
|
||
- Как пользователь получает призы из магазина? (физически, цифровой код, купон и т.п.)
|
||
- Нужна ли аналитика (Google Analytics, Яндекс.Метрика)?
|
||
- Нужна ли панель администратора? Если да — какие права доступа?
|
||
|
||
---
|
||
|
||
## 9. 📬 Контакты и поддержка
|
||
|
||
- После сдачи — техническая поддержка на 14–30 дней.
|
||
- Возможность доработок по отдельному соглашению.
|
||
|
||
---
|
||
|
||
✅ **Готово к передаче команде разработки.**
|
||
|
||
Если нужно — могу подготовить дизайн-макеты, структуру API, примеры QR-ссылок или спецификацию для бэкенда.
|
||
|
||
---
|
||
|
||
# 🧩 ДОПОЛНЕННОЕ ТЕХНИЧЕСКОЕ ЗАДАНИЕ (v2.0)
|
||
|
||
---
|
||
|
||
## 🔁 Обновления по ответам заказчика
|
||
|
||
| Пункт | Ответ | Влияние на ТЗ |
|
||
|-------|-------|----------------|
|
||
| 1. Название валюты | **Звезды** ✨ | Все упоминания “валюты” → “Звёзды”. UI: иконка звезды, анимация при начислении. |
|
||
| 2. Таймер в викторинах | **Да, может быть** | Добавить в модель викторины поле `hasTimer: boolean`, `timerPerQuestion: number (сек)`. |
|
||
| 3. Повторное прохождение | **Да, с интервалом** | Добавить в модель викторины: `canRepeat: boolean`, `repeatCooldownHours: number`. Хранить дату последнего прохождения у пользователя. |
|
||
| 4. Типы вопросов | **Один или несколько ответов** | Вопросы имеют поле `type: "single" | "multiple"`. В UI — чекбоксы или радиокнопки. |
|
||
| 5. Получение призов | **Физически + цифровые инструкции** | В модели приза — поле `deliveryType: "physical" | "digital"` + `instructions: string`. |
|
||
| 6. Аналитика | **Не нужна** | Исключить GA/YM. Можно добавить внутреннюю аналитику в админку. |
|
||
| 7. Админка | **Да, с ролями: Админ → Операторы** | Добавить систему ролей. Админ может управлять операторами и балансами. Оператор — только контент. |
|
||
|
||
---
|
||
|
||
## 🖼️ 1. ДИЗАЙН-СТРУКТУРА (Wireframe + Навигация)
|
||
|
||
### 📱 Основные экраны:
|
||
|
||
#### 1. Главная (Викторины)
|
||
- Шапка: аватарка пользователя, баланс ⭐ (например: “1250 ⭐”)
|
||
- Список викторин (карточки):
|
||
- Название
|
||
- Превью-картинка
|
||
- Награда (⭐)
|
||
- Таймер (если есть)
|
||
- Кнопка “Начать” / “Повторить через 3ч” / “Пройдено”
|
||
- Кнопка “Сканировать QR” внизу или в шапке
|
||
|
||
#### 2. Экран викторины (вопрос)
|
||
- Прогресс: 3/10
|
||
- Таймер (если включен): обратный отсчет
|
||
- Текст вопроса
|
||
- Варианты ответов (радио / чекбоксы)
|
||
- Кнопка “Далее” (активна после выбора)
|
||
- Кнопка “Назад” (если не первый вопрос)
|
||
|
||
#### 3. Результаты викторины
|
||
- “Вы набрали 8/10!”
|
||
- “+250 ⭐ начислено!” (анимация звезды)
|
||
- Кнопка “В магазин” / “К викторинам”
|
||
|
||
#### 4. Магазин
|
||
- Список призов (карточки):
|
||
- Название
|
||
- Изображение
|
||
- Цена в ⭐
|
||
- Кнопка “Купить” (если хватает звезд) / “Недостаточно ⭐”
|
||
- При покупке — модалка с инструкцией получения приза
|
||
|
||
#### 5. Профиль
|
||
- Имя, ID, аватар
|
||
- Баланс ⭐
|
||
- История:
|
||
- Начисления (викторины, QR)
|
||
- Покупки
|
||
- Кнопка “Сканировать QR”
|
||
|
||
#### 6. QR-сканер (встроенный)
|
||
- Fullscreen камера
|
||
- Оверлей с рамкой
|
||
- Кнопка “Отмена”
|
||
- При успешном сканировании — модалка с результатом
|
||
|
||
#### 7. Админка (отдельный вход / скрытый URL)
|
||
- Авторизация по Telegram ID (белый список админов/операторов)
|
||
- Вкладки:
|
||
- Управление викторинами (CRUD)
|
||
- Управление призами (CRUD)
|
||
- Управление пользователями (поиск, ручное начисление/списание ⭐ — только для админа)
|
||
- Управление операторами (назначение/удаление — только для админа)
|
||
- Статистика (количество прохождений, сканирований, покупок)
|
||
|
||
---
|
||
|
||
## 🌐 2. СПЕЦИФИКАЦИЯ API (если используется бэкенд)
|
||
|
||
> Предполагаем, что бэкенд на Node.js / Python / Go, с REST API.
|
||
|
||
### 🧑💻 Авторизация
|
||
- Все запросы — с `user_id` из Telegram WebApp initData (проверяется на бэкенде)
|
||
|
||
### 🎯 Викторины
|
||
|
||
```
|
||
GET /quizzes — список всех активных викторин
|
||
GET /quizzes/{id} — детали викторины + вопросы
|
||
POST /quizzes/{id}/submit — отправка ответов → возвращает результат + начисленные ⭐
|
||
GET /quizzes/{id}/can-repeat — проверка, можно ли повторить (возвращает { canRepeat: true, nextAvailableAt: timestamp })
|
||
```
|
||
|
||
### 🛍️ Магазин
|
||
|
||
```
|
||
GET /rewards — список призов
|
||
POST /rewards/{id}/purchase — списание ⭐, создание записи о покупке
|
||
GET /user/purchases — история покупок пользователя
|
||
```
|
||
|
||
### ⭐ Баланс и транзакции
|
||
|
||
```
|
||
GET /user/balance — текущий баланс
|
||
GET /user/transactions — история (сортировка по дате)
|
||
POST /admin/grant-stars — (только админ) ручное начисление/списание (тело: { user_id, amount, reason })
|
||
```
|
||
|
||
### 📷 QR и Deep Links
|
||
|
||
```
|
||
POST /qr/validate — принимает payload (например, “reward:50” или “quiz:123”), возвращает действие + данные
|
||
```
|
||
|
||
### 👨💼 Админка (требуется роль)
|
||
|
||
```
|
||
POST /admin/quizzes — создание викторины
|
||
PUT /admin/quizzes/{id} — редактирование
|
||
DELETE /admin/quizzes/{id}
|
||
POST /admin/rewards — создание приза
|
||
POST /admin/operators — назначение оператора (тело: { telegram_id, name })
|
||
DELETE /admin/operators/{id}
|
||
GET /admin/analytics — статистика (кол-во пользователей, прохождений, сканирований, выданных ⭐ и т.п.)
|
||
```
|
||
|
||
---
|
||
|
||
## 🔗 3. ПРИМЕРЫ QR-ССЫЛОК И DEEP LINKS
|
||
|
||
Все ссылки ведут на одного Telegram-бота (например, `@MyQuizBot`).
|
||
|
||
### 🎁 Начисление звезд:
|
||
```
|
||
https://t.me/MyQuizBot?startapp=reward_50
|
||
https://t.me/MyQuizBot?startapp=reward_100
|
||
```
|
||
|
||
### 🧠 Открытие викторины:
|
||
```
|
||
https://t.me/MyQuizBot?startapp=quiz_123
|
||
https://t.me/MyQuizBot?startapp=quiz_456
|
||
```
|
||
|
||
### 🛒 Переход в магазин / к призу:
|
||
```
|
||
https://t.me/MyQuizBot?startapp=shop
|
||
https://t.me/MyQuizBot?startapp=reward_789 // ID приза
|
||
```
|
||
|
||
> При открытии приложение парсит `startapp`, определяет тип и выполняет действие.
|
||
|
||
---
|
||
|
||
## 👮 4. СТРУКТУРА АДМИНКИ + РОЛИ
|
||
|
||
### 🧑💼 Роли:
|
||
|
||
| Роль | Права |
|
||
|------|-------|
|
||
| **Администратор** | Полный доступ: CRUD викторин и призов, управление операторами, ручное изменение балансов пользователей, просмотр аналитики |
|
||
| **Оператор** | Только CRUD викторин и призов. Без доступа к финансам и пользователям. |
|
||
|
||
### 🔐 Авторизация в админке:
|
||
- Только по белому списку Telegram ID (хранится в БД или .env).
|
||
- При открытии админки — проверка: если user.id есть в списке админов/операторов → показать соответствующий интерфейс.
|
||
|
||
### 📊 Аналитика в админке (внутренняя, без GA):
|
||
- Графики:
|
||
- Активные пользователи (день/неделя/месяц)
|
||
- Количество прохождений викторин
|
||
- Количество сканирований QR
|
||
- Выдано ⭐ всего / потрачено в магазине
|
||
- ТОП-3 популярных викторин / призов
|
||
|
||
---
|
||
|
||
## 🗃️ 5. СТРУКТУРА БАЗЫ ДАННЫХ (основные сущности)
|
||
|
||
### 👤 Пользователи (`users`)
|
||
- `telegram_id` (PK)
|
||
- `username`
|
||
- `first_name`, `last_name`
|
||
- `stars_balance`
|
||
- `created_at`
|
||
|
||
### 📚 Викторины (`quizzes`)
|
||
- `id` (PK)
|
||
- `title`
|
||
- `description`
|
||
- `image_url`
|
||
- `reward_stars`
|
||
- `has_timer`: boolean
|
||
- `timer_per_question`: int (сек)
|
||
- `can_repeat`: boolean
|
||
- `repeat_cooldown_hours`: int
|
||
- `is_active`: boolean
|
||
- `created_by` (operator_id)
|
||
- `created_at`
|
||
|
||
### ❓ Вопросы (`questions`)
|
||
- `id`
|
||
- `quiz_id`
|
||
- `text`
|
||
- `type`: “single” | “multiple”
|
||
- `options`: JSON [{id, text, is_correct}]
|
||
- `order_index`
|
||
|
||
### 📊 Попытки прохождения (`quiz_attempts`)
|
||
- `id`
|
||
- `user_id`
|
||
- `quiz_id`
|
||
- `score`
|
||
- `stars_earned`
|
||
- `completed_at`
|
||
- `answers`: JSON (лог выбранных вариантов)
|
||
|
||
### 🎁 Призы (`rewards`)
|
||
- `id`
|
||
- `title`
|
||
- `description`
|
||
- `image_url`
|
||
- `price_stars`
|
||
- `delivery_type`: “physical” | “digital”
|
||
- `instructions`: text
|
||
- `stock`: int (0 = бесконечно)
|
||
- `is_active`
|
||
- `created_by`
|
||
- `created_at`
|
||
|
||
### 🛒 Покупки (`purchases`)
|
||
- `id`
|
||
- `user_id`
|
||
- `reward_id`
|
||
- `stars_spent`
|
||
- `purchased_at`
|
||
- `status`: “pending” | “delivered” | “cancelled”
|
||
|
||
### 📷 Сканирования QR (`qr_scans`)
|
||
- `id`
|
||
- `user_id`
|
||
- `type`: “reward” | “quiz” | “shop”
|
||
- `value`: “50”, “123”, etc.
|
||
- `scanned_at`
|
||
- `source`: “in_app” | “external”
|
||
|
||
### 👮 Админы и операторы (`admins`)
|
||
- `telegram_id` (PK)
|
||
- `role`: “admin” | “operator”
|
||
- `name`
|
||
- `added_by` (admin who added)
|
||
- `added_at`
|
||
|
||
Ниже — **детальное текстовое описание Figma-макетов** для вашего Telegram Mini App, которое вы (или дизайнер) сможете легко перенести в Figma. Я опишу **все экраны, компоненты, состояния, цвета, типографику и поведение** — как будто вы открываете готовый Figma-файл.
|
||
|
||
---
|
||
|
||
# 🎨 FIGMA-МАКЕТЫ: Telegram Mini App “Звёздные Викторины”
|
||
|
||
> 📱 Формат: Mobile (375x812 — iPhone 13/14), адаптивный под Telegram Web App
|
||
> 🎨 Стиль: Telegram-совместимый, минималистичный, с акцентами на звёзды и геймификацию
|
||
|
||
---
|
||
|
||
## 🌈 Глобальные стили
|
||
|
||
### Цвета:
|
||
|
||
| Назначение | HEX | Применение |
|
||
|------------|-----|------------|
|
||
| Primary (Звёзды) | `#FFD700` | Иконки валюты, кнопки, акценты |
|
||
| Background | `#F5F5F5` (светлая) / `#1E1E1E` (тёмная) | Автоматически по системной теме |
|
||
| Text Primary | `#000000` / `#FFFFFF` | Основной текст |
|
||
| Text Secondary | `#757575` / `#B0B0B0` | Подписи, описания |
|
||
| Success | `#4CAF50` | Успешные действия |
|
||
| Error | `#F44336` | Ошибки, недостаточно звёзд |
|
||
| Border / Divider | `#E0E0E0` / `#333333` | Разделители |
|
||
|
||
### Типографика:
|
||
|
||
- **Основной шрифт**: `SF Pro Display` (iOS) / `Roboto` (Android) — системные
|
||
- Заголовки: SemiBold 20–24px
|
||
- Текст: Regular 16px
|
||
- Мелкий текст: Regular 12–14px
|
||
|
||
### Иконки:
|
||
|
||
- Использовать [Telegram UI Icons](https://core.telegram.org/bots/webapps#icons) или [Material Icons](https://fonts.google.com/icons)
|
||
- Кастомные иконки: звезда ⭐, QR-сканер, таймер, магазин, профиль
|
||
|
||
---
|
||
|
||
## 📱 ЭКРАНЫ
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 1: Главная — Список викторин
|
||
|
||
**Статус-бар**:
|
||
- Telegram-стиль: имя бота + кнопка “Назад” (если не корень)
|
||
|
||
**Шапка**:
|
||
- Аватар пользователя (слева, круглый, 32x32)
|
||
- Приветствие: “Привет, [Имя]!”
|
||
- Баланс: “1250 ⭐” — большая жёлтая звезда рядом, крупный шрифт 20px SemiBold
|
||
|
||
**Кнопка “Сканировать QR”**:
|
||
- Фиксированная внизу экрана
|
||
- Иконка сканера + текст “Сканировать QR”
|
||
- Цвет: Primary (жёлтый), закруглённые углы
|
||
|
||
**Список карточек викторин**:
|
||
|
||
Каждая карточка:
|
||
- Обложка (16:9, закруглённые углы)
|
||
- Наложение: градиент тёмный → прозрачный снизу
|
||
- Название (белый, SemiBold, поверх градиента)
|
||
- Награда: “+250 ⭐” (жёлтая звезда + текст, справа внизу)
|
||
- Таймер (если есть): иконка часов + “30 сек/вопрос” (серый текст)
|
||
- Статус-бейдж:
|
||
- “Начать” — зелёная кнопка
|
||
- “Повторить через 3ч” — серая кнопка с иконкой часов
|
||
- “Пройдено ✅” — зелёная галочка
|
||
|
||
**Поведение**:
|
||
- При нажатии “Начать” → переход на экран первого вопроса
|
||
- При нажатии “Повторить через...” → тост: “Доступно через 3 часа”
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 2: Вопрос викторины
|
||
|
||
**Прогресс-бар**:
|
||
- Сверху: “Вопрос 3 из 10” + ProgressBar (10 сегментов, текущий — жёлтый)
|
||
|
||
**Таймер (если включен)**:
|
||
- Круговой таймер вокруг номера вопроса или отдельно сверху
|
||
- Обратный отсчёт: “00:25” — крупно, жёлтым, если <10 сек — мигает красным
|
||
|
||
**Текст вопроса**:
|
||
- Центрирован, крупный шрифт 18px SemiBold, отступы по бокам
|
||
|
||
**Варианты ответов**:
|
||
- Кнопки-карточки (по 1 на строку)
|
||
- Одиночный выбор: радиокнопка слева + текст
|
||
- Множественный: чекбокс + текст
|
||
- При выборе — подсветка рамки Primary-цветом
|
||
- Неактивные — серые
|
||
|
||
**Кнопка “Далее”**:
|
||
- Снизу, активна только если выбран хотя бы один ответ
|
||
- При нажатии — переход к следующему вопросу / результатам
|
||
|
||
**Кнопка “Назад”**:
|
||
- Только если вопрос не первый — в шапке слева
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 3: Результаты викторины
|
||
|
||
**Фон**:
|
||
- Градиентный (жёлтый → оранжевый) или анимированная звёздная анимация
|
||
|
||
**Текст**:
|
||
- “🎉 Поздравляем!” — крупно, 28px
|
||
- “Вы набрали 8 из 10!” — 20px SemiBold
|
||
- “+250 ⭐ начислено!” — с анимацией “всплывающей звезды” (можно сделать через CSS/JS позже)
|
||
|
||
**Кнопки**:
|
||
- “К викторинам” — Outline-стиль
|
||
- “В магазин” — Solid Primary (жёлтая)
|
||
|
||
**Анимация**:
|
||
- При открытии — звёзды “падают” сверху (визуальный эффект праздника)
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 4: Магазин призов
|
||
|
||
**Шапка**:
|
||
- “Магазин призов” + иконка 🛒
|
||
|
||
**Сетка карточек (2 колонки)**:
|
||
|
||
Каждая карточка:
|
||
- Изображение товара (1:1, закруглённые углы)
|
||
- Название (SemiBold 16px)
|
||
- Цена: “500 ⭐” (жёлтая звезда + крупный текст)
|
||
- Статус: “В наличии” / “Закончился” (серый/красный бейдж)
|
||
- Кнопка: “Купить” (активна, Primary) / “Недостаточно ⭐” (серая, неактивна)
|
||
|
||
**При нажатии “Купить”**:
|
||
→ Открывается модалка:
|
||
|
||
> **Подтверждение покупки**
|
||
> “Вы уверены, что хотите купить ‘Футболку бренда’ за 500 ⭐?”
|
||
> Кнопки: “Отмена” / “Купить” (красная)
|
||
> → При подтверждении: списание ⭐, переход на экран инструкции
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 5: Инструкция получения приза
|
||
|
||
**Заголовок**: “Как получить приз?”
|
||
|
||
**Текст**:
|
||
- “Приходите в наш офис по адресу: ул. Ленина, 10 с 10:00 до 18:00 и назовите код: **STAR-7B2F**”
|
||
- (или для цифрового: “Ваш промокод: **DIGI-9X8A**. Используйте его на сайте example.com”)
|
||
|
||
**Кнопка**: “Скопировать код” + иконка буфера обмена
|
||
**Кнопка**: “Назад в магазин”
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 6: Профиль
|
||
|
||
**Шапка**:
|
||
- Большой аватар (80x80)
|
||
- Имя + username
|
||
- “ID: 123456789”
|
||
|
||
**Блок “Баланс”**:
|
||
- Крупно: “1250 ⭐”
|
||
- Кнопка “История” справа
|
||
|
||
**История (вкладка)**:
|
||
- Вкладки: “Начисления” / “Покупки”
|
||
- Список:
|
||
- “Викторина ‘Бренды’ — +250 ⭐ — 12 мая 14:30”
|
||
- “QR-сканирование — +50 ⭐ — 12 мая 10:15”
|
||
- “Покупка: Футболка — -500 ⭐ — 11 мая 16:00”
|
||
|
||
**Кнопка “Сканировать QR”** — внизу
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 7: QR-сканер (встроенный)
|
||
|
||
**Фон**:
|
||
- Полноэкранный поток с камеры (черный, если камера не готова)
|
||
|
||
**Оверлей**:
|
||
- Центральная рамка (квадрат, 240x240, с анимированными углами)
|
||
- Подсказка: “Наведите на QR-код”
|
||
- Кнопка “Отмена” — в шапке
|
||
|
||
**При сканировании**:
|
||
→ Звук + вибрация → переход на модалку:
|
||
|
||
> **Успех!**
|
||
> “+50 ⭐ получено!”
|
||
> (или “Открыта викторина ‘Знаешь ли ты бренд?’ — нажмите ‘Начать’”)
|
||
> Кнопки: “ОК” / “Начать”
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 8: Админка — Вход (скрытый)
|
||
|
||
**Защищённый URL**: `/admin` — открывается только если Telegram ID в белом списке
|
||
|
||
**Экран входа**:
|
||
- Логотип приложения
|
||
- “Добро пожаловать, [Имя]!”
|
||
- “Ваша роль: Администратор / Оператор”
|
||
- Кнопка “Перейти в панель”
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 9: Админка — Главная
|
||
|
||
**Меню (слева или вкладки сверху)**:
|
||
- Викторины
|
||
- Призы
|
||
- Пользователи (только админ)
|
||
- Операторы (только админ)
|
||
- Аналитика
|
||
|
||
**Главная статистика (дашборд)**:
|
||
- 4 карточки:
|
||
- Пользователей: 1 250
|
||
- Пройдено викторин: 3 842
|
||
- Выдано ⭐: 250 000
|
||
- Куплено призов: 1 024
|
||
|
||
**Графики**:
|
||
- Линейный график: активность по дням (прохождения, сканирования, покупки)
|
||
|
||
---
|
||
|
||
### 🖼️ ЭКРАН 10: Админка — Создание викторины (форма)
|
||
|
||
**Поля**:
|
||
|
||
- Название (текстовое поле)
|
||
- Описание (textarea)
|
||
- Обложка (загрузка изображения)
|
||
- Награда (число, ⭐)
|
||
- Таймер: чекбокс “Включить таймер” → поле “сек/вопрос”
|
||
- Повтор: чекбокс “Разрешить повтор” → поле “часов до повтора”
|
||
- Вопросы (динамический список — кнопка “+ Добавить вопрос”)
|
||
|
||
**Вопрос**:
|
||
- Текст вопроса
|
||
- Тип: селект “Один ответ” / “Несколько ответов”
|
||
- Варианты: текст + чекбокс “Правильный”
|
||
- Кнопка “Удалить вопрос”
|
||
|
||
**Кнопка**: “Сохранить викторину”
|
||
|
||
---
|
||
|
||
## 🧩 Компоненты для переиспользования (в Figma — Components)
|
||
|
||
1. **Карточка викторины**
|
||
2. **Карточка приза**
|
||
3. **Кнопка Primary / Secondary / Disabled**
|
||
4. **Модальное окно**
|
||
5. **Строка истории транзакции**
|
||
6. **Прогресс-бар вопросов**
|
||
7. **Таймер (круговой и линейный)**
|
||
8. **Бейдж статуса (Пройдено / Недоступно / В наличии)**
|
||
|
||
---
|
||
|
||
## 📲 Адаптивность
|
||
|
||
- Все экраны должны масштабироваться под разные размеры экранов (от 320px до 430px шириной)
|
||
- Отступы: 16px по бокам, 12–24px между элементами
|
||
- Шрифты: не менее 14px для читаемости
|
||
|
||
---
|
||
|
||
## 🎁 Бонус: Анимации (опционально, для delight)
|
||
|
||
- При начислении ⭐ — анимация “+50 ⭐” всплывает и исчезает
|
||
- При открытии викторины — плавный переход
|
||
- При сканировании QR — эффект “затухания” + звук
|