`mockups/L10.html`

54 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L10 · Swiss Index — RENTV redesign</title>
<link rel="stylesheet" href="assets/base.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  body{background:#fff;color:#111;font-family:'Inter',system-ui,sans-serif;font-size:13px}
  .wrap{max-width:1120px;margin:0 auto;padding:26px 24px}
  .hl{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #111;padding-bottom:8px}
  .hl b{font-size:13px;letter-spacing:.02em}.hl span{font-size:11px;color:#8b8b8b;letter-spacing:.06em;text-transform:uppercase}
  .mkt{display:flex;gap:26px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #e2e2e2;font-variant-numeric:tabular-nums}
  .mkt .m span{color:#8b8b8b;font-size:10px;text-transform:uppercase;letter-spacing:.08em;display:block}
  .mkt .m b{font-size:16px;font-weight:600}.mkt .m b.dn{color:#c8102e}
  .sh{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8b8b8b;margin:26px 0 8px}
  .index a{display:grid;grid-template-columns:34px 1fr 130px;gap:14px;padding:9px 0;border-bottom:1px solid #ededed;color:#111;text-decoration:none;align-items:baseline}
  .index a:hover{background:#fafafa}
  .index .n{color:#c8102e;font-weight:600;font-variant-numeric:tabular-nums}
  .index .t{font-weight:500;line-height:1.3}
  .index .c{text-align:right;font-size:11px;color:#8b8b8b;text-transform:uppercase;letter-spacing:.04em}
  .laidx .r{display:grid;grid-template-columns:34px 1fr 90px 110px;gap:14px;padding:8px 0;border-bottom:1px solid #ededed;align-items:baseline;font-variant-numeric:tabular-nums}
  .laidx .r b{text-align:right;font-weight:600}.laidx .r .ty{font-size:11px;color:#8b8b8b}
  .cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  .firmidx .r{display:grid;grid-template-columns:34px 1fr 70px;gap:12px;padding:7px 0;border-bottom:1px solid #ededed;font-variant-numeric:tabular-nums}.firmidx .r b{text-align:right}
  .revidx .r{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid #ededed}
  @media(max-width:820px){.cols2{grid-template-columns:1fr}}
</style></head>
<body>
<div class="wrap">
  <div class="hl" data-eln><b>RENTV — Commercial Real Estate, indexed.</b><span id="idate"></span></div>
  <div class="mkt" data-eln id="mkt"></div>
  <div class="sh" data-eln>01 — The news, in full</div>
  <div class="index" data-eln id="index"></div>
  <div class="sh" data-eln>02 — LA commercial, by assessed value</div>
  <div class="laidx" data-eln id="laidx"></div>
  <div class="cols2">
    <div><div class="sh" data-eln>03 — Brokerages</div><div class="firmidx" data-eln id="firms"></div></div>
    <div><div class="sh" data-eln>04 — The REview</div><div class="revidx" data-eln id="rev"></div></div>
  </div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'L10', render(d){
  const {esc,shortUsd,dstr}=RENTV;
  idate.textContent=new Date(d.news.fetched_at||Date.now()).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'});
  const t=d.ticker||{};
  mkt.innerHTML=Object.values(t).filter(m=>m&&m.label).map(m=>`<div class="m"><span>${esc(m.label)}</span><b class="${m.dir==='down'?'dn':''}">${esc(m.value)}${m.change_pct!=null?` ${m.change_pct>0?'+':''}${m.change_pct}%`:''}</b></div>`).join('');
  const it=d.news.items||[];
  index.innerHTML=it.map((n,i)=>`<a href="${esc(n.url)}"><span class="n">${String(i+1).padStart(2,'0')}</span><span class="t">${esc(n.title)}</span><span class="c">${esc(n.cat)}</span></a>`).join('');
  document.getElementById('laidx').innerHTML=(d.la.marquee||[]).slice(0,10).map((m,i)=>`<div class="r"><span class="n" style="color:#c8102e;font-weight:600">${String(i+1).padStart(2,'0')}</span><span>${esc(m.address)}, ${esc(m.city)}<br><span class="ty">${esc(m.use_desc||m.type_label)}</span></span><span class="ty">${esc(m.type_label)}</span><b>${shortUsd(m.assessed_total)}</b></div>`).join('');
  document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,8).map((f,i)=>`<div class="r"><span class="n" style="color:#c8102e">${String(i+1).padStart(2,'0')}</span><span>${esc(f.name)}</span><b>${(f.agent_count||0).toLocaleString()}</b></div>`).join('');
  document.getElementById('rev').innerHTML=(d.videos.items||[]).slice(0,6).map((v,i)=>`<div class="r"><span class="n" style="color:#c8102e">${String(i+1).padStart(2,'0')}</span><span>${esc(v.title)}</span></div>`).join('');
}});
</script></body></html>