Общая задача

Разработать адаптивную верстку трех основных экранов мобильного приложения для отдела технической поддержки. Дизайн согласован с концепцией, представленной в референсах (файлы стилей приложены). Все взаимодействия должны быть плавными с обязательной анимацией нажатия на каждую кнопку. Техническое исполнение - на нативном HTML, стандартном CSS; скрипты JS допускаются лишь там, где это необходимо для базовой логики (например, подготовка тестового контента).

Экран «Авторизация»

Необходимо разместить поля ввода и поддержать удобную верстку для тач-устройств.

  • Поле «Почта» (email).
  • Поле «Пароль» (password).
  • Флаг «Запомнить меня» — чекбокс или тумблер на усмотрение.
  • Кнопка входа.

Экран «Форма заявки»

Страница для отправки проблемы в техподдержку. Здесь обязательны следующие поля ввода:

  • ФИО заявителя.
  • Подразделение или отдел.
  • Телефон должен быть контактным.
  • Текст проблемы — для ввода описания использовать поле большей высоты, чем у прочих.
  • Акцентированная кнопка с текстом: «Создать новую заявку».

Экран «Список заявок (реестр)»

Главная лента с cуществующими запросами и форматом каждой отдель – на основе макета. Исполнение для демонстрации включает отображение предустановленных (заранее созданных) записей.

Перечень компонентов одного обращения в списке:

  • Дата создания запроса,
  • Номер заявки (уникальный числовой/ccылочный указывать не нужно явно, но числовая последовательность иллюстрирует суть),
  • Текст проблемы — строки/абзац факта проблемы внутри области карточки заметной высоты чтобы текст не обрезался;
  • В работе — тут размещаются ФИО лица, которое ведет обращения;
  • Статичная кнопка в конце — только одно тип: имеет текстый якорь: «Добавить заявку».

Подготовка массива данных:

Поскольку реализация подразумевает что источник посредством внешнего не подключается создать фейков по мере ссылных принципов в количеств 3-4 элементы:

  • даты произвольное произык (из текущего месяца),
  • Индексы NU либо флаг для таблиц варианта таков единица,
  • Рабочий Lorem внесенный соответствующий расшифровки или подробема с использование реальными в вымышленных характеристик;
  • = После «текст проблема» сперва уклады на бригад — обознака разных Свы решения для испытаня корректного стиля всего текста =
  • На этап ов пользовательбр конретно каже по очереди оператив в с помощью текста заглухи так чтобы > лучше него;
  •  клавить Процессы