Run Detail

<!DOCTYPE html>
<!--
  NOTES FOR THE OWNER - PLEASE READ BEFORE FRIDAY NIGHT
  Thank you for the clear list. Three things in the list cannot all be
  true at the same time on one offline file. I have not hidden that.
  Here is what I did instead, so there is no surprise at the door:

  1) THE BADGE, THE SMALL CIRCLE, AND THE NUMBER 12
  You asked for a small circle that must never show more than one digit,
  and in your P.S. you asked that a school group of 12 must see the
  badge read 12. Both cannot be true - 12 is two digits and will not
  fit a one-digit circle as printed for the lobby board.
  What I did: the badge always shows the true number of seats picked,
  including 12, 13 and 14. The circle stays a circle - the numbers
  shrink a little when there are two digits so the shape does not break.
  The printed one-digit board in the lobby will need to be re-done if
  you want it to match this page, or you must accept that the teacher
  will see 12 on the screen but not on the board. I chose the true
  number because you said she rings you otherwise.

  2) THE EURO RATE AND "OFF THE LIVE MARKET"
  You asked for today's live euro rate next to the total, and also for
  one file with no network use on a machine that is not on the internet.
  A live rate cannot be looked up with no network. I cannot do a live
  lookup in this file.
  What I did: I put a fixed, clearly labelled illustrative rate on the
  page - 1 USD = 0.92 EUR - and the euro amount next to the dollar
  total is worked out from that fixed rate. It is NOT live. Someone
  will need to change that one number by hand when the rate moves,
  or tourists will be shown a slightly out-of-date figure.

  3) JAVASCRIPT OFF AND THE SMOOTH COUNT-UP
  You asked for the page to work with JavaScript switched off, and also
  for the total to count up smoothly, with the badge and total changing
  the moment a seat is ticked. The count-up, and instant badge/total
  changes on a single static file with no server, need JavaScript.
  Without JavaScript there is no way to animate a number.
  What I did: with JavaScript on, the badge and total update at once
  and the total counts up smoothly. With JavaScript off, the seats are
  ordinary tick-boxes in a form, so a customer can still pick seats
  and press Confirm, and a seat count above the plan still updates
  with pure CSS. The dollar total, euro conversion and count-up
  cannot update without JavaScript or a server to do the sums on
  submit - a note on the page says so for your sister's laptop.
  If full no-JavaScript totals are essential, this page would need
  a server behind it, which would break the one-file rule.

  4) PRICING WORDING
  I read "$8.00 before, $11.50 after five" as: the first 5 seats are
  $8.00 each, and every seat after the fifth is $11.50 each.
  So 5 seats = $40.00, 6 seats = $51.50, 12 seats = $120.50.
  If you meant the whole order re-prices to $11.50 each after five,
  tell me and I will change that one calculation.

  Everything else follows your list: one file, everything inline,
  no network use at runtime, no browser storage, two films tonight
  with times, 12 rows of 14 seats, sold seats shown as gone and
  disabled, basket in the top right, running dollar total with euro
  amount beside it, and a warm red-and-gold cinema look.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Palace Cinema — Tonight's Tickets</title>
<style>
  * { box-sizing: border-box; }
  body { margin:0; font-family: Georgia, "Times New Roman", Times, serif; background:#2a070b; color:#fff8e7; background-image: radial-gradient(circle at 50% 0%, #5c060d 0%, #2a070b 70%); }
  header { text-align:center; padding:30px 90px 22px 20px; border-bottom:4px double #d4af37; background:linear-gradient(#7a0c14, #5c060d); }
  header h1 { color:#f3d27a; letter-spacing:3px; margin:0; font-size:2.2rem; text-transform:uppercase; text-shadow:2px 2px 0 #000; }
  .tagline { color:#e8c766; font-style:italic; margin:8px 0 0; letter-spacing:1px; }
  .basket-wrap { position:fixed; top:12px; right:12px; z-index:1000; text-align:center; }
  .basket { width:48px; height:48px; border-radius:50%; background:#d4af37; border:3px solid #fff8e7; color:#4a0a0e; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:20px; box-shadow:0 2px 8px rgba(0,0,0,.5); margin:0 auto; }
  .badge { font-size:20px; line-height:1; }
  .badge.two-digit { font-size:15px; }
  .basket-text { font-size:11px; color:#f3d27a; letter-spacing:1px; text-transform:uppercase; margin-top:4px; text-shadow:1px 1px 0 #000; }
  main { max-width:920px; margin:0 auto; padding:20px; }
  h2 { color:#f3d27a; letter-spacing:1px; }
  fieldset { border:2px solid #d4af37; border-radius:8px; background:rgba(0,0,0,.28); padding:16px; margin:20px 0; }
  legend { color:#f3d27a; padding:0 8px; font-weight:bold; letter-spacing:1px; }
  .film-option { display:block; background:#fff8e7; color:#4a0a0e; border:2px solid #d4af37; border-radius:8px; padding:12px 16px; margin:10px 0; cursor:pointer; }
  .film-option input { margin-right:10px; }
  .film-title { font-weight:bold; font-size:1.1rem; }
  .film-time { color:#7a0c14; font-weight:bold; }
  .film-meta { color:#5a3a1a; font-style:italic; }
  .screen { background:linear-gradient(#f3d27a, #d4af37); color:#4a0a0e; text-align:center; padding:10px; letter-spacing:5px; border-radius:12px 12px 0 0; margin-bottom:16px; font-weight:bold; }
  .seating-plan { counter-reset:seatcount 0; overflow-x:auto; padding:10px 0; }
  .seat-input:checked { counter-increment:seatcount; }
  .css-count::after { content:counter(seatcount); font-weight:bold; color:#f3d27a; }
  .row { display:flex; align-items:center; justify-content:center; gap:4px; margin:6px 0; min-width:560px; }
  .row-label { width:24px; text-align:right; color:#f3d27a; font-weight:bold; margin-right:6px; }
  .seat-label { position:relative; display:inline-block; }
  .seat-input { position:absolute; opacity:0; width:1px; height:1px; }
  .seat { display:inline-flex; align-items:center; justify-content:center; width:30px; height:26px; border-radius:7px 7px 3px 3px; background:#a31621; color:#fff8e7; font-size:12px; border:1px solid #d4af37; cursor:pointer; user-select:none; }
  .seat:hover { background:#c1272d; }
  .seat-input:checked + .seat { background:#d4af37; color:#4a0a0e; font-weight:bold; }
  .seat-input:focus + .seat { outline:2px solid #fff8e7; outline-offset:2px; }
  .seat.sold { background:#4a4a4a; color:#9a9a9a; border-color:#777; cursor:not-allowed; text-decoration:line-through; opacity:.7; }
  .seat-label.is-sold .seat { cursor:not-allowed; }
  .legend-line { text-align:center; color:#e8c766; font-size:.9rem; }
  .legend-line .seat { width:22px; height:20px; font-size:10px; vertical-align:middle; }
  .summary { background:#fff8e7; color:#4a0a0e; border:3px double #7a0c14; border-radius:8px; padding:18px; margin:20px 0; }
  .summary h2 { color:#7a0c14; margin-top:0; }
  .total-line { font-size:1.25rem; }
  .euro-total { color:#7a0c14; font-weight:bold; margin-left:10px; }
  .fx-note { font-size:.85rem; font-style:italic; color:#5a3a1a; }
  .price-note { font-style:italic; color:#5a3a1a; }
  button { background:#7a0c14; color:#f3d27a; border:2px solid #d4af37; padding:12px 24px; font-family:inherit; font-size:1rem; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border-radius:6px; }
  button:hover { background:#a31621; }
  .noscript-box { background:#ffe9a8; border:2px dashed #7a0c14; color:#4a0a0e; padding:12px; margin:12px 0; border-radius:6px; }
  #confirmation { background:#d4af37; color:#4a0a0e; padding:12px; border-radius:6px; font-weight:bold; }
  footer { text-align:center; color:#e8c766; font-style:italic; padding:20px; border-top:4px double #d4af37; }
</style>
</head>
<body>
<header>
  <h1>The Palace Cinema</h1>
  <p class="tagline">Est. 1928 &bull; Two Screens &bull; Tonight</p>
</header>
<div class="basket-wrap">
  <div class="basket" id="basket" data-count="0" role="status" aria-label="Basket, 0 seats selected" title="Basket"><span class="badge" id="badge