Improving the web interface (#1975)

* update web interface with commandline options
* improve web interface
* update README images of web interface
* fix bug in app.py
* fix web interface

maigret/web/app.py

@@ -1,4 +1,3 @@
-# app.py
 from flask import (
     Flask,
     render_template,
@@ -22,7 +21,7 @@ from maigret.report import generate_report_context
 app = Flask(__name__)
 app.secret_key = 'your-secret-key-here'
 
-# Add background job tracking
+#add background job tracking
 background_jobs = {}
 job_results = {}
 
@@ -46,16 +45,38 @@ async def maigret_search(username, options):
     logger = setup_logger(logging.WARNING, 'maigret')
     try:
         db = MaigretDatabase().load_from_path(MAIGRET_DB_FILE)
-        sites = db.ranked_sites_dict(top=int(options.get('top_sites', 500)))
+        
+        top_sites = int(options.get('top_sites') or 500) 
+        if options.get('all_sites'):
+            top_sites = 999999999  # effectively all
+        
+        tags = options.get('tags', [])
+        site_list= options.get('site_list', [])
+        logger.info(f"Filtering sites by tags: {tags}")
+        
+        sites = db.ranked_sites_dict(
+            top=top_sites,
+            tags=tags,
+            names=site_list,
+            disabled=False,
+            id_type='username'
+        )
+        
+        logger.info(f"Found {len(sites)} sites matching the tag criteria")
 
         results = await maigret.search(
             username=username,
             site_dict=sites,
             timeout=int(options.get('timeout', 30)),
             logger=logger,
-            id_type=options.get('id_type', 'username'),
+            id_type='username',
             cookies=COOKIES_FILE if options.get('use_cookies') else None,
-            is_parsing_enabled=True,
+            is_parsing_enabled=(not options.get('disable_extracting', False)),  
+            recursive_search_enabled=(not options.get('disable_recursive_search', False)),
+            check_domains=options.get('with_domains', False),
+            proxy=options.get('proxy', None),
+            tor_proxy=options.get('tor_proxy', None),
+            i2p_proxy=options.get('i2p_proxy', None),
         )
         return results
     except Exception as e:
@@ -68,7 +89,7 @@ async def search_multiple_usernames(usernames, options):
     for username in usernames:
         try:
             search_results = await maigret_search(username.strip(), options)
-            results.append((username.strip(), options['id_type'], search_results))
+            results.append((username.strip(), 'username', search_results))
         except Exception as e:
             logging.error(f"Error searching username {username}: {str(e)}")
     return results
@@ -76,20 +97,16 @@ async def search_multiple_usernames(usernames, options):
 
 def process_search_task(usernames, options, timestamp):
     try:
-        # Setup event loop for async operations
         loop = asyncio.new_event_loop()
         asyncio.set_event_loop(loop)
 
-        # Run the search
         general_results = loop.run_until_complete(
             search_multiple_usernames(usernames, options)
         )
 
-        # Create session folder
         session_folder = os.path.join(REPORTS_FOLDER, f"search_{timestamp}")
         os.makedirs(session_folder, exist_ok=True)
 
-        # Save the combined graph
         graph_path = os.path.join(session_folder, "combined_graph.html")
         maigret.report.save_graph_report(
             graph_path,
@@ -97,7 +114,6 @@ def process_search_task(usernames, options, timestamp):
             MaigretDatabase().load_from_path(MAIGRET_DB_FILE),
         )
 
-        # Save individual reports
         individual_reports = []
         for username, id_type, results in general_results:
             report_base = os.path.join(session_folder, f"report_{username}")
@@ -154,7 +170,7 @@ def process_search_task(usernames, options, timestamp):
                 }
             )
 
-        # Save results and mark job as complete
+        # save results and mark job as complete using timestamp as key
         job_results[timestamp] = {
             'status': 'completed',
             'session_folder': f"search_{timestamp}",
@@ -162,7 +178,9 @@ def process_search_task(usernames, options, timestamp):
             'usernames': usernames,
             'individual_reports': individual_reports,
         }
+
     except Exception as e:
+        logging.error(f"Error in search task for timestamp {timestamp}: {str(e)}")
         job_results[timestamp] = {'status': 'failed', 'error': str(e)}
     finally:
         background_jobs[timestamp]['completed'] = True
@@ -170,9 +188,24 @@ def process_search_task(usernames, options, timestamp):
 
 @app.route('/')
 def index():
-    return render_template('index.html')
+    #load site data for autocomplete
+    db = MaigretDatabase().load_from_path(MAIGRET_DB_FILE)
+    site_options = []
+    
+    for site in db.sites:
+        #add main site name
+        site_options.append(site.name)
+        #add URL if different from name
+        if site.url_main and site.url_main not in site_options:
+            site_options.append(site.url_main)
+    
+    #sort and deduplicate
+    site_options = sorted(set(site_options))
+    
+    return render_template('index.html', site_options=site_options)
 
 
+# Modified search route
 @app.route('/search', methods=['POST'])
 def search():
     usernames_input = request.form.get('usernames', '').strip()
@@ -187,15 +220,28 @@ def search():
     # Create timestamp for this search session
     timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
 
-    logging.info(f"Starting search for usernames: {usernames}")
+    # Get selected tags - ensure it's a list
+    selected_tags = request.form.getlist('tags')
+    logging.info(f"Selected tags: {selected_tags}")
 
     options = {
-        'top_sites': request.form.get('top_sites', '500'),
+        'top_sites': request.form.get('top_sites') or '500',
-        'timeout': request.form.get('timeout', '30'),
+        'timeout': request.form.get('timeout') or '30',
-        'id_type': 'username',  # fixed as username
         'use_cookies': 'use_cookies' in request.form,
+        'all_sites': 'all_sites' in request.form,
+        'disable_recursive_search': 'disable_recursive_search' in request.form,
+        'disable_extracting': 'disable_extracting' in request.form,
+        'with_domains': 'with_domains' in request.form,
+        'proxy': request.form.get('proxy', None) or None,
+        'tor_proxy': request.form.get('tor_proxy', None) or None,
+        'i2p_proxy': request.form.get('i2p_proxy', None) or None,
+        'permute': 'permute' in request.form,
+        'tags': selected_tags,  # Pass selected tags as a list
+        'site_list': [s.strip() for s in request.form.get('site', '').split(',') if s.strip()],
     }
 
+    logging.info(f"Starting search for usernames: {usernames} with tags: {selected_tags}")
+
     # Start background job
     background_jobs[timestamp] = {
         'completed': False,
@@ -205,46 +251,42 @@ def search():
     }
     background_jobs[timestamp]['thread'].start()
 
-    logging.info(f"Search job started with timestamp: {timestamp}")
-
-    # Redirect to status page
     return redirect(url_for('status', timestamp=timestamp))
 
-
 @app.route('/status/<timestamp>')
 def status(timestamp):
     logging.info(f"Status check for timestamp: {timestamp}")
 
     # Validate timestamp
     if timestamp not in background_jobs:
-        flash('Invalid search session', 'danger')
+        flash('Invalid search session.', 'danger')
+        logging.error(f"Invalid search session: {timestamp}")
         return redirect(url_for('index'))
 
     # Check if job is completed
     if background_jobs[timestamp]['completed']:
         result = job_results.get(timestamp)
         if not result:
-            flash('No results found for this search session', 'warning')
+            flash('No results found for this search session.', 'warning')
+            logging.error(f"No results found for completed session: {timestamp}")
             return redirect(url_for('index'))
 
         if result['status'] == 'completed':
-            # Redirect to results page once done
+            # Note: use the session_folder from the results to redirect
             return redirect(url_for('results', session_id=result['session_folder']))
         else:
-            error_msg = result.get('error', 'Unknown error occurred')
+            error_msg = result.get('error', 'Unknown error occurred.')
             flash(f'Search failed: {error_msg}', 'danger')
+            logging.error(f"Search failed for session {timestamp}: {error_msg}")
             return redirect(url_for('index'))
 
-    # If job is still running, show status page with a simple spinner
+    # If job is still running, show a status page
     return render_template('status.html', timestamp=timestamp)
 
 
 @app.route('/results/<session_id>')
 def results(session_id):
-    if not session_id.startswith('search_'):
+    # Find completed results that match this session_folder
-        flash('Invalid results session format', 'danger')
-        return redirect(url_for('index'))
-
     result_data = next(
         (
             r
@@ -254,6 +296,11 @@ def results(session_id):
         None,
     )
 
+    if not result_data:
+        flash('No results found for this session ID.', 'danger')
+        logging.error(f"Results for session {session_id} not found in job_results.")
+        return redirect(url_for('index'))
+
     return render_template(
         'results.html',
         usernames=result_data['usernames'],
@@ -266,7 +313,9 @@ def results(session_id):
 @app.route('/reports/<path:filename>')
 def download_report(filename):
     try:
-        file_path = os.path.join(REPORTS_FOLDER, filename)
+        file_path = os.path.normpath(os.path.join(REPORTS_FOLDER, filename))
+        if not file_path.startswith(REPORTS_FOLDER):
+            raise Exception("Invalid file path")
         return send_file(file_path)
     except Exception as e:
         logging.error(f"Error serving file {filename}: {str(e)}")
@@ -278,4 +327,5 @@ if __name__ == '__main__':
         level=logging.INFO,
         format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
     )
-    app.run(debug=True)
+    debug_mode = os.getenv('FLASK_DEBUG', 'False').lower() in ['true', '1', 't']
+    app.run(debug=debug_mode)

maigret/web/templates/base.html

@@ -1,44 +1,118 @@
-<!-- templates/base.html -->
 <!DOCTYPE html>
 <html lang="en" data-bs-theme="dark">
+
 <head>
-<meta charset="UTF-8">
+    <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Maigret Web Interface</title>
+    <title>Maigret Web Interface</title>
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-<style>
+    <style>
         body {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .main-container {
+            flex: 1;
             padding-top: 2rem;
         }
+
         .form-container {
             max-width: auto;
             margin: auto;
+            padding-bottom: 2rem;
         }
+
         [data-bs-theme="dark"] {
             --bs-body-bg: #212529;
             --bs-body-color: #dee2e6;
         }
-</style>
+
+        .header {
+            padding: 1rem 0;
+            margin-bottom: 2rem;
+            border-bottom: 1px solid var(--bs-border-color);
+        }
+
+        .header-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .logo-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .logo {
+            height: 40px;
+            width: auto;
+        }
+
+        .footer {
+            margin-top: auto;
+            padding: 1rem 0;
+            text-align: center;
+            border-top: 1px solid var(--bs-border-color);
+            font-size: 0.9rem;
+        }
+
+        .footer a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+    </style>
 </head>
+
 <body>
-<div class="container">
+    <div class="header">
-    <div class="mb-3">
+        <div class="container">
+            <div class="header-content">
+                <div class="logo-container">
+                    <img src="{{ url_for('static', filename='maigret.png') }}" alt="Maigret Logo" class="logo">
+                    <h1 class="h4 mb-0">Maigret Web Interface</h1>
+                </div>
                 <button class="btn btn-outline-secondary" id="theme-toggle">
                     Toggle Dark/Light Mode
                 </button>
             </div>
+        </div>
+    </div>
+
+    <div class="main-container">
+        <div class="container">
             {% block content %}{% endblock %}
-</div>
+        </div>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    </div>
-<script>
+
-document.getElementById('theme-toggle').addEventListener('click', function() {
+    <footer class="footer">
+        <div class="container">
+            <p class="mb-0">
+                Powered by <a href="https://github.com/soxoj/maigret" target="_blank">Maigret</a> |
+                Licensed under <a href="https://github.com/soxoj/maigret/blob/main/LICENSE" target="_blank">MIT
+                    License</a>
+            </p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.getElementById('theme-toggle').addEventListener('click', function () {
             const html = document.documentElement;
             if (html.getAttribute('data-bs-theme') === 'dark') {
                 html.setAttribute('data-bs-theme', 'light');
             } else {
                 html.setAttribute('data-bs-theme', 'dark');
             }
-});
+        });
-</script>
+    </script>
 </body>
+
 </html>

maigret/web/templates/index.html

@@ -1,35 +1,383 @@
 {% extends "base.html" %}
-{% block content %}
-<div class="form-container">
-    <h1 class="mb-4">Maigret Web Interface</h1>
 
+{% block content %}
+<style>
+    .tag-cloud {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        padding: 15px;
+        border-radius: 8px;
+        background: rgba(0, 0, 0, 0.05);
+        margin-bottom: 20px;
+    }
+
+    .tag {
+        display: inline-block;
+        padding: 5px 10px;
+        border-radius: 15px;
+        background-color: #dc3545;
+        color: white;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.3s ease;
+        user-select: none;
+    }
+
+    .tag.selected {
+        background-color: #28a745;
+    }
+
+    .tag:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
+
+    .hidden-select {
+        display: none !important;
+    }
+
+    .site-input-container {
+        position: relative;
+    }
+
+    .site-input {
+        width: 100%;
+    }
+
+    .selected-sites {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        padding: 10px 0;
+    }
+
+    .selected-site {
+        background-color: #214e7b;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 14px;
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .remove-site {
+        cursor: pointer;
+        color: #dc3545;
+        font-weight: bold;
+    }
+
+    .section-header {
+        cursor: pointer;
+        padding: 1rem;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+        margin-bottom: 0.5rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .section-content {
+        padding: 1rem;
+        display: none;
+    }
+
+    .section-content.show {
+        display: block;
+    }
+
+    .chevron::after {
+        content: '▼';
+        transition: transform 0.2s;
+    }
+
+    .chevron.collapsed::after {
+        transform: rotate(-90deg);
+    }
+
+    .main-search-section {
+        background: rgba(255, 255, 255, 0.03);
+        padding: 2rem;
+        border-radius: 8px;
+        margin-bottom: 2rem;
+    }
+
+    .search-button {
+        width: 100%;
+        padding: 1rem;
+        font-size: 1.2rem;
+        margin-top: 2rem;
+    }
+</style>
+
+<div class="form-container">
     {% if error %}
     <div class="alert alert-danger">{{ error }}</div>
     {% endif %}
 
     <form method="POST" action="{{ url_for('search') }}" class="mb-4">
-        <div class="mb-3">
+        <!-- Main Search Section -->
-            <label for="usernames" class="form-label">Usernames to Search</label>
+        <div class="main-search-section">
+            <div class="mb-4">
+                <label for="usernames" class="form-label h5">Usernames to Search</label>
                 <textarea class="form-control" id="usernames" name="usernames" rows="3" required
-                      placeholder="Enter one or more usernames (separated by spaces or commas)"></textarea>
+                    placeholder="Enter one or more usernames (separated by spaces or commas)..."></textarea>
             </div>
 
-        <div class="mb-3">
+            <div class="row align-items-center">
-            <label for="top_sites" class="form-label">Number of Top Sites to Check</label>
+                <div class="col-md-6">
-            <input type="number" class="form-control" id="top_sites" name="top_sites" value="500" min="1" max="10000">
+                    <label for="top_sites" class="form-label">Number of Sites</label>
+                    <input type="number" class="form-control" id="top_sites" name="top_sites" min="1" max="10000"
+                        placeholder="Default: 500">
                 </div>
-        
+                <div class="col-md-6">
-        <div class="mb-3">
                     <label for="timeout" class="form-label">Timeout (seconds)</label>
-            <input type="number" class="form-control" id="timeout" name="timeout" value="30" min="1" max="120">
+                    <input type="number" class="form-control" id="timeout" name="timeout" min="1"
+                        placeholder="Default: 30">
+                </div>
+                <div class="col-12 mt-3">
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="all_sites" name="all_sites"
+                            onchange="document.getElementById('top_sites').disabled = this.checked;">
+                        <label class="form-check-label" for="all_sites">Search All Sites</label>
+                    </div>
+                </div>
+            </div>
         </div>
 
+        <!-- Filters Section -->
+        <div class="mb-4">
+            <div class="section-header" onclick="toggleSection('filters')">
+                <h5 class="mb-0">Filters</h5>
+                <span class="chevron"></span>
+            </div>
+            <div id="filters" class="section-content">
+                <div class="mb-3 site-input-container">
+                    <label for="site" class="form-label">Specify Sites (Optional)</label>
+                    <input type="text" class="form-control site-input" id="siteInput"
+                        placeholder="Type to search for sites..." list="siteOptions">
+                    <input type="hidden" id="site" name="site">
+                    <datalist id="siteOptions">
+                        {% for site in site_options %}
+                        <option value="{{ site }}">
+                            {% endfor %}
+                    </datalist>
+                    <div class="selected-sites" id="selectedSites"></div>
+                </div>
+
+                <div class="mb-3">
+                    <label class="form-label">Tags (click to select)</label>
+                    <div class="tag-cloud" id="tagCloud"></div>
+                    <select multiple class="hidden-select" id="tags" name="tags">
+                        <option value="gaming">Gaming</option>
+                        <option value="coding">Coding</option>
+                        <option value="photo">Photo</option>
+                        <option value="music">Music</option>
+                        <option value="blog">Blog</option>
+                        <option value="finance">Finance</option>
+                        <option value="freelance">Freelance</option>
+                        <option value="dating">Dating</option>
+                        <option value="tech">Tech</option>
+                        <option value="forum">Forum</option>
+                        <option value="porn">Porn</option>
+                        <option value="erotic">Erotic</option>
+                        <option value="webcam">Webcam</option>
+                        <option value="video">Video</option>
+                        <option value="movies">Movies</option>
+                        <option value="hacking">Hacking</option>
+                        <option value="art">Art</option>
+                        <option value="discussion">Discussion</option>
+                        <option value="sharing">Sharing</option>
+                        <option value="writing">Writing</option>
+                        <option value="wiki">Wiki</option>
+                        <option value="business">Business</option>
+                        <option value="shopping">Shopping</option>
+                        <option value="sport">Sport</option>
+                        <option value="books">Books</option>
+                        <option value="news">News</option>
+                        <option value="documents">Documents</option>
+                        <option value="travel">Travel</option>
+                        <option value="maps">Maps</option>
+                        <option value="hobby">Hobby</option>
+                        <option value="apps">Apps</option>
+                        <option value="classified">Classified</option>
+                        <option value="career">Career</option>
+                        <option value="geosocial">Geosocial</option>
+                        <option value="streaming">Streaming</option>
+                        <option value="education">Education</option>
+                        <option value="networking">Networking</option>
+                        <option value="torrent">Torrent</option>
+                        <option value="science">Science</option>
+                        <option value="medicine">Medicine</option>
+                        <option value="reading">Reading</option>
+                        <option value="stock">Stock</option>
+                        <option value="messaging">Messaging</option>
+                        <option value="trading">Trading</option>
+                        <option value="links">Links</option>
+                        <option value="fashion">Fashion</option>
+                        <option value="tasks">Tasks</option>
+                        <option value="military">Military</option>
+                        <option value="auto">Auto</option>
+                        <option value="gambling">Gambling</option>
+                        <option value="cybercriminal">Cybercriminal</option>
+                        <option value="review">Review</option>
+                        <option value="bookmarks">Bookmarks</option>
+                        <option value="design">Design</option>
+                        <option value="tor">Tor</option>
+                        <option value="i2p">I2P</option>
+                        <option value="q&a">Q&A</option>
+                        <option value="crypto">Crypto</option>
+                        <option value="ai">AI</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <!-- Advanced Options Section -->
+        <div class="mb-4">
+            <div class="section-header" onclick="toggleSection('advanced')">
+                <h5 class="mb-0">Advanced Options</h5>
+                <span class="chevron"></span>
+            </div>
+            <div id="advanced" class="section-content">
                 <div class="mb-3 form-check">
-            <input type="checkbox" class="form-check-input" id="use_cookies" name="use_cookies">
+                    <input type="checkbox" class="form-check-input" id="permute" name="permute">
-            <label class="form-check-label" for="use_cookies">Use Cookies File</label>
+                    <label class="form-check-label" for="permute">Enable Username Permutations</label>
+                </div>
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="disable_recursive_search"
+                        name="disable_recursive_search">
+                    <label class="form-check-label" for="disable_recursive_search">Disable Recursive Search</label>
+                </div>
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="disable_extracting" name="disable_extracting">
+                    <label class="form-check-label" for="disable_extracting">Disable Information Extraction</label>
+                </div>
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="with_domains" name="with_domains">
+                    <label class="form-check-label" for="with_domains">Check Domains</label>
+                </div>
+                <div class="mb-3">
+                    <label for="proxy" class="form-label">Proxy URL</label>
+                    <input type="text" class="form-control" id="proxy" name="proxy"
+                        placeholder="e.g., 127.0.0.1:1080">
+                </div>
+                <div class="mb-3">
+                    <label for="tor_proxy" class="form-label">TOR Proxy URL</label>
+                    <input type="text" class="form-control" id="tor_proxy" name="tor_proxy"
+                        placeholder="Default: 127.0.0.1:9050">
+                </div>
+                <div class="mb-3">
+                    <label for="i2p_proxy" class="form-label">I2P Proxy URL</label>
+                    <input type="text" class="form-control" id="i2p_proxy" name="i2p_proxy"
+                        placeholder="Default: 127.0.0.1:4444">
+                </div>
+            </div>
         </div>
 
-        <button type="submit" class="btn btn-primary">Search</button>
+        <button type="submit" class="btn search-button" style="background-color: rgb(249, 207, 0); color: black;">
+            Start Search
+        </button>
     </form>
 </div>
+
+<script>
+    function toggleSection(sectionId) {
+        const content = document.getElementById(sectionId);
+        const header = content.previousElementSibling;
+        content.classList.toggle('show');
+        header.querySelector('.chevron').classList.toggle('collapsed');
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Tag cloud functionality
+        const tagCloud = document.getElementById('tagCloud');
+        const hiddenSelect = document.getElementById('tags');
+        const allTags = Array.from(hiddenSelect.options).map(opt => ({
+            value: opt.value,
+            label: opt.text
+        }));
+
+        allTags.forEach(tag => {
+            const tagElement = document.createElement('span');
+            tagElement.className = 'tag';
+            tagElement.textContent = tag.label;
+            tagElement.dataset.value = tag.value;
+
+            tagElement.addEventListener('click', function () {
+                const isSelected = this.classList.toggle('selected');
+                const option = Array.from(hiddenSelect.options).find(opt => opt.value === tag.value);
+                if (option) {
+                    option.selected = isSelected;
+                }
+            });
+
+            tagCloud.appendChild(tagElement);
+        });
+
+        // Site selection functionality
+        const siteInput = document.getElementById('siteInput');
+        const hiddenInput = document.getElementById('site');
+        const selectedSitesContainer = document.getElementById('selectedSites');
+        let selectedSites = new Set();
+
+        function updateHiddenInput() {
+            hiddenInput.value = Array.from(selectedSites).join(',');
+        }
+
+        function addSite(site) {
+            if (site && !selectedSites.has(site)) {
+                selectedSites.add(site);
+                updateHiddenInput();
+                const siteElement = document.createElement('span');
+                siteElement.className = 'selected-site';
+                siteElement.innerHTML = `${site}<span class="remove-site" data-site="${site}">&times;</span>`;
+                selectedSitesContainer.appendChild(siteElement);
+            }
+        }
+
+        function removeSite(site) {
+            selectedSites.delete(site);
+            updateHiddenInput();
+            const siteElements = selectedSitesContainer.querySelectorAll('.selected-site');
+            siteElements.forEach(el => {
+                if (el.querySelector('.remove-site').dataset.site === site) {
+                    el.remove();
+                }
+            });
+        }
+
+        siteInput.addEventListener('change', function (e) {
+            const value = this.value.trim();
+            if (value) {
+                addSite(value);
+                this.value = '';
+            }
+        });
+
+        selectedSitesContainer.addEventListener('click', function (e) {
+            if (e.target.classList.contains('remove-site')) {
+                removeSite(e.target.dataset.site);
+            }
+        });
+
+        siteInput.addEventListener('paste', function (e) {
+            e.preventDefault();
+            const paste = (e.clipboardData || window.clipboardData).getData('text');
+            const sites = paste.split(',').map(site => site.trim()).filter(site => site);
+            sites.forEach(addSite);
+        });
+
+        const form = document.querySelector('form');
+        form.addEventListener('submit', function (e) {
+            const selectedTags = Array.from(tagCloud.querySelectorAll('.tag.selected'));
+            Array.from(hiddenSelect.options).forEach(opt => {
+                opt.selected = selectedTags.some(tag => tag.dataset.value === opt.value);
+            });
+            updateHiddenInput();
+        });
+    });
+</script>
 {% endblock %}

maigret/web/templates/results.html

@@ -1,8 +1,84 @@
 {% extends "base.html" %}
 {% block content %}
-<div class="form-container">
+<style>
-    <h1 class="mb-4">Search Results</h1>
+    .tag-badge {
+       background-color: #214e7b;
+       padding: 2px 8px;
+       border-radius: 12px;
+       font-size: 14px;
+       display: inline-flex;
+       align-items: center;
+       gap: 5px;
+       margin: 2px;
+       color: white;
+    }
     
+    .profile-list {
+       list-style: none;
+       padding: 0;
+    }
+    
+    .profile-item {
+       margin-bottom: 10px;
+       padding: 10px;
+       display: flex;
+       justify-content: space-between;
+       align-items: center;
+       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .profile-link {
+       display: flex;
+       align-items: center;
+       gap: 8px;
+    }
+    
+    .favicon {
+       width: 16px;
+       height: 16px;
+    }
+    
+    .tag-container {
+       display: flex;
+       flex-wrap: wrap;
+       gap: 5px;
+       justify-content: flex-end;
+    }
+    
+    .report-container {
+       margin-bottom: 1rem;
+    }
+    
+    .report-header {
+       cursor: pointer;
+       padding: 1rem;
+       background: rgba(255, 255, 255, 0.05);
+       border-radius: 4px;
+       margin-bottom: 0.5rem;
+    }
+    
+    .report-content {
+       display: none;
+    }
+    
+    .report-content.show {
+       display: block;
+    }
+    
+    .chevron::after {
+       content: '▼';
+       margin-left: 8px;
+       transition: transform 0.2s;
+    }
+    
+    .chevron.collapsed::after {
+       transform: rotate(-90deg);
+    }
+    </style>
+
+    <div class="form-container">
+        <h1 class="mb-4">Search Results</h1>
+        <!-- Flash messages -->
         {% with messages = get_flashed_messages() %}
             {% if messages %}
                 {% for message in messages %}
@@ -11,9 +87,8 @@
             {% endif %}
         {% endwith %}
      
-    <p>The search has completed. Below are the results:</p>
+        <p>The search has completed. <a href="{{ url_for('index')}}">Back to start.</a></p>
      
-    <!-- Display the combined graph if available -->
         {% if graph_file %}
         <h3>Combined Graph</h3>
         <iframe src="{{ url_for('download_report', filename=graph_file) }}" style="width:100%; height:600px; border:none;"></iframe>
@@ -21,13 +96,18 @@
      
         <hr>
      
-    <!-- Display individual reports -->
         {% if individual_reports %}
         <h3>Individual Reports</h3>
-        <ul class="list-group">
+        <div class="reports-list">
             {% for report in individual_reports %}
-            <li class="list-group-item">
+            <div class="report-container">
-                <h5>{{ report.username }}</h5>
+                <div class="report-header" onclick="toggleReport(this)" data-target="report-{{ loop.index }}">
+                    <h5 class="mb-0 d-flex align-items-center">
+                        <span>{{ report.username }}</span>
+                        <span class="chevron"></span>
+                    </h5>
+                </div>
+                <div id="report-{{ loop.index }}" class="report-content">
                     <p>
                         <a href="{{ url_for('download_report', filename=report.csv_file) }}">CSV Report</a> |
                         <a href="{{ url_for('download_report', filename=report.json_file) }}">JSON Report</a> |
@@ -36,21 +116,41 @@
                     </p>
                     {% if report.claimed_profiles %}
                     <strong>Claimed Profiles:</strong>
-                    <ul>
+                    <ul class="profile-list">
                         {% for profile in report.claimed_profiles %}
-                        <li>
+                        <li class="profile-item">
-                            <a href="{{ profile.url }}" target="_blank">{{ profile.site_name }}</a> (Tags: {{ profile.tags|join(', ') }})
+                            <div class="profile-link">
+                                <img class="favicon" src="https://www.google.com/s2/favicons?domain={{ profile.url }}" onerror="this.style.display='none'" alt="">
+                                <a href="{{ profile.url }}" target="_blank">{{ profile.site_name }}</a>
+                            </div>
+                            {% if profile.tags %}
+                            <div class="tag-container">
+                                {% for tag in profile.tags %}
+                                <span class="tag-badge">{{ tag }}</span>
+                                {% endfor %}
+                            </div>
+                            {% endif %}
                         </li>
                         {% endfor %}
                     </ul>
                     {% else %}
                     <p>No claimed profiles found.</p>
                     {% endif %}
-            </li>
+                </div>
+            </div>
             {% endfor %}
-        </ul>
+        </div>
         {% else %}
         <p>No individual reports available.</p>
         {% endif %}
-</div>
+     </div>
+     
+     <script>
+     function toggleReport(header) {
+        const reportId = header.getAttribute('data-target');
+        const content = document.getElementById(reportId);
+        content.classList.toggle('show');
+        header.querySelector('.chevron').classList.toggle('collapsed');
+     }
+     </script>
 {% endblock %}