From dbe01359de2cd535ca2ea7134b40dc2047888e0c Mon Sep 17 00:00:00 2001 From: IK Date: Mon, 7 Sep 2026 17:09:22 +0700 Subject: [PATCH] feat: illustrate empty states --- README.md | 2 +- apps/web/src/layouts/Layout.astro | 1 + apps/web/src/styles/empty-states.css | 2 ++ docs/ROADMAP.md | 2 +- 4 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 apps/web/src/styles/empty-states.css diff --git a/README.md b/README.md index fc5385a..5c3d88d 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ RF4DB/RF4-STAT/RF4MAP/RF4 Posts сначала принимаются в изо Базовый SEO-контур готов для `rf4spotter.ru`: страницы имеют уникальные метаданные, canonical, Open Graph/Twitter Card, фирменное изображение 1200×630 и JSON-LD; доступны динамические `/robots.txt` и `/sitemap.xml`, административные и ошибочные страницы закрыты от индексации, добавлена собственная страница 404. Индексируемые каталоги рыб и водоёмов, detail-страницы и сочетания водоём + рыба строятся из актуального разрешённого справочника и включаются в sitemap. Подключены фирменные favicon/app icons, web manifest и production-кэширование статических ресурсов. Карточки активности показывают единый паспорт данных: источники, свежесть, полноту и уровень доверия. На `/status` опубликована легенда цветов всех источников и статусов качества. -Публичные точки используют постоянные читаемые адреса вида `/spots/kuori-85x92`; старые UUID-адреса остаются совместимыми и перенаправляются на канонический URL. На странице точки координаты дополнительно показаны фирменным радаром, который не имитирует отсутствующую географию водоёма, а уловы за 72 часа — шкалой-леской с 12-часовым шагом. Карточки активности и каталог дополнены лёгкими SVG-силуэтами рыб без внешних графических зависимостей. +Публичные точки используют постоянные читаемые адреса вида `/spots/kuori-85x92`; старые UUID-адреса остаются совместимыми и перенаправляются на канонический URL. На странице точки координаты дополнительно показаны фирменным радаром, который не имитирует отсутствующую географию водоёма, а уловы за 72 часа — шкалой-леской с 12-часовым шагом. Карточки активности и каталог дополнены лёгкими SVG-силуэтами рыб без внешних графических зависимостей. Пустые и аварийные состояния используют собственную CSS-иллюстрацию поплавка; анимация учитывает системное ограничение движения. Все пять community-парсеров подключены к отдельному scheduler-процессу. Состояние запусков и ошибок хранится в PostgreSQL, параллельный запуск одного источника блокируется, минимальный интервал жёстко ограничен 1800 секундами. Локально процесс включается профилем `docker compose --profile scheduler up -d`; detail-URL RF4MAP/RF4 Posts задаются переменными окружения. diff --git a/apps/web/src/layouts/Layout.astro b/apps/web/src/layouts/Layout.astro index c184979..968898d 100644 --- a/apps/web/src/layouts/Layout.astro +++ b/apps/web/src/layouts/Layout.astro @@ -7,6 +7,7 @@ import "../styles/data-legend.css"; import "../styles/coordinate-radar.css"; import "../styles/activity-timeline.css"; import "../styles/fish-silhouette.css"; +import "../styles/empty-states.css"; import FishingIcon from "../components/FishingIcon.astro"; const { title = "RF4 Spotter — свежие точки клёва Russian Fishing 4", diff --git a/apps/web/src/styles/empty-states.css b/apps/web/src/styles/empty-states.css new file mode 100644 index 0000000..cf4d166 --- /dev/null +++ b/apps/web/src/styles/empty-states.css @@ -0,0 +1,2 @@ +.state{position:relative;overflow:hidden;padding:34px}.state:before{content:"";width:22px;height:52px;margin-bottom:18px;border:1px solid #56726d;border-radius:50% 50% 42% 42%;background:linear-gradient(180deg,#ff785a 0 30%,#fff 31% 55%,var(--lime) 56%);box-shadow:inset -5px 0 #173c3f18;transform:rotate(3deg)}.state:after{content:"";position:absolute;width:88px;height:18px;left:50%;top:89px;translate:-50% 0;border:1px solid #648784;border-width:1px 0 0;border-radius:50%;box-shadow:0 -7px 0 -6px #648784,0 7px 0 -6px #648784;opacity:.55}.state.compact-state:before{width:17px;height:40px;margin-bottom:11px}.state.compact-state:after{top:60px;width:68px}.state.error-state:before{filter:grayscale(.35);opacity:.7} +@media(prefers-reduced-motion:no-preference){.state:before{animation:empty-bob 3s ease-in-out infinite}.state:after{animation:empty-ripple 3s ease-out infinite}}@keyframes empty-bob{50%{translate:0 -4px;rotate:-4deg}}@keyframes empty-ripple{50%{scale:1.12 .9;opacity:.25}} diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index bfb444c..b3afe8c 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -131,7 +131,7 @@ - [x] Добавить публичную легенду цветов источников и статусов качества на странице `/status` (7 сентября 2026). - [ ] Добавить skeleton-состояния для динамических публичных блоков. - [ ] Добавить ненавязчивый баннер открытой альфы и канал обратной связи. -- [ ] Дополнить пустые состояния собственными рыболовными иллюстрациями с поддержкой `prefers-reduced-motion`. +- [x] Дополнить пустые состояния собственной CSS-иллюстрацией поплавка и ряби с поддержкой `prefers-reduced-motion` (7 сентября 2026). ### Производительность, данные и эксплуатация