`mockups/L03.html`

53 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L03 · Brutalist Grid — RENTV redesign</title>
<link rel="stylesheet" href="assets/base.css">
<style>
  body{background:#f4f2ec;color:#111;font-family:'Arial Black','Helvetica Neue',system-ui,sans-serif}
  .wrap{max-width:1280px;margin:0 auto;padding:16px}
  .mh{border:3px solid #111;padding:14px 16px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px}
  .mh h1{font-size:64px;line-height:.9;letter-spacing:-3px;margin:0}.mh h1 i{color:#c8102e;font-style:normal}
  .mh .sub{font:700 12px/1.2 Arial;text-transform:uppercase;letter-spacing:.1em;max-width:280px;text-align:right}
  .idx{display:flex;gap:0;border:3px solid #111;border-top:0;overflow:auto}
  .idx .i{flex:1;min-width:120px;border-right:3px solid #111;padding:10px 12px}
  .idx .i:last-child{border-right:0}.idx .n{font-size:26px}.idx .k{font:700 10px Arial;text-transform:uppercase;letter-spacing:.08em}
  .cells{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:3px solid #111;border-top:3px solid #111}
  .cell{border-right:3px solid #111;border-bottom:3px solid #111;padding:14px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
  .cell .c{font:800 10px Arial;text-transform:uppercase;letter-spacing:.06em;color:#fff;padding:2px 6px;align-self:flex-start}
  .cell h3{font:800 17px/1.08 'Helvetica Neue';letter-spacing:-.3px;margin:10px 0 0}
  .cell.big{grid-column:span 2;grid-row:span 2;background:#111;color:#fff}.cell.big h3{font-size:30px}
  .cell.val{background:#c8102e;color:#fff}.cell.val .big{font-size:44px;line-height:.9;letter-spacing:-2px}
  .band{border:3px solid #111;border-top:0;padding:12px 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
  .band .b{font:700 13px Arial}.band .b b{font-size:22px;display:block}
  .ledger{border:3px solid #111;border-top:0;font:700 12px/1.5 'Courier New',monospace}
  .ledger .r{display:flex;justify-content:space-between;padding:7px 16px;border-bottom:1px solid #111}
  .foot{border:3px solid #111;border-top:0;padding:12px 16px;font:700 11px Arial;text-transform:uppercase;letter-spacing:.08em}
  @media(max-width:820px){.cells{grid-template-columns:1fr 1fr}.mh h1{font-size:40px}.cell.big{grid-column:span 2}}
</style></head>
<body>
<div class="wrap">
  <div class="mh" data-eln><h1>REN<i>TV</i></h1><div class="sub" id="sub">Commercial Real Estate News · The Regional Authority</div></div>
  <div class="idx" data-eln id="idx"></div>
  <div class="cells" data-eln id="cells"></div>
  <div class="band" data-eln id="firms"></div>
  <div class="ledger" data-eln id="ledger"></div>
  <div class="foot" data-eln>L03 Brutalist Grid — every number is real, from the live feed</div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'L03', render(d){
  const {esc,shortUsd,dstr,sectionColor}=RENTV;
  sub.textContent='Commercial Real Estate News · '+((d.news.items||[]).length)+' live stories · '+new Date(d.news.fetched_at||Date.now()).toLocaleDateString();
  const t=d.ticker||{};
  idx.innerHTML=Object.values(t).filter(m=>m&&m.label).map(m=>`<div class="i"><div class="n" style="color:${m.dir==='down'?'#c8102e':'#111'}">${m.value}</div><div class="k">${m.label}</div></div>`).join('');
  const it=d.news.items||[], m0=(d.la.marquee||[])[0];
  let cells='';
  cells+=`<div class="cell big"><span class="c" style="background:${sectionColor(it[0].cat)}">${esc(it[0].cat)}</span><h3>${esc(it[0].title)}</h3></div>`;
  cells+=`<div class="cell val"><span class="c" style="background:#111">Top LA Asset</span><div class="big">${shortUsd(m0.assessed_total)}</div><h3 style="font-size:14px">${esc(m0.address)}</h3></div>`;
  it.slice(1,10).forEach(n=>{cells+=`<div class="cell"><span class="c" style="background:${sectionColor(n.cat)}">${esc(n.cat)}</span><h3>${esc(n.title)}</h3></div>`;});
  cells.innerHTML;document.getElementById('cells').innerHTML=cells;
  document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,6).map(f=>`<div class="b">${esc(f.name)}<b>${(f.agent_count||0).toLocaleString()} agents</b></div>`).join('');
  document.getElementById('ledger').innerHTML=(d.la.recent||[]).slice(0,8).map(r=>`<div class="r"><span>${dstr(r.recording_date)} · ${esc(r.type_label).toUpperCase()}</span><span>${r.assessed_total?shortUsd(r.assessed_total):'RECORDED'}</span></div>`).join('');
}});
</script></body></html>