# Тестирование функциональности Cover Overlay

## Функциональность Cover Overlay

Мы добавили новую функциональность для перекрытия обложки пользователя цветным слоем с настраиваемой прозрачностью.

### Backend изменения

1. **Модель DesignSettings** (`customization/models.py`):
   - `cover_overlay_enabled` - Boolean поле для включения/отключения
   - `cover_overlay_color` - Hex цвет перекрытия (например #000000)
   - `cover_overlay_opacity` - Float значение прозрачности от 0.0 до 1.0

2. **Сериализатор** (`customization/serializers.py`):
   - Валидация hex цвета
   - Валидация диапазона прозрачности

3. **API** (`api/views.py`):
   - Поддержка новых полей в публичном API

### Frontend изменения

1. **Интерфейсы TypeScript**:
   - Обновлены `DesignSettings` интерфейсы в `DashboardClient.tsx`
   - Обновлены `PublicDesignSettings` в `[username]/page.tsx`
   - Обновлены интерфейсы в `CustomizationPanel.tsx`

2. **Панель кастомизации** (`CustomizationPanel.tsx`):
   - Checkbox для включения/отключения overlay
   - Color picker для выбора цвета
   - Range slider для настройки прозрачности
   - Live preview перекрытия

3. **Публичная страница** (`[username]/page.tsx`):
   - Отображение cover overlay поверх обложки пользователя

## Как протестировать

### 1. Доступ к панели администрирования
```
http://localhost:3000/auth/login
```

### 2. Настройка Cover Overlay
1. Войдите в систему
2. Перейдите в Dashboard
3. Откройте панель кастомизации (кнопка настроек)
4. Найдите секцию "Перекрытие обложки"
5. Включите checkbox "Включить цветовое перекрытие обложки"
6. Выберите цвет (по умолчанию черный #000000)
7. Настройте прозрачность ползунком (по умолчанию 30%)
8. Проверьте preview внизу секции
9. Сохраните настройки

### 3. Проверка на публичной странице
1. Убедитесь что у пользователя загружена обложка (cover image)
2. Перейдите на публичную страницу: `http://localhost:3000/[username]`
3. Если cover overlay включен, вы увидите цветное перекрытие поверх обложки

### API Endpoints

#### Получение настроек дизайна (приватное)
```
GET http://localhost:8000/api/customization/settings/
Authorization: Bearer <token>
```

#### Обновление настроек дизайна
```
PUT http://localhost:8000/api/customization/settings/
Authorization: Bearer <token>
Content-Type: application/json

{
  "cover_overlay_enabled": true,
  "cover_overlay_color": "#FF5733",
  "cover_overlay_opacity": 0.5
}
```

#### Публичное API для страницы пользователя
```
GET http://localhost:8000/api/public/[username]/
```

Ответ включает поля:
```json
{
  "design_settings": {
    "cover_overlay_enabled": true,
    "cover_overlay_color": "#FF5733", 
    "cover_overlay_opacity": 0.5
  }
}
```

## Возможные проблемы

1. **Overlay не отображается**: Проверьте что `cover_overlay_enabled` true в API
2. **Неправильный цвет**: Убедитесь что цвет в hex формате (#RRGGBB)
3. **Overlay слишком яркий/темный**: Настройте opacity (от 0.0 до 1.0)

## Технические детали

- Cover overlay реализован как абсолютно позиционированный div поверх изображения
- CSS pointer-events: none предотвращает блокировку кликов
- Используется rgba() с opacity для плавности переходов
- Preview в админке показывает шахматный фон для демонстрации прозрачности