Техническое задание: Верстка многостраничного попапа для доната

Цель проекта

Создать адаптивную и интерактивную фронтенд-реализацию всплывающего окна (попапа) для сбора пожертвований на существующем сайте. Работа выполняется на чистом HTML/CSS/JS, интеграция с Laravel или другим бэкендом не требуется.

Основные функциональные блоки

1. Главный попап с формой доната

  • Многошаговый интерфейс с несколькими состояниями.
  • Поля для ввода суммы пожертвования.
  • Блок выбора способа оплаты (банковская карта, электронный кошелек, другие методы).
  • Кнопки навигации (Далее, Назад, Отмена).

2. Попап "Успешная операция"

  • Отдельное модальное окно, которое появляется после успешного завершения процесса.
  • Сообщение об успешном переводе.
  • Кнопка для закрытия окна.

3. Попап "Ошибка операции"

  • Отдельное модальное окно для отображения ошибок.
  • Сообщение о неудачном завершении платежа.
  • Кнопки для повтора действия или закрытия.

Технические требования

  • Чистая, семантическая верстка на HTML5 и CSS3.
  • Адаптивность под основные разрешения экранов.
  • Интерактивность реализуется на ванильном JavaScript (без jQuery, если возможно).
  • Плавные анимации открытия/закрытия окон и переходов между шагами.
  • Код должен быть хорошо структурирован и закомментирован.
  • Все попапы должны быть независимыми компонентами.

Что предоставить по итогу

  • Архив с HTML-файлом (или файлами), CSS и JS.
  • Рабочий прототип, где можно кликнуть по кнопке "Сделать донат" и пройти по всем состояниям попапов.
  • Визуальное соответствие предоставленному дизайну (макетам).