Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="LeadGen Pro — Intelligent Business Lead Generation Dashboard"> | |
| <title>LeadGen Pro — Dashboard</title> | |
| <link rel="stylesheet" href="/styles.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Mobile menu button --> | |
| <button class="mobile-menu-btn" id="mobile-menu-btn" onclick="document.getElementById('sidebar').classList.toggle('open');document.getElementById('sidebar-overlay').classList.toggle('show');">☰</button> | |
| <div class="sidebar-overlay" id="sidebar-overlay" onclick="document.getElementById('sidebar').classList.remove('open');this.classList.remove('show');"></div> | |
| <!-- ═══ SIDEBAR ═══ --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="sidebar-logo"> | |
| <div class="logo-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div> | |
| <div class="logo-text"> | |
| <h1>LeadGen Pro</h1> | |
| <span>Intelligence Engine</span> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <button class="nav-item active" data-page="dashboard"> | |
| <span class="icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><rect x="7" y="10" width="3" height="8" rx="1"/><rect x="14" y="6" width="3" height="12" rx="1"/></svg></span> Dashboard | |
| </button> | |
| <button class="nav-item" data-page="generate"> | |
| <span class="icon"><svg width="16" height="16" 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"/><path d="M21 21l-4.35-4.35"/></svg></span> Generate Leads | |
| </button> | |
| <button class="nav-item" data-page="leads"> | |
| <span class="icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 7h8"/><path d="M8 11h8"/><path d="M8 15h5"/></svg></span> All Leads | |
| </button> | |
| <button class="nav-item" data-page="exports"> | |
| <span class="icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span> Exports | |
| </button> | |
| <div class="nav-divider"></div> | |
| <div style="padding: 12px 16px;"> | |
| <div class="td-small">Database</div> | |
| <div style="font-weight: 700; font-size: 1.1rem;" id="sidebar-total">0</div> | |
| <div class="td-small">total leads</div> | |
| <button class="btn btn-xs btn-danger" style="margin-top: 8px; width: 100%;" onclick="App.clearAllLeads()">Clear All Data</button> | |
| </div> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| LeadGen Pro v2.0 — For authorized business use only | |
| </div> | |
| </aside> | |
| <!-- ═══ MAIN CONTENT ═══ --> | |
| <main class="main-content"> | |
| <!-- ─── DASHBOARD PAGE ─── --> | |
| <section class="page-section active" id="page-dashboard"> | |
| <div class="page-header"> | |
| <div> | |
| <h2>Dashboard</h2> | |
| <p>Overview of your lead generation pipeline</p> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="btn btn-primary" onclick="App.goTo('generate')"> | |
| <svg width="16" height="16" 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"/><path d="M21 21l-4.35-4.35"/></svg> Generate Leads | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="stats-grid" id="stats-grid"> | |
| <div class="stat-card"><div class="stat-icon blue"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><rect x="7" y="10" width="3" height="8" rx="1"/><rect x="14" y="6" width="3" height="12" rx="1"/></svg></div><div class="stat-value" id="stat-total">0</div><div class="stat-label">Total Leads</div></div> | |
| <div class="stat-card"><div class="stat-icon red"><span class="dot dot-high"></span></div><div class="stat-value" id="stat-high">0</div><div class="stat-label">High Priority</div></div> | |
| <div class="stat-card"><div class="stat-icon amber"><span class="dot dot-medium"></span></div><div class="stat-value" id="stat-medium">0</div><div class="stat-label">Medium Priority</div></div> | |
| <div class="stat-card"><div class="stat-icon green"><span class="dot dot-low"></span></div><div class="stat-value" id="stat-low">0</div><div class="stat-label">Low Priority</div></div> | |
| <div class="stat-card"><div class="stat-icon purple"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></svg></div><div class="stat-value" id="stat-contacted">0</div><div class="stat-label">Contacted</div></div> | |
| <div class="stat-card"><div class="stat-icon cyan"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div class="stat-value" id="stat-converted">0</div><div class="stat-label">Converted</div></div> | |
| </div> | |
| <!-- Charts --> | |
| <div class="charts-grid"> | |
| <div class="card"> | |
| <div class="card-header"><div class="card-title">Score Distribution</div></div> | |
| <div class="chart-container"><canvas id="chart-score"></canvas></div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"><div class="card-title">By Service Category</div></div> | |
| <div class="chart-container"><canvas id="chart-service"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- Top leads --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-title">Top Opportunity Leads</div> | |
| <button class="btn btn-sm btn-secondary" onclick="App.goTo('leads')">View All</button> | |
| </div> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead><tr> | |
| <th>Business</th><th>Score</th><th>Status</th><th>Opportunity</th><th>Phone</th><th>Action</th> | |
| </tr></thead> | |
| <tbody id="top-leads-body"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="page-section" id="page-generate"> | |
| <div class="page-header"> | |
| <div> | |
| <h2>Generate Leads</h2> | |
| <p>Configure and run the lead collection pipeline</p> | |
| </div> | |
| </div> | |
| <div class="card" style="max-width: 700px;"> | |
| <div class="generate-grid"> | |
| <div class="form-group"> | |
| <label><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg> State</label> | |
| <select class="select" id="gen-state" onchange="App.updateCities()"> | |
| <option value="">-- Select State --</option> | |
| <optgroup label="North India"> | |
| <option value="Delhi">Delhi</option> | |
| <option value="Uttar Pradesh">Uttar Pradesh</option> | |
| <option value="Haryana">Haryana</option> | |
| <option value="Punjab">Punjab</option> | |
| <option value="Rajasthan">Rajasthan</option> | |
| <option value="Madhya Pradesh">Madhya Pradesh</option> | |
| <option value="Uttarakhand">Uttarakhand</option> | |
| <option value="Himachal Pradesh">Himachal Pradesh</option> | |
| <option value="Jammu & Kashmir">Jammu & Kashmir</option> | |
| <option value="Chandigarh">Chandigarh</option> | |
| </optgroup> | |
| <optgroup label="West India"> | |
| <option value="Maharashtra" selected>Maharashtra</option> | |
| <option value="Gujarat">Gujarat</option> | |
| <option value="Goa">Goa</option> | |
| </optgroup> | |
| <optgroup label="South India"> | |
| <option value="Karnataka">Karnataka</option> | |
| <option value="Tamil Nadu">Tamil Nadu</option> | |
| <option value="Kerala">Kerala</option> | |
| <option value="Telangana">Telangana</option> | |
| <option value="Andhra Pradesh">Andhra Pradesh</option> | |
| </optgroup> | |
| <optgroup label="East India"> | |
| <option value="West Bengal">West Bengal</option> | |
| <option value="Bihar">Bihar</option> | |
| <option value="Odisha">Odisha</option> | |
| <option value="Jharkhand">Jharkhand</option> | |
| <option value="Assam">Assam</option> | |
| </optgroup> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><path d="M9 9v.01"/><path d="M9 12v.01"/><path d="M9 15v.01"/><path d="M9 18v.01"/></svg> City</label> | |
| <select class="select" id="gen-city"> | |
| <option value="Mumbai">Mumbai</option> | |
| <option value="Pune">Pune</option> | |
| <option value="Nagpur">Nagpur</option> | |
| <option value="Nashik">Nashik</option> | |
| <option value="Thane">Thane</option> | |
| <option value="Aurangabad">Aurangabad</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><svg width="14" height="14" 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"/><path d="M16 7V5a4 4 0 00-8 0v2"/></svg> Business Category</label> | |
| <select class="select" id="gen-service"> | |
| <option value="all">All Categories</option> | |
| <optgroup label="IT & Technology"> | |
| <option value="web">Web Development</option> | |
| <option value="app">App Development</option> | |
| <option value="ai">AI & Automation</option> | |
| <option value="it_services">IT Services & Consulting</option> | |
| <option value="software">Software Companies</option> | |
| </optgroup> | |
| <optgroup label="Healthcare"> | |
| <option value="hospitals">Hospitals & Clinics</option> | |
| <option value="pharmacy">Pharmacy & Medical Stores</option> | |
| <option value="diagnostic">Diagnostic Labs</option> | |
| <option value="dental">Dental Clinics</option> | |
| <option value="ayurveda">Ayurveda & Wellness</option> | |
| </optgroup> | |
| <optgroup label="Education"> | |
| <option value="schools">Schools & Colleges</option> | |
| <option value="coaching">Coaching Institutes</option> | |
| <option value="training">Training Centers</option> | |
| </optgroup> | |
| <optgroup label="Food & Hospitality"> | |
| <option value="restaurants">Restaurants & Cafes</option> | |
| <option value="hotels">Hotels & Resorts</option> | |
| <option value="catering">Catering Services</option> | |
| </optgroup> | |
| <optgroup label="Retail & Services"> | |
| <option value="fashion">Fashion & Clothing</option> | |
| <option value="jewellery">Jewellery Stores</option> | |
| <option value="electronics">Electronics & Appliances</option> | |
| <option value="furniture">Furniture & Home Decor</option> | |
| <option value="grocery">Grocery & Supermarkets</option> | |
| </optgroup> | |
| <optgroup label="Professional Services"> | |
| <option value="legal">Legal & Law Firms</option> | |
| <option value="ca_finance">CA & Financial Services</option> | |
| <option value="real_estate">Real Estate & Construction</option> | |
| <option value="interior">Interior Design</option> | |
| <option value="event_mgmt">Event Management</option> | |
| </optgroup> | |
| <optgroup label="Manufacturing & Trade"> | |
| <option value="manufacturing">Manufacturing Units</option> | |
| <option value="export_import">Export & Import</option> | |
| <option value="automobile">Automobile & Spare Parts</option> | |
| <option value="textiles">Textiles & Garments</option> | |
| </optgroup> | |
| <optgroup label="Beauty & Lifestyle"> | |
| <option value="salon">Salon & Spa</option> | |
| <option value="gym">Gym & Fitness</option> | |
| <option value="photography">Photography & Videography</option> | |
| </optgroup> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg> Data Source</label> | |
| <select class="select" id="gen-source"> | |
| <option value="all">All Sources</option> | |
| <option value="googlemaps">Google Maps</option> | |
| <option value="justdial">JustDial</option> | |
| <option value="indiamart">IndiaMART</option> | |
| <option value="sulekha">Sulekha</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/></svg> Lead Limit</label> | |
| <input class="input" id="gen-limit" type="number" value="50" min="5" max="500"> | |
| </div> | |
| </div> | |
| <div style="border-top: 1px solid var(--border-color); padding-top: 16px; margin-top: 8px;"> | |
| <div class="toggle-row"> | |
| <label><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h6l1 7-4 2-4-2 1-7z"/><path d="M6 21c0-3 2-4 6-4s6 1 6 4"/><circle cx="12" cy="12" r="1"/></svg> Demo Mode (sample data)</label> | |
| <label class="toggle"><input type="checkbox" id="gen-demo"><span class="toggle-slider"></span></label> | |
| </div> | |
| <div class="toggle-row"> | |
| <label><svg width="14" height="14" 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"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg> Website Analysis (slower, more data)</label> | |
| <label class="toggle"><input type="checkbox" id="gen-analyse"><span class="toggle-slider"></span></label> | |
| </div> | |
| </div> | |
| <div style="margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap;"> | |
| <button class="btn btn-primary" id="btn-generate" onclick="App.startGeneration()"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> Start Lead Generation | |
| </button> | |
| <button class="btn btn-danger" onclick="App.cancelPipeline()" title="Force-cancel any stuck pipeline"> | |
| <svg width="16" height="16" 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"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg> Cancel Pipeline | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ─── LEADS PAGE ─── --> | |
| <section class="page-section" id="page-leads"> | |
| <div class="page-header"> | |
| <div> | |
| <h2>All Leads</h2> | |
| <p id="leads-subtitle">Manage your business leads</p> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="btn btn-sm btn-danger" onclick="App.clearAllLeads()" title="Delete all leads from database"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg> Clear All | |
| </button> | |
| <button class="btn btn-sm btn-secondary" onclick="App.exportLeads('csv')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> CSV</button> | |
| <button class="btn btn-sm btn-secondary" onclick="App.exportLeads('json')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> JSON</button> | |
| <button class="btn btn-sm btn-primary" onclick="App.exportLeads('pdf')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> PDF</button> | |
| </div> | |
| </div> | |
| <!-- Bulk actions --> | |
| <div class="bulk-bar" id="bulk-bar"> | |
| <span class="bulk-count" id="bulk-count">0</span> selected | |
| <button class="btn btn-xs btn-secondary" onclick="App.bulkStatus('Contacted')">Mark Contacted</button> | |
| <button class="btn btn-xs btn-secondary" onclick="App.bulkStatus('Converted')">Mark Converted</button> | |
| <button class="btn btn-xs btn-danger" onclick="App.bulkStatus('Rejected')">Reject</button> | |
| <button class="btn btn-xs btn-secondary" onclick="App.clearSelection()" style="margin-left:auto;">Clear</button> | |
| </div> | |
| <!-- Toolbar --> | |
| <div class="toolbar"> | |
| <div class="search-box"> | |
| <span class="icon"><svg width="16" height="16" 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"/><path d="M21 21l-4.35-4.35"/></svg></span> | |
| <input class="input" id="search-input" placeholder="Search by name, email, phone, address..." oninput="App.debounceSearch()"> | |
| </div> | |
| <div class="filter-chips" id="score-chips"> | |
| <button class="chip active" data-score="ALL" onclick="App.filterScore(this)">All</button> | |
| <button class="chip" data-score="HIGH" onclick="App.filterScore(this)"><span class="dot dot-high"></span> High</button> | |
| <button class="chip" data-score="MEDIUM" onclick="App.filterScore(this)"><span class="dot dot-medium"></span> Medium</button> | |
| <button class="chip" data-score="LOW" onclick="App.filterScore(this)"><span class="dot dot-low"></span> Low</button> | |
| </div> | |
| <select class="select" id="filter-service" onchange="App.loadLeads()" style="min-width:160px;"> | |
| <option value="all">All Categories</option> | |
| <optgroup label="IT & Technology"> | |
| <option value="web">Web Dev</option> | |
| <option value="app">App Dev</option> | |
| <option value="ai">AI</option> | |
| <option value="it_services">IT Services</option> | |
| <option value="software">Software</option> | |
| </optgroup> | |
| <optgroup label="Healthcare"> | |
| <option value="hospitals">Hospitals</option> | |
| <option value="pharmacy">Pharmacy</option> | |
| <option value="diagnostic">Diagnostic</option> | |
| <option value="dental">Dental</option> | |
| <option value="ayurveda">Ayurveda</option> | |
| </optgroup> | |
| <optgroup label="Education"> | |
| <option value="schools">Schools</option> | |
| <option value="coaching">Coaching</option> | |
| <option value="training">Training</option> | |
| </optgroup> | |
| <optgroup label="Food & Hospitality"> | |
| <option value="restaurants">Restaurants</option> | |
| <option value="hotels">Hotels</option> | |
| <option value="catering">Catering</option> | |
| </optgroup> | |
| <optgroup label="Retail"> | |
| <option value="fashion">Fashion</option> | |
| <option value="jewellery">Jewellery</option> | |
| <option value="electronics">Electronics</option> | |
| <option value="furniture">Furniture</option> | |
| <option value="grocery">Grocery</option> | |
| </optgroup> | |
| <optgroup label="Professional"> | |
| <option value="legal">Legal</option> | |
| <option value="ca_finance">CA & Finance</option> | |
| <option value="real_estate">Real Estate</option> | |
| <option value="interior">Interior</option> | |
| <option value="event_mgmt">Events</option> | |
| </optgroup> | |
| <optgroup label="Manufacturing"> | |
| <option value="manufacturing">Manufacturing</option> | |
| <option value="export_import">Export/Import</option> | |
| <option value="automobile">Automobile</option> | |
| <option value="textiles">Textiles</option> | |
| </optgroup> | |
| <optgroup label="Lifestyle"> | |
| <option value="salon">Salon & Spa</option> | |
| <option value="gym">Gym</option> | |
| <option value="photography">Photography</option> | |
| </optgroup> | |
| </select> | |
| <select class="select" id="filter-status" onchange="App.loadLeads()" style="min-width:140px;"> | |
| <option value="all">All Status</option> | |
| <option value="New">New</option> | |
| <option value="Contacted">Contacted</option> | |
| <option value="Converted">Converted</option> | |
| <option value="Rejected">Rejected</option> | |
| </select> | |
| </div> | |
| <!-- Table --> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead><tr> | |
| <th class="col-checkbox"><input type="checkbox" class="row-check" id="check-all" onchange="App.toggleAll(this)"></th> | |
| <th onclick="App.sortBy('business_name')">Business</th> | |
| <th onclick="App.sortBy('score_points')">Score</th> | |
| <th onclick="App.sortBy('status')">Status</th> | |
| <th class="col-pitch">Opportunity</th> | |
| <th class="col-phone">Phone</th> | |
| <th class="col-email">Email</th> | |
| <th class="col-source">Source</th> | |
| <th class="col-staleness" onclick="App.sortBy('scraped_at')">Scraped</th> | |
| </tr></thead> | |
| <tbody id="leads-body"></tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="pagination"> | |
| <div class="pagination-info" id="pagination-info">Showing 0 leads</div> | |
| <div class="pagination-controls" id="pagination-controls"></div> | |
| </div> | |
| </section> | |
| <!-- ─── EXPORTS PAGE ─── --> | |
| <section class="page-section" id="page-exports"> | |
| <div class="page-header"> | |
| <div><h2>Export Leads</h2><p>Download your leads in multiple formats</p></div> | |
| </div> | |
| <div class="export-grid"> | |
| <div class="export-card" onclick="App.exportLeads('pdf')"> | |
| <div class="export-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div> | |
| <h3>PDF Report</h3> | |
| <p>Branded report with QR codes, charts, and opportunity analysis</p> | |
| </div> | |
| <div class="export-card" onclick="App.exportLeads('csv')"> | |
| <div class="export-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div> | |
| <h3>CSV Spreadsheet</h3> | |
| <p>Full data export for Google Sheets or Excel</p> | |
| </div> | |
| <div class="export-card" onclick="App.exportLeads('json')"> | |
| <div class="export-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></div> | |
| <h3>JSON Data</h3> | |
| <p>Structured data for CRM integration</p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"><div class="card-title">Export History</div></div> | |
| <div class="table-wrapper"> | |
| <table> | |
| <thead><tr><th>File</th><th>Type</th><th>Size</th><th>Date</th><th>Action</th></tr></thead> | |
| <tbody id="exports-body"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <!-- ═══ LEAD DETAIL MODAL ═══ --> | |
| <div class="modal-overlay" id="lead-modal"> | |
| <div class="modal"> | |
| <div class="modal-header"> | |
| <h3 id="modal-title">Lead Details</h3> | |
| <button class="modal-close" onclick="App.closeModal()">×</button> | |
| </div> | |
| <div class="modal-body" id="modal-body"></div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-secondary" onclick="App.closeModal()">Close</button> | |
| <button class="btn btn-primary" id="modal-save-notes" onclick="App.saveNotes()">Save Notes</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══ PROGRESS OVERLAY ═══ --> | |
| <div class="progress-overlay" id="progress-overlay"> | |
| <div class="progress-card"> | |
| <div class="progress-spinner"></div> | |
| <div class="progress-text" id="progress-text">Starting pipeline...</div> | |
| <div class="progress-sub" id="progress-sub">Please wait</div> | |
| <div class="progress-bar-container"> | |
| <div class="progress-bar-fill" id="progress-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ═══ TOAST CONTAINER ═══ --> | |
| <div class="toast-container" id="toast-container"></div> | |
| <script src="/app.js"></script> | |
| </body> | |
| </html> | |