`public/index.lookbook.bak.html`

94 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Greenland Cork — Designer Wallcoverings</title>
<meta name="description" content="The Greenland cork wallcovering collection — natural cork surfaces, curated by Designer Wallcoverings.">
<style>
  :root{ --cols:4; --ink:#1c1a17; --paper:#f6f3ee; --line:#e2ddd4; --accent:#7a6a52; }
  *{box-sizing:border-box} html,body{margin:0}
  body{font:16px/1.5 "Georgia",serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased}
  header{padding:34px 28px 18px; border-bottom:1px solid var(--line); text-align:center}
  .brand{font:600 13px/1 system-ui,sans-serif; letter-spacing:.28em; text-transform:uppercase; color:var(--accent)}
  h1{margin:.5rem 0 .2rem; font-weight:400; font-size:clamp(28px,5vw,46px); letter-spacing:.01em}
  .sub{font-style:italic; color:#6b6459; margin:0}
  .controls{display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; padding:16px; border-bottom:1px solid var(--line); font-family:system-ui,sans-serif; font-size:13px}
  .controls label{display:flex; gap:7px; align-items:center; color:#6b6459}
  select,input[type=search]{font:13px system-ui; padding:7px 9px; border:1px solid var(--line); background:#fff; border-radius:2px}
  input[type=range]{accent-color:var(--accent)}
  .count{color:#9a9284}
  main{padding:22px 28px 60px}
  .grid{display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:22px}
  .card{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden}
  .card .ph{aspect-ratio:1/1; background:#eee center/cover no-repeat}
  .meta{padding:11px 13px 14px}
  .pn{font-size:15px; margin:0 0 2px}
  .cn{font-style:italic; color:#6b6459; font-size:13px; margin:0}
  .spec{font:11px/1.5 system-ui,sans-serif; color:#8a8478; margin-top:7px; display:flex; gap:6px; flex-wrap:wrap}
  .spec span{background:var(--paper); border:1px solid var(--line); padding:1px 6px; border-radius:2px}
  .coll{font:10px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-top:8px}
  .cta{margin-top:auto; padding:10px 13px; border-top:1px solid var(--line); font:12px system-ui; text-align:center; color:var(--accent); text-decoration:none}
  .cta:hover{background:var(--paper)}
  footer{padding:30px; text-align:center; font:12px system-ui; color:#9a9284; border-top:1px solid var(--line)}
  .staging{background:#fff6e5; border:1px solid #e8d9b0; color:#7a5a1a; font:12px system-ui; text-align:center; padding:8px}
</style>
</head>
<body>
<div class="staging">Preview / staging — Greenland cork line is being onboarded to Designer Wallcoverings. Prices &amp; ordering by quote.</div>
<header>
  <div class="brand">Designer Wallcoverings</div>
  <h1>Greenland&nbsp;·&nbsp;Cork</h1>
  <p class="sub">Natural cork surfaces — the complete collection</p>
</header>
<div class="controls">
  <label>Sort
    <select id="sort">
      <option value="newest">Newest</option>
      <option value="sku">SKU A→Z</option>
      <option value="title">Name A→Z</option>
      <option value="collection">Collection</option>
    </select>
  </label>
  <label>Search <input type="search" id="q" placeholder="name, sku, collection…"></label>
  <label>Density <input type="range" id="density" min="2" max="6" value="4"></label>
  <span class="count" id="count"></span>
</div>
<main><div class="grid" id="grid"></div></main>
<footer>Designer Wallcoverings · Greenland Cork Collection · greenland.designerwallcoverings.com</footer>
<script>
const grid=document.getElementById('grid'), q=document.getElementById('q'),
      sortEl=document.getElementById('sort'), dens=document.getElementById('density'),
      countEl=document.getElementById('count');
let items=[];
const LS='gl-cork';
try{const s=JSON.parse(localStorage.getItem(LS)||'{}'); if(s.sort)sortEl.value=s.sort; if(s.density)dens.value=s.density; if(s.q)q.value=s.q;}catch{}
function save(){localStorage.setItem(LS,JSON.stringify({sort:sortEl.value,density:dens.value,q:q.value}));}
function apply(){
  document.documentElement.style.setProperty('--cols',dens.value);
  const term=(q.value||'').toLowerCase().trim();
  let list=items.filter(p=>!term || [p.pattern_name,p.mfr_sku,p.color_name,p.collection].some(v=>(v||'').toLowerCase().includes(term)));
  const s=sortEl.value;
  list.sort((a,b)=> s==='sku'?(a.mfr_sku||'').localeCompare(b.mfr_sku||'')
    : s==='title'?(a.pattern_name||'').localeCompare(b.pattern_name||'')
    : s==='collection'?(a.collection||'zzz').localeCompare(b.collection||'zzz')
    : (b.gl_id||0)-(a.gl_id||0));
  countEl.textContent=list.length+' designs';
  grid.innerHTML=list.map(p=>{
    const img=p.image_url?`style="background-image:url('${p.image_url}')"`:'';
    const specs=[p.width,p.backing,p.minimum_order].filter(Boolean).map(v=>`<span>${v}</span>`).join('');
    const coll=p.collection&&!/tip card/i.test(p.collection)?`<div class="coll">${p.collection}</div>`:'';
    return `<div class="card"><div class="ph" ${img}></div><div class="meta">
      <p class="pn">${p.pattern_name||p.mfr_sku||'Cork'}</p>
      ${p.color_name&&p.color_name!==p.pattern_name?`<p class="cn">${p.color_name}</p>`:''}
      <div class="spec">${specs}</div>${coll}</div>
      <a class="cta" href="mailto:info@designerwallcoverings.com?subject=Greenland%20Cork%20sample%20request%20-%20${encodeURIComponent(p.mfr_sku||'')}">Request a sample →</a></div>`;
  }).join('');
  save();
}
[q,sortEl,dens].forEach(el=>el.addEventListener('input',apply));
fetch('products.json').then(r=>r.json()).then(d=>{items=d;apply();}).catch(e=>grid.innerHTML='<p>Could not load catalog.</p>');
</script>
</body>
</html>