Name Whisper

<!-- Market Ticker -->
<div class="ticker-bar" id="tickerBar">
  <div class="ticker-inner" id="tickerInner">
    <span class="ticker-item"><span class="ticker-label" id="tkVolLabel">24H VOL</span><span class="ticker-val" id="tkVol">—</span></span>
    <span class="ticker-sep"></span>
    <span class="ticker-item"><span class="ticker-label" id="tkSalesLabel">SALES</span><span class="ticker-val" id="tkSales">—</span></span>
    <span class="ticker-sep"></span>
    <span class="ticker-item"><span class="ticker-label" id="tkAvgLabel">AVG</span><span class="ticker-val" id="tkAvg">—</span></span>
    <span class="ticker-sep"></span>
    <span class="ticker-item"><span class="ticker-label">999 FLOOR</span><span class="ticker-val" id="tkFloor999">—</span><span class="ticker-delta" id="tkDelta999"></span></span>
    <span class="ticker-sep"></span>
    <span class="ticker-item"><span class="ticker-label">10K FLOOR</span><span class="ticker-val" id="tkFloor10K">—</span><span class="ticker-delta" id="tkDelta10K"></span></span>
    <span class="ticker-sep"></span>
    <span class="ticker-item" id="tkTopWrap"><span class="ticker-label">TOP SALE</span><span class="ticker-val accent" id="tkTop">—</span></span>
  </div>
</div>

<!-- Command Bar -->
<div class="command-bar" id="commandBar">
  <div class="search-row">
    <div class="search-box" id="searchBox">
      <div class="search-icon" id="searchIcon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </div>
      <input type="text" id="searchInput" placeholder="Ask anything about ENS names..." autocomplete="off">
      <div class="search-actions">
        <button class="btn-reset" id="resetBtn" onclick="goHome()" title="Clear">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
        <button class="btn-search" id="searchBtn" onclick="doSearch()">Search</button>
      </div>
    </div>
  </div>
  <!-- Mode pills -->
  <div class="mode-pills" id="modePills">
    <button class="mode-pill" data-mode="discover" onclick="toggleMode('discover')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      <span>Discover</span>
    </button>
    <button class="mode-pill" data-mode="value" onclick="toggleMode('value')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
      <span>Value</span>
    </button>
    <button class="mode-pill" data-mode="expiry" onclick="toggleMode('expiry')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      <span>Expiry</span>
    </button>
    <button class="mode-pill" data-mode="market" onclick="toggleMode('market')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      <span>Market</span>
    </button>
    <button class="mode-pill" data-mode="portfolio" onclick="toggleMode('portfolio')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
      <span>Portfolio</span>
    </button>
    <button class="mode-pill" data-mode="create" onclick="toggleMode('create')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
      <span>Create</span>
    </button>
    <button class="mode-pill" data-mode="protocol" onclick="toggleMode('protocol')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
      <span>Protocol</span>
    </button>
    <button class="mode-pill" data-mode="categories" onclick="toggleMode('categories')">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
      <span>Categories</span>
    </button>
  </div>
</div>

<!-- Landing Page -->
<div class="landing" id="landing">
  <div class="landing-hero-compact">
    <!-- ORIGINAL: <h1>Find the <span class="hl">perfect</span> name.</h1> -->
    <h1>Find the <span class="hl-rotate"><span class="hl-word active">perfect.eth</span><span class="hl-word">undervalued.eth</span><span class="hl-word">legendary.eth</span><span class="hl-word">unforgettable.eth</span><span class="hl-word">hidden.eth</span><span class="hl-word">coveted.eth</span><span class="hl-word">ultimate.eth</span><span class="hl-word">rare.eth</span><span class="hl-word">iconic.eth</span><span class="hl-word">golden.eth</span><span class="hl-word">premium.eth</span><span class="hl-word">elite.eth</span><span class="hl-word">greatest.eth</span><span class="hl-word">winning.eth</span><span class="hl-word">finest.eth</span><span class="hl-word">overlooked.eth</span><span class="hl-word">forgotten.eth</span><span class="hl-word">untapped.eth</span><span class="hl-word">undiscovered.eth</span><span class="hl-word">elusive.eth</span><span class="hl-word">next.eth</span><span class="hl-word">right.eth</span></span></h1>
    <p>Name Whisper — the ENS intelligence layer.</p>
  </div>
  <script>
    (function() {
      const container = document.querySelector('.hl-rotate');
      const words = document.querySelectorAll('.hl-word');
      if (!words.length || !container) return;
      let current = 0;
      function sizeToActive() {
        const active = words[current];
        active.style.position = 'relative';
        active.style.visibility = 'visible';
        container.style.width = active.offsetWidth + 'px';
        active.style.position = '';
        active.style.visibility = '';
      }
      sizeToActive();
      setInterval(() => {
        words[current].classList.remove('active');
        current = (current + 1) % words.length;
        words[current].classList.add('active');
        sizeToActive();
      }, 4875);
    })();
  </script>

  <div class="terminal-grid">
    <!-- Left: Live Feed -->
    <div class="terminal-panel feed-panel">
      <div class="tp-header">
        <span class="tp-title"><span class="tp-dot"></span>Live Feed</span>
        <span class="tp-refresh" onclick="loadLandingFeed()">Refresh</span>
      </div>
      <div class="feed-filters">
        <select id="feedFilterCategory" onchange="applyFeedFilters()" class="feed-filter-select">
          <option value="">All categories</option>
          <option value="3-letter">3-letter</option>
          <option value="4-letter">4-letter</option>
          <option value="5-letter">5-letter</option>
          <option value="999 Club">999 Club</option>
          <option value="10K Club">10K Club</option>
        </select>
        <input id="feedFilterMinPrice" type="number" step="0.01" min="0" placeholder="Min ETH" class="feed-filter-input" onchange="applyFeedFilters()">
        <label class="feed-filter-whale">
          <input id="feedFilterWhaleOnly" type="checkbox" onchange="applyFeedFilters()">
          <span>Whales only</span>
        </label>
      </div>
      <div class="tp-body" id="landingFeedCards">
        <div class="tp-loading"><div class="lf-spinner"></div></div>
      </div>
    </div>

    <!-- Right: Actions + Floors -->
    <div class="terminal-right">
      <div class="terminal-panel actions-panel">
        <div class="tp-header">
          <span class="tp-title">Quick Actions</span>
        </div>
        <div class="cap-grid-compact">
          <div class="cap-mini" onclick="enterMode('discover')">
            <div class="cap-mini-icon discover"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Discover</span><span class="cap-mini-desc">Search & filter names</span></div>
          </div>
          <div class="cap-mini" onclick="enterMode('value')">
            <div class="cap-mini-icon value"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Value</span><span class="cap-mini-desc">Instant valuations</span></div>
          </div>
          <div class="cap-mini" onclick="toggleMode('expiry')">
            <div class="cap-mini-icon check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Expiry</span><span class="cap-mini-desc">Expiring domains</span></div>
          </div>
          <div class="cap-mini" onclick="enterMode('market')">
            <div class="cap-mini-icon market"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Market</span><span class="cap-mini-desc">Sales & trends</span></div>
          </div>
          <div class="cap-mini" onclick="enterMode('portfolio')">
            <div class="cap-mini-icon portfolio"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Portfolio</span><span class="cap-mini-desc">Wallet analysis</span></div>
          </div>
          <div class="cap-mini" onclick="enterMode('create')">
            <div class="cap-mini-icon create"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Create</span><span class="cap-mini-desc">AI name generation</span></div>
          </div>
          <div class="cap-mini" onclick="enterMode('protocol')">
            <div class="cap-mini-icon protocol"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Protocol</span><span class="cap-mini-desc">ENS analytics</span></div>
          </div>
          <div class="cap-mini" onclick="enterMode('categories')">
            <div class="cap-mini-icon categories"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Categories</span><span class="cap-mini-desc">Browse collections</span></div>
          </div>
          <div class="cap-mini" onclick="window.location.href='/terminal'">
            <div class="cap-mini-icon terminal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Terminal</span><span class="cap-mini-desc">AI command line</span></div>
          </div>
          <div class="cap-mini" onclick="window.location.href='/agents'">
            <div class="cap-mini-icon agents"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 00-16 0"/><path d="M12 3V1M6.3 5.3L4.9 3.9M17.7 5.3l1.4-1.4"/></svg></div>
            <div class="cap-mini-text"><span class="cap-mini-name">Agents</span><span class="cap-mini-desc">Registry & deploy</span></div>
          </div>
        </div>
      </div>

      <div class="terminal-panel trending-panel">
        <div class="tp-header">
          <span class="tp-title">Trending</span>
          <span class="tp-sub">7-day activity</span>
        </div>
        <div class="trending-table" id="trendingTable">
          <div class="trending-row shimmer"></div>
          <div class="trending-row shimmer"></div>
          <div class="trending-row shimmer"></div>
          <div class="trending-row shimmer"></div>
          <div class="trending-row shimmer"></div>
        </div>
      </div>

      <div class="quick-queries" id="quickQueryChips">
        <span class="qq-chip" onclick="fireQuery('value','ocean.eth')">value ocean.eth</span>
        <span class="qq-chip" onclick="fireQuery('discover','Is coffee.eth taken?')">check coffee.eth</span>
        <span class="qq-chip" onclick="fireQuery('discover','3-letter words for sale')">3L for sale</span>
        <span class="qq-chip" onclick="fireQuery('market','ENS market report')">market report</span>
      </div>
    </div>
  </div>

</div>

<!-- Result Canvas -->
<main class="result-canvas" id="resultCanvas">
  <div class="error-msg" id="errorMsg"></div>
  <div class="loading-state" id="loading">
    <div class="loading-orb"></div>
    <div class="loading-text" id="loadingText">Translating your query...</div>
  </div>
  <div class="summary-card" id="summaryCard"></div>
  <div class="data-card" id="dataCard"></div>
  <div class="stats-bar" id="statsBar"><span class="stats-count" id="resultCount"></span></div>
  <div id="customRender"></div>
  <div class="table-wrap">
    <table class="results-table" id="resultsTable"><thead id="tableHead"></thead><tbody id="tableBody"></tbody></table>
  </div>
  <div class="empty-state" id="emptyState">No results found. Try a different search.</div>
  <div class="follow-up" id="followUp"><div class="chips-row" id="followUpRow"></div></div>
</main>

<footer class="footer">
  <div class="footer-brand">&copy; 2026 Name Whisper</div>
  <div class="footer-links">
    <a href="/terminal">Terminal</a>
    <a href="/guide">Guide</a>
    <a href="/docs">Docs</a>
    <a href="/agents">Agents</a>
    <a href="/mcp-stats">MCP Stats</a>
    <a href="/terms">Terms</a>
    <a href="/privacy">Privacy</a>
    <a href="https://x.com/NameWhisperAI" target="_blank" rel="noopener">@NameWhisperAI</a>
  </div>
</footer>