Общая информация:
Есть макет в PNG. Он собран из разных ресурсов (из наполовину сделанного PSD, а также дополнен некоторыми элементами из разных изображений).
Необходимо:
1. Сделать дизайн (полный макет PSD по подобию предоставленного PNG макета. Что-то придется дорисовать, что-то есть готовое).
2. Сделать верстку.
Требования к дизайну:
Значек "в процессе". Надо сделать анимированным чтобы "крутился". Цвет сделать серым или поменять дизайн этого значка.
Элемент "выпад. список". За основу взят из PSD. Но его дизайн надо переделать и подогнать под тот, что в PNG.
Уменьшить высоту элементов. Элементы "выпадающий список, кнопочки, формы ввода" взяты из PSD, но в нем высота этих элементов большая. Необходимо уменьшить высоту этих элементов.
Требования к верстке:
Фиксированная верстка. Минимальное разрешение 1280
Кроссбраузерность. Необходимо, чтобы верстка корректно отображалась на десктопных (Chrome, Safari, Internet Explorer, Opera, Firefox, Yandex Browser) и мобильных браузерах (Android Browser, Chrome, Safari, Opera Mobile, Opera Mini, Firefox)
Валидность. Должна проходить проверку онлайн валидаторов.
Семантика кода. Семантика кода должна быть грамотной.
Динамика. Есть наглядноые подсказки в макете "ТЗ Дизайн+верстка с пояснениями.png"
Термины. На данной странице, есть "верхнее меню" и "таблица". В "таблице" есть "левое вертикальное меню", "панелька с кнопочками". И основное – это содержимое "таблицы". Оно состоит из настроек "опций". Также есть значки "звездочка", "вопросит. знак", "применено", "выполняется", "не применено". Есть секция "Избранные" и остальные. Также есть "метки". Необходимо:
Сделать верстку так, чтобы, например я решил вручную удалить какую то "опцию" посичтав ее ненужной и при удалении строки с "опцией" "подягивался низ", или наоборот, я решил добавить новую "опцию" и втиснуть ее посередине каких то двух "опций", тогда при добавлении строки с "опцией" надо сделать чтобы низ съезжал "низ съезжал".
Сделать, чтобы при нажатии на значек "звездочка" какой либо опции в она добавлялась в секцию "Избранные" и соответственно "низ должен съехать вниз"
При добалении "меток" (номеров/слов/наименований приложений) если "метки" достигли правого края, то новые должны располагаться на нижней строке и соотв. "низ должен съехать"
При нажатии на значок "восклицательный знак", должно появляться окошко с поясняющим текстом. Ширина его фиксированная (какая именно определимся позже). Высота "резиновая".
Напротив некоторых опций есть элемент "выпадающий список". Он должен растягиваться по ширине текста. Максимальная ширина равна границе правого края таблицы. Если я вручную (через HTML код) добавлю новое значение в этот выпадающий список, то соответственно список должен растянуться и новое значение корректно отображаться.
Подсказки. Дополнительно пришлю текст для всплывающих подсказок, выпадающих списков и статусов
Требования к исполнителю:
Срок исполнения – 3 дня
1 день просрочки – минус 10% от бюджета.
Сделка через СБР. Оплата только если результат удовлетворит меня на 100%.
Быть на связи.
Скачать архив исходников из которых сделано ТЗ