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

Цель проекта

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

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

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

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

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

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

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

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

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

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

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

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