Верстка одной формы и одной формочки

Задача: верстка одной формы и одной формочки (см. рисунки). Установка 2 js компонентов

На форме есть дата пикер, список множественного выбора, и табличка. Планируется использование https://jqueryui.com/datepicker/ и https://github.com/harvesthq/chosen. Элементы должны быть установлены в тестовой версии формы, и должно быть видно, что они работают. Бизнес-логику никакую программировать не надо, только демонстрация работы. 

Будет дан ftp доступ, Исполнитель заливает css, html и js на сайт Заказчика, работа принимается на сайте. 

Форма будет вставляться в прямоугольную область на существующем статическом сайте.

Выбор даты: 1) должен работать 2) во всплывающем окне выбора даты настраиваем заливку выбранной даты, и сегодняшней даты, как на рисунке 3) русифицируем 4) при необходимости, уменьшаем размер окошка выбора даты, так чтобы оно было соразмерно другим элементам формы.

Список множественного выбора 1) должен работать 2) дизайн элементов - цвет, закругления, обводки - делаем как на рисунке.

Для списка множественного выбора, и выбора даты, мне нужно знать, какие именно элементы были изменены для подгонки под заданный дизайн. Для этого, после установки списка и даты, делаем архив. Я этот архив заливаю в систему контроля версий, и потом смогу понять, что где было изменено при подгонке. Или после установки нулевой версии списка и даты сказать мне, я сразу в свн залью, без архива :).

Кнопки радиобаттонов - делаем как на рисунке.

Кнопки влево - вправо - при клике на кнопки, должно происходить любое событие (меняться какая-либо текстовая надпись), чтобы было видно что они работают. 

Для списка множественного выбора делаем js функцию get_id_list, которая возвращает случайный тестовый набор ФИО, заселяем список согласно get_id_list.

Для календаря делаем js функцию get_timetable, которая возвращает тестовый набор данных. 

На выходе функция get_timetable возвращает двумерный массив array (column_n, nn), где первая размерность - номер колонки, вторая размерность - номер элемента в колонке. Каждый элемент массива сам по себе является массивом, описывающим одну клетку расписания.

$column_element = array(

    margin_before => 2,         // зазор перед элементом в пикселях. Красится цветом фона

    height = 40,                // высота собственно элемента в пикселях. 

    margin_after => 0,          // зазор после элемента. Красится цветом фона

    element_type => 2,          // тип элемента: белый квадратик, желтый квадратик, темно-серый квадратик, квадратик заголовка, квадратик заголовка со скругленным левым верхним углом, квадратик времени, подсвеченный квадратик времени

    "text" => "10:00 в магазин за продуктами", // текст. Если текст не влезает, то раздвигать элемент не надо, текст обрезаем. Если есть место, делаем перевод строк. Если влезает (например) 0.8 строки по высоте, то текст выводим, при этом нижняя 0.2 часть текста отрезана (не выводится). 

    "upper_left_pic_n" => 0,    // рисунок в верхней левой части. Если 0, то рисунка нет, если число от 1 до 5, то берем один из заданных рисунков, с указанным номером

    "click_on" => true       // если true, то при наведении мышки отображается зеленая обводка (см. рисунок). click_on=true может быть только у element_type==белый/желтый квадратик

); 

При выводе расписания, в каждой из колонок набор элементов может быть произвольным по высоте. Поэтому делаем таблицу из одной строки, и необходимого набора колонок. 

Внутри колонки, последовательно отображаются элементы, возвращенные функцией get_timetable для этой колонки. Разделение между клетками внутри колонки делается за счет зазоров margin_before и margin_after. За то, чтобы клетки, соответствующие например 10:00, располагались на одной высоте, будет отвечать функция get_timetable, обеспечивая равенство сумм высоты всех элементов, выводимых до 10:00, во всех колонках. Для тестирования, накидываем в get_timetable набор случайных элементов, заголовок и колонку времени стараемся не путать с содержимым :), собственно содержимое накидываем элементы случайным образом.

При клике на элемент таблицы, для которого click_on==true, страница дизэйблится (ни на что нельзя кликнуть), для страницы ставится Opacity=0.5, в центре страницы выводится модальная форма, см. рисунок 2.

css правила и код должны быть аккуратно оформлены и прокомментированы.

В качестве опции, если Вы знакомы с php и ajax, могу выдать расширенное ТЗ. В этом случае функции get_timetable и get_id_list будут по прежнему возвращать тестовые наборы данных, но это будут php функции на сервере. Добавится отправка/получение данных на сервер, нажатие кнопок и т.д., т.е. элементарная обвязка, по прежнему без бизнес-логики заполнения выпадающего списка и расписания. При этом я буду готов заплатить дороже :).

Я оцениваю работу где-то в день, и примерно в 3000-4000 р. Но это, естественно, примерно.

Оплата WMR.

Общение в телеграмме (желательно с голосом), скайпе, чате веблансера. Лучше телеграмм, потому что скайп у меня глючит и без голоса.