Вот подробно расписанное **Техническое задание (ТЗ)** для разработки 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 — эффект “затухания” + звук