Сверстать фичу "Донаты" (Frontend)

Ser-Denisov commented 1 year ago

Адаптивная верстка - десктопные устройства (1920 х 1080, 1366 х 768), планшет (1024 х 768), мобильные телефоны (320 х 568)

Кнопка "ЗаДонатить". Страница с выбором суммы доната. Страница благодарности за донат.

Задача 1. Кнопка "ЗаДонать": -Название кнопки содержит две большие буквы (как в название задачи). -Кнопка "ЗаДонать" находится в хедере, вместо кнопки "Собеседование". -После ее нажатия происходит переход на страницу с выбором суммы доната.

Задача 2. Страница с выбором суммы доната: Страница содержит:

Хедер / футер. Текст ЗаДонатить (сверху над блоком с текстом, по середине блока/страницы или на усмотрение дизайнера). Размещен блок с текстом: "Спасибо, что интересуешься нашим проектом! Мы очень рады, что наша работа находит отклик в сердцах людей. Если хочешь поддержать наш проект, будем очень благодарны за любую помощь. Ты можете сделать пожертвование на развитие проекта. Твоя поддержка позволит нам оплачивать сервер, продолжать развиваться и мотивировать ребят, участвующих в проекте, делать наш мир лучше. Спасибо еще раз за твое участие!". 3 кнопки для выбора суммы доната: 100 р, 300р, 500р. Меняет цвет после ее нажатия. Поле ввода любой суммы. Поле по умолчанию содержит текст "другая сумма", которая исчезает при заполнении. Имеет ограничения для ввода- только цифры, только целое число (1, 5, 10, 100), без копеек. Вводимая сумма не должна начинаться с "0". Ограничения по кол-ву символов- минимальное 1 символ, максимальное 6 символов. Справа от поля знак вопроса, при наведении всплывает тултип, который содержит описание ограничения поля. Текст ограничений: Для ввода суммы можно использовать только цифры. Сумма вводится без копеек" . Кнопка "ЗаДонатить". Становится активной после выбора одного из вариантов суммы или ввода своей. При нажатии на нее осуществляется переход на страницу платежного сервиса ЮКасса.

Задача 3. Страница благодарности за донат. Переход на нее осуществляется после прохождения процедуры оплаты в ЮКассе. Страница содержит:

Хедер / футер блок с теском благодарности: Спасибо, что ты с нами! Мы очень рады, что НаймиНайми находит отклик в сердцах людей. Твоя поддержка и донаты помогают нам развиваться и двигаться вперед. Спасибо, что веришь в нас и поддерживаешь наш труд. Мы ценим твое участие и будем продолжать работать над тем, чтобы сделать наш проект еще лучше и полезнее для всех.. кнопку "На главную страницу". Располагается после блока с текстом. При ее нажатии осуществляется переход на главную страницу сайта.

Ограничения по суммам оплаты от ЮКассы:

Банковские карты:
Visa, Mastercard, Maestro, Мир, JCB, American Express: минимум — 1 ₽, максимум — 350 000 ₽ (до 700 000р в месяц)
Электронные деньги: а) ЮMoney : минимум — 1 ₽, максимум — 250 000 ₽ (до 3 000 000р в месяц) б) QIWI Wallet : Минимум — 1 ₽, максимум — 250 000 ₽
Инвойсинг: а) SberPay: Минимум — 1 ₽, максимум — 500 000 ₽ б) Тинькофф: Минимум — 1 ₽, максимум — 600 000 ₽ в) СБП: Минимум — 1 ₽, максимум — 500 000 ₽

Ссылка на макеты: https://www.figma.com/file/SLsP9UQstJOh4NYNj6GMY5/%D0%9D%D0%B0%D0%B9%D0%BC%D0%B8%D0%9D%D0%B0%D0%B9%D0%BC%D0%B8?type=design&node-id=0-1&t=zyZpzGJVa2HfoLFX-0

Ser-Denisov commented 1 year ago