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.
<!DOCTYPE html>
<!--
IMPORTANT NOTES FOR THE OWNER — PLEASE READ BEFORE FRIDAY
1. BADGE: SINGLE DIGIT vs. "12"
You asked for (a) a small one-digit circle that must never show more
than one digit, and (b) a badge that must read "12" for school bookings.
Both cannot be true at once. I chose the school booking: the badge is a
circle for 0-9, then stretches into a small pill/oval for 10+.
That means it will NOT exactly match the printed lobby board for 10+
seats. I recommend reprinting the board with a pill-shaped badge.
2. LIVE EURO RATE vs. NO NETWORK
You asked for a live market euro rate, but also said the machine has
no internet and the page must make no network calls at runtime.
A live rate is therefore impossible on that machine.
Below is a hard-coded INDICATIVE rate (EUR_RATE in the script, and
printed beside the total). It is labelled "indicative, not live".
Someone must edit that number by hand to update it. If you want a
truly live rate, this page would need internet access and permission
to call an external exchange-rate service.
3. WORKS WITHOUT JAVASCRIPT vs. ANIMATED COUNT-UP TOTAL
An animated, automatically updating total requires JavaScript.
Without JavaScript: film choice (radio buttons), seat choice
(real checkboxes), sold seats (disabled checkboxes), the badge
count (CSS counter, see <noscript> styles), and the Book button
all still work, and per-seat prices are shown. The animated total
and euro conversion do not run — the noscript note tells the
customer the total will be confirmed at the till.
With JavaScript: the total counts up smoothly and the euro
conversion appears automatically.
4. ONE SHARED SEATING PLAN
To keep the no-JavaScript version working in one self-contained
file, all showings share one seating plan and one set of sold seats.
If each showing needs a different sold-seat pattern, that needs
either JavaScript or a separate page/form per showing.
5. NO PAYMENT / NO BACKEND
This is one front-end file only. The Book button submits the chosen
film/time and seats as a normal form (visible in the address bar as
a query string) and, with JavaScript on, shows a summary. It does
not take payment or reserve seats on a server.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Grand Cinema — Tonight's Tickets</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#2a0d10;color:#2b1608;font-family:Georgia,'Times New Roman',serif;
background-image:radial-gradient(circle at 50% -10%,#6d1a20,#2a0d10 55%)}
.wrap{max-width:980px;margin:0 auto;padding:18px 16px 40px}
header{position:relative;text-align:center;color:#f7e7bd;padding:26px 50px 18px;border-bottom:3px double #c9a227}
header h1{margin:0;font-size:clamp(30px,6vw,54px);letter-spacing:.06em;text-transform:uppercase;color:#e9c766;text-shadow:0 2px 0 #5c1116}
header p{margin:6px 0 0;font-style:italic;color:#f3d99b}
.marquee{color:#fff3cf}
main{background:#fff8e7;border:2px solid #c9a227;border-radius:10px;padding:20px;margin-top:18px;box-shadow:0 12px 35px rgba(0,0,0,.45)}
h2{color:#7f1d1d;border-bottom:1px solid #d8b64f;padding-bottom:6px;margin:22px 0 12px}
h2:first-child{margin-top:0}
.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.film{display:block;cursor:pointer}
.film input{position:absolute;opacity:0}
.card{height:100%;border:2px solid #a67c1b;border-radius:8px;padding:14px;background:#fffdf4}
.film input:checked+.card{background:#7f1d1d;color:#ffeec0;border-color:#e9c766;box-shadow:0 0 0 3px #e9c766 inset}
.film input:focus-visible+.card{outline:3px solid #2563eb;outline-offset:2px}
.card b{font-size:19px;display:block}.card span{display:block;margin-top:5px}.price{font-weight:bold;color:#7f1d1d}.film input:checked+.card .price{color:#ffeec0}
.screen{margin:18px auto 8px;max-width:620px;text-align:center;background:#7f1d1d;color:#ffe9a8;border-radius:50% 50% 8px 8px;padding:10px;font-variant:small-caps;letter-spacing:.25em}
.hint{text-align:center;font-style:italic;color:#6b4a12}
.rows{display:grid;gap:7px;justify-content:center;overflow-x:auto;padding:8px 0}
.row{display:flex;gap:6px;align-items:center;white-space:nowrap}
.row>b{width:20px;text-align:center;color:#7f1d1d}
.aisle{width:22px}
.s{position:relative;display:inline-block;cursor:pointer}
.s input{position:absolute;inset:0;opacity:0;cursor:pointer}
.s span{display:flex;width:34px;height:30px;align-items:center;justify-content:center;border:1px solid #a67c1b;border-bottom:4px solid #a67c1b;border-radius:6px 6px 3px 3px;background:#fdf0bd;font-size:13px}
.s input:checked+span{background:#c9a227;color:#fff;border-color:#7f1d1d;font-weight:bold}
.s input:focus-visible+span{outline:3px solid #2563eb;outline-offset:1px}
.s input:disabled{cursor:not-allowed}
.s input:disabled+span{background:#4b3436;color:#cbb;background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(255,255,255,.18) 5px 7px);border-color:#332;text-decoration:line-through}
.legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:14px}.sw{display:inline-block;width:18px;height:14px;vertical-align:-2px;margin-right:5px;border:1px solid #a67c1b}.free{background:#fdf0bd}.picked{background:#c9a227}.sold{background:#4b3436}
.basket{position:fixed;top:14px;right:14px;z-index:10;background:#fff8e7;border:2px solid #c9a227;border-radius:999px;padding:9px 13px;box-shadow:0 4px 16px rgba(0,0,0,.4);font-weight:bold;color:#7f1d1d}
/* Badge: circle for 1 digit, pill for 2+ — see note 1 at top */
#badge{display:inline-flex;min-width:28px;height:28px;padding:0 6px;margin-left:7px;align-items:center;justify-content:center;border-radius:999px;background:#b91c1c;color:#fff;font-size:14px;vertical-align:middle}
.total{margin-top:20px;background:#3d1114;color:#ffeec0;border-radius:8px;padding:16px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
#total{font-size:30px;color:#e9c766;font-weight:bold}
button{background:#b91c1c;color:#fff;border:2px solid #e9c766;border-radius:999px;padding:12px 24px;font:inherit;font-weight:bold;cursor:pointer;font-size:17px}
button:hover{background:#991b1b}
#summary{font-weight:bold;color:#14532d}
footer{text-align:center;color:#e8cf8f;font-style:italic;padding:16px}
</style>
<noscript><style>
form{counter-reset:picked}
input[name="seat"]:checked{counter-increment:picked}
#badgeVal{font-size:0}
#badgeVal::after{content:counter(picked);font-size:14px}
</style></noscript>
</head>
<body>
<div class="wrap">
<header>
<div class="marquee">★ ★ ★</div>
<h1>Grand Cinema</h1>
<p>Tonight's programme — two screens, one box office</p>
</header>
<main>
<form method="get" action="#">
<h2>1. Pick a film & time</h2>
<div class="films">
<label class="film"><input type="radio" name="showing" value="The Golden Hour - 4:40pm" data-price="8" checked>
<span class="card"><b>The Golden Hour</b><span>Screen 1 · Today 4:40 pm</span><span class="price">$8.00 — before 5 pm</span></span></label>
<label class="film"><input type="radio" name="showing" value="The Golden Hour - 8:10pm" data-price="11.50">
<span class="card"><b>The Golden Hour</b><span>Screen 1 · Today 8:10 pm</span><span class="price">$11.50 — after 5 pm</span></span></label>
<label class="film"><input type="radio" name="showing" value="Midnight at the Majestic - 5:20pm" data-price="11.50">
<span class="card"><b>Midnight at the Majestic</b><span>Screen 2 · Today 5:20 pm</span><span class="price">$11.50 — after 5 pm</span></span></label>
<label class="film"><input type="radio" name="showing" value="Midnight at the Majestic - 2:30pm" data-price="8">
<span class="card"><b>Midnight at the Majestic</b><span>Screen 2 · Today 2:30 pm</span><span class="price">$8.00 — before 5 pm</span></span></label>
</div>
<h2>2. Pick your seats</h2>
<div class="screen">Screen</div>
<p class="hint">12 rows (A–L), 14 seats per row. Crossed-out seats are already sold.</p>
<div class="rows" role="group" aria-label="Seating plan">
<div class="row"><b>A</b><label class="s"><input type="checkbox" name="seat" value="A1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="A2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="A3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="A4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="A5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="A6" disabled><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="A7" disabled><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="A8"><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="A9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="A10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="A11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="A12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="A13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="A14"><span>14</span></label><b>A</b></div>
<div class="row"><b>B</b><label class="s"><input type="checkbox" name="seat" value="B1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="B2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="B3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="B4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="B5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="B6" disabled><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="B7" disabled><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="B8" disabled><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="B9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="B10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="B11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="B12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="B13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="B14"><span>14</span></label><b>B</b></div>
<div class="row"><b>C</b><label class="s"><input type="checkbox" name="seat" value="C1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="C2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="C3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="C4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="C5" disabled><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="C6" disabled><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="C7"><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="C8"><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="C9" disabled><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="C10" disabled><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="C11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="C12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="C13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="C14"><span>14</span></label><b>C</b></div>
<div class="row"><b>D</b><label class="s"><input type="checkbox" name="seat" value="D1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="D2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="D3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="D4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="D5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="D6"><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="D7" disabled><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="D8" disabled><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="D9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="D10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="D11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="D12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="D13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="D14"><span>14</span></label><b>D</b></div>
<div class="row"><b>E</b><label class="s"><input type="checkbox" name="seat" value="E1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="E2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="E3" disabled><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="E4" disabled><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="E5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="E6"><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="E7"><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="E8"><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="E9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="E10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="E11" disabled><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="E12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="E13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="E14"><span>14</span></label><b>E</b></div>
<div class="row"><b>F</b><label class="s"><input type="checkbox" name="seat" value="F1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="F2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="F3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="F4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="F5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="F6"><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="F7" disabled><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="F8" disabled><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="F9" disabled><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="F10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="F11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="F12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="F13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="F14"><span>14</span></label><b>F</b></div>
<div class="row"><b>G</b><label class="s"><input type="checkbox" name="seat" value="G1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="G2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="G3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="G4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="G5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="G6" disabled><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="G7" disabled><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="G8"><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="G9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="G10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="G11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="G12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="G13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="G14"><span>14</span></label><b>G</b></div>
<div class="row"><b>H</b><label class="s"><input type="checkbox" name="seat" value="H1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="H2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="H3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="H4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="H5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="H6"><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="H7"><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="H8"><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="H9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="H10" disabled><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="H11" disabled><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="H12" disabled><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="H13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="H14"><span>14</span></label><b>H</b></div>
<div class="row"><b>I</b><label class="s"><input type="checkbox" name="seat" value="I1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="I2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="I3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="I4" disabled><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="I5" disabled><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="I6"><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="I7"><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="I8"><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="I9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="I10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="I11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="I12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="I13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="I14"><span>14</span></label><b>I</b></div>
<div class="row"><b>J</b><label class="s"><input type="checkbox" name="seat" value="J1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="J2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="J3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="J4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="J5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="J6"><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="J7" disabled><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="J8" disabled><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="J9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="J10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="J11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="J12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="J13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="J14"><span>14</span></label><b>J</b></div>
<div class="row"><b>K</b><label class="s"><input type="checkbox" name="seat" value="K1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="K2" disabled><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="K3" disabled><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="K4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="K5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="K6"><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="K7"><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="K8"><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="K9"><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="K10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="K11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="K12" disabled><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="K13" disabled><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="K14"><span>14</span></label><b>K</b></div>
<div class="row"><b>L</b><label class="s"><input type="checkbox" name="seat" value="L1"><span>1</span></label><label class="s"><input type="checkbox" name="seat" value="L2"><span>2</span></label><label class="s"><input type="checkbox" name="seat" value="L3"><span>3</span></label><label class="s"><input type="checkbox" name="seat" value="L4"><span>4</span></label><label class="s"><input type="checkbox" name="seat" value="L5"><span>5</span></label><label class="s"><input type="checkbox" name="seat" value="L6" disabled><span>6</span></label><label class="s"><input type="checkbox" name="seat" value="L7" disabled><span>7</span></label><span class="aisle"></span><label class="s"><input type="checkbox" name="seat" value="L8" disabled><span>8</span></label><label class="s"><input type="checkbox" name="seat" value="L9" disabled><span>9</span></label><label class="s"><input type="checkbox" name="seat" value="L10"><span>10</span></label><label class="s"><input type="checkbox" name="seat" value="L11"><span>11</span></label><label class="s"><input type="checkbox" name="seat" value="L12"><span>12</span></label><label class="s"><input type="checkbox" name="seat" value="L13"><span>13</span></label><label class="s"><input type="checkbox" name="seat" value="L14"><span>14</span></label><b>L</b></div>
</div>
<p class="legend"><span><i class="sw free"></i>Free</span><span><i class="sw picked"></i>Your pick</span><span><i class="sw sold"></i>Sold</span></p>
<!-- Basket is after the seats in the document so the no-JS CSS counter can count them; it is positioned top-right -->
<div class="basket" aria-label="Basket">🧺 Basket <span id="badge"><span id="badgeVal">0</span></span></div>
<div class="total" aria-live="polite">
<div>Total<br><span id="total">$0.00</span></div>
<div id="euro">€0.00<br><small>Indicative only — $1 ≈ €0.92, not a live rate.<br>Update EUR_RATE in the script by hand.</small></div>
<button type="submit">Book seats</button>
</div>
<p id="summary" aria-live="polite"></p>
<noscript><p><strong>JavaScript is off:</strong> you can still pick a film and seats and press “Book seats”. Prices are $8.00 before 5 pm / $11.50 after 5 pm per seat — your total will be confirmed at the till. The animated total and euro conversion need JavaScript.</p></noscript>
</form>
</main>
<footer>Warm seats, cold drinks, please silence your phones.</footer>
</div>
<script>
(function(){
var EUR_RATE = 0.92; // <-- EDIT BY HAND: indicative euros per dollar. NOT live (offline machine).
var form = document.querySelector('form');
var badgeVal = document.getElementById('badgeVal');
var totalEl = document.getElementById('total');
var euroEl = document.getElementById('euro');
var summary = document.getElementById('summary');
var shown = 0, anim = null;
function money(n){ return '$' + n.toFixed(2); }
function animateTo(target){
if (anim) cancelAnimationFrame(anim);
var from = shown, start = null;
function step(ts){
if (!start) start = ts;
var p = Math.min(1, (ts - start) / 600), e = 1 - Math.pow(1 - p, 3);
shown = from + (target - from) * e;
totalEl.textContent = money(shown);
if (p < 1) anim = requestAnimationFrame(step); else shown = target;
}
anim = requestAnimationFrame(step);
}
function update(){
var showing = form.querySelector('input[name="showing"]:checked');
var price = showing ? parseFloat(showing.getAttribute('data-price')) : 0;
var seats = form.querySelectorAll('input[name="seat"]:checked');
var total = seats.length * price;
badgeVal.textContent = seats.length; // full number, e.g. 12 — badge stretches to a pill
animateTo(total);
euroEl.innerHTML = '€' + (total * EUR_RATE).toFixed(2) +
'<br><small>Indicative only — $1 ≈ €' + EUR_RATE.toFixed(2) + ', not a live rate.<br>Update EUR_RATE in the script by hand.</small>';
}
form.addEventListener('change', update);
form.addEventListener('submit', function(ev){
var showing = form.querySelector('input[name="showing"]:checked');
var seats = Array.prototype.map.call(form.querySelectorAll('input[name="seat"]:checked'), function(i){ return i.value; });
if (!seats.length) { ev.preventDefault(); summary.textContent = 'Please pick at least one seat.'; return; }
// With JS on, show a summary instead of reloading; remove preventDefault if you later add a real booking server.
ev.preventDefault();
summary.textContent = 'Ready to book: ' + (showing ? showing.value : '') + ' — seats ' + seats.join(', ') + ' (' + seats.length + ' seats). Total ' + totalEl.textContent + '.';
});
update();
})();
</script>
</body>
</html>