Вёрстка страницы памяти

Страница памяти — диджитал мемориал для близких, которых уже нет с нами. Страница памяти представляем из себя набор информационных блоков, в которых пользователь добавляет информацию о жизни усобшего.

На странице памяти имеются следующие разделы:

• Хедер

• Титульный экран

• Награды

• Эпитафия

• Биография

• Последний бой

• Воспоминания близких

• Медиа

• Последний адрес

• Банер

• Футер

В данный момент есть свёрстанные Страницы памяти для цивильных людей. Новая страница памяти будет дублировать часть разделов из старой версии, часть же из них необходимо переработать частично или полностью.

Пример страницы памяти можно посмотреть по ссылке: https://app.inheart.memorial/memory/zheldakov-oleksandr-borysovych-29-07-1956-20-11-2023/

Сайт разработан на вордпресс, учитывайте это при разработке. Данные на страницу памяти будут попадать из личного кабинета пользователя.

Титульный экран.

Артефакты:

• Фон(паттерн). Представляет из себя сочетание национального орнамента и пиксельного камуфляжа.

• Фотография.

• Бегущая строка вокруг фото. Показывает количество лет, недель, дней, часов жизни человека. Выполняет декоративную функцию.

• ФИО

• Подразделение/бригада

• Даты рождения и гибели

• Информационная строка. Показывает род войск, звание, должность и позывной.

Анимация и взаимодействие:

• Фон(паттерн). Фон проявляется с помощью “пикселей” в течение 1-1,5 сек после открытя страницы. Паттерн должен иметь отклик от наведения курсора. Пиксели должны исчезать и появляться вновь после 1-2 сек. Область активации пикселей примерно 250-300 рх вокруг курсора.

Референсы:

https://kp-design.in/

https://www.davidanthonychenault.com/ см. ховер в разделе проектов и активацию меню

https://www.thecheckout.klarna.com/ появление текстовых элементов

ФИО должны появляться с анимацией как в референсе: https://www.dutchblue.world/ (второй экран)

Награды и медали:

Карточки с визуальным отображением медали и описанием. По ховеру должны переворачиваться и показывать описание. Если описание длиннее стандартного, показываем кнопку “читать далее”. По нажатию открывается попап с полным описанием.

Если наград больше четырёх, показываем кнопку “смотреть ещё”.

Эпитафия.

Блок свёрстан, нужно лишь заменить шрифт.

Биография:

Блок свёрстан, нужно заменить шрифт. Так же в биографию добавляются фотографии. Их отображение показано в макетах.

Когда пользователь доскролил до последнего блока биографии, фон меняется на тёмный, контент же меняет цвет на белый. Таким образом мы визуально подводим под блок “последний бой”

Последний бой.

В этом блоке пользователь заполняет информацию о событиях последних дней погибшего воина: текстовое описание, место(населённый пункт или его район, дата).

Когда пользователь доходит до этого блока, страница перестаёт скролиться. Срабатывает анимация затемнения фона с помощью пикселей двух цветов: оливковый и чёрный. После анимации показываем дату гибели.

В этом блоке нужно использовать апи Мапбокса. Стили карты уже настроены, нужно лишь правильно интегрировать.

Воспоминания близких:

В этом блоке другие пользователи могут оставлять слова поддержки и делиться фотографиями, которых нет у семьи погибшего. Блок свёрстан, нужно лишь заменить шрифты.

Медиа-файлы:

В этот раздел пользователь добавляет фото, видео, ссылки на социальные сети. Блок свёрстан. Нужно заменить шрифты и цвет ховера.

Последний адрес:

Пользователь указывает место захоронения.

Блок свёрстан, нужно заменить шрифты, цвет. Так же необходимо установить мапбокс вместо гугл-карты.

Футер:

Блок свёрстан. Нужно лишь заменить цвет фона.

Плавность скрола https://casadisolare.com/

Ссылки на макеты

https://www.figma.com/file/HkRtcRKRZYy5tllEitWTlA/inheart-memory-page?type=design&node-id=1%3A35&mode=design&t=M7ubHplji5nb4fGr-1