ads-marketing/frontend

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:

/* Планшеты */
@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-интерфейса

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

npm install
npm start

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

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

npm run build

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