Upload 5 files

Dockerfile

@@ -0,0 +1,23 @@
+# Use an official Python runtime as a parent image
+FROM python:3.11-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file into the container at /app
+COPY requirement.txt .
+
+# Install any needed packages specified in requirement.txt
+RUN pip install --no-cache-dir -r requirement.txt
+
+# Copy the current directory contents into the container at /app
+COPY . .
+
+# Make port 5000 available to the world outside this container
+EXPOSE 5000
+
+# Define environment variable
+ENV FLASK_APP=app.py
+
+# Run app.py when the container launches
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,94 @@
+import urllib.parse
+import pandas as pd
+import io
+import math
+from flask import Flask, request, render_template, send_file, jsonify
+from google_play_scraper import reviews, Sort, search, app as app_info
+
+app = Flask(__name__)
+
+def extract_app_id(url_or_name: str) -> str:
+    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]
+    return ""
+
+@app.route('/scrape', methods=['POST'])
+def scrape():
+    try:
+        data = request.json
+        identifier = data.get('identifier', '').strip()
+        count_type = data.get('review_count_type', 'fixed')
+        star_rating_input = data.get('star_rating', 'all')
+        sort_choice = data.get('sort_order', 'MOST_RELEVANT')
+        
+        sort_map = {
+            'MOST_RELEVANT': Sort.MOST_RELEVANT,
+            'NEWEST': Sort.NEWEST,
+            'RATING': Sort.RATING
+        }
+        selected_sort = sort_map.get(sort_choice, Sort.MOST_RELEVANT)
+        
+        filter_score = None
+        if star_rating_input != 'all':
+            filter_score = int(star_rating_input)
+
+        app_id = extract_app_id(identifier)
+        
+        if not app_id:
+            search_results = search(identifier, lang="en", country="us", n_hits=1)
+            if search_results:
+                app_id = search_results[0]['appId']
+            else:
+                return jsonify({"error": f"Could not find any app matching '{identifier}'"}), 404
+        
+        # Get app info for the header
+        info = app_info(app_id, lang='en', country='us')
+        
+        if count_type == 'all':
+            review_limit = 100000 
+        else:
+            review_limit = int(data.get('review_count', 150))
+
+        result, _ = reviews(
+            app_id,
+            lang='en', 
+            country='us', 
+            sort=selected_sort, 
+            count=review_limit,
+            filter_score_with=filter_score
+        )
+
+        if not result:
+            return jsonify({"error": f"No reviews found for '{info['title']}'"}), 404
+        
+        # Clean the dates for JSON serialization
+        for r in result:
+            if 'at' in r:
+                r['at'] = r['at'].isoformat()
+            if 'repliedAt' in r and r['repliedAt']:
+                r['repliedAt'] = r['repliedAt'].isoformat()
+
+        return jsonify({
+            "app_info": {
+                "title": info['title'],
+                "icon": info['icon'],
+                "score": info['score'],
+                "reviews": info['reviews'],
+                "appId": app_id,
+                "summary": info.get('summary', '')
+            },
+            "reviews": result
+        })
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+if __name__ == "__main__":
+    app.run(debug=True)

requirement.txt

@@ -0,0 +1,3 @@
+google-play-scraper
+pandas
+flask

static/js/main.js

@@ -0,0 +1,183 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide Icons
+    lucide.createIcons();
+
+    // Elements
+    const themeToggle = document.getElementById('themeToggle');
+    const startScrape = document.getElementById('startScrape');
+    const userInput = document.getElementById('userInput');
+    const landingHero = document.getElementById('landingHero');
+    const loadingState = document.getElementById('loadingState');
+    const resultsSection = document.getElementById('resultsSection');
+    const statusText = document.getElementById('statusText');
+    const progressBar = document.getElementById('progressBar');
+    
+    // Config Elements
+    const reviewCountType = document.getElementById('reviewCountType');
+    const sortOrder = document.getElementById('sortOrder');
+    const starRating = document.getElementById('starRating');
+
+    // Theme Logic
+    themeToggle.addEventListener('click', () => {
+        const html = document.documentElement;
+        if (html.classList.contains('dark')) {
+            html.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        } else {
+            html.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+    });
+
+    // Load Saved Theme
+    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark');
+    }
+
+    // Scrape Logic
+    startScrape.addEventListener('click', async () => {
+        const identifier = userInput.value.trim();
+        if (!identifier) {
+            alert('Please enter an app name or URL');
+            return;
+        }
+
+        // 1. Transition to Loading
+        landingHero.classList.add('hidden');
+        loadingState.classList.remove('hidden');
+        
+        // 2. Mock Progress Simulation
+        let progress = 0;
+        const progressInterval = setInterval(() => {
+            if (progress < 90) {
+                progress += Math.random() * 5;
+                progressBar.style.width = `${progress}%`;
+                
+                if (progress < 30) statusText.innerText = 'Connecting to Google Play...';
+                else if (progress < 60) statusText.innerText = 'Bypassing Protection...';
+                else statusText.innerText = 'Parsing Reviews...';
+            }
+        }, 500);
+
+        // 3. Actual API Call
+        try {
+            const countValue = reviewCountType.value === 'fixed_500' ? 500 : (reviewCountType.value === 'all' ? 'all' : 150);
+            
+            const response = await fetch('/scrape', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    identifier,
+                    review_count_type: reviewCountType.value === 'all' ? 'all' : 'fixed',
+                    review_count: countValue,
+                    sort_order: sortOrder.value,
+                    star_rating: starRating.value
+                })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to fetch reviews');
+            }
+
+            // 4. Success - Render Results
+            clearInterval(progressInterval);
+            progressBar.style.width = '100%';
+            statusText.innerText = 'Done!';
+            
+            setTimeout(() => {
+                renderResults(data);
+                loadingState.classList.add('hidden');
+                resultsSection.classList.remove('hidden');
+            }, 600);
+
+        } catch (err) {
+            clearInterval(progressInterval);
+            alert(err.message);
+            loadingState.classList.add('hidden');
+            landingHero.classList.remove('hidden');
+            progressBar.style.width = '0%';
+        }
+    });
+
+    function renderResults(data) {
+        const { app_info, reviews } = data;
+        
+        // Update Header
+        document.getElementById('appIcon').src = app_info.icon;
+        document.getElementById('appTitle').innerText = app_info.title;
+        document.getElementById('appScore').innerText = app_info.score.toFixed(1);
+        document.getElementById('appReviewCount').innerText = formatNumber(app_info.reviews);
+        document.getElementById('appDesc').innerText = app_info.summary;
+        document.getElementById('reviewStats').innerText = `Showing ${reviews.length} results`;
+
+        // Stars
+        const stars = Math.round(app_info.score);
+        const starContainer = document.getElementById('starContainer');
+        starContainer.innerHTML = '';
+        for (let i = 0; i < 5; i++) {
+            const starIcon = document.createElement('i');
+            starIcon.setAttribute('data-lucide', 'star');
+            starIcon.classList.add('w-5', 'h-5');
+            if (i < stars) starIcon.classList.add('fill-current');
+            starContainer.appendChild(starIcon);
+        }
+
+        // Review Feed
+        const feed = document.getElementById('reviewFeed');
+        feed.innerHTML = '';
+        
+        reviews.forEach(review => {
+            const card = document.createElement('div');
+            card.className = 'bg-white dark:bg-slate-900 p-6 rounded-2xl border border-slate-200 dark:border-slate-800 space-y-3 transition-hover hover:border-primary/30';
+            
+            card.innerHTML = `
+                <div class="flex justify-between items-start">
+                    <div class="flex items-center gap-3">
+                        <img src="${review.userImage || 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y'}" 
+                             class="w-10 h-10 rounded-full border border-slate-200 dark:border-slate-700">
+                        <div>
+                            <div class="font-bold text-sm">${review.userName}</div>
+                            <div class="text-xs text-slate-400">${new Date(review.at).toLocaleDateString()}</div>
+                        </div>
+                    </div>
+                    <div class="flex text-yellow-500">
+                        ${Array(review.score).fill('<i data-lucide="star" class="w-3 h-3 fill-current"></i>').join('')}
+                    </div>
+                </div>
+                <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">${review.content}</p>
+                <div class="flex items-center gap-4 text-xs font-bold text-slate-400">
+                    <span class="flex items-center gap-1"><i data-lucide="thumbs-up" class="w-3 h-3"></i> ${review.thumbsUpCount}</span>
+                </div>
+            `;
+            feed.appendChild(card);
+        });
+
+        lucide.createIcons();
+
+        // Download Action
+        document.getElementById('downloadCSV').onclick = () => {
+            downloadCSV(data.reviews, `${app_info.appId}_reviews.csv`);
+        };
+    }
+
+    function downloadCSV(arr, filename) {
+        const headers = Object.keys(arr[0]).join(',');
+        const rows = arr.map(obj => Object.values(obj).map(val => `"${val}"`).join(',')).join('\\n');
+        const csvContent = "data:text/csv;charset=utf-8," + headers + '\\n' + rows;
+        const encodedUri = encodeURI(csvContent);
+        const link = document.createElement("a");
+        link.setAttribute("href", encodedUri);
+        link.setAttribute("download", filename);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    function formatNumber(num) {
+        if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+        if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+        return num;
+    }
+});

templates/index.html

@@ -0,0 +1,279 @@
+<!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;
+      --border: #232a35;
+      --accent: #3b82f6;
+      --text: #f1f5f9;
+      --muted: #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; }
+    
+    /* Layout */
+    .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: 300px; 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; }
+
+    /* UI Components */
+    .logo { font-weight: 800; font-size: 18px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
+    .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: 10px; border-radius: 8px; font-size: 13px; outline: none; }
+    input:focus { border-color: var(--accent); }
+
+    .toggle-grp { display: flex; background: var(--bg); padding: 4px; border-radius: 10px; border: 1px solid var(--border); }
+    .toggle-btn { flex: 1; padding: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 7px; font-weight: 600; font-size: 12px; }
+    .toggle-btn.active { background: var(--accent); color: white; }
+
+    .btn-main { background: var(--accent); color: white; border: none; padding: 12px; border-radius: 10px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; }
+    .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; }
+
+    .btn-icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
+    .btn-icon:hover { color: white; border-color: var(--accent); }
+    .btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
+
+    /* Tabs */
+    .view-tabs { display: flex; gap: 10px; }
+    .tab { padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); color: var(--muted); transition: 0.2s; }
+    .tab.active { background: var(--accent); color: white; border-color: var(--accent); }
+
+    /* Result Area */
+    .scroll-view { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
+    .app-card { background: var(--surface); border: 1px solid var(--border); padding: 20px; border-radius: 15px; display: flex; gap: 20px; }
+    .app-card img { width: 80px; height: 80px; border-radius: 15px; }
+    .review-item { background: var(--surface); border: 1px solid var(--border); padding: 15px; border-radius: 12px; }
+    .review-item .name { font-weight: 700; font-size: 13px; margin-bottom: 5px; }
+    .review-item .text { font-size: 13px; color: var(--muted); line-height: 1.5; }
+
+    /* Iframe Error Message */
+    .site-overlay { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 15px; padding: 40px; }
+    .site-overlay h3 { font-size: 18px; font-weight: 700; }
+    .site-overlay p { color: var(--muted); font-size: 14px; max-width: 400px; }
+
+    .hidden { display: none !important; }
+    iframe { width: 100%; height: 100%; border: none; }
+  </style>
+</head>
+<body>
+
+  <div class="header">
+    <div class="logo">
+      <svg width="24" height="24" 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>
+    
+    <div style="flex: 1"></div>
+
+    <div class="view-tabs" id="viewTabs">
+      <div class="tab active" onclick="switchView('data')">Data List</div>
+      <div class="tab" id="siteTabBtn" onclick="switchView('site')">Live Website</div>
+    </div>
+
+    <button class="btn-icon" id="dlBtn" onclick="downloadCSV()" title="Download CSV">
+      <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+    </button>
+  </div>
+
+  <div class="main">
+    <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>
+
+      <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>
+        </div>
+        <input type="number" id="manualCount" class="hidden" value="100" placeholder="Count (e.g. 500)">
+      </div>
+
+      <div class="input-group">
+        <div class="label">Strategy</div>
+        <select id="sort">
+          <option value="MOST_RELEVANT">Most Relevant</option>
+          <option value="NEWEST">Newest</option>
+          <option value="RATING">Top Ratings</option>
+        </select>
+      </div>
+
+      <button class="btn-main" id="go" onclick="run()">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="13 17 18 12 13 7"/><line x1="6" y1="17" x2="6" y2="7"/></svg>
+        START SCRAPING
+      </button>
+
+      <div class="input-group" id="recents">
+        <div class="label">Recent Sessions</div>
+        <div id="recentList" style="display:flex; flex-direction:column; gap:8px;"></div>
+      </div>
+    </aside>
+
+    <div class="content">
+      <!-- Data View -->
+      <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)">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+          <p style="margin-top:10px">Enter app details to see scrapped data</p>
+        </div>
+        <div id="results" class="hidden"></div>
+      </div>
+
+      <!-- Loading Spinner -->
+      <div id="loader" class="site-overlay hidden">
+        <div style="width:40px; height:40px; border:4px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite"></div>
+        <p>Connecting to servers...</p>
+      </div>
+
+      <!-- Website View -->
+      <div id="siteView" class="hidden" style="height:100%">
+        <div class="site-overlay">
+          <h3>Web View Shielded</h3>
+          <p>Google Play Store blocks previewing inside other apps for security. Use this button to view the live site in a new tab.</p>
+          <button class="btn-main" id="externalBtn" onclick="openTarget()">
+             Open Officially on Google Play
+             <svg width="16" height="16" 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>
+          </button>
+        </div>
+        <iframe id="iframe" src=""></iframe>
+      </div>
+    </div>
+  </div>
+
+  <style> @keyframes spin { to { transform: rotate(360deg); } } </style>
+  <script>
+    let mode = 'all';
+    let currentData = null;
+
+    function setMode(m) {
+      mode = m;
+      document.getElementById('btnAll').classList.toggle('active', m === 'all');
+      document.getElementById('btnLimit').classList.toggle('active', m === 'limit');
+      document.getElementById('manualCount').classList.toggle('hidden', m === 'all');
+    }
+
+    function switchView(v) {
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      event.target.classList.add('active');
+      document.getElementById('dataView').classList.toggle('hidden', v !== 'data');
+      document.getElementById('siteView').classList.toggle('hidden', v !== 'site');
+    }
+
+    function openTarget() {
+      const url = document.getElementById('target').value;
+      if (url.startsWith('http')) window.open(url, '_blank');
+      else if (currentData) window.open(`https://play.google.com/store/apps/details?id=${currentData.app_info.appId}`, '_blank');
+    }
+
+    async function run() {
+      const query = document.getElementById('target').value;
+      if (!query) return;
+
+      document.getElementById('results').innerHTML = '';
+      currentData = null;
+      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', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            identifier: query,
+            review_count_type: mode,
+            review_count: document.getElementById('manualCount').value || 150,
+            sort_order: document.getElementById('sort').value,
+            star_rating: 'all'
+          })
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+
+        currentData = data;
+        render(data);
+        save(data.app_info);
+        
+        // Try to update iframe just in case (though it might still show blank/error)
+        const siteUrl = query.startsWith('http') ? query : `https://play.google.com/store/apps/details?id=${data.app_info.appId}`;
+        document.getElementById('iframe').src = siteUrl;
+
+      } catch (e) {
+        alert(e.message);
+      } finally {
+        document.getElementById('loader').classList.add('hidden');
+        document.getElementById('results').classList.remove('hidden');
+        document.getElementById('go').disabled = false;
+      }
+    }
+
+    function render(data) {
+      const html = `
+        <div class="app-card">
+          <img src="${data.app_info.icon}">
+          <div style="flex:1">
+            <h2 style="font-size:22px; margin-bottom:4px">${data.app_info.title}</h2>
+            <div style="color:var(--accent); font-weight:700; font-size:12px">${data.app_info.appId}</div>
+            <div style="display:flex; gap:15px; margin-top:10px">
+              <div><strong>${(data.app_info.score || 0).toFixed(1)}</strong> <span style="color:var(--muted);font-size:10px uppercase">Rating</span></div>
+              <div><strong>${data.reviews.length}</strong> <span style="color:var(--muted);font-size:10px uppercase">Fetched</span></div>
+            </div>
+          </div>
+        </div>
+        <div style="display:grid; gap:12px">
+          ${data.reviews.map(r => `
+            <div class="review-item">
+              <div class="name">${r.userName} <span style="color:var(--accent);margin-left:8px">${'★'.repeat(r.score)}</span></div>
+              <div class="text">${r.content}</div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+      document.getElementById('results').innerHTML = html;
+    }
+
+    function downloadCSV() {
+      if (!currentData) return;
+      const csv = ["Name,Score,Content", ...currentData.reviews.map(r => `"${r.userName}",${r.score},"${r.content.replace(/"/g, '""')}"`)].join('\n');
+      const blob = new Blob([csv], { type: 'text/csv' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${currentData.app_info.appId}_data.csv`;
+      a.click();
+    }
+
+    function save(info) {
+      let list = JSON.parse(localStorage.getItem('scrapes') || '[]');
+      list = [info, ...list.filter(x => x.appId !== info.appId)].slice(0, 5);
+      localStorage.setItem('scrapes', JSON.stringify(list));
+      loadRecent();
+    }
+
+    function loadRecent() {
+      const list = JSON.parse(localStorage.getItem('scrapes') || '[]');
+      document.getElementById('recentList').innerHTML = list.map(x => `
+        <div onclick="document.getElementById('target').value='${x.appId}';run()" style="cursor:pointer; background:var(--bg); padding:10px; border-radius:8px; display:flex; gap:10px; align-items:center; border:1px solid var(--border)">
+          <img src="${x.icon}" style="width:24px;height:24px;border-radius:4px">
+          <span style="font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">${x.title}</span>
+          <div style="font-size: 10px; color: var(--muted)">${(x.score || 0).toFixed(1)} ★</div>
+        </div>
+      `).join('');
+    }
+
+    loadRecent();
+  </script>
+</body>
+</html>