`mockups/admin/A06.html`

51 lines
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>A06 · Command Palette — 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}
  .stage{max-width:820px;margin:0 auto;padding:60px 20px}
  .stage .hh{text-align:center;margin-bottom:22px}.stage .hh h1{font-size:26px;font-weight:800}.stage .hh h1 span{color:#c8102e}.stage .hh p{color:#8b939b;margin-top:6px;font-size:14px}
  .palette{background:#11161c;border:1px solid #2a333d;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
  .palette .in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #232a32}
  .palette .in .mag{font-size:18px;color:#8b939b}
  .palette input{flex:1;background:none;border:0;color:#e7ecf1;font:600 18px 'Inter';outline:none}
  .palette .scope{display:flex;gap:5px;padding:10px 14px;border-bottom:1px solid #232a32}
  .palette .scope button{background:#161d25;border:0;color:#9aa4ad;font:800 11px system-ui;padding:6px 11px;border-radius:20px;cursor:pointer}.palette .scope button.on{background:#c8102e;color:#fff}
  .results{max-height:52vh;overflow-y:auto}
  .res{padding:12px 16px;border-bottom:1px solid #171d24;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .res:hover,.res.hot{background:#141b22}
  .res .nm{font-weight:700}.res .f{font-size:12px;color:#9aa4ad;margin-top:2px}
  .res .kbd{font-size:10px;color:#6b747d;border:1px solid #2a333d;border-radius:5px;padding:2px 6px}
  .res .exp{display:none}.res.open{flex-direction:column;align-items:stretch}.res.open .exp{display:block;margin-top:10px}
  .hint{text-align:center;color:#6b747d;font-size:12px;margin-top:14px}
</style></head>
<body>
<div class="stage">
  <div class="hh" data-eln><h1>RENTV <span>Command</span></h1><p>Search 380,000 California brokers and 34,000 firms — then act.</p></div>
  <div class="palette" data-eln>
    <div class="in"><span class="mag">⌘</span><input id="q" placeholder="Type a broker, firm, city, or license…" autofocus></div>
    <div class="scope" id="scope"><button data-s="brokers" class="on">Brokers</button><button data-s="firms">Firms</button><button data-s="owners">Assets</button></div>
    <div class="results" data-eln id="results"></div>
  </div>
  <div class="hint" data-eln>Enter opens the top result's actions · every result links out to LinkedIn, the firm, the map, and the DRE</div>
</div>
<script src="../assets/chrome.js"></script><script src="admin-core.js"></script>
<script>
let S={s:'brokers'};
ADM.mount('A06', d=>{
  S.d=d;const esc=ADM.esc;
  function results(){let r=(S.s==='brokers'?d.brokers:S.s==='firms'?d.firms:d.owners).slice();const q=(document.getElementById('q').value||'').toLowerCase();if(q)r=r.filter(x=>JSON.stringify(x).toLowerCase().includes(q));return r.slice(0,40);}
  function render(){
    const r=results();
    document.getElementById('results').innerHTML=r.map((x,i)=>`<div class="res${i===0?' hot':''}" data-i="${i}"><div><div class="nm">${esc(ADM.nm(x))}</div><div class="f">${esc(ADM.sub(S.s,x))}${ADM.loc(x)?' · '+esc(ADM.loc(x)):''}</div><div class="exp"><div class="acts">${ADM.actions(S.s,x)}</div></div></div><span class="kbd">↵</span></div>`).join('')||'<div class="res"><div class="f">No matches.</div></div>';
    document.querySelectorAll('.res').forEach(el=>el.onclick=e=>{if(e.target.closest('a'))return;el.classList.toggle('open');});
  }
  document.getElementById('scope').onclick=e=>{const b=e.target.closest('button');if(!b)return;document.querySelectorAll('#scope button').forEach(x=>x.classList.remove('on'));b.classList.add('on');S.s=b.dataset.s;render();};
  const q=document.getElementById('q');q.oninput=render;
  q.onkeydown=e=>{if(e.key==='Enter'){const first=document.querySelector('.res');if(first)first.classList.add('open');}};
  render();
});
</script></body></html>