`mockups/L08.html`

59 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L08 · Timeline Feed — 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:#fbfbfc;color:#14171a;font-family:'Inter',system-ui,sans-serif}
  .wrap{max-width:1080px;margin:0 auto;padding:22px}
  .dh{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5b636b;font-weight:800;border-bottom:2px solid #14171a;padding-bottom:10px;margin-bottom:22px}
  .layout{display:grid;grid-template-columns:1fr 300px;gap:30px}
  .tl{position:relative;padding-left:30px}
  .tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:#e4e7ea}
  .ev{position:relative;padding:0 0 22px}
  .ev::before{content:"";position:absolute;left:-30px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #c8102e}
  .ev.rec::before{border-color:#0f8a4d}
  .ev .t{font-size:11px;color:#8b939b;font-weight:700}
  .ev .tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
  .ev h3{font-size:17px;line-height:1.25;margin:4px 0 0}
  .ev .brief{font-size:13px;color:#5b636b;margin-top:5px;line-height:1.5}
  .ev.asset{background:#14171a;color:#fff;border-radius:12px;padding:14px 16px;margin-left:-4px}
  .ev.asset .v{font-size:26px;font-weight:800}
  aside .sh{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#5b636b;margin:0 0 12px}
  aside .card{background:#fff;border:1px solid #e4e7ea;border-radius:12px;overflow:hidden;margin-bottom:12px}
  aside .card .im{height:110px;display:block}aside .card .b{padding:11px 13px}aside .card h4{font-size:13px;margin:4px 0 0;line-height:1.25}
  aside .firm{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid #eef0f2}aside .firm b{color:#c8102e}
  @media(max-width:860px){.layout{grid-template-columns:1fr}}
</style></head>
<body>
<div class="wrap">
  <div class="dh" data-eln id="dh">Today in commercial real estate</div>
  <div class="layout">
    <div class="tl" data-eln id="tl"></div>
    <aside>
      <div class="sh" data-eln>The REview</div>
      <div data-eln id="rev"></div>
      <div class="sh" style="margin-top:20px" data-eln>Top brokerages</div>
      <div data-eln id="firms"></div>
    </aside>
  </div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'L08', render(d){
  const {esc,shortUsd,dstr,imgTag,sectionColor}=RENTV;
  dh.textContent='Timeline · '+new Date(d.news.fetched_at||Date.now()).toLocaleDateString(undefined,{weekday:'long',month:'long',day:'numeric'})+' · '+((d.news.items||[]).length)+' updates';
  const it=d.news.items||[], rec=d.la.recent||[], mq=d.la.marquee||[];
  // interleave: news, occasionally an asset callout + a recorded-activity event
  let html='', ai=0, ri=0;
  it.slice(0,16).forEach((n,i)=>{
    html+=`<div class="ev"><div class="t">LIVE · rentv.com</div><span class="tag" style="color:${sectionColor(n.cat)}">${esc(n.cat)}</span><h3>${esc(n.title)}</h3></div>`;
    if(i===2&&mq[ai]){const m=mq[ai++];html+=`<div class="ev asset"><div class="t" style="color:#9aa1a8">MARQUEE ASSET · LA COUNTY</div><div class="v">${shortUsd(m.assessed_total)}</div><h3 style="font-size:15px;color:#fff">${esc(m.address)}, ${esc(m.city)}</h3><div class="brief" style="color:#b9bfc5">${esc(m.brief).slice(0,150)}</div></div>`;}
    if(i%4===3&&rec[ri]){const r=rec[ri++];html+=`<div class="ev rec"><div class="t">${dstr(r.recording_date)} · RECORDED TRANSFER</div><h3 style="font-size:15px">${esc(r.type_label)} property · ${esc(r.use_desc||'—')}</h3></div>`;}
  });
  tl.innerHTML=html;
  document.getElementById('rev').innerHTML=(d.videos.items||[]).slice(0,3).map(v=>`<div class="card">${imgTag(v.thumb,'im',v.id)}<div class="b"><h4>${esc(v.title)}</h4></div></div>`).join('');
  document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,7).map(f=>`<div class="firm"><span>${esc(f.name)}</span><b>${(f.agent_count||0).toLocaleString()}</b></div>`).join('');
}});
</script></body></html>