Заказ закрыт
Сверстать страницу со скриптами по схематичному рисунку

Откликнуться
d
Заказчик
Отзывы фрилансеров: + 0 - 0
Зарегистрирован на сайте 10 лет и 2 месяца
Бюджет: по договоренности
Имеется схематично нарисованная страница, нужно по ее примеру сделать HTML/HTML5 страницу используя JS, CSS/CSS3.
Использовать jquery, bootstrap, можно использовать другие популярные jquery-ui и т.д. (желательно которые доступны в nuget для удобства дальнейшей поддержки кода).

Требования:
1. Результат нужно оформить в виде файлов html, js, css, который можно открыть в браузере и протестировать. Стили использовать Bootstrap.
2. Необходима работоспособность в мобильных устройствах (для десктоп можно удобством или красотой пренебречь), примерно на дисплеях от 9" до 13".
3. Если не получается делать кроссплатформенным, проблем нет, можно делать привязку к конкретному браузеру.
4. Размеры, соотношения сторон, шрифты, цвета можно на свое усмотрение менять. Эти параметры должны быть настраиваемые, достаточно в коде комментариями указать. В будущем, возможно, возникнет необходимость создания панели настроек, вам же, за доп. плату.
5. На кнопки и события (например создания нового заказа) должны быть привязаны js обработчики событий (пока пустые, для удобства теста можно alert добавить или вывод в консоль ).

В приложении имеется схематичный рисунок.
Разъяснения к рисунку:
1. Сверху лента заказов, количество заказов может быть много, поэтому нужна прокрутка. Прокрутка должна работать как по кнопкам по бокам, так и тач прокруткой.
1.1. При клике на одном заказе появляется всплывающее окно, где отображается более подобная информация: Id (номер), Дата, Стол, Кол. человек, Цена (это поле должно быть редактируемым, что бы там же можно было изменить значение, измененное значение сразу синхронизируется с сервером), расскрываемый Список блюд (по умолчанию списка не видно), а также есть кнопка Оплатить, при нажатии на которую вызывается js обработчик (на вход которой подается id заказа и Сумма, т.к. она может редактироваться). Далее, данный заказ удаляется из ленты.
Список Заказов для теста подготовить любой.
1.2. На рисунке этого нет, у каждого заказа, в ленте заказов, есть маленькая кнопка удаления, при нажатии на которую выдается запрос на подтверждение удаления, а затем заказ удаляется.
2. Справа по середине расположен список Блюд меню. Блюдо имеет характеристики: Название, Рисунок, Цена, Теги (их может быть несколько у каждого блюда, по которым производится фильтрация по кнопкам по середине экрана).
Список блюд для теста подготовить произвольный, лишь бы охватывал функционал.
3. По середине кнопки фильтрация блюд – некоторые наиболее часто используемые теги вынесены сюда. Фильтруют по тегам блюд с права. Кнопка имеет свойства Тег (по которому производит фильтрацию), название (которое отображается на кнопке).
3.1. На рисунке этого нет, нужно разместить поле поиска блюд по тегами, пользователь начинает набирать название тега, отображается список тегов, по набираемому пользователем тексту. Потом выбирает тэг и справа остаются только те блюда, к которым закреплен выбранный тэг. Этот пункт можно позже доработать за доп. плату.
4. Слева Список блюд оформляемого заказа. 
4.1. Блюда со списка Блюд меню с права должны перетаскиваться методом тач Drag and Drop.
4.2. При снятии галочки с лева (можно поставить значок креста), данный элемент удаляется из списка.
4.3. При нажатии на кнопку Заказ (в нижней панели), вызывается js обработчик, на вход которой подаются данные заказа: Номер стола, Кол. персон, Список блюд со своими ценами (цены можно устанавливать индивидуальные) и Итоговая цена (по умолчанию автоматически считается как сумма цен блюд, по мере их добавления, но также можно индивидуально устанавливать свою цену). 
Далее, новый Заказ добавляется в верхнюю ленту.
4.4. В будущем планируется добавить возможность применения скидки по действующим Акциям.

Идеальный код не обязателен, главное стабильная работа. Будут вопросы, спрашивайте.

Прием работы.
Организовать имитацию работы с сервером (для тестирования динамической части добавления заказа, оплаты заказа), что бы локально можно было протестировать работу функционала, в т.ч. синхронизация ленты заказов с сервера, добавление, оплата заказа, удаление заказа. Как это сделать – делайте как вам удобно, лишь бы я смог на своем компьютере локально протестировать. 
Это нужно для того, что бы исключить претензии в вашу сторону и сэкономить ваше и наше время. Т.к. в дальнейшем предполагается интеграция в существующий проект, а после интеграции страница может некорректно работать, причина может быть как в вашем коде, так и с нашей стороны.
Разделы:
Опубликован:
08.10.2015 | 21:10 [последние изменения: 08.10.2015 | 21:16]
Заказ находится в архиве
Откликнуться

Выберите способ верификации:

Обновите страницу после прохождения верификации.

Посмотреть другие заказы

Теги: разработать сайт, создать личный сайт, создать одностраничный сайт, нужно сделать сайт, лучшие разработчики, нужно создать сайт, требуется разработчик

Наши партнеры
Сведения об ООО «Ваан» внесены в реестр аккредитованных организаций, осуществляющих деятельность в области информационных технологий. ООО «Ваан» осуществляет деятельность, связанную с использованием информационных технологий, по разработке компьютерного программного обеспечения, предоставлению доступа к программе для ЭВМ и является правообладателем программы для ЭВМ «Платформа FL.ru (версия 2.0)».