158 lines
5.6 KiB
Markdown
158 lines
5.6 KiB
Markdown
# 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** 🥷
|