Update to v2.1.1 - Clean Design

2025-11-21 22:39:41 +01:00 · 2025-11-21 22:39:41 +01:00 · 709f362194
commit 709f362194
parent de25b3e19c
20 changed files with 8127 additions and 191 deletions
--- a/readme.md
+++ b/readme.md
@ -1,275 +1,401 @@
-# UrNetwork Stats Dashboard - Refactored
-
+# UrNetwork Stats Dashboard - Enhanced Multi-Account Edition v2.1

 Hits - [demo](http://38.242.156.120:90) | [![Hits](https://hits.sh/38.242.156.120:90.svg)](https://hits.sh/38.242.156.120:90/)

 Hits - [repo](https://forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade) | [![Hits](https://hits.sh/forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade.svg)](https://hits.sh/forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade/)

+---

-----
+## 🌟 Quick Links
+
+- 🚀 [Quick Start Guide](QUICKSTART.md) - Get running in 5 minutes
+- 📊 [Webhook Setup Tutorial](WEBHOOK_GUIDE.md) - Discord, Slack, Telegram examples
+- 🎨 [Design Comparison](DESIGN_COMPARISON.md) - Why this design?
+- 🔄 [Upgrade Guide](UPGRADE_GUIDE.md) - Migrating from v1.0
+- 📝 [Changelog](CHANGELOG.md) - Version history
+- 🇨🇿 [Český README](README_CZ.md) - Czech documentation
+
+---

 ## 🇬🇧 English

 ### About The Project

-This project is a significantly enhanced and refactored version of the original [UrNetwork Stats Dashboard](https://github.com/techroy23/UrNetwork-Stats-Dashboard). The application is designed to track, store, and visualize statistics about data transfers (both paid and unpaid) and earnings from your UrNetwork account.
+This is a **significantly enhanced multi-account version** of the original [UrNetwork Stats Dashboard](https://github.com/techroy23/UrNetwork-Stats-Dashboard). Track unlimited UrNetwork accounts with beautiful charts, real-time updates, and webhook notifications.

-The entire application is packaged into a single `main_app.py` file for simplicity, yet it contains robust features including a web-based installer, authentication, public/private views, interactive charts, a provider map, and support for webhook notifications.
+**What's New in v2.1:**
+- 🎯 **Multi-Account Support** - Track unlimited UrNetwork accounts
+- 🎨 **Clean Design** - Cloudflare-inspired dark theme
+- 📊 **Better Charts** - White text, tooltips anywhere on chart
+- 🔐 **Separate Auth** - Admin password independent from UrNetwork
+- ⚡ **Daily Cleanup** - Auto-delete data older than 7 days
+- 📱 **Mobile Optimized** - Touch-friendly interface

-> **A Note from the Author**
->
-> I know I might get some hate for using AI to build and refactor this, but since I have access to it for free, I want to make the most of it. Plus, no offense to my friends who can code, but Gemini often explains concepts more clearly! (no hate)
-> (this readme is made by ai too.... please just dont hate me, im a stupid bitch-ass idiot that's almost braindead and im not even kidding.)
+> **Enhanced by AI:** v2.0+ developed with Claude (Anthropic) for better UX, multi-account support, and modern design.

-----
+---

-### ✨ Features
+### ✨ Key Features

-  * **🐍 All-in-One Python Script:** The entire application logic, including the frontend, is contained within a single `main_app.py` file.
-  * **🚀 Web-Based Installer:** A simple setup wizard guides you through configuring your UrNetwork API credentials on the first run.
-  * **🔐 Dual Views (Public/Private):**
-      * **Public Dashboard:** Displays summary stats, total data over time, and a world map of provider locations. Perfect for a quick overview.
-      * **Private Dashboard:** After logging in, you get access to detailed charts, a complete history of data points, webhook management, and other administrative functions.
-  * **📊 Interactive Charts:** Utilizes `Chart.js` for data visualization, including:
-      * Total data provided over time.
-      * Paid vs. Unpaid data comparison.
-      * A bar chart showing data change between intervals.
-  * **🗺️ Provider Map:** Displays the number of active providers by country on a world map using `Leaflet.js`.
-  * **⚙️ Automated Data Collection:** A scheduler (`APScheduler`) automatically fetches and saves new data from the API every 15 minutes.
-  * **🔔 Webhook Notifications:** Add your own webhook URLs (e.g., for Discord) to receive notifications with each new data sync.
-  * **🎨 Modern UI:**
-      * Styled with **Tailwind CSS**.
-      * **Light/Dark/System theme** support.
-      * Fully responsive design.
-  * **💾 Persistent Storage:** Uses `SQLAlchemy` and a `SQLite` database to store historical data.
+#### 🎯 Multi-Account Management
+- ✅ Track unlimited UrNetwork accounts simultaneously
+- ✅ Combined statistics from all accounts
+- ✅ Individual charts for each account
+- ✅ Custom nicknames for easy identification
+- ✅ Toggle accounts on/off without deletion
+- ✅ Color-coded for easy distinction

-----
+#### 📊 Advanced Visualization
+- ✅ Interactive Chart.js charts with tooltips **anywhere on chart**
+- ✅ Total data, Paid vs Unpaid, Delta charts
+- ✅ White readable text on all charts (no more squinting!)
+- ✅ World map showing provider locations
+- ✅ Real-time updates every minute

-### 🚀 Getting Started
+#### ⚙️ Automation
+- ✅ Data collection every 15 minutes
+- ✅ Daily cleanup (keeps last 7 days)
+- ✅ Webhook notifications (Discord, Slack, Telegram)
+- ✅ Device management across all accounts

-#### Prerequisites
+#### 🎨 Modern UI
+- ✅ Clean Cloudflare-inspired dark theme
+- ✅ No gradients (better chart visibility)
+- ✅ Blue accent color (#3b82f6)
+- ✅ Fully responsive (mobile, tablet, desktop)
+- ✅ Czech & English support

-  * Python 3.x
-  * Pip (Python package manager)
+---

-#### Installation
+### 🚀 Quick Start

-1.  **Clone the repository:**
+```bash
+# 1. Clone repository
+git clone https://forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade
+cd UrNetwork-Stats-Dashboard-remade

-    ```bash
-    git clone <YOUR_REPOSITORY_URL>
-    cd <FOLDER_NAME>
-    ```
+# 2. Install dependencies
+pip install Flask Flask-SQLAlchemy Flask-APScheduler requests python-dateutil

-2.  **Create and activate a virtual environment (recommended):**
+# 3. Run
+python main.py

-    ```bash
-    python -m venv venv
-    # On Windows
-    .venv\Scripts\activate
-    # On macOS / Linux
-    source venv/bin/activate
-    ```
+# 4. Open browser
+# http://localhost:90
+```

-3.  **Install requirements:**
-    Create a `requirements.txt` file with the following content:
+**First Run Setup:**
+1. Set your **admin password** (NOT your UrNetwork password!)
+2. Add your UrNetwork accounts (email + password + nickname)
+3. Done! Dashboard will start collecting data every 15 minutes

-    ```txt
-    Flask
-    Flask-SQLAlchemy
-    Flask-APScheduler
-    requests
-    python-dateutil
-    gunicorn
-    ```
+📖 **Need more details?** See [QUICKSTART.md](QUICKSTART.md)

-    Then, install them:
+---

-    ```bash
-    pip install -r requirements.txt
-    ```
+### 📊 Webhook Setup - Quick Examples

-4.  **Run the application:**
+#### Discord - Simple
+```json
+{
+  "content": "📊 **${account}**: ${total_gb} GB"
+}
+```

-    ```bash
-    python main_app.py
-    ```
+#### Discord - Rich Embed (Recommended)
+```json
+{
+  "username": "UrNetwork Bot",
+  "embeds": [{
+    "title": "⚡ ${account} - New Data!",
+    "color": 3901635,
+    "fields": [
+      {"name": "💰 Paid", "value": "`${paid_gb} GB`", "inline": true},
+      {"name": "📡 Unpaid", "value": "`${unpaid_gb} GB`", "inline": true},
+      {"name": "💾 Total", "value": "**${total_gb} GB**", "inline": false}
+    ],
+    "footer": {"text": "UrNetwork Stats"},
+    "timestamp": "${update_time}"
+  }]
+}
+```

-    *Note: For a production environment, it's better to use a WSGI server like `gunicorn`.*
+#### Telegram
+```json
+{
+  "chat_id": "YOUR_CHAT_ID",
+  "text": "📊 *${account}*\n💾 Total: ${total_gb} GB\n💰 Paid: ${paid_gb} GB\n📡 Unpaid: ${unpaid_gb} GB",
+  "parse_mode": "Markdown"
+}
+```

-    ```bash
-    gunicorn --bind 0.0.0.0:90 main_app:app
-    ```
+**Available Variables:**
+- `${account}` - Account nickname
+- `${paid_gb}` - Paid data in GB
+- `${unpaid_gb}` - Unpaid data in GB
+- `${total_gb}` - Total data in GB
+- `${update_time}` - Timestamp

-5.  **Web-based Configuration:**
+📖 **Full webhook guide:** [WEBHOOK_GUIDE.md](WEBHOOK_GUIDE.md)

-      * Open `http://localhost:90` (or your server's IP address) in your browser.
-      * You will be redirected to the setup page. Enter your UrNetwork **username** and **password**.
-      * Upon successful verification, a `.env` file will be created with your credentials and a secret key will be generated for the session. The application is now installed.
+---

-----
+### 🎨 Why This Design?

-### 🕹️ Usage
+After extensive testing, we chose a **clean Cloudflare-inspired design** because:

-After installation, the application is ready to use.
+1. **Better Chart Visibility** - Solid dark background = better contrast
+2. **Professional Look** - Mimics enterprise dashboards
+3. **No Eye Strain** - Pure colors without gradients
+4. **Performance** - No blur effects = faster rendering
+5. **Accessibility** - High contrast ratios

-  * **Public Dashboard (`/`):** The main page, accessible to anyone. It shows summary stats and the provider map. The data on this page updates automatically every minute without a page refresh.
-  * **Private Dashboard (`/dashboard`):**
-      * Click on "Owner Dashboard" to access it.
-      * Log in using the same credentials you entered during setup.
-      * Here you will find detailed charts, the full history of all measurements, and you can manage your webhooks.
-      * **Fetch Now:** Manually triggers a data fetch from the API.
-      * **Clear All Data:** Deletes all historical data from the database.
-      * **Webhook Management:** Add or remove URLs for notifications.
+**Color Scheme:**
+```css
+Background:   #0c0d0e  (Deep dark)
+Primary:      #3b82f6  (Blue)
+Text:         #e5e7eb  (Light)
+Success:      #10b981  (Green)
+Danger:       #ef4444  (Red)
+```

-----
+📖 **Design details:** [DESIGN_COMPARISON.md](DESIGN_COMPARISON.md)
+
+---
+
+### 📁 Project Structure
+
+```
+urnetwork-stats/
+├── main.py                  # Main application (use this!)
+├── instance/
+│   └── transfer_stats.db    # SQLite database (auto-created)
+├── .env                     # Config (auto-created)
+├── README.md                # This file
+├── requirements.txt         # Dependencies
+└── docs/
+    ├── QUICKSTART.md        # Quick start guide
+    ├── WEBHOOK_GUIDE.md     # Webhook examples
+    ├── UPGRADE_GUIDE.md     # Migration from v1.0
+    ├── DESIGN_COMPARISON.md # Design documentation
+    └── CHANGELOG.md         # Version history
+```
+
+---

 ### 🛠️ Tech Stack

-  * **Backend:** [Flask](https://flask.palletsprojects.com/)
-  * **Database:** [Flask-SQLAlchemy](https://flask-sqlalchemy.palletsprojects.com/) (with SQLite)
-  * **Job Scheduler:** [Flask-APScheduler](https://github.com/viniciuschiele/flask-apscheduler)
-  * **Frontend:** [Tailwind CSS](https://tailwindcss.com/), [Chart.js](https://www.chartjs.org/), [Leaflet.js](https://leafletjs.com/)
-  * **HTTP Requests:** [Requests](https://requests.readthedocs.io/en/latest/)
+- **Backend:** Flask 3.0+
+- **Database:** SQLAlchemy + SQLite
+- **Scheduler:** APScheduler
+- **Frontend:** React 18 (private dashboard)
+- **Charts:** Chart.js 4.0+
+- **Maps:** Leaflet.js 1.9+
+- **Styling:** Custom CSS (Cloudflare-inspired)

-----
+---

-### 🙏 Acknowledgements
+### 🔄 Upgrading from v1.0

-  * Original concept and project by **[techroy23](https://github.com/techroy23/UrNetwork-Stats-Dashboard)**.
-  * This version was completely refactored and extended with the help of AI.
+```bash
+# 1. Backup
+cp .env .env.backup
+cp instance/transfer_stats.db instance/transfer_stats.db.backup

-<br>
-<hr>
-<br>
+# 2. Download new version
+git pull

-## 🇨🇿 Česky
+# 3. Run migration
+python migrate.py

-### O Projektu
+# 4. Restart
+python main.py
+```

-Tento projekt je výrazně vylepšená a refaktorovaná verze původního [UrNetwork Stats Dashboard](https://github.com/techroy23/UrNetwork-Stats-Dashboard). Aplikace slouží ke sledování, ukládání a vizualizaci statistik o přenesených datech (placených i neplacených) a výdělcích z vašeho účtu v síti UrNetwork.
+Your existing account will be migrated automatically!

-Celá aplikace je zabalena do jediného souboru `main_app.py` pro jednoduchost, ale obsahuje robustní funkce, včetně webového instalátoru, autentizace, veřejného a soukromého pohledu, interaktivních grafů, mapy poskytovatelů a podpory pro webhooky.
+📖 **Full upgrade guide:** [UPGRADE_GUIDE.md](UPGRADE_GUIDE.md)

-> **Poznámka od Autora**
->
-> Vím, že asi dostanu hejt za to, že jsem na stavbu a refaktoring použil AI, ale když k tomu mám přístup zadarmo, chci toho co nejvíc využít. Navíc, nic proti mým kamarádům, co umí programovat, ale Gemini mi to často vysvětlí srozumitelněji! (no hate)
-> (Tento soubor readme je také vytvořen umělou inteligencí... Prosím, nenávidějte mě, jsem debilní idiot, který je skoro mrtvýmozkově, a to ani nepřeháním.)
+---

-----
+### 🐛 Troubleshooting

-### ✨ Klíčové Vlastnosti
+**Can't login?**
+```bash
+# Check admin password exists
+cat .env | grep ADMIN_PASSWORD

-  * **🐍 All-in-One Python Skript:** Celá logika aplikace, včetně frontendu, je obsažena v jediném souboru `main_app.py`.
-  * **🚀 Webový Instalátor:** Při prvním spuštění vás provede jednoduchým nastavením přihlašovacích údajů k UrNetwork API.
-  * **🔐 Dva Pohledy (Public/Private):**
-      * **Veřejný Dashboard:** Zobrazuje souhrnné statistiky, celkový objem dat v čase a mapu poskytovatelů po celém světě. Ideální pro rychlý přehled.
-      * **Soukromý Dashboard:** Po přihlášení získáte přístup k detailním grafům, kompletní historii měření, správě webhooků a dalším administrátorským funkcím.
-  * **📊 Interaktivní Grafy:** Využívá `Chart.js` pro vizualizaci dat, včetně:
-      * Celkový objem dat v čase.
-      * Porovnání placených vs. neplacených dat.
-      * Graf přírůstků dat mezi jednotlivými měřeními.
-  * **🗺️ Mapa Poskytovatelů:** Zobrazuje na mapě světa (pomocí `Leaflet.js`) počet aktivních poskytovatelů v jednotlivých zemích.
-  * **⚙️ Automatický Sběr Dat:** Plánovač (`APScheduler`) automaticky stahuje a ukládá data z API každých 15 minut.
-  * **🔔 Notifikace přes Webhooky:** Možnost přidat si vlastní webhooky (např. pro Discord) a dostávat notifikace při každé nové synchronizaci dat.
-  * **🎨 Moderní UI:**
-      * Stylováno pomocí **Tailwind CSS**.
-      * Podpora **Světlého/Tmavého režimu** s možností synchronizace s nastavením systému.
-      * Plně responzivní design.
-  * **💾 Perzistentní Úložiště:** Využívá `SQLAlchemy` a `SQLite` databázi pro ukládání historických dat.
+# If missing, add it
+echo "ADMIN_PASSWORD=your_password" >> .env
+```

-----
+**Charts not showing text?**
+- Make sure you're using `main.py` v2.1+ with white text

-### 🚀 Jak začít
+**Webhook not working?**
+1. Check URL is correct
+2. Validate JSON at [jsonlint.com](https://jsonlint.com/)
+3. Check logs: `tail -f nohup.out | grep webhook`

-#### Požadavky
+**Port already in use?**
+```python
+# Edit last line of main.py
+app.run(host="0.0.0.0", port=8080, debug=False)  # Change port
+```

-  * Python 3.x
-  * Pip (správce balíčků pro Python)
+---

-#### Instalace
+### 🚀 Production Deployment

-1.  **Klonujte repozitář:**
+**With Gunicorn (recommended):**
+```bash
+pip install gunicorn
+gunicorn --bind 0.0.0.0:90 --workers 4 main:app
+```

-    ```bash
-    git clone <URL_VAŠEHO_REPOZITÁŘE>
-    cd <NÁZEV_SLOŽKY>
-    ```
+**Systemd Service:**
+```ini
+[Unit]
+Description=UrNetwork Stats Dashboard
+After=network.target

-2.  **Vytvořte a aktivujte virtuální prostředí (doporučeno):**
+[Service]
+Type=simple
+User=your_user
+WorkingDirectory=/path/to/urnetwork-stats
+ExecStart=/usr/bin/python3 main.py
+Restart=always

-    ```bash
-    python -m venv venv
-    # Windows
-    .venv\Scripts\activate
-    # macOS / Linux
-    source venv/bin/activate
-    ```
+[Install]
+WantedBy=multi-user.target
+```

-3.  **Nainstalujte potřebné balíčky:**
-    Vytvořte soubor `requirements.txt` s následujícím obsahem:
+```bash
+sudo systemctl enable urnetwork-stats
+sudo systemctl start urnetwork-stats
+```

-    ```txt
-    Flask
-    Flask-SQLAlchemy
-    Flask-APScheduler
-    requests
-    python-dateutil
-    gunicorn
-    ```
+---

-    A poté je nainstalujte:
+### 📊 Screenshots

-    ```bash
-    pip install -r requirements.txt
-    ```
+**Public Dashboard:**
+- Combined statistics from all accounts
+- Individual charts per account
+- World map of providers

-4.  **Spusťte aplikaci:**
+**Private Dashboard:**
+- Overview with paid vs unpaid charts
+- Account details & leaderboard
+- Device management

-    ```bash
-    python main_app.py
-    ```
+**Account Management:**
+- Add unlimited accounts
+- Toggle on/off
+- Custom nicknames

-    *Poznámka: Pro produkční nasazení je lepší použít WSGI server jako `gunicorn`.*
+---

-    ```bash
-    gunicorn --bind 0.0.0.0:90 main_app:app
-    ```
+### 🙏 Credits

-5.  **Webová konfigurace:**
+- **Original:** [techroy23/UrNetwork-Stats-Dashboard](https://github.com/techroy23/UrNetwork-Stats-Dashboard)
+- **v2.0+ Enhanced by:** Claude (Anthropic AI)
+- **Design Inspiration:** Cloudflare, Vercel
+- **Special Thanks:** Vlastík (mxnticek) for testing

-      * Otevřete v prohlížeči adresu `http://localhost:90` (nebo IP adresu vašeho serveru).
-      * Budete přesměrováni na instalační stránku. Zde zadejte své **uživatelské jméno** a **heslo** k účtu UrNetwork.
-      * Po úspěšném ověření se automaticky vytvoří soubor `.env` s vašimi údaji a vygeneruje se tajný klíč pro session. Aplikace se tímto nainstaluje.
+---

-----
+### 📜 License

-### 🕹️ Použití
+Extends the original UrNetwork Stats Dashboard. Please respect the original author's work.

-Po instalaci je aplikace připravena k použití.
+---

-  * **Veřejný Dashboard (`/`):** Hlavní stránka dostupná komukoliv. Zobrazuje souhrnné statistiky a mapu. Data na této stránce se automaticky aktualizují každou minutu bez nutnosti obnovení stránky.
-  * **Soukromý Dashboard (`/dashboard`):**
-      * Pro přístup klikněte na "Owner Dashboard".
-      * Přihlaste se pomocí stejných údajů, které jste zadali při instalaci.
-      * Zde naleznete detailní grafy, historii všech měření a můžete spravovat webhooky.
-      * **Fetch Now:** Manuálně spustí sběr dat z API.
-      * **Clear All Data:** Smaže veškerá historická data z databáze.
-      * **Webhook Management:** Přidávejte nebo odebírejte URL pro notifikace.
+### 🔮 Roadmap (v3.0?)

-----
+- [ ] Dark/Light theme toggle
+- [ ] Email notifications
+- [ ] Export to CSV/JSON
+- [ ] Mobile app (React Native)
+- [ ] Advanced analytics
+- [ ] Docker container
+- [ ] Cost calculator

-### 🛠️ Použité Technologie
+---

-  * **Backend:** [Flask](https://flask.palletsprojects.com/)
-  * **Databáze:** [Flask-SQLAlchemy](https://flask-sqlalchemy.palletsprojects.com/) (s SQLite)
-  * **Plánovač úloh:** [Flask-APScheduler](https://github.com/viniciuschiele/flask-apscheduler)
-  * **Frontend:** [Tailwind CSS](https://tailwindcss.com/), [Chart.js](https://www.chartjs.org/), [Leaflet.js](https://leafletjs.com/)
-  * **HTTP Požadavky:** [Requests](https://requests.readthedocs.io/en/latest/)
+### 📞 Support

-----
+- **Issues:** Use GitHub/Forgejo Issues
+- **Pull Requests:** Contributions welcome!
+- **Documentation:** Help improve docs

-### 🙏 Poděkování
+---

-  * Původní koncept a projekt vytvořil **[techroy23](https://github.com/techroy23/UrNetwork-Stats-Dashboard)**.
-  * Tato verze byla kompletně refaktorována a rozšířena pomocí AI.
+## 🇨🇿 Česká Dokumentace
+
+**Kompletní český README:** [README_CZ.md](README_CZ.md)
+
+### Rychlý Start
+
+```bash
+# 1. Klonovat
+git clone https://forgejo.plainrock127.xyz/mxnticek/UrNetwork-Stats-Dashboard-remade
+cd UrNetwork-Stats-Dashboard-remade
+
+# 2. Instalace
+pip install Flask Flask-SQLAlchemy Flask-APScheduler requests python-dateutil
+
+# 3. Spustit
+python main.py
+
+# 4. Otevřít prohlížeč
+# http://localhost:90
+```
+
+### Klíčové Funkce
+
+- 🎯 **Multi-Account** - Sledujte neomezený počet účtů
+- 📊 **Vylepšené Grafy** - Bílý text, tooltip kdekoliv
+- 🔐 **Oddělená Auth** - Admin heslo nezávislé na UrNetwork
+- ⚡ **Denní Čištění** - Auto-mazání dat starších 7 dní
+- 📱 **Mobilní** - Touch-friendly rozhraní
+
+### Webhook Příklady
+
+**Discord - Jednoduchý:**
+```json
+{
+  "content": "📊 **${account}**: ${total_gb} GB"
+}
+```
+
+**Discord - Bohatý:**
+```json
+{
+  "embeds": [{
+    "title": "⚡ ${account} - Nová Data!",
+    "color": 3901635,
+    "fields": [
+      {"name": "💰 Placená", "value": "`${paid_gb} GB`", "inline": true},
+      {"name": "📡 Neplacená", "value": "`${unpaid_gb} GB`", "inline": true}
+    ]
+  }]
+}
+```
+
+**Telegram:**
+```json
+{
+  "chat_id": "VAŠE_CHAT_ID",
+  "text": "📊 *${account}*\n💾 Celkem: ${total_gb} GB",
+  "parse_mode": "Markdown"
+}
+```
+
+📖 **Kompletní návod:** [WEBHOOK_GUIDE.md](WEBHOOK_GUIDE.md)
+
+---
+
+**Version:** v2.1.1 | **Last Updated:** November 21, 2024
+
+**Made with ❤️ and 🤖 AI**