# Технический проект. Документ 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. **Брендбук** — отсутствует; разработана дизайн-система на основе фирменных цветов opora.ru (см. `docs/design/design-system.md`). 2. **Графики** — **Recharts**. 3. **Тёмная тема** — **нужна** (CSS-переменные + переключатель). 4. **PWA** — **нужна** (установка на домашний экран). --- ## 18. Следующие шаги 1. Согласовать макеты. 2. Перейти к реализации: каркас проекта (FastAPI + React), Docker Compose, CI/CD.