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.
2.4 KiB
2.4 KiB
Новая 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.