trending: 'our lane' caption on our-own images (honesty label)

3c73597281ca760d1dc6bd5142107ff165169aac · 2026-07-03 09:11:10 -0700 · Steve
Files touched

M public/index.html
Diff

commit 3c73597281ca760d1dc6bd5142107ff165169aac
Author: Steve <steve@designerwallcoverings.com>
Date:   Fri Jul 3 09:11:10 2026 -0700

    trending: 'our lane' caption on our-own images (honesty label)
---
 public/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 8577e26..f6dd77a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -43,6 +43,7 @@
   .swatch{ aspect-ratio:4/3; position:relative; }
   .swatch .ribbon{ position:absolute; top:10px; left:-30px; transform:rotate(-45deg); background:#b6392f; color:#fff; font-size:10px; letter-spacing:.14em; padding:3px 34px; font-weight:700; }
   .swatch .rank{ position:absolute; bottom:8px; right:9px; background:rgba(0,0,0,.55); color:#fff; font-size:10px; padding:2px 7px; border-radius:20px; }
+  .swatch .ours{ position:absolute; bottom:8px; left:9px; max-width:62%; background:rgba(0,0,0,.55); color:#fff; font-size:9.5px; padding:2px 7px; border-radius:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
   .swatch .cov{ position:absolute; top:9px; right:9px; font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:3px 8px; border-radius:20px; }
   .cov.gap{ background:var(--gap); color:#fff; } .cov.covered{ background:rgba(255,255,255,.82); color:var(--accent); }
   .body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; flex:1; }
@@ -147,7 +148,8 @@ function card(it){
   c.innerHTML='<div class="swatch" style="position:relative;overflow:hidden;background:'+grad+'">'+(it.image?'<img src="'+esc(it.image)+'" alt="" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.remove()">':'')
     +(it.isNew?'<div class="ribbon">NEW</div>':'')
     +'<div class="cov '+it.ourCoverage+'">'+(it.ourCoverage==='gap'?'🎯 GAP':'✓ HAVE')+'</div>'
-    +(it.signalRank?'<div class="rank">▲ '+it.signalRank+'</div>':'')+'</div>'
+    +(it.signalRank?'<div class="rank">▲ '+it.signalRank+'</div>':'')
+    +(it.isOurOriginal&&it.imageDesign?'<div class="ours" title="Our own design: '+esc(it.imageDesign)+'">◆ our lane: '+esc(it.imageDesign)+'</div>':'')+'</div>'
     +'<div class="body"><div class="title">'+esc(it.title)+'</div>'
     +'<div class="company">by <b>'+esc(it.company)+'</b></div>'
     +'<div class="chips"><span class="chip mk">'+esc(it.marketplace)+'</span><span class="chip">'+esc(it.style)+'</span><span class="chip">'+esc(it.color)+'</span><span class="chip">'+esc(it.priceBand)+'</span></div>'