页面困难

Hotel PMS — Room Rack / Tape Chart

Classic hotel tape chart — rooms on the Y axis, 14 days on the X axis. Coloured stays render as blocks across nights, with status (confirmed · in-house · checkout · maintenance) and click-to-inspect.

在 Lab 中打开

html css vanilla-js

目标: JS HTML

代码

: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.2);
  --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;
  --cell-w: 64px;
  --row-h: 40px;
  --label-w: 110px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.rack-app {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ── Topbar / Toolbar ── */
.topbar {
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  padding: 18px 24px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-d);
  font-weight: 600;
}
.topbar h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ico-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--navy-d);
  font-family: var(--font-display);
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ico-btn:hover {
  background: var(--cream-2);
}
.today-btn {
  background: var(--navy);
  color: var(--bone);
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.today-btn:hover {
  background: var(--navy-d);
}

.range-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy-d);
  min-width: 220px;
  text-align: center;
}
.filter {
  display: flex;
  gap: 6px;
}
.filter select {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 7px 24px 7px 12px;
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--line-strong);
  background: var(--cream);
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy-2) 50%),
    linear-gradient(135deg, var(--navy-2) 50%, transparent 50%);
  background-position: right 11px center, right 6px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--warm-gray);
  font-weight: 500;
}
.lg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-left: 10px;
}
.lg.confirmed {
  background: var(--info);
}
.lg.checked-in {
  background: var(--success);
}
.lg.due-out {
  background: var(--warning);
}
.lg.maintenance {
  background: var(--warm-gray);
}

/* ── Rack grid ── */
.rack {
  overflow: auto;
  background: var(--cream);
  display: grid;
  grid-template-columns: var(--label-w) 1fr;
  grid-template-rows: 36px 1fr;
}
.rack-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  background: var(--navy);
  color: var(--bone);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 12px 14px;
  border-right: 1px solid var(--navy-d);
  border-bottom: 1px solid var(--navy-d);
}
.rack-days {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bone);
  border-bottom: 1px solid var(--line-strong);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cell-w);
  height: 36px;
}
.day {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--warm-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 4px 0;
}
.day strong {
  font-size: 0.95rem;
  color: var(--navy-d);
  font-family: var(--font-display);
}
.day.is-today {
  background: rgba(201, 166, 73, 0.16);
  color: var(--gold-d);
}
.day.is-today strong {
  color: var(--gold-d);
}
.day.is-weekend {
  background: rgba(22, 30, 44, 0.03);
}

.rack-rooms {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bone);
  border-right: 1px solid var(--line-strong);
  display: grid;
  grid-auto-rows: var(--row-h);
}
.rm-label {
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.rm-label .rm-no {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--navy-d);
}
.rm-label .rm-type {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warm-gray);
}
.rm-group {
  background: var(--cream-2);
  color: var(--gold-d);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
}

.rack-grid {
  position: relative;
  display: grid;
  grid-auto-columns: var(--cell-w);
  grid-auto-rows: var(--row-h);
}
.cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cell.is-weekend {
  background: rgba(22, 30, 44, 0.03);
}
.cell.is-today {
  background: rgba(201, 166, 73, 0.08);
}
.cell-group {
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  grid-column: 1 / -1;
}

.stay {
  margin: 4px 2px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: transform 0.1s, box-shadow 0.1s;
}
.stay:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 30, 44, 0.18);
}
.stay.is-selected {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.stay.confirmed {
  background: rgba(74, 109, 160, 0.18);
  color: var(--info);
  border-color: rgba(74, 109, 160, 0.4);
}
.stay.checked-in {
  background: rgba(74, 119, 82, 0.2);
  color: var(--success);
  border-color: rgba(74, 119, 82, 0.4);
}
.stay.due-out {
  background: rgba(217, 144, 32, 0.22);
  color: var(--warning);
  border-color: rgba(217, 144, 32, 0.42);
}
.stay.maintenance {
  background: rgba(22, 30, 44, 0.1);
  color: var(--warm-gray);
  border-color: var(--line-strong);
  font-style: italic;
}
.stay-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Detail strip ── */
.detail {
  background: var(--bone);
  border-top: 1px solid var(--line);
  padding: 14px 24px;
  min-height: 86px;
  display: flex;
  align-items: center;
}
.empty-detail {
  font-size: 0.86rem;
  color: var(--warm-gray);
  font-style: italic;
}
.detail-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.dc-room {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--navy-d);
  letter-spacing: -0.01em;
}
.dc-guest p {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
}
.dc-guest small {
  font-size: 0.74rem;
  color: var(--warm-gray);
}
.dc-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dc-block strong {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-d);
}
.dc-block span {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink);
}
.dc-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 700;
}
.dc-status.confirmed {
  background: rgba(74, 109, 160, 0.16);
  color: var(--info);
}
.dc-status.checked-in {
  background: rgba(74, 119, 82, 0.16);
  color: var(--success);
}
.dc-status.due-out {
  background: rgba(217, 144, 32, 0.18);
  color: var(--warning);
}
.dc-action {
  background: var(--navy);
  color: var(--bone);
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.dc-action:hover {
  background: var(--navy-d);
}

@media (max-width: 1024px) {
  .toolbar {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .legend {
    display: none;
  }
}

// ── Config ─────────────────────────────────────────────────────────────────
const DAYS = 14;
const ROOMS = [
  { group: "Floor 1 · Standard", type: "standard", floor: 1 },
  { no: "101", type: "standard", floor: 1, label: "Single" },
  { no: "102", type: "standard", floor: 1, label: "Double" },
  { no: "103", type: "standard", floor: 1, label: "Double" },
  { no: "104", type: "standard", floor: 1, label: "Twin" },
  { no: "105", type: "standard", floor: 1, label: "Twin" },

  { group: "Floor 2 · Deluxe", type: "deluxe", floor: 2 },
  { no: "201", type: "deluxe", floor: 2, label: "Deluxe" },
  { no: "202", type: "deluxe", floor: 2, label: "Deluxe" },
  { no: "203", type: "deluxe", floor: 2, label: "Deluxe" },
  { no: "204", type: "deluxe", floor: 2, label: "Family" },
  { no: "205", type: "deluxe", floor: 2, label: "Deluxe" },

  { group: "Floor 3 · Suites", type: "suite", floor: 3 },
  { no: "301", type: "suite", floor: 3, label: "Junior" },
  { no: "302", type: "suite", floor: 3, label: "Junior" },
  { no: "303", type: "suite", floor: 3, label: "Executive" },
  { no: "304", type: "suite", floor: 3, label: "Penthouse" },
];

// Stays defined as offsets from "today" (col 0 = today, col 1 = +1d, …)
// Each stay: { room, start, nights, status, name, rate, balance }
const STAYS = [
  {
    room: "101",
    start: -2,
    nights: 4,
    status: "checked-in",
    name: "Karl Henriksen",
    rate: "Flex BAR · €184",
    balance: "€736 / paid",
  },
  {
    room: "102",
    start: 1,
    nights: 3,
    status: "confirmed",
    name: "Mariana Sosa",
    rate: "Promo · €152",
    balance: "€456 / deposit €100",
  },
  {
    room: "103",
    start: 0,
    nights: 1,
    status: "due-out",
    name: "Ruiqi Chen",
    rate: "Corporate · €172",
    balance: "€552 / open",
  },
  {
    room: "104",
    start: 4,
    nights: 5,
    status: "confirmed",
    name: "Patrick Wolfe",
    rate: "Flex BAR · €174",
    balance: "€870 / deposit",
  },
  {
    room: "105",
    start: 8,
    nights: 2,
    status: "confirmed",
    name: "Linnea Aalto",
    rate: "Promo · €148",
    balance: "€296 / paid",
  },

  {
    room: "201",
    start: -1,
    nights: 3,
    status: "checked-in",
    name: "Pilar Romero",
    rate: "Flex · €241",
    balance: "€482 / open",
  },
  {
    room: "202",
    start: 2,
    nights: 4,
    status: "confirmed",
    name: "Maya Sharma",
    rate: "Promo · €212",
    balance: "€848 / deposit",
  },
  {
    room: "203",
    start: 6,
    nights: 7,
    status: "maintenance",
    name: "Maintenance · plumbing",
    rate: "—",
    balance: "—",
  },
  {
    room: "204",
    start: 0,
    nights: 3,
    status: "confirmed",
    name: "Sofia Bellini",
    rate: "Suite Promo · €265",
    balance: "€795 / deposit",
  },
  {
    room: "205",
    start: 9,
    nights: 3,
    status: "confirmed",
    name: "Olivier Banks",
    rate: "Flex · €232",
    balance: "€696 / open",
  },

  {
    room: "301",
    start: -3,
    nights: 7,
    status: "checked-in",
    name: "Hassan Najjar",
    rate: "Family Promo · €301",
    balance: "€2,108 / paid",
  },
  {
    room: "302",
    start: 0,
    nights: 5,
    status: "confirmed",
    name: "Aiko Tanaka",
    rate: "Flex · €241",
    balance: "€1,205 / deposit",
  },
  {
    room: "303",
    start: 5,
    nights: 4,
    status: "confirmed",
    name: "Elena Vasquez",
    rate: "Suite Promo · €482",
    balance: "€1,928 / open",
  },
  {
    room: "304",
    start: 1,
    nights: 9,
    status: "confirmed",
    name: "Marc Dupuis",
    rate: "Penthouse · €612",
    balance: "€5,508 / deposit",
  },
];

// ── State ──────────────────────────────────────────────────────────────────
let anchor = startOfDay(new Date()); // first column = today
let selected = null;
let typeFilter = "all";
let floorFilter = "all";

const daysEl = document.getElementById("days");
const roomsEl = document.getElementById("rooms");
const gridEl = document.getElementById("grid");
const detailEl = document.getElementById("detail");
const rangeLabel = document.getElementById("rangeLabel");

function startOfDay(d) {
  const x = new Date(d);
  x.setHours(0, 0, 0, 0);
  return x;
}
function addDays(d, n) {
  const x = new Date(d);
  x.setDate(x.getDate() + n);
  return x;
}
function isWeekend(d) {
  const w = d.getDay();
  return w === 0 || w === 6;
}
function isSameDay(a, b) {
  return (
    a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
  );
}
function fmtDay(d) {
  return d.toLocaleDateString("en-GB", { weekday: "short" });
}
function fmtNum(d) {
  return d.getDate();
}
function fmtRange(d0, d1) {
  const opts = { day: "2-digit", month: "short" };
  return `${d0.toLocaleDateString("en-GB", opts)} – ${d1.toLocaleDateString("en-GB", opts)}`;
}

// ── Render ─────────────────────────────────────────────────────────────────
const today = startOfDay(new Date());

function render() {
  const end = addDays(anchor, DAYS - 1);
  rangeLabel.textContent = fmtRange(anchor, end);

  daysEl.innerHTML = "";
  for (let i = 0; i < DAYS; i++) {
    const d = addDays(anchor, i);
    const isToday = isSameDay(d, today);
    daysEl.insertAdjacentHTML(
      "beforeend",
      `<div class="day ${isWeekend(d) ? "is-weekend" : ""} ${isToday ? "is-today" : ""}">
        <span>${fmtDay(d)}</span><strong>${fmtNum(d)}</strong>
      </div>`
    );
  }

  // Filter rooms (respect group rows)
  const visibleRooms = [];
  let currentGroupVisible = false;
  ROOMS.forEach((r) => {
    if (r.group) {
      const typeOk = typeFilter === "all" || r.type === typeFilter;
      const floorOk = floorFilter === "all" || String(r.floor) === floorFilter;
      currentGroupVisible = typeOk && floorOk;
      if (currentGroupVisible) visibleRooms.push(r);
    } else if (currentGroupVisible) {
      visibleRooms.push(r);
    }
  });

  // Room labels column
  roomsEl.innerHTML = visibleRooms
    .map((r) =>
      r.group
        ? `<div class="rm-group">${r.group}</div>`
        : `<div class="rm-label">
            <span class="rm-no">${r.no}</span>
            <span class="rm-type">${r.label}</span>
          </div>`
    )
    .join("");

  // Grid cells + stays
  gridEl.style.gridTemplateColumns = `repeat(${DAYS}, var(--cell-w))`;
  gridEl.innerHTML = "";

  visibleRooms.forEach((r, rowIdx) => {
    if (r.group) {
      const groupCell = document.createElement("div");
      groupCell.className = "cell-group";
      groupCell.style.gridColumn = `1 / -1`;
      groupCell.style.gridRow = `${rowIdx + 1}`;
      groupCell.style.height = "var(--row-h)";
      gridEl.appendChild(groupCell);
      return;
    }
    for (let i = 0; i < DAYS; i++) {
      const d = addDays(anchor, i);
      const isToday = isSameDay(d, today);
      const c = document.createElement("div");
      c.className = `cell ${isWeekend(d) ? "is-weekend" : ""} ${isToday ? "is-today" : ""}`;
      c.style.gridRow = `${rowIdx + 1}`;
      c.style.gridColumn = `${i + 1}`;
      gridEl.appendChild(c);
    }
  });

  STAYS.forEach((stay) => {
    const roomIdx = visibleRooms.findIndex((r) => r.no === stay.room);
    if (roomIdx === -1) return;
    const startCol = stay.start + 1;
    const endCol = startCol + stay.nights;
    if (endCol <= 1 || startCol > DAYS) return;
    const visStart = Math.max(1, startCol);
    const visEnd = Math.min(DAYS + 1, endCol);
    const span = visEnd - visStart;

    const el = document.createElement("div");
    el.className = `stay ${stay.status}`;
    if (selected && selected.room === stay.room && selected.start === stay.start)
      el.classList.add("is-selected");
    el.style.gridRow = `${roomIdx + 1}`;
    el.style.gridColumn = `${visStart} / span ${span}`;
    el.innerHTML = `<span class="stay-dot"></span><span>${stay.name}</span>`;
    el.addEventListener("click", () => {
      selected = stay;
      render();
      renderDetail(stay);
    });
    gridEl.appendChild(el);
  });
}

function renderDetail(stay) {
  detailEl.innerHTML = `
    <div class="detail-card">
      <div class="dc-room">${stay.room}</div>
      <div class="dc-guest">
        <p>${stay.name}</p>
        <small>${stay.nights} nights · checked from row ${stay.start >= 0 ? "+" : ""}${stay.start}</small>
      </div>
      <div class="dc-block"><strong>Rate</strong><span>${stay.rate}</span></div>
      <div class="dc-block"><strong>Balance</strong><span>${stay.balance}</span></div>
      <span class="dc-status ${stay.status}">${stay.status.replace("-", " ")}</span>
      <button class="dc-action">Open reservation</button>
    </div>`;
}

// ── Wiring ─────────────────────────────────────────────────────────────────
document.querySelectorAll(".ico-btn").forEach((b) =>
  b.addEventListener("click", () => {
    anchor = addDays(anchor, parseInt(b.dataset.nav, 10));
    render();
  })
);
document.getElementById("todayBtn").addEventListener("click", () => {
  anchor = startOfDay(new Date());
  render();
});
document.getElementById("typeFilter").addEventListener("change", (e) => {
  typeFilter = e.target.value;
  render();
});
document.getElementById("floorFilter").addEventListener("change", (e) => {
  floorFilter = e.target.value;
  render();
});

render();

<!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>Room Rack · Aurelia Hotels</title>
  </head>
  <body>
    <main class="rack-app">
      <header class="topbar">
        <div class="topbar-left">
          <p class="kicker">Aurelia · Madrid</p>
          <h1>Room Rack</h1>
        </div>
        <div class="toolbar">
          <div class="nav">
            <button class="ico-btn" data-nav="-7" title="Previous week">‹</button>
            <button class="today-btn" id="todayBtn">Today</button>
            <button class="ico-btn" data-nav="7" title="Next week">›</button>
          </div>
          <p class="range-label" id="rangeLabel">—</p>
          <div class="filter">
            <select id="typeFilter">
              <option value="all">All room types</option>
              <option value="standard">Standard</option>
              <option value="deluxe">Deluxe</option>
              <option value="suite">Suite</option>
            </select>
            <select id="floorFilter">
              <option value="all">All floors</option>
              <option value="1">Floor 1</option>
              <option value="2">Floor 2</option>
              <option value="3">Floor 3</option>
            </select>
          </div>
          <div class="legend">
            <span class="lg confirmed"></span>Confirmed
            <span class="lg checked-in"></span>In-house
            <span class="lg due-out"></span>Checkout
            <span class="lg maintenance"></span>OOO
          </div>
        </div>
      </header>

      <section class="rack" id="rack">
        <div class="rack-corner">Room</div>
        <div class="rack-days" id="days"></div>
        <div class="rack-rooms" id="rooms"></div>
        <div class="rack-grid" id="grid"></div>
      </section>

      <aside class="detail" id="detail">
        <div class="empty-detail" id="empty">Select a stay block to view details.</div>
      </aside>
    </main>

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

Room Rack (Tape Chart)

The grid every front-desk uses to read the property at a glance. Rows = rooms (grouped by floor / type), columns = 14 nights starting today, cells = stays rendered as coloured blocks spanning multiple nights. Toolbar paginates ± weeks, filters by room type, and highlights today’s column. A detail strip below shows the selected stay’s guest, dates, rate plan and balance.

Vanilla JS — virtual rendering of a 14-day window, stay positioning via grid-column-span, click handlers to populate the detail strip. Same hotel design tokens as the dashboard.