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

Simplify photo ID upload: clear instructions for truckers

Browse source 
- Yellow instruction box explains 3 methods in plain English
  (phone photo, computer upload, scanner)
- One big orange "Add Photo of Your ID" button
- Webcam + QR code kept in code but simplified UI
- Accepted formats note

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

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

@ -207,9 +207,15 @@
<!-- ═══ SECTION: Photo ID (MCS-150, MC Auth) ═══ -->
<div id="dot-sec-photo-id" hidden>
<h3>Government-Issued Photo ID</h3>
<p class="pw-field-help">Required for FMCSA filings. Driver's license, passport, or state ID.</p>
<p class="pw-field-help">FMCSA requires a copy of your government-issued photo ID (driver's license, passport, or state ID) to verify the signer's identity.</p>
<div style="background:#fefce8;border:1px solid #fbbf24;border-radius:8px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:#854d0e;line-height:1.6">
<strong>How to add your ID:</strong><br>
&#8226; <strong>On your phone?</strong> Tap the button below and take a picture of the front of your ID<br>
&#8226; <strong>On a computer?</strong> Take a photo of your ID with your phone, email or text it to yourself, save it, then click the button below to upload it<br>
&#8226; <strong>Have a scanner?</strong> Scan your ID, save the file, then click the button below to upload it
</div>
<div class="pw-upload-area">
<input type="file" id="dot-photo-id" accept="image/*,.pdf" capture="environment" style="display:none" />
<input type="file" id="dot-photo-id" accept="image/*,.pdf" style="display:none" />
<!-- Preview + quality check -->
<div id="dot-id-preview" hidden>
<div style="text-align:center;margin-bottom:12px">
@ -233,45 +239,11 @@
</div>
</div>
<div id="dot-id-upload-options">
<div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center">
<button type="button" id="dot-id-btn" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;color:#374151;font-size:13px;font-weight:500">
<svg style="width:20px;height:20px;color:#64748b" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/></svg>
Upload File / Scan
</button>
<button type="button" id="dot-id-cam-btn" style="display:flex;align-items:center;gap:8px;padding:10px 20px;background:#fff;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;color:#374151;font-size:13px;font-weight:500">
<svg style="width:20px;height:20px;color:#64748b" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
Use Webcam
</button>
</div>
<p style="font-size:11px;color:#94a3b8;text-align:center;margin:8px 0 0">Scanner users: scan your ID using your scanner software, then click "Upload File / Scan" to select the saved image.</p>
<!-- Webcam capture area (hidden until activated) -->
<div id="dot-id-webcam" hidden style="margin-top:12px">
<div style="position:relative;max-width:400px;margin:0 auto;border-radius:8px;overflow:hidden;border:2px solid #1a2744">
<video id="dot-id-video" autoplay playsinline style="width:100%;display:block;background:#000"></video>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;border:2px dashed rgba(249,115,22,0.6);border-radius:8px;width:85%;height:60%"></div>
</div>
<p style="font-size:11px;color:#64748b;text-align:center;margin:6px 0">Position your ID within the orange guide</p>
<div style="display:flex;gap:8px;justify-content:center;margin-top:8px">
<button type="button" id="dot-id-capture" style="padding:10px 32px;background:#f97316;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer">&#128247; Capture</button>
<button type="button" id="dot-id-cam-cancel" style="padding:10px 20px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:8px;font-size:13px;cursor:pointer">Cancel</button>
</div>
</div>
<canvas id="dot-id-canvas" style="display:none"></canvas>
<div style="text-align:center;margin:12px 0 0">
<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:11px;color:#94a3b8;white-space:nowrap">or use your phone</span>
<div style="flex:1;height:1px;background:#d1d5db"></div>
</div>
<button type="button" id="dot-id-qr-btn" style="display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#f8fafc;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;color:#374151">
<svg style="width:16px;height:16px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"/></svg>
Scan QR code to upload from phone
</button>
</div>
<div id="dot-id-qr-container" hidden style="text-align:center;margin:16px 0 0;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px">
<canvas id="dot-id-qr-canvas" style="margin:0 auto;display:block"></canvas>
<p style="font-size:12px;color:#64748b;margin:10px 0 0">Scan this QR code with your phone's camera to open this form on your mobile device and take a photo of your ID.</p>
</div>
<button type="button" id="dot-id-btn" style="display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;box-shadow:0 2px 8px rgba(249,115,22,0.3)">
<svg style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
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>
</div>
</div>
<div class="pw-security-notice" style="margin-top:8px">