Run Detail

<!DOCTYPE html>
<!--
  IMPORTANT NOTES - things I could not do exactly as asked, and choices I made:

  1. BADGE CONFLICT (look vs. school bookings): You asked for a SMALL circle that must NEVER show more than a single digit, AND in the P.S. that when 12 seats are picked the badge has to read 12. Both cannot be true at once. I have prioritised the P.S. functional requirement: the badge WILL show 12, 13, 14 etc. The circle is styled as a small circle for 0-9, but it will widen slightly for two digits so the number stays readable. If you keep the printed board, that board will not match for groups of 10+. You will need to reprint it or accept the wider badge.

  2. LIVE EURO RATE vs. NO NETWORK: You asked for today's euro rate off the live market, AND for no network at runtime / one offline file with no external calls. A live market rate is impossible offline. I have used a FIXED illustrative rate of 1 USD = 0.92 EUR, clearly labelled on the page as fixed/not live. You will need to update that one number in the code manually each day if you want it current. It will not fetch anything.

  3. COUNT-UP ANIMATION vs. JAVASCRIPT OFF: A smooth count-up of the total requires JavaScript. With JavaScript switched off it cannot animate - the total simply will not update at all without JS, because there is no server/backend in a single file to calculate it. With JS on, the count-up works. With JS off, you can still see the films, the seating plan, and tick seats, but the basket count/total/euro figure will stay at 0. A true no-JS checkout would need a server to receive the form and return a calculated page.

  4. NO BACKEND / NO STORAGE: As requested there is no localStorage/cookies/IndexedDB and no network submission. This page therefore does not actually reserve, hold, or sell tickets, and selections are lost on reload. It is a front-end selection page only. You will still need a real booking/payment system behind it for Friday night.

  5. PRICING INTERPRETATION: I interpreted "$11.50 after five, $8.00 before" as: the first 5 seats cost $8.00 each, every seat after the 5th costs $11.50 each. E.g. 5 seats = $40.00, 6 seats = $51.50, 12 seats = $120.50. Tell me if you meant a flat price change instead.

  6. FILMS/TIMES/SOLD SEATS: Tonight's two films, times, and which seats are sold are placeholders - I had to invent them. Replace the FILMS array / sold-seat pattern in the code with your real listings before use.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Crouton Alpha Cinema — Tickets</title>
<style>
  :root{--red:#7a1220;--red2:#9b1b2e;--gold:#c9a227;--gold2:#e8c766;--cream:#f7ecd2;--ink:#2b1608}
  *{box-sizing:border-box}
  body{margin:0;font-family:Georgia,'Times New Roman',serif;background:#2b0a0f;color:var(--ink);background-image:radial-gradient(circle at 50% -10%,#5a0f1a 0%,#2b0a0f 60%)}
  header{position:relative;background:linear-gradient(180deg,var(--red2),var(--red));color:var(--cream);text-align:center;padding:28px 90px 22px 20px;border-bottom:4px double var(--gold)}
  header h1{margin:0;font-size:2.2rem;letter-spacing:.08em;color:var(--gold2);text-shadow:0 2px 0 #000}
  header p{margin:6px 0 0;font-style:italic;color:#f3d9a0}
  .basket{position:absolute;top:16px;right:16px;width:64px;text-align:center;color:var(--cream);font-size:.8rem}
  .basket .icon{font-size:1.6rem;line-height:1}
  .badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:50%;background:var(--gold);color:#3a0a0f;font-weight:bold;border:2px solid #fff3c4;font-family:Arial,sans-serif;font-size:1rem;margin-top:4px}
  main{max-width:980px;margin:0 auto;padding:20px}
  .card{background:var(--cream);border:3px solid var(--gold);border-radius:10px;padding:18px;margin:16px 0;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  h2{color:var(--red);margin-top:0;border-bottom:1px solid var(--gold);padding-bottom:6px}
  .film{display:block;border:2px solid var(--gold);border-radius:8px;padding:12px;margin:10px 0;background:#fff8e6;cursor:pointer}
  .film input{margin-right:8px}
  .film strong{font-size:1.15rem;color:var(--red)}
  .times{color:#6b4a12;margin-left:8px}
  .screen{background:#3a0a0f;color:var(--gold2);text-align:center;padding:8px;border-radius:6px;letter-spacing:.4em;margin:14px 0}
  .seats{display:grid;grid-template-columns:28px repeat(14,1fr);gap:5px;align-items:center}
  .rowlabel{text-align:center;font-weight:bold;color:var(--red)}
  .seat{position:relative}
  .seat input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
  .seat span{display:flex;align-items:center;justify-content:center;height:30px;border-radius:6px 6px 2px 2px;background:#fff;border:2px solid var(--gold);font-family:Arial,sans-serif;font-size:.75rem;color:#7a5a12}
  .seat input:checked + span{background:var(--red2);color:#fff;border-color:var(--red)}
  .seat input:focus-visible + span{outline:3px solid #000}
  .seat input:disabled + span{background:#b8a88a;color:#6b5d43;border-color:#999;text-decoration:line-through;cursor:not-allowed}
  .seat input:disabled{cursor:not-allowed}
  .legend{font-size:.9rem;margin-top:10px}
  .totals{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;background:#3a0a0f;color:var(--cream);border:3px solid var(--gold);border-radius:10px;padding:16px}
  .totals .usd{font-size:1.8rem;color:var(--gold2);font-weight:bold}
  .totals .eur{font-size:1.1rem;color:#f3d9a0}
  .note{font-size:.85rem;font-style:italic}
  button{background:var(--red2);color:#fff;border:2px solid var(--gold);padding:10px 18px;border-radius:8px;font-family:Georgia,serif;font-size:1rem;cursor:pointer}
  noscript .card{background:#fff3c4}
</style>
</head>
<body>
<header>
  <h1>★ CROUTTON ALPHA CINEMA ★</h1>
  <p>Two screens &middot; Tonight's Performances</p>
  <div class="basket" aria-label="Basket">
    <div class="icon">🧺</div>
    Basket<br>
    <span class="badge" id="badge">0</span>
  </div>
</header>

<main>
  <noscript><div class="card"><strong>JavaScript is off:</strong> you can view films and tick seats below, but the basket total cannot be calculated without JavaScript or a server. Please ask at the counter or enable JavaScript for the running total.</div></noscript>

  <form id="booking" method="get" action="">
    <section class="card">
      <h2>1. Choose a film</h2>
      <label class="film"><input type="radio" name="film" value="The Golden Reel" checked> <strong>The Golden Reel</strong> <span class="times">— 17:30 &amp; 20:15</span></label>
      <label class="film"><input type="radio" name="film" value="Midnight at the Palace"> <strong>Midnight at the Palace</strong> <span class="times">— 18:00 &amp; 21:00</span></label>
    </section>

    <section class="card">
      <h2>2. Choose your seats</h2>
      <div class="screen">— SCREEN —</div>
      <div class="seats" id="seats" aria-label="Seating plan, 12 rows, 14 seats per row"></div>
      <p class="legend">Gold = available &nbsp;·&nbsp; Red = your selection &nbsp;·&nbsp; Grey / crossed out = already sold</p>
    </section>

    <section class="totals" aria-live="polite">
      <div>
        <div>Seats selected: <strong id="count">0</strong></div>
        <div class="usd">$<span id="usd">0.00</span></div>
        <div class="eur">≈ €<span id="eur">0.00</span> <span class="note">(fixed rate 1 USD = 0.92 EUR — not live, see note at top of file)</span></div>
      </div>
      <div>
        <div class="note">First 5 seats $8.00 each, then $11.50 each</div><br>
        <button type="submit">Continue to payment</button>
      </div>
    </section>
  </form>
  <p style="color:#f3d9a0;text-align:center" class="note">This page selects seats only — it does not reserve or charge. Please confirm at the counter.</p>
</main>

<script>
(function(){
  var ROWS=12, COLS=14, RATE=0.92;
  var wrap=document.getElementById('seats');
  var letters='ABCDEFGHIJKL';
  // Placeholder sold-seat pattern: replace with real sold seats
  function isSold(r,c){ return ((r*COLS+c)%7===3) || (r===0 && c>10); }
  for(var r=0;r<ROWS;r++){
    var lab=document.createElement('div'); lab.className='rowlabel'; lab.textContent=letters[r]; wrap.appendChild(lab);
    for(var c=0;c<COLS;c++){
      var sold=isSold(r,c);
      var label=document.createElement('label'); label.className='seat';
      var input=document.createElement('input');
      input.type='checkbox'; input.name='seat'; input.value=letters[r]+(c+1);
      input.setAttribute('aria-label','Row '+letters[r]+' seat '+(c+1)+(sold?' (sold)':''));
      if(sold) input.disabled=true;
      var span=document.createElement('span'); span.textContent=(c+1);
      label.appendChild(input); label.appendChild(span); wrap.appendChild(label);
    }
  }
  var badge=document.getElementById('badge'), countEl=document.getElementById('count'),
      usdEl=document.getElementById('usd'), eurEl=document.getElementById('eur');
  var displayed=0, raf=null;
  function price(n){ return n<=5 ? n*8 : 5*8 + (n-5)*11.5; }
  function fmt(n){ return n.toFixed(2); }
  function animateTo(target){
    if(raf) cancelAnimationFrame(raf);
    var start=displayed, t0=null, dur=450;
    function step(ts){
      if(!t0) t0=ts;
      var p=Math.min(1,(ts-t0)/dur);
      displayed=start+(target-start)*p;
      usdEl.textContent=fmt(displayed);
      eurEl.textContent=fmt(displayed*RATE);
      if(p<1) raf=requestAnimationFrame(step); else displayed=target;
    }
    raf=requestAnimationFrame(step);
  }
  function update(){
    var n=wrap.querySelectorAll('input:checked').length;
    badge.textContent=n; // Will show 12, 13, 14... see conflict note at top
    countEl.textContent=n;
    animateTo(price(n));
  }
  wrap.addEventListener('change',update);
  update();
})();
</script>
</body>
</html>