`mockups/L06.html`

56 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L06 · Broadcast — RENTV redesign</title>
<link rel="stylesheet" href="assets/base.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<style>
  body{background:#0a0d11;color:#e7ecf1;font-family:'Inter',system-ui,sans-serif}
  .tape{background:#c8102e;color:#fff;overflow:hidden;white-space:nowrap;border-bottom:2px solid #000}
  .tape .run{display:inline-block;padding:9px 0;animation:mar 40s linear infinite;font-weight:800;font-size:13px;letter-spacing:.02em}
  .tape .run span{margin:0 26px}.tape .run b{background:#000;padding:2px 7px;border-radius:3px;margin-right:8px;font-size:11px}
  @keyframes mar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .wrap{max-width:1280px;margin:0 auto;padding:16px}
  .onair{position:relative;border-radius:14px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;margin-bottom:14px}
  .onair .bg{position:absolute;inset:0;display:block}
  .onair .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 60%)}
  .onair .b{position:relative;padding:26px}
  .onair .live{display:inline-flex;align-items:center;gap:7px;background:#c8102e;font-weight:900;font-size:12px;letter-spacing:.1em;padding:5px 12px;border-radius:4px}
  .onair .live .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:bl 1s infinite}@keyframes bl{50%{opacity:.3}}
  .onair h1{font-size:34px;font-weight:900;line-height:1.08;margin:12px 0 0;max-width:760px}
  .breaking{background:#12161c;border:1px solid #232a32;border-left:5px solid #c8102e;border-radius:8px;padding:12px 16px;margin-bottom:14px;font-weight:700}
  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .col{background:#12161c;border:1px solid #232a32;border-radius:12px;padding:16px}
  .col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8b939b;margin:0 0 10px;border-bottom:1px solid #232a32;padding-bottom:8px}
  .col a{display:block;color:#dbe1e7;text-decoration:none;padding:8px 0;border-bottom:1px solid #171d24;font-size:14px;line-height:1.3}
  .laband{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
  .la{background:#12161c;border:1px solid #232a32;border-radius:10px;padding:14px}.la .v{font-size:22px;font-weight:800}.la .a{font-size:11px;color:#8b939b;margin-top:3px}
  .ribbon{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.ribbon .f{background:#12161c;border:1px solid #232a32;border-radius:20px;padding:7px 13px;font-size:12px;font-weight:700}.ribbon .f b{color:#ff6b6b}
  @media(max-width:860px){.cols{grid-template-columns:1fr}.laband{grid-template-columns:1fr 1fr}}
</style></head>
<body>
<div class="tape" data-eln id="tape"></div>
<div class="wrap">
  <div class="onair" data-eln id="onair"></div>
  <div class="breaking" data-eln id="breaking"></div>
  <div class="cols" data-eln id="cols"></div>
  <div class="laband" data-eln id="laband"></div>
  <div class="ribbon" data-eln id="firms"></div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({dark:true, layout:'L06', render(d){
  const {esc,shortUsd,imgTag}=RENTV;
  const it=d.news.items||[];
  const run=it.slice(0,14).map(n=>`<span><b>${esc(n.cat)}</b>${esc(n.title)}</span>`).join('');
  tape.innerHTML=`<div class="run">${run}${run}</div>`;
  const v=(d.videos.items||[])[0]||{}, l=it[0];
  onair.innerHTML=`${imgTag(v.thumb||l.image,'bg',v.id||l.id)}<div class="scrim"></div><div class="b"><span class="live"><span class="dot"></span>ON AIR · THE REVIEW</span><h1>${esc(v.title||l.title)}</h1></div>`;
  breaking.innerHTML=`🔴 BREAKING · <span style="color:#ff6b6b">${esc(l.cat)}</span> — ${esc(l.title)}`;
  const bySect={}; it.forEach(n=>{(bySect[n.cat]=bySect[n.cat]||[]).push(n);});
  const top3=Object.keys(bySect).slice(0,3);
  cols.innerHTML=top3.map(s=>`<div class="col"><h4>${esc(s)}</h4>${bySect[s].slice(0,5).map(n=>`<a href="${esc(n.url)}">${esc(n.title)}</a>`).join('')}</div>`).join('');
  laband.innerHTML=(d.la.marquee||[]).slice(0,4).map(m=>`<div class="la"><div class="v">${shortUsd(m.assessed_total)}</div><div class="a">${esc(m.address)}</div></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>