`mockups/L07.html`

60 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>L07 · Map-Anchored — 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:#f6f7f9;color:#14171a;font-family:'Inter',system-ui,sans-serif}
  .wrap{max-width:1300px;margin:0 auto;padding:16px}
  .hero{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:18px}
  .map{position:relative;background:radial-gradient(circle at 40% 40%,#1b2430,#0d1218);border-radius:16px;min-height:420px;overflow:hidden;border:1px solid #cfd4da}
  .map .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px}
  .map .title{position:absolute;top:16px;left:18px;color:#eaf0f6;z-index:2}
  .map .title b{font-size:14px;letter-spacing:.14em;text-transform:uppercase}.map .title span{display:block;font-size:12px;color:#93a0ad;margin-top:3px}
  .pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;z-index:3;text-align:center}
  .pin .dot{width:16px;height:16px;border-radius:50% 50% 50% 0;background:#c8102e;transform:rotate(-45deg);margin:0 auto;box-shadow:0 3px 8px rgba(0,0,0,.4);border:2px solid #fff}
  .pin .lab{background:#fff;border-radius:6px;font-size:11px;font-weight:800;padding:3px 7px;margin-top:6px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3)}
  .pin.sel .dot{background:#0f8a4d}
  .detail{background:#fff;border:1px solid #e4e7ea;border-radius:16px;padding:22px;display:flex;flex-direction:column;justify-content:center}
  .detail .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#c8102e;font-weight:800}
  .detail .v{font-size:38px;font-weight:800;letter-spacing:-1px;margin:4px 0}
  .detail .a{font-size:15px;font-weight:600}.detail .brief{font-size:13px;color:#5b636b;line-height:1.55;margin-top:10px}
  .detail .meta{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap;font-size:12px}.detail .meta b{display:block;font-size:16px}
  .sh{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#5b636b;margin:20px 0 12px}
  .wrapnews{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .card{background:#fff;border:1px solid #e4e7ea;border-radius:12px;overflow:hidden}.card .im{height:120px;display:block}.card .b{padding:12px}.card .tag{font-size:10px;font-weight:800;text-transform:uppercase}.card h3{font-size:14px;line-height:1.25;margin:5px 0 0}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
  .list .r{display:flex;justify-content:space-between;background:#fff;border:1px solid #e4e7ea;border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:13px}.list .r b{color:#0f8a4d}
  @media(max-width:900px){.hero,.wrapnews,.two{grid-template-columns:1fr}}
</style></head>
<body>
<div class="wrap">
  <div class="hero">
    <div class="map" data-eln id="map"><div class="grid"></div><div class="title"><b>LA Commercial Map</b><span>Marquee assets by assessed value · click a pin</span></div></div>
    <div class="detail" data-eln id="detail"></div>
  </div>
  <div class="sh" data-eln>Regional news wrap</div>
  <div class="wrapnews" data-eln id="news"></div>
  <div class="two">
    <div><div class="sh" data-eln>Recent recorded activity</div><div class="list" data-eln id="rec"></div></div>
    <div><div class="sh" data-eln>Largest brokerages</div><div class="list" data-eln id="firms"></div></div>
  </div>
</div>
<script src="assets/chrome.js"></script>
<script>
RENTV.mount({layout:'L07', render(d){
  const {esc,shortUsd,dstr,imgTag,sectionColor}=RENTV;
  const mq=(d.la.marquee||[]).slice(0,8);
  // scatter pins deterministically across the map area
  const pins=mq.map((m,i)=>{const x=12+((i*37)%76), y=20+((i*29)%60);return {m,x,y};});
  map.insertAdjacentHTML('beforeend',pins.map((p,i)=>`<div class="pin${i===0?' sel':''}" data-i="${i}" style="left:${p.x}%;top:${p.y}%"><div class="dot"></div><div class="lab">${RENTV.shortUsd(p.m.assessed_total)}</div></div>`).join(''));
  function showDetail(m){detail.innerHTML=`<div class="k">${esc(m.type_label)} · ${esc(m.use_desc||'')}</div><div class="v">${shortUsd(m.assessed_total)}</div><div class="a">${esc(m.address)}, ${esc(m.city)} ${esc(m.zip||'')}</div><div class="brief">${esc(m.brief)}</div><div class="meta"><span>SqFt<b>${(m.sqft||0).toLocaleString()}</b></span><span>Built<b>${m.year_built||'—'}</b></span><span>Recorded<b>${dstr(m.recording_date)}</b></span></div>`;}
  showDetail(mq[0]);
  map.querySelectorAll('.pin').forEach(p=>p.onclick=()=>{map.querySelectorAll('.pin').forEach(x=>x.classList.remove('sel'));p.classList.add('sel');showDetail(mq[+p.dataset.i]);});
  const it=d.news.items||[];
  document.getElementById('news').innerHTML=it.slice(0,8).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('rec').innerHTML=(d.la.recent||[]).slice(0,6).map(r=>`<div class="r"><span>${dstr(r.recording_date)} · ${esc(r.type_label)}</span><b>${r.assessed_total?shortUsd(r.assessed_total):'recorded'}</b></div>`).join('');
  document.getElementById('firms').innerHTML=(d.la.firms||[]).slice(0,6).map(f=>`<div class="r"><span>${esc(f.name)}</span><b>${(f.agent_count||0).toLocaleString()}</b></div>`).join('');
}});
</script></body></html>