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 the ticket page — everything is in one self-contained file, and the things you asked me to flag (the “after five” pricing reading, the live euro rate, the one-digit badge vs. the teacher’s “12”, and what JavaScript-off can and can’t do) are spelled out in the comments right at the top.
<!DOCTYPE html>
<!--
═══════════════════════════════════════════════════════════════════
THE ASTORIA — tonight's ticket page. One file, no network, no storage.
═══════════════════════════════════════════════════════════════════
READ-ME FIRST — decisions I made, and things you should confirm:
1. "$11.50 after five, $8.00 before" — I read this as TIME OF DAY:
shows before 5 pm = $8.00, shows after 5 pm = $11.50. To make both
prices apply tonight I scheduled Casablanca at 4:30 pm and Singin'
in the Rain at 7:30 pm. If you meant something else (a different
cutoff, or a per-seat rule), it's a one-line change — tell me.
2. LIVE EURO RATE: not possible on this setup. The page must run with
no internet connection, so it cannot fetch a live market rate. It
shows a fixed INDICATIVE rate (US$1 ≈ €0.92, Dec 2024), labelled as
indicative next to the total. To update it, change RATE in the
script below. A genuinely live rate would need a server feed,
which conflicts with "no network at runtime".
3. THE BADGE: your note says the circle must never show more than one
digit, but also that it must read "12" when a teacher books twelve
seats. Both can't be true. I kept the REAL number and sized the
circle to hold up to three digits without losing its shape. If the
printed board matters more than the count, I'll cap it at "9+".
4. JAVASCRIPT OFF: picking a film, picking seats, sold-seat blocking
and the basket count all work with scripting switched off (plain
HTML + CSS counters). One honest limit: without scripts the page
does NOT show a computed dollar total, because CSS counters cannot
add up $11.50 seats and carry the fifty cents correctly. It shows
the seat count and per-seat price instead, and the total is settled
at the counter. If you want an exact script-free total too, make
the evening price a whole $11.00 or $12.00 — then pure CSS can add
it up exactly, and I'll switch it on.
5. NOTHING IS SENT ANYWHERE: there is no server behind this page, so
"Reserve" opens a confirmation to show at the counter. No cookies,
no localStorage/sessionStorage/indexedDB, no network calls — safe
in your sandboxed frame.
6. Films, times, prices and sold seats are placeholders. Search for
"EDIT HERE" to change them quickly. To mark a seat sold: add
"sold" to the seat's class and "disabled" to its checkbox.
7. Header follows your nephew's mockup as described (marquee title,
small basket circle top-right with the number inside). If the
printed board uses different wording, just swap the <h1> text.
8. Small theatre convention: rows skip the letter I (A–H, J–L).
-->
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Astoria — Tonight’s Tickets</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Crect%20width='100'%20height='100'%20rx='18'%20fill='%2347120b'/%3E%3Ctext%20x='50'%20y='70'%20font-size='56'%20text-anchor='middle'%20fill='%23e8c96a'%20font-family='Georgia'%3EA%3C/text%3E%3C/svg%3E">
<script>document.documentElement.className = 'js';</script>
<style>
:root{
--m9:#2b0d07; --m8:#3f120b; --m7:#571a10; --m6:#7a2718;
--g1:#8a6a2f; --g2:#b9861c; --g3:#d4a531; --g4:#e8c96a; --g5:#f3dfae;
--c1:#f4e9d3; --c2:#faf3e2; --ink:#2a1a10; --mut:#6b543a;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
font-family: Georgia, 'Times New Roman', Times, serif;
color:var(--ink); line-height:1.5;
background:var(--c1) repeating-linear-gradient(90deg, rgba(87,26,16,.045) 0 1px, transparent 1px 30px);
}
::selection{ background:var(--g3); color:var(--m9); }
[hidden]{ display:none !important; }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* ── Marquee header ─────────────────────────────────────── */
.marquee{
position:relative; text-align:center;
padding:30px 78px 24px;
background:linear-gradient(#47120b, var(--m9));
border-bottom:3px double var(--g3);
box-shadow:0 3px 14px rgba(43,13,7,.35);
}
.marquee::before, .marquee::after{
content:''; position:absolute; left:0; right:0; height:7px;
background-image:radial-gradient(circle at 3.5px 3.5px, #ffedb0 1.7px, rgba(255,237,176,.25) 2.7px, transparent 3.5px);
background-size:16px 7px; animation:chase 1.9s steps(2,end) infinite;
}
.marquee::before{ top:5px; } .marquee::after{ bottom:5px; animation-delay:.95s; }
@keyframes chase{ 50%{ opacity:.35; } }
.over{ font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--g2); }
h1{
font-family:'Palatino Linotype','Book Antiqua',Palatino,'Times New Roman',serif;
color:var(--g4); font-weight:700; letter-spacing:.2em;
font-size:clamp(1.7rem, 6vw, 2.7rem); text-transform:uppercase; margin-top:2px;
text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.tagline{ font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:#cfa14b; margin-top:5px; }
/* ── Basket (fixed, top-right; number from a CSS counter so it
works with scripting off) ───────────────────────────── */
.basket{
position:fixed; top:14px; right:14px; z-index:50;
width:50px; height:50px; border-radius:50%;
display:flex; align-items:center; justify-content:center; text-decoration:none;
background:radial-gradient(circle at 35% 30%, #5d1a10, #33100a 72%);
border:2px solid var(--g3);
box-shadow:0 3px 10px rgba(43,13,7,.5), inset 0 0 0 3px rgba(212,165,49,.22);
}
.badge{
font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
font-weight:700; font-size:1.12rem; color:var(--g5);
font-variant-numeric:tabular-nums; line-height:1; padding:0 4px;
}
.badge::after{ content:counter(seats); }
.basket.pop{ animation:pop .4s ease; }
@keyframes pop{ 30%{ transform:scale(1.16); } }
body{ counter-reset:seats; }
input.sa:checked, input.sb:checked{ counter-increment:seats 1; }
/* ── Layout ─────────────────────────────────────────────── */
main{ max-width:680px; margin:0 auto; padding:22px 16px 56px; }
.sect{
display:flex; align-items:center; gap:12px; margin:20px 0 14px;
font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
font-size:.78rem; letter-spacing:.34em; text-transform:uppercase; color:var(--m6); white-space:nowrap;
}
.sect::before, .sect::after{ content:''; height:1px; background:var(--g3); flex:1; }
/* ── Film cards (ticket stubs) ──────────────────────────── */
.films{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.film{
display:block; position:relative; cursor:pointer;
background:var(--c2); border:1px solid #d9c08a; border-radius:10px;
padding:14px 14px 12px 22px;
box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(74,19,12,.08);
transition:transform .15s ease, box-shadow .15s ease;
}
.film::before{ content:''; position:absolute; left:8px; top:9px; bottom:9px; border-left:2px dashed rgba(185,134,28,.45); }
.film:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff, 0 7px 16px rgba(74,19,12,.14); }
#filmA:checked ~ .films label[for=filmA],
#filmB:checked ~ .films label[for=filmB]{
border-color:var(--g2); box-shadow:0 0 0 2px var(--g3), 0 6px 16px rgba(74,19,12,.18);
}
#filmA:focus-visible ~ .films label[for=filmA],
#filmB:focus-visible ~ .films label[for=filmB]{ outline:2px solid var(--g2); outline-offset:2px; }
.ft{ display:block; font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; font-size:1.12rem; letter-spacing:.05em; color:var(--m8); }
.fs{ display:block; font-size:.76rem; color:var(--mut); margin-top:3px; }
.fp{ display:block; margin-top:9px; font-weight:700; font-size:1.05rem; color:var(--m6); }
.fp em{ font-style:normal; font-weight:400; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g1); margin-left:5px; }
.stamp{
position:absolute; top:8px; right:9px; opacity:0; transform:rotate(6deg);
font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--m6); border:1px solid var(--m6); border-radius:4px; padding:2px 6px;
}
#filmA:checked ~ .films label[for=filmA] .stamp,
#filmB:checked ~ .films label[for=filmB] .stamp{ opacity:1; }
.hint{ text-align:center; margin:20px 0; color:#7a5c33; font-style:italic; }
#filmA:checked ~ .hint, #filmB:checked ~ .hint{ display:none; }
/* ── Seat maps ──────────────────────────────────────────── */
.map{
display:none; margin-top:16px; padding:18px 14px 14px;
background:linear-gradient(#3a130b, #250b06);
border:1px solid var(--g2); border-radius:14px;
box-shadow:0 8px 22px rgba(43,13,7,.3), inset 0 0 0 4px rgba(212,165,49,.08);
}
#filmA:checked ~ .mapA, #filmB:checked ~ .mapB{ display:block; }
.maptitle{ text-align:center; color:var(--g5); font-size:.86rem; letter-spacing:.12em; margin-bottom:12px; }
.screen{
height:13px; max-width:76%; margin:0 auto 3px;
border-radius:0 0 120px 120px / 0 0 20px 20px;
background:linear-gradient(var(--g4), var(--g2));
box-shadow:0 0 20px rgba(232,201,106,.55);
}
.screenlab{ text-align:center; color:#cfa14b; letter-spacing:.44em; text-transform:uppercase; font-size:.6rem; margin-bottom:13px; }
.rw{ display:flex; align-items:center; gap:9px; margin:5px 0; }
.rw > b{ width:15px; text-align:center; color:#cfa14b; font-size:.72rem; }
.hf{ flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.st{ position:relative; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.st input{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); opacity:0; white-space:nowrap;
}
.st i{
font-style:normal; display:flex; align-items:center; justify-content:center;
aspect-ratio:1/1.08; min-height:24px; border-radius:7px 7px 4px 4px;
font-size:.62rem; font-variant-numeric:tabular-nums;
color:#e9d8b4; background:rgba(243,231,206,.07); border:1px solid rgba(212,165,49,.5);
transition:background .12s ease, transform .12s ease, border-color .12s ease;
}
.st:hover i{ border-color:var(--g4); background:rgba(232,201,106,.16); transform:translateY(-1px); }
.st input:checked + i{
background:linear-gradient(var(--g4), #c99b2a); border-color:var(--g5);
color:var(--m9); font-weight:700; box-shadow:0 0 8px rgba(232,201,106,.5);
}
.st input:focus + i, .st input:focus-visible + i{ outline:2px solid var(--g4); outline-offset:2px; }
.st.sold{ cursor:not-allowed; }
.st.sold i{ background:#1c0f0b; border-color:#4a3527; color:#5d4a3a; position:relative; }
.st.sold i::after{
content:'\00d7'; position:absolute; top:0; left:0; right:0; bottom:0;
display:flex; align-items:center; justify-content:center;
color:#a33b2a; font-size:.95rem; font-weight:700;
}
.legend{ display:flex; justify-content:center; gap:16px; margin-top:13px; font-size:.68rem; letter-spacing:.08em; color:#cfa14b; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.sw{ width:13px; height:13px; border-radius:4px; display:inline-block; }
.sw-f{ border:1px solid rgba(212,165,49,.6); background:rgba(243,231,206,.07); }
.sw-y{ background:linear-gradient(var(--g4), #c99b2a); }
.sw-s{ background:#1c0f0b; border:1px solid #4a3527; }
/* ── Checkout ticket ────────────────────────────────────── */
.checkout{ display:none; margin-top:18px; }
#filmA:checked ~ .checkout, #filmB:checked ~ .checkout{ display:block; }
.ticket{
position:relative; background:var(--c2); border:1px solid #d9c08a; border-radius:12px;
padding:18px 20px 16px; box-shadow:0 6px 18px rgba(74,19,12,.12);
}
.ticket::before, .ticket::after{
content:''; position:absolute; top:50%; width:22px; height:22px; border-radius:50%;
background:var(--c1); border:1px solid #d9c08a; margin-top:-12px;
}
.ticket::before{ left:-12px; } .ticket::after{ right:-12px; }
.tkt-title{
font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--g1); margin-bottom:8px;
}
.cnt-line{ font-size:.88rem; color:var(--mut); }
.film-line{ font-size:.88rem; color:var(--m7); font-weight:700; margin-top:2px; }
.tot{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:8px; }
.usd{
font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
font-size:2.15rem; font-weight:700; color:var(--m8); font-variant-numeric:tabular-nums;
}
.eur{ color:var(--g1); font-size:1.02rem; font-variant-numeric:tabular-nums; }
.rat{ font-size:.66rem; letter-spacing:.05em; color:#9a7b3f; margin-top:2px; }
.btn{
margin-top:14px; width:100%; padding:12px; cursor:pointer;
font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
font-size:.95rem; letter-spacing:.16em; text-transform:uppercase;
color:#f8ecd0; background:linear-gradient(var(--m6), var(--m7));
border:1px solid var(--g2); border-radius:9px; box-shadow:0 3px 0 var(--m9);
}
.btn:hover:enabled{ filter:brightness(1.1); }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.confirm{ margin-top:14px; border:2px dashed var(--g2); border-radius:10px; background:#fff8e6; padding:14px 16px; }
.confirm h3{
font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
letter-spacing:.22em; color:var(--m6); font-size:1rem; text-transform:uppercase;
}
.confirm p{ font-size:.88rem; margin-top:5px; color:var(--ink); }
.confirm .code b{ letter-spacing:.14em; color:var(--m6); }
.confirm .small{ font-size:.74rem; color:var(--mut); }
.btn2{
margin-top:10px; padding:7px 18px; cursor:pointer; font-family:inherit;
background:var(--c2); border:1px solid var(--g2); border-radius:7px; color:var(--m8); letter-spacing:.08em;
}
/* ── No-JS fallback inside the ticket ───────────────────── */
.no-js-total p{ font-size:.95rem; }
.no-js-total .cnt::after{ content:counter(seats); }
.no-js-total .unit{ display:none; font-weight:700; color:var(--m6); }
#filmA:checked ~ .checkout .unit-a{ display:inline; }
#filmB:checked ~ .checkout .unit-b{ display:inline; }
.no-js-total .small{ font-size:.76rem; color:var(--mut); margin-top:6px; }
html.js .no-js-total{ display:none; }
html.no-js .js-only{ display:none; }
/* ── Toast note (no alert boxes) ────────────────────────── */
.note{
position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px);
max-width:92%; z-index:60; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
background:var(--m8); color:var(--g5); border:1px solid var(--g2);
padding:9px 18px; border-radius:999px; font-size:.8rem; text-align:center;
}
.note.on{ opacity:1; transform:translateX(-50%); }
footer{ text-align:center; font-size:.72rem; color:#8a7355; padding:8px 16px 30px; }
@media (max-width:460px){
.films{ grid-template-columns:1fr; }
.marquee{ padding-right:70px; }
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{ animation:none !important; transition:none !important; }
}
</style>
</head>
<body>
<header class="marquee">
<p class="over">Est. 1938 · Two screens</p>
<h1>The Astoria</h1>
<p class="tagline">Tonight’s tickets</p>
</header>
<main>
<!-- Film picker — plain radios, works with scripting off -->
<input class="vh" type="radio" name="film" id="filmA" value="A">
<input class="vh" type="radio" name="film" id="filmB" value="B">
<h2 class="sect">Tonight’s films</h2>
<div class="films">
<!-- EDIT HERE: film names, screens, times, prices -->
<label class="film" for="filmA">
<span class="ft">Casablanca</span>
<span class="fs">Screen One · 4:30 pm · 102 min · PG</span>
<span class="fp">$8.00 <em>shows before five</em></span>
<span class="stamp">Chosen</span>
</label>
<label class="film" for="filmB">
<span class="ft">Singin’ in the Rain</span>
<span class="fs">Screen Two · 7:30 pm · 103 min · G</span>
<span class="fp">$11.50 <em>shows after five</em></span>
<span class="stamp">Chosen</span>
</label>
</div>
<p class="hint">First pick a film — its seat map opens below.</p>
<!-- ── Screen One seat map: 12 rows × 14 seats ── -->
<section class="map mapA" role="group" aria-label="Seat map, Screen One">
<p class="maptitle">Screen One — Casablanca, 4:30 pm</p>
<div class="screen"></div>
<p class="screenlab">Screen</p>
<!-- EDIT HERE: sold seats carry class "st sold" + disabled checkbox -->
<div class="rw"><b>A</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=A1><i>1</i></label><label class="st sold"><input type=checkbox class=sa aria-label=A2 disabled><i>2</i></label><label class="st sold"><input type=checkbox class=sa aria-label=A3 disabled><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=A4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=A5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=A6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=A7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=A8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=A9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=A10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=A11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=A12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=A13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=A14><i>14</i></label></div></div>
<div class="rw"><b>B</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=B1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=B2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=B3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=B4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=B5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=B6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=B7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=B8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=B9><i>9</i></label><label class="st sold"><input type=checkbox class=sa aria-label=B10 disabled><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=B11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=B12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=B13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=B14><i>14</i></label></div></div>
<div class="rw"><b>C</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=C1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=C2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=C3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=C4><i>4</i></label><label class="st sold"><input type=checkbox class=sa aria-label=C5 disabled><i>5</i></label><label class="st sold"><input type=checkbox class=sa aria-label=C6 disabled><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=C7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=C8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=C9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=C10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=C11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=C12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=C13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=C14><i>14</i></label></div></div>
<div class="rw"><b>D</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=D1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=D2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=D3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=D4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=D5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=D6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=D7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=D8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=D9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=D10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=D11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=D12><i>12</i></label><label class="st sold"><input type=checkbox class=sa aria-label=D13 disabled><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=D14><i>14</i></label></div></div>
<div class="rw"><b>E</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=E1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=E2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=E3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=E4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=E5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=E6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=E7><i>7</i></label></div><div class="hf"><label class="st sold"><input type=checkbox class=sa aria-label=E8 disabled><i>8</i></label><label class="st sold"><input type=checkbox class=sa aria-label=E9 disabled><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=E10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=E11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=E12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=E13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=E14><i>14</i></label></div></div>
<div class="rw"><b>F</b><div class="hf"><label class="st sold"><input type=checkbox class=sa aria-label=F1 disabled><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=F2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=F3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=F4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=F5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=F6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=F7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=F8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=F9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=F10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=F11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=F12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=F13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=F14><i>14</i></label></div></div>
<div class="rw"><b>G</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=G1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=G2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=G3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=G4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=G5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=G6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=G7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=G8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=G9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=G10><i>10</i></label><label class="st sold"><input type=checkbox class=sa aria-label=G11 disabled><i>11</i></label><label class="st sold"><input type=checkbox class=sa aria-label=G12 disabled><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=G13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=G14><i>14</i></label></div></div>
<div class="rw"><b>H</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=H1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=H2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=H3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=H4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=H5><i>5</i></label><label class="st sold"><input type=checkbox class=sa aria-label=H6 disabled><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=H7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=H8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=H9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=H10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=H11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=H12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=H13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=H14><i>14</i></label></div></div>
<div class="rw"><b>J</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=J1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=J2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=J3><i>3</i></label><label class="st sold"><input type=checkbox class=sa aria-label=J4 disabled><i>4</i></label><label class="st sold"><input type=checkbox class=sa aria-label=J5 disabled><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=J6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=J7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=J8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=J9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=J10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=J11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=J12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=J13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=J14><i>14</i></label></div></div>
<div class="rw"><b>K</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=K1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=K2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=K3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=K4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=K5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=K6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=K7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=K8><i>8</i></label><label class=st><input type=checkbox class=sa aria-label=K9><i>9</i></label><label class=st><input type=checkbox class=sa aria-label=K10><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=K11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=K12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=K13><i>13</i></label><label class="st sold"><input type=checkbox class=sa aria-label=K14 disabled><i>14</i></label></div></div>
<div class="rw"><b>L</b><div class="hf"><label class=st><input type=checkbox class=sa aria-label=L1><i>1</i></label><label class=st><input type=checkbox class=sa aria-label=L2><i>2</i></label><label class=st><input type=checkbox class=sa aria-label=L3><i>3</i></label><label class=st><input type=checkbox class=sa aria-label=L4><i>4</i></label><label class=st><input type=checkbox class=sa aria-label=L5><i>5</i></label><label class=st><input type=checkbox class=sa aria-label=L6><i>6</i></label><label class=st><input type=checkbox class=sa aria-label=L7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sa aria-label=L8><i>8</i></label><label class="st sold"><input type=checkbox class=sa aria-label=L9 disabled><i>9</i></label><label class="st sold"><input type=checkbox class=sa aria-label=L10 disabled><i>10</i></label><label class=st><input type=checkbox class=sa aria-label=L11><i>11</i></label><label class=st><input type=checkbox class=sa aria-label=L12><i>12</i></label><label class=st><input type=checkbox class=sa aria-label=L13><i>13</i></label><label class=st><input type=checkbox class=sa aria-label=L14><i>14</i></label></div></div>
<p class="legend"><span><i class="sw sw-f"></i>Free</span><span><i class="sw sw-y"></i>Yours</span><span><i class="sw sw-s"></i>Sold</span></p>
</section>
<!-- ── Screen Two seat map: 12 rows × 14 seats ── -->
<section class="map mapB" role="group" aria-label="Seat map, Screen Two">
<p class="maptitle">Screen Two — Singin’ in the Rain, 7:30 pm</p>
<div class="screen"></div>
<p class="screenlab">Screen</p>
<!-- EDIT HERE: sold seats carry class "st sold" + disabled checkbox -->
<div class="rw"><b>A</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=A1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=A2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=A3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=A4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=A5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=A6><i>6</i></label><label class="st sold"><input type=checkbox class=sb aria-label=A7 disabled><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=A8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=A9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=A10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=A11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=A12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=A13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=A14><i>14</i></label></div></div>
<div class="rw"><b>B</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=B1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=B2><i>2</i></label><label class="st sold"><input type=checkbox class=sb aria-label=B3 disabled><i>3</i></label><label class="st sold"><input type=checkbox class=sb aria-label=B4 disabled><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=B5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=B6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=B7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=B8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=B9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=B10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=B11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=B12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=B13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=B14><i>14</i></label></div></div>
<div class="rw"><b>C</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=C1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=C2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=C3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=C4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=C5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=C6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=C7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=C8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=C9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=C10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=C11><i>11</i></label><label class="st sold"><input type=checkbox class=sb aria-label=C12 disabled><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=C13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=C14><i>14</i></label></div></div>
<div class="rw"><b>D</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=D1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=D2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=D3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=D4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=D5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=D6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=D7><i>7</i></label></div><div class="hf"><label class="st sold"><input type=checkbox class=sb aria-label=D8 disabled><i>8</i></label><label class="st sold"><input type=checkbox class=sb aria-label=D9 disabled><i>9</i></label><label class="st sold"><input type=checkbox class=sb aria-label=D10 disabled><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=D11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=D12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=D13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=D14><i>14</i></label></div></div>
<div class="rw"><b>E</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=E1><i>1</i></label><label class="st sold"><input type=checkbox class=sb aria-label=E2 disabled><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=E3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=E4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=E5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=E6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=E7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=E8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=E9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=E10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=E11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=E12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=E13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=E14><i>14</i></label></div></div>
<div class="rw"><b>F</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=F1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=F2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=F3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=F4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=F5><i>5</i></label><label class="st sold"><input type=checkbox class=sb aria-label=F6 disabled><i>6</i></label><label class="st sold"><input type=checkbox class=sb aria-label=F7 disabled><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=F8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=F9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=F10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=F11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=F12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=F13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=F14><i>14</i></label></div></div>
<div class="rw"><b>G</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=G1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=G2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=G3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=G4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=G5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=G6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=G7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=G8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=G9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=G10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=G11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=G12><i>12</i></label><label class="st sold"><input type=checkbox class=sb aria-label=G13 disabled><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=G14><i>14</i></label></div></div>
<div class="rw"><b>H</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=H1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=H2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=H3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=H4><i>4</i></label><label class="st sold"><input type=checkbox class=sb aria-label=H5 disabled><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=H6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=H7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=H8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=H9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=H10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=H11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=H12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=H13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=H14><i>14</i></label></div></div>
<div class="rw"><b>J</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=J1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=J2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=J3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=J4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=J5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=J6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=J7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=J8><i>8</i></label><label class="st sold"><input type=checkbox class=sb aria-label=J9 disabled><i>9</i></label><label class="st sold"><input type=checkbox class=sb aria-label=J10 disabled><i>10</i></label><label class="st sold"><input type=checkbox class=sb aria-label=J11 disabled><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=J12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=J13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=J14><i>14</i></label></div></div>
<div class="rw"><b>K</b><div class="hf"><label class="st sold"><input type=checkbox class=sb aria-label=K1 disabled><i>1</i></label><label class="st sold"><input type=checkbox class=sb aria-label=K2 disabled><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=K3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=K4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=K5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=K6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=K7><i>7</i></label></div><div class="hf"><label class=st><input type=checkbox class=sb aria-label=K8><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=K9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=K10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=K11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=K12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=K13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=K14><i>14</i></label></div></div>
<div class="rw"><b>L</b><div class="hf"><label class=st><input type=checkbox class=sb aria-label=L1><i>1</i></label><label class=st><input type=checkbox class=sb aria-label=L2><i>2</i></label><label class=st><input type=checkbox class=sb aria-label=L3><i>3</i></label><label class=st><input type=checkbox class=sb aria-label=L4><i>4</i></label><label class=st><input type=checkbox class=sb aria-label=L5><i>5</i></label><label class=st><input type=checkbox class=sb aria-label=L6><i>6</i></label><label class=st><input type=checkbox class=sb aria-label=L7><i>7</i></label></div><div class="hf"><label class="st sold"><input type=checkbox class=sb aria-label=L8 disabled><i>8</i></label><label class=st><input type=checkbox class=sb aria-label=L9><i>9</i></label><label class=st><input type=checkbox class=sb aria-label=L10><i>10</i></label><label class=st><input type=checkbox class=sb aria-label=L11><i>11</i></label><label class=st><input type=checkbox class=sb aria-label=L12><i>12</i></label><label class=st><input type=checkbox class=sb aria-label=L13><i>13</i></label><label class=st><input type=checkbox class=sb aria-label=L14><i>14</i></label></div></div>
<p class="legend"><span><i class="sw sw-f"></i>Free</span><span><i class="sw sw-y"></i>Yours</span><span><i class="sw sw-s"></i>Sold</span></p>
</section>
<!-- ── Checkout ── -->
<h2 class="sect">Your tickets</h2>
<section class="checkout" id="checkout">
<div class="ticket">
<div class="js-only">
<p class="tkt-title">Admit one per seat</p>
<p class="cnt-line"><span id="seat-count-line">0 seats</span> · <span id="unit-line">$8.00 each</span></p>
<p class="film-line" id="film-line">—</p>
<div class="tot">
<span class="usd" id="total-usd">$0.00</span>
<span class="eur" id="total-eur">≈ €0.00</span>
</div>
<p class="rat">Indicative rate: US$1 ≈ €0.92 · updated Dec 2024 · counter rate may differ</p>
<button class="btn" id="reserve" type="button" disabled>Reserve these seats</button>
<div class="confirm" id="confirm" style="display:none">
<h3>Admit <span id="c-n">0</span></h3>
<p id="c-film"></p>
<p id="c-seats"></p>
<p id="c-total"></p>
<p class="code">Counter code: <b id="c-code"></b></p>
<p class="small">Nothing was sent over the internet — show this page at the counter to pay.</p>
<button class="btn2" id="closeConfirm" type="button">Done</button>
</div>
</div>
<div class="no-js-total">
<p><span class="cnt"></span> seats picked — <span class="unit unit-a">$8.00</span><span class="unit unit-b">$11.50</span> each.</p>
<p class="small">Scripting is switched off on this browser, so the dollar total is added up at the counter. Your seats are held on this page — show it when you pay.</p>
</div>
</div>
</section>
</main>
<footer>The Astoria · 14 Marlow Street · Doors open 30 minutes before each show · Row I is skipped, as is tradition.</footer>
<!-- Basket badge: the number comes from the CSS counter, so it is exact
with or without JavaScript. Placed last in the document so the
counter has already counted every seat. -->
<a class="basket" id="basket" href="#checkout" title="Seats in your basket"><b class="badge"></b></a>
<p class="note" id="note" role="status"></p>
<p class="vh" aria-live="polite" id="live"></p>
<script>
(function(){
'use strict';
var RATE = 0.92; // EDIT HERE — indicative euro rate (no live feed offline)
var FILMS = {
A: { name: 'Casablanca', where: 'Screen One · 4:30 pm' },
B: { name: 'Singin\u2019 in the Rain', where: 'Screen Two · 7:30 pm' }
};
function priceOf(el){ return hasCls(el, 'sa') ? 8 : 11.5; }
function hasCls(el, c){ return (' ' + el.className + ' ').indexOf(' ' + c + ' ') > -1; }
function now(){ return (window.performance && performance.now) ? performance.now() : Date.now(); }
var usdEl = document.getElementById('total-usd'),
eurEl = document.getElementById('total-eur'),
cntEl = document.getElementById('seat-count-line'),
unitEl = document.getElementById('unit-line'),
filmEl = document.getElementById('film-line'),
basket = document.getElementById('basket'),
live = document.getElementById('live'),
btn = document.getElementById('reserve'),
panel = document.getElementById('confirm'),
note = document.getElementById('note');
var shown = 0, raf = null;
var reduce = !!(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches);
function seats(){
return Array.prototype.slice.call(document.querySelectorAll('input.sa:checked, input.sb:checked'));
}
function currentFilm(){
var r = document.querySelector('input[name=film]:checked');
return r ? r.value : null;
}
function paint(v){
usdEl.textContent = '$' + v.toFixed(2);
eurEl.textContent = '\u2248 \u20ac' + (v * RATE).toFixed(2);
}
/* The count-up: ease toward the new total instead of jumping. */
function animateTo(target){
if (raf){ cancelAnimationFrame(raf); raf = null; }
if (reduce || Math.abs(target - shown) < 0.005){ shown = target; paint(target); return; }
var from = shown, t0 = now();
var dur = Math.max(350, Math.min(900, 260 + Math.abs(target - from) * 22));
function step(t){
var p = Math.min(1, (t - t0) / dur);
var v = from + (target - from) * (1 - Math.pow(1 - p, 3));
shown = v; paint(v);
if (p < 1){ raf = requestAnimationFrame(step); }
else { raf = null; shown = target; paint(target); }
}
raf = requestAnimationFrame(step);
}
function pop(){
basket.classList.remove('pop');
void basket.offsetWidth;
basket.classList.add('pop');
}
function say(m){ live.textContent = m; }
function noteShow(m){
note.textContent = m; note.className = 'note on';
clearTimeout(note._t);
note._t = setTimeout(function(){ note.className = 'note'; }, 3400);
}
function recalc(){
var s = seats(), n = s.length, total = 0, i;
for (i = 0; i < n; i++){ total += priceOf(s[i]); }
animateTo(Math.round(total * 100) / 100);
cntEl.textContent = n + (n === 1 ? ' seat' : ' seats');
btn.disabled = (n === 0);
say(n + ' seats picked — total $' + total.toFixed(2));
}
document.addEventListener('change', function(e){
var t = e.target;
panel.style.display = 'none';
if (t && t.name === 'film'){
var other = (t.value === 'A') ? 'sb' : 'sa';
var stray = document.querySelectorAll('input.' + other + ':checked');
var cleared = false, i;
for (i = 0; i < stray.length; i++){ stray[i].checked = false; cleared = true; }
if (cleared){ noteShow('Film changed \u2014 seats from the other screen were taken out of your basket.'); }
var f = currentFilm();
unitEl.textContent = '$' + (f === 'A' ? '8.00' : '11.50') + ' each';
filmEl.textContent = FILMS[f].name + ' \u00b7 ' + FILMS[f].where;
recalc(); pop();
} else if (t && (hasCls(t, 'sa') || hasCls(t, 'sb'))){
recalc(); pop();
}
});
btn.addEventListener('click', function(){
var f = currentFilm();
if (!f){ return; }
var els = seats(), n = els.length;
if (!n){ return; }
var total = 0, i;
for (i = 0; i < n; i++){ total += priceOf(els[i]); }
var s = els.map(function(el){ return el.getAttribute('aria-label'); });
s.sort(function(a, b){
return a.charCodeAt(0) - b.charCodeAt(0) || parseInt(a.slice(1), 10) - parseInt(b.slice(1), 10);
});
document.getElementById('c-n').textContent = n;
document.getElementById('c-film').textContent = FILMS[f].name + ' \u2014 ' + FILMS[f].where;
document.getElementById('c-seats').textContent = 'Seats: ' + s.join(', ');
document.getElementById('c-total').textContent = '$' + total.toFixed(2) + ' \u2248 \u20ac' + (total * RATE).toFixed(2);
var h = 7, str = f + s.join('|');
for (i = 0; i < str.length; i++){ h = (h * 31 + str.charCodeAt(i)) >>> 0; }
document.getElementById('c-code').textContent = 'AST-' + ('000' + (h % 1679616).toString(36).toUpperCase()).slice(-4);
panel.style.display = 'block';
panel.scrollIntoView({ block: 'center' });
});
document.getElementById('closeConfirm').addEventListener('click', function(){
panel.style.display = 'none';
});
})();
</script>
</body>
</html>