Run Detail
completedgpt-6.1-terraRecorded for these videos
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
Provider
openrouter
Challenge Version
v1.0
Turns
1
Duration
Batched — not timed
Total Tokens
11,965
Input Tokens
568
Output Tokens
11,397
Reasoning Tokens
1,481
Reasoning Effort
default
Est. Cost
$0.0288
Started
10/26/2026, 6:32:37 PM
OR Provider
OpenAI
Finish Reason
stop
Generation ID
gen-batch-1793039557-0d4868712db81753ad41
Turns (1)
Turn #1
568 in11,397 out1,481 reasoning11,965 total
user
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.
What it needs to do
- One page. Tonight's two films, with their times.
- The customer picks a film, then picks seats off a seating plan. Twelve rows, fourteen seats to a row.
- Some seats are already sold. Show those as gone, and don't let anyone pick them.
- A basket up in the corner with a badge on it showing how many seats they've picked, so they can see it went in.
- Running total in dollars. $11.50 after five, $8.00 before.
- We get a lot of tourists. Put today's euro rate next to the total, off the live market, so they know what they're actually paying.
- It has to work with JavaScript switched off. My sister's laptop has it off and she couldn't use the old site at all.
- When the total changes I want it to count up to the new number. Smooth, not a jump.
- Make it look like a cinema. Warm, a bit old-fashioned, red and gold. Not corporate.
The look
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.
The technical bits my nephew told me to write down
- One file. Everything inline — no CDN, no external stylesheet, font, script or image.
data:URIs are fine. - No network at runtime. The machine it runs on is not on the internet.
- No
localStorage,sessionStorage, cookies orindexedDB— it runs in a sandboxed frame where those throw. - Send it back as exactly one fenced
htmlblock.
P.S.
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.
assistant
<!--
IMPORTANT BEFORE USE
This is an offline seating-page prototype, not a ticket-selling system.
The film titles, showtimes and sold seats are examples. They must be
replaced with your cinema's real data before anyone relies on them.
An offline file cannot fetch a live euro exchange rate. No rate is shown
rather than presenting an old or invented rate as live.
A static file cannot take payment, reserve seats, share sales between
devices, or prevent two customers buying the same seat. Those functions
need a connected booking system with an authoritative seat inventory.
With JavaScript off, the film and seat controls and the seat-count badge
still work. The dollar total cannot update automatically in this static
file without JavaScript; the ticket price is shown for manual calculation.
The requirement for a strictly single-digit circle conflicts with the
requirement to show 12. The badge below shows the exact count and widens
when necessary. The printed design will need to accommodate that change.
Both example showtimes are after 5 p.m., so both use the $11.50 price.
If you change a showtime, also update its displayed price and data-price.
This example treats 5:00 p.m. itself as the evening price.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tonight at the Cinema</title>
<style>
:root {
color-scheme: dark;
font-family: Georgia, "Times New Roman", serif;
background: #19090b;
color: #f8eaca;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: linear-gradient(135deg, #22090d, #44101a 50%, #19090b);
min-height: 100vh;
}
.masthead {
padding: 2.2rem 6rem 2rem 1.4rem;
text-align: center;
border-bottom: 3px double #d4aa60;
background: #300a12;
}
.eyebrow {
margin: 0;
color: #e0bb78;
text-transform: uppercase;
letter-spacing: .22em;
font-size: .75rem;
}
h1 {
margin: .45rem 0;
color: #fff2d4;
font-size: clamp(2rem, 6vw, 3.8rem);
font-weight: normal;
}
.subtitle { margin: 0; color: #e0c99f; }
main { max-width: 900px; margin: auto; padding: 1.5rem 1rem 4rem; }
.notice {
border: 1px solid #aa8248;
background: #35161a;
padding: .9rem 1rem;
line-height: 1.5;
}
fieldset { border: 0; margin: 1.8rem 0 0; padding: 0; min-width: 0; }
legend, h2 {
color: #f1d394;
font-size: 1.45rem;
margin: 0 0 .8rem;
}
.films { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.film {
display: flex;
gap: .8rem;
align-items: flex-start;
padding: 1rem;
border: 1px solid #9b7040;
background: #2d1014;
cursor: pointer;
}
.film:has(input:checked) {
border-color: #f3cf7b;
box-shadow: inset 0 0 0 1px #f3cf7b;
}
.film input { accent-color: #d4aa60; margin-top: .3rem; }
.film strong { display: block; color: #fff2d4; font-size: 1.15rem; }
.film small { display: block; margin-top: .35rem; color: #dec69b; }
.hint { color: #dec69b; line-height: 1.5; }
.plan-wrap { overflow-x: auto; padding-bottom: .5rem; }
.plan { min-width: 590px; max-width: 720px; margin: auto; }
.screen {
margin: 1rem 2rem 1.4rem;
padding: .4rem;
text-align: center;
color: #e6c98b;
border-top: 3px solid #d3b171;
border-radius: 50% 50% 0 0;
letter-spacing: .2em;
font-size: .75rem;
}
.row {
display: grid;
grid-template-columns: 1.5rem repeat(14, minmax(0, 1fr));
gap: .3rem;
align-items: center;
margin: .35rem 0;
}
.row-name { text-align: center; color: #e5c58a; font-weight: bold; }
.seat { position: relative; cursor: pointer; }
.seat input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.seat span {
display: grid;
place-items: center;
min-height: 2rem;
border: 1px solid #d2a45e;
border-radius: .4rem .4rem .2rem .2rem;
background: #741b2a;
color: #fff2d4;
font: .75rem Arial, sans-serif;
}
.seat input:checked + span {
background: #e4bd6c;
color: #25100a;
border-color: #ffe1a0;
}
.seat input:disabled + span {
background: #302a2a;
border-color: #5b5050;
color: #a69a96;
text-decoration: line-through;
cursor: not-allowed;
}
.seat input:focus-visible + span,
input:focus-visible, button:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
.key { display: flex; flex-wrap: wrap; gap: 1rem; color: #dec69b; font-size: .9rem; }
.swatch { display: inline-block; width: .9rem; height: .9rem; margin-right: .3rem; border: 1px solid #d2a45e; vertical-align: -.1rem; }
.available { background: #741b2a; }
.selected { background: #e4bd6c; }
.gone { background: #302a2a; border-color: #5b5050; }
form { counter-reset: seats; }
.seat input:checked { counter-increment: seats; }
.basket {
position: absolute;
top: 1rem;
right: 1rem;
text-align: center;
color: #f0d092;
font: .7rem Arial, sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
}
.badge {
display: grid;
place-items: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 .45rem;
margin: 0 auto .3rem;
border: 2px solid #e2bd72;
border-radius: 999px;
background: #671421;
color: white;
font: bold 1rem Arial, sans-serif;
}
.badge::after { content: counter(seats); }
.summary {
margin-top: 2rem;
padding: 1.2rem;
background: #2d1014;
border: 1px solid #a47a45;
}
.total { font-size: 1.4rem; color: #fff2d4; }
.rate { color: #dec69b; }
button {
border: 1px solid #d5ad69;
background: #611522;
color: #fff2d4;
padding: .7rem 1rem;
font: inherit;
cursor: pointer;
}
button:hover { background: #812036; }
@media (max-width: 520px) {
.films { grid-template-columns: 1fr; }
.masthead { text-align: left; }
}
</style>
</head>
<body>
<header class="masthead">
<p class="eyebrow">An evening at the pictures</p>
<h1>Tonight at the Cinema</h1>
<p class="subtitle">Choose a film, then find your favourite seats.</p>
</header>
<main>
<p class="notice">
<strong>Example page only:</strong> films, times and sold seats are
placeholders. Selections are not reservations and no payment is taken.
</p>
<form id="tickets">
<fieldset>
<legend>1. Choose your film</legend>
<div class="films">
<label class="film">
<input type="radio" name="film" value="the-grand-adventure" data-price="1150">
<span>
<strong>The Grand Adventure</strong>
<small>Screen 1 · 7:00 p.m. · $11.50 per seat</small>
</span>
</label>
<label class="film">
<input type="radio" name="film" value="moonlight-express" data-price="1150">
<span>
<strong>Moonlight Express</strong>
<small>Screen 2 · 9:15 p.m. · $11.50 per seat</small>
</span>
</label>
</div>
<p class="hint">
Seats selected below stay selected if you change films. In this
example, both films use the same placeholder sold-seat pattern.
</p>
</fieldset>
<fieldset>
<legend>2. Pick your seats</legend>
<p class="hint">Choose as many available seats as you need.</p>
<div class="key" aria-label="Seat key">
<span><i class="swatch available"></i>Available</span>
<span><i class="swatch selected"></i>Selected</span>
<span><i class="swatch gone"></i>Sold</span>
</div>
<div class="plan-wrap">
<div class="plan">
<div class="screen">SCREEN</div>
<div class="row"><span class="row-name">A</span>
<label class="seat"><input type="checkbox" name="seat" value="A1" aria-label="Row A, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A2" aria-label="Row A, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A3" aria-label="Row A, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A4" aria-label="Row A, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A5" aria-label="Row A, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A6" aria-label="Row A, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A7" aria-label="Row A, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A8" aria-label="Row A, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A9" aria-label="Row A, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A10" aria-label="Row A, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A11" aria-label="Row A, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A12" aria-label="Row A, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A13" aria-label="Row A, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="A14" aria-label="Row A, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">B</span>
<label class="seat"><input type="checkbox" name="seat" value="B1" aria-label="Row B, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B2" aria-label="Row B, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B3" aria-label="Row B, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B4" aria-label="Row B, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B5" aria-label="Row B, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B6" aria-label="Row B, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B7" aria-label="Row B, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B8" aria-label="Row B, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B9" aria-label="Row B, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B10" aria-label="Row B, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B11" aria-label="Row B, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B12" aria-label="Row B, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B13" aria-label="Row B, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="B14" aria-label="Row B, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">C</span>
<label class="seat"><input type="checkbox" name="seat" value="C1" aria-label="Row C, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C2" aria-label="Row C, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C3" aria-label="Row C, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C4" aria-label="Row C, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C5" aria-label="Row C, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C6" aria-label="Row C, seat 6, sold" disabled><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C7" aria-label="Row C, seat 7, sold" disabled><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C8" aria-label="Row C, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C9" aria-label="Row C, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C10" aria-label="Row C, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C11" aria-label="Row C, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C12" aria-label="Row C, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C13" aria-label="Row C, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="C14" aria-label="Row C, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">D</span>
<label class="seat"><input type="checkbox" name="seat" value="D1" aria-label="Row D, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D2" aria-label="Row D, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D3" aria-label="Row D, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D4" aria-label="Row D, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D5" aria-label="Row D, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D6" aria-label="Row D, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D7" aria-label="Row D, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D8" aria-label="Row D, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D9" aria-label="Row D, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D10" aria-label="Row D, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D11" aria-label="Row D, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D12" aria-label="Row D, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D13" aria-label="Row D, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="D14" aria-label="Row D, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">E</span>
<label class="seat"><input type="checkbox" name="seat" value="E1" aria-label="Row E, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E2" aria-label="Row E, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E3" aria-label="Row E, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E4" aria-label="Row E, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E5" aria-label="Row E, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E6" aria-label="Row E, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E7" aria-label="Row E, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E8" aria-label="Row E, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E9" aria-label="Row E, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E10" aria-label="Row E, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E11" aria-label="Row E, seat 11, sold" disabled><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E12" aria-label="Row E, seat 12, sold" disabled><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E13" aria-label="Row E, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="E14" aria-label="Row E, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">F</span>
<label class="seat"><input type="checkbox" name="seat" value="F1" aria-label="Row F, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F2" aria-label="Row F, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F3" aria-label="Row F, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F4" aria-label="Row F, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F5" aria-label="Row F, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F6" aria-label="Row F, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F7" aria-label="Row F, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F8" aria-label="Row F, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F9" aria-label="Row F, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F10" aria-label="Row F, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F11" aria-label="Row F, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F12" aria-label="Row F, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F13" aria-label="Row F, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="F14" aria-label="Row F, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">G</span>
<label class="seat"><input type="checkbox" name="seat" value="G1" aria-label="Row G, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G2" aria-label="Row G, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G3" aria-label="Row G, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G4" aria-label="Row G, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G5" aria-label="Row G, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G6" aria-label="Row G, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G7" aria-label="Row G, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G8" aria-label="Row G, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G9" aria-label="Row G, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G10" aria-label="Row G, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G11" aria-label="Row G, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G12" aria-label="Row G, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G13" aria-label="Row G, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="G14" aria-label="Row G, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">H</span>
<label class="seat"><input type="checkbox" name="seat" value="H1" aria-label="Row H, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H2" aria-label="Row H, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H3" aria-label="Row H, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H4" aria-label="Row H, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H5" aria-label="Row H, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H6" aria-label="Row H, seat 6, sold" disabled><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H7" aria-label="Row H, seat 7, sold" disabled><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H8" aria-label="Row H, seat 8, sold" disabled><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H9" aria-label="Row H, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H10" aria-label="Row H, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H11" aria-label="Row H, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H12" aria-label="Row H, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H13" aria-label="Row H, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="H14" aria-label="Row H, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">I</span>
<label class="seat"><input type="checkbox" name="seat" value="I1" aria-label="Row I, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I2" aria-label="Row I, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I3" aria-label="Row I, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I4" aria-label="Row I, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I5" aria-label="Row I, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I6" aria-label="Row I, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I7" aria-label="Row I, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I8" aria-label="Row I, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I9" aria-label="Row I, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I10" aria-label="Row I, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I11" aria-label="Row I, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I12" aria-label="Row I, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I13" aria-label="Row I, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="I14" aria-label="Row I, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">J</span>
<label class="seat"><input type="checkbox" name="seat" value="J1" aria-label="Row J, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J2" aria-label="Row J, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J3" aria-label="Row J, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J4" aria-label="Row J, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J5" aria-label="Row J, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J6" aria-label="Row J, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J7" aria-label="Row J, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J8" aria-label="Row J, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J9" aria-label="Row J, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J10" aria-label="Row J, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J11" aria-label="Row J, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J12" aria-label="Row J, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J13" aria-label="Row J, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="J14" aria-label="Row J, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">K</span>
<label class="seat"><input type="checkbox" name="seat" value="K1" aria-label="Row K, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K2" aria-label="Row K, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K3" aria-label="Row K, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K4" aria-label="Row K, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K5" aria-label="Row K, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K6" aria-label="Row K, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K7" aria-label="Row K, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K8" aria-label="Row K, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K9" aria-label="Row K, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K10" aria-label="Row K, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K11" aria-label="Row K, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K12" aria-label="Row K, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K13" aria-label="Row K, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="K14" aria-label="Row K, seat 14"><span>14</span></label>
</div>
<div class="row"><span class="row-name">L</span>
<label class="seat"><input type="checkbox" name="seat" value="L1" aria-label="Row L, seat 1"><span>1</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L2" aria-label="Row L, seat 2"><span>2</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L3" aria-label="Row L, seat 3"><span>3</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L4" aria-label="Row L, seat 4"><span>4</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L5" aria-label="Row L, seat 5"><span>5</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L6" aria-label="Row L, seat 6"><span>6</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L7" aria-label="Row L, seat 7"><span>7</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L8" aria-label="Row L, seat 8"><span>8</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L9" aria-label="Row L, seat 9"><span>9</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L10" aria-label="Row L, seat 10"><span>10</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L11" aria-label="Row L, seat 11"><span>11</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L12" aria-label="Row L, seat 12"><span>12</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L13" aria-label="Row L, seat 13"><span>13</span></label>
<label class="seat"><input type="checkbox" name="seat" value="L14" aria-label="Row L, seat 14"><span>14</span></label>
</div>
</div>
</div>
</fieldset>
<div class="basket">
<span class="badge"></span>
Seats
</div>
<section class="summary" aria-labelledby="summary-title">
<h2 id="summary-title">Your basket</h2>
<p class="total">
Total: <span id="total" aria-hidden="true">$0.00</span>
<span id="announcement" aria-live="polite"></span>
</p>
<noscript>
<p>Automatic totals need JavaScript. For either example film, multiply
your selected seat count by $11.50.</p>
</noscript>
<p class="hint">Pricing: $8.00 before 5 p.m.; $11.50 from 5 p.m.</p>
<p class="rate">Euro rate: unavailable offline. No live conversion is shown.</p>
<button type="reset">Clear selection</button>
</section>
</form>
</main>
<script>
(() => {
const form = document.getElementById("tickets");
const total = document.getElementById("total");
const announcement = document.getElementById("announcement");
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
let displayedCents = 0;
let animation = 0;
const money = cents => "$" + (cents / 100).toFixed(2);
function update(animate = true) {
const count = form.querySelectorAll('input[name="seat"]:checked').length;
const film = form.querySelector('input[name="film"]:checked');
const target = film ? count * Number(film.dataset.price) : 0;
announcement.textContent = film
? `${count} ${count === 1 ? "seat" : "seats"} selected. Total ${money(target)}.`
: `${count} ${count === 1 ? "seat" : "seats"} selected. Choose a film for the total.`;
cancelAnimationFrame(animation);
if (!animate || reducedMotion.matches) {
displayedCents = target;
total.textContent = money(target);
return;
}
const start = displayedCents;
const started = performance.now();
const duration = 400;
function frame(now) {
const progress = Math.min((now - started) / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3);
displayedCents = Math.round(start + (target - start) * eased);
total.textContent = money(displayedCents);
if (progress < 1) animation = requestAnimationFrame(frame);
}
animation = requestAnimationFrame(frame);
}
form.addEventListener("change", () => update());
form.addEventListener("reset", () => setTimeout(() => update(), 0));
update(false);
})();
</script>
</body>
</html>
Attachments
openai/gpt-6.1-terra — page