# CoreSync MRM Frontend

Адаптивное веб-приложение для управления email-рассылками.

## Адаптивность

Приложение полностью адаптировано для работы на всех устройствах:

### Поддерживаемые разрешения:
- **Desktop**: 1200px+
- **Tablet**: 768px - 1199px
- **Mobile**: 320px - 767px
- **Small Mobile**: до 479px

### Ключевые особенности адаптивности:

#### 1. Мобильное меню
- На мобильных устройствах боковое меню скрывается и открывается по кнопке
- Добавлен оверлей для закрытия меню
- Плавные анимации открытия/закрытия

#### 2. Адаптивные таблицы
- Горизонтальная прокрутка на мобильных устройствах
- Оптимизированные размеры ячеек для touch-устройств
- Улучшенная читаемость на маленьких экранах

#### 3. Адаптивные формы
- Увеличенные размеры полей ввода для touch-устройств
- Минимальная высота 44px для всех интерактивных элементов
- Оптимизированные отступы и размеры шрифтов

#### 4. Адаптивные кнопки
- Увеличенные размеры для touch-устройств
- Улучшенная доступность
- Поддержка hover и active состояний

#### 5. Модальные окна
- Адаптивные размеры и отступы
- Оптимизированное позиционирование на мобильных
- Поддержка прокрутки контента

### Технические особенности:

#### CSS Media Queries:
```css
/* Планшеты */
@media (max-width: 1024px) { ... }

/* Мобильные устройства */
@media (max-width: 768px) { ... }

/* Маленькие мобильные */
@media (max-width: 480px) { ... }

/* Touch устройства */
@media (hover: none) and (pointer: coarse) { ... }
```

#### Поддержка устройств:
- **iOS Safari**: Полная поддержка
- **Android Chrome**: Полная поддержка
- **Desktop browsers**: Chrome, Firefox, Safari, Edge
- **Touch devices**: iPad, iPhone, Android tablets/phones

### Структура стилей:

```
src/
├── styles/
│   ├── Common.module.css      # Общие адаптивные стили
│   ├── Modal.module.css       # Адаптивные модальные окна
│   ├── MultiSelect.module.css # Адаптивные селекты
│   └── Paginator.module.css   # Адаптивная пагинация
├── components/
│   ├── Header.module.css      # Адаптивный хедер
│   └── SideMenu.module.css    # Адаптивное меню
└── pages/
    ├── Dashboard.module.css    # Адаптивная главная страница
    └── Login.module.css       # Адаптивная страница входа
```

### Производительность:

- Оптимизированные изображения и иконки
- Минимальные CSS-анимации для плавности
- Эффективная работа с touch-событиями
- Поддержка `-webkit-overflow-scrolling: touch`

### Доступность:

- Поддержка screen readers
- Правильная семантика HTML
- Достаточный контраст цветов
- Увеличенные размеры для touch-интерфейса

## Запуск проекта

```bash
npm install
npm start
```

Приложение будет доступно по адресу `http://localhost:3000`

## Сборка для продакшена

```bash
npm run build
```

Собранные файлы будут в папке `build/`