selector: bake rank + why-it-wins + competitor into each full-screen preview modal

3a9785bd8b7d75b28f1f87658fd09bf7f65534e7 · 2026-08-07 14:10:26 -0700 · Steve (RENTV 2026)

Files touched

M public/2026/index.html

Diff

commit 3a9785bd8b7d75b28f1f87658fd09bf7f65534e7
Author: Steve (RENTV 2026) <steve@designerwallcoverings.com>
Date:   Fri Aug 7 14:10:26 2026 -0700

    selector: bake rank + why-it-wins + competitor into each full-screen preview modal
---
 public/2026/index.html | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/public/2026/index.html b/public/2026/index.html
index 2145e452..9f9dd80c 100644
--- a/public/2026/index.html
+++ b/public/2026/index.html
@@ -126,6 +126,21 @@
   .rival .rn{display:block;color:#9aa4ad;font-size:13px}
   .rival .go{display:inline-block;margin-top:9px;color:#8b949e;font-size:11px;font-weight:800}
   .rival:hover .go{color:var(--red)}
+  /* full-screen modal info strip (rank + why-it-wins + competitor) */
+  .mbar .title .mrank{display:inline-block;font:800 12px ui-monospace,monospace;padding:2px 8px;border-radius:20px;margin-right:6px;
+    background:#11161c;border:1px solid #2b3644;color:#c3cbd3;vertical-align:middle}
+  .mbar .title .mrank.r1{background:var(--gold);border-color:var(--gold);color:#1b1a12}
+  .mbar .title .mrank.r2{background:#c0c6cc;border-color:#c0c6cc;color:#14171a}
+  .mbar .title .mrank.r3{background:#b0763a;border-color:#b0763a;color:#fff}
+  .mbar .title .mbest{font-family:Inter;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);
+    border:1px solid rgba(198,162,74,.5);border-radius:20px;padding:1px 8px;margin-left:6px;vertical-align:middle}
+  .minfo{background:#0b0e12;border-bottom:1px solid #1c232b;padding:11px 16px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
+  .minfo .mi-why{color:#c3cbd3;font-size:13px;line-height:1.5;flex:1;min-width:280px}
+  .minfo .mi-why b{color:#fff}
+  .minfo .mi-ref{color:#9aa4ad;font-size:12.5px;text-decoration:none;white-space:nowrap}
+  .minfo .mi-ref b{color:#e7ecf1}.minfo .mi-ref .vs{color:var(--red);font-weight:800;margin-right:3px}
+  .minfo .mi-ref:hover b{color:var(--red)}
+  @media(max-width:700px){.minfo .mi-ref{white-space:normal}}
 </style>
 
 <footer>
@@ -147,6 +162,7 @@
     <button class="btn ghost" id="openTab">Open ↗</button>
     <button class="x" id="mclose" aria-label="Close">✕</button>
   </div>
+  <div class="minfo" id="minfo"></div>
   <div class="stage"><div class="device" id="device"><iframe id="mframe" title="Template preview" loading="lazy"></iframe></div></div>
 </div>
 <div class="toast" id="toast"></div>
@@ -227,7 +243,9 @@ let cur='a';
 function openModal(k){
   cur=k; const t=TPL.find(x=>x.k===k);
   $('#mframe').src=t.url;
-  $('#mtitle').innerHTML=esc(t.name)+' <small>'+(k==='classic'?'Current live site':'Template '+k.toUpperCase())+' · live preview</small>';
+  $('#mtitle').innerHTML='<span class="mrank r'+t.rank+'">#'+t.rank+'</span> '+esc(t.name)+(t.rank===1?' <span class="mbest">★ Recommended</span>':'')+' <small>'+(k==='classic'?'Current live site':'Template '+k.toUpperCase())+' · live preview</small>';
+  var mi=$('#minfo'); if(mi){ mi.innerHTML='<div class="mi-why"><b>Why it wins:</b> '+esc(t.why)+'</div>'+
+    '<a class="mi-ref" href="'+esc(t.ref.url)+'" target="_blank" rel="noopener"><span class="vs">vs</span> <b>'+esc(t.ref.name)+'</b> — '+esc(t.ref.note)+' ↗</a>'; }
   document.querySelectorAll('#switch button').forEach(b=>b.classList.toggle('on',b.dataset.sw===k));
   $('#ovl').classList.add('open'); document.body.style.overflow='hidden';
   refreshMakeBtn();

← cfd849be selector: add Classic (original) as 6th option + rank all 6 · back to Rentv 2026 · 5x sweep 1: add favicon.ico + favicon.svg (fixes /favicon.ic fb82cb6c →