`mockups/L05.html`

54 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L05 · Split-Screen — RENTV redesign</title>
<link rel="stylesheet" href="assets/base.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
  body{background:#fff;color:#14171a;font-family:'Inter',system-ui,sans-serif}
  .split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 52px)}
  .left{padding:24px 26px;border-right:1px solid #e4e7ea;overflow:auto}
  .right{background:#0d1014;color:#e7ecf1;padding:24px 26px;position:sticky;top:52px;height:calc(100vh - 52px);overflow:auto}
  .sh{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:#8b939b;margin-bottom:14px}
  .left .sh{color:#5b636b}
  .story{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #eef0f2}
  .story .im{width:120px;height:80px;border-radius:8px;flex:none;display:block}
  .story .tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
  .story h3{font-size:16px;line-height:1.24;margin:5px 0 0}
  .marq{background:#12161c;border:1px solid #232a32;border-radius:12px;padding:20px;margin-bottom:16px}
  .marq .v{font-size:40px;font-weight:800;letter-spacing:-1px}
  .marq .a{font-size:15px;font-weight:600;margin-top:4px}.marq .brief{font-size:13px;color:#aab2ba;line-height:1.55;margin-top:10px}
  .rec .r{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #1c232b;font-size:13px}
  .rec .r span:last-child{color:#37d67a;font-weight:700}
  .firmrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .firmrow .f{background:#12161c;border:1px solid #232a32;border-radius:8px;padding:8px 10px;font-size:12px}.firmrow .f b{color:#ff6b6b}
  @media(max-width:860px){.split{grid-template-columns:1fr}.right{position:static;height:auto}}
</style></head>
<body>
<div class="split">
  <div class="left" data-eln>
    <div class="sh" data-eln id="lh">Live newsroom</div>
    <div id="feed" data-eln></div>
  </div>
  <div class="right">
    <div class="sh">LA Commercial · property intelligence</div>
    <div class="marq" data-eln id="marq"></div>
    <div class="sh" data-eln>Recent recorded activity</div>
    <div class="rec" data-eln id="rec"></div>
    <div class="sh" style="margin-top:20px" data-eln>Largest brokerages</div>
    <div class="firmrow" data-eln id="firms"></div>
  </div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({dark:false, layout:'L05', render(d){
  const {esc,shortUsd,dstr,imgTag,sectionColor}=RENTV;
  const it=d.news.items||[];
  lh.textContent='Live newsroom · '+it.length+' stories';
  feed.innerHTML=it.slice(0,14).map(n=>`<div class="story">${imgTag(n.image,'im',n.id)}<div><span class="tag" style="color:${sectionColor(n.cat)}">${esc(n.cat)}</span><h3>${esc(n.title)}</h3></div></div>`).join('');
  const m=(d.la.marquee||[])[0];
  marq.innerHTML=`<div style="font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8b939b">${esc(m.type_label)} · assessed</div><div class="v">${shortUsd(m.assessed_total)}</div><div class="a">${esc(m.address)}, ${esc(m.city)}</div><div class="brief">${esc(m.brief)}</div>`;
  document.getElementById('rec').innerHTML=(d.la.recent||[]).slice(0,7).map(r=>`<div class="r"><span>${dstr(r.recording_date)} · ${esc(r.type_label)}</span><span>${r.assessed_total?shortUsd(r.assessed_total):'—'}</span></div>`).join('');
  document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,8).map(f=>`<div class="f">${esc(f.name)} <b>${(f.agent_count||0).toLocaleString()}</b></div>`).join('');
}});
</script></body></html>