`public/find.html`

87 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Find · The Corridor</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@200;300&display=swap');
:root{--paper:#faf6ee;--ink:#1a1815;--ink-mute:#6e6356;--metal:#8a6d3b;--metal-glow:#b89968;--accent:#6a3a1a;--rule:#d8cdb8}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-weight:300;line-height:1.55}
header{text-align:center;padding:60px 24px 32px;border-bottom:1px solid var(--rule)}
header .kicker{font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--metal);font-weight:500}
header h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:64px;margin:8px 0 0;color:var(--ink);letter-spacing:-0.02em}
header h1 em{color:var(--metal);font-style:normal}
header .deck{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--ink-mute);margin-top:12px;max-width:540px;margin-left:auto;margin-right:auto}
.searchbar{padding:32px 24px;text-align:center}
.searchbar input{font-family:'Cormorant Garamond',serif;font-size:28px;font-style:italic;background:transparent;border:none;border-bottom:1px solid var(--rule);color:var(--ink);padding:14px 12px;min-width:520px;outline:none;text-align:center}
.searchbar input:focus{border-bottom-color:var(--metal)}
.searchbar .examples{font-size:11px;letter-spacing:.18em;color:var(--ink-mute);margin-top:12px}
.searchbar .examples b{color:var(--metal);font-family:'JetBrains Mono',monospace;font-weight:400;background:rgba(184,153,104,0.08);padding:2px 8px;margin:0 3px;cursor:pointer}
main{max-width:780px;margin:0 auto;padding:24px 24px 80px}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.row:hover{background:rgba(184,153,104,0.04);padding-left:8px;padding-right:8px}
.row .suite{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--metal);min-width:60px;text-align:right;letter-spacing:.05em}
.row .biz{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--ink)}
.row .biz small{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:11px;color:var(--ink-mute);margin-top:2px;letter-spacing:.04em}
.row .feat{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--metal-glow);font-weight:500}
.row .feat.un{color:var(--ink-mute);font-weight:300}
.empty{text-align:center;padding:80px 24px;color:var(--ink-mute);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:22px}
.toolbar{position:fixed;top:14px;right:14px;display:flex;gap:6px;z-index:100}
.toolbar a{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper);padding:5px 10px;border:1px solid var(--rule);text-decoration:none}
.toolbar a:hover{color:var(--metal);border-color:var(--metal)}
</style>
</head>
<body>
<div class="toolbar">
  <a href="/issue">Issue</a>
  <a href="/search.html">Editorial search</a>
</div>
<header>
  <div class="kicker">The Corridor · finder</div>
  <h1>Who's <em>where</em>?</h1>
  <div class="deck">Search by suite, street number, business name, or trade. Every BTRC-licensed business on Ventura Boulevard is in here.</div>
</header>
<div class="searchbar">
  <input id="q" type="search" autofocus oninput="onSearch()" placeholder="15303 suite 1600 / lawyer encino / shirin restaurant">
  <div class="examples">try
    <b onclick="qy('15442')">15442</b>
    <b onclick="qy('lawyer encino')">lawyer encino</b>
    <b onclick="qy('shirin')">shirin</b>
    <b onclick="qy('chiropractic sherman oaks')">chiropractic sherman oaks</b>
    <b onclick="qy('15303 suite 1600')">15303 suite 1600</b>
  </div>
</div>
<main id="results"></main>
<script>
function escHtml(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])); }
function qy(s) { document.getElementById('q').value = s; onSearch(); }
let _t;
async function onSearch() {
  clearTimeout(_t);
  _t = setTimeout(go, 200);
}
async function go() {
  const q = document.getElementById('q').value.trim();
  if (q.length < 2) {
    document.getElementById('results').innerHTML = '';
    return;
  }
  const data = await fetch('/api/find?q=' + encodeURIComponent(q)).then(r => r.json());
  const rows = data.rows || [];
  document.getElementById('results').innerHTML = rows.length === 0
    ? `<div class="empty">No matches.</div>`
    : rows.map(r => `
        <a class="row" href="${r.feature_id ? `/magazine/${r.feature_id}` : `/buildings/${encodeURIComponent(r.bldg_address || '')}/issue`}">
          <div class="suite">${escHtml(r.suite ? '#' + r.suite : '')}</div>
          <div>
            <div class="biz">${escHtml(r.headline || r.name)}<small>${escHtml(r.name)} · ${escHtml(r.address || '')} · ${escHtml(r.city || '')}</small></div>
          </div>
          <div class="feat ${r.feature_id ? '' : 'un'}">${r.feature_id ? '★ feature' : 'building'}</div>
        </a>`).join('');
}
</script>
</body>
</html>