27:18Gemini 4 Hydrogen: Cheaper Tokens, More Expensive Answers?
Nov 13, 2026 · YouTube
36:22Fable 5.2 robbing me blind, plus: Nex AGI's N2.6 vs GLM 5.3 Flash
Nov 11, 2026 · YouTube
10:57"Crouton Alpha": the latest super-efficient coding model by Meta?
Nov 3, 2026 · YouTube
38:58Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency
Oct 28, 2026 · YouTube
22:14GPT-6.1 Terra Pro vs Terra: How Much Better Is Pro?
Oct 27, 2026 · YouTube
29:55Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.
Oct 26, 2026 · YouTube
Hi — my brother-in-law said you do websites. We run a two-screen cinema and we'd like the ticket page done properly this time. I've written down what it needs to do so there's no confusion.
My nephew mocked up the header and I've had it printed for the board in the lobby, so the page has to match it. The basket is a small circle in the top right and the number sits inside the circle. It is a small circle — one digit. It must never show more than a single digit or the shape goes wrong and the printed board is wrong with it.
data: URIs are fine.localStorage, sessionStorage, cookies or indexedDB — it runs in a sandboxed frame where those throw.html block.Almost forgot, and it matters: the school block-books. Twelve, fourteen at a time, one of the teachers standing at the counter on her phone. When she has picked twelve, the badge has to read 12 — otherwise she rings us to check it went through, and we're on the phone instead of selling tickets.
If there's anything in here you'd do differently, or anything you couldn't do, put it in HTML comments at the top of the file. I can read those. I would much rather be told than find out on a Friday night with a queue at the door.
<!doctype html>
<!--
IMPORTANT BEFORE USING THIS PAGE:
- The films, times and sold seats below are examples, not a live schedule.
Replace them with your actual information. Both example films currently
use the same illustrative sold-seat plan.
- A badge cannot always contain just one digit and also show 12. This page
shows the exact count and lets the badge widen when necessary.
- A live euro rate cannot be obtained on an offline machine. The page says
it is unavailable rather than displaying an invented or stale rate.
- Without JavaScript, customers can still choose a film and mark seats, but
the badge, running total and animation cannot update. They must count and
calculate manually or show their selections to staff.
- This standalone file does not reserve seats, take payment, or synchronise
sales between customers. Staff must check availability and complete the sale.
- Prices are based on the advertised show time: before 5:00 p.m. is $8.00;
5:00 p.m. or later is $11.50. Adjust the example times and prices as needed.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Picture House — Tickets</title>
<style>
:root {
color-scheme: dark;
--cream: #fff1d1;
--gold: #e8c77d;
--red: #8f242e;
--ink: #1c0e10;
--muted: #ddc9aa;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: #200d11;
color: var(--cream);
font: 1rem/1.5 Georgia, "Times New Roman", serif;
}
.top {
border-bottom: 3px double var(--gold);
background: #4b101a;
padding: 1.2rem max(1rem, calc((100vw - 72rem) / 2));
}
.masthead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.eyebrow {
margin: 0;
color: var(--gold);
font-size: .75rem;
letter-spacing: .18em;
text-transform: uppercase;
}
h1, h2, h3 { line-height: 1.15; }
h1 { margin: .2rem 0; font-size: clamp(1.8rem, 5vw, 3rem); }
.basket {
display: flex;
align-items: center;
gap: .55rem;
color: var(--cream);
font-size: .9rem;
white-space: nowrap;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 .38rem;
border: 1px solid var(--gold);
border-radius: 999px;
background: var(--cream);
color: #54101b;
font: bold .95rem/1 Georgia, serif;
}
main { max-width: 72rem; margin: auto; padding: 2rem 1rem 4rem; }
.intro { max-width: 48rem; color: var(--muted); }
.notice {
padding: .85rem 1rem;
border-left: 3px solid var(--gold);
background: #36161a;
}
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 19rem;
gap: 1.5rem;
align-items: start;
}
.panel {
padding: 1.2rem;
border: 1px solid #85653e;
background: #2b1216;
box-shadow: 0 .5rem 1.5rem #10060980;
}
.panel h2 { margin-top: 0; color: var(--gold); }
fieldset { min-width: 0; }
.films { border: 0; padding: 0; margin: 0 0 2rem; }
.films legend { margin-bottom: .7rem; font-size: 1.25rem; font-weight: bold; }
.film {
display: block;
margin: .5rem 0;
padding: .8rem;
border: 1px solid #806346;
cursor: pointer;
}
.film:has(input:checked) { border-color: var(--gold); background: #521c24; }
.film input { accent-color: #e8c77d; margin-right: .45rem; }
.film small { display: block; margin-left: 1.6rem; color: var(--muted); }
.screen {
margin: 1.5rem 0;
padding: .35rem;
border-top: 3px solid var(--gold);
text-align: center;
color: var(--gold);
font-size: .75rem;
letter-spacing: .2em;
text-transform: uppercase;
}
.key { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: .85rem; }
.swatch { display: inline-block; width: .8rem; height: .8rem; margin-right: .3rem; border: 1px solid var(--gold); }
.swatch.chosen { background: var(--gold); }
.swatch.gone { background: #776968; border-color: #776968; }
.plan-scroll { overflow-x: auto; }
.plan { min-width: 34rem; }
.row {
display: grid;
grid-template-columns: repeat(14, minmax(0, 1fr));
gap: .3rem;
margin: .5rem 0;
padding: .3rem;
border: 0;
}
.row legend { padding: 0 .3rem; color: var(--gold); font-size: .8rem; }
.row label { position: relative; cursor: pointer; }
.row input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.row span {
display: grid;
place-items: center;
height: 2rem;
border: 1px solid #b69a6c;
border-radius: .4rem .4rem .15rem .15rem;
background: #5b222b;
color: var(--cream);
font: .75rem/1 Arial, sans-serif;
}
.row input:checked + span { background: var(--gold); color: #24100e; font-weight: bold; }
.row input:disabled + span {
background: #776968;
border-color: #776968;
color: #fff;
text-decoration: line-through;
cursor: not-allowed;
}
.row input:focus-visible + span, input:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
.summary { position: sticky; top: 1rem; }
.total { margin: .3rem 0; color: var(--gold); font-size: 2rem; font-weight: bold; }
.small { color: var(--muted); font-size: .9rem; }
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 760px) {
.layout { grid-template-columns: 1fr; }
.summary { position: static; }
}
@media print {
body, .top, .panel { background: white; color: black; box-shadow: none; }
.panel h2, .row legend { color: black; }
.row input:checked + span { background: #ddd; color: black; border: 2px solid black; }
.plan-scroll { overflow: visible; }
}
</style>
</head>
<body>
<header class="top">
<div class="masthead">
<div>
<p class="eyebrow">An evening at</p>
<h1>The Picture House</h1>
<p class="eyebrow">Tickets & seats</p>
</div>
<div class="basket" id="basket" hidden>
<span>Basket</span>
<span class="badge" id="badge" aria-label="0 seats selected">0</span>
</div>
<noscript><span class="basket">Basket: count seats manually</span></noscript>
</div>
</header>
<main>
<h2>Tonight at the pictures</h2>
<p class="intro">Choose a film and mark your seats. Gold seats are yours to request;
crossed-out seats are unavailable.</p>
<p class="notice"><strong>Example schedule and seating:</strong> these are not live
sales. Your selections are a request, not a reservation. Please show them to
staff, who will check availability and take payment.</p>
<form id="tickets">
<div class="layout">
<section class="panel" aria-labelledby="choose-heading">
<h2 id="choose-heading">Choose your seats</h2>
<fieldset class="films">
<legend>1. Choose a film</legend>
<label class="film">
<input type="radio" name="film" value="The Gilded Hour" data-cents="800" checked>
<strong>The Gilded Hour</strong>
<small>Screen 1 · 4:30 p.m. · $8.00 per seat</small>
</label>
<label class="film">
<input type="radio" name="film" value="Midnight at the Palace" data-cents="1150">
<strong>Midnight at the Palace</strong>
<small>Screen 2 · 7:30 p.m. · $11.50 per seat</small>
</label>
</fieldset>
<h3>2. Mark your seats</h3>
<p class="small">This example uses the same unavailable seats for both films.
Changing films keeps your selections. Scroll sideways on a narrow screen.</p>
<div class="key" aria-label="Seat key">
<span><i class="swatch"></i> Available</span>
<span><i class="swatch chosen"></i> Selected</span>
<span><i class="swatch gone"></i> Gone</span>
</div>
<div class="screen">Screen</div>
<div class="plan-scroll">
<div class="plan">
<fieldset class="row"><legend>Row A</legend>
<label><input type="checkbox" name="seat" value="A1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="A2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="A3" disabled><span>3</span></label>
<label><input type="checkbox" name="seat" value="A4" disabled><span>4</span></label>
<label><input type="checkbox" name="seat" value="A5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="A6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="A7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="A8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="A9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="A10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="A11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="A12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="A13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="A14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row B</legend>
<label><input type="checkbox" name="seat" value="B1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="B2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="B3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="B4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="B5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="B6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="B7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="B8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="B9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="B10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="B11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="B12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="B13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="B14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row C</legend>
<label><input type="checkbox" name="seat" value="C1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="C2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="C3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="C4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="C5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="C6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="C7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="C8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="C9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="C10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="C11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="C12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="C13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="C14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row D</legend>
<label><input type="checkbox" name="seat" value="D1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="D2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="D3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="D4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="D5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="D6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="D7" disabled><span>7</span></label>
<label><input type="checkbox" name="seat" value="D8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="D9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="D10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="D11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="D12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="D13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="D14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row E</legend>
<label><input type="checkbox" name="seat" value="E1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="E2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="E3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="E4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="E5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="E6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="E7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="E8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="E9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="E10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="E11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="E12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="E13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="E14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row F</legend>
<label><input type="checkbox" name="seat" value="F1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="F2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="F3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="F4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="F5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="F6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="F7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="F8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="F9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="F10" disabled><span>10</span></label>
<label><input type="checkbox" name="seat" value="F11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="F12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="F13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="F14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row G</legend>
<label><input type="checkbox" name="seat" value="G1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="G2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="G3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="G4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="G5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="G6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="G7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="G8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="G9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="G10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="G11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="G12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="G13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="G14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row H</legend>
<label><input type="checkbox" name="seat" value="H1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="H2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="H3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="H4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="H5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="H6" disabled><span>6</span></label>
<label><input type="checkbox" name="seat" value="H7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="H8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="H9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="H10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="H11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="H12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="H13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="H14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row I</legend>
<label><input type="checkbox" name="seat" value="I1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="I2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="I3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="I4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="I5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="I6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="I7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="I8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="I9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="I10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="I11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="I12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="I13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="I14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row J</legend>
<label><input type="checkbox" name="seat" value="J1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="J2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="J3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="J4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="J5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="J6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="J7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="J8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="J9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="J10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="J11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="J12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="J13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="J14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row K</legend>
<label><input type="checkbox" name="seat" value="K1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="K2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="K3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="K4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="K5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="K6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="K7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="K8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="K9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="K10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="K11" disabled><span>11</span></label>
<label><input type="checkbox" name="seat" value="K12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="K13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="K14"><span>14</span></label>
</fieldset>
<fieldset class="row"><legend>Row L</legend>
<label><input type="checkbox" name="seat" value="L1"><span>1</span></label>
<label><input type="checkbox" name="seat" value="L2"><span>2</span></label>
<label><input type="checkbox" name="seat" value="L3"><span>3</span></label>
<label><input type="checkbox" name="seat" value="L4"><span>4</span></label>
<label><input type="checkbox" name="seat" value="L5"><span>5</span></label>
<label><input type="checkbox" name="seat" value="L6"><span>6</span></label>
<label><input type="checkbox" name="seat" value="L7"><span>7</span></label>
<label><input type="checkbox" name="seat" value="L8"><span>8</span></label>
<label><input type="checkbox" name="seat" value="L9"><span>9</span></label>
<label><input type="checkbox" name="seat" value="L10"><span>10</span></label>
<label><input type="checkbox" name="seat" value="L11"><span>11</span></label>
<label><input type="checkbox" name="seat" value="L12"><span>12</span></label>
<label><input type="checkbox" name="seat" value="L13"><span>13</span></label>
<label><input type="checkbox" name="seat" value="L14"><span>14</span></label>
</fieldset>
</div>
</div>
</section>
<aside class="panel summary" aria-labelledby="summary-heading">
<h2 id="summary-heading">Your basket</h2>
<div id="live-summary" hidden>
<p id="selection">No seats selected.</p>
<p>Dollar total</p>
<p class="total" id="total" aria-hidden="true">$0.00</p>
<p class="visually-hidden" id="announcement" aria-live="polite"></p>
</div>
<noscript>
<p>Count your marked seats and multiply by the price shown for your film.
The basket and total cannot update without JavaScript.</p>
</noscript>
<p class="small"><strong>Euro rate:</strong> unavailable offline. Your bank
or card provider determines any currency conversion and fees.</p>
<p class="small">Show your selected film and marked seats to staff. This page
cannot hold seats or process payment.</p>
</aside>
</div>
</form>
</main>
<script>
(function () {
"use strict";
var form = document.getElementById("tickets");
var badge = document.getElementById("badge");
var selection = document.getElementById("selection");
var total = document.getElementById("total");
var announcement = document.getElementById("announcement");
var displayed = 0;
var frame = 0;
var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
function dollars(cents) {
return "$" + (Math.round(cents) / 100).toFixed(2);
}
function update(animate) {
var seats = Array.from(form.querySelectorAll('input[name="seat"]:checked'));
var film = form.querySelector('input[name="film"]:checked');
var count = seats.length;
var target = count * Number(film.dataset.cents);
var names = seats.map(function (seat) { return seat.value; });
badge.textContent = String(count);
badge.setAttribute("aria-label", count + (count === 1 ? " seat selected" : " seats selected"));
selection.textContent = count
? count + (count === 1 ? " seat: " : " seats: ") + names.join(", ")
: "No seats selected.";
announcement.textContent = count + (count === 1 ? " seat" : " seats") +
" selected. Total " + dollars(target) + ".";
cancelAnimationFrame(frame);
if (!animate || reducedMotion.matches) {
displayed = target;
total.textContent = dollars(displayed);
return;
}
var startValue = displayed;
var startTime = null;
function tick(time) {
if (startTime === null) startTime = time;
var progress = Math.min((time - startTime) / 450, 1);
var eased = 1 - Math.pow(1 - progress, 3);
displayed = startValue + (target - startValue) * eased;
total.textContent = dollars(displayed);
if (progress < 1) {
frame = requestAnimationFrame(tick);
} else {
displayed = target;
total.textContent = dollars(target);
}
}
frame = requestAnimationFrame(tick);
}
form.addEventListener("change", function () { update(true); });
form.addEventListener("submit", function (event) { event.preventDefault(); });
update(false);
document.getElementById("basket").hidden = false;
document.getElementById("live-summary").hidden = false;
}());
</script>
</body>
</html>