Initial commit

THEME_UPDATE.md

@@ -0,0 +1,125 @@
+# Обновление: Система тем и современный интерфейс
+
+## Что добавлено
+
+### 🎨 Система тем
+- **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>
+  );
+}
+```
+
+## Готово! 🎉
+
+Теперь у вас современный интерфейс с системой тем!