Верстка 9 форм / диалоговых окон

Нужна верстка двух проектов.

Оплата - Сбер, или ЯД, или обсуждается. Желательна постоплата без безопасной сделки. Аванс возможен, если у Вас много хороших отзывов. Если хотите, возможно разбиение работы на сколь угодно мелкие этапы, с отдельной оплатой каждого этапа.

Предполагаю объем работ 1-3 дня, стоимость от 5 до 15 тыс. руб., зависит от предложений.

Верстка потом будет использоваться как база для большого проекта, поэтому важно аккуратное оформление, наличие комментариев в css, разбивка css на main.css и css для отдельных форм (при необходимости). Верстка должна быть устойчивой к добавлению в будущем css дополнительных форм другими верстальщиками. Верстку отдельных элементов желательно привязывать к названию класса, или к id, так чтобы потом эту верстку можно было легко применять к новым объектам. Желательно, чтобы в css можно было легко понять, какая часть css за что отвечает.

Совместимость - последняя версия Google Chrome, Firefox, IE, Яндекс браузер (под вопросом, не обязательно)

================================

ПРОЕКТ 1 - 5 маленьких форм/диалоговых окон.

1. Форма авторизации - ввод логина, см. "1.png". Форма отображается в центре пустого экрана.

2. Форма авторизации 2 - ввод пароля, см. "2.png". Форма отображается в центре пустого экрана.

3. Диалоговое окно "Выберите действие", см "4.png". Форма отображается поверх основной формы, осн. форма при этом затеняется.

4. Информационное сообщение, см "5.png". Форма отображается поверх основной формы, осн. форма при этом затеняется.

5. Шапка основной формы программы. Форма состоит из шапки, и таблички. Табличку трогать не надо - она уже сверстана. Высота шапки 10vh, высота таблички 90vh. Надо сверстать шапку таблички, см. "10-2.png"

При ресайзе, если ширина окна 850 px или больше, то логотип "стандартного" размера, отступ логотипа от левого края 120 px.

При ресайзе, если ширина окна 600 px или меньше, логотип уменьшен (см. скрин), отступ логотипа от левого края 10 px.

При ширине окна между 600 px и 850 px, размер логотипа и отступ слева от логотипа изменяется пропорционально изменению ширины.

Логотип в .svg.

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

psd от дизайнера и .svg с логотипом передам в момент начала работы.

Скрины элементов под хувером можно спросить в личке, либо передам в момент начала работы.

================================

ПРОЕКТ 2 - верстка четырех форм

1. "Список накладных", см. "01 список накладных.png"

2. "Накладная", см. "02 накладная.png"

3. "Редактирование данных поставщика", см. "03 редактирование данных поставщика.png"

4. "Сканирование товара", см. "04 сканирование товара.png"

psd от дизайнера передам в момент начала работы.

скрины элементов под хувером, скрин открытого выпадающего списка, скрин календаря можно спросить в личке, либо передам в момент начала работы.

Сложные элементы - полосы прокрутки в табличках, выпадающий список, календарь для выбора даты

Предполагается использование React, react-table. 

Верстка календаря зависит от выбранного компонента, он пока не выбран. Поэтому календарь сейчас наверное не получится сверстать. Я попытаюсь договориться с программистом, чтобы верстку календаря сделал программист, но, возможно, потребуется помощь. Т.е. надо предусмотреть отдельный этап - помощь программисту, уже после завершения основного проекта, в случае, если программист не справится с версткой календаря.