UI 元件簡單

Hotel Amenity Booking

A widget to book a hotel amenity — Spa treatment, Gym slot, or Restaurant table — with a segmented control that restyles the options, a date picker, available time-slot grid, party-size stepper, and a confirmation state with booking reference and toast.

在 Lab 開啟

html css vanilla-js

目標: JS HTML

程式碼

/* ── Design tokens ── */
:root {
  --navy: #1a2b4a;
  --navy-d: #0f1d36;
  --navy-2: #2d4570;
  --cream: #f7f3eb;
  --cream-2: #ece5d4;
  --bone: #fbf8f2;
  --gold: #c9a649;
  --gold-light: #e0c378;
  --gold-d: #a88a2e;
  --ink: #161e2c;
  --ink-2: #2e3a52;
  --warm-gray: #6c7280;
  --line: rgba(22, 30, 44, 0.1);
  --line-strong: rgba(22, 30, 44, 0.18);
  --success: #4a7752;
  --danger: #b34232;
  --warning: #d99020;
  --info: #4a6da0;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(22, 30, 44, 0.06), 0 2px 8px rgba(22, 30, 44, 0.06);
  --shadow-2: 0 12px 36px rgba(15, 29, 54, 0.16);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(circle at 22% 18%, rgba(201, 166, 73, 0.2), transparent 55%),
    linear-gradient(160deg, #14213b 0%, #0f1d36 100%);
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px;
}

/* ── Widget shell ── */
.bg {
  width: 100%;
  display: grid;
  place-items: center;
}
.sheet {
  width: min(520px, 100%);
  background: var(--bone);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(15, 29, 54, 0.55);
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.sheet-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-d);
  font-weight: 700;
}
.sheet-head h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--navy-d);
  margin-top: 2px;
}
.badge {
  background: rgba(201, 166, 73, 0.14);
  color: var(--gold-d);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ── Segmented control ── */
.seg-wrap {
  padding: 14px 26px 0;
}
.seg {
  display: flex;
  background: var(--cream-2);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
}
.seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--warm-gray);
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.seg-btn:hover {
  color: var(--ink);
}
.seg-btn.is-active {
  background: var(--bone);
  color: var(--navy-d);
  box-shadow: var(--shadow-1);
}

/* ── Body ── */
.sheet-body {
  padding: 16px 26px;
  overflow-y: auto;
}
.block {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.block:last-child {
  border-bottom: none;
}
.block h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-d);
  font-weight: 700;
  margin-bottom: 10px;
}
.sub-note {
  font-size: 0.78rem;
  color: var(--warm-gray);
  margin-top: 2px;
}

/* ── Option grid ── */
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.opt-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 13px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.opt-card:hover {
  border-color: var(--gold);
}
.opt-card.is-active {
  background: var(--bone);
  border-color: var(--gold);
  outline: 1.5px solid var(--gold);
}
.opt-card .opt-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-d);
}
.opt-card .opt-dur {
  font-size: 0.74rem;
  color: var(--warm-gray);
}
.opt-card .opt-price {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-d);
  margin-top: 4px;
}

/* ── Date pills ── */
.date-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.dpill {
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.dpill .dday {
  font-size: 0.7rem;
  color: var(--warm-gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.dpill:hover {
  border-color: var(--gold);
}
.dpill.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--bone);
}
.dpill.is-active .dday {
  color: rgba(251, 248, 242, 0.7);
}

/* ── Slot grid ── */
.slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.slot-pill {
  background: var(--bone);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy-d);
  padding: 7px 14px;
  cursor: pointer;
}
.slot-pill:hover:not(.is-booked) {
  border-color: var(--gold);
}
.slot-pill.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-d);
}
.slot-pill.is-booked {
  color: var(--warm-gray);
  background: transparent;
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Party stepper ── */
.party-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.stepper {
  display: inline-flex;
  align-items: stretch;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 4px;
}
.stepper button {
  width: 34px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--navy-d);
}
.stepper button:hover {
  background: var(--cream-2);
}
.step-val {
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}
.step-val strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-d);
  line-height: 1;
}
.step-val span {
  font-size: 0.72rem;
  color: var(--warm-gray);
  font-weight: 600;
}

/* ── Footer ── */
.sheet-foot {
  padding: 14px 26px 22px;
  background: var(--cream);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.quote {
  display: flex;
  flex-direction: column;
}
.q-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warm-gray);
  font-weight: 700;
}
.q-val {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold-d);
  line-height: 1.1;
}
.q-meta {
  font-size: 0.74rem;
  color: var(--warm-gray);
  margin-top: 2px;
}

/* ── Buttons ── */
.primary {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 11px 20px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--navy);
  color: var(--bone);
  border: none;
}
.primary:hover {
  background: var(--navy-d);
}
.primary:disabled {
  background: var(--cream-2);
  color: var(--warm-gray);
  cursor: not-allowed;
}

/* ── Confirmation panel ── */
.confirm-panel {
  padding: 40px 26px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.confirm-icon {
  font-size: 2.4rem;
  color: var(--gold);
}
.confirm-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy-d);
}
.confirm-ref {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-d);
  background: rgba(201, 166, 73, 0.1);
  padding: 7px 16px;
  border-radius: var(--r-md);
  letter-spacing: 0.08em;
}
.confirm-detail {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-d);
  color: var(--bone);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(22, 30, 44, 0.18);
  z-index: 100;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  body {
    padding: 16px;
  }
  .option-grid {
    grid-template-columns: 1fr;
  }
  .sheet-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .sheet-foot .primary {
    text-align: center;
  }
}

/* ── Honor [hidden] over display (overlay/panel toggle fix) ── */
.confirm-panel[hidden] {
  display: none;
}

// ── Config ──────────────────────────────────────────────────────────────────

const AMENITIES = {
  spa: {
    label: "Spa",
    optionLabel: "Treatment",
    maxParty: 2,
    options: [
      { id: "s1", name: "Aromatherapy Massage", dur: "60 min", price: 95 },
      { id: "s2", name: "Deep Tissue Massage", dur: "90 min", price: 130 },
      { id: "s3", name: "Facial — Hydra Glow", dur: "50 min", price: 80 },
      { id: "s4", name: "Couples Ritual", dur: "120 min", price: 210 },
    ],
    slots: {
      "9 Jun": ["09:00", "10:00", "11:30", "14:00", "15:30", "17:00"],
      "10 Jun": ["09:00", "10:30", "12:00", "14:30", "16:00"],
      "11 Jun": ["09:00", "11:00", "14:00", "15:30", "17:30"],
      "12 Jun": ["10:00", "11:30", "13:00", "15:00", "16:30"],
    },
    booked: {
      "9 Jun": ["11:30", "15:30"],
      "10 Jun": ["09:00", "16:00"],
      "11 Jun": ["11:00", "17:30"],
      "12 Jun": ["13:00"],
    },
  },
  gym: {
    label: "Gym",
    optionLabel: "Session type",
    maxParty: 3,
    options: [
      { id: "g1", name: "Open Gym Access", dur: "90 min", price: 15 },
      { id: "g2", name: "Personal Training", dur: "60 min", price: 75 },
      { id: "g3", name: "Yoga Flow", dur: "60 min", price: 20 },
      { id: "g4", name: "Pilates Reformer", dur: "55 min", price: 35 },
    ],
    slots: {
      "9 Jun": ["07:00", "08:00", "09:30", "11:00", "16:00", "18:00"],
      "10 Jun": ["07:00", "08:30", "10:00", "12:00", "17:00", "19:00"],
      "11 Jun": ["07:00", "09:00", "11:00", "14:00", "16:30", "18:30"],
      "12 Jun": ["07:00", "08:00", "10:30", "13:00", "15:00", "17:30"],
    },
    booked: {
      "9 Jun": ["08:00", "16:00"],
      "10 Jun": ["07:00", "12:00"],
      "11 Jun": ["09:00", "18:30"],
      "12 Jun": ["10:30", "17:30"],
    },
  },
  restaurant: {
    label: "Restaurant",
    optionLabel: "Dining experience",
    maxParty: 8,
    options: [
      { id: "r1", name: "Breakfast Terrace", dur: "Open 07–10h", price: 0 },
      { id: "r2", name: "À la carte Lunch", dur: "12–14h", price: 0 },
      { id: "r3", name: "Tasting Menu Dinner", dur: "6-course", price: 95 },
      { id: "r4", name: "Chef's Table", dur: "8-course", price: 165 },
    ],
    slots: {
      "9 Jun": [
        "07:00",
        "07:30",
        "08:00",
        "12:00",
        "12:30",
        "13:00",
        "19:00",
        "19:30",
        "20:00",
        "21:00",
      ],
      "10 Jun": ["07:00", "08:00", "12:00", "12:30", "19:00", "19:30", "20:00", "20:30"],
      "11 Jun": ["07:00", "07:30", "08:30", "12:00", "13:00", "19:00", "20:00", "21:00"],
      "12 Jun": ["07:00", "08:00", "12:00", "12:30", "19:30", "20:00", "21:00"],
    },
    booked: {
      "9 Jun": ["07:30", "12:30", "19:30"],
      "10 Jun": ["12:00", "19:00", "20:30"],
      "11 Jun": ["08:30", "13:00", "21:00"],
      "12 Jun": ["12:00", "19:30"],
    },
  },
};

const DATES = ["9 Jun", "10 Jun", "11 Jun", "12 Jun"];
const DATE_LABELS = { "9 Jun": "Tue", "10 Jun": "Wed", "11 Jun": "Thu", "12 Jun": "Fri" };

// ── State ────────────────────────────────────────────────────────────────────
let amenity = "spa";
let optionId = null;
let date = DATES[0];
let slot = null;
let party = 1;

// ── Helpers ──────────────────────────────────────────────────────────────────
const $ = (id) => document.getElementById(id);
const fmt = (n) =>
  n > 0
    ? `€${n.toLocaleString("en-GB", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
    : "Complimentary";

const toast = $("toast");
function showToast(msg) {
  toast.textContent = msg;
  toast.hidden = false;
  clearTimeout(showToast._t);
  showToast._t = setTimeout(() => (toast.hidden = true), 2200);
}

function genRef() {
  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
  return (
    "AU-" +
    Array.from({ length: 7 }, () => chars[Math.floor(Math.random() * chars.length)]).join("")
  );
}

// ── Render helpers ───────────────────────────────────────────────────────────

function renderOptions() {
  const cfg = AMENITIES[amenity];
  $("optionLabel").textContent = cfg.optionLabel;
  $("optionGrid").innerHTML = cfg.options
    .map(
      (o) => `
      <button class="opt-card ${optionId === o.id ? "is-active" : ""}" data-id="${o.id}" data-price="${o.price}" type="button">
        <span class="opt-name">${o.name}</span>
        <span class="opt-dur">${o.dur}</span>
        <span class="opt-price">${fmt(o.price)}</span>
      </button>`
    )
    .join("");
}

function renderDates() {
  $("datePills").innerHTML = DATES.map(
    (d) => `
      <button class="dpill ${d === date ? "is-active" : ""}" data-date="${d}" type="button">
        <span class="dday">${DATE_LABELS[d]}</span>
        ${d}
      </button>`
  ).join("");
}

function renderSlots() {
  const cfg = AMENITIES[amenity];
  const all = cfg.slots[date] || [];
  const booked = cfg.booked[date] || [];
  $("slotGrid").innerHTML = all
    .map((t) => {
      const isBooked = booked.includes(t);
      const isActive = slot === t && !isBooked;
      return `<button type="button" class="slot-pill ${isBooked ? "is-booked" : ""} ${isActive ? "is-active" : ""}" data-slot="${t}" ${isBooked ? "disabled aria-disabled='true'" : ""}>${t}</button>`;
    })
    .join("");
}

function renderParty() {
  const cfg = AMENITIES[amenity];
  $("partyN").textContent = party;
  $("partyS").textContent = party > 1 ? "s" : "";
  $("partyNote").textContent = `Up to ${cfg.maxParty} per booking`;
}

function renderQuote() {
  const opt = optionId && AMENITIES[amenity].options.find((o) => o.id === optionId);
  if (!opt || !slot) {
    $("totalQ").textContent = "—";
    $("quoteMeta").textContent = "Select an option & slot";
    $("confirmBtn").disabled = true;
    return;
  }
  const perPerson = opt.price > 0 ? opt.price * party : 0;
  $("totalQ").textContent = fmt(perPerson);
  const label =
    opt.price > 0
      ? `${party} guest${party > 1 ? "s" : ""} · €${opt.price}/person`
      : "No charge — complimentary";
  $("quoteMeta").textContent = `${opt.name} · ${date} ${slot} · ${label}`;
  $("confirmBtn").disabled = false;
}

function renderBadge() {
  $("headBadge").textContent = AMENITIES[amenity].label;
}

function renderAll() {
  renderBadge();
  renderOptions();
  renderDates();
  renderSlots();
  renderParty();
  renderQuote();
}

// ── Segmented control ─────────────────────────────────────────────────────────
$("seg").addEventListener("click", (e) => {
  const btn = e.target.closest(".seg-btn");
  if (!btn) return;
  amenity = btn.dataset.amenity;
  optionId = null;
  slot = null;
  party = 1;
  document.querySelectorAll(".seg-btn").forEach((b) => b.classList.remove("is-active"));
  btn.classList.add("is-active");
  renderAll();
});

// ── Option cards ──────────────────────────────────────────────────────────────
$("optionGrid").addEventListener("click", (e) => {
  const card = e.target.closest(".opt-card");
  if (!card) return;
  optionId = card.dataset.id;
  renderOptions();
  renderQuote();
});

// ── Date pills ────────────────────────────────────────────────────────────────
$("datePills").addEventListener("click", (e) => {
  const pill = e.target.closest(".dpill");
  if (!pill) return;
  date = pill.dataset.date;
  slot = null; // reset slot on date change
  renderDates();
  renderSlots();
  renderQuote();
});

// ── Time slots ────────────────────────────────────────────────────────────────
$("slotGrid").addEventListener("click", (e) => {
  const pill = e.target.closest(".slot-pill");
  if (!pill || pill.classList.contains("is-booked")) return;
  slot = pill.dataset.slot;
  renderSlots();
  renderQuote();
});

// ── Stepper ───────────────────────────────────────────────────────────────────
document.querySelectorAll(".stepper button").forEach((b) =>
  b.addEventListener("click", () => {
    const delta = parseInt(b.dataset.step, 10);
    party = Math.max(1, Math.min(AMENITIES[amenity].maxParty, party + delta));
    renderParty();
    renderQuote();
  })
);

// ── Confirm booking ───────────────────────────────────────────────────────────
$("confirmBtn").addEventListener("click", () => {
  const opt = AMENITIES[amenity].options.find((o) => o.id === optionId);
  if (!opt || !slot) return;

  const ref = genRef();
  const perPerson = opt.price > 0 ? opt.price * party : 0;

  $("confirmRef").textContent = `Booking ref: ${ref}`;
  $("confirmDetail").innerHTML =
    `${opt.name} on <strong>${date}</strong> at <strong>${slot}</strong><br>` +
    `${party} guest${party > 1 ? "s" : ""} · ${fmt(perPerson)}`;

  $("formWrap").hidden = true;
  $("confirmPanel").hidden = false;
  showToast(`Confirmed · ${ref}`);
});

// ── Book another ──────────────────────────────────────────────────────────────
$("bookAnother").addEventListener("click", () => {
  amenity = "spa";
  optionId = null;
  date = DATES[0];
  slot = null;
  party = 1;
  document
    .querySelectorAll(".seg-btn")
    .forEach((b) => b.classList.toggle("is-active", b.dataset.amenity === "spa"));
  $("confirmPanel").hidden = true;
  $("formWrap").hidden = false;
  renderAll();
});

// ── Init ──────────────────────────────────────────────────────────────────────
renderAll();

<!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=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Amenity Booking · Aurelia Hotels</title>
  </head>
  <body>
    <div class="bg">
      <section class="sheet" id="sheet" aria-labelledby="shTitle">

        <!-- ── Header ── -->
        <header class="sheet-head">
          <div>
            <p class="kicker">Guest services</p>
            <h2 id="shTitle">Book an amenity</h2>
          </div>
          <span class="badge" id="headBadge">Spa</span>
        </header>

        <!-- ── Confirmation (hidden by default) ── -->
        <div class="confirm-panel" id="confirmPanel" hidden>
          <div class="confirm-icon">✦</div>
          <h3 class="confirm-title">Booking confirmed</h3>
          <p class="confirm-ref" id="confirmRef"></p>
          <p class="confirm-detail" id="confirmDetail"></p>
          <button class="primary" id="bookAnother">Book another amenity</button>
        </div>

        <!-- ── Booking form ── -->
        <div id="formWrap">
          <!-- Segmented control -->
          <div class="seg-wrap">
            <div class="seg" role="group" aria-label="Amenity type" id="seg">
              <button class="seg-btn is-active" data-amenity="spa">Spa</button>
              <button class="seg-btn" data-amenity="gym">Gym</button>
              <button class="seg-btn" data-amenity="restaurant">Restaurant</button>
            </div>
          </div>

          <div class="sheet-body">

            <!-- Treatment / option selector -->
            <section class="block">
              <h3 id="optionLabel">Treatment</h3>
              <div class="option-grid" id="optionGrid"></div>
            </section>

            <!-- Date -->
            <section class="block">
              <h3>Date</h3>
              <div class="date-pills" id="datePills"></div>
            </section>

            <!-- Time slots -->
            <section class="block">
              <h3>Available slots</h3>
              <div class="slot-grid" id="slotGrid"></div>
            </section>

            <!-- Party size -->
            <section class="block party-row">
              <div>
                <h3>Guests</h3>
                <p class="sub-note" id="partyNote">Up to 2 per booking</p>
              </div>
              <div class="stepper" role="group" aria-label="Party size">
                <button data-step="-1" type="button" aria-label="Fewer guests">−</button>
                <div class="step-val">
                  <strong id="partyN">1</strong>
                  <span>guest<span id="partyS"></span></span>
                </div>
                <button data-step="1" type="button" aria-label="More guests">+</button>
              </div>
            </section>

          </div><!-- /sheet-body -->

          <!-- Footer -->
          <footer class="sheet-foot">
            <div class="quote">
              <span class="q-label">Total</span>
              <strong class="q-val" id="totalQ">—</strong>
              <span class="q-meta" id="quoteMeta">Select an option &amp; slot</span>
            </div>
            <button class="primary" id="confirmBtn" disabled>Confirm booking</button>
          </footer>
        </div><!-- /formWrap -->

      </section>
    </div>

    <div class="toast" id="toast" hidden role="status" aria-live="polite"></div>

    <script src="script.js"></script>
  </body>
</html>

Hotel Amenity Booking

A single-screen widget for guests to reserve a hotel amenity. A segmented control at the top switches between Spa, Gym and Restaurant — each swaps the available treatment/slot options and pricing. Guests pick a date (9–12 Jun 2026), choose a time slot from a live grid (some slots already booked and disabled), adjust the party size, then confirm. A confirmation panel appears with a formatted booking reference, and a toast acknowledges the action.