refactoring

.gitignore

@@ -1 +1,2 @@
 __pycache__/helper.cpython-313.pyc
+backend/zip_cache.json

README.md

@@ -1,11 +1,352 @@
-# kleinanzeigen-boosted
+# Kleinanzeigen Boosted
 
-***WIP***
+A web-based map visualization tool for searching and exploring listings from kleinanzeigen.de with real-time geographic display on OpenStreetMap.
+
+## Features
+
+- 🗺️ Interactive map visualization
+- 🔍 Advanced search with price range (more options in future)
+- 📍 Automatic geocoding of listings via Nominatim API
+- ⚡ Parallel scraping with concurrent workers
+- 📊 Prometheus-compatible metrics endpoint
+- 🎯 Real-time progress tracking with ETA
+- 💾 ZIP code caching to minimize API calls
+- 🌐 User location display on map
+
+## Architecture
+
+**Backend**: Flask API server with multi-threaded scraping
+**Frontend**: Vanilla JavaScript with Leaflet.js for maps
+**Data Sources**: kleinanzeigen.de, OpenStreetMap/Nominatim
 
 ## Requirements
 
-```
+### Python Packages
+
+```bash
 pip install flask flask-cors beautifulsoup4 lxml urllib3 requests
 ```
 
+### System Requirements
 
+- Python 3.8+
+- nginx (for production deployment)
+
+## Installation
+
+### 1. Create System User
+
+```bash
+mkdir -p /home/kleinanzeigenscraper/
+useradd --system -K MAIL_DIR=/dev/null kleinanzeigenscraper -d /home/kleinanzeigenscraper
+chown -R kleinanzeigenscraper:kleinanzeigenscraper /home/kleinanzeigenscraper
+```
+
+### 2. Clone Repository
+
+```bash
+cd /home/kleinanzeigenscraper/
+mkdir git
+cd git
+git clone https://git.mosad.xyz/localhorst/kleinanzeigen-boosted.git
+cd kleinanzeigen-boosted
+git checkout main
+```
+
+### 3. Install Dependencies
+
+```bash
+pip install flask flask-cors beautifulsoup4 lxml urllib3 requests
+```
+
+### 4. Configure Application
+
+Create `config.json`:
+
+```json
+{
+  "server": {
+    "host": "127.0.0.1",
+    "port": 5000,
+    "debug": false
+  },
+  "scraping": {
+    "session_timeout": 300,
+    "listings_per_page": 25,
+    "max_workers": 5,
+    "min_workers": 2,
+    "rate_limit_delay": 0.5,
+    "geocoding_delay": 1.0
+  },
+  "cache": {
+    "zip_cache_file": "zip_cache.json"
+  },
+  "apis": {
+    "nominatim": {
+      "url": "https://nominatim.openstreetmap.org/search",
+      "user_agent": "kleinanzeigen-scraper"
+    },
+    "kleinanzeigen": {
+      "base_url": "https://www.kleinanzeigen.de"
+    }
+  },
+  "user_agents": [
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+  ]
+}
+```
+
+### 5. Create Systemd Service
+
+Create `/lib/systemd/system/kleinanzeigenscraper.service`:
+
+```ini
+[Unit]
+Description=Kleinanzeigen Scraper API
+After=network.target systemd-networkd-wait-online.service
+
+[Service]
+Type=simple
+User=kleinanzeigenscraper
+WorkingDirectory=/home/kleinanzeigenscraper/git/kleinanzeigen-boosted/backend/
+ExecStart=/usr/bin/python3 scrape_proxy.py
+Restart=on-failure
+RestartSec=10
+StandardOutput=append:/var/log/kleinanzeigenscraper.log
+StandardError=append:/var/log/kleinanzeigenscraper.log
+
+[Install]
+WantedBy=multi-user.target
+```
+
+### 6. Enable and Start Service
+
+```bash
+systemctl daemon-reload
+systemctl enable kleinanzeigenscraper.service
+systemctl start kleinanzeigenscraper.service
+systemctl status kleinanzeigenscraper.service
+```
+
+### 7. Configure nginx Reverse Proxy
+
+Create `/etc/nginx/sites-available/kleinanzeigenscraper`:
+
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+
+    # Redirect HTTP to HTTPS
+    return 301 https://$server_name$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    server_name your-domain.com;
+
+    ssl_certificate /path/to/ssl/cert.pem;
+    ssl_certificate_key /path/to/ssl/key.pem;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    location / {
+        proxy_pass http://127.0.0.1:5000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_read_timeout 300;
+    }
+
+    location /api/ {
+        proxy_pass http://127.0.0.1:5000/api/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_read_timeout 300;
+    }
+}
+```
+
+Enable site:
+
+```bash
+ln -s /etc/nginx/sites-available/kleinanzeigenscraper /etc/nginx/sites-enabled/
+nginx -t
+systemctl reload nginx
+```
+
+## API Endpoints
+
+### `POST /api/search`
+Start a new search session.
+
+**Request Body:**
+```json
+{
+  "search_term": "Fahrrad",
+  "num_listings": 25,
+  "min_price": 0,
+  "max_price": 1000
+}
+```
+
+**Response:**
+```json
+{
+  "session_id": "uuid-string",
+  "total": 25
+}
+```
+
+### `GET /api/scrape/<session_id>`
+Get the next scraped listing from an active session.
+
+**Response:**
+```json
+{
+  "complete": false,
+  "listing": {
+    "title": "Mountain Bike",
+    "price": 450,
+    "id": 123456,
+    "zip_code": "76593",
+    "address": "Gernsbach",
+    "date_added": "2025-11-20",
+    "image": "https://...",
+    "url": "https://...",
+    "lat": 48.7634,
+    "lon": 8.3344
+  },
+  "progress": {
+    "current": 5,
+    "total": 25
+  }
+}
+```
+
+### `POST /api/scrape/<session_id>/cancel`
+Cancel an active scraping session and delete cached listings.
+
+**Response:**
+```json
+{
+  "cancelled": true,
+  "message": "Session deleted"
+}
+```
+
+### `GET /api/health`
+Health check endpoint.
+
+**Response:**
+```json
+{
+  "status": "ok"
+}
+```
+
+### `GET /api/metrics`
+Prometheus-compatible metrics endpoint.
+
+**Response** (text/plain):
+```
+# HELP search_requests_total Total number of search requests
+# TYPE search_requests_total counter
+search_requests_total 42
+
+# HELP scrape_requests_total Total number of scrape requests
+# TYPE scrape_requests_total counter
+scrape_requests_total 1050
+
+# HELP uptime_seconds Application uptime in seconds
+# TYPE uptime_seconds gauge
+uptime_seconds 86400
+
+# HELP active_sessions Number of active scraping sessions
+# TYPE active_sessions gauge
+active_sessions 2
+
+# HELP cache_size Number of cached ZIP codes
+# TYPE cache_size gauge
+zip_code_cache_size 150
+
+# HELP kleinanzeigen_http_responses_total HTTP responses from kleinanzeigen.de
+# TYPE kleinanzeigen_http_responses_total counter
+kleinanzeigen_http_responses_total{code="200"} 1000
+kleinanzeigen_http_responses_total{code="error"} 5
+
+# HELP nominatim_http_responses_total HTTP responses from Nominatim API
+# TYPE nominatim_http_responses_total counter
+nominatim_http_responses_total{code="200"} 150
+```
+
+## Configuration Options
+
+### Server Configuration
+- `host`: Bind address (default: 0.0.0.0)
+- `port`: Port number (default: 5000)
+- `debug`: Debug mode (default: false)
+
+### Scraping Configuration
+- `session_timeout`: Session expiry in seconds (default: 300)
+- `listings_per_page`: Listings per page on kleinanzeigen.de (default: 25)
+- `max_workers`: Number of parallel scraping threads (default: 4)
+- `min_workers`: Number of parallel scraping threads (default: 2)
+- `rate_limit_delay`: Delay between batches in seconds (default: 0.5)
+- `geocoding_delay`: Delay between geocoding requests (default: 1.0)
+
+### Cache Configuration
+- `zip_cache_file`: Path to ZIP code cache file (default: zip_cache.json)
+
+## Monitoring
+
+View logs:
+```bash
+tail -f /var/log/kleinanzeigenscraper.log
+```
+
+Check service status:
+```bash
+systemctl status kleinanzeigenscraper.service
+```
+
+Monitor metrics (Prometheus):
+```bash
+curl http://localhost:5000/api/metrics
+```
+
+## Development
+
+Run in debug mode:
+```bash
+python3 scrape_proxy.py
+```
+
+Frontend files are located in `web/`:
+- `index.html` - Main HTML file
+- `css/style.css` - Stylesheet
+- `js/config.js` - Configuration
+- `js/map.js` - Map functions
+- `js/ui.js` - UI functions
+- `js/api.js` - API communication
+- `js/app.js` - Main application
+
+## License
+
+This project is provided as-is for educational purposes. Respect kleinanzeigen.de's terms of service and robots.txt when using this tool.
+
+## Credits
+
+Built with:
+- Flask (Python web framework)
+- Leaflet.js (Interactive maps)
+- BeautifulSoup4 (HTML parsing)
+- OpenStreetMap & Nominatim (Geocoding)

backend/config.json

@@ -0,0 +1,34 @@
+{
+  "server": {
+    "host": "0.0.0.0",
+    "port": 5000,
+    "debug": false
+  },
+  "scraping": {
+    "session_timeout": 300,
+    "listings_per_page": 25,
+    "max_workers": 4,
+    "min_workers": 2,
+    "rate_limit_delay": 0.5,
+    "geocoding_delay": 1.0
+  },
+  "cache": {
+    "zip_cache_file": "zip_cache.json"
+  },
+  "apis": {
+    "nominatim": {
+      "url": "https://nominatim.openstreetmap.org/search",
+      "user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+    },
+    "kleinanzeigen": {
+      "base_url": "https://www.kleinanzeigen.de"
+    }
+  },
+  "user_agents": [
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0",
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Safari/605.1.15",
+    "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+  ]
+}

backend/scrape_proxy.py

@@ -1,10 +1,5 @@
 #!/usr/bin/env python3
 # -*- coding: utf-8 -*-
-"""
-Flask API Server for Kleinanzeigen Scraper
-Author: Hendrik Schutter
-Date: 2025/11/24
-"""
 
 from flask import Flask, request, jsonify
 from flask_cors import CORS
@@ -24,10 +19,32 @@ CORS(app)
 
 urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
 
-# Configuration
+# Load configuration
-CACHE_FILE = "zip_cache.json"
+CONFIG_FILE = "config.json"
-SESSION_TIMEOUT = 300  # seconds
+config = {}
-LISTINGS_PER_PAGE = 25
+
+if os.path.exists(CONFIG_FILE):
+    with open(CONFIG_FILE, "r", encoding="utf-8") as f:
+        config = json.load(f)
+else:
+    print(f"ERROR: {CONFIG_FILE} not found!")
+    exit(1)
+
+# Configuration values
+CACHE_FILE = config["cache"]["zip_cache_file"]
+SESSION_TIMEOUT = config["scraping"]["session_timeout"]
+LISTINGS_PER_PAGE = config["scraping"]["listings_per_page"]
+MAX_WORKERS = config["scraping"]["max_workers"]
+MIN_WORKERS = config["scraping"]["min_workers"]
+RATE_LIMIT_DELAY = config["scraping"]["rate_limit_delay"]
+GEOCODING_DELAY = config["scraping"]["geocoding_delay"]
+USER_AGENTS = config["user_agents"]
+NOMINATIM_URL = config["apis"]["nominatim"]["url"]
+NOMINATIM_USER_AGENT = config["apis"]["nominatim"]["user_agent"]
+KLEINANZEIGEN_BASE_URL = config["apis"]["kleinanzeigen"]["base_url"]
+SERVER_HOST = config["server"]["host"]
+SERVER_PORT = config["server"]["port"]
+SERVER_DEBUG = config["server"]["debug"]
 
 # Global state
 zip_cache = {}
@@ -61,14 +78,7 @@ def cleanup_old_sessions():
 
 def get_random_user_agent():
     """Generate random user agent string"""
-    uastrings = [
+    return random.choice(USER_AGENTS)
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
-        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0",
-        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Safari/605.1.15",
-        "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
-    ]
-    return random.choice(uastrings)
 
 
 def make_soup(url):
@@ -79,14 +89,14 @@ def make_soup(url):
         r = http.request("GET", url)
         # Track response code
         status_code = str(r.status)
-        if "kleinanzeigen.de" in url:
+        if KLEINANZEIGEN_BASE_URL in url:
             metrics["kleinanzeigen_response_codes"][status_code] = (
                 metrics["kleinanzeigen_response_codes"].get(status_code, 0) + 1
             )
         return BeautifulSoup(r.data, "lxml")
     except Exception as e:
         print(f"Error fetching {url}: {e}")
-        if "kleinanzeigen.de" in url:
+        if KLEINANZEIGEN_BASE_URL in url:
             metrics["kleinanzeigen_response_codes"]["error"] = (
                 metrics["kleinanzeigen_response_codes"].get("error", 0) + 1
             )
@@ -102,7 +112,6 @@ def geocode_zip(zip_code):
         return zip_cache[zip_code]
 
     # Call Nominatim API
-    url = "https://nominatim.openstreetmap.org/search"
     params = {
         "postalcode": zip_code,
         "country": "Germany",
@@ -112,7 +121,7 @@ def geocode_zip(zip_code):
 
     try:
         response = requests.get(
-            url, params=params, headers={"user-agent": get_random_user_agent()}
+            NOMINATIM_URL, params=params, headers={"user-agent": NOMINATIM_USER_AGENT}
         )
 
         # Track response code
@@ -131,7 +140,7 @@ def geocode_zip(zip_code):
             with open(CACHE_FILE, "w", encoding="utf-8") as f:
                 json.dump(zip_cache, f, ensure_ascii=False, indent=2)
 
-            time.sleep(1)  # Respect API rate limits
+            time.sleep(GEOCODING_DELAY)
             return coords
     except Exception as e:
         print(f"Geocoding error for {zip_code}: {e}")
@@ -144,12 +153,11 @@ def geocode_zip(zip_code):
 
 def search_listings(search_term, max_pages, min_price, max_price):
     """Search for listings on kleinanzeigen.de - returns only URLs"""
-    base_url = "https://www.kleinanzeigen.de"
     found_listings = set()
 
     for page_counter in range(1, max_pages + 1):
         listing_url = (
-            base_url
+            KLEINANZEIGEN_BASE_URL
             + "/s-anbieter:privat/anzeige:angebote/preis:"
             + str(min_price)
             + ":"
@@ -173,7 +181,7 @@ def search_listings(search_term, max_pages, min_price, max_price):
             for result in results:
                 try:
                     listing_href = result.a["href"]
-                    found_listings.add(base_url + listing_href)
+                    found_listings.add(KLEINANZEIGEN_BASE_URL + listing_href)
                 except (AttributeError, KeyError):
                     pass
         except Exception as e:
@@ -284,13 +292,11 @@ def prefetch_listings_thread(session_id):
     if not session:
         return
     urls = session["urls"]
-    max_workers = random.randrange(2, 8)
+    workers = random.randrange(MIN_WORKERS, MAX_WORKERS)
 
-    print(
+    print(f"Starting prefetch for session {session_id} with {workers} parallel workers")
-        f"Starting prefetch for session {session_id} with {max_workers} parallel workers"
-    )
 
-    for i in range(0, len(urls), max_workers):
+    for i in range(0, len(urls), workers):
         # Check if session was cancelled or deleted
         if (
             session_id not in scrape_sessions
@@ -300,7 +306,7 @@ def prefetch_listings_thread(session_id):
             return
 
         # Process batch of URLs in parallel
-        batch = urls[i : i + max_workers]
+        batch = urls[i : i + workers]
         threads = []
         results = [None] * len(batch)
 
@@ -325,7 +331,7 @@ def prefetch_listings_thread(session_id):
         session["scraped"] += len(batch)
 
         # Rate limiting between batches
-        time.sleep(0.5)
+        time.sleep(RATE_LIMIT_DELAY)
 
     print(f"Prefetch complete for session {session_id}")
 
@@ -446,8 +452,6 @@ def health():
 @app.route("/api/metrics", methods=["GET"])
 def api_metrics():
     """Prometheus-style metrics endpoint"""
-    cleanup_old_sessions()
-
     uptime = time.time() - app_start_time
 
     # Build Prometheus text format
@@ -517,4 +521,4 @@ if __name__ == "__main__":
             zip_cache = json.load(f)
 
     print(f"Loaded {len(zip_cache)} ZIP codes from cache")
-    app.run(debug=True, host="0.0.0.0", port=5000, threaded=True)
+    app.run(debug=SERVER_DEBUG, host=SERVER_HOST, port=SERVER_PORT, threaded=True)

web/css/style.css

@@ -0,0 +1,526 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    height: 100vh;
+    overflow: hidden;
+    background: #1a1a1a;
+    color: #e0e0e0;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 380px 1fr;
+    grid-template-rows: auto 1fr;
+    height: calc(100vh - 60px);
+}
+
+.search-bar {
+    grid-column: 1 / -1;
+    background: #242424;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    display: grid;
+    grid-template-columns: 1fr auto auto auto auto;
+    gap: 12px;
+    align-items: end;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.form-group label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #b0b0b0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.search-bar input, .search-bar select {
+    padding: 12px;
+    border: 1px solid #3a3a3a;
+    border-radius: 6px;
+    font-size: 14px;
+    background: #2a2a2a;
+    color: #e0e0e0;
+    transition: all 0.2s;
+}
+
+.search-bar input:focus, .search-bar select:focus {
+    outline: none;
+    border-color: #0ea5e9;
+    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
+}
+
+.price-inputs {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.price-inputs input {
+    width: 120px;
+}
+
+.price-separator {
+    color: #666;
+    font-weight: 600;
+    padding: 0 4px;
+}
+
+.search-bar button {
+    padding: 12px 24px;
+    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 14px;
+    transition: all 0.2s;
+    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
+}
+
+.search-bar button:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
+}
+
+.search-bar button:disabled {
+    background: #3a3a3a;
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.search-bar button.cancel {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+}
+
+.search-bar button.cancel:hover {
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
+}
+
+.results-panel {
+    background: #1e1e1e;
+    overflow-y: auto;
+    border-right: 1px solid #2a2a2a;
+}
+
+.results-panel::-webkit-scrollbar {
+    width: 8px;
+}
+
+.results-panel::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.results-panel::-webkit-scrollbar-thumb {
+    background: #3a3a3a;
+    border-radius: 4px;
+}
+
+.results-panel::-webkit-scrollbar-thumb:hover {
+    background: #4a4a4a;
+}
+
+.results-header {
+    background: #242424;
+    padding: 20px;
+    border-bottom: 1px solid #2a2a2a;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.results-count {
+    font-weight: 700;
+    color: #e0e0e0;
+    margin-bottom: 12px;
+    font-size: 16px;
+}
+
+.progress-info {
+    background: rgba(14, 165, 233, 0.1);
+    padding: 14px;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    display: none;
+    border: 1px solid rgba(14, 165, 233, 0.2);
+}
+
+.progress-info.active {
+    display: block;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #0ea5e9 0%, #06b6d4 100%);
+    width: 0%;
+    transition: width 0.3s;
+    box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
+}
+
+.progress-text {
+    font-size: 13px;
+    color: #0ea5e9;
+    margin-bottom: 6px;
+    font-weight: 600;
+}
+
+.eta-text {
+    font-size: 11px;
+    color: #888;
+    margin-top: 6px;
+}
+
+.sort-control {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.sort-control label {
+    font-size: 12px;
+    color: #888;
+    font-weight: 600;
+}
+
+.sort-control select {
+    padding: 8px 12px;
+    border: 1px solid #3a3a3a;
+    border-radius: 6px;
+    font-size: 13px;
+    background: #2a2a2a;
+    color: #e0e0e0;
+}
+
+.result-item {
+    background: #242424;
+    margin: 12px;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid #2a2a2a;
+}
+
+.result-item:hover {
+    border-color: #0ea5e9;
+    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2);
+    transform: translateY(-2px);
+}
+
+.result-item.selected {
+    border-color: #0ea5e9;
+    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
+}
+
+.result-image {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    background: #1a1a1a;
+}
+
+.result-content {
+    padding: 14px;
+}
+
+.result-title {
+    font-weight: 600;
+    color: #e0e0e0;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.result-price {
+    color: #0ea5e9;
+    font-weight: 700;
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.result-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #888;
+}
+
+.result-location {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.result-date {
+    font-style: italic;
+}
+
+.map-container {
+    position: relative;
+    height: 100%;
+    background: #1a1a1a;
+}
+
+#map {
+    width: 100%;
+    height: 100%;
+    filter: brightness(0.9) contrast(1.1);
+}
+
+.status-bar {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #242424;
+    padding: 14px 24px;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+    z-index: 1000;
+    display: none;
+    border: 1px solid #3a3a3a;
+}
+
+.status-bar.visible {
+    display: block;
+}
+
+.status-bar.loading {
+    background: rgba(14, 165, 233, 0.2);
+    color: #0ea5e9;
+    border-color: rgba(14, 165, 233, 0.3);
+}
+
+.status-bar.success {
+    background: rgba(34, 197, 94, 0.2);
+    color: #22c55e;
+    border-color: rgba(34, 197, 94, 0.3);
+}
+
+.status-bar.error {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+    border-color: rgba(239, 68, 68, 0.3);
+}
+
+.no-results {
+    text-align: center;
+    padding: 60px 20px;
+    color: #666;
+    font-size: 14px;
+}
+
+.loading-spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 2px solid #0ea5e9;
+    border-radius: 50%;
+    border-top-color: transparent;
+    animation: spin 0.8s linear infinite;
+    margin-right: 10px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.footer {
+    background: #242424;
+    border-top: 1px solid #2a2a2a;
+    padding: 15px 20px;
+    height: 60px;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.footer-links {
+    display: flex;
+    gap: 20px;
+}
+
+.footer-links a {
+    color: #888;
+    text-decoration: none;
+    font-size: 13px;
+    transition: color 0.2s;
+}
+
+.footer-links a:hover {
+    color: #0ea5e9;
+}
+
+.footer-info {
+    color: #666;
+    font-size: 12px;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 10000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.8);
+}
+
+.modal.show {
+    display: block;
+}
+
+.modal-content {
+    background-color: #242424;
+    margin: 5% auto;
+    padding: 0;
+    border: 1px solid #3a3a3a;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 800px;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-content h2 {
+    background: #2a2a2a;
+    padding: 20px;
+    margin: 0;
+    color: #e0e0e0;
+    border-bottom: 1px solid #3a3a3a;
+}
+
+.modal-body {
+    padding: 20px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.modal-body::-webkit-scrollbar {
+    width: 8px;
+}
+
+.modal-body::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.modal-body::-webkit-scrollbar-thumb {
+    background: #3a3a3a;
+    border-radius: 4px;
+}
+
+.modal-body h3 {
+    color: #0ea5e9;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-size: 18px;
+}
+
+.modal-body h4 {
+    color: #888;
+    margin-top: 15px;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+.modal-body p {
+    margin-bottom: 10px;
+    line-height: 1.6;
+    color: #ccc;
+}
+
+.modal-body ul {
+    margin-left: 20px;
+    margin-bottom: 15px;
+}
+
+.modal-body li {
+    margin-bottom: 8px;
+    color: #ccc;
+    line-height: 1.6;
+}
+
+.modal-body a {
+    color: #0ea5e9;
+    text-decoration: none;
+}
+
+.modal-body a:hover {
+    text-decoration: underline;
+}
+
+.modal-close {
+    color: #888;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.modal-close:hover,
+.modal-close:focus {
+    color: #fff;
+}
+
+@media (max-width: 1024px) {
+    .container {
+        grid-template-columns: 320px 1fr;
+    }
+    
+    .search-bar {
+        grid-template-columns: 1fr;
+    }
+    
+    .price-inputs input {
+        width: 100px;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto 1fr;
+    }
+    
+    .results-panel {
+        max-height: 300px;
+    }
+    
+    .footer-content {
+        flex-direction: column;
+        gap: 10px;
+    }
+}

web/index.html

@@ -1,394 +1,22 @@
 <!DOCTYPE html>
 <html lang="de">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Kleinanzeigen Karten-Suche</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+    <link rel="stylesheet" href="./css/style.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            height: 100vh;
-            overflow: hidden;
-            background: #1a1a1a;
-            color: #e0e0e0;
-        }
-
-        .container {
-            display: grid;
-            grid-template-columns: 380px 1fr;
-            grid-template-rows: auto 1fr;
-            height: 100vh;
-        }
-
-        .search-bar {
-            grid-column: 1 / -1;
-            background: #242424;
-            padding: 20px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-            display: grid;
-            grid-template-columns: 1fr auto auto auto auto;
-            gap: 12px;
-            align-items: end;
-        }
-
-        .form-group {
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .form-group label {
-            font-size: 12px;
-            font-weight: 600;
-            color: #b0b0b0;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .search-bar input, .search-bar select {
-            padding: 12px;
-            border: 1px solid #3a3a3a;
-            border-radius: 6px;
-            font-size: 14px;
-            background: #2a2a2a;
-            color: #e0e0e0;
-            transition: all 0.2s;
-        }
-
-        .search-bar input:focus, .search-bar select:focus {
-            outline: none;
-            border-color: #0ea5e9;
-            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-        }
-
-        .price-inputs {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-        }
-
-        .price-inputs input {
-            width: 120px;
-        }
-
-        .price-separator {
-            color: #666;
-            font-weight: 600;
-            padding: 0 4px;
-        }
-
-        .search-bar button {
-            padding: 12px 24px;
-            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-weight: 600;
-            font-size: 14px;
-            transition: all 0.2s;
-            box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
-        }
-
-        .search-bar button:hover:not(:disabled) {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
-        }
-
-        .search-bar button:disabled {
-            background: #3a3a3a;
-            cursor: not-allowed;
-            box-shadow: none;
-        }
-
-        .search-bar button.cancel {
-            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
-        }
-
-        .search-bar button.cancel:hover {
-            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
-        }
-
-        .results-panel {
-            background: #1e1e1e;
-            overflow-y: auto;
-            border-right: 1px solid #2a2a2a;
-        }
-
-        .results-panel::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        .results-panel::-webkit-scrollbar-track {
-            background: #1a1a1a;
-        }
-
-        .results-panel::-webkit-scrollbar-thumb {
-            background: #3a3a3a;
-            border-radius: 4px;
-        }
-
-        .results-panel::-webkit-scrollbar-thumb:hover {
-            background: #4a4a4a;
-        }
-
-        .results-header {
-            background: #242424;
-            padding: 20px;
-            border-bottom: 1px solid #2a2a2a;
-            position: sticky;
-            top: 0;
-            z-index: 10;
-        }
-
-        .results-count {
-            font-weight: 700;
-            color: #e0e0e0;
-            margin-bottom: 12px;
-            font-size: 16px;
-        }
-
-        .progress-info {
-            background: rgba(14, 165, 233, 0.1);
-            padding: 14px;
-            border-radius: 6px;
-            margin-bottom: 12px;
-            display: none;
-            border: 1px solid rgba(14, 165, 233, 0.2);
-        }
-
-        .progress-info.active {
-            display: block;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
-            overflow: hidden;
-            margin-top: 10px;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #0ea5e9 0%, #06b6d4 100%);
-            width: 0%;
-            transition: width 0.3s;
-            box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
-        }
-
-        .progress-text {
-            font-size: 13px;
-            color: #0ea5e9;
-            margin-bottom: 6px;
-            font-weight: 600;
-        }
-
-        .eta-text {
-            font-size: 11px;
-            color: #888;
-            margin-top: 6px;
-        }
-
-        .sort-control {
-            display: flex;
-            gap: 8px;
-            align-items: center;
-        }
-
-        .sort-control label {
-            font-size: 12px;
-            color: #888;
-            font-weight: 600;
-        }
-
-        .sort-control select {
-            padding: 8px 12px;
-            border: 1px solid #3a3a3a;
-            border-radius: 6px;
-            font-size: 13px;
-            background: #2a2a2a;
-            color: #e0e0e0;
-        }
-
-        .result-item {
-            background: #242424;
-            margin: 12px;
-            border-radius: 8px;
-            overflow: hidden;
-            cursor: pointer;
-            transition: all 0.2s;
-            border: 1px solid #2a2a2a;
-        }
-
-        .result-item:hover {
-            border-color: #0ea5e9;
-            box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2);
-            transform: translateY(-2px);
-        }
-
-        .result-item.selected {
-            border-color: #0ea5e9;
-            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3);
-        }
-
-        .result-image {
-            width: 100%;
-            height: 180px;
-            object-fit: cover;
-            background: #1a1a1a;
-        }
-
-        .result-content {
-            padding: 14px;
-        }
-
-        .result-title {
-            font-weight: 600;
-            color: #e0e0e0;
-            margin-bottom: 10px;
-            font-size: 14px;
-            line-height: 1.4;
-        }
-
-        .result-price {
-            color: #0ea5e9;
-            font-weight: 700;
-            font-size: 20px;
-            margin-bottom: 10px;
-        }
-
-        .result-meta {
-            display: flex;
-            justify-content: space-between;
-            font-size: 12px;
-            color: #888;
-        }
-
-        .result-location {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .result-date {
-            font-style: italic;
-        }
-
-        .map-container {
-            position: relative;
-            height: 100%;
-            background: #1a1a1a;
-        }
-
-        #map {
-            width: 100%;
-            height: 100%;
-            filter: brightness(0.9) contrast(1.1);
-        }
-
-        .status-bar {
-            position: absolute;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: #242424;
-            padding: 14px 24px;
-            border-radius: 8px;
-            box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-            z-index: 1000;
-            display: none;
-            border: 1px solid #3a3a3a;
-        }
-
-        .status-bar.visible {
-            display: block;
-        }
-
-        .status-bar.loading {
-            background: rgba(14, 165, 233, 0.2);
-            color: #0ea5e9;
-            border-color: rgba(14, 165, 233, 0.3);
-        }
-
-        .status-bar.success {
-            background: rgba(34, 197, 94, 0.2);
-            color: #22c55e;
-            border-color: rgba(34, 197, 94, 0.3);
-        }
-
-        .status-bar.error {
-            background: rgba(239, 68, 68, 0.2);
-            color: #ef4444;
-            border-color: rgba(239, 68, 68, 0.3);
-        }
-
-        .no-results {
-            text-align: center;
-            padding: 60px 20px;
-            color: #666;
-            font-size: 14px;
-        }
-
-        .loading-spinner {
-            display: inline-block;
-            width: 14px;
-            height: 14px;
-            border: 2px solid #0ea5e9;
-            border-radius: 50%;
-            border-top-color: transparent;
-            animation: spin 0.8s linear infinite;
-            margin-right: 10px;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        @media (max-width: 1024px) {
-            .container {
-                grid-template-columns: 320px 1fr;
-            }
-            
-            .search-bar {
-                grid-template-columns: 1fr;
-            }
-            
-            .price-inputs input {
-                width: 100px;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto auto 1fr;
-            }
-            
-            .results-panel {
-                max-height: 300px;
-            }
-        }
-    </style>
 </head>
+
 <body>
     <div class="container">
         <div class="search-bar">
             <div class="form-group">
                 <label>Suchbegriff</label>
-                <input type="text" id="searchTerm" placeholder="z.B. Fahrrad" value="Fahrrad">
+                <input type="text" id="searchTerm" placeholder="z.B. Gravelbike">
             </div>
-            
+
             <div class="form-group">
                 <label>Preisspanne</label>
                 <div class="price-inputs">
@@ -397,7 +25,7 @@
                     <input type="number" id="maxPrice" placeholder="∞ €" value="" min="0" max="1000000000">
                 </div>
             </div>
-            
+
             <div class="form-group">
                 <label>Anzahl Inserate</label>
                 <select id="numListings">
@@ -407,7 +35,7 @@
                     <option value="250">250 Inserate</option>
                 </select>
             </div>
-            
+
             <button id="searchBtn">Suchen</button>
             <button id="cancelBtn" class="cancel" style="display: none;">Abbrechen</button>
         </div>
@@ -415,7 +43,7 @@
         <div class="results-panel">
             <div class="results-header">
                 <div class="results-count">Keine Ergebnisse</div>
-                
+
                 <div id="progressInfo" class="progress-info">
                     <div class="progress-text">Inserate werden geladen...</div>
                     <div class="progress-bar">
@@ -443,410 +71,94 @@
         </div>
     </div>
 
-    <script>
+    <footer class="footer">
-        const API_BASE_URL = 'http://localhost:5000';
+        <div class="footer-content">
-        let map;
+            <div class="footer-links">
-        let markers = [];
+                <a href="https://www.mosad.xyz/html/privacy.html" target="_blank">Impressum</a>
-        let allListings = [];
+                <a href="#" id="privacyLink">Datenschutz</a>
-        let selectedListingId = null;
+                <a href="https://git.mosad.xyz/localhorst/kleinanzeigen-boosted" target="_blank">Source Code</a>
-        let currentSessionId = null;
+            </div>
-        let scrapeStartTime = null;
+            <div class="footer-info">
-        let isScrapingActive = false;
+                kleinanzeigen.mosad.xyz © 2025
+            </div>
+        </div>
+    </footer>
 
-        // Initialize map
+    <div id="privacyModal" class="modal">
-        function initMap() {
+        <div class="modal-content">
-            map = L.map('map').setView([51.1657, 10.4515], 6);
+            <span class="modal-close">&times;</span>
-            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            <h2>Datenschutzerklärung</h2>
-                attribution: '© OpenStreetMap contributors',
+            <div class="modal-body">
-                maxZoom: 19
+                <h3>1. Verantwortlicher</h3>
-            }).addTo(map);
+                <p>Siehe <a href="https://www.mosad.xyz/html/privacy.html" target="_blank">Impressum</a></p>
 
-            // Try to get user's location
+                <h3>2. Datenverarbeitung</h3>
-            if (navigator.geolocation) {
+                <p>Diese Anwendung verarbeitet folgende Daten:</p>
-                navigator.geolocation.getCurrentPosition(
+                <ul>
-                    (position) => {
+                    <li><strong>Suchanfragen:</strong> Ihre Suchbegriffe und Filter werden temporär auf dem Server
-                        const lat = position.coords.latitude;
+                        verarbeitet, um Ergebnisse von Kleinanzeigen.de abzurufen.</li>
-                        const lon = position.coords.longitude;
+                    <li><strong>Standortdaten:</strong> Wenn Sie die Standortfreigabe in Ihrem Browser erlauben, wird
-                        
+                        Ihre Position verwendet, um sie auf der Karte anzuzeigen. Diese Daten werden nicht gespeichert
-                        // Add user location marker
+                        oder übertragen.</li>
-                        const userIcon = L.divIcon({
+                    <li><strong>Technische Daten:</strong> IP-Adresse und Zeitstempel werden in Server-Logs zu
-                            html: '<div style="width: 16px; height: 16px; background: #0ea5e9; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);"></div>',
+                        Debugging-Zwecken gespeichert.</li>
-                            className: '',
+                </ul>
-                            iconSize: [16, 16],
-                            iconAnchor: [8, 8]
-                        });
-                        
-                        L.marker([lat, lon], { icon: userIcon })
-                            .addTo(map)
-                            .bindPopup('<div style="background: #1a1a1a; color: #e0e0e0; padding: 8px;"><strong>Dein Standort</strong></div>');
-                        
-                        console.log('User location:', lat, lon);
-                    },
-                    (error) => {
-                        console.log('Geolocation error:', error.message);
-                    }
-                );
-            }
-        }
 
-        // Show status message
+                <h3>3. Externe Dienste</h3>
-        function showStatus(message, type = 'loading') {
+                <p>Diese Anwendung nutzt folgende externe Dienste:</p>
-            const statusBar = document.getElementById('statusBar');
-            statusBar.className = `status-bar visible ${type}`;
-            
-            if (type === 'loading') {
-                statusBar.innerHTML = `<span class="loading-spinner"></span>${message}`;
-            } else {
-                statusBar.textContent = message;
-            }
 
-            if (type !== 'loading') {
+                <h4>3.1 Kleinanzeigen.de</h4>
-                setTimeout(() => {
+                <p>Die Anwendung ruft öffentlich verfügbare Inserate von kleinanzeigen.de ab. Es gelten die
-                    statusBar.classList.remove('visible');
+                    Datenschutzbestimmungen von <a href="https://www.kleinanzeigen.de/datenschutzerklaerung/"
-                }, 3000);
+                        target="_blank">Kleinanzeigen.de</a>.</p>
-            }
-        }
 
-        // Update progress
+                <h4>3.2 OpenStreetMap (Leaflet.js v1.9.4)</h4>
-        function updateProgress(current, total) {
+                <p>Für die Kartendarstellung wird Leaflet.js verwendet. Kartenkacheln werden von CARTO und OpenStreetMap
-            const progressInfo = document.getElementById('progressInfo');
+                    bereitgestellt. Beim Laden der Karte werden Anfragen an diese Server gesendet, die Ihre IP-Adresse
-            const progressFill = progressInfo.querySelector('.progress-fill');
+                    enthalten können.</p>
-            const progressText = progressInfo.querySelector('.progress-text');
+                <ul>
-            const etaText = progressInfo.querySelector('.eta-text');
+                    <li>OpenStreetMap Datenschutz: <a href="https://wiki.osmfoundation.org/wiki/Privacy_Policy"
-            
+                            target="_blank">Privacy Policy</a></li>
-            if (total === 0) {
+                    <li>CARTO Datenschutz: <a href="https://carto.com/privacy/" target="_blank">Privacy Policy</a></li>
-                progressInfo.classList.remove('active');
+                </ul>
-                return;
-            }
-            
-            progressInfo.classList.add('active');
-            const percentage = (current / total) * 100;
-            progressFill.style.width = percentage + '%';
-            progressText.textContent = `Inserate werden geladen: ${current}/${total}`;
-            
-            // Calculate ETA
-            if (scrapeStartTime && current > 0) {
-                const elapsed = (Date.now() - scrapeStartTime) / 1000;
-                const avgTimePerListing = elapsed / current;
-                const remaining = total - current;
-                const etaSeconds = Math.round(avgTimePerListing * remaining);
-                
-                const minutes = Math.floor(etaSeconds / 60);
-                const seconds = etaSeconds % 60;
-                
-                if (minutes > 0) {
-                    etaText.textContent = `Noch ca. ${minutes}m ${seconds}s`;
-                } else {
-                    etaText.textContent = `Noch ca. ${seconds}s`;
-                }
-            }
-        }
 
-        // Clear all markers from map
+                <h4>3.3 Nominatim Geocoding API</h4>
-        function clearMarkers() {
+                <p>Postleitzahlen werden über die Nominatim-API von OpenStreetMap in Koordinaten umgewandelt. Die
-            markers.forEach(marker => map.removeLayer(marker));
+                    Anfragen werden zwischengespeichert, um die Anzahl der API-Aufrufe zu minimieren.</p>
-            markers = [];
+                <ul>
-        }
+                    <li>Nominatim Nutzungsbedingungen: <a
+                            href="https://operations.osmfoundation.org/policies/nominatim/" target="_blank">Usage
+                            Policy</a></li>
+                </ul>
 
-        // Add marker to map
+                <h4>3.4 CDN-Dienste (cdnjs.cloudflare.com)</h4>
-        function addMarker(listing) {
+                <p>JavaScript- und CSS-Bibliotheken werden über Cloudflare CDN geladen. Cloudflare kann dabei Ihre
-            if (!listing.lat || !listing.lon) return;
+                    IP-Adresse verarbeiten.</p>
+                <ul>
+                    <li>Cloudflare Datenschutz: <a href="https://www.cloudflare.com/privacypolicy/"
+                            target="_blank">Privacy Policy</a></li>
+                </ul>
 
-            const marker = L.marker([listing.lat, listing.lon]).addTo(map);
+                <h3>4. Browser-Speicher</h3>
-            
+                <p>Diese Anwendung nutzt <strong>keine</strong> Cookies, localStorage oder sessionStorage. Alle Daten
-            const imageHtml = listing.image 
+                    werden nur während der aktiven Sitzung im Arbeitsspeicher gehalten.</p>
-                ? `<img src="${listing.image}" style="width: 100%; max-height: 150px; object-fit: cover; margin: 8px 0;" alt="${listing.title}">` 
-                : '';
-            
-            const popupContent = `
-                <div style="min-width: 200px; 8px;">
-                    <strong style="font-size: 14px;">${listing.title}</strong><br>
-                    ${imageHtml}
-                    <span style="color: #0066cc; font-weight: bold; font-size: 16px;">${listing.price} €</span><br>
-                    <span style="color: #666; font-size: 12px;">${listing.address}</span><br>
-                    <a href="${listing.url}" target="_blank" style="color: #0066cc; text-decoration: none; font-weight: 600;">Link öffnen →</a>
-                </div>
-            `;
-            
-            marker.bindPopup(popupContent);
-            
-            marker.on('click', () => {
-                selectedListingId = listing.id;
-                highlightSelectedListing();
-            });
 
-            markers.push(marker);
+                <h3>5. Kontakt</h3>
-        }
+                <p>Bei Fragen zum Datenschutz wenden Sie sich bitte an die im <a
+                        href="https://www.mosad.xyz/html/privacy.html" target="_blank">Impressum</a> angegebenen
+                    Kontaktdaten.</p>
 
-        // Highlight selected listing in results list
+                <p><small>Stand: November 2025</small></p>
-        function highlightSelectedListing() {
+            </div>
-            document.querySelectorAll('.result-item').forEach(item => {
+        </div>
-                const itemId = parseInt(item.dataset.id);
+    </div>
-                if (itemId === selectedListingId) {
-                    item.classList.add('selected');
-                    item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                } else {
-                    item.classList.remove('selected');
-                }
-            });
-        }
 
-        // Format date
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
-        function formatDate(dateString) {
+    <script src="./js/config.js"></script>
-            if (!dateString) return 'Unbekanntes Datum';
+    <script src="./js/map.js"></script>
-            const date = new Date(dateString);
+    <script src="./js/ui.js"></script>
-            return date.toLocaleDateString('de-DE');
+    <script src="./js/api.js"></script>
-        }
+    <script src="./js/app.js"></script>
-
-        // Render results list
-        function renderResults(listings) {
-            const resultsList = document.getElementById('resultsList');
-            const resultsCount = document.querySelector('.results-count');
-            
-            if (listings.length === 0) {
-                resultsList.innerHTML = '<div class="no-results">Keine Inserate gefunden</div>';
-                resultsCount.textContent = 'Keine Ergebnisse';
-                return;
-            }
-
-            resultsCount.textContent = `${listings.length} Inserat${listings.length !== 1 ? 'e' : ''}`;
-            
-            resultsList.innerHTML = listings.map(listing => `
-                <div class="result-item" data-id="${listing.id}">
-                    ${listing.image ? `<img src="${listing.image}" class="result-image" alt="${listing.title}">` : '<div class="result-image"></div>'}
-                    <div class="result-content">
-                        <div class="result-title">${listing.title}</div>
-                        <div class="result-price">${listing.price} €</div>
-                        <div class="result-meta">
-                            <div class="result-location">
-                                <span>📍</span>
-                                <span>${listing.address || listing.zip_code}</span>
-                            </div>
-                            <div class="result-date">${formatDate(listing.date_added)}</div>
-                        </div>
-                    </div>
-                </div>
-            `).join('');
-
-            // Add click handlers
-            document.querySelectorAll('.result-item').forEach(item => {
-                item.addEventListener('click', () => {
-                    const id = parseInt(item.dataset.id);
-                    const listing = listings.find(l => l.id === id);
-                    if (listing) {
-                        selectedListingId = id;
-                        highlightSelectedListing();
-                        
-                        if (listing.lat && listing.lon) {
-                            map.setView([listing.lat, listing.lon], 13);
-                            const marker = markers.find(m => 
-                                m.getLatLng().lat === listing.lat && 
-                                m.getLatLng().lng === listing.lon
-                            );
-                            if (marker) {
-                                marker.openPopup();
-                            }
-                        }
-                        
-                        window.open(listing.url, '_blank');
-                    }
-                });
-            });
-        }
-
-        // Sort listings
-        function sortListings(listings, sortBy) {
-            const sorted = [...listings];
-            
-            switch(sortBy) {
-                case 'price-asc':
-                    sorted.sort((a, b) => a.price - b.price);
-                    break;
-                case 'price-desc':
-                    sorted.sort((a, b) => b.price - a.price);
-                    break;
-                case 'date-asc':
-                    sorted.sort((a, b) => new Date(a.date_added || 0) - new Date(b.date_added || 0));
-                    break;
-                case 'date-desc':
-                    sorted.sort((a, b) => new Date(b.date_added || 0) - new Date(a.date_added || 0));
-                    break;
-            }
-            
-            return sorted;
-        }
-
-        // Scrape next listing
-        async function scrapeNextListing() {
-            if (!currentSessionId || !isScrapingActive) {
-                console.log('Scraping stopped: session or active flag cleared');
-                return false;
-            }
-
-            try {
-                const response = await fetch(`${API_BASE_URL}/api/scrape/${currentSessionId}`);
-                const data = await response.json();
-
-                if (data.cancelled) {
-                    console.log('Scraping cancelled by backend');
-                    return false;
-                }
-
-                if (data.listing) {
-                    allListings.push(data.listing);
-                    addMarker(data.listing);
-                    
-                    // Update display
-                    const sortBy = document.getElementById('sortSelect').value;
-                    const sortedListings = sortListings(allListings, sortBy);
-                    renderResults(sortedListings);
-                    
-                    // Fit map to markers
-                    if (markers.length > 0) {
-                        const group = L.featureGroup(markers);
-                        map.fitBounds(group.getBounds().pad(0.1));
-                    }
-                }
-
-                updateProgress(data.progress.current, data.progress.total);
-
-                if (data.complete) {
-                    console.log('Scraping complete, finalizing...');
-                    isScrapingActive = false;
-                    document.getElementById('searchBtn').disabled = false;
-                    document.getElementById('cancelBtn').style.display = 'none';
-                    updateProgress(0, 0);
-                    showStatus(`Fertig! ${allListings.length} Inserate geladen`, 'success');
-                    console.log('Final listings count:', allListings.length);
-                    return false;
-                }
-
-                return true;
-
-            } catch (error) {
-                console.error('Scrape error:', error);
-                isScrapingActive = false;
-                document.getElementById('searchBtn').disabled = false;
-                document.getElementById('cancelBtn').style.display = 'none';
-                showStatus('Fehler beim Laden der Inserate', 'error');
-                return false;
-            }
-        }
-
-        // Start scraping loop
-        async function startScrapingLoop() {
-            while (isScrapingActive && currentSessionId) {
-                const shouldContinue = await scrapeNextListing();
-                if (!shouldContinue) {
-                    break;
-                }
-                await new Promise(resolve => setTimeout(resolve, 100));
-            }
-        }
-
-        // Search listings
-        async function searchListings() {
-            const searchTerm = document.getElementById('searchTerm').value.trim();
-            const minPrice = parseInt(document.getElementById('minPrice').value) || 0;
-            const maxPriceInput = document.getElementById('maxPrice').value;
-            const maxPrice = maxPriceInput ? parseInt(maxPriceInput) : 1000000000;
-            const numListings = parseInt(document.getElementById('numListings').value) || 25;
-
-            if (!searchTerm) {
-                showStatus('Bitte Suchbegriff eingeben', 'error');
-                return;
-            }
-
-            document.getElementById('searchBtn').disabled = true;
-            clearMarkers();
-            allListings = [];
-            selectedListingId = null;
-            document.getElementById('resultsList').innerHTML = '';
-
-            showStatus('Suche nach Inseraten...', 'loading');
-
-            try {
-                const response = await fetch(`${API_BASE_URL}/api/search`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        search_term: searchTerm,
-                        min_price: minPrice,
-                        max_price: maxPrice,
-                        num_listings: numListings
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error('API request failed');
-                }
-
-                const data = await response.json();
-                currentSessionId = data.session_id;
-
-                if (data.total === 0) {
-                    showStatus('Keine Inserate gefunden', 'error');
-                    document.getElementById('searchBtn').disabled = false;
-                    return;
-                }
-
-                showStatus(`${data.total} Inserate gefunden. Lade Details...`, 'success');
-                
-                // Show cancel button
-                document.getElementById('cancelBtn').style.display = 'inline-block';
-                
-                // Start scraping
-                isScrapingActive = true;
-                scrapeStartTime = Date.now();
-                updateProgress(0, data.total);
-                startScrapingLoop();
-
-            } catch (error) {
-                console.error('Search error:', error);
-                showStatus('Fehler: Verbindung zum Server fehlgeschlagen', 'error');
-                document.getElementById('searchBtn').disabled = false;
-            }
-        }
-
-        // Cancel scraping
-        async function cancelScraping() {
-            if (!currentSessionId) return;
-
-            try {
-                await fetch(`${API_BASE_URL}/api/scrape/${currentSessionId}/cancel`, {
-                    method: 'POST'
-                });
-
-                isScrapingActive = false;
-                document.getElementById('searchBtn').disabled = false;
-                document.getElementById('cancelBtn').style.display = 'none';
-                updateProgress(0, 0);
-                showStatus(`Abgebrochen. ${allListings.length} Inserate geladen`, 'error');
-
-            } catch (error) {
-                console.error('Cancel error:', error);
-            }
-        }
-
-        // Event listeners
-        document.getElementById('searchBtn').addEventListener('click', searchListings);
-        document.getElementById('cancelBtn').addEventListener('click', cancelScraping);
-        
-        document.getElementById('searchTerm').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') searchListings();
-        });
-
-        document.getElementById('sortSelect').addEventListener('change', (e) => {
-            if (allListings.length > 0) {
-                const sortedListings = sortListings(allListings, e.target.value);
-                renderResults(sortedListings);
-            }
-        });
-
-        // Initialize
-        initMap();
-    </script>
 </body>
+
 </html>

web/js/api.js

@@ -0,0 +1,151 @@
+// API communication functions
+
+async function scrapeNextListing() {
+    if (!AppState.currentSessionId || !AppState.isScrapingActive) {
+        console.log('Scraping stopped: session or active flag cleared');
+        return false;
+    }
+
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/scrape/${AppState.currentSessionId}`);
+        const data = await response.json();
+
+        if (data.cancelled) {
+            console.log('Scraping cancelled by backend');
+            return false;
+        }
+
+        if (data.listing) {
+            AppState.allListings.push(data.listing);
+            addMarker(data.listing);
+
+            // Update display
+            const sortBy = document.getElementById('sortSelect').value;
+            const sortedListings = sortListings(AppState.allListings, sortBy);
+            renderResults(sortedListings);
+
+            // Fit map to markers
+            if (AppState.markers.length > 0) {
+                const group = L.featureGroup(AppState.markers);
+                AppState.map.fitBounds(group.getBounds().pad(0.1));
+            }
+        }
+
+        updateProgress(data.progress.current, data.progress.total);
+
+        if (data.complete) {
+            console.log('Scraping complete, finalizing...');
+            AppState.isScrapingActive = false;
+            document.getElementById('searchBtn').disabled = false;
+            document.getElementById('cancelBtn').style.display = 'none';
+            updateProgress(0, 0);
+            showStatus(`Fertig! ${AppState.allListings.length} Inserate geladen`, 'success');
+            console.log('Final listings count:', AppState.allListings.length);
+            return false;
+        }
+
+        return true;
+
+    } catch (error) {
+        console.error('Scrape error:', error);
+        AppState.isScrapingActive = false;
+        document.getElementById('searchBtn').disabled = false;
+        document.getElementById('cancelBtn').style.display = 'none';
+        showStatus('Fehler beim Laden der Inserate', 'error');
+        return false;
+    }
+}
+
+async function startScrapingLoop() {
+    while (AppState.isScrapingActive && AppState.currentSessionId) {
+        const shouldContinue = await scrapeNextListing();
+        if (!shouldContinue) {
+            break;
+        }
+        await new Promise(resolve => setTimeout(resolve, 100));
+    }
+}
+
+async function searchListings() {
+    const searchTerm = document.getElementById('searchTerm').value.trim();
+    const minPrice = parseInt(document.getElementById('minPrice').value) || 0;
+    const maxPriceInput = document.getElementById('maxPrice').value;
+    const maxPrice = maxPriceInput ? parseInt(maxPriceInput) : 1000000000;
+    const numListings = parseInt(document.getElementById('numListings').value) || 25;
+
+    if (!searchTerm) {
+        showStatus('Bitte Suchbegriff eingeben', 'error');
+        return;
+    }
+
+    document.getElementById('searchBtn').disabled = true;
+    clearMarkers();
+    AppState.allListings = [];
+    AppState.selectedListingId = null;
+    document.getElementById('resultsList').innerHTML = '';
+
+    showStatus('Suche nach Inseraten...', 'loading');
+
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/search`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                search_term: searchTerm,
+                min_price: minPrice,
+                max_price: maxPrice,
+                num_listings: numListings
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error('API request failed');
+        }
+
+        const data = await response.json();
+        AppState.currentSessionId = data.session_id;
+
+        if (data.total === 0) {
+            showStatus('Keine Inserate gefunden', 'error');
+            document.getElementById('searchBtn').disabled = false;
+            return;
+        }
+
+        showStatus(`${data.total} Inserate gefunden. Lade Details...`, 'success');
+
+        // Show cancel button
+        document.getElementById('cancelBtn').style.display = 'inline-block';
+
+        // Start scraping
+        AppState.isScrapingActive = true;
+        AppState.scrapeStartTime = Date.now();
+        updateProgress(0, data.total);
+        startScrapingLoop();
+
+    } catch (error) {
+        console.error('Search error:', error);
+        showStatus('Fehler: Verbindung zum Server fehlgeschlagen', 'error');
+        document.getElementById('searchBtn').disabled = false;
+    }
+}
+
+async function cancelScraping() {
+    if (!AppState.currentSessionId) return;
+
+    try {
+        await fetch(`${API_BASE_URL}/api/scrape/${AppState.currentSessionId}/cancel`, {
+            method: 'POST'
+        });
+
+        AppState.isScrapingActive = false;
+        document.getElementById('searchBtn').disabled = false;
+        document.getElementById('cancelBtn').style.display = 'none';
+        updateProgress(0, 0);
+        showStatus(`Abgebrochen. ${AppState.allListings.length} Inserate geladen`, 'error');
+
+    } catch (error) {
+        console.error('Cancel error:', error);
+    }
+}

web/js/app.js

@@ -0,0 +1,24 @@
+// Main application initialization and event handlers
+
+// Event listeners
+document.getElementById('searchBtn').addEventListener('click', searchListings);
+document.getElementById('cancelBtn').addEventListener('click', cancelScraping);
+
+document.getElementById('searchTerm').addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') searchListings();
+});
+
+document.getElementById('sortSelect').addEventListener('change', (e) => {
+    if (AppState.allListings.length > 0) {
+        const sortedListings = sortListings(AppState.allListings, e.target.value);
+        renderResults(sortedListings);
+    }
+});
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+    initMap();
+    initPrivacyModal();
+    console.log('Kleinanzeigen Karten-Suche initialized');
+    console.log('API Base URL:', API_BASE_URL);
+});

web/js/config.js

@@ -0,0 +1,15 @@
+// Auto-detect API base URL from current domain
+const API_BASE_URL = window.location.protocol + '//' + window.location.host;
+
+//const API_BASE_URL = 'http://localhost:5000'; //used for development
+
+// Application state
+const AppState = {
+    map: null,
+    markers: [],
+    allListings: [],
+    selectedListingId: null,
+    currentSessionId: null,
+    scrapeStartTime: null,
+    isScrapingActive: false
+};

web/js/map.js

@@ -0,0 +1,70 @@
+// Map initialization and marker management
+
+function initMap() {
+    AppState.map = L.map('map').setView([51.1657, 10.4515], 6);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors',
+        maxZoom: 19,
+    }).addTo(AppState.map);
+
+    // Try to get user's location
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+            (position) => {
+                const lat = position.coords.latitude;
+                const lon = position.coords.longitude;
+
+                // Add user location marker
+                const userIcon = L.divIcon({
+                    html: '<div style="width: 16px; height: 16px; background: #0ea5e9; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);"></div>',
+                    className: '',
+                    iconSize: [16, 16],
+                    iconAnchor: [8, 8]
+                });
+
+                L.marker([lat, lon], { icon: userIcon })
+                    .addTo(AppState.map)
+                    .bindPopup('<div style="background: #1a1a1a; color: #e0e0e0; padding: 8px;"><strong>Dein Standort</strong></div>');
+
+                console.log('User location:', lat, lon);
+            },
+            (error) => {
+                console.log('Geolocation error:', error.message);
+            }
+        );
+    }
+}
+
+function clearMarkers() {
+    AppState.markers.forEach(marker => AppState.map.removeLayer(marker));
+    AppState.markers = [];
+}
+
+function addMarker(listing) {
+    if (!listing.lat || !listing.lon) return;
+
+    const marker = L.marker([listing.lat, listing.lon]).addTo(AppState.map);
+
+    const imageHtml = listing.image
+        ? `<img src="${listing.image}" style="width: 100%; max-height: 150px; object-fit: cover; margin: 8px 0;" alt="${listing.title}">`
+        : '';
+
+    const popupContent = `
+        <div style="min-width: 200px; 8px;">
+            <strong style="font-size: 14px;">${listing.title}</strong><br>
+            ${imageHtml}
+            <span style="color: #0066cc; font-weight: bold; font-size: 16px;">${listing.price} €</span><br>
+            <span style="color: #666; font-size: 12px;">${listing.address}</span><br>
+            <a href="${listing.url}" target="_blank" style="color: #0066cc; text-decoration: none; font-weight: 600;">Link öffnen →</a>
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    marker.on('click', () => {
+        AppState.selectedListingId = listing.id;
+        highlightSelectedListing();
+    });
+
+    AppState.markers.push(marker);
+}

web/js/ui.js

@@ -0,0 +1,168 @@
+// UI management functions
+
+function showStatus(message, type = 'loading') {
+    const statusBar = document.getElementById('statusBar');
+    statusBar.className = `status-bar visible ${type}`;
+
+    if (type === 'loading') {
+        statusBar.innerHTML = `<span class="loading-spinner"></span>${message}`;
+    } else {
+        statusBar.textContent = message;
+    }
+
+    if (type !== 'loading') {
+        setTimeout(() => {
+            statusBar.classList.remove('visible');
+        }, 3000);
+    }
+}
+
+function updateProgress(current, total) {
+    const progressInfo = document.getElementById('progressInfo');
+    const progressFill = progressInfo.querySelector('.progress-fill');
+    const progressText = progressInfo.querySelector('.progress-text');
+    const etaText = progressInfo.querySelector('.eta-text');
+
+    if (total === 0) {
+        progressInfo.classList.remove('active');
+        return;
+    }
+
+    progressInfo.classList.add('active');
+    const percentage = (current / total) * 100;
+    progressFill.style.width = percentage + '%';
+    progressText.textContent = `Inserate werden geladen: ${current}/${total}`;
+
+    // Calculate ETA
+    if (AppState.scrapeStartTime && current > 0) {
+        const elapsed = (Date.now() - AppState.scrapeStartTime) / 1000;
+        const avgTimePerListing = elapsed / current;
+        const remaining = total - current;
+        const etaSeconds = Math.round(avgTimePerListing * remaining);
+
+        const minutes = Math.floor(etaSeconds / 60);
+        const seconds = etaSeconds % 60;
+
+        if (minutes > 0) {
+            etaText.textContent = `Noch ca. ${minutes}m ${seconds}s`;
+        } else {
+            etaText.textContent = `Noch ca. ${seconds}s`;
+        }
+    }
+}
+
+function highlightSelectedListing() {
+    document.querySelectorAll('.result-item').forEach(item => {
+        const itemId = parseInt(item.dataset.id);
+        if (itemId === AppState.selectedListingId) {
+            item.classList.add('selected');
+            item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        } else {
+            item.classList.remove('selected');
+        }
+    });
+}
+
+function formatDate(dateString) {
+    if (!dateString) return 'Unbekanntes Datum';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('de-DE');
+}
+
+function renderResults(listings) {
+    const resultsList = document.getElementById('resultsList');
+    const resultsCount = document.querySelector('.results-count');
+
+    if (listings.length === 0) {
+        resultsList.innerHTML = '<div class="no-results">Keine Inserate gefunden</div>';
+        resultsCount.textContent = 'Keine Ergebnisse';
+        return;
+    }
+
+    resultsCount.textContent = `${listings.length} Inserat${listings.length !== 1 ? 'e' : ''}`;
+
+    resultsList.innerHTML = listings.map(listing => `
+        <div class="result-item" data-id="${listing.id}">
+            ${listing.image ? `<img src="${listing.image}" class="result-image" alt="${listing.title}">` : '<div class="result-image"></div>'}
+            <div class="result-content">
+                <div class="result-title">${listing.title}</div>
+                <div class="result-price">${listing.price} €</div>
+                <div class="result-meta">
+                    <div class="result-location">
+                        <span>📍</span>
+                        <span>${listing.address || listing.zip_code}</span>
+                    </div>
+                    <div class="result-date">${formatDate(listing.date_added)}</div>
+                </div>
+            </div>
+        </div>
+    `).join('');
+
+    // Add click handlers
+    document.querySelectorAll('.result-item').forEach(item => {
+        item.addEventListener('click', () => {
+            const id = parseInt(item.dataset.id);
+            const listing = listings.find(l => l.id === id);
+            if (listing) {
+                AppState.selectedListingId = id;
+                highlightSelectedListing();
+
+                if (listing.lat && listing.lon) {
+                    AppState.map.setView([listing.lat, listing.lon], 13);
+                    const marker = AppState.markers.find(m =>
+                        m.getLatLng().lat === listing.lat &&
+                        m.getLatLng().lng === listing.lon
+                    );
+                    if (marker) {
+                        marker.openPopup();
+                    }
+                }
+
+                window.open(listing.url, '_blank');
+            }
+        });
+    });
+}
+
+function sortListings(listings, sortBy) {
+    const sorted = [...listings];
+
+    switch (sortBy) {
+        case 'price-asc':
+            sorted.sort((a, b) => a.price - b.price);
+            break;
+        case 'price-desc':
+            sorted.sort((a, b) => b.price - a.price);
+            break;
+        case 'date-asc':
+            sorted.sort((a, b) => new Date(a.date_added || 0) - new Date(b.date_added || 0));
+            break;
+        case 'date-desc':
+            sorted.sort((a, b) => new Date(b.date_added || 0) - new Date(a.date_added || 0));
+            break;
+    }
+
+    return sorted;
+}
+
+// Privacy modal
+function initPrivacyModal() {
+    const modal = document.getElementById('privacyModal');
+    const link = document.getElementById('privacyLink');
+    const close = document.querySelector('.modal-close');
+
+    link.addEventListener('click', (e) => {
+        e.preventDefault();
+        modal.classList.add('show');
+    });
+
+    close.addEventListener('click', () => {
+        modal.classList.remove('show');
+    });
+
+    window.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            modal.classList.remove('show');
+        }
+    });
+}