Upload 6 files

app.py

@@ -1,19 +1,48 @@
 import urllib.parse
 import math
+import requests
+import re
 from flask import Flask, request, render_template, jsonify
 from google_play_scraper import reviews, Sort, search, app as app_info
 
 app = Flask(__name__)
 
-
+# --- The Rock-Solid Old App Logic ---
 def extract_app_id(url_or_name: str) -> str:
+    url_or_name = url_or_name.strip()
+    
+    # 1. If it's a Play Store URL, parse out the 'id' param safely
     if "play.google.com" in url_or_name:
         parsed = urllib.parse.urlparse(url_or_name)
         query_params = urllib.parse.parse_qs(parsed.query)
         if 'id' in query_params:
             return query_params['id'][0]
+            
+    # 2. If it's a raw package name (e.g. com.whatsapp) with no spaces
+    if "." in url_or_name and " " not in url_or_name:
+        return url_or_name
+        
     return ""
 
+def scrape_store_ids(query: str, n_hits: int = 5):
+    """Directly scrape Play Store search results page to get valid package IDs."""
+    try:
+        url = f"https://play.google.com/store/search?q={urllib.parse.quote(query)}&c=apps"
+        headers = {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"}
+        resp = requests.get(url, headers=headers, timeout=10)
+        if resp.status_code != 200: return []
+        
+        # Regex to find package names like details?id=com.something
+        pids = re.findall(r'details\?id=([a-zA-Z0-9._]+)', resp.text)
+        
+        # Remove duplicates and known junk
+        unique_pids = []
+        for p in pids:
+            if p not in unique_pids and "None" not in p:
+                unique_pids.append(p)
+        return unique_pids[:n_hits]
+    except:
+        return []
 
 def serialize_review(r: dict) -> dict:
     """Return all useful fields from a review, with dates serialized to ISO strings."""
@@ -30,84 +59,84 @@ def serialize_review(r: dict) -> dict:
         "repliedAt":            r["repliedAt"].isoformat() if r.get("repliedAt") else "",  # dev reply date
     }
 
+def fetch_app_reviews(app_id, review_count, sort_order, star_ratings_input):
+    """Core helper to fetch reviews for a single app ID."""
+    info = app_info(app_id, lang='en', country='us')
+    
+    sort_map = {
+        'MOST_RELEVANT': Sort.MOST_RELEVANT,
+        'NEWEST':        Sort.NEWEST,
+        'RATING':        Sort.RATING,
+    }
+    selected_sort = sort_map.get(sort_order, Sort.MOST_RELEVANT)
+
+    if star_ratings_input == 'all' or not star_ratings_input:
+        star_filters = [None]
+    else:
+        star_filters = sorted(
+            {int(s) for s in star_ratings_input if str(s).isdigit() and 1 <= int(s) <= 5},
+            reverse=True
+        )
+
+    per_bucket = math.ceil(review_limit_val(review_count) / len(star_filters))
+    all_reviews = []
+    seen_ids = set()
+
+    for star in star_filters:
+        result, _ = reviews(
+            app_id,
+            lang='en',
+            country='us',
+            sort=selected_sort,
+            count=per_bucket,
+            filter_score_with=star,
+        )
+        for r in result:
+            rid = r.get('reviewId', '')
+            if rid not in seen_ids:
+                seen_ids.add(rid)
+                serialized = serialize_review(r)
+                serialized['appTitle'] = info['title']
+                serialized['appId'] = app_id
+                all_reviews.append(serialized)
+                
+    return info, all_reviews
+
+def review_limit_val(count):
+    try: return int(count)
+    except: return 150
 
 @app.route('/scrape', methods=['POST'])
 def scrape():
     try:
         data = request.json
-        identifier        = data.get('identifier', '').strip()
-        count_type        = data.get('review_count_type', 'fixed')
-        sort_choice       = data.get('sort_order', 'MOST_RELEVANT')
-        star_ratings_input = data.get('star_ratings', 'all')
-
-        sort_map = {
-            'MOST_RELEVANT': Sort.MOST_RELEVANT,
-            'NEWEST':        Sort.NEWEST,
-            'RATING':        Sort.RATING,
-        }
-        selected_sort = sort_map.get(sort_choice, Sort.MOST_RELEVANT)
-
-        # ── Star filter buckets ──────────────────────────────────────────
-        # star_ratings can be 'all' or a list such as [5, 3, 1]
-        if star_ratings_input == 'all' or not star_ratings_input:
-            star_filters = [None]          # None = no filter = all stars in one call
-        else:
-            star_filters = sorted(
-                {int(s) for s in star_ratings_input if str(s).isdigit() and 1 <= int(s) <= 5},
-                reverse=True
-            )
-
-        # ── Resolve App ID ───────────────────────────────────────────────
+        identifier = data.get('identifier', '').strip()
+        count_type = data.get('review_count_type', 'fixed')
+        count = 100000 if count_type == 'all' else data.get('review_count', 150)
+        
         app_id = extract_app_id(identifier)
         if not app_id:
+            # Fallback 1: Library search
             results = search(identifier, lang="en", country="us", n_hits=1)
-            if results:
+            if results and results[0].get('appId'):
                 app_id = results[0]['appId']
             else:
-                return jsonify({"error": f"Could not find any app matching '{identifier}'"}), 404
-
-        # ── App metadata ─────────────────────────────────────────────────
-        info = app_info(app_id, lang='en', country='us')
-
-        # ── Review count ─────────────────────────────────────────────────
-        if count_type == 'all':
-            review_limit = 100_000
-        else:
-            review_limit = int(data.get('review_count', 150))
-
-        # Divide quota evenly across star buckets so totals stay predictable
-        per_bucket = math.ceil(review_limit / len(star_filters))
-
-        # ── Fetch (one call per star bucket, then merge) ─────────────────
-        all_reviews = []
-        seen_ids    = set()
-
-        for star in star_filters:
-            result, _ = reviews(
-                app_id,
-                lang='en',
-                country='us',
-                sort=selected_sort,
-                count=per_bucket,
-                filter_score_with=star,
-            )
-            for r in result:
-                rid = r.get('reviewId', '')
-                if rid not in seen_ids:
-                    seen_ids.add(rid)
-                    all_reviews.append(serialize_review(r))
-
-        if not all_reviews:
-            return jsonify({"error": f"No reviews found for '{info['title']}' with the selected filters"}), 404
+                # Fallback 2: Direct HTML scrape (Rock-solid)
+                pids = scrape_store_ids(identifier, n_hits=1)
+                if pids: app_id = pids[0]
+                else: return jsonify({"error": f"App '{identifier}' not found"}), 404
+
+        info, all_reviews = fetch_app_reviews(
+            app_id, count, data.get('sort_order'), data.get('star_ratings')
+        )
 
         return jsonify({
             "app_info": {
-                "title":   info['title'],
-                "icon":    info['icon'],
-                "score":   info['score'],
+                "title": info['title'],
+                "icon": info['icon'],
+                "score": info['score'],
                 "reviews": info['reviews'],
-                "appId":   app_id,
-                "summary": info.get('summary', ''),
+                "appId": app_id,
             },
             "reviews": all_reviews,
         })
@@ -116,9 +145,95 @@ def scrape():
         return jsonify({"error": str(e)}), 500
 
 
-@app.route('/')
-def index():
+@app.route('/scrape-batch', methods=['POST'])
+def scrape_batch():
+    try:
+        data = request.json
+        query = data.get('query', '').strip()
+        app_count = int(data.get('app_count', 5))
+        count_type = data.get('review_count_type', 'fixed')
+        reviews_per_app = 100000 if count_type == 'all' else int(data.get('reviews_per_app', 100))
+        
+        # 1. Find apps (Try direct scraping first for reliability)
+        app_ids = scrape_store_ids(query, n_hits=app_count)
+        
+        # If scraper fails, try library search
+        if not app_ids:
+            hits = search(query, lang="en", country="us", n_hits=app_count)
+            app_ids = [h['appId'] for h in hits if h.get('appId')]
+            
+        if not app_ids:
+            return jsonify({"error": "No apps found for this query"}), 404
+            
+        batch_results = []
+        all_combined_reviews = []
+        
+        for app_id in app_ids:
+            try:
+                info, app_reviews = fetch_app_reviews(
+                    app_id, reviews_per_app, data.get('sort_order'), data.get('star_ratings')
+                )
+                batch_results.append({
+                    "title": info['title'],
+                    "icon": info['icon'],
+                    "score": info['score'],
+                    "appId": app_id
+                })
+                all_combined_reviews.extend(app_reviews)
+            except:
+                continue
+                
+        return jsonify({
+            "apps": batch_results,
+            "reviews": all_combined_reviews
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+
+@app.route("/search-suggestions", methods=["POST"])
+def search_suggestions():
+    """Return top app matches for a keyword — used by the UI search dropdown."""
+    try:
+        query = (request.json or {}).get("query", "").strip()
+        if not query or len(query) < 2:
+            return jsonify({"results": []})
+
+        hits = search(query, lang="en", country="us", n_hits=6)
+        results = []
+        for h in hits:
+            aid = h.get("appId", "")
+            if not aid or aid == "None" or "." not in aid:
+                continue
+            results.append({
+                "appId":     aid,
+                "storeUrl":  f"https://play.google.com/store/apps/details?id={aid}",
+                "title":     h.get("title", ""),
+                "icon":      h.get("icon", ""),
+                "score":     round(h.get("score") or 0, 1),
+                "developer": h.get("developer", ""),
+                "installs":  h.get("installs", ""),
+            })
+
+        return jsonify({"results": results[:5]})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@app.route('/scraper')
+def scraper():
     return render_template('index.html')
 
+
+@app.route('/batch')
+def batch():
+    return render_template('batch.html')
+
+
+@app.route('/')
+def landing():
+    return render_template('landing.html')
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", debug=True, port=7860)

requirement.txt

@@ -1,3 +1,4 @@
 google-play-scraper
 pandas
-flask
+flask
+requests

templates/batch.html

@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Batch Intelligence | PlayPulse</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --bg: #0b0e14;
+      --surface: #151921;
+      --surface2: #1c2333;
+      --border: #232a35;
+      --accent: #3b82f6;
+      --accent-dim: rgba(59,130,246,0.12);
+      --green: #22c55e;
+      --green-dim: rgba(34,197,94,0.12);
+      --amber: #f59e0b;
+      --text: #f1f5f9;
+      --muted: #64748b;
+      --muted2: #94a3b8;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
+
+    .header { height: 60px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 20px; }
+    .main { flex: 1; display: flex; overflow: hidden; }
+    .sidebar { width: 320px; background: var(--surface); border-right: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
+    .content { flex: 1; background: var(--bg); position: relative; display: flex; flex-direction: column; }
+
+    .mode-toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); padding: 4px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 5px; }
+    .mode-btn { padding: 8px; border-radius: 7px; text-align: center; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--muted); transition: 0.2s; }
+    .mode-btn.active { background: var(--surface2); color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
+
+    .logo { font-weight: 800; font-size: 18px; color: var(--accent); display: flex; align-items: center; gap: 8px; text-decoration: none; }
+    .input-group { display: flex; flex-direction: column; gap: 8px; }
+    .label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; }
+    input, select { background: var(--bg); border: 1px solid var(--border); color: white; padding: 12px; border-radius: 8px; font-size: 13px; outline: none; width: 100%; }
+    input:focus { border-color: var(--accent); }
+
+    .btn-main { background: var(--accent); color: white; border: none; padding: 14px; border-radius: 10px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; width: 100%; border-bottom: 3px solid rgba(0,0,0,0.2); }
+    .btn-main:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
+    .btn-main:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    .scroll-view { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
+
+    /* Results Header */
+    .batch-summary { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
+    .apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
+    .app-mini-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; align-items: center; gap: 10px; }
+    .app-mini-card img { width: 32px; height: 32px; border-radius: 6px; }
+    .app-mini-info { flex: 1; min-width: 0; }
+    .app-mini-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .app-mini-score { font-size: 10px; color: var(--amber); }
+
+    /* Table Styles */
+    .table-container { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
+    table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    th { text-align: left; background: var(--surface2); padding: 12px 16px; color: var(--muted2); font-weight: 700; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
+    td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
+    tr:last-child td { border-bottom: none; }
+    tr:hover td { background: rgba(255,255,255,0.02); }
+
+    .app-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-dim); color: var(--accent); padding: 4px 8px; border-radius: 6px; font-weight: 700; font-size: 10px; margin-bottom: 6px; border: 1px solid rgba(59,130,246,0.2); }
+    .score-stars { color: var(--amber); white-space: nowrap; }
+    .review-content { color: #cbd5e1; line-height: 1.5; max-width: 400px; }
+
+    /* Overlays */
+    .star-filter-grid { display: flex; flex-direction: column; gap: 6px; }
+    .star-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; transition: border-color 0.15s; user-select: none; }
+    .star-row:hover { border-color: var(--accent); }
+    .star-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; padding: 0; border: none; background: transparent; flex-shrink: 0; }
+    .star-label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; flex: 1; }
+    .stars-on { color: var(--amber); letter-spacing: -1px; }
+    .stars-off { color: var(--border); letter-spacing: -1px; }
+
+    .loader-overlay { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; z-index: 10; }
+    .spinner { width: 40px; height: 40px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .hidden { display: none !important; }
+  </style>
+</head>
+<body>
+
+<div class="header">
+  <a href="/" class="logo">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+    BATCH INTEL
+  </a>
+  <nav style="margin-left: 30px; display: flex; gap: 20px;">
+    <a href="/" style="color: var(--muted2); text-decoration: none; font-size: 13px; font-weight: 600; transition: 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--muted2)'">Home</a>
+    <a href="/scraper" style="color: var(--muted2); text-decoration: none; font-size: 13px; font-weight: 600; transition: 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--muted2)'">Single Explorer</a>
+    <a href="/batch" style="color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 4px;">Batch Intelligence</a>
+  </nav>
+  <div style="flex:1"></div>
+  <button class="btn-icon" onclick="downloadCSV()" style="background:var(--surface2); border:1px solid var(--border); color:white; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:700;">Export Combined CSV</button>
+</div>
+
+<div class="main">
+  <aside class="sidebar">
+    <div class="input-group">
+      <div class="label">Category / Search Query</div>
+      <input type="text" id="query" placeholder="e.g. Multiplayer Games, Fintech..." value="Multiplayer Games">
+    </div>
+
+    <div class="input-group">
+      <div class="label">App Comparison Count</div>
+      <input type="number" id="app_count" value="5" min="1" max="20">
+    </div>
+
+    <div class="input-group">
+      <div class="label">Reviews Per App</div>
+      <div class="mode-toggle">
+        <div class="mode-btn active" id="btn-fixed" onclick="setMode('fixed')">Custom</div>
+        <div class="mode-btn" id="btn-all" onclick="setMode('all')">Fetch All</div>
+      </div>
+      <input type="number" id="reviews_per_app" value="100" min="10" step="10">
+    </div>
+
+    <div class="input-group">
+      <div class="label">Sort Method</div>
+      <select id="sort">
+        <option value="MOST_RELEVANT">Most Relevant</option>
+        <option value="NEWEST">Newest</option>
+        <option value="RATING">Top Ratings</option>
+      </select>
+    </div>
+
+    <div class="input-group">
+      <div class="label">
+        <span>Star Rating Filter</span>
+        <div style="display:flex;gap:5px">
+          <button class="quick-btn" style="font-size:9px; padding:2px 5px; cursor:pointer; background:var(--surface2); border:1px solid var(--border); color:white; border-radius:4px;" onclick="selectAllStars(true)">All</button>
+          <button class="quick-btn" style="font-size:9px; padding:2px 5px; cursor:pointer; background:var(--surface2); border:1px solid var(--border); color:white; border-radius:4px;" onclick="selectAllStars(false)">None</button>
+        </div>
+      </div>
+      <div class="star-filter-grid">
+        <label class="star-row"><input type="checkbox" class="star-cb" value="5" checked><span class="star-label"><span class="stars-on">★★★★★</span></span></label>
+        <label class="star-row"><input type="checkbox" class="star-cb" value="4" checked><span class="star-label"><span class="stars-on">★★★★</span><span class="stars-off">★</span></span></label>
+        <label class="star-row"><input type="checkbox" class="star-cb" value="3" checked><span class="star-label"><span class="stars-on">★★★</span><span class="stars-off">★★</span></span></label>
+        <label class="star-row"><input type="checkbox" class="star-cb" value="2" checked><span class="star-label"><span class="stars-on">★★</span><span class="stars-off">★★★</span></span></label>
+        <label class="star-row"><input type="checkbox" class="star-cb" value="1" checked><span class="star-label"><span class="stars-on">★</span><span class="stars-off">★★★★</span></span></label>
+      </div>
+    </div>
+
+    <button class="btn-main" id="go" onclick="runBatch()">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+      RUN BATCH ANALYSIS
+    </button>
+    
+    <div style="background:var(--bg); padding:15px; border-radius:12px; border:1px solid var(--border); font-size:11px; color:var(--muted); line-height:1.6;">
+      <strong style="color:var(--text)">About Batch Mode</strong><br>
+      This will search for apps matching your query, scrape reviews for each, and combine them into a single comparison set.
+    </div>
+  </aside>
+
+  <div class="content">
+    <div id="dataView" class="scroll-view">
+      <div id="welcome" style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--muted);gap:12px">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+        <p>Run batch analysis to compare app data</p>
+      </div>
+      
+      <div id="results" class="hidden">
+        <div class="batch-summary">
+          <div class="label">Comparing These Apps:</div>
+          <div class="apps-grid" id="appsGrid"></div>
+        </div>
+
+        <div class="table-container">
+          <table id="reviewsTable">
+            <thead>
+              <tr>
+                <th style="width:160px">Application</th>
+                <th style="width:80px">Score</th>
+                <th>Review Snippet</th>
+                <th style="width:120px">Date</th>
+              </tr>
+            </thead>
+            <tbody id="reviewsBody"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div id="loader" class="loader-overlay hidden">
+      <div class="spinner"></div>
+      <p style="color:var(--muted);font-size:14px" id="loaderMsg">Searching for apps...</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  let currentData = null;
+  let currentMode = 'fixed';
+
+  function setMode(m) {
+    currentMode = m;
+    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+    document.getElementById('btn-' + m).classList.add('active');
+    document.getElementById('reviews_per_app').classList.toggle('hidden', m === 'all');
+  }
+
+  function selectAllStars(check) {
+    document.querySelectorAll('.star-cb').forEach(cb => cb.checked = check);
+  }
+
+  async function runBatch() {
+    const q = document.getElementById('query').value.trim();
+    if (!q) return;
+
+    const stars = [...document.querySelectorAll('.star-cb:checked')].map(cb => parseInt(cb.value));
+    if (!stars.length) return alert('Select at least one star rating');
+
+    document.getElementById('welcome').classList.add('hidden');
+    document.getElementById('results').classList.add('hidden');
+    document.getElementById('loader').classList.remove('hidden');
+    document.getElementById('go').disabled = true;
+
+    try {
+      const res = await fetch('/scrape-batch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          query: q,
+          app_count: document.getElementById('app_count').value,
+          review_count_type: currentMode,
+          reviews_per_app: document.getElementById('reviews_per_app').value,
+          sort_order: document.getElementById('sort').value,
+          star_ratings: stars.length === 5 ? 'all' : stars
+        })
+      });
+      
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Batch scraping failed');
+      
+      currentData = data;
+      render(data);
+    } catch(e) {
+      alert(e.message);
+    } finally {
+      document.getElementById('loader').classList.add('hidden');
+      document.getElementById('go').disabled = false;
+    }
+  }
+
+  function render(data) {
+    document.getElementById('results').classList.remove('hidden');
+    
+    // Render apps list
+    document.getElementById('appsGrid').innerHTML = data.apps.map(a => `
+      <div class="app-mini-card">
+        <img src="${a.icon}" alt="">
+        <div class="app-mini-info">
+          <div class="app-mini-title">${a.title}</div>
+          <div class="app-mini-score">${a.score.toFixed(1)} ★</div>
+        </div>
+      </div>
+    `).join('');
+
+    // Render reviews table
+    document.getElementById('reviewsBody').innerHTML = data.reviews.map(r => {
+      const app = data.apps.find(a => a.appId === r.appId) || {title: r.appTitle};
+      return `
+        <tr>
+          <td>
+            <div class="app-tag">${app.title}</div>
+            <div style="font-size:11px; font-weight:700;">${r.userName}</div>
+          </td>
+          <td>
+            <div class="score-stars">${'★'.repeat(r.score)}</div>
+          </td>
+          <td>
+            <div class="review-content">${r.content}</div>
+          </td>
+          <td>
+            <div style="color:var(--muted); font-size:11px;">${new Date(r.at).toLocaleDateString()}</div>
+          </td>
+        </tr>
+      `;
+    }).join('');
+  }
+
+  function downloadCSV() {
+    if (!currentData) return;
+    const esc = v => `"${String(v||'').replace(/"/g,'""')}"`;
+    const hdr = ['App Name', 'App ID', 'User', 'Score', 'Date', 'Content', 'Thumbs Up'];
+    
+    const rows = currentData.reviews.map(r => [
+      esc(r.appTitle),
+      esc(r.appId),
+      esc(r.userName),
+      r.score,
+      esc(r.at.slice(0,10)),
+      esc(r.content),
+      r.thumbsUpCount
+    ].join(','));
+
+    const blob = new Blob([[hdr.join(','), ...rows].join('\n')], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `batch_comparison_${new Date().getTime()}.csv`;
+    a.click();
+  }
+</script>
+
+</body>
+</html>

templates/index.html

@@ -114,15 +114,123 @@
 
     .hidden { display: none !important; }
     @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* Search Suggestions Overlay */
+    .search-wrap { position: relative; }
+    .suggestions-box {
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      right: 0;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      z-index: 1000;
+      max-height: 400px;
+      overflow-y: auto;
+      box-shadow: 0 15px 40px rgba(0,0,0,0.6);
+      backdrop-filter: blur(10px);
+    }
+    .suggestion-item {
+      display: flex;
+      align-items: center;
+      padding: 12px 14px;
+      gap: 12px;
+      cursor: pointer;
+      transition: .2s cubic-bezier(0.4, 0, 0.2, 1);
+      border-bottom: 1px solid var(--border);
+    }
+    .suggestion-item:last-child { border-bottom: none; }
+    .suggestion-item:hover { background: var(--accent-dim); border-color: var(--accent); }
+    .suggestion-item img {
+      width: 44px;
+      height: 44px;
+      border-radius: 10px;
+      object-fit: cover;
+      border: 1px solid var(--border);
+    }
+    .suggestion-info { flex: 1; min-width: 0; }
+    .suggestion-title {
+      font-size: 13px;
+      font-weight: 700;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+    }
+    .suggestion-sub {
+      font-size: 11px;
+      color: var(--muted);
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .suggestion-score {
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--amber);
+      background: rgba(245, 158, 11, 0.1);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+    .suggestion-loading {
+      padding: 30px 20px;
+      text-align: center;
+      color: var(--muted);
+      font-size: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+    }
+    .suggestion-loading .spinner-small {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--border);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin .8s linear infinite;
+    }
+
+    /* Search Section Page Styles */
+    .search-results-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 15px;
+    }
+    .search-app-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 16px;
+      display: flex;
+      gap: 15px;
+      cursor: pointer;
+      transition: .2s;
+    }
+    .search-app-card:hover { border-color: var(--accent); background: var(--surface2); transform: translateY(-2px); }
+    .search-app-card img { width: 60px; height: 60px; border-radius: 12px; }
+    .search-app-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
+    .search-app-title { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .search-app-dev { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
+    .search-app-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
+    .search-app-score { color: var(--amber); }
+    .search-app-installs { color: var(--muted2); }
   </style>
 </head>
 <body>
 
 <div class="header">
-  <div class="logo">
+  <a href="/" class="logo" style="text-decoration: none;">
     <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
     PLAYPULSE
-  </div>
+  </a>
+  <nav style="margin-left: 30px; display: flex; gap: 20px;">
+    <a href="/" style="color: var(--muted2); text-decoration: none; font-size: 13px; font-weight: 600; transition: 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--muted2)'">Home</a>
+    <a href="/scraper" style="color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 4px;">Single Explorer</a>
+    <a href="/batch" style="color: var(--muted2); text-decoration: none; font-size: 13px; font-weight: 600; transition: 0.2s;" onmouseover="this.style.color='var(--text)'" onmouseout="this.style.color='var(--muted2)'">Batch Intelligence</a>
+  </nav>
   <div style="flex:1"></div>
   <div class="view-tabs">
     <div class="tab active" onclick="switchView('data',event)">Data List</div>
@@ -137,16 +245,19 @@
   <aside class="sidebar">
     <div class="input-group">
       <div class="label">App Identity</div>
-      <input type="text" id="target" placeholder="Paste Play Store Link or Name" value="WhatsApp">
+      <div class="search-wrap">
+        <input type="text" id="target" placeholder="Paste Play Store Link or Name" value="WhatsApp" autocomplete="off">
+        <div class="suggestions-box hidden" id="suggestionsBox"></div>
+      </div>
     </div>
 
     <div class="input-group">
       <div class="label">Amount of Data</div>
       <div class="toggle-grp">
-        <button class="toggle-btn active" id="btnAll" onclick="setMode('all')">Fetch All</button>
-        <button class="toggle-btn" id="btnLimit" onclick="setMode('limit')">Custom</button>
+        <button class="toggle-btn" id="btnAll" onclick="setMode('all')">Fetch All</button>
+        <button class="toggle-btn active" id="btnLimit" onclick="setMode('limit')">Custom</button>
       </div>
-      <input type="number" id="manualCount" class="hidden" value="100" placeholder="Count (e.g. 500)">
+      <input type="number" id="manualCount" value="200" placeholder="Count (e.g. 500)">
     </div>
 
     <div class="input-group">
@@ -215,7 +326,7 @@
 </div>
 
 <script>
-  let mode = 'all';
+  let mode = 'limit';
   let currentData = null;
 
   function setMode(m) {
@@ -281,6 +392,7 @@
     document.getElementById('welcome').classList.add('hidden');
     document.getElementById('results').classList.add('hidden');
     document.getElementById('loader').classList.remove('hidden');
+    hideSuggestions();
     document.getElementById('go').disabled=true;
 
     const msgs=['Connecting to servers…','Fetching app info…','Scraping reviews…','Processing data…'];
@@ -295,22 +407,31 @@
         body:JSON.stringify({
           identifier:query,
           review_count_type:mode,
-          review_count:parseInt(document.getElementById('manualCount').value)||150,
+          review_count:parseInt(document.getElementById('manualCount').value)||200,
           sort_order:document.getElementById('sort').value,
           star_ratings:selectedStars.length===5?'all':selectedStars
         })
       });
       const data=await res.json();
-      if (!res.ok) throw new Error(data.error);
+      if (!res.ok) throw new Error(data.error || 'Scraping failed');
+      
       currentData=data;
+      document.getElementById('results').classList.remove('hidden'); // CRITICAL FIX: show the div!
       render(data,selectedStars);
       save(data.app_info);
     } catch(e) {
-      alert(e.message);
+      document.getElementById('results').classList.remove('hidden'); // Also show for errors
+      document.getElementById('results').innerHTML = `
+        <div style="background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3);border-radius:14px;padding:24px 28px;display:flex;flex-direction:column;gap:10px">
+          <div style="display:flex;align-items:center;gap:10px">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+            <span style="font-weight:700;color:#ef4444;font-size:14px">Operation Failed</span>
+          </div>
+          <p style="color:var(--muted2);font-size:13px;line-height:1.6">${e.message}</p>
+        </div>`;
     } finally {
       clearInterval(msgInt);
       document.getElementById('loader').classList.add('hidden');
-      document.getElementById('results').classList.remove('hidden');
       document.getElementById('go').disabled=false;
     }
   }
@@ -462,6 +583,121 @@
   }
 
   loadRecent();
+
+  // ── Live search suggestions ──────────────────────────────────────────
+  let searchTimer = null;
+  const targetEl = document.getElementById('target');
+  const sugBox   = document.getElementById('suggestionsBox');
+
+  function hideSuggestions() {
+    sugBox.classList.add('hidden');
+    sugBox.innerHTML = '';
+  }
+
+  targetEl.addEventListener('input', () => {
+    clearTimeout(searchTimer);
+    const q = targetEl.value.trim();
+
+    // If it looks like a URL or package ID, skip suggestions
+    if (q.startsWith('http') || /^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*)+$/i.test(q)) {
+      hideSuggestions(); return;
+    }
+    if (q.length < 2) { hideSuggestions(); return; }
+
+    // Show loading state in sidebar
+    sugBox.classList.remove('hidden');
+    sugBox.innerHTML = '<div class="suggestion-loading"><div class="spinner-small"></div>Searching…</div>';
+
+    // Also show in main section if current view is empty/welcome
+    if (document.getElementById('results').classList.contains('hidden')) {
+      document.getElementById('welcome').classList.add('hidden');
+      document.getElementById('results').classList.remove('hidden');
+    }
+    
+    document.getElementById('results').innerHTML = `
+      <div style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
+        <span style="font-size: 18px; font-weight: 800;">Search Results: "${q}"</span>
+      </div>
+      <div class="search-results-grid" id="searchGrid">
+        <div style="grid-column: 1/-1; padding: 40px; text-align: center;">
+          <div class="spinner" style="margin: 0 auto 15px;"></div>
+          <p style="color:var(--muted)">Searching the Play Store...</p>
+        </div>
+      </div>
+    `;
+
+    searchTimer = setTimeout(async () => {
+      try {
+        const res  = await fetch('/search-suggestions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query: q })
+        });
+        const data = await res.json();
+
+        if (!data.results || !data.results.length) {
+          sugBox.innerHTML = '<div class="suggestion-loading">No results found</div>';
+          return;
+        }
+
+        sugBox.innerHTML = data.results.map(r => `
+          <div class="suggestion-item" onclick="selectSuggestion('${r.appId}', '${r.title.replace(/'/g,"\\'")}')">
+            <img src="${r.icon}" alt="">
+            <div class="suggestion-info">
+              <div class="suggestion-title">${r.title}</div>
+              <div class="suggestion-sub">${r.developer} &bull; ${r.installs}</div>
+            </div>
+            <div class="suggestion-score">${r.score > 0 ? r.score + ' ★' : ''}</div>
+          </div>`).join('');
+
+        // Grid view for the main section
+        const gridHTML = data.results.map(r => `
+          <div class="search-app-card" onclick="selectSuggestion('${r.appId}', '${r.title.replace(/'/g,"\\'")}')">
+            <img src="${r.icon}" alt="">
+            <div class="search-app-info">
+              <div>
+                <div class="search-app-title" title="${r.title}">${r.title}</div>
+                <div style="font-size:10px; color:var(--accent); font-family:monospace; margin-bottom:4px;">${r.appId}</div>
+                <div class="search-app-dev">${r.developer}</div>
+              </div>
+              <div class="search-app-meta">
+                <span class="search-app-score">${r.score > 0 ? '★ ' + r.score : 'N/A'}</span>
+                <span class="search-app-installs">${r.installs}</span>
+                <a href="${r.storeUrl}" target="_blank" onclick="event.stopPropagation()" style="margin-left:auto; color:var(--muted); font-size:10px; text-decoration:none; display:flex; align-items:center; gap:4px;">
+                  Store <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/></svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        `).join('');
+        
+        document.getElementById('searchGrid').innerHTML = gridHTML;
+
+      } catch (err) {
+        console.error(err);
+        hideSuggestions();
+        document.getElementById('results').innerHTML = `<div style="padding: 20px; color: var(--amber);">Failed to load search results.</div>`;
+      }
+    }, 400); // 400ms debounce
+  });
+
+  function selectSuggestion(appId, title) {
+    const validId = appId && appId !== 'null' && appId !== 'None' && !appId.includes('None');
+    const query = validId ? `https://play.google.com/store/apps/details?id=${appId}` : title;
+    targetEl.value = query;
+    hideSuggestions();
+    run();  // auto-start scraping
+  }
+
+  // Hide on click outside
+  document.addEventListener('click', e => {
+    if (!targetEl.contains(e.target) && !sugBox.contains(e.target)) hideSuggestions();
+  });
+
+  targetEl.addEventListener('keydown', e => {
+    if (e.key === 'Escape') hideSuggestions();
+    if (e.key === 'Enter') { hideSuggestions(); run(); }
+  });
 </script>
 </body>
 </html>

templates/index2.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PlayPulse | Scraper</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --bg: #0b0e14;
+      --surface: #151921;
+      --surface2: #1c2333;
+      --border: #232a35;
+      --accent: #3b82f6;
+      --accent-dim: rgba(59,130,246,0.12);
+      --green: #22c55e;
+      --green-dim: rgba(34,197,94,0.12);
+      --amber: #f59e0b;
+      --text: #f1f5f9;
+      --muted: #64748b;
+      --muted2: #94a3b8;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
+    header { padding: 20px; border-bottom: 1px solid var(--border); background: var(--surface); text-align: center; }
+    h1 { font-size: 24px; font-weight: 800; color: var(--accent); }
+    .container { flex: 1; max-width: 1000px; margin: 0 auto; width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
+    
+    .search-container { position: relative; width: 100%; }
+    input[type="text"] { width: 100%; padding: 16px 20px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-size: 16px; outline: none; transition: border 0.2s; }
+    input[type="text"]:focus { border-color: var(--accent); }
+    
+    .controls { display: flex; gap: 10px; flex-wrap: wrap; }
+    select, button { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); outline: none; font-size: 14px; cursor: pointer; }
+    button.primary { background: var(--accent); color: #fff; border: none; font-weight: 600; }
+    button.primary:hover { background: #2563eb; }
+    
+    /* Suggestions Dropdown */
+    #suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; z-index: 50; overflow: hidden; display: none; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
+    .suggestion-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.2s; }
+    .suggestion-card:last-child { border-bottom: none; }
+    .suggestion-card:hover { background: var(--surface2); }
+    .suggestion-icon { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
+    .suggestion-info { flex: 1; display: flex; flex-direction: column; }
+    .suggestion-title { font-weight: 600; font-size: 14px; }
+    .suggestion-dev { font-size: 12px; color: var(--muted); }
+    
+    /* Results */
+    #results { flex: 1; background: var(--surface); border-radius: 12px; border: 1px solid var(--border); padding: 20px; }
+    .app-header { display: flex; gap: 20px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); align-items: center;}
+    .app-header img { width: 80px; height: 80px; border-radius: 16px; }
+    .app-title { font-size: 20px; font-weight: 700; }
+    .app-stats { color: var(--muted); font-size: 14px; margin-top: 4px; }
+    
+    .review-card { background: var(--surface2); padding: 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid var(--border); }
+    .review-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
+    .reviewer { display: flex; gap: 10px; align-items: center; font-weight: 600; }
+    .reviewer img { width: 32px; height: 32px; border-radius: 50%; }
+    .stars { color: var(--amber); }
+    .review-date { color: var(--muted); font-size: 12px; }
+    .review-body { font-size: 14px; line-height: 1.5; color: var(--text); }
+    
+    .loading { display: none; text-align: center; color: var(--muted); padding: 20px; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>PlayPulse</h1>
+  </header>
+  <div class="container">
+    <div class="search-container">
+      <input type="text" id="target" placeholder="Search app name or paste URL..." autocomplete="off" />
+      <div id="suggestions">
+        <div id="searchGrid"></div>
+      </div>
+    </div>
+    
+    <div class="controls">
+      <select id="review_count">
+        <option value="50">50 Reviews</option>
+        <option value="150" selected>150 Reviews</option>
+        <option value="500">500 Reviews</option>
+      </select>
+      <select id="sort_order">
+        <option value="NEWEST">Newest</option>
+        <option value="MOST_RELEVANT" selected>Most Relevant</option>
+        <option value="RATING">Rating</option>
+      </select>
+      <button class="primary" onclick="run()">Scrape Reviews</button>
+    </div>
+
+    <div class="loading" id="loading">Scraping reviews... Please wait.</div>
+    <div id="results">
+       <div style="color: var(--muted); text-align: center; margin-top: 40px;">Search for an app to see reviews.</div>
+    </div>
+  </div>
+
+  <script>
+    const targetEl = document.getElementById('target');
+    const suggestionsBox = document.getElementById('suggestions');
+    const searchGrid = document.getElementById('searchGrid');
+    let debounceTimer;
+
+    targetEl.addEventListener('input', (e) => {
+      clearTimeout(debounceTimer);
+      const query = e.target.value.trim();
+      
+      if (query.length < 2) {
+        hideSuggestions();
+        return;
+      }
+
+      debounceTimer = setTimeout(async () => {
+        try {
+          const res = await fetch('/search-suggestions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query })
+          });
+          const data = await res.json();
+          
+          if (!data.results || data.results.length === 0) {
+            hideSuggestions();
+            return;
+          }
+
+          suggestionsBox.style.display = 'block';
+          searchGrid.innerHTML = data.results.map(app => `
+            <div class="suggestion-card" onclick="selectSuggestion('${app.appId}', '${app.title.replace(/'/g, "\\'")}')">
+              <img src="${app.icon}" class="suggestion-icon" alt="icon" />
+              <div class="suggestion-info">
+                <span class="suggestion-title">${app.title}</span>
+                <span class="suggestion-dev">${app.developer} • ${app.score} ★</span>
+              </div>
+            </div>
+          `).join('');
+        } catch (err) {
+          console.error(err);
+        }
+      }, 400);
+    });
+
+    function hideSuggestions() {
+      suggestionsBox.style.display = 'none';
+    }
+
+    // --- THE SMART MOVE ---
+    // Instead of passing "com.whatsapp", we construct the FULL Play Store URL.
+    // This allows the old reliable `extract_app_id` to parse out the ?id= properly.
+    function selectSuggestion(appId, title) {
+      const validId = appId && appId !== 'null' && appId !== 'None' && !appId.includes('None');
+      
+      const query = validId ? `https://play.google.com/store/apps/details?id=${appId}` : title;
+      
+      targetEl.value = query;
+      hideSuggestions();
+      run();  // auto-start scraping
+    }
+
+    document.addEventListener('click', (e) => {
+      if (!e.target.closest('.search-container')) {
+        hideSuggestions();
+      }
+    });
+
+    async function run() {
+      const identifier = targetEl.value.trim();
+      if (!identifier) return;
+      
+      document.getElementById('loading').style.display = 'block';
+      document.getElementById('results').innerHTML = '';
+      hideSuggestions();
+
+      try {
+        const res = await fetch('/scrape', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            identifier,
+            review_count: document.getElementById('review_count').value,
+            sort_order: document.getElementById('sort_order').value,
+            star_ratings: 'all'
+          })
+        });
+        const data = await res.json();
+        document.getElementById('loading').style.display = 'none';
+
+        if (data.error) {
+          document.getElementById('results').innerHTML = `<div style="color: var(--amber);">${data.error}</div>`;
+          return;
+        }
+
+        let html = `
+          <div class="app-header">
+            <img src="${data.app_info.icon}" alt="App Icon" />
+            <div>
+              <div class="app-title">${data.app_info.title}</div>
+              <div class="app-stats">${data.app_info.score} ★ • ${data.app_info.reviews} Total Reviews</div>
+            </div>
+          </div>
+        `;
+
+        data.reviews.forEach(r => {
+          const stars = '★'.repeat(r.score) + '☆'.repeat(5 - r.score);
+          const date = new Date(r.at).toLocaleDateString();
+          html += `
+            <div class="review-card">
+              <div class="review-header">
+                <div class="reviewer">
+                  <img src="${r.userImage}" alt="User" onerror="this.src='https://via.placeholder.com/32'" />
+                  <span>${r.userName}</span>
+                </div>
+                <div class="stars">${stars}</div>
+              </div>
+              <div class="review-body">${r.content}</div>
+              <div class="review-date">${date}</div>
+            </div>
+          `;
+        });
+
+        document.getElementById('results').innerHTML = html;
+
+      } catch (err) {
+        document.getElementById('loading').style.display = 'none';
+        document.getElementById('results').innerHTML = `<div style="color: var(--amber);">Error: ${err.message}</div>`;
+      }
+    }
+  </script>
+</body>
+</html>

templates/landing.html

@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PlayPulse | Intelligence Platform</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: #0b0e14;
+      --surface: #151921;
+      --border: rgba(255, 255, 255, 0.08);
+      --accent: #3b82f6;
+      --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
+      --text: #f1f5f9;
+      --muted: #94a3b8;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow-x: hidden;
+    }
+
+    .blob {
+      position: fixed;
+      width: 500px;
+      height: 500px;
+      background: var(--accent);
+      filter: blur(120px);
+      opacity: 0.1;
+      z-index: -1;
+      border-radius: 50%;
+    }
+    .blob-1 { top: -100px; right: -100px; }
+    .blob-2 { bottom: -100px; left: -100px; background: #2dd4bf; }
+
+    header {
+      padding: 30px 5%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .logo {
+      font-family: 'Outfit', sans-serif;
+      font-weight: 800;
+      font-size: 24px;
+      letter-spacing: -1px;
+      color: var(--text);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .logo-icon {
+      width: 32px;
+      height: 32px;
+      background: var(--accent-gradient);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 5%;
+      max-width: 1200px;
+      margin: 0 auto;
+      text-align: center;
+    }
+
+    .hero-tag {
+      background: rgba(59, 130, 246, 0.1);
+      border: 1px solid rgba(59, 130, 246, 0.2);
+      color: var(--accent);
+      padding: 6px 16px;
+      border-radius: 100px;
+      font-size: 13px;
+      font-weight: 700;
+      margin-bottom: 24px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    h1 {
+      font-family: 'Outfit', sans-serif;
+      font-size: clamp(40px, 8vw, 72px);
+      font-weight: 800;
+      line-height: 1.1;
+      margin-bottom: 20px;
+      letter-spacing: -2px;
+    }
+
+    h1 span {
+      background: var(--accent-gradient);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .sub-hero {
+      color: var(--muted);
+      font-size: clamp(16px, 2vw, 20px);
+      max-width: 600px;
+      margin-bottom: 60px;
+      line-height: 1.6;
+    }
+
+    .cards-container {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+      gap: 30px;
+      width: 100%;
+    }
+
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      padding: 40px;
+      border-radius: 24px;
+      text-align: left;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .card:hover {
+      border-color: rgba(59, 130, 246, 0.5);
+      transform: translateY(-8px);
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+    }
+
+    .card.disabled {
+      cursor: not-allowed;
+      opacity: 0.8;
+    }
+    .card.disabled:hover { transform: none; border-color: var(--border); }
+
+    .card-icon {
+      width: 56px;
+      height: 56px;
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+      transition: 0.3s;
+    }
+
+    .card:hover .card-icon {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
+    }
+
+    .card h2 {
+      font-family: 'Outfit', sans-serif;
+      font-size: 24px;
+      margin-bottom: 12px;
+      font-weight: 700;
+    }
+
+    .card p {
+      color: var(--muted);
+      line-height: 1.6;
+      font-size: 15px;
+      margin-bottom: 24px;
+      flex: 1;
+    }
+
+    .badge {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--border);
+      padding: 4px 12px;
+      border-radius: 100px;
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--muted);
+      text-transform: uppercase;
+    }
+    .badge.active {
+      background: var(--accent-dim);
+      color: var(--accent);
+      border-color: rgba(59, 130, 246, 0.2);
+    }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 700;
+      font-size: 14px;
+      color: var(--text);
+      transition: 0.3s;
+    }
+
+    .card:hover .btn {
+      color: var(--accent);
+    }
+
+    .card.disabled .btn { color: var(--muted); }
+
+    footer {
+      padding: 40px;
+      text-align: center;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    @media (max-width: 768px) {
+      h1 { font-size: 48px; }
+      .cards-container { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="blob blob-1"></div>
+  <div class="blob blob-2"></div>
+
+  <header>
+    <div class="logo">
+      <div class="logo-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+      </div>
+      PLAYPULSE
+    </div>
+  </header>
+
+  <main>
+    <div class="hero-tag">Next-Gen Intelligence</div>
+    <h1>Extract Insights from <span>Global App Data</span></h1>
+    <p class="sub-hero">The most powerful tool for analyzing app reviews, sentiment, and developer responses in real-time.</p>
+
+    <div class="cards-container">
+      <!-- Single Search Card -->
+      <div class="card" onclick="location.href='/scraper'">
+        <div class="badge active">Live Now</div>
+        <div class="card-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35"/></svg>
+        </div>
+        <h2>Single App Explorer</h2>
+        <p>Deep-dive into any Play Store app. Extract hundreds of reviews, analyze ratings, and export clean data instantly.</p>
+        <div class="btn">
+          Explore Now
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </div>
+      </div>
+
+      <!-- Batch Intelligence Card -->
+      <div class="card" onclick="location.href='/batch'">
+        <div class="badge active">New Mode</div>
+        <div class="card-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+        </div>
+        <h2>Batch Intelligence</h2>
+        <p>Compare multiple apps side-by-side. Track competitor updates and aggregate sentiment across entire categories.</p>
+        <div class="btn">
+          Start Analysis
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <footer>
+    &copy; 2026 PlayPulse Intelligence. Powered by Google Play Scraper Engine.
+  </footer>
+</body>
+</html>