diff --git a/readme.me b/readme.me new file mode 100644 index 0000000..0f04707 --- /dev/null +++ b/readme.me @@ -0,0 +1,360 @@ +# 💸 WhoPays - Who Pays Next? + +Ein einfaches, elegantes Tool um zu entscheiden, wer als nächstes zahlt - mit Discord-Benachrichtigungen und PWA-Support! + +![Version](https://img.shields.io/badge/version-1.0.0-blue) +![License](https://img.shields.io/badge/license-MIT-green) +![PWA](https://img.shields.io/badge/PWA-Ready-purple) + +## 🎯 Features + +- ✅ **Wechsel zwischen zwei Personen** - Einfacher Button-Klick +- 🎨 **Individuelle Farben & Namen** - Komplett anpassbar +- 📝 **Grund-Angabe** - Optional Grund für den Wechsel angeben +- 🔔 **Discord-Benachrichtigungen** - Automatische Webhooks mit farbigen Embeds +- 💾 **Persistenter Speicher** - Letzter Grund bleibt nach Container-Restart erhalten +- 📱 **PWA-Support** - Als App auf Handy & Desktop installierbar +- 🎭 **Animierte Übergänge** - Smooth Hintergrund- und Profilbild-Wechsel +- 🐳 **Docker-Ready** - Einfache Deployment mit Docker Compose +- 🔒 **Reverse-Proxy kompatibel** - Funktioniert mit Nginx, Caddy, Traefik, etc. + +--- + +## 🚀 Quick Start + +### Voraussetzungen + +- Docker & Docker Compose +- Discord Webhook URL (optional) +- Profilbilder (a.png, b.png) +- Hintergrundbilder (bgA.jpg, bgB.jpg) + +### Installation + +```bash +# 1. Repository klonen oder Dateien herunterladen +git clone https://github.com/dein-username/whopays.git +cd whopays + +# 2. Bilder hinzufügen +cp deine-bilder/* img/ + +# 3. config.js anpassen (siehe Konfiguration) +nano config.js + +# 4. Docker Container starten +docker-compose up -d + +# 5. Öffne http://localhost:3000 +``` + +**Das war's!** 🎉 + +--- + +## ⚙️ Konfiguration + +### config.js - Zentrale Konfiguration + +Alle Einstellungen sind in **einer** Datei: + +```javascript +// config.js +export const CONFIG = { + A: { + name: "Alice", // Name Person A + colorHex: "#2ecc71", // Farbe im Web (Grün) + colorDiscord: 0x2ecc71, // Farbe in Discord (gleich!) + icon: "a.png", // Profilbild + background: "bgA.jpg" // Hintergrundbild + }, + B: { + name: "Bob", // Name Person B + colorHex: "#e74c3c", // Farbe im Web (Rot) + colorDiscord: 0xe74c3c, // Farbe in Discord (gleich!) + icon: "b.png", // Profilbild + background: "bgB.jpg" // Hintergrundbild + } +}; + +// Discord Webhook (optional) +export const DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/..."; + +// Öffentliche URL (für Discord Thumbnails) +export const PUBLIC_BASE_URL = "https://your-domain.com"; +``` + +### Farben ändern + +```javascript +// Blau & Orange +A: { colorHex: "#3498db", colorDiscord: 0x3498db } +B: { colorHex: "#e67e22", colorDiscord: 0xe67e22 } + +// Lila & Pink +A: { colorHex: "#9b59b6", colorDiscord: 0x9b59b6 } +B: { colorHex: "#e91e63", colorDiscord: 0xe91e63 } + +// Türkis & Gold +A: { colorHex: "#1abc9c", colorDiscord: 0x1abc9c } +B: { colorHex: "#f39c12", colorDiscord: 0xf39c12 } +``` + +**Wichtig:** Hex-Farbe muss genau 6 Zeichen haben (0-9, A-F)! + +--- + +## 📂 Projektstruktur + +``` +whopays/ +├── config.js # Zentrale Konfiguration +├── server.js # Express Server +├── package.json # Node.js Dependencies +├── Dockerfile # Docker Build Instructions +├── docker-compose.yml # Docker Compose Config +├── state.json # Persistent State (auto-generiert) +│ +└── public/ # Statische Dateien + ├── index.html # Frontend HTML + ├── script.js # Frontend JavaScript + ├── style.css # CSS Animationen + ├── manifest.json # PWA Manifest + ├── service-worker.js # PWA Service Worker + │ + └── img/ # Bilder + ├── a.png # Profilbild Person A + ├── b.png # Profilbild Person B + ├── bgA.jpg # Hintergrund Person A + ├── bgB.jpg # Hintergrund Person B + ├── icon-192.png # PWA Icon (192x192) + └── icon-512.png # PWA Icon (512x512) +``` + +--- + +## 🐳 Docker Deployment + +### docker-compose.yml + +```yaml +version: '3.8' + +services: + whopays: + build: . + ports: + - "3000:3000" + environment: + - NODE_ENV=production + - PORT=3000 + - PUBLIC_BASE_URL=https://your-domain.com + - DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/..."; + volumes: + # Bilder (persistent) + - ./img:/app/public/img + + # State (persistent über Neustarts) + - ./state.json:/app/state.json + + restart: unless-stopped +``` + +### Befehle + +```bash +# Container starten +docker-compose up -d + +# Logs anschauen +docker-compose logs -f + +# Container neustarten +docker-compose restart + +# Container stoppen +docker-compose down + +# Neu bauen (nach Code-Änderungen) +docker-compose down +docker-compose build --no-cache +docker-compose up -d +``` + +--- + +## 📱 PWA Installation + +### iOS (Safari) + +1. Öffne die Website in Safari +2. Tippe auf das **Teilen**-Symbol (⎙) +3. Scrolle und tippe **"Zum Home-Bildschirm"** +4. Tippe **"Hinzufügen"** + +### Android (Chrome) + +1. Öffne die Website in Chrome +2. Tippe auf **Menü** (⋮) +3. Tippe **"App installieren"** +4. Tippe **"Installieren"** + +### Desktop (Chrome/Edge) + +1. Öffne die Website +2. Klicke auf das **⊕ Icon** in der Adressleiste +3. Oder: Menü → "WhoPays installieren" + +**Wichtig:** PWA funktioniert nur über HTTPS (oder localhost)! + +--- + +## 🔒 Reverse Proxy Setup + +### Nginx + +```nginx +server { + listen 443 ssl http2; + server_name whopays.your-domain.com; + + # PWA Files - NO AUTH + location ~ ^/(service-worker\.js|manifest\.json)$ { + proxy_pass http://localhost:3000; + proxy_set_header X-Forwarded-Proto $scheme; + add_header Service-Worker-Allowed "/" always; + } + + # Main app + location / { + proxy_pass http://localhost:3000; + proxy_set_header Host $host; + proxy_set_header X-Forwarded-Proto $scheme; + } +} +``` + +### Caddy (Einfachste Option!) + +```caddy +whopays.your-domain.com { + reverse_proxy localhost:3000 +} +``` + +Caddy macht automatisch HTTPS mit Let's Encrypt! ✅ + +--- + +## 🔧 API Endpoints + +### GET /status + +```bash +curl http://localhost:3000/status +``` + +Response: +```json +{ + "current": "A", + "lastReason": "Pizza bestellt" +} +``` + +### POST /toggle + +```bash +curl -X POST http://localhost:3000/toggle \ + -H "Content-Type: application/json" \ + -d '{"reason":"Kaffee trinken"}' +``` + +Response: +```json +{ + "current": "B", + "name": "Bob", + "lastReason": "Kaffee trinken" +} +``` + +### GET /config + +```bash +curl http://localhost:3000/config +``` + +--- + +## 🐛 Troubleshooting + +### PWA lässt sich nicht installieren + +- Stelle sicher, dass du HTTPS verwendest +- Prüfe ob `manifest.json` erreichbar ist +- Icons müssen existieren: `icon-192.png` und `icon-512.png` + +### Discord sendet keine Benachrichtigungen + +- Prüfe Webhook URL in `config.js` +- Logs prüfen: `docker-compose logs | grep Discord` +- Stelle sicher `PUBLIC_BASE_URL` ist korrekt + +### Bilder werden nicht angezeigt + +- Prüfe ob Bilder in `/img/` existieren +- Berechtigungen: `chmod -R 755 img/` +- Container neu starten + +### Farbe in Discord ungültig (HTTP 400) + +- Hex-Farbe muss genau 6 Zeichen haben +- ✅ Richtig: `0x2ecc71` +- ❌ Falsch: `0x2ecc71c` (extra Buchstabe!) + +--- + +## 📊 Features im Detail + +### Persistent Storage + +```json +{ + "current": "A", + "lastReason": "Restaurant bezahlt" +} +``` + +Bleibt erhalten durch Docker Volume Mount. + +### Smooth Animations + +- Rotation-Animation (0.6s) +- Background-Transition (0.6s) +- Farb-Übergang (0.3s) +- Image Preloading + +--- + +## 📜 Lizenz + +MIT License - Frei nutzbar! + +--- + +## 💡 Tipps + +### Custom Domain mit Let's Encrypt + +```bash +sudo certbot --nginx -d whopays.your-domain.com +``` + +### Mehrere Instanzen + +Unterschiedliche Ports in docker-compose.yml für mehrere Apps! + +--- + +**Viel Spaß beim Entscheiden, wer zahlt!** 🎉💸 \ No newline at end of file