# Обновление: Система тем и современный интерфейс

## Что добавлено

### 🎨 Система тем
- **5 тем на выбор:**
  - Тёмная (по умолчанию)
  - Светлая
  - Фиолетовая
  - Синяя
  - Зелёная

### 🎯 Современный интерфейс в стиле TimeWeb Cloud
- Чистый и минималистичный дизайн
- Плавные переходы и анимации
- Адаптивная вёрстка
- Улучшенная типографика
- Современные карточки и кнопки
- Sticky header
- Анимированные индикаторы статуса

## Установка

### 1. Замените App.jsx

Переименуйте файлы:
```
frontend/src/App.jsx → frontend/src/App_old.jsx (бэкап)
frontend/src/App_modern.jsx → frontend/src/App.jsx
```

### 2. Перезапустите фронтенд

```bash
cd frontend
npm run dev
```

## Использование

### Смена темы

1. Нажмите на иконку палитры (🎨) в правом верхнем углу
2. Выберите нужную тему из выпадающего меню
3. Тема сохраняется автоматически

### Особенности интерфейса

**Header:**
- Sticky (прилипает к верху при прокрутке)
- Показывает статус подключения
- Отображает текущего пользователя и роль
- Кнопки быстрого доступа

**Sidebar:**
- Список серверов с карточками
- Кнопки запуска/остановки на каждой карточке
- Анимированный индикатор статуса (пульсирует когда запущен)
- Скрывается на мобильных устройствах

**Вкладки:**
- Современный дизайн с подчёркиванием
- Иконки для каждой вкладки
- Плавные переходы

**Карточки серверов:**
- Закруглённые углы
- Тени при наведении
- Цветовая индикация выбранного сервера
- Плавные анимации

## Темы

### Тёмная (Dark)
- Основной: Серый 900
- Вторичный: Серый 800
- Акцент: Синий 600

### Светлая (Light)
- Основной: Серый 50
- Вторичный: Белый
- Акцент: Синий 600

### Фиолетовая (Purple)
- Основной: Фиолетовый 950
- Вторичный: Фиолетовый 900
- Акцент: Фиолетовый 600

### Синяя (Blue)
- Основной: Синий 950
- Вторичный: Синий 900
- Акцент: Синий 500

### Зелёная (Green)
- Основной: Зелёный 950
- Вторичный: Зелёный 900
- Акцент: Зелёный 600

## Файлы

- `frontend/src/App_modern.jsx` - новый App с темами
- `frontend/src/themes.js` - конфигурация тем
- `frontend/src/components/ThemeSelector.jsx` - селектор тем

## Что дальше

Компоненты (Console, FileManager, Stats, ServerSettings) нужно обновить для поддержки тем.
Они получают `theme` prop с текущей темой.

Пример использования в компоненте:
```jsx
export default function MyComponent({ theme }) {
  return (
    <div className={`${theme.primary} ${theme.text}`}>
      <button className={`${theme.accent} ${theme.accentHover}`}>
        Кнопка
      </button>
    </div>
  );
}
```

## Готово! 🎉

Теперь у вас современный интерфейс с системой тем!