Zakhar Timoshenko
1e3a911055
- Introduced new QR card layout as of October 9, 2026. - Updated `PassengerQr.tsx` and QR styles, including camera/phone icons. - Confirmed successful TypeScript and Vite builds; tests for QR decoding passed. - Detailed specifications for various display resolutions and configurations. - Included animations and accessibility considerations for reduced motion preferences. - Added example images for visual reference.
15 lines
2.4 KiB
Markdown
15 lines
2.4 KiB
Markdown
# Новая QR-карточка — 9 октября 2026
|
||
|
||
Изменены `PassengerQr.tsx`, иконки камеры/телефона VK и стили QR. Данные остановки, генератор QR и публичная ссылка сохранены.
|
||
|
||
- `npm run build`: TypeScript и Vite проходят. `node --test test/qr.test.mjs`: декодирование трёх ссылок и свободное поле 4 модуля проходят.
|
||
- 1000×900, отдельная карточка: QR-панель и информация заполняют доступную высоту. Рамка QR 380×380 px, карточка 520 px по высоте. В обеих темах `scrollHeight = clientHeight`, горизонтального переполнения нет.
|
||
- 1280×900, три карточки: QR-панель расположена над остановкой, шагами и ссылкой. Высота карточки 497 px, QR 182×182 px, внутреннего переполнения нет.
|
||
- 855×723: широкий QR 260×260 px, высота карточки 375 px, все элементы видны без прокрутки.
|
||
- 879×593: QR 200×200 px, карточка 314 px; краткие шаги помещаются рядом с кодом.
|
||
- 390×667: код сверху, подсказка и ссылка в одной строке снизу. QR 167×167 px, карточка 320 px, внутреннего и горизонтального переполнения нет. Код увеличен относительно варианта с боковым текстом.
|
||
- Фоновая линия имеет анимацию `qr-route-flow`; сам QR не движется. При `prefers-reduced-motion` декоративная анимация явно отключена в CSS.
|
||
- Дополнительно `jsQR` декодировал код с настоящего снимка светлой страницы 1000×900, тёмного снимка 390×667 и компоновки 1280×900. Во всех случаях результат — `https://pwa.ridebus.by/?city=1&stop=1`. Это проверка пикселей страницы, а не испытание физической камеры или уличного дисплея.
|
||
|
||
Снимки: `board-qr-wide.jpg`, `board-qr-light.jpg`, `board-qr-three-cards.jpg`, `board-qr-ticket-portrait.jpg`.
|