Сверстал адаптивную админ-панель сервиса совместных закупок по дизайн-макету заказчика: дашборд закупок по статусам, карточки с прогрессом сбора, таблицы заявок в двух режимах и интеграция с группой ВКонтакте.
Сервис совместных закупок помогает организаторам вести сбор заказов: у каждой закупки есть минималка, собранная сумма, дата стопа и участники. Организаторам нужен был веб-кабинет, где видно все закупки по стадиям — набор заказов, оплата, стоп сбора, — заявки участников, товары и публикация закупок в группе ВКонтакте. Заказчик подготовил дизайн-макет админ-панели — по нему нужно было адаптивно сверстать все экраны.
Сверстал админку по макету: дашборд «Мои закупки» с вкладками черновиков и архива, секциями по статусам и карточками закупок с кольцевым индикатором сбора; страницу закупки со сводкой, таблицей заявок в двух режимах — по позициям и по участникам; формы создания закупки и товара, редактирование обложки, а также подключение группы ВК с публикацией объявлений. Синяя шапка и карточный интерфейс перенесены с макета без изменений, каждая страница одинаково работает от экрана смартфона до широкого десктопа.
Скриншоты демо-версии: дашборд закупок, таблица заявок и мобильная версия. Полные страницы открываются по ссылкам в конце кейса.
Все экраны админ-панели — по дизайн-макету заказчика. Синяя шапка, карточный интерфейс и таблицы — единая сетка от экрана смартфона до широкого десктопа.
Страница «Мои закупки» с вкладками черновиков и архива: закупки сгруппированы по статусам — идёт набор заказов, оплата, стоп сбора — с кнопкой создания новой закупки.
Обложка закупки, селектор статуса, минималка и собранная сумма, дата стопа и кольцевой индикатор сбора; из карточки — быстрый переход на сайт закупки и к заявкам.
Заявки участников в двух режимах — по позициям и по участникам с итогом и оргсбором: поиск по каждой колонке, статусы заявок, экспорт и импорт, пагинация.
Подключение группы ВКонтакте к закупке и публикация объявлений: успех публикации подтверждается уведомлением, ссылка на закупку копируется в один клик.
Форма добавления нового товара с описанием и редактирование обложки закупки: поля, селекторы и кнопки оформлены в едином стиле с остальными экранами панели.
Дашборд закупок, таблицы заявок в двух режимах, новый товар и обложка закупки — все открываются онлайн по ссылкам ниже.
Каждая страница свёрстана и для десктопа, и для смартфона — мобильная версия дашборда показана в скриншотах кейса.
Синяя шапка со сводкой закупки, кольцевые индикаторы сбора и карточный дашборд — вёрстка повторяет дизайн-макет заказчика и готова к интеграции с CMS.
В демо-версии открыты 5 типовых страниц — ссылки ниже.
После передачи проекта заказчику мы не контролируем сайт — он может быть изменён или вовсе отключён. Поэтому ниже собраны примеры типовых страниц на нашем хостинге: вёрстка в том виде, в каком она сдавалась заказчику.
Демо-версия размещена на demo.avoweb.net — страницы открываются без регистрации.
Пришлите дизайн-макет сайта или админки и расскажите про проект — сверстаю все экраны адаптивно, от первого до последнего, готовые к интеграции с CMS. Коммерческое предложение — в течение 24 часов в рабочее время.
Получить предложениеКонсультация бесплатна и ни к чему не обязывает