diff --git a/apps/web/src/pages/report.astro b/apps/web/src/pages/report.astro index bbfca99..ee834c8 100644 --- a/apps/web/src/pages/report.astro +++ b/apps/web/src/pages/report.astro @@ -7,14 +7,20 @@ const state = Astro.url.searchParams.get("state"); const reportId = Astro.url.searchParams.get("report_id"); --- -
+1 Помочь сообществу

Добавить
свой улов

Полминуты — и рабочая точка появится в общей статистике после проверки модератором.

+
+1 Помочь сообществу

Добавить
свой улов

Около минуты — и рабочая точка появится в общей статистике после проверки модератором.

{state === "sent" &&
Улов отправлен на модерацию. Спасибо!
} {state === "screenshot_sent" &&
Скриншот добавлен к ранее созданной заявке.
} - {state === "create_error" &&
Заявка не создана. Проверьте поля и повторите отправку.
} + {state === "create_error" &&
Заявка не создана. Проверьте поля; введённые значения сохранены.
} {state === "screenshot_error" &&
Заявка сохранена без скриншота. Изображение не загрузилось; можно повторить отдельно, не отправляя улов заново.
} {state === "screenshot_error" && reportId &&
} {unavailable ?

Форма временно недоступна

:
-
-

Ник и скриншот необязательны. Из изображения удаляются EXIF и прочие метаданные.

+
Главное обязательно

Координаты — два целых числа с карты. Вес: 1,25 кг = 1250 г.

+
Дополнительные сведения необязательно

Ник и скриншот необязательны. Из изображения удаляются EXIF и прочие метаданные.

} +
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css index 20c65ba..5bb920e 100644 --- a/apps/web/src/styles/global.css +++ b/apps/web/src/styles/global.css @@ -21,3 +21,4 @@ footer{min-height:118px;background:var(--deep);color:#dbe4df;padding:28px max(32 .float-gauge{width:122px;height:142px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:8px;isolation:isolate}.float-gauge:before,.float-gauge:after{content:"";position:absolute;left:3px;right:3px;border:1px solid #ffffff1d;border-radius:50%}.float-gauge:before{height:28px;bottom:25px;box-shadow:0 0 0 10px #ffffff08}.float-gauge:after{height:15px;bottom:32px}.float-gauge__line{position:absolute;left:50%;top:0;width:1px;height:105px;background:linear-gradient(#ffffff55,#ffffff12);z-index:-1}.float-gauge__water{position:absolute;left:11px;right:11px;bottom:39px;height:calc(var(--level)*.62);max-height:62px;background:linear-gradient(180deg,#c9f45b08,#c9f45b36);border-top:1px solid var(--lime);clip-path:polygon(0 6px,18% 0,36% 6px,54% 0,72% 6px,90% 0,100% 4px,100% 100%,0 100%)}.float-gauge__bob{position:absolute;left:50%;bottom:calc(39px + var(--level)*.62);width:18px;height:54px;transform:translate(-50%,50%);border:1px solid #e6f8ad;border-radius:50% 50% 42% 42%;background:linear-gradient(180deg,var(--lime) 0 35%,#f4f7ed 36% 58%,#e47e3b 59%);box-shadow:0 5px 18px #c9f45b38}.float-gauge__bob i{position:absolute;left:50%;top:-24px;width:1px;height:25px;background:#dfe9dc}.float-gauge strong{position:relative;z-index:2;font:400 31px/1 Georgia,serif;text-shadow:0 2px 8px var(--deep)}.float-gauge small{position:relative;z-index:2;color:#a9b8b5;font-size:9px;text-transform:uppercase}.best-lure>div{grid-template-columns:25px 1fr auto} @media(max-width:720px){.float-gauge{width:100px}} @media(prefers-reduced-motion:no-preference){.pulse-orb span{animation:ripple-pulse 2.4s ease-out infinite}.float-gauge__bob{animation:bob 2.8s ease-in-out infinite}}@keyframes ripple-pulse{50%{box-shadow:0 0 0 15px #c9f45b08}}@keyframes bob{50%{translate:0 -3px}} +.report-form fieldset{border:0;padding:0;margin:0}.report-form legend{width:100%;margin-bottom:18px;font:400 24px Georgia,serif}.report-form legend span,.optional-fields summary span{float:right;font:11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#7c8c89}.field-help{color:#657572;font-size:12px}.optional-fields{margin:26px 0;border-block:1px solid #d6dfd7;padding:18px 0}.optional-fields summary{cursor:pointer;font:400 20px Georgia,serif}.optional-fields[open] summary{margin-bottom:20px}.report-form input:user-invalid,.report-form select:user-invalid{border-color:#b84c3c} diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index 5479889..833a9ef 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -75,7 +75,7 @@ - [x] Исправить единую шкалу активности и русские числительные во всех публичных представлениях (пакет A UI/UX-аудита; unit-тест границ и E2E согласованности). - [x] Дополнить визуальный язык авторскими рыболовными SVG-иконками и шкалой активности в форме поплавка; анимации учитывают `prefers-reduced-motion`. - [x] Сократить мобильный путь до результатов и улучшить фильтры: компактный hero, основные фильтры перед глазами, раскрываемые период/сортировка, строка условий и сброс (пакет B UI/UX-аудита). -- [ ] Упростить форму улова, добавить помощь форматов и сохранение значений при ошибке (пакет C UI/UX-аудита). +- [x] Упростить форму улова, добавить помощь форматов, валидацию и сохранение значений при ошибке (пакет C UI/UX-аудита). - [ ] Заменить slug-фильтры и улучшить мобильное представление рекордов/detail (пакет D UI/UX-аудита). - [ ] Выполнить accessibility/admin safety пакет с axe/Lighthouse (пакет E UI/UX-аудита). - [ ] Добавить smoke-проверку административной очереди внешних источников на desktop/mobile без публикации реальных записей. @@ -119,11 +119,10 @@ Технический production-контур, health/readiness, backup/restore и безопасные логи готовы. Следующие пункты выполняются строго по одному: -1. UI/UX-пакет C: упростить форму улова и сохранить введённые значения при ошибке; -2. UI/UX-пакет D: фильтры и мобильное представление рекордов/detail; -3. accessibility/admin safety и Lighthouse; -4. мониторинг, DNS/TLS и проверка production-профиля на целевом сервере; -5. финальное обновление README, лицензия кода и политика данных. +1. UI/UX-пакет D: фильтры и мобильное представление рекордов/detail; +2. accessibility/admin safety и Lighthouse; +3. мониторинг, DNS/TLS и проверка production-профиля на целевом сервере; +4. финальное обновление README, лицензия кода и политика данных. После каждого пункта необходимо: diff --git a/docs/UI_UX_AUDIT.md b/docs/UI_UX_AUDIT.md index a2cc430..ebe33e9 100644 --- a/docs/UI_UX_AUDIT.md +++ b/docs/UI_UX_AUDIT.md @@ -61,11 +61,11 @@ ### Пакет C — форма улова -- [ ] Разделить форму на обязательную основу и раскрываемые дополнительные сведения. -- [ ] Добавить примеры координат и помощь с единицами веса. -- [ ] Показывать ошибки рядом с конкретным полем и общий summary с переводом фокуса. -- [ ] Сохранять введённые значения после ошибки создания и отдельно обрабатывать повтор скриншота. -- [ ] Привести обещание времени заполнения в соответствие с измеренным сценарием. +- [x] Разделить форму на обязательную основу и раскрываемые дополнительные сведения. +- [x] Добавить примеры координат и помощь с единицами веса. +- [x] Показывать нативные ошибки рядом с полем и общий summary с переводом фокуса. +- [x] Сохранять значения в `sessionStorage` после ошибки; повтор скриншота обрабатывать отдельно. +- [x] Привести обещание времени заполнения к реалистичному «около минуты». Критерий: новый пользователь без документации понимает формат координат/веса, ошибка не уничтожает введённые данные, обязательные поля визуально очевидны.