diff --git a/docs/tech-design/03-screens.md b/docs/tech-design/03-screens.md new file mode 100644 index 0000000..bd850da --- /dev/null +++ b/docs/tech-design/03-screens.md @@ -0,0 +1,384 @@ +# Технический проект. Документ 3: Макеты экранов (mobile-first) + +**Проект:** АС «Платформа ОПОРА РОССИИ» +**Принцип:** mobile-first, ширина 360–430 px (п. 4.1.6 ТЗ) +**Дата:** 26.09.2026 +**Статус:** черновик к согласованию + +--- + +## 1. Общие принципы интерфейса + +- **Mobile-first:** проектирование от смартфона; ПК — адаптивное расширение. +- **Крупные элементы управления**, удобные для касания (мин. 44×44 px). +- **Ключевые показатели** — крупными цифрами с подписями: «Точка 0», «Сейчас», «Цель». +- **Цветовое кодирование зон:** + - 🟢 динамика (положительный прирост); + - 🔴 «красная зона» (нет прироста); + - ⚪ нейтральное состояние. +- **Пустые состояния** — с подсказками (например, про кнопку «Дать совет для других лидеров» в боте). +- **Единый визуальный стиль** с брендом «ОПОРА РОССИИ». +- **Язык:** русский. + +--- + +## 2. Карта экранов + +``` +Вход (выбор мессенджера) + │ + ▼ +Главная (меню) + ├── Цели организации ──► Динамика ──► Топ регионов / Красная зона / Советы + ├── Рейтинг регионов ──► Карточка региона + ├── Задачи ──► Детали задачи + ├── Артефакты + ├── База знаний + ├── Календарь событий + ├── Запросы + ├── История платформы + └── Профиль ──► Ассистент «Зам» / Выйти + +Админка (отдельный доступ): Пользователи, Рассылки, Выгрузки, Аудит +``` + +--- + +## 3. Экран «Вход» + +**Назначение:** вход через мессенджер по одноразовой ссылке (п. 4.2.1 ТЗ). + +``` +┌─────────────────────────────┐ +│ ОПОРА РОССИИ │ +│ │ +│ Вход через рабочий бот │ +│ │ +│ ┌───────────────────────┐ │ +│ │ Войти через MAX │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ Войти через Telegram │ │ +│ └───────────────────────┘ │ +│ │ +│ Нет доступа? Начните │ +│ регистрацию через бота │ +└─────────────────────────────┘ +``` + +**Состояния:** +- ожидание подтверждения в боте → «Подтвердите вход в боте…»; +- успех → автооткрытие личного кабинета; +- сбой автооткрытия → кнопка «Открыть сайт»; +- ссылка использована → «Ссылка уже была использована. Запросите новую у координатора». + +--- + +## 4. Экран «Главная» + +``` +┌─────────────────────────────┐ +│ ОПОРА РОССИИ [≡] │ +│ Иванов И.И. · ДНР │ +├─────────────────────────────┤ +│ ┌───────────────────────┐ │ +│ │ Цели организации │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ Рейтинг регионов │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ Задачи │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ Артефакты │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ База знаний │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ Календарь событий │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ Запросы │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ История платформы │ │ +│ └───────────────────────┘ │ +│ ┌───────────────────────┐ │ +│ │ Профиль │ │ +│ └───────────────────────┘ │ +└─────────────────────────────┘ +``` + +--- + +## 5. Экран «Цели организации» + +**Назначение:** «что набираем, где есть движение и кому нужна помощь» (п. 4.2.4 ТЗ). + +``` +┌─────────────────────────────┐ +│ ← Цели организации │ +├─────────────────────────────┤ +│ Общая цель │ +│ +1096 к базе членов │ +│ Округа — вкладчики в общий │ +│ результат │ +├─────────────────────────────┤ +│ Вклад в общую цель │ +│ +338 [Открыть] │ +│ Численность: 12 400 │ +│ Зарегистрировано: 3 200 │ +├─────────────────────────────┤ +│ Динамика по цели │ +│ Точка 0 Сейчас Цель │ +│ 1000 1338 2096 │ +├─────────────────────────────┤ +│ Проекты Организации │ +│ Регионов с динамикой: 89 │ +│ Прирост от точки 0: +2594 │ +├─────────────────────────────┤ +│ Топ включившихся регионов │ +│ 1. Москва +224 🟢 │ +│ 2. Башкортостан +217 🟢 │ +│ 3. Санкт-Петербург +159 🟢 │ +│ 4. ДНР +136 🟢 │ +│ 5. Татарстан +132 🟢 │ +├─────────────────────────────┤ +│ Красная зона проектов │ +│ Регионы без прироста │ +│ [Полный список] │ +├─────────────────────────────┤ +│ Советы от регионов │ +│ (пусто) Советов пока нет. │ +│ Когда отделение даст │ +│ динамику, в боте появится │ +│ кнопка «Дать совет…» │ +└─────────────────────────────┘ +``` + +**Состояния:** +- загрузка → скелетон; +- нет проблемных регионов → «все регионы дали прирост»; +- нет советов → пустое состояние с подсказкой. + +--- + +## 6. Экран «Динамика» + +``` +┌─────────────────────────────┐ +│ ← Динамика │ +├─────────────────────────────┤ +│ Точка 0: 2026-05-08 │ +│ Текущий срез: 2026-08-07 │ +│ Режим: Автообновление ✅ │ +├─────────────────────────────┤ +│ Накопительная динамика │ +│ регистраций по регионам │ +│ │ +│ ▁▂▃▅▆▇█ │ +│ старт: 11.06.2026 │ +└─────────────────────────────┘ +``` + +--- + +## 7. Экран «Рейтинг регионов» + +``` +┌─────────────────────────────┐ +│ ← Рейтинг регионов │ +│ [Все округа ▼] [🔍] │ +├─────────────────────────────┤ +│ № Регион Прирост │ +│ 1 Москва +224 🟢 │ +│ 2 Башкортостан +217 🟢 │ +│ 3 СПб +159 🟢 │ +│ … │ +│ N Регион X 0 🔴 │ +├─────────────────────────────┤ +│ Сортировка: по приросту ▼ │ +└─────────────────────────────┘ +``` + +**Фильтры:** округ, «красная зона», сортировка (прирост / численность). + +--- + +## 8. Экран «Карточка региона» + +``` +┌─────────────────────────────┐ +│ ← Донецкая Народная Респ. │ +│ Округ: ЮФО · Статус: актив.│ +├─────────────────────────────┤ +│ Численность: 1 200 [✎] │ +│ Члены: 340 · Резиденты: 45 │ +├─────────────────────────────┤ +│ Ссылки на сообщества/чаты │ +│ • Чат ДНР [→] │ +│ • Сообщество VK [→] │ +│ [+ Добавить ссылку] │ +├─────────────────────────────┤ +│ Члены │ +│ [Список] [+ Добавить] │ +├─────────────────────────────┤ +│ Резиденты │ +│ [Список] [+ Добавить] │ +├─────────────────────────────┤ +│ История изменений │ +│ [Показать] │ +└─────────────────────────────┘ +``` + +**Права:** руководитель редактирует только своё отделение; админ — все (п. 4.2.6.1, Вариант 1). + +--- + +## 9. Экран «Задачи» + +``` +┌─────────────────────────────┐ +│ ← Задачи [+ Создать]│ +│ [Мои] [Регион] [Просроч.] │ +├─────────────────────────────┤ +│ ● Подготовить отчёт │ +│ до 01.10 · высокий │ +│ статус: в работе │ +│ ● Собрать данные │ +│ до 05.10 · средний │ +│ статус: новая │ +└─────────────────────────────┘ +``` + +**Детали задачи:** название, описание, срок, приоритет, ответственный, статус (`новая → в работе → на проверке → выполнена`), комментарии, артефакты. + +--- + +## 10. Экран «Артефакты» + +``` +┌─────────────────────────────┐ +│ ← Артефакты [↑ Загрузить]│ +│ [Все] [Регион] [Цель] [Задача]│ +├─────────────────────────────┤ +│ 📄 Отчёт_ДНР.pdf │ +│ 1.2 МБ · 26.09.2026 │ +│ 🖼 Фото_мероприятие.jpg │ +│ 3.4 МБ · 25.09.2026 │ +└─────────────────────────────┘ +``` + +**Ограничения:** до 50 МБ; изображения, PDF, DOCX, XLSX. + +--- + +## 11. Экран «База знаний» + +``` +┌─────────────────────────────┐ +│ ← База знаний [🔍] │ +│ [Все] [Инструкции] [Мат-лы]│ +├─────────────────────────────┤ +│ 📘 Как работать с целями │ +│ 📘 Регламент рассылок │ +│ 📘 Методика советов │ +└─────────────────────────────┘ +``` + +--- + +## 12. Экран «Календарь событий» + +``` +┌─────────────────────────────┐ +│ ← Календарь [< Сентябрь >]│ +├─────────────────────────────┤ +│ Пн Вт Ср Чт Пт Сб Вс │ +│ … … … … … … … │ +├─────────────────────────────┤ +│ 26.09 · Вебинар «Цели» │ +│ 30.09 · Дедлайн отчётов │ +└─────────────────────────────┘ +``` + +**Напоминания** приходят через бота. + +--- + +## 13. Экран «Запросы» + +``` +┌─────────────────────────────┐ +│ ← Запросы [+ Создать]│ +│ [Мои] [Все] │ +├─────────────────────────────┤ +│ ● Заявка на вступление │ +│ статус: новая │ +│ ● Запрос на поддержку │ +│ статус: в работе │ +└─────────────────────────────┘ +``` + +**Типы:** вступление, доступ, участие в мероприятии, поддержка. + +--- + +## 14. Экран «Профиль» + +``` +┌─────────────────────────────┐ +│ ← Профиль │ +├─────────────────────────────┤ +│ Иванов И.И. │ +│ Регион: ДНР │ +│ Роль: руководитель │ +├─────────────────────────────┤ +│ Ассистент «Зам» │ +│ Статус: подключён ✅ │ +│ [Настроить] [Журнал] │ +├─────────────────────────────┤ +│ [Выйти] │ +└─────────────────────────────┘ +``` + +--- + +## 15. Админка (отдельный доступ) + +| Раздел | Содержание | +|---|---| +| Пользователи | список, роли, статусы, регионы | +| Рассылки | шаблоны, запуск, прогресс доставки | +| Выгрузки | загрузка срезов, статус обработки | +| Аудит | журнал действий пользователей и ассистента | + +--- + +## 16. Состояния и обратная связь + +| Состояние | Отображение | +|---|---| +| Загрузка | скелетоны, спиннер | +| Пусто | подсказка с действием | +| Ошибка | сообщение + «Повторить» | +| Нет прав | «Недостаточно прав» + возврат | +| Оффлайн | баннер «Нет соединения» | + +--- + +## 17. Открытые вопросы + +1. **Брендбук** — есть ли гайдлайны «ОПОРА РОССИИ» (цвета, шрифты, логотип)? +2. **Графики** — библиотека визуализации (Recharts / Chart.js). +3. **Тёмная тема** — нужна ли. +4. **PWA** — нужна ли установка на домашний экран. + +--- + +## 18. Следующие шаги + +1. Согласовать макеты. +2. Перейти к реализации: каркас проекта (FastAPI + React), Docker Compose, CI/CD.