`mockups/L01.html`

62 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L01 · Trading Desk — RENTV redesign</title>
<link rel="stylesheet" href="assets/base.css">
<style>
  body{background:#070a0e;color:#cfd6dd;font:14px/1.4 ui-monospace,Menlo,Consolas,monospace}
  .wrap{max-width:1320px;margin:0 auto;padding:14px}
  .rail{display:flex;gap:0;flex-wrap:wrap;border:1px solid #1c232b;background:#0b0e12;border-radius:8px;overflow:hidden;margin-bottom:12px}
  .rail .c{flex:1;min-width:150px;padding:9px 12px;border-right:1px solid #1c232b}
  .rail .k{font-size:10px;color:#6b747d;letter-spacing:.08em}.rail .v{font-size:17px;font-weight:700;color:#e7ecf1}
  .rail .v.dn{color:#ff6b6b}.rail .v.up{color:#37d67a}
  .cmd{width:100%;background:#0b0e12;border:1px solid #1c232b;border-radius:8px;color:#e7ecf1;padding:11px 14px;font:inherit;margin-bottom:12px}
  .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
  .panel{background:#0b0e12;border:1px solid #1c232b;border-radius:8px;overflow:hidden}
  .panel h3{margin:0;padding:9px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8b949e;border-bottom:1px solid #1c232b;background:#0e131a}
  .lead{padding:14px}.lead .tag{font-size:11px;font-weight:700}.lead h2{margin:6px 0;font:700 20px/1.25 system-ui;color:#fff}
  .lead .li{display:block;height:150px;border-radius:6px;margin-top:8px}
  table{width:100%;border-collapse:collapse}
  td{padding:8px 12px;border-bottom:1px solid #141a21;font-size:12.5px;vertical-align:top}
  tr:hover td{background:#0e131a}
  .sx{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
  .watch .r{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #141a21}
  .watch .a{font-size:12px}.watch .p{font-weight:700;color:#fff}
  .rev{display:flex;gap:8px;overflow:auto;padding:12px}
  .rev .v{min-width:150px}.rev .t{height:84px;border-radius:6px;display:block}.rev .n{font-size:11px;margin-top:5px;color:#cfd6dd}
  .foot{color:#4b545c;font-size:11px;text-align:center;padding:16px}
  @media(max-width:820px){.grid{grid-template-columns:1fr}}
</style></head>
<body>
<div class="wrap">
  <div class="rail" data-eln id="rail"></div>
  <input class="cmd" data-eln placeholder="⌘  search deals · addresses · brokers · sectors  →">
  <div class="grid">
    <div style="display:flex;flex-direction:column;gap:12px">
      <div class="panel" data-eln id="lead"></div>
      <div class="panel" data-eln><h3>News Blotter — live tape</h3><table id="blotter"></table></div>
      <div class="panel" data-eln><h3>Recorded Activity — LA County</h3><table id="recent"></table></div>
    </div>
    <div style="display:flex;flex-direction:column;gap:12px">
      <div class="panel watch" data-eln><h3>LA Marquee Watchlist</h3><div id="watch"></div></div>
      <div class="panel" data-eln><h3>Brokerage League Table</h3><table id="firms"></table></div>
      <div class="panel" data-eln><h3>The REview — video tape</h3><div class="rev" id="rev"></div></div>
    </div>
  </div>
  <div class="foot" data-eln>RENTV TERMINAL · L01 Trading Desk · data live from rentv.com + LA County Assessor + CA DRE</div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({dark:true, layout:'L01', render(d){
  const {esc,shortUsd,usd,dstr,sectionColor,imgTag}=RENTV;
  const t=d.ticker||{};
  rail.innerHTML=Object.values(t).filter(m=>m&&m.label).map(m=>`<div class="c"><div class="k">${m.label}</div><div class="v ${m.dir||''}">${m.value}${m.change_pct!=null?` <span style="font-size:11px">${m.change_pct>0?'+':''}${m.change_pct}%</span>`:''}</div></div>`).join('');
  const it=d.news.items||[], l=it[0];
  lead.innerHTML=`<h3>Lead Story</h3><div class="lead"><span class="tag" style="color:${sectionColor(l.cat)}">${esc(l.cat||'').toUpperCase()}</span><h2>${esc(l.title)}</h2>${imgTag(l.image,'li',l.id)}</div>`;
  blotter.innerHTML=it.slice(1,13).map(n=>`<tr><td style="width:34px;color:#4b545c">${n.id}</td><td><span class="sx" style="background:${sectionColor(n.cat)}"></span>${esc(n.title)}</td></tr>`).join('');
  document.getElementById('recent').innerHTML=(d.la.recent||[]).slice(0,7).map(r=>`<tr><td style="color:#6b747d;width:60px">${dstr(r.recording_date)}</td><td>${esc(r.type_label)} · ${esc(r.use_desc||'—')}</td><td style="text-align:right;color:#fff">${r.assessed_total?shortUsd(r.assessed_total):'—'}</td></tr>`).join('');
  watch.innerHTML=(d.la.marquee||[]).slice(0,8).map(m=>`<div class="r"><span class="a">${esc(m.address||m.ain)}<br><span style="color:#6b747d;font-size:10px">${esc(m.type_label)}</span></span><span class="p">${shortUsd(m.assessed_total)}</span></div>`).join('');
  document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,8).map((f,i)=>`<tr><td style="color:#6b747d;width:24px">${i+1}</td><td>${esc(f.name)}</td><td style="text-align:right;color:#37d67a">${(f.agent_count||0).toLocaleString()}</td></tr>`).join('');
  rev.innerHTML=(d.videos.items||[]).slice(0,8).map(v=>`<div class="v">${imgTag(v.thumb,'t',v.id)}<div class="n">${esc(v.title).slice(0,48)}</div></div>`).join('');
}});
</script></body></html>