justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Always show QR code for phone photo upload — no click to reveal

Browse source 
QR code displayed inline below the upload button so truckers can
immediately scan with their phone to take a photo of their ID.
Clear instructions: 'Scan with your phone camera to take a photo'

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
justin 2026-05-30 16:17:17 -05:00
parent 73a10d4a0f
commit daf6d1f831
1 changed files with 17 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
site/src/components/intake/steps/DOTIntakeStep.astro
View file

@ -244,6 +244,17 @@
Add Photo of Your ID
</button>
<p style="font-size:11px;color:#94a3b8;text-align:center;margin:8px 0 0">Accepted formats: JPEG, PNG, PDF &middot; Max 15MB</p>
<!-- QR code for phone upload — always visible -->
<div style="margin-top:16px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;text-align:center">
<div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px">
<div style="flex:1;height:1px;background:#d1d5db"></div>
<span style="font-size:12px;color:#64748b;font-weight:500">or use your phone</span>
<div style="flex:1;height:1px;background:#d1d5db"></div>
</div>
<img id="dot-id-qr-img" style="width:160px;height:160px;margin:0 auto;display:block;border-radius:4px" alt="Scan to upload from phone" />
<p style="font-size:12px;color:#475569;margin:8px 0 0;font-weight:500">Scan with your phone camera to take a photo of your ID</p>
<p style="font-size:11px;color:#94a3b8;margin:4px 0 0">The form will stay open on your computer while you snap the picture on your phone</p>
</div>
</div>
</div>
<div class="pw-security-notice" style="margin-top:8px">
@ -655,6 +666,12 @@
handleIdFile(idInput.files?.[0]);
});
// Auto-generate QR code for phone upload
var qrImg = document.getElementById("dot-id-qr-img");
if (qrImg) {
qrImg.src = "https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=" + encodeURIComponent(window.location.href);
}
// (webcam capture handled above via getUserMedia)
} // end guard