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>
<!--
NOTES FOR THE OWNER — PLEASE READ BEFORE FRIDAY NIGHT
This page tries to meet everything you listed, but three of your requirements pull against each other and against the offline single file limits you set. I have chosen as follows so the till still works on a busy night:
1) BASKET BADGE — SINGLE DIGIT vs 12
You asked for a small circle that never shows more than one digit, to match the printed lobby board. You also asked that a school booking of 12 shows 12 on the badge so the teacher can check it went through.
Both cannot be true at once. I have prioritised the 12: the badge shows the true number of seats picked, including 12, 13, 14 and beyond. The circle is kept small but made just wide enough for two digits. The printed board will therefore differ from the page when more than 9 seats are picked. Please update the board or accept the small difference — capping the badge at 9 would hide a real booking.
2) EURO RATE — LIVE MARKET vs OFFLINE MACHINE
You asked for today's euro rate from the live market next to the total. You also asked for no network use at runtime because the machine is offline, in one file with nothing outside it.
A live rate cannot be obtained offline, and I will not invent one. The page therefore shows EUR rate unavailable offline next to the total instead of a made up figure. If you want a rate for tourists, update that line by hand each morning, or run the page on a machine that can reach the network.
3) JAVASCRIPT OFF vs COUNT UP ANIMATION
You asked for the page to work with JavaScript switched off, and also for the total to count up smoothly when it changes. The count up needs JavaScript, so it cannot happen when JavaScript is off.
I have built the seat picking, basket badge and dollar total with HTML and CSS only, so they all work with JavaScript off. The total simply changes instantly in that case. When JavaScript is on, the same total is enhanced to count smoothly to the new number. Nothing else needs JavaScript.
OTHER CHOICES
Pricing is taken as per seat: 8.00 dollars per seat for 1 to 4 seats, 11.50 dollars per seat for 5 or more seats. Total equals seats picked times per seat price.
One shared seating plan is shown after the film choice: 12 rows A to L times 14 seats. 25 seats are marked sold and cannot be picked.
Everything is in this one file, with no outside files and no network use, and no browser storage is used.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Grand Palace — Tonight's Films</title>
<style>
*{box-sizing:border-box}
body{margin:0;padding:0;background:#2b0a0a;color:#f5e6c8;font-family:Georgia,'Times New Roman',Times,serif}
.app{position:relative;max-width:980px;margin:0 auto;padding:18px 16px 24px;background:linear-gradient(180deg,#7a0c0c 0%,#5a0808 100%);border-left:4px solid #d4af37;border-right:4px solid #d4af37;counter-reset:picked 0;min-height:100vh}
header{text-align:center;padding:8px 60px 14px 8px;border-bottom:2px solid #d4af37}
h1{margin:0 0 4px;color:#f5d67b;font-size:28px;letter-spacing:1px}
header p{margin:0;color:#f5e6c8;font-style:italic}
.films{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.film-option input{position:absolute;opacity:0;width:1px;height:1px}
.film-option label{display:block;padding:10px 16px;background:#3d0606;border:2px solid #d4af37;border-radius:8px;cursor:pointer;text-align:center;min-width:200px}
.film-option input:checked+label{background:#d4af37;color:#5a0808}
.film-option input:focus-visible+label{outline:2px solid #fff;outline-offset:2px}
.screen{text-align:center;margin:10px auto 14px;padding:6px;max-width:520px;background:#f5d67b;color:#5a0808;border-radius:50% / 100% 100% 0 0;font-weight:bold;letter-spacing:4px}
.seats{padding:8px 0}
.row{display:flex;align-items:center;justify-content:center;gap:5px;margin:5px 0;flex-wrap:wrap}
.row-label{width:22px;text-align:center;color:#f5d67b;font-weight:bold}
.seat{position:absolute;opacity:0;width:1px;height:1px}
.seat-label{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:#a31616;color:#f5e6c8;border:1px solid #d4af37;border-radius:6px 6px 10px 10px;cursor:pointer;font-size:12px}
.seat:checked+.seat-label{background:#f5d67b;color:#5a0808;font-weight:bold}
.seat:disabled+.seat-label.sold{background:#2e2e2e;color:#777;border-color:#555;cursor:not-allowed}
.seat:focus-visible+.seat-label{outline:2px solid #fff;outline-offset:2px}
.badge-wrap{position:absolute;top:12px;right:12px}
.badge{width:34px;height:34px;border-radius:50%;background:#f5d67b;color:#5a0808;border:2px solid #5a0808;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px}
.badge::after{content:counter(picked)}
.total-bar{margin-top:18px;padding:12px 14px;background:#3d0606;border:2px solid #d4af37;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.total-label{color:#f5d67b;font-weight:bold}
.total-count{display:none;font-weight:bold;font-size:18px}
.total-count::after{content:counter(picked,totalprice)}
.app:has(input.seat:checked) .total-count{display:inline}
.app:has(input.seat:checked) .total-zero{display:none}
.total-zero{font-weight:bold;font-size:18px}
.total-js{display:none;font-weight:bold;font-size:18px}
html.js .total-js{display:inline}
html.js .total-css-wrap{display:none}
.eur{color:#d4af37;font-size:13px;font-style:italic}
@counter-style totalprice{system:fixed;symbols:"$8.00" "$16.00" "$24.00" "$32.00" "$57.50" "$69.00" "$80.50" "$92.00" "$103.50" "$115.00" "$126.50" "$138.00" "$149.50" "$161.00" "$172.50" "$184.00" "$195.50" "$207.00" "$218.50" "$230.00" "$241.50" "$253.00" "$264.50" "$276.00" "$287.50" "$299.00" "$310.50" "$322.00" "$333.50" "$345.00" "$356.50" "$368.00" "$379.50" "$391.00" "$402.50" "$414.00" "$425.50" "$437.00" "$448.50" "$460.00" "$471.50" "$483.00" "$494.50" "$506.00" "$517.50" "$529.00" "$540.50" "$552.00" "$563.50" "$575.00" "$586.50" "$598.00" "$609.50" "$621.00" "$632.50" "$644.00" "$655.50" "$667.00" "$678.50" "$690.00" "$701.50" "$713.00" "$724.50" "$736.00" "$747.50" "$759.00" "$770.50" "$782.00" "$793.50" "$805.00" "$816.50" "$828.00" "$839.50" "$851.00" "$862.50" "$874.00" "$885.50" "$897.00" "$908.50" "$920.00" "$931.50" "$943.00" "$954.50" "$966.00" "$977.50" "$989.00" "$1000.50" "$1012.00" "$1023.50" "$1035.00" "$1046.50" "$1058.00" "$1069.50" "$1081.00" "$1092.50" "$1104.00" "$1115.50" "$1127.00" "$1138.50" "$1150.00" "$1161.50" "$1173.00" "$1184.50" "$1196.00" "$1207.50" "$1219.00" "$1230.50" "$1242.00" "$1253.50" "$1265.00" "$1276.50" "$1288.00" "$1299.50" "$1311.00" "$1322.50" "$1334.00" "$1345.50" "$1357.00" "$1368.50" "$1380.00" "$1391.50" "$1403.00" "$1414.50" "$1426.00" "$1437.50" "$1449.00" "$1460.50" "$1472.00" "$1483.50" "$1495.00" "$1506.50" "$1518.00" "$1529.50" "$1541.00" "$1552.50" "$1564.00" "$1575.50" "$1587.00" "$1598.50" "$1610.00" "$1621.50" "$1633.00" "$1644.50" "$1656.00" "$1667.50" "$1679.00" "$1690.50" "$1702.00" "$1713.50" "$1725.00" "$1736.50" "$1748.00" "$1759.50" "$1771.00" "$1782.50" "$1794.00" "$1805.50" "$1817.00" "$1828.50" "$1840.00" "$1851.50" "$1863.00" "$1874.50" "$1886.00" "$1897.50" "$1909.00" "$1920.50" "$1932.00"}
</style>
</head>
<body>
<div class="app">
<header>
<h1>★ The Grand Palace ★</h1>
<p>Tonight's Films — Pick a film, then pick your seats</p>
</header>
<section class="films">
<div class="film-option"><input type="radio" name="film" id="film1" checked><label for="film1"><strong>The Velvet Curtain</strong><br>6:00 PM</label></div>
<div class="film-option"><input type="radio" name="film" id="film2"><label for="film2"><strong>Midnight at the Rialto</strong><br>8:30 PM</label></div>
</section>
<section class="seats">
<div class="screen">SCREEN</div>
<div class="row"><span class="row-label">A</span><input class="seat" type="checkbox" id="A1"><label class="seat-label" for="A1" aria-label="Row A Seat 1">1</label><input class="seat" type="checkbox" id="A2"><label class="seat-label" for="A2" aria-label="Row A Seat 2">2</label><input class="seat" type="checkbox" id="A3"><label class="seat-label" for="A3" aria-label="Row A Seat 3">3</label><input class="seat" type="checkbox" id="A4"><label class="seat-label" for="A4" aria-label="Row A Seat 4">4</label><input class="seat" type="checkbox" id="A5"><label class="seat-label" for="A5" aria-label="Row A Seat 5">5</label><input class="seat" type="checkbox" id="A6"><label class="seat-label" for="A6" aria-label="Row A Seat 6">6</label><input class="seat" type="checkbox" id="A7"><label class="seat-label" for="A7" aria-label="Row A Seat 7">7</label><input class="seat" type="checkbox" id="A8"><label class="seat-label" for="A8" aria-label="Row A Seat 8">8</label><input class="seat" type="checkbox" id="A9"><label class="seat-label" for="A9" aria-label="Row A Seat 9">9</label><input class="seat" type="checkbox" id="A10"><label class="seat-label" for="A10" aria-label="Row A Seat 10">10</label><input class="seat" type="checkbox" id="A11"><label class="seat-label" for="A11" aria-label="Row A Seat 11">11</label><input class="seat" type="checkbox" id="A12"><label class="seat-label" for="A12" aria-label="Row A Seat 12">12</label><input class="seat" type="checkbox" id="A13"><label class="seat-label" for="A13" aria-label="Row A Seat 13">13</label><input class="seat" type="checkbox" id="A14"><label class="seat-label" for="A14" aria-label="Row A Seat 14">14</label></div>
<div class="row"><span class="row-label">B</span><input class="seat" type="checkbox" id="B1"><label class="seat-label" for="B1" aria-label="Row B Seat 1">1</label><input class="seat" type="checkbox" id="B2"><label class="seat-label" for="B2" aria-label="Row B Seat 2">2</label><input class="seat" type="checkbox" id="B3"><label class="seat-label" for="B3" aria-label="Row B Seat 3">3</label><input class="seat" type="checkbox" id="B4"><label class="seat-label" for="B4" aria-label="Row B Seat 4">4</label><input class="seat" type="checkbox" id="B5"><label class="seat-label" for="B5" aria-label="Row B Seat 5">5</label><input class="seat" type="checkbox" id="B6"><label class="seat-label" for="B6" aria-label="Row B Seat 6">6</label><input class="seat" type="checkbox" id="B7"><label class="seat-label" for="B7" aria-label="Row B Seat 7">7</label><input class="seat" type="checkbox" id="B8"><label class="seat-label" for="B8" aria-label="Row B Seat 8">8</label><input class="seat" type="checkbox" id="B9"><label class="seat-label" for="B9" aria-label="Row B Seat 9">9</label><input class="seat" type="checkbox" id="B10"><label class="seat-label" for="B10" aria-label="Row B Seat 10">10</label><input class="seat" type="checkbox" id="B11"><label class="seat-label" for="B11" aria-label="Row B Seat 11">11</label><input class="seat" type="checkbox" id="B12"><label class="seat-label" for="B12" aria-label="Row B Seat 12">12</label><input class="seat" type="checkbox" id="B13"><label class="seat-label" for="B13" aria-label="Row B Seat 13">13</label><input class="seat" type="checkbox" id="B14"><label class="seat-label" for="B14" aria-label="Row B Seat 14">14</label></div>
<div class="row"><span class="row-label">C</span><input class="seat" type="checkbox" id="C1"><label class="seat-label" for="C1" aria-label="Row C Seat 1">1</label><input class="seat" type="checkbox" id="C2"><label class="seat-label" for="C2" aria-label="Row C Seat 2">2</label><input class="seat" type="checkbox" id="C3"><label class="seat-label" for="C3" aria-label="Row C Seat 3">3</label><input class="seat" type="checkbox" id="C4"><label class="seat-label" for="C4" aria-label="Row C Seat 4">4</label><input class="seat" type="checkbox" id="C5"><label class="seat-label" for="C5" aria-label="Row C Seat 5">5</label><input class="seat" type="checkbox" id="C6"><label class="seat-label" for="C6" aria-label="Row C Seat 6">6</label><input class="seat sold" type="checkbox" id="C7" disabled><label class="seat-label sold" for="C7" aria-label="Row C Seat 7 sold">×</label><input class="seat sold" type="checkbox" id="C8" disabled><label class="seat-label sold" for="C8" aria-label="Row C Seat 8 sold">×</label><input class="seat" type="checkbox" id="C9"><label class="seat-label" for="C9" aria-label="Row C Seat 9">9</label><input class="seat" type="checkbox" id="C10"><label class="seat-label" for="C10" aria-label="Row C Seat 10">10</label><input class="seat" type="checkbox" id="C11"><label class="seat-label" for="C11" aria-label="Row C Seat 11">11</label><input class="seat" type="checkbox" id="C12"><label class="seat-label" for="C12" aria-label="Row C Seat 12">12</label><input class="seat" type="checkbox" id="C13"><label class="seat-label" for="C13" aria-label="Row C Seat 13">13</label><input class="seat" type="checkbox" id="C14"><label class="seat-label" for="C14" aria-label="Row C Seat 14">14</label></div>
<div class="row"><span class="row-label">D</span><input class="seat" type="checkbox" id="D1"><label class="seat-label" for="D1" aria-label="Row D Seat 1">1</label><input class="seat" type="checkbox" id="D2"><label class="seat-label" for="D2" aria-label="Row D Seat 2">2</label><input class="seat" type="checkbox" id="D3"><label class="seat-label" for="D3" aria-label="Row D Seat 3">3</label><input class="seat" type="checkbox" id="D4"><label class="seat-label" for="D4" aria-label="Row D Seat 4">4</label><input class="seat" type="checkbox" id="D5"><label class="seat-label" for="D5" aria-label="Row D Seat 5">5</label><input class="seat sold" type="checkbox" id="D6" disabled><label class="seat-label sold" for="D6" aria-label="Row D Seat 6 sold">×</label><input class="seat sold" type="checkbox" id="D7" disabled><label class="seat-label sold" for="D7" aria-label="Row D Seat 7 sold">×</label><input class="seat sold" type="checkbox" id="D8" disabled><label class="seat-label sold" for="D8" aria-label="Row D Seat 8 sold">×</label><input class="seat sold" type="checkbox" id="D9" disabled><label class="seat-label sold" for="D9" aria-label="Row D Seat 9 sold">×</label><input class="seat" type="checkbox" id="D10"><label class="seat-label" for="D10" aria-label="Row D Seat 10">10</label><input class="seat" type="checkbox" id="D11"><label class="seat-label" for="D11" aria-label="Row D Seat 11">11</label><input class="seat" type="checkbox" id="D12"><label class="seat-label" for="D12" aria-label="Row D Seat 12">12</label><input class="seat" type="checkbox" id="D13"><label class="seat-label" for="D13" aria-label="Row D Seat 13">13</label><input class="seat" type="checkbox" id="D14"><label class="seat-label" for="D14" aria-label="Row D Seat 14">14</label></div>
<div class="row"><span class="row-label">E</span><input class="seat" type="checkbox" id="E1"><label class="seat-label" for="E1" aria-label="Row E Seat 1">1</label><input class="seat" type="checkbox" id="E2"><label class="seat-label" for="E2" aria-label="Row E Seat 2">2</label><input class="seat" type="checkbox" id="E3"><label class="seat-label" for="E3" aria-label="Row E Seat 3">3</label><input class="seat" type="checkbox" id="E4"><label class="seat-label" for="E4" aria-label="Row E Seat 4">4</label><input class="seat sold" type="checkbox" id="E5" disabled><label class="seat-label sold" for="E5" aria-label="Row E Seat 5 sold">×</label><input class="seat sold" type="checkbox" id="E6" disabled><label class="seat-label sold" for="E6" aria-label="Row E Seat 6 sold">×</label><input class="seat sold" type="checkbox" id="E7" disabled><label class="seat-label sold" for="E7" aria-label="Row E Seat 7 sold">×</label><input class="seat sold" type="checkbox" id="E8" disabled><label class="seat-label sold" for="E8" aria-label="Row E Seat 8 sold">×</label><input class="seat sold" type="checkbox" id="E9" disabled><label class="seat-label sold" for="E9" aria-label="Row E Seat 9 sold">×</label><input class="seat sold" type="checkbox" id="E10" disabled><label class="seat-label sold" for="E10" aria-label="Row E Seat 10 sold">×</label><input class="seat" type="checkbox" id="E11"><label class="seat-label" for="E11" aria-label="Row E Seat 11">11</label><input class="seat" type="checkbox" id="E12"><label class="seat-label" for="E12" aria-label="Row E Seat 12">12</label><input class="seat" type="checkbox" id="E13"><label class="seat-label" for="E13" aria-label="Row E Seat 13">13</label><input class="seat" type="checkbox" id="E14"><label class="seat-label" for="E14" aria-label="Row E Seat 14">14</label></div>
<div class="row"><span class="row-label">F</span><input class="seat" type="checkbox" id="F1"><label class="seat-label" for="F1" aria-label="Row F Seat 1">1</label><input class="seat" type="checkbox" id="F2"><label class="seat-label" for="F2" aria-label="Row F Seat 2">2</label><input class="seat" type="checkbox" id="F3"><label class="seat-label" for="F3" aria-label="Row F Seat 3">3</label><input class="seat" type="checkbox" id="F4"><label class="seat-label" for="F4" aria-label="Row F Seat 4">4</label><input class="seat" type="checkbox" id="F5"><label class="seat-label" for="F5" aria-label="Row F Seat 5">5</label><input class="seat sold" type="checkbox" id="F6" disabled><label class="seat-label sold" for="F6" aria-label="Row F Seat 6 sold">×</label><input class="seat sold" type="checkbox" id="F7" disabled><label class="seat-label sold" for="F7" aria-label="Row F Seat 7 sold">×</label><input class="seat sold" type="checkbox" id="F8" disabled><label class="seat-label sold" for="F8" aria-label="Row F Seat 8 sold">×</label><input class="seat sold" type="checkbox" id="F9" disabled><label class="seat-label sold" for="F9" aria-label="Row F Seat 9 sold">×</label><input class="seat" type="checkbox" id="F10"><label class="seat-label" for="F10" aria-label="Row F Seat 10">10</label><input class="seat" type="checkbox" id="F11"><label class="seat-label" for="F11" aria-label="Row F Seat 11">11</label><input class="seat" type="checkbox" id="F12"><label class="seat-label" for="F12" aria-label="Row F Seat 12">12</label><input class="seat" type="checkbox" id="F13"><label class="seat-label" for="F13" aria-label="Row F Seat 13">13</label><input class="seat" type="checkbox" id="F14"><label class="seat-label" for="F14" aria-label="Row F Seat 14">14</label></div>
<div class="row"><span class="row-label">G</span><input class="seat" type="checkbox" id="G1"><label class="seat-label" for="G1" aria-label="Row G Seat 1">1</label><input class="seat" type="checkbox" id="G2"><label class="seat-label" for="G2" aria-label="Row G Seat 2">2</label><input class="seat" type="checkbox" id="G3"><label class="seat-label" for="G3" aria-label="Row G Seat 3">3</label><input class="seat" type="checkbox" id="G4"><label class="seat-label" for="G4" aria-label="Row G Seat 4">4</label><input class="seat" type="checkbox" id="G5"><label class="seat-label" for="G5" aria-label="Row G Seat 5">5</label><input class="seat" type="checkbox" id="G6"><label class="seat-label" for="G6" aria-label="Row G Seat 6">6</label><input class="seat sold" type="checkbox" id="G7" disabled><label class="seat-label sold" for="G7" aria-label="Row G Seat 7 sold">×</label><input class="seat sold" type="checkbox" id="G8" disabled><label class="seat-label sold" for="G8" aria-label="Row G Seat 8 sold">×</label><input class="seat" type="checkbox" id="G9"><label class="seat-label" for="G9" aria-label="Row G Seat 9">9</label><input class="seat" type="checkbox" id="G10"><label class="seat-label" for="G10" aria-label="Row G Seat 10">10</label><input class="seat" type="checkbox" id="G11"><label class="seat-label" for="G11" aria-label="Row G Seat 11">11</label><input class="seat" type="checkbox" id="G12"><label class="seat-label" for="G12" aria-label="Row G Seat 12">12</label><input class="seat" type="checkbox" id="G13"><label class="seat-label" for="G13" aria-label="Row G Seat 13">13</label><input class="seat" type="checkbox" id="G14"><label class="seat-label" for="G14" aria-label="Row G Seat 14">14</label></div>
<div class="row"><span class="row-label">H</span><input class="seat" type="checkbox" id="H1"><label class="seat-label" for="H1" aria-label="Row H Seat 1">1</label><input class="seat" type="checkbox" id="H2"><label class="seat-label" for="H2" aria-label="Row H Seat 2">2</label><input class="seat sold" type="checkbox" id="H3" disabled><label class="seat-label sold" for="H3" aria-label="Row H Seat 3 sold">×</label><input class="seat" type="checkbox" id="H4"><label class="seat-label" for="H4" aria-label="Row H Seat 4">4</label><input class="seat" type="checkbox" id="H5"><label class="seat-label" for="H5" aria-label="Row H Seat 5">5</label><input class="seat" type="checkbox" id="H6"><label class="seat-label" for="H6" aria-label="Row H Seat 6">6</label><input class="seat" type="checkbox" id="H7"><label class="seat-label" for="H7" aria-label="Row H Seat 7">7</label><input class="seat" type="checkbox" id="H8"><label class="seat-label" for="H8" aria-label="Row H Seat 8">8</label><input class="seat" type="checkbox" id="H9"><label class="seat-label" for="H9" aria-label="Row H Seat 9">9</label><input class="seat" type="checkbox" id="H10"><label class="seat-label" for="H10" aria-label="Row H Seat 10">10</label><input class="seat" type="checkbox" id="H11"><label class="seat-label" for="H11" aria-label="Row H Seat 11">11</label><input class="seat sold" type="checkbox" id="H12" disabled><label class="seat-label sold" for="H12" aria-label="Row H Seat 12 sold">×</label><input class="seat" type="checkbox" id="H13"><label class="seat-label" for="H13" aria-label="Row H Seat 13">13</label><input class="seat" type="checkbox" id="H14"><label class="seat-label" for="H14" aria-label="Row H Seat 14">14</label></div>
<div class="row"><span class="row-label">I</span><input class="seat" type="checkbox" id="I1"><label class="seat-label" for="I1" aria-label="Row I Seat 1">1</label><input class="seat" type="checkbox" id="I2"><label class="seat-label" for="I2" aria-label="Row I Seat 2">2</label><input class="seat" type="checkbox" id="I3"><label class="seat-label" for="I3" aria-label="Row I Seat 3">3</label><input class="seat" type="checkbox" id="I4"><label class="seat-label" for="I4" aria-label="Row I Seat 4">4</label><input class="seat" type="checkbox" id="I5"><label class="seat-label" for="I5" aria-label="Row I Seat 5">5</label><input class="seat" type="checkbox" id="I6"><label class="seat-label" for="I6" aria-label="Row I Seat 6">6</label><input class="seat" type="checkbox" id="I7"><label class="seat-label" for="I7" aria-label="Row I Seat 7">7</label><input class="seat" type="checkbox" id="I8"><label class="seat-label" for="I8" aria-label="Row I Seat 8">8</label><input class="seat" type="checkbox" id="I9"><label class="seat-label" for="I9" aria-label="Row I Seat 9">9</label><input class="seat" type="checkbox" id="I10"><label class="seat-label" for="I10" aria-label="Row I Seat 10">10</label><input class="seat" type="checkbox" id="I11"><label class="seat-label" for="I11" aria-label="Row I Seat 11">11</label><input class="seat" type="checkbox" id="I12"><label class="seat-label" for="I12" aria-label="Row I Seat 12">12</label><input class="seat" type="checkbox" id="I13"><label class="seat-label" for="I13" aria-label="Row I Seat 13">13</label><input class="seat" type="checkbox" id="I14"><label class="seat-label" for="I14" aria-label="Row I Seat 14">14</label></div>
<div class="row"><span class="row-label">J</span><input class="seat" type="checkbox" id="J1"><label class="seat-label" for="J1" aria-label="Row J Seat 1">1</label><input class="seat" type="checkbox" id="J2"><label class="seat-label" for="J2" aria-label="Row J Seat 2">2</label><input class="seat" type="checkbox" id="J3"><label class="seat-label" for="J3" aria-label="Row J Seat 3">3</label><input class="seat sold" type="checkbox" id="J4" disabled><label class="seat-label sold" for="J4" aria-label="Row J Seat 4 sold">×</label><input class="seat sold" type="checkbox" id="J5" disabled><label class="seat-label sold" for="J5" aria-label="Row J Seat 5 sold">×</label><input class="seat" type="checkbox" id="J6"><label class="seat-label" for="J6" aria-label="Row J Seat 6">6</label><input class="seat" type="checkbox" id="J7"><label class="seat-label" for="J7" aria-label="Row J Seat 7">7</label><input class="seat" type="checkbox" id="J8"><label class="seat-label" for="J8" aria-label="Row J Seat 8">8</label><input class="seat" type="checkbox" id="J9"><label class="seat-label" for="J9" aria-label="Row J Seat 9">9</label><input class="seat" type="checkbox" id="J10"><label class="seat-label" for="J10" aria-label="Row J Seat 10">10</label><input class="seat sold" type="checkbox" id="J11" disabled><label class="seat-label sold" for="J11" aria-label="Row J Seat 11 sold">×</label><input class="seat sold" type="checkbox" id="J12" disabled><label class="seat-label sold" for="J12" aria-label="Row J Seat 12 sold">×</label><input class="seat" type="checkbox" id="J13"><label class="seat-label" for="J13" aria-label="Row J Seat 13">13</label><input class="seat" type="checkbox" id="J14"><label class="seat-label" for="J14" aria-label="Row J Seat 14">14</label></div>
<div class="row"><span class="row-label">K</span><input class="seat" type="checkbox" id="K1"><label class="seat-label" for="K1" aria-label="Row K Seat 1">1</label><input class="seat" type="checkbox" id="K2"><label class="seat-label" for="K2" aria-label="Row K Seat 2">2</label><input class="seat" type="checkbox" id="K3"><label class="seat-label" for="K3" aria-label="Row K Seat 3">3</label><input class="seat" type="checkbox" id="K4"><label class="seat-label" for="K4" aria-label="Row K Seat 4">4</label><input class="seat" type="checkbox" id="K5"><label class="seat-label" for="K5" aria-label="Row K Seat 5">5</label><input class="seat" type="checkbox" id="K6"><label class="seat-label" for="K6" aria-label="Row K Seat 6">6</label><input class="seat sold" type="checkbox" id="K7" disabled><label class="seat-label sold" for="K7" aria-label="Row K Seat 7 sold">×</label><input class="seat" type="checkbox" id="K8"><label class="seat-label" for="K8" aria-label="Row K Seat 8">8</label><input class="seat" type="checkbox" id="K9"><label class="seat-label" for="K9" aria-label="Row K Seat 9">9</label><input class="seat" type="checkbox" id="K10"><label class="seat-label" for="K10" aria-label="Row K Seat 10">10</label><input class="seat" type="checkbox" id="K11"><label class="seat-label" for="K11" aria-label="Row K Seat 11">11</label><input class="seat" type="checkbox" id="K12"><label class="seat-label" for="K12" aria-label="Row K Seat 12">12</label><input class="seat" type="checkbox" id="K13"><label class="seat-label" for="K13" aria-label="Row K Seat 13">13</label><input class="seat" type="checkbox" id="K14"><label class="seat-label" for="K14" aria-label="Row K Seat 14">14</label></div>
<div class="row"><span class="row-label">L</span><input class="seat" type="checkbox" id="L1"><label class="seat-label" for="L1" aria-label="Row L Seat 1">1</label><input class="seat" type="checkbox" id="L2"><label class="seat-label" for="L2" aria-label="Row L Seat 2">2</label><input class="seat" type="checkbox" id="L3"><label class="seat-label" for="L3" aria-label="Row L Seat 3">3</label><input class="seat" type="checkbox" id="L4"><label class="seat-label" for="L4" aria-label="Row L Seat 4">4</label><input class="seat" type="checkbox" id="L5"><label class="seat-label" for="L5" aria-label="Row L Seat 5">5</label><input class="seat" type="checkbox" id="L6"><label class="seat-label" for="L6" aria-label="Row L Seat 6">6</label><input class="seat" type="checkbox" id="L7"><label class="seat-label" for="L7" aria-label="Row L Seat 7">7</label><input class="seat" type="checkbox" id="L8"><label class="seat-label" for="L8" aria-label="Row L Seat 8">8</label><input class="seat" type="checkbox" id="L9"><label class="seat-label" for="L9" aria-label="Row L Seat 9">9</label><input class="seat" type="checkbox" id="L10"><label class="seat-label" for="L10" aria-label="Row L Seat 10">10</label><input class="seat" type="checkbox" id="L11"><label class="seat-label" for="L11" aria-label="Row L Seat 11">11</label><input class="seat" type="checkbox" id="L12"><label class="seat-label" for="L12" aria-label="Row L Seat 12">12</label><input class="seat" type="checkbox" id="L13"><label class="seat-label" for="L13" aria-label="Row L Seat 13">13</label><input class="seat" type="checkbox" id="L14"><label class="seat-label" for="L14" aria-label="Row L Seat 14">14</label></div>
</section>
<div class="badge-wrap" aria-label="Seats selected"><div class="badge"></div></div>
<div class="total-bar">
<div class="total-css-wrap"><span class="total-label">Total: </span><span class="total-zero">$0.00</span><span class="total-count"></span></div>
<span class="total-js">$0.00</span>
<span class="eur">EUR rate unavailable offline</span>
</div>
</div>
<script>
document.documentElement.classList.add('js');
(function(){
var totalEl=document.querySelector('.total-js');
var seats=document.querySelectorAll('input.seat');
var displayed=0;
var raf=null;
function targetFor(n){return n<5?n*800:n*1150;}
function fmt(c){return '$'+(c/100).toFixed(2);}
function animateTo(target){
if(raf)cancelAnimationFrame(raf);
var start=displayed;
var startTime=null;
var duration=450;
function step(ts){
if(!startTime)startTime=ts;
var p=Math.min(1,(ts-startTime)/duration);
var e=1-Math.pow(1-p,3);
var cur=Math.round(start+(target-start)*e);
displayed=cur;
totalEl.textContent=fmt(cur);
if(p<1){raf=requestAnimationFrame(step);}
}
raf=requestAnimationFrame(step);
}
function update(){
var n=document.querySelectorAll('input.seat:checked').length;
animateTo(targetFor(n));
}
seats.forEach(function(s){s.addEventListener('change',update);});
totalEl.textContent=fmt(0);
})();
</script>
</body>
</html>