lfg2025/sapien
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish mobile card and signature flow

Browse Source
This commit is contained in:
Dorian
2026-05-15 18:42:56 -05:00
parent 57cbbef5d8
commit 1e73bbf2c0
4 changed files with 76 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<meta name="theme-color" content="#0a0a0a" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="L484" />

4
public/manifest.webmanifest
View File

@@ -8,8 +8,8 @@
"display": "standalone",
"display_override": ["standalone"],
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000",
"background_color": "#0a0a0a",
"theme_color": "#0a0a0a",
"icons": [
{
"src": "/images/app-icon-192.png",

47
src/App.vue
View File

@@ -162,6 +162,7 @@ const isCreatingMembership = ref(false)
const formError = ref('')
const signatureCanvas = ref(null)
const signatureHasInk = ref(false)
const signatureStrokes = ref([])
const backupFileInput = ref(null)
const backupPassword = ref('')
const restorePassword = ref('')
@@ -216,6 +217,7 @@ const isAdminLoading = ref(false)
const isAdminMenuOpen = ref(false)
const mobileMenuOpen = ref(false)
let isSigning = false
let activeSignatureStroke = null
const form = reactive({
fullName: '',
email: '',
@@ -753,6 +755,8 @@ const restoreSignupDraft = () => {
form.phone = sanitizeText(draft.form?.phone, MAX_PHONE_LENGTH)
form.accepted = Boolean(draft.form?.accepted)
form.signature = DATA_IMAGE_PATTERN.test(draft.form?.signature || '') ? draft.form.signature : ''
signatureStrokes.value = []
activeSignatureStroke = null
signatureHasInk.value = Boolean(form.signature)
const restoredStep = clampSignupStep(draft.step)
if (restoredStep === 1 && isPwaStandalone.value) return 2
@@ -913,6 +917,8 @@ const resetForm = () => {
form.signature = ''
form.accepted = false
formError.value = ''
signatureStrokes.value = []
activeSignatureStroke = null
signatureHasInk.value = false
}
@@ -1122,12 +1128,16 @@ const syncSignatureCanvas = () => {
if (!canvas) return
const rect = canvas.getBoundingClientRect()
if (rect.width < 1 || rect.height < 1) {
window.requestAnimationFrame(syncSignatureCanvas)
return
}
const ratio = Math.max(window.devicePixelRatio || 1, 1)
canvas.width = rect.width * ratio
canvas.height = rect.height * ratio
canvas.width = Math.round(rect.width * ratio)
canvas.height = Math.round(rect.height * ratio)
const context = canvas.getContext('2d')
context.scale(ratio, ratio)
context.setTransform(ratio, 0, 0, ratio, 0, 0)
context.fillStyle = '#080808'
context.fillRect(0, 0, rect.width, rect.height)
context.lineCap = 'round'
@@ -1135,10 +1145,29 @@ const syncSignatureCanvas = () => {
context.lineWidth = 2.4
context.strokeStyle = '#ffffff'
if (signatureStrokes.value.length) {
signatureStrokes.value.forEach((stroke) => {
if (!stroke.length) return
context.beginPath()
context.moveTo(stroke[0].x * rect.width, stroke[0].y * rect.height)
stroke.slice(1).forEach((point) => context.lineTo(point.x * rect.width, point.y * rect.height))
context.stroke()
})
form.signature = canvas.toDataURL('image/png')
signatureHasInk.value = true
return
}
if (DATA_IMAGE_PATTERN.test(form.signature)) {
const expectedSignature = form.signature
const savedSignature = new Image()
savedSignature.onload = () => {
if (form.signature !== expectedSignature || signatureStrokes.value.length) return
context.drawImage(savedSignature, 0, 0, rect.width, rect.height)
context.lineCap = 'round'
context.lineJoin = 'round'
context.lineWidth = 2.4
context.strokeStyle = '#ffffff'
}
savedSignature.src = form.signature
}
@@ -1149,6 +1178,8 @@ const getSignaturePoint = (event) => {
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top,
width: rect.width,
height: rect.height,
}
}
@@ -1158,6 +1189,8 @@ const startSignature = (event) => {
signatureCanvas.value.setPointerCapture?.(event.pointerId)
const context = signatureCanvas.value.getContext('2d')
const point = getSignaturePoint(event)
activeSignatureStroke = [{ x: point.x / point.width, y: point.y / point.height }]
signatureStrokes.value.push(activeSignatureStroke)
context.beginPath()
context.moveTo(point.x, point.y)
}
@@ -1166,6 +1199,7 @@ const drawSignature = (event) => {
if (!isSigning || !signatureCanvas.value) return
const context = signatureCanvas.value.getContext('2d')
const point = getSignaturePoint(event)
activeSignatureStroke?.push({ x: point.x / point.width, y: point.y / point.height })
context.lineTo(point.x, point.y)
context.stroke()
signatureHasInk.value = true
@@ -1174,10 +1208,13 @@ const drawSignature = (event) => {
const endSignature = () => {
isSigning = false
activeSignatureStroke = null
}
const clearSignature = () => {
form.signature = ''
signatureStrokes.value = []
activeSignatureStroke = null
signatureHasInk.value = false
syncSignatureCanvas()
}
@@ -2179,7 +2216,9 @@ watch(signupStep, async (step) => {
saveSignupDraft()
if (step !== 4) return
await nextTick()
syncSignatureCanvas()
window.requestAnimationFrame(() => {
window.requestAnimationFrame(syncSignatureCanvas)
})
})
watch(form, () => {

39
src/style.css
View File

@@ -38,7 +38,7 @@ html,
body {
min-height: 100%;
margin: 0;
background: #000;
background: #0a0a0a;
}
body::before {
@@ -2979,41 +2979,62 @@ body.menu-open {
}
.signup-modal.card-modal {
width: min(100%, 27rem);
width: min(100%, 22rem);
}
.signup-modal.card-modal > .flex:first-child {
padding: 1.5rem;
padding: 1rem;
}
.signup-modal.card-modal > .flex:first-child > div {
max-width: 24rem;
max-width: 19rem;
}
.signup-modal.card-modal .modal-body {
padding: 1.5rem;
max-height: min(30rem, calc(100svh - 12rem));
padding: 1rem;
}
.signup-modal.card-modal .card-modal-content,
.signup-modal.card-modal .modal-footer-actions {
width: 100%;
max-width: 24rem;
max-width: 19rem;
margin-inline: auto;
}
.signup-modal.card-modal .card-modal-content {
gap: 1rem;
}
.signup-modal.card-modal .modal-footer {
padding: 1.5rem;
padding: 1rem;
}
.signup-modal.card-modal .l484-card {
width: 100%;
width: 70%;
}
.signup-modal.card-modal .card-number {
font-size: clamp(1.35rem, 7.4cqw, 1.55rem);
font-size: clamp(0.92rem, 7.4cqw, 1.08rem);
letter-spacing: 0.02em;
}
.signup-modal.card-modal .card-note {
padding: 0.68rem 0.75rem;
font-size: 0.76rem;
line-height: 1.45;
}
.signup-modal.card-modal .validation-message {
padding: 0.65rem 0.75rem;
font-size: 0.82rem;
}
.signup-modal.card-modal .member-keys {
gap: 0.65rem;
padding: 0.8rem;
}
.backup-modal {
position: relative;
z-index: 1;