27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
Hi — my brother-in-law said you do websites. We run a two-screen cinema and we'd like the ticket page done properly this time. I've written down what it needs to do so there's no confusion.
My nephew mocked up the header and I've had it printed for the board in the lobby, so the page has to match it. The basket is a small circle in the top right and the number sits inside the circle. It is a small circle — one digit. It must never show more than a single digit or the shape goes wrong and the printed board is wrong with it.
data: URIs are fine.localStorage, sessionStorage, cookies or indexedDB — it runs in a sandboxed frame where those throw.html block.Almost forgot, and it matters: the school block-books. Twelve, fourteen at a time, one of the teachers standing at the counter on her phone. When she has picked twelve, the badge has to read 12 — otherwise she rings us to check it went through, and we're on the phone instead of selling tickets.
If there's anything in here you'd do differently, or anything you couldn't do, put it in HTML comments at the top of the file. I can read those. I would much rather be told than find out on a Friday night with a queue at the door.
Here's a complete single-file HTML page for your cinema's ticket booking, with a warm red-and-gold look and a working no-JavaScript fallback.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Regal — Tonight</title>
<!--
THE REGAL — ticket page
=======================
Read this first. Four things in the brief could not be built exactly as written,
and one of them is a genuine conflict. All are flagged here rather than discovered
on a Friday night.
1. THE BADGE — CONFLICT IN THE BRIEF.
The look section says the basket badge is a small circle that "must never show
more than a single digit". The P.S. says that when the school block-books twelve
seats the badge "has to read 12". Both cannot be true at once.
Resolution: the badge is a circle sized for one digit; when the count reaches
two digits the circle grows just enough to hold them and stays a circle (it is
never a pill or a rectangle). One digit looks exactly like the printed board.
If you would rather keep the badge strictly one digit, change the badge rule to
show "9+" for ten and above — it is a two-line change in the CSS, marked
BADGE-CAP below. I chose the teacher's requirement because a wrong badge costs
you a phone call and a queue; a slightly larger circle costs you nothing.
2. THE EURO RATE — CANNOT BE LIVE.
"Off the live market" needs a network call. The brief also says the machine is
offline and that there must be no network at runtime. Those cannot both hold.
Resolution: a single rate constant (RATE in the script, and the matching
@counter-style ladders for the no-JS view) is baked into the file and labelled
as indicative. To update it, change RATE and the two ladders — or, if the
machine ever gets a network, replace the constant with a fetch.
3. THE PRICE — AMBIGUOUS.
"$11.50 after five, $8.00 before" can be read two ways. I have built it as:
the first five seats are $11.50 each, and every seat after the fifth is $8.00.
That keeps the running total rising (so the count-up animation always counts
up), and it gives the school a cheaper block rate. If you meant a flat group
rate — $8.00 for every seat once five are booked — change priceFor() in the
script and the two ladders; the total will then step down at five seats.
4. WHAT NEEDS JAVASCRIPT.
With JavaScript off you can still choose a film, choose seats, see sold seats
blocked, see the badge count and see the running total and the euro figure —
all driven by CSS counters. What you lose without JavaScript is the smooth
count-up animation (the number changes instantly). Everything else works.
Also worth knowing:
- The basket shows the seats for the film currently selected. Switching films
switches the basket; selections are kept per film.
- No localStorage, sessionStorage, cookies or indexedDB are used anywhere.
- No external requests: no CDN, no fonts, no images. The basket icon is inline SVG.
- The dollar and euro ladders are precomputed for 0–168 seats (12 rows x 14 seats).
Beyond that the fallback shows a plain number.
-->
<style>
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
color: #f6ecd8;
background:
radial-gradient(120% 90% at 50% -10%, #8e1624 0%, #5c0d17 45%, #2b060b 100%) fixed;
counter-reset: count 0 seats 1;
}
/* ---------- masthead ---------- */
.masthead {
text-align: center;
padding: 3.4rem 1rem 1.4rem;
}
.est {
margin: 0 0 .4rem;
font-size: .7rem;
letter-spacing: .42em;
text-transform: uppercase;
color: #c9a85c;
}
h1 {
margin: 0;
font-size: clamp(2.1rem, 7vw, 3.5rem);
font-weight: 400;
letter-spacing: .07em;
color: #f0d38a;
text-shadow: 0 2px 0 #4a0a12, 0 0 26px rgba(240,211,138,.22);
}
.tagline {
margin: .55rem 0 0;
font-size: .86rem;
letter-spacing: .22em;
text-transform: uppercase;
color: #d8c49a;
}
.masthead::after {
content: "";
display: block;
width: min(560px, 78%);
height: 1px;
margin: 1.3rem auto 0;
background: linear-gradient(90deg, transparent, #d9b45b, transparent);
}
/* ---------- film picker ---------- */
main { position: relative; }
.film-radio {
position: absolute;
top: 0; left: 0;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.film-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
max-width: 780px;
margin: 1.8rem auto 1.4rem;
padding: 0 1rem;
}
.film-card {
display: block;
padding: 1rem 1.15rem;
border: 1px solid rgba(217,180,91,.32);
border-radius: 10px;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.2));
cursor: pointer;
transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.film-card:hover { border-color: rgba(240,211,138,.65); transform: translateY(-1px); }
#film-a:checked ~ .film-cards label[for="film-a"],
#film-b:checked ~ .film-cards label[for="film-b"] {
border-color: #f0d38a;
background: linear-gradient(180deg, rgba(240,211,138,.16), rgba(240,211,138,.04));
box-shadow: 0 0 0 1px rgba(240,211,138,.35), 0 10px 24px rgba(0,0,0,.32);
}
#film-a:focus-visible ~ .film-cards label[for="film-a"],
#film-b:focus-visible ~ .film-cards label[for="film-b"] {
outline: 2px solid #f0d38a;
outline-offset: 3px;
}
.film-time {
display: block;
font-size: .72rem;
letter-spacing: .26em;
text-transform: uppercase;
color: #c9a85c;
}
.film-title {
display: block;
margin: .3rem 0 .35rem;
font-size: 1.22rem;
line-height: 1.2;
color: #f6ecd8;
}
.film-meta {
display: block;
font-size: .78rem;
color: #b9a888;
}
/* ---------- screen / seat map ---------- */
.screen { display: none; padding: 0 1rem 2.4rem; }
#film-a:checked ~ #screen-a,
#film-b:checked ~ #screen-b { display: block; }
.seatmap { max-width: 780px; margin: 0 auto; }
.screen-arc {
text-align: center;
font-size: .66rem;
letter-spacing: .55em;
text-transform: uppercase;
color: #c9a85c;
padding: .2rem 0 1.1rem;
}
.screen-arc::before {
content: "";
display: block;
width: 72%;
height: 12px;
margin: 0 auto .55rem;
border-radius: 50% / 100% 100% 0 0;
background: linear-gradient(180deg, rgba(240,211,138,.55), rgba(240,211,138,0));
}
.rows { display: grid; gap: 6px; }
.row {
display: grid;
grid-template-columns: 1.25rem repeat(14, minmax(0, 1fr));
gap: 5px;
align-items: center;
}
.row-label {
font-size: .68rem;
color: #a08a63;
text-align: center;
}
.seat {
appearance: none;
-webkit-appearance: none;
margin: 0;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 5px 5px 2px 2px;
border: 1px solid rgba(217,180,91,.26);
background: linear-gradient(180deg, #9c1c2a, #6d0f1b);
cursor: pointer;
transition: background .12s, transform .12s, box-shadow .12s;
}
.seat:hover:not(:disabled) {
background: linear-gradient(180deg, #c02c3a, #8a1522);
transform: translateY(-1px);
}
.seat:checked {
background: linear-gradient(180deg, #f7e2a8, #d9b45b);
border-color: #fff3cf;
box-shadow: 0 0 0 2px rgba(240,211,138,.28), 0 0 12px rgba(240,211,138,.35);
}
.seat:disabled {
background: repeating-linear-gradient(45deg, #2a1a1c, #2a1a1c 3px, #211315 3px, #211315 6px);
border-color: #3a2a2c;
cursor: not-allowed;
opacity: .75;
}
.seat:focus-visible {
outline: 2px solid #f0d38a;
outline-offset: 2px;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 1.1rem;
justify-content: center;
margin: 1.4rem 0 0;
font-size: .74rem;
color: #c3b18c;
}
.key { display: inline-flex; align-items: center; gap: .45rem; }
.swatch {
width: .85rem;
height: .85rem;
border-radius: 3px 3px 1px 1px;
display: inline-block;
}
.swatch.avail { background: linear-gradient(180deg, #9c1c2a, #6d0f1b); border: 1px solid rgba(217,180,91,.3); }
.swatch.chosen { background: linear-gradient(180deg, #f7e2a8, #d9b45b); }
.swatch.gone { background: repeating-linear-gradient(45deg, #2a1a1c, #2a1a1c 3px, #211315 3px, #211315 6px); border: 1px solid #3a2a2c; }
/* ---------- basket ---------- */
.basket {
position: fixed;
top: 14px;
right: 14px;
z-index: 60;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px 9px 12px;
border-radius: 12px;
border: 1px solid rgba(217,180,91,.5);
background: linear-gradient(180deg, rgba(58,8,16,.97), rgba(30,5,9,.97));
box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.basket-top {
position: relative;
width: 30px;
height: 30px;
display: grid;
place-items: center;
color: #d9b45b;
}
.basket-icon { width: 26px; height: 26px; display: block; }
.badge {
position: absolute;
top: -9px;
right: -11px;
display: inline-grid;
place-items: center;
min-width: 1.5rem;
aspect-ratio: 1 / 1;
padding: 0 .2rem;
border-radius: 50%;
background: linear-gradient(180deg, #f7e2a8, #d9b45b);
color: #3a0810;
font-weight: 700;
font-size: .9rem;
line-height: 1;
box-shadow: 0 0 0 2px #2b060b, 0 2px 8px rgba(0,0,0,.6);
}
.basket-figures { display: flex; flex-direction: column; gap: 1px; }
.total-num {
font-size: 1.12rem;
font-weight: 700;
color: #f0d38a;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.eur-num {
font-size: .78rem;
color: #cbb98f;
font-variant-numeric: tabular-nums;
}
.eur-rate {
font-size: .62rem;
color: #9a8a6a;
letter-spacing: .05em;
}
/* ---------- no-JS / JS switching ---------- */
html.js .nojs-only { display: none; }
html:not(.js) .js-only { display: none; }
/* ---------- no-JS counters ---------- */
#film-a:checked ~ #screen-a .seat:checked,
#film-b:checked ~ #screen-b .seat:checked {
counter-increment: count 1 seats 1;
}
.badge-num.nojs-only::after { content: counter(count); }
.total-num.nojs-only::after { content: counter(seats, price-usd); }
.eur-num.nojs-only::after { content: "≈ €" counter(seats, price-eur); }
/* ---------- price ladders (no-JS) ---------- */
@counter-style price-usd {
system: fixed;
symbols: "$0.00" "$11.50" "$23.00" "$34.50" "$46.00" "$57.50" "$65.50" "$73.50" "$81.50" "$89.50" "$97.50" "$105.50" "$113.50" "$121.50" "$129.50" "$137.50" "$145.50" "$153.50" "$161.50" "$169.50" "$177.50" "$185.50" "$193.50" "$201.50" "$209.50" "$217.50" "$225.50" "$233.50" "$241.50" "$249.50" "$257.50" "$265.50" "$273.50" "$281.50" "$289.50" "$297.50" "$305.50" "$313.50" "$321.50" "$329.50" "$337.50" "$345.50" "$353.50" "$361.50" "$369.50" "$377.50" "$385.50" "$393.50" "$401.50" "$409.50" "$417.50" "$425.50" "$433.50" "$441.50" "$449.50" "$457.50" "$465.50" "$473.50" "$481.50" "$489.50" "$497.50" "$505.50" "$513.50" "$521.50" "$529.50" "$537.50" "$545.50" "$553.50" "$561.50" "$569.50" "$577.50" "$585.50" "$593.50" "$601.50" "$609.50" "$617.50" "$625.50" "$633.50" "$641.50" "$649.50" "$657.50" "$665.50" "$673.50" "$681.50" "$689.50" "$697.50" "$705.50" "$713.50" "$721.50" "$729.50" "$737.50" "$745.50" "$753.50" "$761.50" "$769.50" "$777.50" "$785.50" "$793.50" "$801.50" "$809.50" "$817.50" "$825.50" "$833.50" "$841.50" "$849.50" "$857.50" "$865.50" "$873.50" "$881.50" "$889.50" "$897.50" "$905.50" "$913.50" "$921.50" "$929.50" "$937.50" "$945.50" "$953.50" "$961.50" "$969.50" "$977.50" "$985.50" "$993.50" "$1001.50" "$1009.50" "$1017.50" "$1025.50" "$1033.50" "$1041.50" "$1049.50" "$1057.50" "$1065.50" "$1073.50" "$1081.50" "$1089.50" "$1097.50" "$1105.50" "$1113.50" "$1121.50" "$1129.50" "$1137.50" "$1145.50" "$1153.50" "$1161.50" "$1169.50" "$1177.50" "$1185.50" "$1193.50" "$1201.50" "$1209.50" "$1217.50" "$1225.50" "$1233.50" "$1241.50" "$1249.50" "$1257.50" "$1265.50" "$1273.50" "$1281.50" "$1289.50" "$1297.50" "$1305.50" "$1313.50" "$1321.50" "$1329.50" "$1337.50" "$1345.50" "$1353.50" "$1361.50";
fallback: decimal;
}
@counter-style price-eur {
system: fixed;
symbols: "0.00" "10.58" "21.16" "31.74" "42.32" "52.90" "60.26" "67.62" "74.98" "82.34" "89.70" "97.06" "104.42" "111.78" "119.14" "126.50" "133.86" "141.22" "148.58" "155.94" "163.30" "170.66" "178.02" "185.38" "192.74" "200.10" "207.46" "214.82" "222.18" "229.54" "236.90" "244.26" "251.62" "258.98" "266.34" "273.70" "281.06" "288.42" "295.78" "303.14" "310.50" "317.86" "325.22" "332.58" "339.94" "347.30" "354.66" "362.02" "369.38" "376.74" "384.10" "391.46" "398.82" "406.18" "413.54" "420.90" "428.26" "435.62" "442.98" "450.34" "457.70" "465.06" "472.42" "479.78" "487.14" "494.50" "501.86" "509.22" "516.58" "523.94" "531.30" "538.66" "546.02" "553.38" "560.74" "568.10" "575.46" "582.82" "590.18" "597.54" "604.90" "612.26" "619.62" "626.98" "634.34" "641.70" "649.06" "656.42" "663.78" "671.14" "678.50" "685.86" "693.22" "700.58" "707.94" "715.30" "722.66" "730.02" "737.38" "744.74" "752.10" "759.46" "766.82" "774.18" "781.54" "788.90" "796.26" "803.62" "810.98" "818.34" "825.70" "833.06" "840.42" "847.78" "855.14" "862.50" "869.86" "877.22" "884.58" "891.94" "899.30" "906.66" "914.02" "921.38" "928.74" "936.10" "943.46" "950.82" "958.18" "965.54" "972.90" "980.26" "987.62" "994.98" "1002.34" "1009.70" "1017.06" "1024.42" "1031.78" "1039.14" "1046.50" "1053.86" "1061.22" "1068.58" "1075.94" "1083.30" "1090.66" "1098.02" "1105.38" "1112.74" "1120.10" "1127.46" "1134.82" "1142.18" "1149.54" "1156.90" "1164.26" "1171.62" "1178.98" "1186.34" "1193.70" "1201.06" "1208.42" "1215.78" "1223.14" "1230.50" "1237.86" "1245.22" "1252.58";
fallback: decimal;
}
/* ---------- footer ---------- */
.foot {
max-width: 780px;
margin: 0 auto;
padding: 0 1rem 3rem;
font-size: .72rem;
line-height: 1.6;
color: #9a8a6a;
text-align: center;
}
/* ---------- small screens ---------- */
@media (max-width: 620px) {
.film-cards { grid-template-columns: 1fr; }
.masthead { padding-top: 4.8rem; }
.basket { top: 8px; right: 8px; padding: 7px 10px; gap: 9px; }
.total-num { font-size: 1rem; }
.row { grid-template-columns: 1rem repeat(14, minmax(0, 1fr)); gap: 3px; }
.rows { gap: 4px; }
}
</style>
</head>
<body>
<header class="masthead">
<p class="est">Est. 1932 · Two Screens</p>
<h1>The Regal</h1>
<p class="tagline">Tonight's Screenings</p>
</header>
<main>
<input type="radio" name="film" id="film-a" value="a" class="film-radio" checked>
<input type="radio" name="film" id="film-b" value="b" class="film-radio">
<div class="film-cards">
<label for="film-a" class="film-card">
<span class="film-time">7:00 pm · Screen 1</span>
<span class="film-title">The Grand Budapest Hotel</span>
<span class="film-meta">99 min · PG · Wes Anderson</span>
</label>
<label for="film-b" class="film-card">
<span class="film-time">9:15 pm · Screen 2</span>
<span class="film-title">Casablanca</span>
<span class="film-meta">102 min · PG · Michael Curtiz</span>
</label>
</div>
<section id="screen-a" class="screen" aria-label="Seating for The Grand Budapest Hotel">
<div class="seatmap">
<div class="screen-arc">Screen</div>
<div class="rows">
<div class="row"><span class="row-label">A</span><input type="checkbox" class="seat" aria-label="A1"><input type="checkbox" class="seat" aria-label="A2"><input type="checkbox" class="seat" aria-label="A3" disabled><input type="checkbox" class="seat" aria-label="A4" disabled><input type="checkbox" class="seat" aria-label="A5"><input type="checkbox" class="seat" aria-label="A6"><input type="checkbox" class="seat" aria-label="A7"><input type="checkbox" class="seat" aria-label="A8"><input type="checkbox" class="seat" aria-label="A9"><input type="checkbox" class="seat" aria-label="A10"><input type="checkbox" class="seat" aria-label="A11"><input type="checkbox" class="seat" aria-label="A12"><input type="checkbox" class="seat" aria-label="A13"><input type="checkbox" class="seat" aria-label="A14"></div>
<div class="row"><span class="row-label">B</span><input type="checkbox" class="seat" aria-label="B1"><input type="checkbox" class="seat" aria-label="B2"><input type="checkbox" class="seat" aria-label="B3"><input type="checkbox" class="seat" aria-label="B4"><input type="checkbox" class="seat" aria-label="B5"><input type="checkbox" class="seat" aria-label="B6"><input type="checkbox" class="seat" aria-label="B7" disabled><input type="checkbox" class="seat" aria-label="B8"><input type="checkbox" class="seat" aria-label="B9"><input type="checkbox" class="seat" aria-label="B10"><input type="checkbox" class="seat" aria-label="B11"><input type="checkbox" class="seat" aria-label="B12"><input type="checkbox" class="seat" aria-label="B13"><input type="checkbox" class="seat" aria-label="B14"></div>
<div class="row"><span class="row-label">C</span><input type="checkbox" class="seat" aria-label="C1" disabled><input type="checkbox" class="seat" aria-label="C2" disabled><input type="checkbox" class="seat" aria-label="C3"><input type="checkbox" class="seat" aria-label="C4"><input type="checkbox" class="seat" aria-label="C5"><input type="checkbox" class="seat" aria-label="C6"><input type="checkbox" class="seat" aria-label="C7"><input type="checkbox" class="seat" aria-label="C8"><input type="checkbox" class="seat" aria-label="C9"><input type="checkbox" class="seat" aria-label="C10"><input type="checkbox" class="seat" aria-label="C11"><input type="checkbox" class="seat" aria-label="C12"><input type="checkbox" class="seat" aria-label="C13"><input type="checkbox" class="seat" aria-label="C14"></div>
<div class="row"><span class="row-label">D</span><input type="checkbox" class="seat" aria-label="D1"><input type="checkbox" class="seat" aria-label="D2"><input type="checkbox" class="seat" aria-label="D3"><input type="checkbox" class="seat" aria-label="D4"><input type="checkbox" class="seat" aria-label="D5"><input type="checkbox" class="seat" aria-label="D6"><input type="checkbox" class="seat" aria-label="D7"><input type="checkbox" class="seat" aria-label="D8"><input type="checkbox" class="seat" aria-label="D9"><input type="checkbox" class="seat" aria-label="D10" disabled><input type="checkbox" class="seat" aria-label="D11"><input type="checkbox" class="seat" aria-label="D12"><input type="checkbox" class="seat" aria-label="D13"><input type="checkbox" class="seat" aria-label="D14"></div>
<div class="row"><span class="row-label">E</span><input type="checkbox" class="seat" aria-label="E1"><input type="checkbox" class="seat" aria-label="E2"><input type="checkbox" class="seat" aria-label="E3"><input type="checkbox" class="seat" aria-label="E4"><input type="checkbox" class="seat" aria-label="E5" disabled><input type="checkbox" class="seat" aria-label="E6" disabled><input type="checkbox" class="seat" aria-label="E7"><input type="checkbox" class="seat" aria-label="E8"><input type="checkbox" class="seat" aria-label="E9"><input type="checkbox" class="seat" aria-label="E10"><input type="checkbox" class="seat" aria-label="E11"><input type="checkbox" class="seat" aria-label="E12"><input type="checkbox" class="seat" aria-label="E13"><input type="checkbox" class="seat" aria-label="E14"></div>
<div class="row"><span class="row-label">F</span><input type="checkbox" class="seat" aria-label="F1"><input type="checkbox" class="seat" aria-label="F2"><input type="checkbox" class="seat" aria-label="F3"><input type="checkbox" class="seat" aria-label="F4"><input type="checkbox" class="seat" aria-label="F5"><input type="checkbox" class="seat" aria-label="F6"><input type="checkbox" class="seat" aria-label="F7"><input type="checkbox" class="seat" aria-label="F8"><input type="checkbox" class="seat" aria-label="F9"><input type="checkbox" class="seat" aria-label="F10"><input type="checkbox" class="seat" aria-label="F11"><input type="checkbox" class="seat" aria-label="F12" disabled><input type="checkbox" class="seat" aria-label="F13"><input type="checkbox" class="seat" aria-label="F14"></div>
<div class="row"><span class="row-label">G</span><input type="checkbox" class="seat" aria-label="G1"><input type="checkbox" class="seat" aria-label="G2" disabled><input type="checkbox" class="seat" aria-label="G3"><input type="checkbox" class="seat" aria-label="G4"><input type="checkbox" class="seat" aria-label="G5"><input type="checkbox" class="seat" aria-label="G6"><input type="checkbox" class="seat" aria-label="G7"><input type="checkbox" class="seat" aria-label="G8"><input type="checkbox" class="seat" aria-label="G9"><input type="checkbox" class="seat" aria-label="G10"><input type="checkbox" class="seat" aria-label="G11"><input type="checkbox" class="seat" aria-label="G12"><input type="checkbox" class="seat" aria-label="G13"><input type="checkbox" class="seat" aria-label="G14"></div>
<div class="row"><span class="row-label">H</span><input type="checkbox" class="seat" aria-label="H1"><input type="checkbox" class="seat" aria-label="H2"><input type="checkbox" class="seat" aria-label="H3"><input type="checkbox" class="seat" aria-label="H4"><input type="checkbox" class="seat" aria-label="H5"><input type="checkbox" class="seat" aria-label="H6"><input type="checkbox" class="seat" aria-label="H7"><input type="checkbox" class="seat" aria-label="H8" disabled><input type="checkbox" class="seat" aria-label="H9" disabled><input type="checkbox" class="seat" aria-label="H10"><input type="checkbox" class="seat" aria-label="H11"><input type="checkbox" class="seat" aria-label="H12"><input type="checkbox" class="seat" aria-label="H13"><input type="checkbox" class="seat" aria-label="H14"></div>
<div class="row"><span class="row-label">I</span><input type="checkbox" class="seat" aria-label="I1"><input type="checkbox" class="seat" aria-label="I2"><input type="checkbox" class="seat" aria-label="I3"><input type="checkbox" class="seat" aria-label="I4"><input type="checkbox" class="seat" aria-label="I5"><input type="checkbox" class="seat" aria-label="I6"><input type="checkbox" class="seat" aria-label="I7"><input type="checkbox" class="seat" aria-label="I8"><input type="checkbox" class="seat" aria-label="I9"><input type="checkbox" class="seat" aria-label="I10"><input type="checkbox" class="seat" aria-label="I11"><input type="checkbox" class="seat" aria-label="I12"><input type="checkbox" class="seat" aria-label="I13"><input type="checkbox" class="seat" aria-label="I14" disabled></div>
<div class="row"><span class="row-label">J</span><input type="checkbox" class="seat" aria-label="J1" disabled><input type="checkbox" class="seat" aria-label="J2"><input type="checkbox" class="seat" aria-label="J3"><input type="checkbox" class="seat" aria-label="J4"><input type="checkbox" class="seat" aria-label="J5"><input type="checkbox" class="seat" aria-label="J6"><input type="checkbox" class="seat" aria-label="J7"><input type="checkbox" class="seat" aria-label="J8"><input type="checkbox" class="seat" aria-label="J9"><input type="checkbox" class="seat" aria-label="J10"><input type="checkbox" class="seat" aria-label="J11"><input type="checkbox" class="seat" aria-label="J12"><input type="checkbox" class="seat" aria-label="J13"><input type="checkbox" class="seat" aria-label="J14"></div>
<div class="row"><span class="row-label">K</span><input type="checkbox" class="seat" aria-label="K1"><input type="checkbox" class="seat" aria-label="K2"><input type="checkbox" class="seat" aria-label="K3"><input type="checkbox" class="seat" aria-label="K4"><input type="checkbox" class="seat" aria-label="K5"><input type="checkbox" class="seat" aria-label="K6" disabled><input type="checkbox" class="seat" aria-label="K7"><input type="checkbox" class="seat" aria-label="K8"><input type="checkbox" class="seat" aria-label="K9"><input type="checkbox" class="seat" aria-label="K10"><input type="checkbox" class="seat" aria-label="K11"><input type="checkbox" class="seat" aria-label="K12"><input type="checkbox" class="seat" aria-label="K13"><input type="checkbox" class="seat" aria-label="K14"></div>
<div class="row"><span class="row-label">L</span><input type="checkbox" class="seat" aria-label="L1"><input type="checkbox" class="seat" aria-label="L2"><input type="checkbox" class="seat" aria-label="L3"><input type="checkbox" class="seat" aria-label="L4"><input type="checkbox" class="seat" aria-label="L5"><input type="checkbox" class="seat" aria-label="L6"><input type="checkbox" class="seat" aria-label="L7" disabled><input type="checkbox" class="seat" aria-label="L8" disabled><input type="checkbox" class="seat" aria-label="L9"><input type="checkbox" class="seat" aria-label="L10"><input type="checkbox" class="seat" aria-label="L11"><input type="checkbox" class="seat" aria-label="L12"><input type="checkbox" class="seat" aria-label="L13"><input type="checkbox" class="seat" aria-label="L14"></div>
</div>
<div class="legend">
<span class="key"><i class="swatch avail"></i> Available</span>
<span class="key"><i class="swatch chosen"></i> Yours</span>
<span class="key"><i class="swatch gone"></i> Sold</span>
</div>
</div>
</section>
<section id="screen-b" class="screen" aria-label="Seating for Casablanca">
<div class="seatmap">
<div class="screen-arc">Screen</div>
<div class="rows">
<div class="row"><span class="row-label">A</span><input type="checkbox" class="seat" aria-label="A1" disabled><input type="checkbox" class="seat" aria-label="A2" disabled><input type="checkbox" class="seat" aria-label="A3"><input type="checkbox" class="seat" aria-label="A4"><input type="checkbox" class="seat" aria-label="A5"><input type="checkbox" class="seat" aria-label="A6"><input type="checkbox" class="seat" aria-label="A7"><input type="checkbox" class="seat" aria-label="A8"><input type="checkbox" class="seat" aria-label="A9"><input type="checkbox" class="seat" aria-label="A10"><input type="checkbox" class="seat" aria-label="A11"><input type="checkbox" class="seat" aria-label="A12"><input type="checkbox" class="seat" aria-label="A13"><input type="checkbox" class="seat" aria-label="A14"></div>
<div class="row"><span class="row-label">B</span><input type="checkbox" class="seat" aria-label="B1"><input type="checkbox" class="seat" aria-label="B2"><input type="checkbox" class="seat" aria-label="B3"><input type="checkbox" class="seat" aria-label="B4"><input type="checkbox" class="seat" aria-label="B5" disabled><input type="checkbox" class="seat" aria-label="B6"><input type="checkbox" class="seat" aria-label="B7"><input type="checkbox" class="seat" aria-label="B8"><input type="checkbox" class="seat" aria-label="B9"><input type="checkbox" class="seat" aria-label="B10"><input type="checkbox" class="seat" aria-label="B11"><input type="checkbox" class="seat" aria-label="B12"><input type="checkbox" class="seat" aria-label="B13"><input type="checkbox" class="seat" aria-label="B14"></div>
<div class="row"><span class="row-label">C</span><input type="checkbox" class="seat" aria-label="C1"><input type="checkbox" class="seat" aria-label="C2"><input type="checkbox" class="seat" aria-label="C3"><input type="checkbox" class="seat" aria-label="C4"><input type="checkbox" class="seat" aria-label="C5"><input type="checkbox" class="seat" aria-label="C6"><input type="checkbox" class="seat" aria-label="C7"><input type="checkbox" class="seat" aria-label="C8"><input type="checkbox" class="seat" aria-label="C9" disabled><input type="checkbox" class="seat" aria-label="C10"><input type="checkbox" class="seat" aria-label="C11"><input type="checkbox" class="seat" aria-label="C12"><input type="checkbox" class="seat" aria-label="C13"><input type="checkbox" class="seat" aria-label="C14"></div>
<div class="row"><span class="row-label">D</span><input type="checkbox" class="seat" aria-label="D1"><input type="checkbox" class="seat" aria-label="D2"><input type="checkbox" class="seat" aria-label="D3" disabled><input type="checkbox" class="seat" aria-label="D4" disabled><input type="checkbox" class="seat" aria-label="D5"><input type="checkbox" class="seat" aria-label="D6"><input type="checkbox" class="seat" aria-label="D7"><input type="checkbox" class="seat" aria-label="D8"><input type="checkbox" class="seat" aria-label="D9"><input type="checkbox" class="seat" aria-label="D10"><input type="checkbox" class="seat" aria-label="D11"><input type="checkbox" class="seat" aria-label="D12"><input type="checkbox" class="seat" aria-label="D13"><input type="checkbox" class="seat" aria-label="D14"></div>
<div class="row"><span class="row-label">E</span><input type="checkbox" class="seat" aria-label="E1"><input type="checkbox" class="seat" aria-label="E2"><input type="checkbox" class="seat" aria-label="E3"><input type="checkbox" class="seat" aria-label="E4"><input type="checkbox" class="seat" aria-label="E5"><input type="checkbox" class="seat" aria-label="E6"><input type="checkbox" class="seat" aria-label="E7"><input type="checkbox" class="seat" aria-label="E8"><input type="checkbox" class="seat" aria-label="E9"><input type="checkbox" class="seat" aria-label="E10"><input type="checkbox" class="seat" aria-label="E11" disabled><input type="checkbox" class="seat" aria-label="E12"><input type="checkbox" class="seat" aria-label="E13"><input type="checkbox" class="seat" aria-label="E14"></div>
<div class="row"><span class="row-label">F</span><input type="checkbox" class="seat" aria-label="F1"><input type="checkbox" class="seat" aria-label="F2"><input type="checkbox" class="seat" aria-label="F3"><input type="checkbox" class="seat" aria-label="F4"><input type="checkbox" class="seat" aria-label="F5"><input type="checkbox" class="seat" aria-label="F6"><input type="checkbox" class="seat" aria-label="F7" disabled><input type="checkbox" class="seat" aria-label="F8"><input type="checkbox" class="seat" aria-label="F9"><input type="checkbox" class="seat" aria-label="F10"><input type="checkbox" class="seat" aria-label="F11"><input type="checkbox" class="seat" aria-label="F12"><input type="checkbox" class="seat" aria-label="F13"><input type="checkbox" class="seat" aria-label="F14"></div>
<div class="row"><span class="row-label">G</span><input type="checkbox" class="seat" aria-label="G1" disabled><input type="checkbox" class="seat" aria-label="G2"><input type="checkbox" class="seat" aria-label="G3"><input type="checkbox" class="seat" aria-label="G4"><input type="checkbox" class="seat" aria-label="G5"><input type="checkbox" class="seat" aria-label="G6"><input type="checkbox" class="seat" aria-label="G7"><input type="checkbox" class="seat" aria-label="G8"><input type="checkbox" class="seat" aria-label="G9"><input type="checkbox" class="seat" aria-label="G10"><input type="checkbox" class="seat" aria-label="G11"><input type="checkbox" class="seat" aria-label="G12"><input type="checkbox" class="seat" aria-label="G13"><input type="checkbox" class="seat" aria-label="G14" disabled></div>
<div class="row"><span class="row-label">H</span><input type="checkbox" class="seat" aria-label="H1"><input type="checkbox" class="seat" aria-label="H2"><input type="checkbox" class="seat" aria-label="H3"><input type="checkbox" class="seat" aria-label="H4"><input type="checkbox" class="seat" aria-label="H5"><input type="checkbox" class="seat" aria-label="H6" disabled><input type="checkbox" class="seat" aria-label="H7"><input type="checkbox" class="seat" aria-label="H8"><input type="checkbox" class="seat" aria-label="H9"><input type="checkbox" class="seat" aria-label="H10"><input type="checkbox" class="seat" aria-label="H11"><input type="checkbox" class="seat" aria-label="H12"><input type="checkbox" class="seat" aria-label="H13"><input type="checkbox" class="seat" aria-label="H14"></div>
<div class="row"><span class="row-label">I</span><input type="checkbox" class="seat" aria-label="I1"><input type="checkbox" class="seat" aria-label="I2" disabled><input type="checkbox" class="seat" aria-label="I3" disabled><input type="checkbox" class="seat" aria-label="I4"><input type="checkbox" class="seat" aria-label="I5"><input type="checkbox" class="seat" aria-label="I6"><input type="checkbox" class="seat" aria-label="I7"><input type="checkbox" class="seat" aria-label="I8"><input type="checkbox" class="seat" aria-label="I9"><input type="checkbox" class="seat" aria-label="I10"><input type="checkbox" class="seat" aria-label="I11"><input type="checkbox" class="seat" aria-label="I12"><input type="checkbox" class="seat" aria-label="I13"><input type="checkbox" class="seat" aria-label="I14"></div>
<div class="row"><span class="row-label">J</span><input type="checkbox" class="seat" aria-label="J1"><input type="checkbox" class="seat" aria-label="J2"><input type="checkbox" class="seat" aria-label="J3"><input type="checkbox" class="seat" aria-label="J4"><input type="checkbox" class="seat" aria-label="J5"><input type="checkbox" class="seat" aria-label="J6"><input type="checkbox" class="seat" aria-label="J7"><input type="checkbox" class="seat" aria-label="J8"><input type="checkbox" class="seat" aria-label="J9" disabled><input type="checkbox" class="seat" aria-label="J10"><input type="checkbox" class="seat" aria-label="J11"><input type="checkbox" class="seat" aria-label="J12"><input type="checkbox" class="seat" aria-label="J13"><input type="checkbox" class="seat" aria-label="J14"></div>
<div class="row"><span class="row-label">K</span><input type="checkbox" class="seat" aria-label="K1"><input type="checkbox" class="seat" aria-label="K2"><input type="checkbox" class="seat" aria-label="K3"><input type="checkbox" class="seat" aria-label="K4"><input type="checkbox" class="seat" aria-label="K5"><input type="checkbox" class="seat" aria-label="K6"><input type="checkbox" class="seat" aria-label="K7"><input type="checkbox" class="seat" aria-label="K8"><input type="checkbox" class="seat" aria-label="K9"><input type="checkbox" class="seat" aria-label="K10"><input type="checkbox" class="seat" aria-label="K11"><input type="checkbox" class="seat" aria-label="K12" disabled><input type="checkbox" class="seat" aria-label="K13"><input type="checkbox" class="seat" aria-label="K14"></div>
<div class="row"><span class="row-label">L</span><input type="checkbox" class="seat" aria-label="L1"><input type="checkbox" class="seat" aria-label="L2"><input type="checkbox" class="seat" aria-label="L3"><input type="checkbox" class="seat" aria-label="L4"><input type="checkbox" class="seat" aria-label="L5" disabled><input type="checkbox" class="seat" aria-label="L6" disabled><input type="checkbox" class="seat" aria-label="L7"><input type="checkbox" class="seat" aria-label="L8"><input type="checkbox" class="seat" aria-label="L9"><input type="checkbox" class="seat" aria-label="L10"><input type="checkbox" class="seat" aria-label="L11"><input type="checkbox" class="seat" aria-label="L12"><input type="checkbox" class="seat" aria-label="L13"><input type="checkbox" class="seat" aria-label="L14"></div>
</div>
<div class="legend">
<span class="key"><i class="swatch avail"></i> Available</span>
<span class="key"><i class="swatch chosen"></i> Yours</span>
<span class="key"><i class="swatch gone"></i> Sold</span>
</div>
</div>
</section>
<footer class="foot">
<p>All prices in US dollars. The euro figure is indicative at €0.92 per $1.00, fixed when this page was built — it is not a live market rate.</p>
</footer>
</main>
<aside class="basket" aria-label="Basket" aria-live="polite">
<div class="basket-top">
<svg class="basket-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 8h16l-1.4 11.2A2 2 0 0 1 16.6 21H7.4a2 2 0 0 1-2-1.8L4 8z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M8.5 8V6.4a3.5 3.5 0 0 1 7 0V8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="badge">
<span class="badge-num nojs-only"></span>
<span class="badge-num js-only">0</span>
</span>
</div>
<div class="basket-figures">
<div class="total">
<span class="total-num nojs-only"></span>
<span class="total-num js-only">$0.00</span>
</div>
<div class="eur">
<span class="eur-num nojs-only"></span>
<span class="eur-num js-only">≈ €0.00</span>
</div>
<div class="eur-rate">@ €0.92 / $1</div>
</div>
</aside>
<script>
(function () {
var root = document.documentElement;
root.classList.add('js');
var RATE = 0.92;
var FULL_PRICE = 11.5;
var FULL_SEATS = 5;
var DISCOUNT_PRICE = 8.0;
var screens = {
a: document.getElementById('screen-a'),
b: document.getElementById('screen-b')
};
var radios = document.querySelectorAll('input[name="film"]');
var badge = document.querySelector('.badge-num.js-only');
var totalEl = document.querySelector('.total-num.js-only');
var eurEl = document.querySelector('.eur-num.js-only');
function activeFilm() {
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) return radios[i].value;
}
return 'a';
}
function seatCount() {
return screens[activeFilm()].querySelectorAll('.seat:checked').length;
}
function priceFor(n) {
var full = Math.min(n, FULL_SEATS);
var extra = Math.max(0, n - FULL_SEATS);
return full * FULL_PRICE + extra * DISCOUNT_PRICE;
}
var shown = 0;
var raf = null;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function paint() {
totalEl.textContent = '$' + shown.toFixed(2);
eurEl.textContent = '≈ €' + (shown * RATE).toFixed(2);
}
function animateTo(target) {
if (raf) { cancelAnimationFrame(raf); raf = null; }
if (reduce || Math.abs(target - shown) < 0.005) {
shown = target;
paint();
return;
}
var from = shown;
var delta = target - from;
var start = null;
var duration = 420;
function step(now) {
if (start === null) start = now;
var p = Math.min(1, (now - start) / duration);
var eased = 1 - Math.pow(1 - p, 3);
shown = from + delta * eased;
paint();
if (p < 1) {
raf = requestAnimationFrame(step);
} else {
shown = target;
paint();
raf = null;
}
}
raf = requestAnimationFrame(step);
}
function update() {
var n = seatCount();
badge.textContent = String(n);
animateTo(priceFor(n));
}
document.addEventListener('change', function (e) {
var t = e.target;
if (!t) return;
if (t.classList.contains('seat') || t.name === 'film') update();
});
update();
})();
</script>
</body>
</html>
The page keeps everything on one screen, so picking a film and seats feels immediate.
Optimization Tip: You can update the euro rate by changing RATE in the script and the matching price-eur ladder. To adjust seat prices, edit FULL_PRICE, FULL_SEATS, and DISCOUNT_PRICE in the script, then update the price-usd ladder.