Задача

Необходимо сверстать страницу игрового стола, полностью соответствующую макету из Figma. Ключевое требование - пиксельная точность верстки (отклонение не более 1-2 пикселей). Проект выполняется в рамках существующего стека.

Стек технологий

  • Шаблоны: HTML на Jinja2
  • Стили: Обычный CSS
  • Логика: Ванильный JavaScript (без React/Vue)
  • Бэкенд: FastAPI (для отдачи HTML и статики)

Требования

  • Использовать Flex и Grid (аналог Auto Layout). Позиционирование через absolute только для оверлеев и бейджей.
  • Сохранить существующую JS-логику: не менять ID, классы и data-атрибуты.
  • Вынести повторяющиеся значения (цвета, отступы, шрифты, тени, радиусы) в CSS-переменные :root.
  • Реализовать корректную вложенность элементов, как в макете Figma.
  • Запрещается использовать фреймворки, сборщики, Tailwind, npm.

Режим проверки (Overlay)

Добавить специальный режим, который включается/выключается клавишей O. При активации макет должен перекрываться PNG-изображением (экспорт из Figma) через /static/debug/figma_screen.png с прозрачностью 50%.

Результат работы

Необходимо предоставить список измененных файлов и краткий changelog (что было изменено/добавлено).

Создание видео на заказ

Заказчик ищет специалиста для создания видеоконтента. Работа оплачивается через банк, услуги предоставляются только на платной основе.