`mockups/L09.html`

57 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L09 · Broadsheet — RENTV redesign</title>
<link rel="stylesheet" href="assets/base.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<style>
  body{background:#f3efe6;color:#1a1a17;font-family:'Spectral',Georgia,serif}
  .paper{max-width:1180px;margin:0 auto;padding:22px 26px;background:#fbf8f1;box-shadow:0 0 30px rgba(0,0,0,.08)}
  .flag{text-align:center;border-bottom:3px double #1a1a17;padding-bottom:10px}
  .flag h1{font-family:'Playfair Display',serif;font-weight:900;font-size:64px;letter-spacing:-1px;margin:0}.flag h1 span{color:#c8102e}
  .flag .line{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:8px;border-top:1px solid #1a1a17;padding-top:6px}
  .lead{display:grid;grid-template-columns:2fr 1fr;gap:24px;border-bottom:2px solid #1a1a17;padding:20px 0}
  .lead h2{font-family:'Playfair Display',serif;font-size:38px;line-height:1.05;margin:0 0 10px}
  .lead .deck{font-size:16px;font-style:italic;color:#44413a}
  .lead .im{height:260px;display:block;border:1px solid #1a1a17}
  .lead p{font-size:14px;line-height:1.6;margin-top:10px;column-count:2;column-gap:18px}
  .cols{columns:4;column-gap:20px;padding:18px 0;border-bottom:2px solid #1a1a17}
  .cols .a{break-inside:avoid;margin-bottom:14px;display:block;color:#1a1a17;text-decoration:none;border-bottom:1px solid #d8d2c4;padding-bottom:10px}
  .cols .k{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#c8102e;font-weight:600}
  .cols h4{font-family:'Playfair Display',serif;font-size:16px;line-height:1.15;margin:3px 0}
  .lower{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px;padding-top:18px}
  .pod{border:2px solid #1a1a17;padding:14px}
  .pod .k{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
  .pod .v{font-family:'Playfair Display',serif;font-size:34px;font-weight:900}
  .pod .a{font-size:13px;font-weight:600}.pod .brief{font-size:12px;line-height:1.5;margin-top:6px;color:#44413a}
  h3.rule{font-size:12px;text-transform:uppercase;letter-spacing:.14em;border-bottom:1px solid #1a1a17;padding-bottom:5px;margin:0 0 10px;font-family:'Spectral'}
  .agate{font-size:12px;line-height:1.7}.agate .r{display:flex;justify-content:space-between;border-bottom:1px dotted #b8b1a2}
  .stand .s{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid #e2dccf}.stand b{color:#c8102e}
  .colophon{text-align:center;border-top:3px double #1a1a17;margin-top:18px;padding-top:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
  @media(max-width:900px){.lead,.lower{grid-template-columns:1fr}.cols{columns:2}.flag h1{font-size:40px}.lead p{column-count:1}}
</style></head>
<body>
<div class="paper">
  <div class="flag" data-eln><h1>The REN<span>TV</span> Daily</h1><div class="line" id="flagline"><span>Commercial Real Estate · Western U.S.</span><span>Since 1998</span><span id="fdate"></span></div></div>
  <div class="lead" data-eln id="lead"></div>
  <div class="cols" data-eln id="cols"></div>
  <div class="lower">
    <div><h3 class="rule" data-eln>Property of the Day</h3><div class="pod" data-eln id="pod"></div></div>
    <div><h3 class="rule" data-eln>Recorded Activity</h3><div class="agate" data-eln id="agate"></div></div>
    <div><h3 class="rule" data-eln>Brokerage Standings</h3><div class="stand" data-eln id="stand"></div></div>
  </div>
  <div class="colophon" data-eln>The RENTV Daily · a live edition · data from rentv.com, LA County Assessor & CA DRE</div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'L09', render(d){
  const {esc,shortUsd,dstr}=RENTV;
  fdate.textContent=new Date(d.news.fetched_at||Date.now()).toLocaleDateString(undefined,{weekday:'long',year:'numeric',month:'long',day:'numeric'});
  const it=d.news.items||[], l=it[0], m=(d.la.marquee||[])[0];
  lead.innerHTML=`<div><span class="k" style="font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#c8102e;font-weight:600">${esc(l.cat)}</span><h2>${esc(l.title)}</h2><div class="deck">${esc(m.brief).slice(0,120)}</div><p>${esc(m.brief)} The regional market read continues below, with recorded activity and brokerage standings drawn from the live public record.</p></div>${RENTV.imgTag(l.image,'im',l.id)}`;
  document.getElementById('cols').innerHTML=it.slice(1,13).map(n=>`<a class="a" href="${esc(n.url)}"><span class="k">${esc(n.cat)}</span><h4>${esc(n.title)}</h4></a>`).join('');
  document.getElementById('pod').innerHTML=`<div class="k">${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('agate').innerHTML=(d.la.recent||[]).slice(0,9).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('stand').innerHTML=(d.la.firms||[]).slice(0,8).map((f,i)=>`<div class="s"><span>${i+1}. ${esc(f.name)}</span><b>${(f.agent_count||0).toLocaleString()}</b></div>`).join('');
}});
</script></body></html>