Ninjaserver/public/email-templates

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:

/* Neon-Blau ändern */
#00d4ff → #deine-farbe
#0891b2 → #deine-farbe-dunkler

Logo anpassen

Ändere den Logo-Text in der HTML-Datei:

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