From d62e3b83131b536507dfe06971e3a66a6efc8b66 Mon Sep 17 00:00:00 2001 From: insleker Date: Mon, 22 Sep 2025 21:19:32 +0800 Subject: [PATCH] feat: add mobile PDF screen wireframe for compact viewing and signature placement --- .../mobile_pdf_phone.excalidraw | 1227 +++++++++++++++++ docs/wireframe.md | 17 + 2 files changed, 1244 insertions(+) create mode 100644 docs/wireframe.assets/mobile_pdf_phone.excalidraw diff --git a/docs/wireframe.assets/mobile_pdf_phone.excalidraw b/docs/wireframe.assets/mobile_pdf_phone.excalidraw new file mode 100644 index 0000000..fa57a5f --- /dev/null +++ b/docs/wireframe.assets/mobile_pdf_phone.excalidraw @@ -0,0 +1,1227 @@ +{ + "type": "excalidraw", + "version": 2, + "source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor", + "elements": [ + { + "type": "rectangle", + "version": 3, + "versionNonce": 2086568598, + "isDeleted": false, + "id": "phone-frame", + "fillStyle": "hachure", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 0, + "y": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "#ffffff", + "width": 360, + "height": 740, + "seed": 1001, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "a0", + "frameId": null, + "updated": 1758546265156, + "link": null, + "locked": true + }, + { + "type": "rectangle", + "version": 2, + "versionNonce": 58075648, + "isDeleted": false, + "id": "status-bar", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "dashed", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 8, + "y": 8, + "strokeColor": "#adb5bd", + "backgroundColor": "#f1f3f5", + "width": 344, + "height": 20, + "seed": 1002, + "groupIds": [], + "boundElements": [], + "index": "a1", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 2, + "versionNonce": 903443968, + "isDeleted": false, + "id": "status-time", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 16, + "y": 12, + "strokeColor": "#343a40", + "backgroundColor": "transparent", + "width": 40, + "height": 16, + "seed": 1003, + "groupIds": [], + "boundElements": [], + "fontSize": 14, + "fontFamily": 1, + "text": "09:41", + "textAlign": "left", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "a2", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "09:41", + "autoResize": true + }, + { + "type": "rectangle", + "version": 2, + "versionNonce": 1193339392, + "isDeleted": false, + "id": "app-bar", + "fillStyle": "hachure", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 8, + "y": 36, + "strokeColor": "#1e1e1e", + "backgroundColor": "#ffffff", + "width": 344, + "height": 48, + "seed": 1004, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "a3", + "frameId": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 39, + "versionNonce": 1402055168, + "isDeleted": false, + "id": "app-bar-title", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 55.47645568847656, + "y": 49.54351806640625, + "strokeColor": "#343a40", + "backgroundColor": "transparent", + "width": 80.52816772460938, + "height": 19.2, + "seed": 1009, + "groupIds": [], + "boundElements": [], + "fontSize": 16, + "fontFamily": 1, + "text": "Sample.pdf", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 18, + "lineHeight": 1.2, + "index": "a8", + "frameId": null, + "roundness": null, + "updated": 1758545930239, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Sample.pdf", + "autoResize": true + }, + { + "type": "rectangle", + "version": 3, + "versionNonce": 1405046922, + "isDeleted": false, + "id": "viewport", + "fillStyle": "cross-hatch", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 8, + "y": 88, + "strokeColor": "#1e1e1e", + "backgroundColor": "#ffffff", + "width": 344, + "height": 540, + "seed": 1010, + "groupIds": [], + "boundElements": [], + "index": "a9", + "frameId": null, + "roundness": null, + "updated": 1758546267556, + "link": null, + "locked": true + }, + { + "type": "rectangle", + "version": 3, + "versionNonce": 88359510, + "isDeleted": false, + "id": "pdf-page", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 36, + "y": 110, + "strokeColor": "#868e96", + "backgroundColor": "#ffffff", + "width": 288, + "height": 496, + "seed": 1011, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aA", + "frameId": null, + "updated": 1758546271486, + "link": null, + "locked": true + }, + { + "type": "text", + "version": 2, + "versionNonce": 39578112, + "isDeleted": false, + "id": "pdf-hint", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 118, + "y": 336, + "strokeColor": "#adb5bd", + "backgroundColor": "transparent", + "width": 120, + "height": 18, + "seed": 1012, + "groupIds": [], + "boundElements": [], + "fontSize": 16, + "fontFamily": 1, + "text": "PDF page preview", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 16, + "lineHeight": 1.2, + "index": "aB", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "PDF page preview", + "autoResize": true + }, + { + "type": "ellipse", + "version": 2, + "versionNonce": 1362081280, + "isDeleted": false, + "id": "fab", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 292, + "y": 564, + "strokeColor": "#1971c2", + "backgroundColor": "#4dabf7", + "width": 48, + "height": 48, + "seed": 1013, + "groupIds": [], + "boundElements": [], + "index": "aC", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 2, + "versionNonce": 1666099712, + "isDeleted": false, + "id": "fab-plus", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 306, + "y": 578, + "strokeColor": "#ffffff", + "backgroundColor": "transparent", + "width": 20, + "height": 20, + "seed": 1014, + "groupIds": [], + "boundElements": [], + "fontSize": 20, + "fontFamily": 1, + "text": "+", + "textAlign": "left", + "verticalAlign": "top", + "baseline": 18, + "lineHeight": 1.2, + "index": "aD", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "+", + "autoResize": true + }, + { + "type": "text", + "version": 120, + "versionNonce": 1186264576, + "isDeleted": false, + "id": "pager-zoom", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 156.48826599121094, + "y": 53.29779052734375, + "strokeColor": "#343a40", + "backgroundColor": "transparent", + "width": 103.19357299804688, + "height": 16.8, + "seed": 1016, + "groupIds": [], + "boundElements": [], + "fontSize": 14, + "fontFamily": 1, + "text": "‹ 2 / 10 › ", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aF", + "frameId": null, + "roundness": null, + "updated": 1758545934340, + "link": null, + "locked": false, + "containerId": null, + "originalText": "‹ 2 / 10 › ", + "autoResize": true + }, + { + "type": "rectangle", + "version": 2, + "versionNonce": 1161442816, + "isDeleted": false, + "id": "bottom-sheet", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "dashed", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 8, + "y": 688, + "strokeColor": "#adb5bd", + "backgroundColor": "#f8f9fa", + "width": 344, + "height": 44, + "seed": 1017, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aG", + "frameId": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 9, + "versionNonce": 1389474506, + "isDeleted": false, + "id": "bottom-tabs", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 148.19512939453125, + "y": 702, + "strokeColor": "#495057", + "backgroundColor": "transparent", + "width": 71.6097412109375, + "height": 16.8, + "seed": 1018, + "groupIds": [], + "boundElements": [], + "fontSize": 14, + "fontFamily": 1, + "text": "Signatures", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aH", + "frameId": null, + "roundness": null, + "updated": 1758546342599, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Signatures", + "autoResize": true + }, + { + "type": "text", + "version": 8, + "versionNonce": 1877755146, + "isDeleted": false, + "id": "legend", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 380, + "y": 8, + "strokeColor": "#212529", + "backgroundColor": "transparent", + "width": 313.766845703125, + "height": 84, + "seed": 1019, + "groupIds": [], + "boundElements": [], + "fontSize": 14, + "fontFamily": 1, + "text": "Mobile PDF screen (phone)\n- App bar: menu, title (page count), signature\n- Viewport: scroll, pinch-zoom\n- Bottom drawer: add/drag signature\n- Bottom sheet tabs: Signatures", + "textAlign": "left", + "verticalAlign": "top", + "baseline": 154, + "lineHeight": 1.2, + "index": "aI", + "frameId": null, + "roundness": null, + "updated": 1758547007851, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Mobile PDF screen (phone)\n- App bar: menu, title (page count), signature\n- Viewport: scroll, pinch-zoom\n- Bottom drawer: add/drag signature\n- Bottom sheet tabs: Signatures", + "autoResize": true + }, + { + "type": "rectangle", + "version": 17, + "versionNonce": 635745792, + "isDeleted": false, + "id": "signature-sheet", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 8, + "y": 420, + "strokeColor": "#343a40", + "backgroundColor": "#f8f9fa", + "width": 344, + "height": 252.41928100585938, + "seed": 20102, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aJ", + "frameId": null, + "updated": 1758545944172, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 2, + "versionNonce": 413447680, + "isDeleted": false, + "id": "signature-sheet-title", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 20, + "y": 430, + "strokeColor": "#212529", + "backgroundColor": "transparent", + "width": 120, + "height": 18, + "seed": 20103, + "groupIds": [], + "boundElements": [], + "fontSize": 16, + "fontFamily": 1, + "text": "Signatures", + "textAlign": "left", + "verticalAlign": "top", + "baseline": 16, + "lineHeight": 1.2, + "index": "aK", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Signatures", + "autoResize": true + }, + { + "type": "text", + "version": 2, + "versionNonce": 967420416, + "isDeleted": false, + "id": "signature-sheet-hint", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 188, + "y": 430, + "strokeColor": "#868e96", + "backgroundColor": "transparent", + "width": 152, + "height": 16, + "seed": 20104, + "groupIds": [], + "boundElements": [], + "fontSize": 12, + "fontFamily": 1, + "text": "Long‑press a card to drag", + "textAlign": "right", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aL", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Long‑press a card to drag", + "autoResize": true + }, + { + "type": "rectangle", + "version": 2, + "versionNonce": 1318974976, + "isDeleted": false, + "id": "sig-card-1", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 20, + "y": 456, + "strokeColor": "#495057", + "backgroundColor": "#ffffff", + "width": 96, + "height": 72, + "seed": 20105, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aM", + "frameId": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 2, + "versionNonce": 1793354240, + "isDeleted": false, + "id": "sig-card-1-text", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 28, + "y": 486, + "strokeColor": "#343a40", + "backgroundColor": "transparent", + "width": 80, + "height": 16, + "seed": 20106, + "groupIds": [], + "boundElements": [], + "fontSize": 12, + "fontFamily": 1, + "text": "John Doe", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aN", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "John Doe", + "autoResize": true + }, + { + "type": "rectangle", + "version": 2, + "versionNonce": 1936668160, + "isDeleted": false, + "id": "sig-card-2", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 132, + "y": 456, + "strokeColor": "#495057", + "backgroundColor": "#ffffff", + "width": 96, + "height": 72, + "seed": 20107, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aO", + "frameId": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 3, + "versionNonce": 621550870, + "isDeleted": false, + "id": "sig-card-2-text", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 140, + "y": 486, + "strokeColor": "#343a40", + "backgroundColor": "transparent", + "width": 80, + "height": 16, + "seed": 20108, + "groupIds": [], + "boundElements": [ + { + "id": "drag-arrow", + "type": "arrow" + } + ], + "fontSize": 12, + "fontFamily": 1, + "text": "Jane Smith", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aP", + "frameId": null, + "roundness": null, + "updated": 1758546319082, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Jane Smith", + "autoResize": true + }, + { + "type": "rectangle", + "version": 2, + "versionNonce": 1813542400, + "isDeleted": false, + "id": "sig-card-3", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 244, + "y": 456, + "strokeColor": "#495057", + "backgroundColor": "#ffffff", + "width": 96, + "height": 72, + "seed": 20109, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aQ", + "frameId": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 2, + "versionNonce": 1481763328, + "isDeleted": false, + "id": "sig-card-3-text", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 252, + "y": 486, + "strokeColor": "#343a40", + "backgroundColor": "transparent", + "width": 80, + "height": 16, + "seed": 20110, + "groupIds": [], + "boundElements": [], + "fontSize": 12, + "fontFamily": 1, + "text": "Company Chop", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aR", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Company Chop", + "autoResize": true + }, + { + "type": "rectangle", + "version": 2, + "versionNonce": 2107225600, + "isDeleted": false, + "id": "sig-card-new", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "dashed", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 20, + "y": 540, + "strokeColor": "#868e96", + "backgroundColor": "#ffffff", + "width": 96, + "height": 72, + "seed": 20111, + "groupIds": [], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aS", + "frameId": null, + "updated": 1758545013424, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 2, + "versionNonce": 176466432, + "isDeleted": false, + "id": "sig-card-new-text", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 56, + "y": 570, + "strokeColor": "#495057", + "backgroundColor": "transparent", + "width": 24, + "height": 24, + "seed": 20112, + "groupIds": [], + "boundElements": [], + "fontSize": 20, + "fontFamily": 1, + "text": "+", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 22, + "lineHeight": 1.2, + "index": "aT", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "+", + "autoResize": true + }, + { + "type": "text", + "version": 2, + "versionNonce": 1290991104, + "isDeleted": false, + "id": "sig-card-new-label", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 30, + "y": 600, + "strokeColor": "#868e96", + "backgroundColor": "transparent", + "width": 76, + "height": 14, + "seed": 20113, + "groupIds": [], + "boundElements": [], + "fontSize": 11, + "fontFamily": 1, + "text": "New signature", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 12, + "lineHeight": 1.2, + "index": "aU", + "frameId": null, + "roundness": null, + "updated": 1758545013424, + "link": null, + "locked": false, + "containerId": null, + "originalText": "New signature", + "autoResize": true + }, + { + "type": "arrow", + "version": 16, + "versionNonce": 938233750, + "isDeleted": false, + "id": "drag-arrow", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "dashed", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 180, + "y": 492, + "strokeColor": "#1971c2", + "backgroundColor": "transparent", + "width": 47.34820556640625, + "height": 83.96286010742188, + "seed": 20114, + "groupIds": [], + "boundElements": [], + "startBinding": { + "elementId": "sig-card-2-text", + "focus": 0.02941176470588102, + "gap": 6 + }, + "endBinding": { + "elementId": "drop-hint", + "focus": 0.9026247210012373, + "gap": 11.734649658203125 + }, + "lastCommittedPoint": null, + "startArrowhead": null, + "endArrowhead": "arrow", + "points": [ + [ + 0, + 0 + ], + [ + -20, + -30 + ], + [ + -47.34820556640625, + -83.96286010742188 + ] + ], + "index": "aV", + "frameId": null, + "roundness": null, + "updated": 1758546319554, + "link": null, + "locked": false + }, + { + "type": "rectangle", + "version": 26, + "versionNonce": 1875642646, + "isDeleted": false, + "id": "drag-ghost", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "dashed", + "roughness": 1, + "opacity": 70, + "angle": 0, + "x": 116.22015380859375, + "y": 369.5638732910156, + "strokeColor": "#1971c2", + "backgroundColor": "#e7f5ff", + "width": 96, + "height": 40, + "seed": 20115, + "groupIds": [ + "40dcTIA8pDjqs4w5wOPGr" + ], + "boundElements": [], + "roundness": { + "type": 3 + }, + "index": "aVV", + "frameId": null, + "updated": 1758546313451, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 25, + "versionNonce": 477710998, + "isDeleted": false, + "id": "drop-hint", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 122.22015380859375, + "y": 380.302490234375, + "strokeColor": "#1971c2", + "backgroundColor": "transparent", + "width": 84, + "height": 16, + "seed": 20116, + "groupIds": [ + "40dcTIA8pDjqs4w5wOPGr" + ], + "boundElements": [ + { + "id": "drag-arrow", + "type": "arrow" + } + ], + "fontSize": 12, + "fontFamily": 1, + "text": "dragging…", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aW", + "frameId": null, + "roundness": null, + "updated": 1758546319081, + "link": null, + "locked": false, + "containerId": null, + "originalText": "dragging…", + "autoResize": true + }, + { + "type": "rectangle", + "version": 217, + "versionNonce": 917802570, + "isDeleted": false, + "id": "placed-signature", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "angle": 0, + "x": 82.80108642578125, + "y": 250.4421844482422, + "strokeColor": "#212529", + "backgroundColor": "#ffffff", + "width": 120, + "height": 40, + "seed": 20117, + "groupIds": [ + "y9YklZHvkBMLWjQhXvIKI" + ], + "boundElements": [], + "roundness": null, + "index": "aY", + "frameId": null, + "updated": 1758546240311, + "link": null, + "locked": false + }, + { + "type": "text", + "version": 256, + "versionNonce": 1918907658, + "isDeleted": false, + "id": "placed-signature-text", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 90.80108642578125, + "y": 262.4421844482422, + "strokeColor": "#343a40", + "backgroundColor": "transparent", + "width": 104, + "height": 16, + "seed": 20118, + "groupIds": [ + "y9YklZHvkBMLWjQhXvIKI" + ], + "boundElements": [], + "fontSize": 12, + "fontFamily": 1, + "text": "Placed signature", + "textAlign": "center", + "verticalAlign": "top", + "baseline": 14, + "lineHeight": 1.2, + "index": "aZ", + "frameId": null, + "roundness": null, + "updated": 1758546240311, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Placed signature", + "autoResize": true + }, + { + "type": "rectangle", + "version": 175, + "versionNonce": 1869153226, + "isDeleted": false, + "id": "handle-tl", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 80.80108642578125, + "y": 248.4421844482422, + "strokeColor": "#212529", + "backgroundColor": "#ffffff", + "width": 6, + "height": 6, + "seed": 20119, + "groupIds": [ + "y9YklZHvkBMLWjQhXvIKI" + ], + "boundElements": [], + "index": "aa", + "frameId": null, + "roundness": null, + "updated": 1758546240311, + "link": null, + "locked": false + }, + { + "type": "rectangle", + "version": 175, + "versionNonce": 1474951818, + "isDeleted": false, + "id": "handle-tr", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 202.80108642578125, + "y": 248.4421844482422, + "strokeColor": "#212529", + "backgroundColor": "#ffffff", + "width": 6, + "height": 6, + "seed": 20200, + "groupIds": [ + "y9YklZHvkBMLWjQhXvIKI" + ], + "boundElements": [], + "index": "ab", + "frameId": null, + "roundness": null, + "updated": 1758546240311, + "link": null, + "locked": false + }, + { + "type": "rectangle", + "version": 175, + "versionNonce": 1520310602, + "isDeleted": false, + "id": "handle-bl", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 80.80108642578125, + "y": 288.4421844482422, + "strokeColor": "#212529", + "backgroundColor": "#ffffff", + "width": 6, + "height": 6, + "seed": 20201, + "groupIds": [ + "y9YklZHvkBMLWjQhXvIKI" + ], + "boundElements": [], + "index": "ac", + "frameId": null, + "roundness": null, + "updated": 1758546240311, + "link": null, + "locked": false + }, + { + "type": "rectangle", + "version": 175, + "versionNonce": 383803402, + "isDeleted": false, + "id": "handle-br", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "angle": 0, + "x": 202.80108642578125, + "y": 288.4421844482422, + "strokeColor": "#212529", + "backgroundColor": "#ffffff", + "width": 6, + "height": 6, + "seed": 20202, + "groupIds": [ + "y9YklZHvkBMLWjQhXvIKI" + ], + "boundElements": [], + "index": "ad", + "frameId": null, + "roundness": null, + "updated": 1758546240311, + "link": null, + "locked": false + } + ], + "appState": { + "gridSize": 20, + "gridStep": 5, + "gridModeEnabled": false, + "viewBackgroundColor": "#ffffff" + }, + "files": {} +} \ No newline at end of file diff --git a/docs/wireframe.md b/docs/wireframe.md index 0c23453..3af6efc 100644 --- a/docs/wireframe.md +++ b/docs/wireframe.md @@ -78,6 +78,23 @@ Illustration: --- +### Mobile PDF screen (phone) + +Purpose: compact PDF viewing and signature placement on small screens. +Route: root --> opened (mobile) + +Design notes: +- Top app bar with: menu (page thumbnails), title with current page and total pages (prev/next). +- Center viewport supports scroll and pinch-zoom. +- Bottom sheet button to show Signatures drawers. + - bottom drawer to add/drag a signature onto the page. + +Illustration: + +![](wireframe.assets/mobile_pdf_phone.excalidraw) + +--- + ## How to view and export We keep links in this file pointing to `.excalidraw`. To preview the SVGs and generate `docs/.wireframe.md` with `.svg` links, run from repo root: