Верстка

Необходимо сделать верстку формы ввод данных клиентом.

И передать работу для бэк энда. По конкретному примеру (есть ссылка на сайт)

Дизайн макета в фигме нет. Работа проходит только по примеру.

Все 4 шага сбора данных клиента.

В работе используем только HTML, CSS, JS (без посторонних библиотек) все делаем с нуля нативным js

Ссылка на подробно описанное ТС - https://docs.google.com/document/d/1dEGxWxzfVBlfLEFPdVOHrtMBQ7wyxFJmyK3HtZQk4QM

Срок сдачи до среда (02.11.2022) 18:00

Дублирую все ТЗ полностью здесь, еще раз списком:

ТЗ front форма оплаты

• Сделать верстку. Сделать все, пиксель в пиксель как в примере. И подготовить на своей стороне (фронта) всю работу для дальнейшей передачи страницы в работу для бека.
• Должен получится вот этот блок (все шаги от начала и до конца) - https://prnt.sc/m7HvW5WiniQL

https://prnt.sc/_ZJsE2zcldQi

https://prnt.sc/RqcF6AWln2lD

https://prnt.sc/znWKuOeerYX9

Заголовок, подзаголовок добавить (его нет в примере) нужно добавить 2 строчки текста, 1,2,3 шага клиента и собственно сама форма заполнения данных человеком.

Ссылка на пример - https://www.tinkoff.ru/insurance/travel/

• На вашей стороне все что вы будете видеть в примере, выбор страны (англ яз), календарь, номер телефона, емейл, дата рождения, добавление туристов, смена контента в правой части форм, все анимации, все переходи, все ошибки, все поп апы.
• Выбор страны на английском языке (не на руском как в примере, то есть название стран на англ яз)
• Исключением является функционал коррекции ввода фио с раскладкой клавиатуры. В примере ввод в поле фио только на русском, даже если клава на английском. Нам же нужно сделать без этого, ввод только на латинице (на английском) без подмены

  вот об это идет речь - https://prnt.sc/G9ClSVShWbQT

• Функционал по номеру телефона. В примере привязка только к одной стране. Нам нужно сделать номера телефонов по всему миру. С выпадающим списком стран на английском языке, с флагом страны и дублируется название страны на местном языке страны.

Вот пример - https://prnt.sc/XPOY0JCR-pCU

• Другой функционал, после выбора галочки “Годовая страховка” в нашем примере ( в нашей верстке) не будет дополнительного поля с выбором дней. Визуально все как было так и остается одно сплошное поле. https://prnt.sc/QJYeBuj-vYgl . Что происходит когда человек выбрал галочку годовая страховка - в календаре он только выбирает начальную дату путешествия и автоматически добавляется второй датой + 365 дней
• Цифра с ценой в правой части формы на вашей стороне, статична, с ней будет работать бек и подтягивать данные с базы данных
• Последний этап заполнения данных банковской карты, вы делает верстку и подготовительную работу для бека, согласно примеру, а платежку подключает наш бек
• Вместо рублей как в примере, возле цифр мы пишем - USD
• Верстка нужна для десктоп и моб устройств
• Адаптировать верстку как под самый старый с маленьким расширением телефона 320*480 так и под 29 дюймовый монитор
• Скорость загрузки страницы должна составлять 100% на моб и десктоп устройствах по гугл пейдж спид
• Страница должна открываться, полноценно работать, с подгрузкой всех элементов, библиотек во всех браузерах. Даже в старой версии интернет эксплорера от которого все отказались, капризным сафари на маках и 2g интернетом в странах азии
• Страница будет использоваться по всему миру поэтому технически она должна быть идеальна во всех смыслах
• Для работы используем Только HTML, CSS, JS
• jQuery, Bootstrap не используем в работе. Весь функционал только нативный JS. Все библиотеки, стили, скрипты делаем ручками на JS ничего со стороны готового/шаблонного не подключаем.
• Вес сайта должен быть максимально минимальный
• Код должен быть идеален и кристально чистой, без лишних строчек. С понятной логикой и структурой чтобы сразу было понятно для другого специалиста зачем, как и куда это сделано
• Все анимации, эффекты, смены, выпадающие списки, поп ап, задержки, скорость, наведение мышкой, переходы между элементами, переходы между полями ввода, шрифты, цвета и так далее, все должно быть ровно так как в примере
• У вас всегда есть возможность задать профессиональный, самый сложный вопрос, я передам его нашим IT и они вам дадут ответ. Пожалуйста пишите такие вопросы максимально детально и понятно.
• Перед сдачей верстки обязательно все должно быть протестирован и убраны все ошибки на кроссбраузерность и кроссплатформенность
• Конкретный пример формы по ссылке (все шаги от начала и до конца) - https://www.tinkoff.ru/insurance/travel/

вот эта форма:

https://prnt.sc/JDFvdQPYdO2d

https://prnt.sc/sFy9H6dUeAwr

https://prnt.sc/mFy9gQk62XqJ

Работу выполняем ровно так как в примере.

По 10 раз проверять, перепроверять, выписывать правки и отправлять на доработку вашу работу не буду, так как делаем согласно примеру.

Ваша работа (верстка) передается в внутренний отдела разработки если она проходит проверку, дога все ок, делаем оплату. И могу давать сразу в работу следующие проекты.

Последнее:

Будьте внимательны к мелочам. Пройдитесь несколько раз как клиент заполните все данные и посмотрите как все работает, какие подсказки при ошибках возникают, как переключаются элементы, переходы после ввода данных, как вылетает календарь, емейл. Размер шрифта, расположение элементов. Все должно быть тупо как в примере. Посмотреть как работает мобильная версия.

Задавайте любые вопросы заранее чтобы потом не переделывать или вовсе потратить зря время.