← back to Patterndesignlab
public/trends.html
76 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Trend Board · Pattern Design Lab</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header class="top"><div class="wrap">
<a class="brand" href="/">Pattern Design<span class="dot">.</span>Lab <small>trend board</small></a>
<form class="searchbox" onsubmit="location.href='/';return false"><input type="search" placeholder="Search patterns…" onkeydown="if(event.key==='Enter'){location.href='/'}"></form>
<nav class="navlinks"><a href="/">Explore</a><a href="/trends">Trends</a><a href="/designer-signup">Sell your designs</a><a href="/admin">Admin</a></nav>
</div></header>
<div class="wrap">
<section class="trendhead">
<h1>Trend Board</h1>
<p id="lead">Where the market is heading in 2026 — and the owned, settlement-passed designs in our catalog that already ride each wave.</p>
<span class="scan" id="scan" hidden></span>
<div class="tcontrols" id="controls" hidden>
<div><label for="tdensity">Cards per lane</label>
<input id="tdensity" type="range" min="1" max="3" step="1" value="3" oninput="setTDensity(this.value)"></div>
</div>
</section>
<div id="lanes"></div>
<div class="empty" id="empty" hidden></div>
</div>
<footer><div class="wrap">Pattern Design Lab · trend boards reference OWNED designs only — the board reads the market; every pattern is an original in our own hand.</div></footer>
<script>
function esc(s){ return (s==null?'':String(s)).replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c])); }
function fmtDate(iso){ try{ return new Date(iso).toLocaleString(undefined,{year:'numeric',month:'short',day:'numeric',hour:'numeric',minute:'2-digit'}); }catch{ return iso; } }
function setTDensity(v){ document.documentElement.style.setProperty('--tcols', v); localStorage.setItem('pdl.tdensity', v); const el=document.getElementById('tdensity'); if(el) el.value=v; }
function laneCard(t){
const reps=(t.designs||[]).slice(0, +(localStorage.getItem('pdl.tdensity')||3));
return `<section class="lane">
<div class="lh"><h2>${esc(t.title)}</h2><span class="band">${esc(t.priceBand||'')}</span></div>
<p class="blurb">${esc(t.blurb||'')}</p>
<div class="dir">
<div><span class="k">Palette</span><span class="palette">${(t.palette||[]).map(h=>`<i title="${esc(h)}" style="background:${esc(h)}"></i>`).join('')}</span></div>
<div><span class="k">Direction</span><span class="motifpill">${esc(t.motif||'')}</span></div>
</div>
<div class="reps">${reps.map(d=>`
<a class="rep" href="/design/${encodeURIComponent(d.slug)}">
<div class="t" style="background-image:url('${esc(d.img)}')"></div>
<div class="b"><h3>${esc(d.title)}</h3>
<div class="m"><span class="swatch" style="background:${esc(d.dominant_hex||'#ccc')}"></span>${esc(d.colorway||d.style||'')}${d.priceFrom!=null?' · from $'+esc(d.priceFrom):''}</div>
</div>
</a>`).join('')}</div>
</section>`;
}
function render(trends){ document.getElementById('lanes').innerHTML = trends.map(laneCard).join(''); }
(async ()=>{
setTDensity(localStorage.getItem('pdl.tdensity')||'3');
let data;
try{ data = await (await fetch('/api/trends')).json(); }catch(e){ data={trends:[],empty:true}; }
const trends = Array.isArray(data.trends)?data.trends:[];
if(data.market) document.getElementById('lead').textContent = data.market;
if(data.scannedAt){ const s=document.getElementById('scan'); s.hidden=false; s.textContent='🕓 board refreshed '+fmtDate(data.scannedAt); }
if(!trends.length){
const e=document.getElementById('empty'); e.hidden=false;
e.innerHTML='The trend board is being refreshed. <a href="/">Browse the catalog →</a>';
return;
}
document.getElementById('controls').hidden = false;
render(trends);
const dEl=document.getElementById('tdensity');
if(dEl) dEl.addEventListener('input', ()=>render(trends));
})();
</script>
</body>
</html>