Конструктор сайтов ✅

Страница проекта: https://htmlacademy.ru/projects/site-constructor/payment

Готовая вёрстка:

site-builder-main.zip

Референсы:

• Медиум

• Notion

• Старый прототипчик

Макет

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FeP5bViweRSXwi5hufM20cf%2F%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580-%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25BE%25D0%25B2.-HTML-Academy-(2)%3Fnode-id%3D0%253A1

Вёрстка

Полный архив от Лиги со сборкой:

site-builder-main (2).zip

Стартер-пак без сборки:

starter-template.zip

Техническое задание

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

• Интерфейс

Вёрстка

• Видео от дизайнера с подробными объяснениями интерфейса Важно! В видео некорректно показан перенос элементов в шапке/подвале. Корректное объяснение в пункте «Шапка и подвал» ниже
• В макете есть блок «Пояснения», где дизайнер добавил уточнения по вёрстке
• Минимальная ширина 1200px – 1160px контент + 20px отступы
• Пользователь может выбрать одну из трёх сеток — у каждой своя цветовая схема

Шапка и подвал

• Кнопка-плюсик появляется при наведению на блок
• Находится всегда справа блока, центруется по высоте
• В одну строку помещается максимум 4 элемента, следующие переносятся на новую строку
• Если один из элементов в строке растягивается по высоте (например, текстового контента много и он растягивает блок по высоте), соседи тоже растягиваюся по высоте
• В видео дизайнер показывает вот такой перенос элементов на новую строку

Контентные блоки

• Кнопка-плюсик всегда внизу блока, центруется по горизонтали

Логика

Состояние по умолчанию

• Выбрана сетка «Лендинг»
• Блоки «Шапка», «Контент» и «Подвал» не содержат элементов
• Скриншот состояния по умолчанию

Сетка сайта

• Переключение сетки происходит через кнопки «Лендинг», «Блог», «Магазин» в шапке сайта
• В один момент времени может быть выбрана только одна сетка
• Переключение происходит по клику на кнопку
• Если юзер выбрал одну сетку, надобавлял туда элементов и переключил сетку, то созданная им версия сайта не сохраняется и не переносится в другой вид сетки

Добавление элементов

• При наведении на блок шапки, контента (1 блок на лендинге, 2 в блоге, 3 в магазине) или подвала появляется кнопка-плюсик (кнопка с классом .add-btn)
• По клику на эту кнопку на странице появляется панель элементов
• По клику на кнопку из панели в блоке появляется выбранный элемент
• Новый элемент добавляется в конец блока

Редактирование содержимого

Текстовые элементы

• Каждый новый элемент содержит плейсхолдер
• Чтобы заменить его на необходимое содержимое надо кликнуть в контентную область элемента и начать вводить текст

Сейчас в вёрстке у каждого элемента уже стоит атрибут contenteditable="true". Лучше убрать его из разметки и явно задавать через скрипты

• Редактирование заканчивается при нажатии клавиши Enter или клике вне области редактируемого блока
• Высота элементов растягивается под содержимое

Изображения

• По умолчанию блок с изображением содержит иконку с фотоаппаратом
• По клику на эту иконку появляется возле блока появляется попап с добавлением изображения (класс .img-upload)
• Вставляем ссылку на картинку в поле вводе (добавление картинок только по внешним ссылкам в интернете), нажимаем загрузить, картинка добавляется
• Чтобы убрать попап достаточно кликнуть вне его области
• Если пользователь хочет добавить другую картинку взамен добавленной, а попапа на старнице нет, по клику на добавленное изображение снова появится попап. Новая картинка заменить предыдущую, предыдущая никуда не сохраняется

Удаление элементов

• По наведению на блок с любым элементом, в левом верхнем углу блока с элементов появляется иконка-корзина (класс .delete-btn)
• По клику на эту кнопку блочок с элементом удаляется, отменить удаление и вернуть его нельзя