← back to Whatsmystyle
public/share-favorites.html
47 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 favorites — 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: 24px; }
.cta { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e6e1d8; font-size: 14px; }
.cta a { color: #1d1d1f; }
</style>
</head>
<body>
<h1 id="title">Shared favorites</h1>
<p class="sub" id="sub">Loading…</p>
<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 => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
(async function () {
const shareId = location.pathname.split('/').pop();
const r = await fetch(`/api/favorites/share/${encodeURIComponent(shareId)}`);
if (!r.ok) { $('#sub').textContent = 'This share link is no longer active.'; return; }
const j = await r.json();
$('#title').textContent = `Favorites from ${j.owner}`;
$('#sub').textContent = `${j.count} piece${j.count === 1 ? '' : 's'} saved.`;
$('#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 || '')}</div>
${it.price_cents ? `<div class="price">$${(it.price_cents/100).toFixed(0)}</div>` : ''}
</div>
</a>
`).join('');
})();
</script>
</body>
</html>