Pages Medium
Clinic — Waiting Room Queue Board
A big-screen waiting room queue board split into Waiting, In room and Ready for provider columns. Patient tickets carry a token number, initials avatar, masked name, an assigned room badge and a live wait timer that ticks every second. A prominent Now serving banner highlights the current patient, per-column counts stay in sync, a demo loop auto-advances patients between columns, and a Call next button manually pulls the front of the Waiting line.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--teal: #129c93;
--teal-d: #0c7a73;
--teal-700: #0a655f;
--teal-50: #e7f5f3;
--coral: #ff7a66;
--coral-soft: #ffe6df;
--ink: #16322f;
--ink-2: #3a534f;
--muted: #6b827e;
--bg: #f1f7f6;
--white: #ffffff;
--line: rgba(16, 50, 47, 0.1);
--line-2: rgba(16, 50, 47, 0.18);
--ok: #2f9e6f;
--warn: #d98a2b;
--danger: #d4503e;
--font: "Inter", system-ui, -apple-system, sans-serif;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--shadow-1: 0 1px 2px rgba(16, 50, 47, 0.05), 0 4px 14px rgba(16, 50, 47, 0.06);
--shadow-2: 0 16px 40px rgba(12, 122, 115, 0.16);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
background:
radial-gradient(1100px 480px at 100% -10%, rgba(18, 156, 147, 0.08), transparent 60%),
var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
min-height: 100vh;
}
/* ── Layout ── */
.board {
max-width: 1180px;
margin: 0 auto;
padding: 28px 24px 40px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* ── Header ── */
.board-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
}
.brand-mark {
width: 48px;
height: 48px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 1.4rem;
font-weight: 800;
color: #fff;
background: linear-gradient(150deg, var(--teal), var(--teal-700));
box-shadow: var(--shadow-1);
}
.brand-text h1 {
font-size: 1.42rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
}
.brand-text p {
font-size: 0.86rem;
color: var(--muted);
font-weight: 500;
margin-top: 2px;
}
.head-right {
display: flex;
align-items: center;
gap: 16px;
}
.clock {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.btn-next {
border: none;
border-radius: 12px;
padding: 13px 22px;
font: inherit;
font-weight: 700;
font-size: 0.96rem;
color: #fff;
background: linear-gradient(150deg, var(--teal), var(--teal-d));
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 20px rgba(12, 122, 115, 0.28);
transition: transform 0.12s, box-shadow 0.18s, filter 0.15s;
}
.btn-next:hover {
filter: brightness(1.05);
box-shadow: 0 10px 26px rgba(12, 122, 115, 0.34);
}
.btn-next:active {
transform: translateY(1px);
}
.btn-next:focus-visible {
outline: 3px solid rgba(18, 156, 147, 0.45);
outline-offset: 2px;
}
.btn-next:disabled {
filter: grayscale(0.4);
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.btn-next .dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
animation: ping 1.8s ease-out infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
/* ── Now serving banner ── */
.serving {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
background: linear-gradient(135deg, var(--teal-700), var(--teal-d) 55%, #0f8a82);
color: #fff;
padding: 22px 28px;
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
box-shadow: var(--shadow-2);
}
.serving::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(420px 200px at 90% 120%, rgba(255, 255, 255, 0.16), transparent 70%);
pointer-events: none;
}
.serving-label {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.82);
}
.serving-body {
display: flex;
align-items: baseline;
gap: 16px;
flex: 1;
min-width: 200px;
}
.serving-token {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.serving-name {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.serving-room {
font-size: 0.92rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.16);
padding: 8px 14px;
border-radius: 999px;
white-space: nowrap;
}
.serving.flash {
animation: serveflash 0.7s ease;
}
@keyframes serveflash {
0% { transform: scale(1); }
35% { transform: scale(1.012); box-shadow: 0 22px 50px rgba(12, 122, 115, 0.4); }
100% { transform: scale(1); }
}
/* ── Columns ── */
.columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
}
.col {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px;
box-shadow: var(--shadow-1);
display: flex;
flex-direction: column;
gap: 12px;
min-height: 220px;
}
.col-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.col-head h2 {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
flex: 1;
}
.col-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.col-dot.waiting { background: var(--warn); }
.col-dot.inroom { background: var(--teal); }
.col-dot.ready { background: var(--coral); }
.col-count {
display: inline-grid;
place-items: center;
min-width: 26px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
background: var(--teal-50);
color: var(--teal-d);
font-size: 0.82rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.tickets {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.col-empty {
color: var(--muted);
font-size: 0.88rem;
font-style: italic;
text-align: center;
padding: 22px 0;
}
/* ── Ticket card ── */
.ticket {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: #fbfefd;
transition: transform 0.16s ease, border-color 0.15s, box-shadow 0.18s, opacity 0.3s;
}
.ticket.is-front {
border-color: var(--teal);
background: var(--teal-50);
box-shadow: 0 0 0 1px rgba(18, 156, 147, 0.25);
}
.ticket.entering {
animation: enter 0.42s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes enter {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.ticket.leaving {
opacity: 0;
transform: translateX(10px) scale(0.96);
}
.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.92rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.t-main {
min-width: 0;
}
.t-token {
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--teal-d);
text-transform: uppercase;
}
.t-name {
font-size: 0.98rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-sub {
display: flex;
align-items: center;
gap: 8px;
margin-top: 3px;
}
.room-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: var(--coral-soft);
color: #c4503a;
white-space: nowrap;
}
.room-badge.assigned {
background: var(--teal-50);
color: var(--teal-d);
}
.t-prov {
font-size: 0.74rem;
color: var(--muted);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.t-wait {
text-align: right;
flex-shrink: 0;
}
.wait-time {
font-size: 0.98rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--ink-2);
letter-spacing: -0.01em;
}
.wait-time.over {
color: var(--danger);
}
.wait-label {
font-size: 0.64rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
/* ── Footer ── */
.board-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-top: 4px;
font-size: 0.82rem;
color: var(--muted);
}
.live {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--ink-2);
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 0 rgba(47, 158, 111, 0.6);
animation: ping 2s ease-out infinite;
}
/* ── Toast ── */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
background: var(--ink);
color: #fff;
padding: 13px 20px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow-2);
z-index: 50;
max-width: 90vw;
}
@media (max-width: 880px) {
.columns {
grid-template-columns: 1fr;
}
.col {
min-height: 0;
}
}
@media (max-width: 520px) {
.board {
padding: 20px 14px 32px;
}
.board-head {
gap: 14px;
}
.head-right {
width: 100%;
justify-content: space-between;
}
.serving {
padding: 18px 18px;
gap: 12px;
}
.serving-token {
font-size: 2.1rem;
}
.serving-name {
font-size: 1.25rem;
}
.serving-room {
white-space: normal;
}
.btn-next {
flex: 1;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.btn-next .dot,
.live-dot,
.ticket.entering,
.serving.flash {
animation: none;
}
}// ── Toast ──────────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2600);
}
// ── Live clock ───────────────────────────────────────────────────────────────
const clockEl = document.getElementById("clock");
function tickClock() {
const now = new Date();
clockEl.textContent = now.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
});
}
// ── Avatar palette (deterministic per initials) ──────────────────────────────
const AVATAR_COLORS = [
"#129c93", "#0c7a73", "#ff7a66", "#d98a2b",
"#2f9e6f", "#5a7fd6", "#9b6bc4", "#c4503a",
];
function colorFor(seed) {
let h = 0;
for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
return AVATAR_COLORS[h % AVATAR_COLORS.length];
}
function initials(name) {
return name
.split(" ")
.filter(Boolean)
.map((w) => w[0])
.join("")
.slice(0, 2)
.toUpperCase();
}
// ── Data model ───────────────────────────────────────────────────────────────
// `since` is the timestamp the patient entered the queue, used to tick wait time.
let nextSeq = 9;
const now = Date.now();
const queue = {
waiting: [
{ id: 1, token: "B-07", name: "Aaliyah R.", since: now - 14 * 60000, room: null, prov: null, overAt: 20 },
{ id: 2, token: "B-08", name: "Daniel O.", since: now - 9 * 60000, room: null, prov: null, overAt: 20 },
{ id: 3, token: "B-09", name: "Priya N.", since: now - 5 * 60000, room: null, prov: null, overAt: 20 },
{ id: 4, token: "B-10", name: "Marcus T.", since: now - 110000, room: null, prov: null, overAt: 20 },
],
inroom: [
{ id: 5, token: "B-05", name: "Sofia L.", since: now - 4 * 60000, room: "Room 2", prov: "Dr. Ravi Patel", overAt: 25 },
{ id: 6, token: "B-06", name: "Henry W.", since: now - 2 * 60000, room: "Room 5", prov: "Dr. Maya Bloom", overAt: 25 },
],
ready: [
{ id: 7, token: "B-03", name: "Grace K.", since: now - 7 * 60000, room: "Room 1", prov: "Dr. Lena Okafor", overAt: 12 },
{ id: 8, token: "B-04", name: "Maria G.", since: now - 3 * 60000, room: "Room 3", prov: "Dr. Lena Okafor", overAt: 12 },
],
};
const ROOMS = ["Room 1", "Room 2", "Room 3", "Room 4", "Room 5"];
const PROVIDERS = ["Dr. Lena Okafor", "Dr. Ravi Patel", "Dr. Maya Bloom"];
// ── Wait-time formatting ─────────────────────────────────────────────────────
function fmtWait(since) {
const sec = Math.max(0, Math.floor((Date.now() - since) / 1000));
const m = String(Math.floor(sec / 60)).padStart(2, "0");
const s = String(sec % 60).padStart(2, "0");
return `${m}:${s}`;
}
// ── Rendering ────────────────────────────────────────────────────────────────
function ticketHTML(p, isFront) {
const ini = initials(p.name);
const minsOver = (Date.now() - p.since) / 60000 >= p.overAt;
const room = p.room
? `<span class="room-badge assigned">${p.room}</span>`
: `<span class="room-badge">Unassigned</span>`;
const prov = p.prov ? `<span class="t-prov">${p.prov}</span>` : "";
return `
<li class="ticket${isFront ? " is-front" : ""} entering" role="listitem" data-id="${p.id}">
<span class="avatar" style="background:${colorFor(ini)}" aria-hidden="true">${ini}</span>
<div class="t-main">
<div class="t-token">${p.token}</div>
<div class="t-name">${p.name}</div>
<div class="t-sub">${room}${prov}</div>
</div>
<div class="t-wait">
<div class="wait-time${minsOver ? " over" : ""}" data-since="${p.since}">${fmtWait(p.since)}</div>
<div class="wait-label">waiting</div>
</div>
</li>`;
}
function render(col) {
const list = document.getElementById(`list-${col}`);
const empty = document.getElementById(`empty-${col}`);
const items = queue[col];
list.innerHTML = items
.map((p, i) => ticketHTML(p, col === "waiting" && i === 0))
.join("");
empty.hidden = items.length > 0;
document.getElementById(`count-${col}`).textContent = items.length;
}
function renderAll() {
render("waiting");
render("inroom");
render("ready");
}
// ── Now serving banner ───────────────────────────────────────────────────────
function setServing(p) {
document.getElementById("servingToken").textContent = p.token;
document.getElementById("servingName").textContent = p.name;
document.getElementById("servingRoom").textContent =
`${p.room || "Awaiting room"} · ${p.prov || "Provider pending"}`;
const banner = document.getElementById("serving");
banner.classList.remove("flash");
void banner.offsetWidth; // reflow to restart animation
banner.classList.add("flash");
}
// ── Advance logic ────────────────────────────────────────────────────────────
// waiting → inroom (assign room/provider) → ready → served (off the board)
function advanceFromWaiting(manual) {
if (!queue.waiting.length) {
if (manual) showToast("No patients are waiting right now.");
return;
}
const p = queue.waiting.shift();
const occupied = new Set(queue.inroom.map((x) => x.room));
p.room = ROOMS.find((r) => !occupied.has(r)) || ROOMS[0];
p.prov = PROVIDERS[(p.id + nextSeq) % PROVIDERS.length];
p.since = Date.now();
queue.inroom.push(p);
render("waiting");
render("inroom");
showToast(`${p.token} ${p.name} → ${p.room} with ${p.prov}.`);
}
function advanceFromInroom() {
if (!queue.inroom.length) return;
const p = queue.inroom.shift();
p.since = Date.now();
queue.ready.push(p);
render("inroom");
render("ready");
}
function serveFromReady() {
if (!queue.ready.length) return;
const p = queue.ready.shift();
render("ready");
setServing(p);
}
// ── "Call next" button ───────────────────────────────────────────────────────
const callNextBtn = document.getElementById("callNext");
callNextBtn.addEventListener("click", () => advanceFromWaiting(true));
function refreshCallNext() {
callNextBtn.disabled = queue.waiting.length === 0;
}
// ── Demo auto-advance loop ───────────────────────────────────────────────────
// Cycles a patient one column forward roughly every 4 seconds, and recycles
// served patients back into Waiting so the board never empties out.
let phase = 0;
function demoStep() {
const moves = [serveFromReady, advanceFromInroom, () => advanceFromWaiting(false), recyclePatient];
moves[phase % moves.length]();
phase++;
renderCounts();
refreshCallNext();
}
function recyclePatient() {
nextSeq++;
const names = ["Olivia P.", "Noah F.", "Emma S.", "Liam D.", "Ava C.", "Ethan B.", "Mia H.", "Lucas V."];
const nm = names[nextSeq % names.length];
queue.waiting.push({
id: 100 + nextSeq,
token: `B-${String(10 + nextSeq).padStart(2, "0")}`,
name: nm,
since: Date.now(),
room: null,
prov: null,
overAt: 20,
});
render("waiting");
}
function renderCounts() {
document.getElementById("count-waiting").textContent = queue.waiting.length;
document.getElementById("count-inroom").textContent = queue.inroom.length;
document.getElementById("count-ready").textContent = queue.ready.length;
}
// ── Per-second wait tick (cheap: updates text nodes in place) ─────────────────
function tickWaits() {
document.querySelectorAll(".wait-time").forEach((el) => {
const since = Number(el.dataset.since);
el.textContent = fmtWait(since);
// mark long waits in the danger colour at 20 min for waiting tickets
const li = el.closest(".ticket");
const inWaiting = li && li.closest("#list-waiting");
if (inWaiting && (Date.now() - since) / 60000 >= 20) el.classList.add("over");
});
}
// ── Boot ─────────────────────────────────────────────────────────────────────
tickClock();
renderAll();
refreshCallNext();
setInterval(tickClock, 1000 * 15);
setInterval(tickWaits, 1000);
setInterval(demoStep, 4000);<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Waiting Room Queue Board · Northpoint Clinic</title>
</head>
<body>
<main class="board" aria-label="Waiting room queue board">
<header class="board-head">
<div class="brand">
<div class="brand-mark" aria-hidden="true">N</div>
<div class="brand-text">
<h1>Northpoint Clinic</h1>
<p>Family Medicine · Waiting Room</p>
</div>
</div>
<div class="head-right">
<div class="clock" id="clock" aria-live="off">--:--</div>
<button class="btn-next" id="callNext" type="button">
<span class="dot" aria-hidden="true"></span>
Call next
</button>
</div>
</header>
<section class="serving" id="serving" aria-live="polite">
<span class="serving-label">Now serving</span>
<div class="serving-body">
<span class="serving-token" id="servingToken">B-04</span>
<span class="serving-name" id="servingName">Maria G.</span>
</div>
<span class="serving-room" id="servingRoom">Room 3 · Dr. Lena Okafor</span>
</section>
<div class="columns">
<!-- Waiting -->
<section class="col" data-col="waiting" aria-label="Waiting">
<header class="col-head">
<span class="col-dot waiting" aria-hidden="true"></span>
<h2>Waiting</h2>
<span class="col-count" id="count-waiting">0</span>
</header>
<ul class="tickets" id="list-waiting" role="list"></ul>
<p class="col-empty" id="empty-waiting" hidden>No one waiting</p>
</section>
<!-- In room -->
<section class="col" data-col="inroom" aria-label="In room">
<header class="col-head">
<span class="col-dot inroom" aria-hidden="true"></span>
<h2>In room</h2>
<span class="col-count" id="count-inroom">0</span>
</header>
<ul class="tickets" id="list-inroom" role="list"></ul>
<p class="col-empty" id="empty-inroom" hidden>No rooms occupied</p>
</section>
<!-- Ready for provider -->
<section class="col" data-col="ready" aria-label="Ready for provider">
<header class="col-head">
<span class="col-dot ready" aria-hidden="true"></span>
<h2>Ready for provider</h2>
<span class="col-count" id="count-ready">0</span>
</header>
<ul class="tickets" id="list-ready" role="list"></ul>
<p class="col-empty" id="empty-ready" hidden>No one ready</p>
</section>
</div>
<footer class="board-foot">
<span class="live"><span class="live-dot" aria-hidden="true"></span> Live board</span>
<span class="foot-note">Wait times update every second · queue auto-advances for demo</span>
</footer>
</main>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Waiting Room Queue Board
A calm, glanceable display for a busy waiting room. Three columns — Waiting, In room and
Ready for provider — hold patient tickets that lead with a token like B-08, an initials
avatar, a masked name such as Maria G., a room badge once assigned, and a wait timer that ticks
up in mm:ss every second. A bold Now serving banner anchors the top so anyone across the
room can see who is being called, and each column keeps a live count in its header.
The board is built to feel alive. A demo loop quietly advances one patient forward every few seconds — out to the provider, into a room, or up from the line — recycling new arrivals into Waiting so the queue never runs dry. Long waits in the Waiting column shift to a danger colour once they pass the twenty-minute mark, and the serving banner gives a soft flash each time a new patient is called.
Staff can also take control: Call next pulls the patient at the front of Waiting, assigns the next open room and a provider, and confirms the move with a toast. Everything runs on vanilla JavaScript with no dependencies, masked names throughout, and an accessible, keyboard-friendly, WCAG-AA layout that reflows cleanly down to a phone-sized screen.
Illustrative UI only — not intended for real medical use.