Смотри и не беги!

1.

Представление проекта:
“Смотри и не беги!”

2.

Краткое описание и главная цель
• Мой сайт показывает количество товара , акции и очередь в
магазине вблизи корпоративного жилья
• Главная цель моего проекта это экономить время. Выбранный
способ это чтобы студенты и работники не тратили своё время на
поход к магазину за тем, чего там нет, и не стояли очередь о
которой не знали.

3.

Представление технического задания.
Полное ТЗ будет показано позже, вот основные моменты из него:\
• Сайт должен обладать плашкой сверху названием сайта, а также
кнопкой qr-кода открывающей сканер qr кода и кнопкой входа в
акаунт. Ниже находится переключатель с 3 положениями. Ниже
представлен плашка в которой будут указаны текущие акции
• Под переключателями будет список товаров магазина
выбранного переключателем. Под списком установлен индикатор
загруженности магазина. Ниже находится секция с отзывами
• Сроки: До 25 сентября 2024 года

4.

Демонстрация макета сайта
Первая страница
На первой странице представлено
название, кнопка входа, и открытие
сканера QR-кода. Ниже видны кнопки
для выбора магазина и текущие
акции.

5.

Демонстрация макета сайта
Каталог товаров
Каталог товаров это основная функция
сайта. Здесь отображаются количество и
цена товара и их фото. (вместо фото
поставлена заглушка)

6.

Демонстрация макета сайта
Отзывы
Отзывы должны быть либо
положительными (+), либо
отрицательными (-), а также должны
иметь текст.

7.

Демонстрация макета сайта
Уровень загруженности магазина
Данная часть позволяет узнать загрузку
магазина. При смене уровня
загруженности будет изменён цвет круга и
текст.

8.

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

9.

Демонстрация макета сайта
Форма подписки на рассылку
При введения почты и нажатию кнопки
отправить пользователю будут приходить
уведомления о новых акциях

10.

Демонстрация макета сайта
О нас
Здесь представлена основная
информация о сайте

11.

Демонстрация макета сайта
Подвал
В подвале представлены контакты для
связи при нештатных ситуация на сайте, а
также преимущества использования сайта

12.

Описание процесса верстки
Вёрстка выдалась долгой, так-как у проекта менялся концепт.
Так как проект начинался делать до освоения scss, он сделан с
использованием css.
Основными вызовами стали фоновые изображения жалоб.
Все позиции товара, жалобы, отзывы – сделаны с учётом на
автоматическое добавление новых.

13.

Демонстрация сверстанной главной
страницы
Далее будет несколько слайдов с демонстрацией свёрстанной
главной странице

14.

Демонстрация сверстанной главной
страницы

15.

Демонстрация сверстанной главной
страницы

16.

Демонстрация сверстанной главной
страницы

17.

Демонстрация сверстанной главной
страницы

18.

Демонстрация сверстанной главной
страницы

19.

Демонстрация сверстанной главной
страницы

20.

Демонстрация сверстанной главной
страницы

21.

Демонстрация сверстанной главной
страницы

22.

Демонстрация сверстанной главной
страницы

23.

Демонстрация сверстанной главной
страницы
Далее будет несколько слайдов с демонстрацией свёрстанной
главной странице, учитывая адаптивность (размер экрана 375x667)

24.

Демонстрация сверстанной главной
страницы

25.

Демонстрация сверстанной главной
страницы

26.

Демонстрация сверстанной главной
страницы

27.

Демонстрация сверстанной главной
страницы

28.

Ссылки
• Figma: Untitled – Figma
• Git-hub: GitHub - 0VALNT/work
• Git-hub pages: Смотри и не беги! (0valnt.github.io)