isaacclad/ladill-queue
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add self-service kiosk for queue ticket issuance.
Deploy Ladill Queue / deploy (push) Successful in 36s
Details

Browse Source 
Customers can pick a service, optionally enter details, and receive a ticket on a branded touchscreen flow with admin-configurable queues and auto-reset.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-29 23:25:51 +00:00
co-authored by Cursor
parent d982e28191
commit 492eec9cda
9 changed files with 683 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+104
View File
@@ -427,3 +427,107 @@ html:has(.qms-display) body {
radial-gradient(ellipse 60% 40% at 50% 0%, rgb(199 210 254 / 0.5), transparent),
rgb(255 255 255 / 0.97);
}
/* Self-service kiosk */
html:has(.qms-kiosk),
html:has(.qms-kiosk) body,
html:has(.qms-kiosk) .qms-kiosk {
font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}
html:has(.qms-kiosk),
html:has(.qms-kiosk) body {
height: 100%;
overflow: hidden;
}
.qms-kiosk {
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 50% -20%, rgb(238 242 255 / 0.9), transparent),
linear-gradient(180deg, rgb(248 250 252) 0%, rgb(255 255 255) 100%);
color: rgb(15 23 42);
}
.qms-kiosk__shell {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
}
.qms-kiosk__main {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
}
.qms-kiosk__queue-grid {
display: grid;
width: 100%;
gap: 0.75rem;
}
.qms-kiosk__queue-btn {
display: flex;
width: 100%;
align-items: center;
gap: 1rem;
border-radius: 1rem;
border: 1px solid rgb(226 232 240);
background: #fff;
padding: 1rem 1.25rem;
text-align: left;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qms-kiosk__queue-btn:hover {
border-color: rgb(165 180 252);
box-shadow: 0 8px 24px -12px rgb(79 70 229 / 0.25);
}
.qms-kiosk__queue-btn:disabled {
opacity: 0.6;
pointer-events: none;
}
.qms-kiosk__queue-mark {
display: flex;
height: 2.75rem;
width: 2.75rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 700;
color: #fff;
}
.qms-kiosk__ticket-card {
width: 100%;
border-radius: 1.5rem;
border: 1px solid rgb(226 232 240);
background: #fff;
padding: clamp(1.5rem, 5vh, 3rem);
text-align: center;
box-shadow:
0 1px 2px rgb(15 23 42 / 0.04),
0 24px 48px -20px rgb(79 70 229 / 0.18);
}
.qms-kiosk__ticket-number {
font-size: clamp(3.5rem, 16vh, 7rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: rgb(67 56 202);
}