HTML/CSS адаптивная форма / JQuery код / элементы дизайна

Добрый день.

Задача создать форму (или 2-3, смотря как считать. см. ТЗ) для дальнейшей интеграции в шаблон сайта. Нужен чистый, валидный код html5/css3. Верстка CSS для вас должна быть основной специальностью. Если делаете все один, то нужны будут ещё средние знания JS и дизайна/Photoshop`а. Если не один, это не проблема. В рамках бюджета можете распределять оплату сами. Например, если верстаете строго по макетам, закажите дизайн у проверенного вами человека. Работы по дизайну не много, так как есть основа формы (см. приложения к ТЗ).

Если вы студия, это не проблема. Пока вы не будете предлагать сделать сайт "под ключ". Такие предложения не рассматриваются.

Собственно, по этому проекту, будут критерии в таком порядке - качество, сроки, цена.

Будьте готовы показать промежуточные результаты через 1-4 дня. При отсутствии оных - прекращение сотрудничества, вне зависимости от обстоятельств. Перед началом работы желательно обсудить этапы по объему работы, срокам и оплате. Полноценная предоплата не предусмотрена. Возможна оплата сделанного и предоплата за следующий этап, после сдачи первого этапа работы.

Если достигнуто соглашение по оплате, все пункты в ТЗ должны быть выполнены. Вся дополнительная работа, оплачивается отдельно. Но тут должен быть разумный подход, например, если речь о том, что нужно сделать отступ, подобрать более удачный шрифт, цвет, рамка - это одно. Если о том, что нужно писать скрипты для запроса в БД - это другое. Скрипты писать, кстати, не нужно, уже есть на эту работу исполнитель.

Сроки до 14.01 для тех кто может поработать в праздники.

По оплате рассчитываю на 15000-20000 руб.

С 04.01 на связи как я, так должны быть и вы.

Будет ещё 1-2 проекта похожего объема и направления опубликовано в ближайшее время.

**********************************

Форма выбора моделей

**********************************

Порядок описываемых элементов сверху вниз, слева направо.

1. Заголовок.

Используемый салатовый цвет #00c2a9.

2. Меню.

Адаптивное. При ширине меньше заданной - отображение сверху вниз. Если удобно, то можно bootstrap3 вёрстка или без неё. Максимальная ширина кнопки меню с учетом отставания текста с картинки/логотипа/пиктограммы. После выбора меню, цвет фона кнопки меняется. На приложенной картинке (1.jpg) вынесен вид стрелкой вверх. При выпадении, стрелка меняет вид/направление на противоположный.

Вид пунктов меню, при нажатии на основные кнопки - отрисовать на основе примеров (4.jpg). В центральной части видно, что вокруг выпавшего меню идёт цветовая рамка. Далее составить фиксированную ширину столбцов, как в примере слева внизу. При выделенном пункте, он указан в рамке с заливкой. При наведении - меняется цвет текста меню. Присутствует кнопка разворота вариантов пунктов (например, моделей), а также кнопка сворачивания. При нажатии на кнопку всех вариантов, ширина выпадающего меню увеличивается, для вмещения большего кол-ва данных. Кол-ва столбцов увеличивается. При необходимости появляется полоса прокрутки справа (не желательно, стоит рассчитать кол-во элементов). Цифры на примере слева и справа внизу - избыточные, не нужны.

Это пример списка без картинок. Справа внизу указан пример списка с картинками. При выделенном пункте рамка с заливкой, при наведении - только рамка. Кол-во картинок/пунктов в строке фиксируется. При большем кол-ве - дорисовка второй строки выпадающего меню.

В зависимости от выбранных элементов меню изменяются данные в 3х областях. "Хлебные крошки", список моделей в блоке с поиском слева, блоки-модели справа. При выборе в выпадающем меню идет стандартный запрос (JQuery/JS) к PHP скрипту. Он в свою очередь делает запрос в DB и выдает данные, в зависимости от переданных параметров (type тип, brand марка, model модель).

3. Хлебные крошки.

Обновление данных происходит (Ajax) в зависимости от выбранных пунктов в меню или других блоках. Последний пункт не активен. При нажатии на предыдущие пункты, происходит стандартный POST запрос к скрипту для получения данных. Существуют 4 положения в рамках данной формы -

"Главная" - в таком состоянии сброшены пункты выбора меню сверху, в блоке слева список всех моделей и марок (с paginator`ом внизу), в блоке справа также все модели с paginator`ом.

"Главная / Марка" - в меню сверху выбрана марка, слева и справа в блоках выводится только модели данной марки.

"Главная / Марка / Тип" - аналогично предыдущему, в дополнение, фильтр по типу техники.

"Главная / Марка / Тип / Модель" - это уже переходное состояние между этой формой и следующей. При выборе модели, отображается "Форма выбора схемы / раздела".

4. Древовидный блок с полем поиска.

Поиск идёт средствами JS.

Хороший пример http://www.listjs.com/examples/fuzzy-search ,учитывающий опечатки, поиск в любой части слова и простота в интеграции. Также необходим фильтр/поиск как данных ниже поиска в том же блоке, так и блоков справа (одновременная фильтрация). Подсветка рамки поля поиска при выборе поля для редактирования (на примере bootstrap3). Указание placeholder`а до начала ввода символов.

Дизайн вывода древа может быть изменён. Вместо треугольников, плюс/минус и прочее.

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

При выборе элемента соответственно обновляется состояние меню, "хлебных крошек", загружается другая форма ("Форма выбора схемы / раздела").

При количестве больше рассчитанного по высоте, пролистывание страниц Ajax (Paginator).

5. Блок отображения моделей.

Блоки моделей фиксированной ширины, адаптивные. При наведении отображается подсветка блоков, пример указан слева внизу. Состав блока - картинка модели. Ниже название модели.

При выборе элемента соответственно обновляется состояние меню, "хлебных крошек", загружается другая форма ("Форма выбора схемы / раздела").

При количестве больше рассчитанного по высоте, пролистывание страниц Ajax (Paginator).

**********************************

Форма выбора схемы / раздела

**********************************

Практически идентична форме выбора моделей (1.jpg). Имеет 2 разных состояния - обычный (2.jpg) и детальный (3.jpg).

Обычный

1. Разный placeholder ("Введите название узла или детали")

2. Различные данные. В меню слева, в название схем (возможно такое же расположение как на форме выбора моделей), thumbs схем.

Детальный

1. При выборе конечного подраздела меню (без "детей") отображается детальный блок, включающий в себя схему, название некоторых деталей, цену и предложение показать делальную информацию.

Данные подгружаются стандартным образом (JQuery/JS), через POST запросы в скрипт, тот в свою очередь запрос в DB. При клике на подраздел меню, идет запрос с передачей id раздела. Возврат данных или в обычном или в детальном варианте. В зависимости от того, является ли подраздел меню конечным.

Также, обновляется информация в "хлебных крошках" в зависимости от подраздела.

Пример обычного вида формы

- в файле tz_form1.txt ссылка

пример детального вида формы

- в файле tz_form1.txt ссылка

**********************************

Файлы проекта (WL лагает) http://rghost.ru/8YYbG5KWn