План реализации: Премиальный космический дизайн и инновационный интерфейс панели администратора (Django Admin)

Этот план описывает шаги по улучшению верстки и дизайна панели управления (Django Admin / Jazzmin) проекта DPITS CMS. Мы внедрим премиальную темную тему (Cosmic Dark & Glassmorphism) в едином стиле с основным сайтом, добавим инновационную плавающую боковую панель, интерактивные карточки статистики, улучшенные таблицы и «парящую» панель сохранения действий (Submit Row).

⚠️ Критические исправления (Исправление путей)

При аудите проекта обнаружено несоответствие путей подключения стилей:

1. В settings.py параметр "custom_css" настроен на "css/admin_custom.css".

2. Однако файл стилей находится по пути static/css/11_admin/admin_custom.css.

3. Из-за этого админ-панель не загружала кастомные стили (или загружала устаревшие).

Мы исправим параметр "custom_css" в JAZZMIN_SETTINGS на "css/11_admin/admin_custom.css" для корректной работы.

🎨 Предлагаемые инновационные изменения

1. Единый космический темный дизайн (Cosmic Dark Theme)

Мы перенесем дизайн-систему основного сайта (variables.css) в админ-панель:

• Фон страниц: Ультра-темный космический синий (#060818 или var(--bg-body)) вместо скучного светло-серого (#f1f5f9).

• Текст: Максимально контрастный светлый сланцевый (#f8fafc) для заголовков и (#cbd5e1) для обычного текста.

• Интерактивные элементы: Яркие неоновые акценты индиго (#6366f1), бирюзы (#06b6d4) и фуксии (#f43f5e).

2. Стеклянный эффект (Glassmorphism & Frosted Panels)

• Применение backdrop-filter: blur(12px) и легкой полупрозрачной заливки rgba(13, 18, 48, 0.75) для карт, всплывающих окон, навигационных панелей и таблиц.

• Тонкие светящиеся границы (1px solid rgba(99, 102, 241, 0.15)) с усилением свечения при наведении.

3. Инновационный парящий сайдбар (Floating Glass Sidebar)

• Превращение стандартного тяжелого бокового меню в парящую консоль управления с округлыми краями, прозрачным стеклянным фоном и мягкой подсветкой.

• Микро-анимация активных элементов меню с неоновой полосой слева и легким свечением текста (text-shadow: 0 0 8px rgba(99, 102, 241, 0.4)).

4. Парящая панель управления (Floating Control Dock)

• Главное эргономическое улучшение: Панель сохранения в формах редактирования моделей (.submit-row) будет превращена в парящий полупрозрачный док в нижней части экрана с эффектом размытия стекла и закругленными углами. Она всегда будет под рукой при прокрутке длинных форм, повышая удобство работы администратора.

5. Интерактивные карточки показателей и логов

• Добавление градиентных неоновых индикаторов к карточкам статистики (.stat-card).

• Эффект «подсветки» при наведении (карточки слегка приподнимаются, увеличивается масштаб и размытие тени).

• Полная стилизация панелей информации о сервере и логов с адаптацией системных графиков под космическую гамму.

6. Футуристичный дизайн таблиц и форм

• Таблицы списков объектов (changelist) получат чистую разметку, прозрачный фон с подсветкой активной строки неоновым свечением.

• Поля ввода (.form-control, select) получат мягкую градиентную рамку, яркое неоновое кольцо при фокусе (box-shadow: 0 0 0 3px rgba(99,102,241,0.3)) и плавную анимацию.

🛠️ Детализация изменений в файлах

[MODIFY] settings.py

• Исправление "custom_css" в JAZZMIN_SETTINGS на "css/11_admin/admin_custom.css".

[MODIFY] admin_custom.css

• Полная замена стилей на премиальную космическую тему с эффектом Glassmorphism.

• Добавление стилей для парящего сайдбара и плавающей стеклянной панели .submit-row.

• Добавление анимированных переходов, неоновых градиентных рамок и интерактивных микро-анимаций.

[MODIFY] admin-file-manager.css

• Адаптация файлового менеджера, предпросмотра файлов и бэкап-списка под космическую темную гамму (исправление светлых хардкодных фонов).

🧪 План верификации

Ручная проверка в браузере:

1. Переход на страницу http://127.0.0.1:6678/admin/ и авторизация.

2. Проверка соответствия цветовой гаммы премиальному космическому темному стилю.

3. Проверка адаптивности и внешнего вида парящей боковой панели и верхнего меню.

4. Вход в любую модель (например, «Портфолио» -> «Проекты» -> редактирование) и проверка парящей панели сохранения (.submit-row).

5. Проверка читаемости текста, таблиц и контрастности кнопок/форм.

6. Проверка страницы «Технический паспорт сервера» (/admin/server-info/) на правильность рендеринга всех темных карточек.