NeveTimePanel/THEME_UPDATE.md

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

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

🎨 Система тем

• 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. Перезапустите фронтенд

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 с текущей темой.

Пример использования в компоненте:

export default function MyComponent({ theme }) {
  return (
    <div className={`${theme.primary} ${theme.text}`}>
      <button className={`${theme.accent} ${theme.accentHover}`}>
        Кнопка
      </button>
    </div>
  );
}

Готово! 🎉

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