isaaccladandCursor
98d14a213a
Deploy Ladill Queue / deploy (push) Successful in 36s
Remove waiting, estimate, and service queue sidebar; replace text header with customer logo when uploaded. Co-authored-by: Cursor <cursoragent@cursor.com>
117 lines
6.7 KiB
PHP
117 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" class="h-full bg-slate-50">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<meta name="theme-color" content="#f8fafc">
|
|
<title>{{ $screen->name }} · Queue Display</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
<body
|
|
class="qms-display qms-display__grid-bg min-h-full bg-slate-50 text-slate-900"
|
|
x-data="displayBoard(@js([
|
|
'dataUrl' => $dataUrl,
|
|
'playedUrl' => $playedUrl,
|
|
'pollMs' => $pollMs,
|
|
'csrf' => csrf_token(),
|
|
'initial' => $initialPayload,
|
|
]))"
|
|
x-init="init()"
|
|
>
|
|
{{-- Voice unlock — required by browsers before TTS --}}
|
|
<div
|
|
x-cloak
|
|
x-show="!speechReady"
|
|
@click="unlockSpeech()"
|
|
@keydown.enter.prevent="unlockSpeech()"
|
|
tabindex="0"
|
|
class="qms-display__unlock fixed inset-0 z-50 flex cursor-pointer items-center justify-center p-8 text-center outline-none"
|
|
role="button"
|
|
aria-label="Enable voice announcements"
|
|
>
|
|
<div class="max-w-lg rounded-3xl border border-slate-200 bg-white px-10 py-12 shadow-xl">
|
|
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-50 ring-1 ring-indigo-100">
|
|
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
|
|
</svg>
|
|
</div>
|
|
<p class="mt-6 text-2xl font-semibold tracking-tight text-slate-900">Tap to enable announcements</p>
|
|
<p class="mt-3 text-base text-slate-500">Your browser needs one interaction before this screen can call tickets aloud.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
x-show="pollError"
|
|
x-cloak
|
|
class="fixed left-1/2 top-4 z-40 max-w-lg -translate-x-1/2 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800 shadow-lg"
|
|
x-text="pollError"
|
|
></div>
|
|
|
|
<div class="flex min-h-screen flex-col">
|
|
<header class="border-b border-slate-200/80 bg-white/90 backdrop-blur-md">
|
|
<div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-6 px-6 py-6 lg:px-10">
|
|
<div class="flex min-w-0 items-center">
|
|
<img
|
|
src="{{ $logoUrl }}"
|
|
alt="{{ $logoAlt }}"
|
|
class="h-10 w-auto max-w-[min(100%,280px)] object-contain object-left lg:h-12"
|
|
>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-700">
|
|
<span class="qms-display__live-dot h-2 w-2 rounded-full bg-emerald-500"></span>
|
|
Live
|
|
</div>
|
|
<p class="mt-2 font-mono text-3xl font-semibold tabular-nums tracking-tight text-slate-900 lg:text-4xl" x-text="clock">--:--</p>
|
|
<p class="text-sm text-slate-500" x-text="dateLabel"></p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="mx-auto flex w-full max-w-6xl flex-1 flex-col px-6 py-10 lg:px-10 lg:py-14">
|
|
<section class="flex flex-1 flex-col">
|
|
<div class="mb-6 text-center">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600">Now serving</p>
|
|
<p class="mt-2 text-base text-slate-500">Please proceed to your counter when your number appears</p>
|
|
</div>
|
|
|
|
<div class="flex flex-1 flex-col gap-6" x-show="(payload?.now_serving ?? []).length">
|
|
<template x-for="item in (payload?.now_serving ?? [])" :key="item.ticket_number + (item.counter ?? '')">
|
|
<article class="qms-display__ticket flex flex-1 flex-col items-center justify-center rounded-3xl px-8 py-12 text-center lg:py-16">
|
|
<p class="text-sm font-semibold uppercase tracking-[0.25em] text-slate-500">Ticket number</p>
|
|
<p class="qms-display__ticket-number mt-4 text-6xl font-bold sm:text-7xl lg:text-8xl" x-text="item.ticket_number"></p>
|
|
<p class="mt-4 text-xl font-medium text-slate-700" x-text="item.queue_name"></p>
|
|
<div class="mt-10 inline-flex items-center gap-3 rounded-full border border-indigo-100 bg-indigo-50 px-6 py-3">
|
|
<span class="text-sm font-semibold uppercase tracking-widest text-indigo-600">Proceed to</span>
|
|
<span class="text-2xl font-semibold text-indigo-900" x-text="item.counter ?? '—'"></span>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</div>
|
|
|
|
<div
|
|
class="qms-display__ticket flex flex-1 flex-col items-center justify-center rounded-3xl px-8 py-16 text-center"
|
|
x-show="!(payload?.now_serving ?? []).length"
|
|
>
|
|
<div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 ring-1 ring-slate-200">
|
|
<svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
</div>
|
|
<p class="mt-6 text-3xl font-semibold text-slate-900">Please wait</p>
|
|
<p class="mt-3 max-w-md text-lg text-slate-500">Your ticket number will appear here when it is called.</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="border-t border-slate-200 bg-white/80 px-6 py-4 lg:px-10">
|
|
<div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3 text-xs text-slate-400">
|
|
<p>Powered by Ladill Queue</p>
|
|
<p x-show="payload?.updated_at" x-text="payload?.updated_at ? 'Updated ' + new Date(payload.updated_at).toLocaleTimeString() : ''"></p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|