Added Email for Supabase

public/email-templates/README.md

@@ -0,0 +1,157 @@
+# NinjaCross E-Mail Templates
+
+Diese E-Mail-Templates sind im gleichen Design wie die NinjaCross-Website erstellt und können in Supabase für die E-Mail-Authentifizierung verwendet werden.
+
+## 📁 Dateien
+
+### Welcome Email (Registrierung)
+- `welcome-email.html` - Vollständige HTML-Version mit modernem Design
+- `welcome-email-compatible.html` - **EMPFOHLEN** - E-Mail-Client-optimierte Version
+- `welcome-email-simple.html` - Vereinfachte HTML-Version für bessere E-Mail-Client-Kompatibilität
+- `welcome-email.txt` - Text-Version für E-Mail-Client-Kompatibilität
+
+### Invite User (Einladung)
+- `invite-user.html` - HTML-Version für Benutzereinladungen
+- `invite-user.txt` - Text-Version für Benutzereinladungen
+
+### Magic Link (Passwortlose Anmeldung)
+- `magic-link.html` - HTML-Version für Magic Link Anmeldung
+- `magic-link.txt` - Text-Version für Magic Link Anmeldung
+
+### Change Email Address (E-Mail-Adresse ändern)
+- `change-email.html` - HTML-Version für E-Mail-Adressen-Änderung
+- `change-email.txt` - Text-Version für E-Mail-Adressen-Änderung
+
+### Reset Password (Passwort zurücksetzen)
+- `reset-password.html` - HTML-Version für Passwort-Reset
+- `reset-password-compatible.html` - E-Mail-Client-optimierte Version
+- `reset-password-optimized.html` - **EMPFOHLEN** - Verbesserte Kompatibilität
+- `reset-password-table.html` - **MAXIMALE KOMPATIBILITÄT** - Tabellen-basiert
+- `reset-password.txt` - Text-Version für Passwort-Reset
+
+### Reauthentication (Erneute Authentifizierung)
+- `reauthentication.html` - HTML-Version für erneute Authentifizierung
+- `reauthentication.txt` - Text-Version für erneute Authentifizierung
+
+## 🚀 Supabase Setup
+
+### 1. Supabase Dashboard öffnen
+1. Gehe zu deinem Supabase-Projekt
+2. Navigiere zu **Authentication** → **Email Templates**
+
+### 2. E-Mail-Templates anpassen
+1. Wähle das entsprechende Template aus der Liste:
+   - **Confirm signup** → `welcome-email-compatible.html` / `welcome-email.txt` ⭐
+   - **Invite user** → `invite-user.html` / `invite-user.txt`
+   - **Magic Link** → `magic-link.html` / `magic-link.txt`
+   - **Change Email Address** → `change-email.html` / `change-email.txt`
+   - **Reset Password** → `reset-password-table.html` / `reset-password.txt` ⭐
+   - **Reauthentication** → `reauthentication.html` / `reauthentication.txt`
+2. Ersetze den Standard-HTML-Code mit dem Inhalt aus der entsprechenden `.html` Datei
+3. Ersetze den Standard-Text mit dem Inhalt aus der entsprechenden `.txt` Datei
+
+⭐ **Empfohlene kompatible Versionen** für bessere E-Mail-Client-Unterstützung
+
+### 3. Template-Variablen
+Die folgenden Variablen werden automatisch von Supabase ersetzt:
+- `{{ .ConfirmationURL }}` - Link zur E-Mail-Bestätigung/Aktion
+- `{{ .SiteURL }}` - URL deiner Website
+- `{{ .Email }}` - E-Mail-Adresse des Benutzers
+- `{{ .NewEmail }}` - Neue E-Mail-Adresse (nur bei Change Email)
+- `{{ .InvitedBy }}` - Name des einladenden Benutzers (nur bei Invite User)
+
+### 4. E-Mail-Provider konfigurieren
+Stelle sicher, dass dein E-Mail-Provider in Supabase konfiguriert ist:
+- **SMTP Settings** in **Authentication** → **Settings**
+- Oder verwende **Supabase Edge Functions** für erweiterte E-Mail-Funktionen
+
+## 🎨 Design-Features
+
+### Farbpalette
+- **Hintergrund:** #0a0a0f (Dunkelblau)
+- **Container:** #1e293b (Dunkelgrau)
+- **Akzent:** #00d4ff (Neon-Blau)
+- **Text:** #e2e8f0 (Hellgrau)
+
+### Typografie
+- **Font:** Inter (Google Fonts)
+- **Fallback:** Arial, sans-serif
+- **Gewichtungen:** 300, 400, 500, 600, 700
+
+### Responsive Design
+- **Mobile-optimiert** für alle Bildschirmgrößen
+- **Flexible Container** mit max-width
+- **Angepasste Schriftgrößen** für mobile Geräte
+
+## 🔧 Anpassungen
+
+### Farben ändern
+Suche und ersetze die Hex-Codes in den CSS-Styles:
+```css
+/* Neon-Blau ändern */
+#00d4ff → #deine-farbe
+#0891b2 → #deine-farbe-dunkler
+```
+
+### Logo anpassen
+Ändere den Logo-Text in der HTML-Datei:
+```html
+<div class="logo">🥷 DEIN-LOGO</div>
+```
+
+### Features hinzufügen/entfernen
+Bearbeite den `.features-section` Bereich in der HTML-Datei.
+
+## 📱 E-Mail-Client-Kompatibilität
+
+### Unterstützte Clients
+- ✅ Gmail (Web & App)
+- ✅ Outlook (Web & App)
+- ✅ Apple Mail
+- ✅ Thunderbird
+- ✅ Yahoo Mail
+
+### Fallback-Strategien
+1. **HTML-Version** für moderne Clients
+2. **Text-Version** für einfache Clients
+3. **Inline-CSS** für bessere Kompatibilität
+
+## 🧪 Testing
+
+### E-Mail-Test
+1. Erstelle einen Test-Account
+2. Registriere dich mit einer Test-E-Mail
+3. Überprüfe das E-Mail-Design in verschiedenen Clients
+
+### Browser-Test
+1. Öffne `welcome-email.html` in einem Browser
+2. Teste die responsive Darstellung
+3. Überprüfe alle Links und Buttons
+
+## 🚨 E-Mail-Client-Kompatibilität
+
+**WICHTIG:** Die ursprünglichen Templates verwenden moderne CSS-Features, die in E-Mail-Clients nicht unterstützt werden.
+
+### Empfohlene Versionen:
+- **Welcome Email:** `welcome-email-compatible.html` ⭐
+- **Reset Password:** `reset-password-table.html` ⭐ (für maximale Kompatibilität)
+
+### Was wurde optimiert:
+- ❌ **Gradients** → ✅ **Einfache Hintergrundfarben**
+- ❌ **Backdrop-Filter** → ✅ **Standard-Container**
+- ❌ **Custom Fonts** → ✅ **Arial, sans-serif**
+- ❌ **Transparente Farben** → ✅ **Hex-Codes**
+
+Siehe `EMAIL-COMPATIBILITY-GUIDE.md` und `URL-CONFIGURATION-GUIDE.md` für Details.
+
+## 📞 Support
+
+Bei Fragen oder Problemen:
+- Überprüfe die Supabase-Dokumentation
+- Teste mit verschiedenen E-Mail-Providern
+- Verwende E-Mail-Testing-Tools wie Litmus oder Email on Acid
+- Verwende die **kompatiblen Versionen** für bessere E-Mail-Client-Unterstützung
+
+---
+
+**Erstellt für NinjaCross Timer Leaderboard** 🥷