Верстка + Frontend

20 000 руб. за проект • наличный расчёт, безналичный расчёт, электронные деньги
18 марта 2015, 19:51 • 15 откликов • 164 просмотра
curque_com_ru-main-full - Главная страница
Требования:
Кроссбраузерная и валидная верстка. Желательно если вёрстка будет
сделана с препроцессорами типа less, sass, stylus по вашему выбору
Chrome
42 (и 3 последние версии), Firefox 36 (и 3 последние версии), Safari 8
(и 3 последние версии), Opera 27 и 26, мобильные браузеры. iPhone 6,
iPhone 6+, iPhone 5, Android 5, Android 4
В будущем будет адаптироваться под мобильники

При первом заходе на сайт высвечивает выбор города (если не можем определить по IP) - curque_com_ru-choose-city_1sttime
Этот город потом будет высвечиваться внизу на главной (или в меню) "Шоу в городе: _______"
Если мы определили город, то он виден внизу. Но там есть тултип, который пригает секунд 7 и потыхает "Выберете город проведения"
На первом слайде будет видео. Видео загружается из админки (три формата для разных браузеров).
Кружок
в центре слайда - некий "таймер" он будет заливаться как часы, и
продолжительность такое же что и видео. Если видео 10 секунд, значит и
он заливается 10 секунд. После этого, перелистывается на следующее шоу и
видео фейдом (2 секунды), и меняется контент с кнопкой.
Телефон кликабельный со всех устройств
Иконка
(иконка share) в нижнем правом углу - выежают слева направо иконки соц
сетей при наведении. Иконка share становится желтой.
curque_com_ru-hover-active - так выглядят элементы когда на них наводим мышку в меню. Снизу (шоу в городе) - при клике.
Меню - когда начинаем скроллить вниз, оно прилипает сверху (Пример реализации тут: https://www.interactivered.com/). Шоу в городе тоже переходит и прилипает к меню с второго экрана.

Меню:
Шоу - дропдаун на шоу, при выборе переходим на внутренную страницу шоу (curque_com_ru-show-internalpage)
Купить билеты - переходим на страницу curque_com_ru-pay-step1-choose
Доставки и оплата - Едем вниз, до экрана Доставка билетов
Групповая
заявка - кликаем, открывается попап Групповая заявка
(curque_com_ru-group). Если кликаем на крестик, то возвращаемся туда где
и были.
Делаем валидацию полей:
Для имя - нельзя использовать цифры
email - должно быть латинскими буквами и присутствовать @
Телефон - нельзя использовать буквы, разрешенное количество цифр: от 5 до 12, возможен + спереди
неправильно заполненное поле обводится красным
При наведении на прикрепить реквизиты появляется тултип с подсказкой
Обязательно для заполнения:
Имя,
Емайл, Телефон, Город (выбираем из списка - это заполняется в админке),
Выберете шоу (выбираем из списка - это заполняется в админке), Дата
(выбираем из списка - это заполняется в админке). При клике "отправить
заявку" получаем экран

Заказ оформлен curque_com_ru-pay-success - но без чека внизу.

При клике на Купить билеты в центре первого экрана (то что под Шоу Quidam в Москве) переходим на curque_com_ru-pay-step2
При клике на Купить билеты на втором экране (то что справа от клоуна, и под Шоу Quidam) переходим на curque_com_ru-pay-step2

Если
человек не выбирал Город в начале через
curque_com_ru-choose-city_1sttime, то у него будет показываться Желтая
плашка с выбором как в макете. Если кликает Да - то продолжает смотреть,
если Нет - то выходит curque_com_ru-choose-city_1sttime и человек может
выбрать.

На втором экране есть Где Проходит, Посмотреть видео,
Отзывы. При клике на одну из ссылок слева направо выходит
соответствующая информация в этом же блоке curque_com_ru-main-showinfo.
При этом, персонаж (клоун) фейдится одновремено, и превращается в
персонаж в соответствующем блоке.
При клике на крестик, слайд обратно вправо, и персонаж обратно меняется в исходное положение.
После
того как меняется персонаж, появляются comment box как будто персонаж
нам что то говорит. Это фразы меняются с переодичностью в 5-6 секунд
через фейд.

При скролле везде - элементы появляются через анимацию как тут http://phoenix.artbreezestudios.com/
Все тексты добавляются из админки.
Все иконки должны быть в svg.

В футере ссылки дублируют меню.

При клике внизу в "НАпишите нам" выходит попап curque_com_ru-contact_us - крестик закрывает попап. Кликаем отправить, и

получаем сообщение curque_com_ru-contact_us_success
Делаем валидацию полей:
Для имя - нельзя использовать цифры
email - должно быть латинскими буквами и присутствовать @
Телефон - нельзя использовать буквы, разрешенное количество цифр: от 5 до 12, возможен + спереди
неправильно заполненное поле обводится красным

curque_com_ru-show-internalpage - страница о шоу
Если
человек попал на эту страницу (прямой заход например) и не выбирал
Город в начале через curque_com_ru-choose-city_1sttime, то у него будет
показываться Желтая плашка с выбором как в макете. Если кликает Да - то
продолжает смотреть,если Нет - то выходит
curque_com_ru-choose-city_1sttime и человек может выбрать.

При
клике на Купить билеты на (то что справа от клоуна, и под Шоу Quidam,
или в самом низу) переходим на curque_com_ru-pay-step2

Тексты, фото, видео, отзывы, локация на карте - добавляются из админки
При клике на Ответить или Оставить Отзыв - вылизает disqus curque_com_ru-leave-comment

Этапы покупки

Шаги покупки серые - когда переходим дальше, шаг заливается оранжевым.
curque_com_ru-pay-step1-choose При ховере и клике на шоу в городе, показывается тултип как на макете. Кликаем выбрать билеты
curque_com_ru-pay-step2
Выбираем дату. Серые кружки - где есть шоу. При клике на дату с серым
кружком, заливается оранжевым, и показывается тултип Выберете время.
Выбираем время.
curque_com_ru-pay-step3-prestep выбираем между Стандартные и ВИП
curque_com_ru-pay-step3
Схема загружается из админки. Схема в svg. цвет сектора привязан к
цвету категории слева. Когда наводим на фиолетовый (из 40% опасити,
переходит в 100%), то появляется точка в кружке Категория 3 (как в
макете).
кнопка Перейти к покупке не активная (нет заливки в зеленый) пока не выбран хоть один взрослый билет
Когда кликаем + то количество в наличии падает на это же количество.
Так же тут же представлен (опять) выбор между Стандартные и ВИП.
При наведении на корзину, показывается тултип.
Плашка внизу прилипает книзу экрана.
Внизу как проехать выдает карту curque_com_ru-pay-step3-view-map Карта выежает. Позакрытию она уежает обратно вниз.
Изменить дату - выводит попап, происходит блур фона curque_com_ru-pay-step3-edit-date
Кликаем Перейти к покупке
curque_com_ru-pay-step4
Изменить категории - это шаг назад
Делаем валидацию полей:
Для имя - нельзя использовать цифры
email - должно быть латинскими буквами и присутствовать @
Телефон
- нельзя использовать буквы, разрешенное количество цифр: от 5 до 12,
возможен + спереди неправильно заполненное поле обводится красным
Способы оплаты и текст к нему добавляются из админки
curque_com_ru-pay-step4-tooltips показывает как выглядит тултип при наводке на i в способах оплаты
curque_com_ru-pay-success Заказ оформлен
Билеты прилетают в конверт, и выежает чек автоматический.


Требования: Кроссбраузерная и валидная верстка. Желательно если вёрстка
будет сделана с препроцессорами типа less, sass, stylus по вашему выбору
Chrome
42 (и 3 последние версии), Firefox 36 (и 3 последние версии), Safari 8
(и 3 последние версии), Opera 27 и 26, мобильные браузеры. iPhone 6,
iPhone 6+, iPhone 5, Android 5, Android 4

Если договоримся, высылаю Вам исходники.
Файлы