`public/eulogy.html`

160 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ventura Boulevard · the eulogy wall</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>(function(){try{var t=localStorage.getItem('vc-theme');document.documentElement.dataset.theme=(t==='light'||t==='dark')?t:'dark';}catch(e){document.documentElement.dataset.theme='dark';}})();</script>
<link rel="stylesheet" href="/theme.css">
<script src="/theme.js" defer></script>
<style>
  :root {
    --noir: #050507; --noir-rise: #0e0e12; --ink: #e8e2d4;
    --ink-mute: #6e6a5e; --metal: #b89968; --metal-glow: #d4b683;
    --rule: #2a2622;
    --serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }
  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Inter:wght@200;300;400;600&family=JetBrains+Mono:wght@200;300;400&display=swap');
  html, body { margin: 0; background: var(--noir); color: var(--ink); font-family: var(--sans); font-weight: 300; }
  * { box-sizing: border-box; }
  header { position: sticky; top: 0; z-index: 10;
    background: linear-gradient(180deg, rgba(5,5,7,.97) 70%, rgba(5,5,7,0));
    padding: 22px 40px 16px; border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
  header h1 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; margin: 0; }
  header h1 em { font-style: italic; color: var(--metal); }
  .sub { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
  nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  nav.tabs a { font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink-mute); text-decoration: none; padding: 6px 12px; border: 1px solid var(--rule); }
  nav.tabs a.active, nav.tabs a:hover { color: var(--metal); border-color: var(--metal); }
  .hero { padding: 90px 40px 50px; text-align: center;
    background: radial-gradient(ellipse at center top, rgba(184,153,104,0.04), transparent 70%);
    border-bottom: 1px solid var(--rule); }
  .hero h2 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 64px; letter-spacing: -0.02em; margin: 0 0 16px; line-height: 1.05; }
  .hero h2 em { color: var(--metal); font-style: normal; }
  .hero p { color: var(--ink-mute); max-width: 600px; margin: 0 auto 12px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; }
  .hero .count { font-family: var(--serif); font-style: italic; color: var(--metal); font-size: 18px; margin-top: 18px; }

  .field { padding: 80px 60px 140px; max-width: 1200px; margin: 0 auto; }
  .stones { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 24px; }
  .stone {
    border: 1px solid var(--rule); padding: 24px 22px 28px;
    background: var(--noir); position: relative;
    display: flex; flex-direction: column; min-height: 200px;
    transition: all 280ms ease;
    transform: translateY(20px); opacity: 0;
  }
  .stone.risen { transform: translateY(0); opacity: 1; }
  .stone:hover { border-color: var(--metal); background: var(--noir-rise); }
  .stone .cross { font-family: var(--serif); color: var(--metal); font-size: 14px; opacity: 0.5; text-align: center; margin-bottom: 10px; }
  .stone .nm { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.2; color: var(--ink); margin-bottom: 6px; text-align: center; }
  .stone .addr { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); text-align: center; margin-bottom: 16px; line-height: 1.5; }
  .stone .epitaph { font-family: var(--serif); font-style: italic; font-size: 11px; color: var(--ink-mute); text-align: center; line-height: 1.55; margin-top: auto; }
  .stone .epitaph em { color: var(--metal); font-style: normal; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; display: block; margin-top: 8px; }
  .stone .url { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: #444; text-align: center; word-break: break-all; margin-top: 8px; }
  /* Cause-of-death color tints */
  .stone.dns_dead .cross { color: #6c4a4a; }
  .stone.dns_dead .epitaph em { color: #8e6363; }
  .stone.unreachable .cross { color: #6c624a; }
  .stone.unreachable .epitaph em { color: #8e8063; }
  .stone.challenge_wall .cross { color: #4a5d6c; }
  .stone.challenge_wall .epitaph em { color: #638a8e; }
  .stone.silent .epitaph em { color: var(--ink-mute); }

  footer { padding: 24px 40px 40px; border-top: 1px solid var(--rule);
    font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: 12px; text-align: center; }
  .empty { padding: 80px 32px; text-align: center; font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: 18px; }
</style>
</head>
<body>

<header>
  <div>
    <h1>Ventura <em>Boulevard</em> · the eulogy wall</h1>
    <div class="sub">storefronts still licensed · websites no longer answer</div>
  </div>
  <nav class="tabs">
    <a href="/">map</a>
    <a href="/timeline.html">timeline</a>
    <a href="/pantone.html">pantone</a>
    <a href="/headlines.html">voices</a>
    <a href="/tongues.html">tongues</a>
    <a href="/chains.html">chains</a>
    <a href="/atlas.html">atlas</a>
    <a href="/eulogy.html" class="active">eulogy</a>
    <span class="theme-toggle-host" style="display:inline-flex;align-items:center;margin-left:6px"></span>
  </nav>
</header>

<section class="hero">
  <h2>They were <em>here</em>.</h2>
  <p>Every business below pays its tax license. Files its renewals. Has an address on Ventura Boulevard. But when you go to its website, no one answers anymore.</p>
  <div class="count" id="count">—</div>
</section>

<section class="field">
  <div class="stones" id="stones"></div>
  <div class="empty" id="empty" style="display:none">No ghosts on the corridor today. Either every site loaded clean or none have been crawled.</div>
</section>

<footer>The dead are still licensed. The licensed are still alive on paper. The paper is the only place they still exist.</footer>

<script>
const CAUSE_LABEL = {
  dns_dead: 'domain ▪ name ▪ unresolved',
  unreachable: 'connection refused',
  challenge_wall: 'behind the wall',
  silent: 'silent — no headline returned',
  unknown_error: 'fetch failed',
};

function escapeHtml(s) {
  return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
}

function hostOf(url) {
  if (!url) return '';
  try { return new URL(/^https?:/.test(url) ? url : 'https://' + url).hostname.replace(/^www\./, ''); } catch { return ''; }
}

fetch('/api/ghosts').then(r => r.json()).then(data => {
  const rows = data.rows || [];
  document.getElementById('count').textContent =
    `${rows.length} licensed · ${rows.length} no longer answer.`;
  if (!rows.length) { document.getElementById('empty').style.display = 'block'; return; }
  const stones = document.getElementById('stones');
  stones.innerHTML = rows.map((r, i) => {
    const addr = [r.address, r.city, r.zip].filter(Boolean).join(' · ');
    const host = hostOf(r.website);
    return `
      <div class="stone ${escapeHtml(r.death_cause)}" style="--i:${i}">
        <div class="cross">⚜</div>
        <div class="nm">${escapeHtml(r.name)}</div>
        <div class="addr">${escapeHtml(addr)}</div>
        <div class="epitaph">
          ${r.last_voice ? '<em>last voice: ' + escapeHtml(r.last_voice.toLowerCase()) + '</em>' : ''}
          <em>${escapeHtml(CAUSE_LABEL[r.death_cause] || r.death_cause)}</em>
          <div class="url">${escapeHtml(host)}</div>
        </div>
      </div>`;
  }).join('');
  // Stagger-rise on intersection
  const obs = new IntersectionObserver((entries) => {
    entries.forEach((e, i) => {
      if (!e.isIntersecting) return;
      setTimeout(() => e.target.classList.add('risen'), i * 60);
      obs.unobserve(e.target);
    });
  }, { rootMargin: '60px' });
  Array.from(stones.children).forEach(c => obs.observe(c));
}).catch(e => {
  document.getElementById('empty').textContent = 'failed to load: ' + e.message;
  document.getElementById('empty').style.display = 'block';
});
</script>
</body>
</html>