`mockups/admin/A05.html`

38 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>A05 · Map Desk — RENTV Admin</title>
<link rel="stylesheet" href="../assets/base.css"><link rel="stylesheet" href="admin.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  body{background:#0d1014;color:#e7ecf1;font-family:'Inter',system-ui,sans-serif}
  .layout{display:grid;grid-template-columns:1fr 360px;height:calc(100vh - 52px)}
  .map{position:relative;background:radial-gradient(circle at 42% 38%,#1a2531,#0b1016);overflow:hidden}
  .map .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px}
  .map .t{position:absolute;top:16px;left:18px;z-index:2}.map .t b{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#eaf0f6}.map .t 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 .d{width:16px;height:16px;border-radius:50% 50% 50% 0;background:#c8102e;transform:rotate(-45deg);margin:0 auto;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.5)}
  .pin .l{background:#0b0e12;border:1px solid #232a32;border-radius:6px;font-size:11px;font-weight:800;padding:3px 7px;margin-top:6px;white-space:nowrap;color:#e7ecf1}
  .pin.sel .d{background:#37d67a}
  .side{border-left:1px solid #232a32;overflow-y:auto;padding:20px}
  .side .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#c8102e;font-weight:800}
  .side h2{font-size:24px;font-weight:800;margin:5px 0}.side .meta{color:#9aa4ad;font-size:14px}
  .side .acts{margin:18px 0}
  .side .kv{display:flex;flex-direction:column;gap:9px}.side .kv .r{display:flex;justify-content:space-between;border-bottom:1px solid #171d24;padding:8px 0;font-size:13px}.side .kv b{color:#e7ecf1}
  @media(max-width:820px){.layout{grid-template-columns:1fr;height:auto}.map{height:56vh}}
</style></head>
<body>
<div class="layout">
  <div class="map" data-eln id="map"><div class="grid"></div><div class="t"><b>LA Commercial Map</b><span>Marquee assets by assessed value · click a pin</span></div></div>
  <div class="side" data-eln id="side"></div>
</div>
<script src="../assets/chrome.js"></script><script src="admin-core.js"></script>
<script>
ADM.mount('A05', d=>{
  const esc=ADM.esc;const mq=d.owners.slice(0,10);
  mq.forEach((m,i)=>{const x=12+((i*41)%76),y=18+((i*31)%62);const p=document.createElement('div');p.className='pin'+(i===0?' sel':'');p.style.left=x+'%';p.style.top=y+'%';p.dataset.i=i;p.innerHTML=`<div class="d"></div><div class="l">${RENTV.shortUsd(m.assessed_total)}</div>`;document.getElementById('map').appendChild(p);});
  function show(m){const addr=[m.address,m.city].filter(Boolean).join(', ');document.getElementById('side').innerHTML=`<div class="k">${esc(m.type_label||'Asset')} · ${esc(m.use_desc||'')}</div><h2>${esc(m.address||m.ain)}</h2><div class="meta">${esc(addr)}</div><div class="acts">${ADM.actions('owners',m)}</div><div class="kv"><div class="r"><span>Assessed</span><b>${RENTV.shortUsd(m.assessed_total)}</b></div><div class="r"><span>SqFt</span><b>${(m.sqft||0).toLocaleString()}</b></div><div class="r"><span>Built</span><b>${m.year_built||'—'}</b></div><div class="r"><span>Recorded</span><b>${RENTV.dstr(m.recording_date)}</b></div><div class="r"><span>AIN</span><b>${esc(m.ain)}</b></div></div>`;}
  show(mq[0]);
  document.querySelectorAll('.pin').forEach(p=>p.onclick=()=>{document.querySelectorAll('.pin').forEach(x=>x.classList.remove('sel'));p.classList.add('sel');show(mq[+p.dataset.i]);});
});
</script></body></html>