Goal Description
Обновить страницу списка услуг (services/templates/services/list.html) и связанные стили (services/static/services/css/services.css) для более современного, привлекательного и интуитивного пользовательского интерфейса. Требования:
- Добавить улучшенный блок поиска, фильтров (категории, сложность, технологии) и сортировки.
- Сделать дизайн более премиальным: glassmorphism, плавные анимации, современная цветовая палитра.
- Обеспечить адаптивность под мобильные устройства.
- Улучшить SEO‑метаданные и семантическую разметку.
- Сохранить текущий функционал без регрессий.
User Review Required
IMPORTANT
План вносит значительные изменения в шаблон и CSS. Пожалуйста, подтвердите, что вы хотите:
- Переписать блок фильтров с использованием более современных компонентов Bootstrap 5 (cards, dropdowns, badge).
- Добавить динамический поиск с debounce (JS) и улучшить отображение активных фильтров.
- Применить glassmorphism‑стиль к карточкам услуг и фильтрам.
- Сохранить текущие роуты и параметры URL.
Open Questions
CAUTION
- Нужно ли добавить модальное окно для расширенного фильтра (только на десктопе) или оставить текущий inline‑вариант?
- Планируется ли использовать тёмный режим (переключатель) – уже есть CSS‑переменные, но требуется ли интеграция в шаблон?
- Требуется ли добавить анимацию загрузки (skeleton) для списка услуг при медленном ответе сервера?
- Есть ли предпочтения по цветовой палитре (например, фирменные цвета проекта) либо оставить текущие токены?
Proposed Changes
Templates
[MODIFY]
- Переписать верхний блок
services-filter-card:- Добавить отдельные карточки для поиска, категорий, сложности, технологий, сортировки.
- Использовать
formс методомGETи добавитьdebounceчерез небольшую inline‑JS (или отдельный файл). - Добавить микровзаимодействия: hover‑эффекты, активные состояния badge.
- Внести
aria-labelиroleдля улучшения доступности. - Добавить
meta‑теги (title,description) в блок{% block title %}динамически на основе выбранных фильтров. - Улучшить структуру пагинации: добавить
rel="prev"/rel="next"ссылки.
CSS
[MODIFY]
- Добавить стили glassmorphism для карточек услуг (
backdrop-filter: blur(12px), полупрозрачный фон). - Обновить переменные цвета: использовать HSL‑градиенты вместо фиксированных RGBA.
- Добавить анимацию
transform: translateY(-4px)иbox-shadowпри hover на карточках и кнопках. - Оптимизировать медиазапросы для мобильных устройств (≤576px) – сделать стек карточек 1‑колоночным, адаптировать фильтры в горизонтальный скролл.
- Ввести новые стили для search input с иконкой внутри (
position: relative+padding-left). - Добавить стили для active‑filter badges с плавным переходом цвета.
JavaScript (inline)
[NEW]
- Функция
debounce(fn, delay)для задержки отправки формы поиска. - Обработчик клика по badge‑кнопкам, который автоматически обновляет URL параметрами без полной перезагрузки (использовать
htmx/fetchесли проект уже подключён). Если нет, оставить обычный GET. - Добавить анимацию появления карточек (
fadeInUp) при загрузке страницы.
Static Assets
[NEW]
- Содержимое будет скопировано из шаблона
list.html(inline script) в отдельный файл и подключено через{% static 'services/js/services.js' %}.
Tests
[MODIFY]
- Добавить проверку, что новые CSS‑классы (
glass-card,active-filter-badge) присутствуют в рендере. - Обновить тесты поиска/фильтрации, если изменятся URL‑параметры.
Verification Plan
Automated Tests
- Запустить
python manage.py test servicesдля существующих и новых тестов. - Проверить отсутствие регрессий в админке (тексты в
admin.pyостаются без изменений).
Manual Verification
- Открыть
http://127.0.0.1:4234/services/в браузере. - Проверить адаптивность на разных ширинах (desktop, tablet, mobile).
- Убедиться, что поиск с debounce работает и URL‑параметры корректно обновляются.
- Проверить визуальный стиль: glass‑card, градиенты, плавные hover‑анимации.
- Проверить SEO‑метаданные в исходном коде страницы.