more style tweaks; expand enpoints in readme

README.md

@@ -18,4 +18,6 @@ The endpoint serves the 10 upcoming screenings for the day. The frontend automat
 
 * GET `/admin` - upload form protected with Basic Auth.
 * POST `/admin/upload` - upload endpoint protected with Basic Auth
+* GET `/info` - serves desk info endpoint
 * GET `/api/screenings` - serves JSON with upcoming 10 films for today
+* GET `/api/screenings/prices` - serves JSON with pricing data

fdhview/static/info.js

@@ -13,7 +13,7 @@ function kijkwijzerIcons(codes) {
 }
 
 function renderFilms(films) {
-  document.getElementById("films").innerHTML = films.map(f => {
+  const rows = (films || []).map(f => {
     const isBoutique = f.screen === "6";
     const ratio = f.seats_sold / f.seats_total;
     const start = new Date(f.start);          // "2026-10-13T18:00:00" parses as local time
@@ -34,12 +34,14 @@ function renderFilms(films) {
           ${isBoutique
             ? `<span class="pill">Zaal 6 - Boutique Cinema</span>`
             : `<span class="zaal">Zaal ${f.screen}</span>`}
-          ${f.en_subs ? "<span>EN subs</span>" : ""}
+          ${f.en_subs ? "<span class='subs'>EN subs</span>" : ""}
         </div>
       </div>
       ${badge}
     </div>`;
   }).join("");
+  document.getElementById("films").innerHTML =
+  rows + `<div class="film" "film-spacer" aria-hidden="true"></div>`;
 }
 function renderPrices(prices) {
   const row = p => `<div class="price-row"><span>${p.label}</span><span class="price">${p.price}</span></div>`;

fdhview/static/style.css

@@ -14,14 +14,14 @@ body {
   color: var(--ink);
   overflow: hidden;
 }
-.screen { display: grid; grid-template-columns: 1fr 420px; height: 100vh; }
+.screen { display: grid; grid-template-columns: 1fr 30%; height: 100vh; }
 
 /* ---------- left: film list ---------- */
 .programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; }
 .programme h1 {
-  font-size: 92px; font-weight: 600; letter-spacing: 6px;
+  font-size: 122px; font-weight: 600; letter-spacing: 6px;
   text-transform: uppercase; line-height: 1;
-  margin-bottom: -27px;      /* was 18px — lets the list overlap the letters */
+  margin-bottom: -35px;
   position: relative; z-index: 0;
 }
 .film {
@@ -33,6 +33,7 @@ body {
   padding: 16px 0 18px;
   border-top: 1px solid var(--rule);
 }
+.film-spacer { min-height: 0; padding: 0; }
 .times { line-height: 1.25; }
 .times .start { font-size: 20px; font-weight: 600; }
 .times .end   { font-size: 20px; color: var(--muted); }
@@ -67,6 +68,9 @@ body {
   letter-spacing: 1px;
   text-transform: none; /* "Boutique Cinema" reads like the photo */
 }
+.subs {
+  margin-left: 18px;
+}
 .badge-last {
   justify-self: end; align-self: start; margin-top: -16px;
   background: var(--badge); color: #fff;
@@ -75,7 +79,12 @@ body {
 }
 
 /* ---------- right: sidebar ---------- */
-.sidebar { background: var(--bg-side); padding: 30px 32px; display: flex; flex-direction: column; }
+.sidebar {
+  background: var(--bg-side);
+  padding: 50px 50px;
+  display: flex;
+  flex-direction: column;
+}
 .sidebar .top {
   display: grid;
   grid-template-columns: auto 1fr;