mnemo_cards/mnemo_cards_web_v2/DESIGN_ADAPTATION_PLAN.md

# План адаптации дизайна веб-приложения mnemo_cards_web_v2

**Цель**: Адаптировать дизайн веб-приложения `mnemo_cards_web_v2`, чтобы он был визуально похож на мобильное приложение `mnemo_cards`.

**Дата создания**: 19 октября 2025  
**Статус**: План

---

## 📊 Анализ текущего состояния

### Мобильное приложение (mnemo_cards)
**Ключевые особенности дизайна:**

1. **Цветовая схема**:
   - Черно-белая основа (black/white primary)
   - Кастомные акцентные цвета: peach, golden, green
   - Специальные цвета: progressBlue, menuBlue, backgroundBlue, borderGray
   - Использует MaterialColor для создания палитр

2. **Типографика**:
   - Шрифт: `Nunito`
   - Все тексты жирные: `FontWeight.w700` для всех стилей
   - Использует flutter_screenutil для адаптивных размеров

3. **Карточки паков**:
   - Горизонтальная компоновка (Row)
   - Изображение слева (квадратное, равно высоте карточки)
   - Информация справа (title, subtitle, количество карточек)
   - Граница с цветом пака (`border: Border.all(color: pack.color)`)
   - Скругленные углы (12.0)
   - Прозрачный фон карточки
   - Высота: ~110.h

4. **UI компоненты**:
   - RefreshIndicator с кастомным цветом
   - Простые границы и минималистичный дизайн
   - Иконки из webp файлов
   - Loading состояния с изображениями (cerdo/luna)

5. **Профиль**:
   - UserStatistics виджет со списком слов
   - Прогресс-бары для каждого слова
   - SimpleTile компоненты с Divider'ами
   - Золотой цвет для выученных слов

### Веб-приложение (mnemo_cards_web_v2)
**Текущий дизайн:**

1. **Цветовая схема**:
   - Material 3 с синим seedColor
   - Стандартная палитра Material
   - Отсутствуют кастомные акцентные цвета

2. **Типографика**:
   - Шрифт: `Nunito` ✅
   - Стандартные весы шрифтов Material

3. **Карточки паков**:
   - Вертикальная компоновка (Column)
   - Изображение сверху (AspectRatio 16:9)
   - Информация снизу
   - Стандартные Material Card с elevation
   - Hero анимация ✅

4. **UI компоненты**:
   - Material 3 компоненты
   - Shimmer loading states ✅
   - Современный responsive дизайн ✅

5. **Профиль**:
   - Продвинутый дизайн со статистикой
   - StatsCard компоненты
   - SimpleChart для графиков
   - Settings card с темной темой

---

## 🎯 Этапы адаптации

### Этап 1: Обновление цветовой схемы и темизации

**Приоритет**: 🔴 Высокий  
**Время**: 2-3 часа  
**Сложность**: Средняя

#### Задачи:

1. **Создать файл с цветовыми константами** (`lib/presentation/theme/app_colors.dart`):
   ```dart
   // Точные цвета из мобильного приложения
   const Color peach = Color(0xffffc994);
   const Color golden = Color(0xffffea00);
   const Color green = Color(0xff3d5309);
   const Color greenAccent = Color(0xff688d11);
   const Color black = Color(0xff000000);
   const Color white = Color(0xffffffff);
   const Color progressBlue = Color(0xff8CCBFF);
   const Color menuBlue = Color(0xff99C4E9);
   const Color backgroundBlue = Color(0xFFf0f0f0);
   const Color testBlue = Color(0xffD0EAFF);
   const Color borderGray = Color(0xffABABAB);
   ```

2. **Обновить `app_theme.dart`**:
   - Изменить ColorScheme на черно-белую основу
   - Светлая тема:
     - primary: MaterialColor(0xFF000000, colorMap)
     - surface: white
     - onSurface: black
     - secondary: green
   - Темная тема:
     - primary: MaterialColor(0xFFFFFFFF, whiteColorMap)
     - surface: black
     - onSurface: white
     - secondary: lightBlue

3. **Обновить TextTheme**:
   - Установить `FontWeight.w700` для всех стилей текста
   - Сохранить Nunito шрифт

4. **Обновить компонентные темы**:
   - AppBarTheme: иконки с primary цветом
   - CardTheme: скругление 12.0, минимальная elevation
   - ButtonTheme: жирные тексты

**Файлы для изменения**:
- ✏️ `lib/presentation/theme/app_theme.dart`
- ➕ `lib/presentation/theme/app_colors.dart`

---

### Этап 2: Адаптация карточек паков (PackCard)

**Приоритет**: 🔴 Высокий  
**Время**: 3-4 часа  
**Сложность**: Высокая

#### Задачи:

1. **Изменить компоновку PackCard на горизонтальную**:
   - Изменить Column на Row
   - Левая часть: квадратное изображение (height = width)
   - Правая часть: информация о паке

2. **Обновить стиль карточки**:
   - Удалить elevation из Card
   - Добавить Border.all с цветом пака
   - Сделать фон прозрачным или белым
   - Скругление: 12.0

3. **Добавить парсинг цвета пака**:
   - Использовать `pack.color?.asColor` из мобильного приложения
   - Создать extension для ColorDto

4. **Обновить информацию в карточке**:
   - Жирный большой заголовок
   - Subtitle светлее
   - Иконка карточек с количеством
   - Индикатор загрузки (опционально)

5. **Адаптировать высоту**:
   - Фиксированная высота ~110-120px
   - Квадратное изображение слева

**Файлы для изменения**:
- ✏️ `lib/presentation/widgets/pack_card.dart`
- ➕ `lib/utils/color_extension.dart` (для парсинга цветов)

**Визуальный пример**:
```
┌─────────────────────────────────────────┐
│ ┌─────┐                                │
│ │     │  Pack Title (bold, large)      │
│ │ IMG │  Pack Subtitle (light)         │
│ │     │  🃏 42 cards                    │
│ └─────┘                                │
└─────────────────────────────────────────┘
```

---

### Этап 3: Адаптация HomePage (список паков)

**Приоритет**: 🟡 Средний  
**Время**: 2 часа  
**Сложность**: Низкая

#### Задачи:

1. **Изменить layout с GridView на ListView**:
   - Вертикальный список карточек
   - Padding: 8.0

2. **Обновить RefreshIndicator**:
   - Кастомные цвета (использовать цвет первого пака или primary)
   - displacement: 20

3. **Обновить Loading состояние**:
   - Опционально: добавить изображение (cerdo/luna) вместо shimmer
   - Или оставить shimmer, но адаптировать под горизонтальную карточку

4. **Обновить Search bar**:
   - Сделать более минималистичным
   - Убрать излишнюю стилизацию

**Файлы для изменения**:
- ✏️ `lib/presentation/pages/home/home_page.dart`
- ✏️ `lib/presentation/widgets/loading/pack_card_shimmer.dart`

---

### Этап 4: Адаптация GamesPage и GameCard

**Приоритет**: 🟡 Средний  
**Время**: 2-3 часа  
**Сложность**: Средняя

#### Задачи:

1. **Обновить GameCard под стиль мобильного**:
   - Возможно также сделать горизонтальную компоновку
   - Или оставить вертикальную, но обновить стили
   - Добавить границы с цветом игры
   - Использовать кастомные цвета

2. **Обновить GamesPage**:
   - Изменить layout (Grid или List в зависимости от выбора)
   - Обновить RefreshIndicator
   - Адаптировать Loading состояния

3. **Обновить shimmer для GameCard**

**Файлы для изменения**:
- ✏️ `lib/presentation/widgets/game_card.dart`
- ✏️ `lib/presentation/pages/games/games_page.dart`
- ✏️ `lib/presentation/widgets/loading/game_card_shimmer.dart`

---

### Этап 5: Адаптация ProfilePage

**Приоритет**: 🟢 Низкий  
**Время**: 3-4 часа  
**Сложность**: Средняя

#### Задачи:

1. **Упростить дизайн профиля**:
   - Убрать или упростить статистические карточки
   - Добавить UserStatistics компонент (или его аналог)
   - Использовать SimpleTile стиль с Divider'ами

2. **Обновить статистику**:
   - Показывать список изученных слов с прогрессом
   - Использовать HorizontalProgressWidget
   - Золотой цвет для выученных слов

3. **Обновить Settings секцию**:
   - Более простой стиль с dividers
   - Минималистичные иконки

4. **Обновить logout кнопку**:
   - Более простой стиль

**Файлы для изменения**:
- ✏️ `lib/presentation/pages/profile/profile_page.dart`
- ✏️ `lib/presentation/widgets/stats_card.dart` (упростить или удалить)
- ➕ `lib/presentation/widgets/simple_tile.dart` (создать)
- ➕ `lib/presentation/widgets/horizontal_progress.dart` (создать)

---

### Этап 6: Адаптация PackDetailsPage

**Приоритет**: 🟢 Низкий  
**Время**: 2 часа  
**Сложность**: Низкая

#### Задачи:

1. **Упростить дизайн деталей пака**:
   - Убрать излишнюю стилизацию
   - Использовать границы вместо elevation
   - Адаптировать под минималистичный стиль

2. **Обновить список карточек**:
   - Более простой стиль ListTile
   - Границы вместо карточек

**Файлы для изменения**:
- ✏️ `lib/presentation/pages/pack_details/pack_details_page.dart`

---

### Этап 7: Адаптация общих компонентов

**Приоритет**: 🟡 Средний  
**Время**: 2-3 часа  
**Сложность**: Низкая

#### Задачи:

1. **Обновить MainShell** (нижняя навигация):
   - Адаптировать стили под новую тему
   - Проверить цвета иконок

2. **Обновить AuthPage**:
   - Упростить дизайн кнопок
   - Использовать новую цветовую схему

3. **Обновить ErrorView и LoadingView**:
   - Адаптировать под новую тему
   - Опционально: добавить кастомные изображения для ошибок

4. **Создать общие утилиты**:
   - ColorExtension для парсинга ColorDto
   - Дополнительные helper'ы

**Файлы для изменения**:
- ✏️ `lib/presentation/widgets/main_shell.dart`
- ✏️ `lib/presentation/pages/auth/auth_page.dart`
- ✏️ `lib/presentation/widgets/error_view.dart`
- ✏️ `lib/presentation/widgets/loading_view.dart`
- ➕ `lib/utils/color_extension.dart`

---

### Этап 8: Адаптация для responsive дизайна

**Приоритет**: 🟢 Низкий  
**Время**: 2-3 часа  
**Сложность**: Средняя

#### Задачи:

1. **Обновить Responsive утилиты**:
   - Адаптировать под новые размеры карточек
   - Убедиться, что горизонтальные карточки хорошо смотрятся на разных экранах

2. **Тестирование на разных разрешениях**:
   - Mobile (узкий экран)
   - Tablet (средний экран)
   - Desktop (широкий экран)

3. **Адаптация максимальной ширины контента**:
   - Убедиться, что карточки не слишком широкие на больших экранах

**Файлы для изменения**:
- ✏️ `lib/utils/responsive.dart`
- ✏️ Все страницы с использованием responsive логики

---

### Этап 9: Финальная полировка и тестирование

**Приоритет**: 🔴 Высокий  
**Время**: 2-3 часа  
**Сложность**: Низкая

#### Задачи:

1. **Проверка консистентности**:
   - Все цвета соответствуют мобильному приложению
   - Все шрифты жирные где нужно
   - Все границы используют правильные цвета

2. **Темная тема**:
   - Проверить, что темная тема работает корректно
   - Адаптировать все компоненты под темную тему

3. **Accessibility**:
   - Проверить контрастность цветов
   - Обновить Semantics labels если нужно

4. **Тестирование**:
   - Визуальное тестирование всех экранов
   - Проверка анимаций и переходов
   - Unit тесты для новых компонентов

5. **Документация**:
   - Обновить README с информацией о дизайне
   - Создать DESIGN_GUIDE.md с примерами компонентов

**Файлы для проверки**:
- Все обновленные файлы
- Тесты

---

## 📁 Структура новых файлов

```
lib/
├── presentation/
│   ├── theme/
│   │   ├── app_theme.dart          ✏️ Обновить
│   │   └── app_colors.dart         ➕ Создать
│   ├── widgets/
│   │   ├── pack_card.dart          ✏️ Полностью переделать
│   │   ├── game_card.dart          ✏️ Обновить
│   │   ├── simple_tile.dart        ➕ Создать
│   │   ├── horizontal_progress.dart ➕ Создать
│   │   └── loading/
│   │       ├── pack_card_shimmer.dart ✏️ Обновить под горизонтальную карточку
│   │       └── game_card_shimmer.dart ✏️ Обновить
│   └── pages/
│       ├── home/
│       │   └── home_page.dart      ✏️ Изменить layout
│       ├── games/
│       │   └── games_page.dart     ✏️ Обновить стили
│       ├── profile/
│       │   └── profile_page.dart   ✏️ Упростить дизайн
│       └── pack_details/
│           └── pack_details_page.dart ✏️ Упростить
├── utils/
│   └── color_extension.dart        ➕ Создать
└── assets/                         ➕ Опционально
    └── images/
        ├── cerdo.webp              ➕ Копировать из мобильного
        └── luna.webp               ➕ Копировать из мобильного
```

---

## 🎨 Ключевые изменения дизайна

### До и После:

#### 1. Цветовая схема
**До**: Material 3 синяя палитра  
**После**: Черно-белая основа с акцентными цветами (golden, green, peach)

#### 2. Карточки паков
**До**: Вертикальные карточки с изображением 16:9 сверху  
**После**: Горизонтальные карточки с квадратным изображением слева и границей цвета пака

#### 3. Типографика
**До**: Стандартные веса шрифтов Material  
**После**: Все тексты жирные (FontWeight.w700)

#### 4. UI компоненты
**До**: Material 3 elevation, стандартные карточки  
**После**: Минималистичный дизайн с границами, без elevation

#### 5. Профиль
**До**: Продвинутая статистика с графиками и карточками  
**После**: Простой список слов с прогрессом, SimpleTile компоненты

---

## ⚠️ Важные замечания

1. **Сохранить функциональность**:
   - Все существующие функции должны работать
   - Hero анимации сохранить
   - RefreshIndicator сохранить

2. **Responsive дизайн**:
   - Убедиться, что горизонтальные карточки хорошо смотрятся на всех экранах
   - На очень узких экранах возможно нужно адаптировать размеры

3. **Тестирование**:
   - Обновить тесты для новых компонентов
   - Проверить, что старые тесты проходят

4. **Темная тема**:
   - Особое внимание к темной теме
   - Проверить контрастность

5. **Assets**:
   - Возможно понадобится скопировать иконки из мобильного приложения
   - Добавить cerdo.webp и luna.webp для loading состояний

---

## 📊 Приоритизация этапов

### Критический путь (начать с этого):
1. **Этап 1**: Цветовая схема и темизация
2. **Этап 2**: Адаптация PackCard (самое заметное изменение)
3. **Этап 3**: Адаптация HomePage

### Средний приоритет:
4. **Этап 4**: GamesPage и GameCard
5. **Этап 7**: Общие компоненты
6. **Этап 5**: ProfilePage

### Низкий приоритет (можно отложить):
7. **Этап 6**: PackDetailsPage
8. **Этап 8**: Responsive адаптация
9. **Этап 9**: Финальная полировка

---

## 🚀 Порядок выполнения

### День 1 (4-5 часов):
- Этап 1: Цветовая схема (2-3 часа)
- Этап 2: PackCard начать (2 часа)

### День 2 (4-5 часов):
- Этап 2: PackCard завершить (2 часа)
- Этап 3: HomePage (2 часа)
- Тестирование (1 час)

### День 3 (4-5 часов):
- Этап 4: GamesPage (2-3 часа)
- Этап 7: Общие компоненты (2 часа)

### День 4 (3-4 часа):
- Этап 5: ProfilePage (3 часа)
- Этап 6: PackDetailsPage (1 час)

### День 5 (2-3 часа):
- Этап 8: Responsive (2 часа)
- Этап 9: Финальная полировка (1 час)

**Общее время**: 17-22 часа работы

---

## 📝 Чек-лист выполнения

### Этап 1: Цветовая схема
- [ ] Создан app_colors.dart с константами
- [ ] Обновлен app_theme.dart (светлая тема)
- [ ] Обновлен app_theme.dart (темная тема)
- [ ] Все тексты жирные (FontWeight.w700)
- [ ] Проверено на обоих темах

### Этап 2: PackCard
- [ ] Изменена компоновка на горизонтальную
- [ ] Добавлена граница с цветом пака
- [ ] Создан ColorExtension для парсинга
- [ ] Обновлена информация в карточке
- [ ] Hero анимация работает

### Этап 3: HomePage
- [ ] Изменен GridView на ListView
- [ ] Обновлен RefreshIndicator
- [ ] Обновлен PackCardShimmer
- [ ] Проверена прокрутка и загрузка

### Этап 4: GamesPage
- [ ] Обновлен GameCard
- [ ] Обновлен GamesPage layout
- [ ] Обновлен GameCardShimmer
- [ ] Проверена функциональность

### Этап 5: ProfilePage
- [ ] Упрощен дизайн
- [ ] Создан SimpleTile компонент
- [ ] Создан HorizontalProgress (опционально)
- [ ] Обновлена статистика

### Этап 6: PackDetailsPage
- [ ] Упрощен дизайн
- [ ] Обновлен список карточек
- [ ] Проверена функциональность

### Этап 7: Общие компоненты
- [ ] Обновлен MainShell
- [ ] Обновлен AuthPage
- [ ] Обновлены ErrorView/LoadingView
- [ ] Созданы утилиты

### Этап 8: Responsive
- [ ] Проверено на mobile
- [ ] Проверено на tablet
- [ ] Проверено на desktop
- [ ] Адаптированы размеры

### Этап 9: Финальная полировка
- [ ] Проверена консистентность
- [ ] Проверена темная тема
- [ ] Проверена accessibility
- [ ] Все тесты проходят
- [ ] Обновлена документация

---

## 🎯 Ожидаемый результат

После выполнения всех этапов веб-приложение `mnemo_cards_web_v2` будет визуально похоже на мобильное приложение `mnemo_cards`:

- ✅ Идентичная цветовая схема (черно-белая с акцентами)
- ✅ Жирные шрифты Nunito
- ✅ Горизонтальные карточки паков с границами
- ✅ Минималистичный дизайн без лишних elevation
- ✅ Упрощенный профиль со статистикой
- ✅ Консистентный UI на всех экранах
- ✅ Работающая темная тема
- ✅ Сохраненная функциональность (авторизация, навигация, загрузка данных)

---

**Автор плана**: AI Assistant  
**Дата**: 19 октября 2025  
**Версия**: 1.0