feat(v1.1): item 10 — Second Look band in violet (bold fill + border)

.band.sl re-tinted to the confirmed violet palette (#c4b5fd text,
rgba(124,58,237,.22) fill, rgba(167,139,250,.65) border, weight 800);
wildcard stays amber for contrast. The card band mirrors into the
dossier body (new #dband, static variant of the pill) on return and
wildcard listings; new-slot dossiers show no band. bandHTML/bandLabel
split reuses the same labels on both surfaces.
This commit is contained in:
Torres
2026-11-13 13:54:01 -04:00
parent 2160ba6ce8
commit 08f945a029

View File

@@ -144,7 +144,8 @@ nav{height:calc(68px + env(safe-area-inset-bottom,0px));display:flex;align-items
.sect.hot{color:var(--accent1)}
.band{position:absolute;top:12px;left:12px;z-index:4;max-width:78%;font-size:11px;font-weight:650;letter-spacing:.4px;border-radius:999px;padding:4px 9px;pointer-events:none;line-height:1.35;user-select:none}
.band.wild{color:#ffb43a;background:rgba(255,180,58,.14);border:1px solid rgba(255,180,58,.35)}
.band.sl{color:rgba(255,255,255,.85);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.band.sl{color:#c4b5fd;background:rgba(124,58,237,.22);border:1px solid rgba(167,139,250,.65);font-weight:800}
.dband{position:static;display:inline-block;margin-top:6px}
.report{position:absolute;inset:6px 14px 2px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #2a2a33;border-radius:18px;color:var(--mut);text-align:center;padding:24px;font-size:13.5px;z-index:3}
.report.on{display:flex}
.report b{color:#fff;font-size:16px}
@@ -255,6 +256,7 @@ nav{height:calc(68px + env(safe-area-inset-bottom,0px));display:flex;align-items
<div class="dtitle" id="dtitle"></div>
<div class="drow"><div class="dprice" id="dprice"></div><div class="dsub" id="dsub"></div></div>
<div class="dchips" id="dchips"></div>
<div class="band dband" id="dband" style="display:none"></div>
<div class="drank" id="drank" style="display:none">
<div class="tankwrap" id="drankTank"></div>
<div style="flex:1;min-width:0">
@@ -488,14 +490,19 @@ function setStamps(el,a,b,c){
el.querySelector('.stamp.nope').style.opacity=b;
el.querySelector('.stamp.maybe').style.opacity=c;
}
function bandHTML(item){ // P3 system bands — the ONLY card-face additions
if(item.slot==='wildcard') return `<div class="band wild">WILDCARD · maybe you&rsquo;ll like this one instead</div>`;
function bandLabel(item){ // P3 system bands — text for card + dossier
if(item.slot==='wildcard') return 'WILDCARD · maybe you’ll like this one instead';
if(item.slot==='return'){
const verb= item.decision==='like'?'liked':item.decision==='maybe'?'maybed':item.decision==='nope'?'noped':'seen';
return `<div class="band sl">SECOND LOOK — you ${verb} this</div>`;
return 'SECOND LOOK — you '+verb+' this';
}
return '';
}
function bandHTML(item){ // card face only
const lbl=bandLabel(item);
if(!lbl) return '';
return `<div class="band${item.slot==='wildcard'?' wild':' sl'}">${lbl}</div>`;
}
/* ---------- B1 §11: photo galleries ---------- */
function nPhotos(it){ // payload n_photos; tolerant of old APIs
const n= it&&typeof it.n_photos==='number'?it.n_photos:(it&&it.img?1:0);
@@ -809,6 +816,14 @@ function openDetail(data,ctx){
$('dprice').textContent=priceFor(data);
$('dsub').textContent=subFor(data);
$('dchips').innerHTML=cardChips(data).map(x=>`<span class="chip">${x}</span>`).join('');
// item 10: the card band mirrors into the info view (violet SL / amber wild)
const db=$('dband');
const bl=bandLabel(data);
if(bl){
db.className='band'+(data.slot==='wildcard'?' wild':' sl')+' dband';
db.textContent=bl;
db.style.display='inline-block';
}else{ db.style.display='none'; }
const rows=[
["Year",data.year!=null?String(data.year):null],
["Odometer",data.km!=null?(fmtNum(data.km)+' km'):null],