Signature Library · Indian

Reservation Chart

Dot-matrix paper pasted on the coach: tractor holes, green bars, hover to mark your row.

Passengers: name|age|status, split by semicolons. CNF, RAC and WL get their own colour.

States

Default
Hover
Active
Focus

Code

reservation-chart.html

<div class="sig-reservation-chart">
  <span class="sig-reservation-chart__caption">Coach S4 · Chart prepared</span>
  <table class="sig-reservation-chart__table">
    <thead>
      <tr>
        <th class="sig-reservation-chart__head" scope="col">Bth</th>
        <th class="sig-reservation-chart__head" scope="col">Passenger</th>
        <th class="sig-reservation-chart__head" scope="col">Age</th>
        <th class="sig-reservation-chart__head" scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="sig-reservation-chart__row">
        <td class="sig-reservation-chart__cell">11</td>
        <td class="sig-reservation-chart__cell">Anitha K</td>
        <td class="sig-reservation-chart__cell">F 34</td>
        <td class="sig-reservation-chart__ok">CNF</td>
      </tr>
      <tr class="sig-reservation-chart__row">
        <td class="sig-reservation-chart__cell">12</td>
        <td class="sig-reservation-chart__cell">Bala S</td>
        <td class="sig-reservation-chart__cell">M 41</td>
        <td class="sig-reservation-chart__ok">CNF</td>
      </tr>
      <tr class="sig-reservation-chart__row">
        <td class="sig-reservation-chart__cell">13</td>
        <td class="sig-reservation-chart__cell">Chitra R</td>
        <td class="sig-reservation-chart__cell">F 27</td>
        <td class="sig-reservation-chart__rac">RAC 3</td>
      </tr>
      <tr class="sig-reservation-chart__row">
        <td class="sig-reservation-chart__cell">14</td>
        <td class="sig-reservation-chart__cell">Dinesh M</td>
        <td class="sig-reservation-chart__cell">M 52</td>
        <td class="sig-reservation-chart__wait">WL 7</td>
      </tr>
    </tbody>
  </table>
</div>

reservation-chart.css

.sig-reservation-chart {
  --sig-paper: #f6f3e6;
  --sig-bar: #d9edd6;
  --sig-mark: #ffe14d;
  --sig-ink: #2b2b33;
  --sig-w: 280px;
  --sig-speed: 120ms;
}

.sig-reservation-chart {
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--sig-w));
  padding: 12px 20px 10px;
  color: var(--sig-ink);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  background: radial-gradient(circle 3px at 8px 8px, #15151b 96%, transparent) 0 0 / 100% 16px repeat-y, radial-gradient(circle 3px at calc(100% - 8px) 8px, #15151b 96%, transparent) 0 0 / 100% 16px repeat-y, var(--sig-paper);
  transform: rotate(1deg);
}

.sig-reservation-chart::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(50% - 26px);
  width: 52px;
  height: 15px;
  background: rgba(255,240,190,.55);
  transform: rotate(-3deg);
}

.sig-reservation-chart__caption {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sig-reservation-chart__table {
  width: 100%;
  border-collapse: collapse;
}

.sig-reservation-chart__head {
  padding: 3px 4px;
  text-align: left;
  font-weight: 700;
  border-bottom: 1px dashed var(--sig-ink);
}

.sig-reservation-chart__row {
  transition: background var(--sig-speed) ease;
}

.sig-reservation-chart__row:nth-child(odd) {
  background: var(--sig-bar);
}

.sig-reservation-chart__row:hover {
  background: var(--sig-mark);
}

.sig-reservation-chart__cell {
  padding: 4px;
}

.sig-reservation-chart__ok {
  padding: 4px;
  font-weight: 700;
  color: #1c7a3f;
}

.sig-reservation-chart__rac {
  padding: 4px;
  font-weight: 700;
  color: #a86400;
}

.sig-reservation-chart__wait {
  padding: 4px;
  font-weight: 700;
  color: #b3242a;
}

@media (prefers-reduced-motion: reduce) {
  .sig-reservation-chart__row {
    animation: none !important;
    transition: none !important;
  }
}

reservation-chart.js

// No JavaScript needed: this one is CSS only.

reservation-chart.tsx

import type React from "react";
import "./reservation-chart.css"; // the CSS tab

export function SigReservationChart({ children = "Coach S4 · Chart prepared", ...props }: React.ComponentProps<"div">) {
  return (
    <div className="sig-reservation-chart" {...props}>
      <span className="sig-reservation-chart__caption">{children}</span>
      <table className="sig-reservation-chart__table">
        <thead>
          <tr>
            <th className="sig-reservation-chart__head" scope="col">{"Bth"}</th>
            <th className="sig-reservation-chart__head" scope="col">{"Passenger"}</th>
            <th className="sig-reservation-chart__head" scope="col">{"Age"}</th>
            <th className="sig-reservation-chart__head" scope="col">{"Status"}</th>
          </tr>
        </thead>
        <tbody>
          <tr className="sig-reservation-chart__row">
            <td className="sig-reservation-chart__cell">{"11"}</td>
            <td className="sig-reservation-chart__cell">{"Anitha K"}</td>
            <td className="sig-reservation-chart__cell">{"F 34"}</td>
            <td className="sig-reservation-chart__ok">{"CNF"}</td>
          </tr>
          <tr className="sig-reservation-chart__row">
            <td className="sig-reservation-chart__cell">{"12"}</td>
            <td className="sig-reservation-chart__cell">{"Bala S"}</td>
            <td className="sig-reservation-chart__cell">{"M 41"}</td>
            <td className="sig-reservation-chart__ok">{"CNF"}</td>
          </tr>
          <tr className="sig-reservation-chart__row">
            <td className="sig-reservation-chart__cell">{"13"}</td>
            <td className="sig-reservation-chart__cell">{"Chitra R"}</td>
            <td className="sig-reservation-chart__cell">{"F 27"}</td>
            <td className="sig-reservation-chart__rac">{"RAC 3"}</td>
          </tr>
          <tr className="sig-reservation-chart__row">
            <td className="sig-reservation-chart__cell">{"14"}</td>
            <td className="sig-reservation-chart__cell">{"Dinesh M"}</td>
            <td className="sig-reservation-chart__cell">{"M 52"}</td>
            <td className="sig-reservation-chart__wait">{"WL 7"}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

reservation-chart.html

<div class="relative [box-sizing:border-box] w-[min(100%,_280px)] [padding:12px_20px_10px] text-[#2b2b33] [font-family:ui-monospace,_Consolas,_monospace] text-[10.5px] [background:radial-gradient(circle_3px_at_8px_8px,_#15151b_96%,_transparent)_0_0_/_100%_16px_repeat-y,_radial-gradient(circle_3px_at_calc(100%_-_8px)_8px,_#15151b_96%,_transparent)_0_0_/_100%_16px_repeat-y,_#f6f3e6] [transform:rotate(1deg)] before:content-[''] before:absolute before:[top:-7px] before:[left:calc(50%_-_26px)] before:w-[52px] before:h-[15px] before:[background:rgba(255,240,190,.55)] before:[transform:rotate(-3deg)]">
  <span class="[display:block] [margin-bottom:6px] font-[700] [letter-spacing:0.05em] [text-transform:uppercase]">Coach S4 · Chart prepared</span>
  <table class="w-[100%] [border-collapse:collapse]">
    <thead>
      <tr>
        <th class="[padding:3px_4px] [text-align:left] font-[700] [border-bottom:1px_dashed_#2b2b33]" scope="col">Bth</th>
        <th class="[padding:3px_4px] [text-align:left] font-[700] [border-bottom:1px_dashed_#2b2b33]" scope="col">Passenger</th>
        <th class="[padding:3px_4px] [text-align:left] font-[700] [border-bottom:1px_dashed_#2b2b33]" scope="col">Age</th>
        <th class="[padding:3px_4px] [text-align:left] font-[700] [border-bottom:1px_dashed_#2b2b33]" scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="[transition:background_120ms_ease] [&:nth-child(odd)]:bg-[#d9edd6] hover:bg-[#ffe14d] motion-reduce:[transition:none!important]">
        <td class="[padding:4px]">11</td>
        <td class="[padding:4px]">Anitha K</td>
        <td class="[padding:4px]">F 34</td>
        <td class="[padding:4px] font-[700] text-[#1c7a3f]">CNF</td>
      </tr>
      <tr class="[transition:background_120ms_ease] [&:nth-child(odd)]:bg-[#d9edd6] hover:bg-[#ffe14d] motion-reduce:[transition:none!important]">
        <td class="[padding:4px]">12</td>
        <td class="[padding:4px]">Bala S</td>
        <td class="[padding:4px]">M 41</td>
        <td class="[padding:4px] font-[700] text-[#1c7a3f]">CNF</td>
      </tr>
      <tr class="[transition:background_120ms_ease] [&:nth-child(odd)]:bg-[#d9edd6] hover:bg-[#ffe14d] motion-reduce:[transition:none!important]">
        <td class="[padding:4px]">13</td>
        <td class="[padding:4px]">Chitra R</td>
        <td class="[padding:4px]">F 27</td>
        <td class="[padding:4px] font-[700] text-[#a86400]">RAC 3</td>
      </tr>
      <tr class="[transition:background_120ms_ease] [&:nth-child(odd)]:bg-[#d9edd6] hover:bg-[#ffe14d] motion-reduce:[transition:none!important]">
        <td class="[padding:4px]">14</td>
        <td class="[padding:4px]">Dinesh M</td>
        <td class="[padding:4px]">M 52</td>
        <td class="[padding:4px] font-[700] text-[#b3242a]">WL 7</td>
      </tr>
    </tbody>
  </table>
</div>

States

Code

More in Indian