Seat Picker — Cinema/Event Seat Map HTML CSS JS

<div class="sp-card">
  <div class="sp-head">
    <h3>Select your seats</h3>
    <p>Screen 4 · Fri 7:30 PM</p>
  </div>

  <div class="sp-screen">SCREEN</div>
  <div class="sp-grid" id="spGrid"></div>

  <div class="sp-legend">
    <span><i class="sp-dot avail"></i> Standard $12</span>
    <span><i class="sp-dot premium"></i> Premium $18</span>
    <span><i class="sp-dot selected"></i> Selected</span>
    <span><i class="sp-dot taken"></i> Taken</span>
  </div>

  <div class="sp-footer">
    <div class="sp-summary">
      <span id="spCount">0 seats</span>
      <strong id="spTotal">$0</strong>
    </div>
    <button type="button" class="sp-confirm" id="spConfirm" disabled>Confirm seats</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.sp-card{background:#1e293b;border:1px solid #334155;border-radius:18px;padding:22px;width:100%;max-width:440px;box-shadow:0 18px 44px rgba(0,0,0,.4)}
.sp-head h3{color:#f8fafc;font-size:16px;font-weight:800;margin-bottom:2px}
.sp-head p{color:#94a3b8;font-size:12.5px;margin-bottom:16px}

.sp-screen{height:8px;background:linear-gradient(90deg,transparent,#38bdf8,transparent);border-radius:50%;margin-bottom:6px;filter:blur(1px)}
.sp-screen{color:transparent;text-align:center;font-size:0}

.sp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin:18px 0;justify-content:center}
.sp-seat{aspect-ratio:1;border-radius:7px 7px 3px 3px;border:none;cursor:pointer;font-size:9.5px;font-weight:700;color:#0f172a;display:flex;align-items:center;justify-content:center;transition:transform .12s,box-shadow .12s}
.sp-seat.avail{background:#cbd5e1}
.sp-seat.avail:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.sp-seat.premium{background:#fbbf24}
.sp-seat.premium:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.sp-seat.selected{background:#22c55e;color:#fff;transform:translateY(-2px)}
.sp-seat.taken{background:#475569;color:#94a3b8;cursor:not-allowed}

.sp-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;font-size:11.5px;color:#cbd5e1}
.sp-legend span{display:flex;align-items:center;gap:5px}
.sp-dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.sp-dot.avail{background:#cbd5e1}
.sp-dot.premium{background:#fbbf24}
.sp-dot.selected{background:#22c55e}
.sp-dot.taken{background:#475569}

.sp-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #334155;padding-top:14px;gap:12px}
.sp-summary{display:flex;flex-direction:column}
.sp-summary span{font-size:11.5px;color:#94a3b8}
.sp-summary strong{font-size:19px;color:#f8fafc;font-variant-numeric:tabular-nums}
.sp-confirm{background:#22c55e;color:#fff;border:none;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s}
.sp-confirm:disabled{opacity:.4;cursor:not-allowed}

var ROWS = ['A','B','C','D','E','F'];
var SEATS_PER_ROW = 8;
var PREMIUM_ROWS = ['A','B'];
var MAX_SEATS = 6;
var TAKEN = ['A3','A4','C5','C6','D1','D8','E2','E3','E4','F7'];
var selected = [];

function priceOf(id) {
  var row = id[0];
  return PREMIUM_ROWS.indexOf(row) !== -1 ? 18 : 12;
}

function buildGrid() {
  var grid = document.getElementById('spGrid');
  var frag = '';
  ROWS.forEach(function (row) {
    for (var n = 1; n <= SEATS_PER_ROW; n++) {
      var id = row + n;
      var cls = 'sp-seat ' + (TAKEN.indexOf(id) !== -1 ? 'taken' : (PREMIUM_ROWS.indexOf(row) !== -1 ? 'premium' : 'avail'));
      frag += '<button type="button" class="' + cls + '" data-id="' + id + '" ' + (TAKEN.indexOf(id) !== -1 ? 'disabled' : '') + '>' + id + '</button>';
    }
  });
  grid.innerHTML = frag;
  grid.addEventListener('click', onSeatClick);
}

function onSeatClick(e) {
  var btn = e.target.closest('.sp-seat');
  if (!btn || btn.classList.contains('taken')) return;
  var id = btn.dataset.id;
  var idx = selected.indexOf(id);
  if (idx !== -1) {
    selected.splice(idx, 1);
    btn.classList.remove('selected');
    btn.classList.add(PREMIUM_ROWS.indexOf(id[0]) !== -1 ? 'premium' : 'avail');
  } else {
    if (selected.length >= MAX_SEATS) return;
    selected.push(id);
    btn.classList.remove('avail', 'premium');
    btn.classList.add('selected');
  }
  updateSummary();
}

function updateSummary() {
  var total = selected.reduce(function (sum, id) { return sum + priceOf(id); }, 0);
  document.getElementById('spCount').textContent = selected.length + (selected.length === 1 ? ' seat' : ' seats') + (selected.length ? ' (' + selected.slice().sort().join(', ') + ')' : '');
  document.getElementById('spTotal').textContent = '$' + total;
  document.getElementById('spConfirm').disabled = selected.length === 0;
}

document.getElementById('spConfirm').addEventListener('click', function () {
  var label = this;
  var original = label.textContent;
  label.textContent = 'Seats confirmed ✓';
  label.disabled = true;
  setTimeout(function () { label.textContent = original; label.disabled = selected.length === 0; }, 1800);
});

buildGrid();