`public/share-recs.html`

86 lines
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex,nofollow" />
  <title>Shared list — WhatsMyStyle</title>
  <link rel="stylesheet" href="/css/app.css" />
  <style>
    body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; background: #faf7f2; color: #1d1d1f; max-width: 1200px; margin: 40px auto; padding: 0 24px; }
    h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
    .sub { color: #707070; margin-bottom: 16px; }
    .state-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
    .state-pills .pill {
      font-size: 12px; padding: 4px 10px; border-radius: 999px;
      background: #fff; border: 1px solid #e6e1d8; color: #1d1d1f;
    }
    .cta { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e6e1d8; font-size: 14px; }
    .cta a { color: #1d1d1f; }
    .empty { color: #999; padding: 24px 0; text-align: center; }
  </style>
</head>
<body>
  <h1 id="title">Shared list</h1>
  <p class="sub" id="sub">Loading…</p>
  <div style="margin: -6px 0 16px;">
    <button type="button" id="copy-url-btn"
            style="font-family: inherit; font-size: 13px; padding: 7px 14px; border: 1px solid #c8c1b3; border-radius: 999px; background: #fff; color: #1d1d1f; cursor: pointer;">
      Copy share URL
    </button>
    <span id="copy-url-out" style="margin-left: 10px; color: #707070; font-size: 13px;"></span>
  </div>
  <div id="state-pills" class="state-pills" hidden></div>
  <div id="grid" class="grid"></div>
  <p class="cta">Want a list like this? <a href="/">Build yours on WhatsMyStyle →</a></p>

  <script>
    const $ = s => document.querySelector(s);
    function escapeHtml(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
    // Copy URL button — try clipboard, fall back to selecting the visible URL.
    document.getElementById('copy-url-btn').addEventListener('click', async () => {
      const url = location.href;
      const out = document.getElementById('copy-url-out');
      try { await navigator.clipboard.writeText(url); out.textContent = 'Copied'; setTimeout(() => out.textContent = '', 2400); }
      catch {
        // Fallback: write the URL into a span and select it
        out.innerHTML = `<input type="text" readonly value="${url.replace(/"/g, '&quot;')}" style="width: 320px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 4px 6px;">`;
        const inp = out.querySelector('input');
        inp.focus(); inp.select();
      }
    });

    (async function () {
      const shareId = location.pathname.split('/').pop();
      const r = await fetch(`/api/share/recs/${encodeURIComponent(shareId)}`);
      if (!r.ok) { $('#sub').textContent = 'This share link is no longer active.'; return; }
      const j = await r.json();
      $('#title').textContent = `${j.owner}'s picks`;
      const sortLabel = { best: 'Best match', sustain: 'Sustainability', newest: 'Newest', price_asc: 'Price ↑', price_desc: 'Price ↓' }[j.state?.sort || 'best'] || 'Best match';
      $('#sub').textContent = `${j.count} live piece${j.count === 1 ? '' : 's'} matching this lens — re-evaluated against today's catalog.`;
      const pills = [];
      pills.push(`<span class="pill">Sort: ${escapeHtml(sortLabel)}</span>`);
      if (j.state?.brand)     pills.push(`<span class="pill">Brand: ${escapeHtml(j.state.brand)}</span>`);
      if (j.state?.category)  pills.push(`<span class="pill">Category: ${escapeHtml(j.state.category)}</span>`);
      if (j.state?.proOnly)   pills.push(`<span class="pill">Set-grade only</span>`);
      (j.state?.colors || []).forEach(c => pills.push(`<span class="pill">Color: ${escapeHtml(c)}</span>`));
      (j.state?.materials || []).forEach(m => pills.push(`<span class="pill">Material: ${escapeHtml(m)}</span>`));
      const sp = $('#state-pills');
      sp.innerHTML = pills.join('');
      sp.hidden = false;
      if (!j.items.length) { $('#grid').innerHTML = '<div class="empty">No live matches against today\'s catalog.</div>'; return; }
      $('#grid').innerHTML = j.items.map(it => `
        <a class="card" href="${escapeHtml(it.product_url || '#')}" target="_blank" rel="noopener">
          <img src="${escapeHtml(it.image_url || '')}" alt="${escapeHtml(it.title || '')}" loading="lazy">
          <div class="meta">
            <div class="title">${escapeHtml(it.title || '')}</div>
            <div class="brand">${escapeHtml(it.brand || '')}${it.sustain ? ` <span class="sustain">♻ ${it.sustain}/5</span>` : ''}</div>
            ${it.price_cents ? `<div class="price">$${(it.price_cents/100).toFixed(0)}</div>` : ''}
          </div>
        </a>
      `).join('');
    })();
  </script>
</body>
</html>