Задание: Веб-программист. Верстка лендинга (Дистанционная работа)
Макет https://www.figma.com/file/10SoTfTPyfAOADdk12rp8K/lumiarch?type=design&node-id=6-60&mode=design&t=uquqFcYJJCC3CpRa-0
Разработка дизайна происходит по модели Mobile First - то есть сначала разрабатывается мобильная веб-версия, на основе которой делается версия десктоп. Десктоп версия будет максимально похожа на мобильную.
Срок верстки не более 10 дней.
Список функций, который нужны:
1. Тексты хранятся в начале документа в переменных вида $ru_block1_head_1. В том месте, где должен быть текст подставляется переменная, а не сам текст. Все тексты вынесены в массив, файл или как удобно разработчику. Тексты могут быть на разных языках (ru, en, vn и пр.), возможны варианты текста (_1, _2). При необходимости можно добавлять. Переменные должны иметь возможность хранить длинные значения, в том числе переносы строк и использование html тэгов.
2. В глобальных переменных хранятся данные вводимые пользователем и его действия.
3. Разработка калькулятора. Он будет разрабатываться как встраиваемый js код. Необходимо предусмотреть, чтобы данные между этой страницей и калькулятором могли передаваться без ограничений.
4. Меню, которое открывается и закрывается по клику, превращается в “бутерброд” для мобильной версии. В меню анимационный эффект как тут для текста и элементов дизайна.
5. В качестве переменных в страницу могут передаваться значения (добавляются в строку запроса явным способом):
?lang=ru язык
?utm_source - UTM метка и другие переменные (в основном UTM-метки)
5. Необходимо развернуть и запустить сайт на нашем хостинге, настроить его (masterhost).
6. Первый блок - имеет горизонтальное пролистывание (по клику на стрелочку). Также он пролистывается, когда пользователь скроллит. Как только дошли до конца (6-й блок), если пользователь скролит дальше, то он переходит к следующему экрану (вниз). Далее работает вертикальный скроллинг.
При клике на кнопку “Поделиться” открывается окно с предложением поделиться в соц сетях. При клике на иконку соц сети, открывается соответствующее социальной сети окно, вставляется текст из переменных: sn_text, sn_head, sn_image.
7. Раздел “О Камбодже” - это паралакс.
8. Стрелочки на клавиатуре также работают как скрол.
9. После просмотра раздела О Камбодже, переходим к разделу с объектами. Тут скрол работает только вниз. Есть кнопки, которые позволяют посмотреть второй объект. Но их пользователь должен нажать сам. При переходе к просмотру второго объекта, основной фон меняется на темно-синий. Каждый объект имеет следующие блоки (которые также пролистываются): описание, фотографии квартир, фотографии общественных пространств, фотографии здания снаружи. 10. Каждая фотография кликабельна и показывается на весь экран. При открытии всей фотографии появляется кнопка “Закрыть” (крест).
11. Видео показывается в фоне (для мобильной и десктоп версии разные видео). Видео растянуто на всю ширину экрана.
12. Раздел карта - необходимо выбрать подложку и ее стиль.
13. Раздел "Как мы работаем", с задержкой несколько секунд появляются блоки.
14. При заполнении формы, если какие то поля не заполнены выдается сообщение об ошибке.
15. На хостинге предусмотрен скрипт, который получает данные от формы и отправляет их на почту админу. Этот же скрипт отправляет письмо клиенту с файлами (необходимо организовать отправку писем с помощью сторонних сервисов без спама).
16. Все необходимые API ключи для сторонних сервисов разработчик получает самостоятельно на аккаунт клиента (при необходимости регистрируем ключ вместе).
17. Реализация игровых механик для стимулирования заполнения формы.
