first commit

2026-06-03 00:24:55 -05:00
parent 54941773dd
commit f2d5129720
4 changed files with 415 additions and 0 deletions
@@ -0,0 +1,87 @@
+# AdGuard Home Leaderboard Dashboard
+
+A Flask-based dashboard that pulls DNS query stats from AdGuard Home and displays clients as anime character tier cards.
+
+## Project Structure
+
+```
+adguard-dashboard/
+├── dashboard.py          # Flask app and AdGuard API integration
+├── dashboard.wsgi        # Apache mod_wsgi entry point
+├── templates/
+│   └── dashboard.html    # Frontend tier card UI
+├── static/
+│   └── characters/       # Anime character images (tier1_1.png, etc.)
+├── .env                  # Credentials (not committed to repo)
+└── README.md
+```
+
+## Tiers
+
+| Tier | Label          | Query Range  | Character(s)       |
+|------|----------------|--------------|--------------------|
+| 1    | Innocent       | 0 - 500      | Totoro             |
+| 2    | Rookie         | 501 - 2000   | Zenitsu            |
+| 3    | Protagonist    | 2001 - 5000  | Spike Spiegel      |
+| 4    | Hardened Fighter | 5001 - 10000 | Vegeta, Mikasa, Endeavor, Zoro, Inuyasha |
+| 5    | Final Boss     | 10001+       | Eren Yeager (Founding Titan) |
+
+Each tier randomly selects a character image on page load. Images are stored as `tier{N}_{num}.png` in `static/characters/`.
+
+## Setup
+
+### Prerequisites
+
+- Python 3
+- Apache with mod_wsgi
+- AdGuard Home instance
+
+### Installation
+
+```bash
+sudo mkdir -p /opt/adguard-dashboard/templates
+sudo mkdir -p /opt/adguard-dashboard/static/characters
+sudo python3 -m venv /opt/adguard-dashboard/venv
+sudo /opt/adguard-dashboard/venv/bin/pip install flask requests python-dotenv
+```
+
+Copy files:
+```bash
+sudo cp dashboard.py /opt/adguard-dashboard/
+sudo cp dashboard.wsgi /opt/adguard-dashboard/
+sudo cp templates/dashboard.html /opt/adguard-dashboard/templates/
+```
+
+### Environment Variables
+
+Create `/opt/adguard-dashboard/.env`:
+```
+ADGUARD_HOST=http://192.168.1.235:30004
+ADGUARD_USER=your_username
+ADGUARD_PASS=your_password
+```
+
+Lock down permissions:
+```bash
+sudo chown root:www-data /opt/adguard-dashboard/.env
+sudo chmod 640 /opt/adguard-dashboard/.env
+```
+
+### Apache Configuration
+
+Add a config in `/etc/apache2/sites-available/` pointing to `dashboard.wsgi` via mod_wsgi.
+
+To reload after changes:
+```bash
+sudo touch /opt/adguard-dashboard/dashboard.wsgi
+```
+
+## Adding Characters
+
+Drop images into `static/characters/` named `tier{N}_{num}.png` (e.g. `tier3_2.png`), then update the `TIER_CHARS` object in `dashboard.html` to include the new filename in the appropriate tier array.
+```javascript
+const TIER_CHARS = {
+    1: ['tier1_1.png', 'tier1_2.png'],
+    ...
+};
+```
@@ -0,0 +1,93 @@
+from flask import Flask, render_template, jsonify
+import requests
+import os
+from requests.auth import HTTPBasicAuth
+from dotenv import load_dotenv
+
+load_dotenv('/opt/adguard-dashboard/.env')
+
+app = Flask(__name__)
+
+ADGUARD_HOST = os.environ.get("ADGUARD_HOST")
+ADGUARD_USER = os.environ.get("ADGUARD_USER")
+ADGUARD_PASS = os.environ.get("ADGUARD_PASS")
+EXCLUDE_CLIENTS = ["192.168.1.235"]
+
+
+def get_tier(count):
+    if count <= 500:
+        return {"tier": 1, "label": "Innocent", "desc": "Blissfully unaware", "color": "#4ade80"}
+    elif count <= 2000:
+        return {"tier": 2, "label": "Rookie", "desc": "Starting to notice things", "color": "#facc15"}
+    elif count <= 5000:
+        return {"tier": 3, "label": "Protagonist", "desc": "Things are getting real", "color": "#fb923c"}
+    elif count <= 10000:
+        return {"tier": 4, "label": "Hardened Fighter", "desc": "Seen some things", "color": "#f87171"}
+    else:
+        return {"tier": 5, "label": "Final Boss", "desc": "Pure chaos energy", "color": "#c084fc"}
+
+
+def get_client_names():
+    try:
+        resp = requests.get(
+            f"{ADGUARD_HOST}/control/clients",
+            auth=HTTPBasicAuth(ADGUARD_USER, ADGUARD_PASS),
+            timeout=5
+        )
+        resp.raise_for_status()
+        data = resp.json()
+        lookup = {}
+        for client in data.get("clients", []):
+            for ip in client.get("ids", []):
+                lookup[ip] = client["name"]
+        return lookup
+    except Exception:
+        return {}
+
+
+@app.route("/")
+def index():
+    return render_template("dashboard.html")
+
+
+@app.route("/api/clients")
+def clients():
+    try:
+        names = get_client_names()
+
+        resp = requests.get(
+            f"{ADGUARD_HOST}/control/stats",
+            auth=HTTPBasicAuth(ADGUARD_USER, ADGUARD_PASS),
+            timeout=5
+        )
+        resp.raise_for_status()
+        data = resp.json()
+
+        top_clients = data.get("top_clients", [])
+
+        result = []
+        for entry in top_clients:
+            for ip, count in entry.items():
+                if ip in EXCLUDE_CLIENTS:
+                    continue
+                tier_info = get_tier(count)
+                result.append({
+                    "name": names.get(ip, ip),
+                    "ip": ip,
+                    "blocks": count,
+                    **tier_info
+                })
+
+        result.sort(key=lambda x: x["blocks"], reverse=True)
+        return jsonify({"clients": result, "error": None})
+
+    except requests.exceptions.ConnectionError:
+        return jsonify({"clients": [], "error": "Could not connect to AdGuard Home"})
+    except requests.exceptions.Timeout:
+        return jsonify({"clients": [], "error": "AdGuard Home timed out"})
+    except Exception as e:
+        return jsonify({"clients": [], "error": str(e)})
+
+
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=5001)
@@ -0,0 +1,11 @@
+import sys
+import os
+
+sys.path.insert(0, '/opt/adguard-dashboard')
+
+# Activate virtualenv
+activate_this = '/opt/adguard-dashboard/venv/bin/activate_this.py'
+with open(activate_this) as f:
+    exec(f.read(), {'__file__': activate_this})
+
+from dashboard import app as application
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AdGuard Home Leaderboard</title>
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            background: #0f0f1a;
+            color: #e2e8f0;
+            font-family: 'Segoe UI', sans-serif;
+            min-height: 100vh;
+            padding: 2rem;
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            color: #a78bfa;
+            text-shadow: 0 0 20px #a78bfa88;
+        }
+
+        .subtitle {
+            text-align: center;
+            color: #94a3b8;
+            margin-bottom: 2rem;
+            font-size: 0.9rem;
+        }
+
+        #error-msg {
+            text-align: center;
+            color: #f87171;
+            margin-bottom: 1rem;
+            display: none;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1.5rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .card {
+            background: #1e1e2e;
+            border-radius: 12px;
+            padding: 1.25rem;
+            text-align: center;
+            border: 2px solid transparent;
+            transition: transform 0.2s, box-shadow 0.2s;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+        }
+
+        .card-rank {
+            position: absolute;
+            top: 8px;
+            left: 12px;
+            font-size: 0.75rem;
+            color: #94a3b8;
+            font-weight: bold;
+        }
+
+        .card-img {
+            width: 100px;
+            height: 100px;
+            object-fit: contain;
+            margin: 0.5rem auto 0.75rem;
+            display: block;
+        }
+
+        .card-name {
+            font-size: 1rem;
+            font-weight: 700;
+            margin-bottom: 0.25rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .card-tier-label {
+            font-size: 0.8rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 0.2rem;
+        }
+
+        .card-desc {
+            font-size: 0.75rem;
+            color: #94a3b8;
+            margin-bottom: 0.75rem;
+        }
+
+        .card-count {
+            font-size: 1.4rem;
+            font-weight: 800;
+        }
+
+        .card-count-label {
+            font-size: 0.7rem;
+            color: #64748b;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .loading {
+            text-align: center;
+            color: #94a3b8;
+            padding: 4rem;
+            font-size: 1.1rem;
+        }
+
+        .refresh-btn {
+            display: block;
+            margin: 2rem auto 0;
+            padding: 0.6rem 1.5rem;
+            background: #4f46e5;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .refresh-btn:hover { background: #4338ca; }
+
+        .last-updated {
+            text-align: center;
+            color: #475569;
+            font-size: 0.75rem;
+            margin-top: 1rem;
+        }
+    </style>
+</head>
+<body>
+    <h1>AdGuard Home Leaderboard</h1>
+    <p class="subtitle">Who's been out there in these internet streets?</p>
+    <p id="error-msg"></p>
+    <div id="grid-container" class="loading">Loading client data...</div>
+    <button class="refresh-btn" onclick="loadClients()">Refresh</button>
+    <p class="last-updated" id="last-updated"></p>
+
+    <script>
+        const TIER_CHARS = {
+            1: ['tier1_1.png', 'tier1_2.png', 'tier1_3.png', 'tier1_4.png', 'tier1_5.png'],
+            2: ['tier2_1.png', 'tier2_2.png', 'tier2_3.png', 'tier2_4.png', 'tier2_5.png'],
+            3: ['tier3_1.png', 'tier3_2.png', 'tier3_3.png', 'tier3_4.png', 'tier3_5.png'],
+            4: ['tier4_1.png', 'tier4_2.png', 'tier4_3.png', 'tier4_4.png', 'tier4_5.png'],
+            5: ['tier5_1.png']
+        };
+
+        function randomChar(tier) {
+            const options = TIER_CHARS[tier] || ['tier1_1.png'];
+            const pick = options[Math.floor(Math.random() * options.length)];
+            return `/static/characters/${pick}`;
+        }
+
+        async function loadClients() {
+            const container = document.getElementById('grid-container');
+            const errorMsg = document.getElementById('error-msg');
+            container.innerHTML = '<p class="loading">Loading client data...</p>';
+            container.className = 'loading';
+            errorMsg.style.display = 'none';
+
+            try {
+                const resp = await fetch('/api/clients');
+                const data = await resp.json();
+
+                if (data.error) {
+                    errorMsg.textContent = `Error: ${data.error}`;
+                    errorMsg.style.display = 'block';
+                }
+
+                if (!data.clients || data.clients.length === 0) {
+                    container.innerHTML = '<p class="loading">No client data available.</p>';
+                    return;
+                }
+
+                container.className = 'grid';
+                container.innerHTML = data.clients.map((client, i) => `
+                    <div class="card" style="border-color: ${client.color}; box-shadow: 0 0 12px ${client.color}44;">
+                        <span class="card-rank">#${i + 1}</span>
+                        <img
+                            class="card-img"
+                            src="${randomChar(client.tier)}"
+                            alt="${client.label}"
+                            onerror="this.style.display='none'"
+                        />
+                        <div class="card-name" title="${client.name}">${client.name}</div>
+                        <div class="card-tier-label" style="color: ${client.color};">${client.label}</div>
+                        <div class="card-desc">${client.desc}</div>
+                        <div class="card-count" style="color: ${client.color};">${client.blocks.toLocaleString()}</div>
+                        <div class="card-count-label">queries</div>
+                    </div>
+                `).join('');
+
+                document.getElementById('last-updated').textContent =
+                    `Last updated: ${new Date().toLocaleTimeString()}`;
+
+            } catch (err) {
+                errorMsg.textContent = `Failed to fetch data: ${err.message}`;
+                errorMsg.style.display = 'block';
+                container.innerHTML = '';
+                container.className = '';
+            }
+        }
+
+        loadClients();
+        // Auto-refresh every 5 minutes
+        setInterval(loadClients, 300000);
+    </script>
+</body>
+</html>