feat(vault): feature the 10 in-house originals — gold ✦ IN-HOUSE ORIGINAL badge on each card + a header band distinguishing our own designs from licensed WPB catalog

6c21f30b4011a7659120e0b045c5284009061fef · 2026-07-02 09:52:17 -0700 · Steve

Files touched

M public/index.html

Diff

commit 6c21f30b4011a7659120e0b045c5284009061fef
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Jul 2 09:52:17 2026 -0700

    feat(vault): feature the 10 in-house originals — gold ✦ IN-HOUSE ORIGINAL badge on each card + a header band distinguishing our own designs from licensed WPB catalog
---
 public/index.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 90dcacc..597a47f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,10 @@ select,input[type=range]{background:var(--card);color:var(--ink);border:1px soli
 .grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:18px;padding:10px 6vw 60px}
 .card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s}
 .card:hover{transform:translateY(-3px);border-color:var(--gold)}
+.card{position:relative}
+.card.orig{border-color:#d4af6a55}
+.origtag{position:absolute;top:8px;left:8px;background:#0d0a16e0;border:1px solid var(--gold);color:var(--gold);font-size:9.5px;letter-spacing:.09em;font-weight:600;padding:3px 7px;border-radius:99px}
+#inhouseBand b{color:var(--gold)}
 .card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#221d2c}
 .pad{padding:12px 14px 16px}
 .t{font-weight:600;font-size:14px}
@@ -45,6 +49,7 @@ footer a{color:var(--gold)}
   </select></label>
   <label>Density <input type="range" id="density" min="2" max="6" value="4"></label>
 </div>
+<div id="inhouseBand" style="text-align:center;color:var(--mut);font-size:13px;padding:0 6vw 6px"></div>
 <div class="grid" id="grid"></div>
 <footer>Printed wallpaper of these designs → <a href="https://wallpapersback.com" rel="noopener noreferrer">wallpapersback.com</a> · Every design is an original from our studio pipeline, seam-verified and print-clean at 150 DPI. · <a href="/setup.html">setup guide</a></footer>
 <dialog id="dlg"><div id="dlgTitle" class="t"></div><div class="s" id="dlgTier"></div>
@@ -63,10 +68,14 @@ function sorted(){const s=sortSel.value,a=[...items];
   else if(s==='category')a.sort((x,y)=>(x.category||'').localeCompare(y.category||''));
   else if(s==='color')a.sort((x,y)=>(x.dominantHex||'').localeCompare(y.dominantHex||''));
   else a.sort((x,y)=>(y.createdAt||'').localeCompare(x.createdAt||''));return a}
-function render(){grid.innerHTML=sorted().map(d=>`<div class="card"><img loading="lazy" src="${d.img}" alt="${d.title}"><div class="pad">
+function render(){const n=items.filter(x=>x.category==='in-house-original').length;
+  const band=document.getElementById('inhouseBand');
+  if(band)band.innerHTML=n?`<b>✦ ${n} In-House Originals</b> — designed in our own hand from live marketplace trend research, every one settlement-cleared. The rest are licensed Wallpaper's Back designs.`:'';
+  grid.innerHTML=sorted().map(d=>{const orig=d.category==='in-house-original';
+  return `<div class="card${orig?' orig':''}"><img loading="lazy" src="${d.img}" alt="${d.title}">${orig?'<span class="origtag">✦ IN-HOUSE ORIGINAL</span>':''}<div class="pad">
   <div class="t">${d.title}</div><div class="s">${d.styleLine||''}</div>
   <div class="tiers">${(d.licenseTiers||[]).map(t=>`<button onclick='pick(${JSON.stringify(d.id)},${JSON.stringify(t.tier)})'>${t.label||t.tier} <span class="price">$${t.priceUsd??'—'}</span></button>`).join('')}</div>
-  </div></div>`).join('')}
+  </div></div>`}).join('')}
 let sel={};
 function pick(id,tier){const d=items.find(x=>String(x.id)===String(id));sel={id,tier};
   document.getElementById('dlgTitle').textContent=d.title;

← fe4935e feat: collection grows to 10 in-house originals — +Atomic Me · back to Pattern Vault · feat: paste-ready listing metadata (data/listings.csv) for t 390442d →