`mockups/admin/A04.html`

42 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>A04 · Rolodex — 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}
  .wrap{max-width:1300px;margin:0 auto;padding:14px 20px}
  .bar{display:flex;gap:10px;align-items:center;margin:8px 0 14px}
  .bar input{flex:1;background:#11161c;border:1px solid #232a32;border-radius:9px;color:#e7ecf1;padding:11px 14px;font:inherit}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
  .card{background:#11161c;border:1px solid #232a32;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:9px}
  .card .top{display:flex;gap:12px;align-items:center}
  .av{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff}
  .card .nm{font-weight:800;font-size:16px;line-height:1.15}.card .f{font-size:12.5px;color:#9aa4ad}
  .card .row{display:flex;gap:8px;flex-wrap:wrap;font-size:12px}
  .card .row a{color:#7cc0ff;text-decoration:none;border-bottom:1px dotted #3a5064}
  .card .acts{border-top:1px solid #232a32;padding-top:11px}
</style></head>
<body>
<div class="admhead" data-eln><h1>RENTV Admin · <span>Broker Rolodex</span></h1><div class="fresh" id="fresh"></div></div>
<div class="wrap">
  <div class="bar" data-eln><input id="q" placeholder="Search brokers by name, firm, city…"><span style="color:#8b939b;font-size:12px" id="count"></span></div>
  <div class="grid" data-eln id="grid"></div>
</div>
<script src="../assets/chrome.js"></script><script src="admin-core.js"></script>
<script>
ADM.mount('A04', d=>{
  const esc=ADM.esc;const hue=s=>((String(s).length*47)%360);
  document.getElementById('fresh').textContent=d.brokers.length+' CA brokers · click any action to reach them';
  function render(){
    let r=d.brokers.slice();const q=(document.getElementById('q').value||'').toLowerCase();if(q)r=r.filter(x=>JSON.stringify(x).toLowerCase().includes(q));
    document.getElementById('grid').innerHTML=r.map(b=>{const ini=(b.name||'?').split(/[\s,]+/).filter(Boolean).slice(0,2).map(w=>w[0]).join('').toUpperCase();
      return `<div class="card"><div class="top"><div class="av" style="background:hsl(${hue(b.name)} 45% 38%)">${esc(ini)}</div><div><div class="nm">${esc(b.name)}</div><div class="f">${esc(b.license_type||'Licensee')}</div></div></div>
      <div class="row"><a href="${ADM.LI_C(b.firm_name||'')}" target="_blank" onclick="event.stopPropagation()">${esc(b.firm_name||'—')}</a> · <a href="${ADM.MAPS((b.firm_name||'')+' '+ADM.loc(b))}" target="_blank" onclick="event.stopPropagation()">${esc(b.city||'')}</a> · <a class="field-link" href="${ADM.DRE(b.license_no||'')}" target="_blank" onclick="event.stopPropagation()">DRE ${esc(b.license_no||'')}</a></div>
      <div class="acts"><div class="acts">${ADM.actions('brokers',b)}</div></div></div>`;}).join('');
    document.getElementById('count').textContent=r.length+' shown';
  }
  document.getElementById('q').oninput=render;render();
});
</script></body></html>