MarketingTool/web/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="#111827">
  <title>ProspectOS · Maps Scout</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="brand"><span class="brand-mark">P</span><div><strong>ProspectOS</strong><small>Maps Scout</small></div></div>
      <nav class="side-nav" aria-label="Main navigation">
        <a class="active" href="#discover"><span class="nav-icon">⌁</span>Discover</a>
        <a href="#explorer"><span class="nav-icon">▦</span>Explorer</a>
        <a href="#runs"><span class="nav-icon">◷</span>Run history</a>
      </nav>
      <div class="sidebar-foot">
        <div class="source-card"><span class="status-dot" id="sourceDot"></span><div><strong id="sourceLabel">Checking source</strong><small id="sourceSub">Connecting to Maps worker</small></div></div>
        <p>Personal workspace<br><span>No outreach is sent</span></p>
      </div>
    </aside>

    <main class="main-content">
      <header class="topbar">
        <div class="breadcrumbs"><span>Workspace</span><i>/</i><strong>Maps Scout</strong></div>
        <div class="top-actions"><span class="updated" id="updated">—</span><button class="icon-btn" id="refreshAll" type="button" title="Refresh workspace" aria-label="Refresh workspace">↻</button></div>
      </header>

      <section class="page-heading">
        <div><span class="eyebrow">PERSONAL DISCOVERY WORKSPACE</span><h1>Find the businesses worth a closer look.</h1><p>Search Google Maps, remove places already in your catalogue, then review the strongest opportunities in one calm workspace.</p></div>
        <div class="heading-badge"><span class="pulse"></span><span id="backendLabel">Maps worker</span><small>private &amp; local</small></div>
      </section>

      <section class="setup-notice" id="setupNotice" hidden>
        <div class="notice-icon">!</div><div><strong>Finish the Maps worker setup</strong><p id="setupText">Start the bundled worker with Docker, then reload this page. The standard worker needs no API key.</p></div><a href="#setup" class="text-link">Setup guide ↓</a>
      </section>

      <section class="stats-grid" aria-label="Catalogue summary">
        <article class="stat-card stat-primary"><div class="stat-label"><span class="stat-icon">◈</span><span>Catalogue</span></div><strong id="total">0</strong><small>places saved</small></article>
        <article class="stat-card"><div class="stat-label"><span class="stat-icon amber">●</span><span>Needs review</span></div><strong id="pending">0</strong><small>pending decisions</small></article>
        <article class="stat-card"><div class="stat-label"><span class="stat-icon green">✓</span><span>Approved</span></div><strong id="approved">0</strong><small>ready for your next step</small></article>
        <article class="stat-card"><div class="stat-label"><span class="stat-icon blue">◷</span><span>Runs active</span></div><strong id="running">0</strong><small id="lastRun">no recent run</small></article>
      </section>

      <section class="workspace-grid" id="discover">
        <article class="panel discovery-panel">
          <div class="panel-heading"><div><span class="eyebrow">01 · NEW SEARCH</span><h2>Start a discovery run</h2><p>Describe the businesses you want. These criteria apply only to this run.</p></div><span class="source-tag"><span class="status-dot"></span> Google Maps</span></div>
          <form id="discoverForm" class="discovery-form">
            <div class="field wide"><label for="keywords">What should we find?<span>Keywords</span></label><input id="keywords" name="keywords" placeholder="e.g. plumbing services" required></div>
            <div class="field"><label for="category">Business category</label><input id="category" name="category" placeholder="e.g. plumbers" required></div>
            <div class="field"><label for="location">Location</label><input id="location" name="location" value="South Africa" required></div>
            <div class="field"><label for="max-results">Places to import</label><select id="max-results" name="max_results"><option value="10">10 places</option><option value="20">20 places</option><option value="25" selected>25 places</option><option value="50">50 places</option></select></div>
            <div class="options wide"><label class="check"><input type="checkbox" id="include-email" name="include_email"><span class="check-box"></span><span><strong>Look for public website emails</strong><small>Slower; only follows the business website found by Maps.</small></span></label><label class="check"><input type="checkbox" id="extra-reviews" name="extra_reviews"><span class="check-box"></span><span><strong>Collect extra reviews</strong><small>Useful for research, but increases run time.</small></span></label></div>
            <div class="form-footer wide"><button class="primary-btn" id="discoverBtn" type="submit"><span>Run discovery</span><span class="btn-arrow">→</span></button><span id="discoverMessage" class="form-message" role="status">Results are deduplicated before saving.</span></div>
          </form>
        </article>

        <aside class="panel run-panel" id="runs">
          <div class="panel-heading compact"><div><span class="eyebrow">02 · ACTIVITY</span><h2>Latest run</h2></div><button class="quiet-btn" id="runsRefresh" type="button">Refresh</button></div>
          <div id="activeRun" class="active-run empty-run"><div class="run-orb">◷</div><div><strong>No active run</strong><p>Start a search to see progress here.</p></div></div>
          <div class="mini-history"><div class="mini-history-head"><span>Recent runs</span><a href="#runs" id="showRuns">View all</a></div><div id="runsList"><p class="muted">No runs yet.</p></div></div>
        </aside>
      </section>

      <section class="panel explorer-panel" id="explorer">
        <div class="panel-heading explorer-heading"><div><span class="eyebrow">03 · CATALOGUE</span><h2>Prospect explorer</h2><p>Sort by opportunity score, inspect the evidence, and mark your next action.</p></div><div class="explorer-actions"><div class="search-box"><span>⌕</span><input id="search" placeholder="Search catalogue" aria-label="Search catalogue"></div><select id="status" aria-label="Filter by review status"><option value="">All statuses</option><option value="pending">Needs review</option><option value="approved">Approved</option><option value="rejected">Rejected</option><option value="contacted">Contacted</option></select><button class="quiet-btn" id="refresh" type="button">Refresh</button></div></div>
        <div class="explorer-toolbar"><span id="resultCount">0 places</span><span class="legend"><i class="score-high"></i> Higher opportunity first</span></div>
        <div id="explorerList" class="prospect-list"><div class="loading-state"><span class="spinner"></span>Loading catalogue…</div></div>
      </section>

      <section class="setup-section" id="setup">
            <div><span class="eyebrow">SETUP</span><h2>One-time worker connection</h2><p>The bundled standard Maps worker runs locally and does not need a Google or scraper API key.</p></div><ol><li>Run <code>docker compose up -d --build</code>.</li><li>Keep <code>GMAPS_API_MODE=standard</code> in <code>.env</code>.</li><li>Start a discovery run. Open port <code>8081</code> only if you want to inspect the worker's native UI.</li></ol>
      </section>

      <footer class="footer"><span>ProspectOS · personal research workspace</span><span>Public data only · no automated outreach</span></footer>
    </main>
  </div>
  <script src="/app.js"></script>
</body>
</html>