`mockups/L04.html`

51 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L04 · Card Masonry — 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:#eef0f3;color:#14171a;font-family:'Inter',system-ui,sans-serif}
  .wrap{max-width:1280px;margin:0 auto;padding:18px}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .chip{background:#fff;border:1px solid #dde1e6;border-radius:20px;padding:8px 15px;font-size:13px;font-weight:700;cursor:pointer}
  .chip.on{background:#14171a;color:#fff;border-color:#14171a}
  .feat{background:#14171a;color:#fff;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;margin-bottom:16px}
  .feat .im{min-height:280px;display:block}.feat .b{padding:26px;display:flex;flex-direction:column;justify-content:center}
  .feat .tag{color:#ff6b6b;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  .feat h1{font-size:32px;line-height:1.12;margin:8px 0 12px}
  .masonry{columns:4;column-gap:16px}
  .card{break-inside:avoid;margin-bottom:16px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(20,23,26,.06)}
  .card .im{display:block}.card .b{padding:13px 14px}
  .card .tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
  .card h3{font-size:15px;line-height:1.22;margin:5px 0 0}
  .card.asset .v{font-size:24px;font-weight:800}.card.asset .a{font-size:12px;color:#5b636b;margin-top:2px}
  .card.firm{padding:14px}.card.firm .fn{font-weight:800}.card.firm .fa{color:#c8102e;font-weight:800;margin-top:4px}
  .sh{font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#5b636b;margin:22px 0 12px}
  @media(max-width:1100px){.masonry{columns:3}}@media(max-width:820px){.masonry{columns:2}.feat{grid-template-columns:1fr}}@media(max-width:520px){.masonry{columns:1}}
</style></head>
<body>
<div class="wrap">
  <div class="chips" data-eln id="chips"></div>
  <div class="feat" data-eln id="feat"></div>
  <div class="sh" data-eln>Latest across the market</div>
  <div class="masonry" data-eln id="masonry"></div>
  <div class="sh">Marquee LA assets</div>
  <div class="masonry" data-eln id="assets"></div>
  <div class="sh">Top brokerages</div>
  <div class="masonry" data-eln id="firms"></div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'L04', render(d){
  const {esc,shortUsd,imgTag,sectionColor}=RENTV;
  const cats=['All',...RENTV.NAV.Sections.map(s=>s[0])];
  chips.innerHTML=cats.map((c,i)=>`<span class="chip${i===0?' on':''}">${c}</span>`).join('');
  chips.querySelectorAll('.chip').forEach(c=>c.onclick=()=>{chips.querySelectorAll('.chip').forEach(x=>x.classList.remove('on'));c.classList.add('on');});
  const it=d.news.items||[], l=it[0];
  feat.innerHTML=`${imgTag(l.image,'im',l.id)}<div class="b"><span class="tag">${esc(l.cat)} · Lead</span><h1>${esc(l.title)}</h1><a href="${esc(l.url)}" style="color:#fff;font-weight:800;text-decoration:underline">Read →</a></div>`;
  masonry.innerHTML=it.slice(1,17).map(n=>`<div class="card">${imgTag(n.image,'im',n.id)}<div class="b"><span class="tag" style="color:${sectionColor(n.cat)}">${esc(n.cat)}</span><h3>${esc(n.title)}</h3></div></div>`).join('');
  document.getElementById('assets').innerHTML=(d.la.marquee||[]).slice(0,8).map(m=>`<div class="card asset">${imgTag(null,'im',m.ain)}<div class="b"><span class="tag" style="color:#c8102e">${esc(m.type_label)}</span><div class="v">${shortUsd(m.assessed_total)}</div><div class="a">${esc(m.address)}, ${esc(m.city)}</div></div></div>`).join('');
  document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,9).map(f=>`<div class="card firm"><div class="fn">${esc(f.name)}</div><div class="fa">${(f.agent_count||0).toLocaleString()} licensed agents</div></div>`).join('');
}});
</script></body></html>