# 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** 🥷