Ship gallery assets as LFS tar (fix broken images)

static/index.html

@@ -357,6 +357,52 @@
     border-bottom: 1px dotted var(--text-dim); white-space: nowrap;
   }
   .pick-row a.plink:hover { color: var(--accent); border-color: var(--accent); }
+  .look-card {
+    position: relative; border-radius: 10px; overflow: hidden;
+    border: 1.5px solid var(--line); cursor: pointer; flex: 0 0 auto;
+    transition: border-color .12s, transform .1s;
+  }
+  .look-card:hover { border-color: var(--text-dim); transform: translateY(-1px); }
+  .look-card.sel { border-color: var(--accent); }
+  .look-card img.bg { width: 100%; height: 96px; object-fit: cover; display: block; }
+  .look-card.film img.bg { height: 76px; }
+  .look-card .ov {
+    position: absolute; left: 0; right: 0; bottom: 0;
+    padding: 20px 10px 7px;
+    background: linear-gradient(transparent, rgba(0,0,0,.85));
+  }
+  .look-card .ov .pname { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }
+  .look-card .ov .pmeta { font-size: 10.5px; color: rgba(255,255,255,.72); margin-top: 1px; }
+  .look-card a.can-btn {
+    position: absolute; right: 7px; bottom: 7px; z-index: 3;
+    display: block; line-height: 0;
+    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
+    transition: transform .12s;
+  }
+  .look-card a.can-btn:hover { transform: scale(1.12); }
+  .look-card.sel::after {
+    content: "✓"; position: absolute; top: 7px; right: 7px;
+    width: 20px; height: 20px; border-radius: 50%;
+    background: var(--accent); color: #17110a;
+    font-size: 12px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .input-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
+  .input-grid .in-card {
+    position: relative; border-radius: 8px; overflow: hidden;
+    border: 1.5px solid var(--line); cursor: pointer;
+    transition: border-color .12s;
+  }
+  .input-grid .in-card:hover { border-color: var(--text-dim); }
+  .input-grid .in-card.sel { border-color: var(--accent); }
+  .input-grid .in-card img { width: 100%; height: 64px; object-fit: cover; display: block; }
+  .input-grid .in-card.sel::after {
+    content: "✓"; position: absolute; top: 5px; right: 5px;
+    width: 17px; height: 17px; border-radius: 50%;
+    background: var(--accent); color: #17110a;
+    font-size: 10.5px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center;
+  }
   .result-pair { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
   .result-pair img { height: 44px; width: 66px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
   .live-hint {
@@ -561,7 +607,7 @@
 
         <div>
           <div class="demo-step" style="margin-bottom:10px"><b>2</b>&nbsp; Choose an input photo</div>
-          <div class="ref-list tall" id="inputList"></div>
+          <div class="input-grid" id="inputList"></div>
         </div>
 
         <div>
@@ -1383,15 +1429,15 @@
         url: 'https://www.pandacamera.com/products/escura-showa-400-iso-30exp-135-35mm-color-negative-film' },
     ];
     const MOVIES = [
-      { file: 'static/demo/ref.jpg', title: 'Happy Together', meta: '1997 · Wong Kar-wai' },
-      { file: 'static/movies/mov_01.jpg', title: 'In the Mood for Love', meta: '2000 · Wong Kar-wai' },
-      { file: 'static/movies/mov_02.jpg', title: 'Days of Being Wild', meta: '1990 · Wong Kar-wai' },
-      { file: 'static/movies/mov_03.jpg', title: 'Close-Up', meta: '1990 · Abbas Kiarostami' },
-      { file: 'static/movies/mov_04.jpg', title: 'The Grand Budapest Hotel', meta: '2014 · Wes Anderson' },
-      { file: 'static/movies/mov_05.jpg', title: 'Barry Lyndon', meta: '1975 · Stanley Kubrick' },
-      { file: 'static/movies/mov_06.jpg', title: 'The Good, the Bad and the Ugly', meta: '1966 · Sergio Leone' },
-      { file: 'static/movies/mov_07.jpg', title: 'A Touch of Zen', meta: '1971 · King Hu' },
-      { file: 'static/movies/mov_08.jpg', title: 'Kagemusha', meta: '1980 · Akira Kurosawa' },
+      { id: 'hap', file: 'static/demo/ref.jpg', title: 'Happy Together', meta: '1997 · Wong Kar-wai' },
+      { id: 'm1', file: 'static/movies/mov_01.jpg', title: 'In the Mood for Love', meta: '2000 · Wong Kar-wai' },
+      { id: 'm2', file: 'static/movies/mov_02.jpg', title: 'Days of Being Wild', meta: '1990 · Wong Kar-wai' },
+      { id: 'm3', file: 'static/movies/mov_03.jpg', title: 'Close-Up', meta: '1990 · Abbas Kiarostami' },
+      { id: 'm4', file: 'static/movies/mov_04.jpg', title: 'The Grand Budapest Hotel', meta: '2014 · Wes Anderson' },
+      { id: 'm5', file: 'static/movies/mov_05.jpg', title: 'Barry Lyndon', meta: '1975 · Stanley Kubrick' },
+      { id: 'm6', file: 'static/movies/mov_06.jpg', title: 'The Good, the Bad and the Ugly', meta: '1966 · Sergio Leone' },
+      { id: 'm7', file: 'static/movies/mov_07.jpg', title: 'A Touch of Zen', meta: '1971 · King Hu' },
+      { id: 'm8', file: 'static/movies/mov_08.jpg', title: 'Kagemusha', meta: '1980 · Akira Kurosawa' },
     ];
     const INPUTS = [
       ['01', 'Tokyo alley', true], ['02', 'Bicycle corridor', true],
@@ -1425,69 +1471,80 @@
     function refSrc() { return refType === 'movie' ? movie.file : 'static/lab/ref_' + film.id + '.jpg'; }
     function refName() { return refType === 'movie' ? movie.title : film.name; }
 
+    function refId() { return refType === 'movie' ? movie.id : film.id; }
+
     function refresh() {
-      document.querySelectorAll('#movieList .pick-row').forEach((el, i) =>
+      document.querySelectorAll('#movieList .look-card').forEach((el, i) =>
         el.classList.toggle('sel', refType === 'movie' && MOVIES[i] === movie));
-      document.querySelectorAll('#filmList .pick-row').forEach((el, i) =>
+      document.querySelectorAll('#filmList .look-card').forEach((el, i) =>
         el.classList.toggle('sel', refType === 'film' && FILMS[i] === film));
-      document.querySelectorAll('#inputList .pick-row').forEach((el, i) =>
+      document.querySelectorAll('#inputList .in-card').forEach((el, i) =>
         el.classList.toggle('sel', INPUTS[i] === input));
 
       $('pairRef').src = refSrc();
       $('pairInput').src = input.src;
       $('pairInfo').innerHTML = '<b>' + refName() + '</b> &nbsp;→&nbsp; <b>' + input.name + '</b>';
 
-      const instant = refType === 'film' && input.lab;
-      $('instantWrap').style.display = instant ? 'block' : 'none';
-      $('liveHint').style.display = instant ? 'none' : 'block';
-      if (instant) {
-        const cmp = $('labCompare');
-        cmp.querySelector('.base-img').src = 'static/lab/' + input.id + '_' + film.id + '.jpg';
-        cmp.querySelector('.top-img').src = input.src;
-      }
+      // every pair has a pre-render; onerror falls back to the live hint
+      $('instantWrap').style.display = 'block';
+      $('liveHint').style.display = 'none';
+      const cmp = $('labCompare');
+      cmp.querySelector('.base-img').src =
+        'static/lab/' + input.id + '_' + refId() + '.jpg';
+      cmp.querySelector('.top-img').src = input.src;
     }
 
-    function pickRow(thumbSrc, name, meta) {
-      const row = document.createElement('div');
-      row.className = 'pick-row';
-      row.innerHTML =
-        '<img class="pthumb" loading="lazy" alt="">' +
-        '<div class="ptext"><div class="pname"></div><div class="pmeta"></div></div>';
-      row.querySelector('.pthumb').src = thumbSrc;
-      row.querySelector('.pthumb').alt = name;
-      row.querySelector('.pname').textContent = name;
-      row.querySelector('.pmeta').textContent = meta;
-      return row;
+    function lookCard(imgSrc, name, meta) {
+      const card = document.createElement('div');
+      card.className = 'look-card';
+      card.innerHTML =
+        '<img class="bg" loading="lazy" alt="">' +
+        '<div class="ov"><div class="pname"></div><div class="pmeta"></div></div>';
+      card.querySelector('.bg').src = imgSrc;
+      card.querySelector('.bg').alt = name;
+      card.querySelector('.pname').textContent = name;
+      card.querySelector('.pmeta').textContent = meta;
+      return card;
     }
 
     MOVIES.forEach(m => {
-      const row = pickRow(m.file, m.title, m.meta);
-      row.addEventListener('click', () => { refType = 'movie'; movie = m; refresh(); });
-      $('movieList').appendChild(row);
+      const card = lookCard(m.file, m.title, m.meta);
+      card.addEventListener('click', () => { refType = 'movie'; movie = m; refresh(); });
+      $('movieList').appendChild(card);
     });
 
     FILMS.forEach(f => {
-      const row = pickRow('static/lab/ref_' + f.id + '.jpg', f.name, '35mm · C-41');
-      row.insertAdjacentHTML('afterbegin', canisterSvg(f));
-      row.querySelector('.canister').setAttribute('width', '26');
-      row.querySelector('.canister').setAttribute('height', '35');
+      const card = lookCard('static/lab/ref_' + f.id + '.jpg', f.name, '35mm · C-41');
+      card.classList.add('film');
       const a = document.createElement('a');
-      a.className = 'plink';
-      a.textContent = 'about ↗';
+      a.className = 'can-btn';
       a.href = f.url;
       a.target = '_blank'; a.rel = 'noopener';
-      a.title = 'About ' + f.name;
+      a.title = 'About ' + f.name + ' ↗';
+      a.innerHTML = canisterSvg(f);
+      a.querySelector('.canister').setAttribute('width', '26');
+      a.querySelector('.canister').setAttribute('height', '35');
       a.addEventListener('click', e => e.stopPropagation());
-      row.appendChild(a);
-      row.addEventListener('click', () => { refType = 'film'; film = f; refresh(); });
-      $('filmList').appendChild(row);
+      card.appendChild(a);
+      card.addEventListener('click', () => { refType = 'film'; film = f; refresh(); });
+      $('filmList').appendChild(card);
     });
 
     INPUTS.forEach(inp => {
-      const row = pickRow(inp.src, inp.name,
-        inp.lab ? 'test set · instant preview with film stocks' : 'test set');
-      row.addEventListener('click', () => { input = inp; refresh(); });
-      $('inputList').appendChild(row);
+      const card = document.createElement('div');
+      card.className = 'in-card';
+      card.innerHTML = '<img loading="lazy" alt="">';
+      card.querySelector('img').src = inp.src;
+      card.querySelector('img').alt = inp.name;
+      card.title = inp.name;
+      card.addEventListener('click', () => { input = inp; refresh(); });
+      $('inputList').appendChild(card);
+    });
+
+    // if a pre-render is ever missing, degrade gracefully to the live hint
+    $('labCompare').querySelector('.base-img').addEventListener('error', () => {
+      $('instantWrap').style.display = 'none';
+      $('liveHint').style.display = 'block';
     });
 
     initCompare($('labCompare'));

static_assets.tar

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a62c04d8c0d0ed81bf7bb37cb7e5a781e39025f5364327600d1eb52769cf8c72
-size 12011520
+oid sha256:d02a18a96d7015feb41ebda93fcbb5a9a745bea9beec39bdcb5c343c2f8cef16
+size 69908480