Clinic — Waiting Room Queue Board

: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>