Update
This commit is contained in:
181
public/email-templates/EMAIL-COMPATIBILITY-GUIDE.md
Normal file
181
public/email-templates/EMAIL-COMPATIBILITY-GUIDE.md
Normal file
@@ -0,0 +1,181 @@
|
||||
# E-Mail-Client-Kompatibilität Guide
|
||||
|
||||
## 🚨 Problem: Farben sehen in E-Mail-Clients komisch aus
|
||||
|
||||
E-Mail-Clients sind sehr restriktiv mit CSS und unterstützen oft keine modernen Features. Hier sind die Lösungen:
|
||||
|
||||
## ❌ Was E-Mail-Clients NICHT unterstützen:
|
||||
|
||||
### CSS-Features
|
||||
- **Gradients** (`linear-gradient`, `radial-gradient`)
|
||||
- **Backdrop-Filter** (`backdrop-filter: blur()`)
|
||||
- **Box-Shadow** (komplexe Schatten)
|
||||
- **Transforms** (`transform: translateY()`)
|
||||
- **Custom Fonts** (Google Fonts, Inter)
|
||||
- **Flexbox/Grid** (begrenzte Unterstützung)
|
||||
- **CSS-Variablen** (`--custom-property`)
|
||||
|
||||
### Farben
|
||||
- **Transparente Hintergründe** (`rgba()` mit Alpha)
|
||||
- **Komplexe Farbverläufe**
|
||||
- **Moderne CSS-Farben** (HSL, etc.)
|
||||
|
||||
## ✅ E-Mail-Client-kompatible Alternativen:
|
||||
|
||||
### 1. Einfache Hintergrundfarben
|
||||
```css
|
||||
/* ❌ Nicht kompatibel */
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
|
||||
/* ✅ Kompatibel */
|
||||
background-color: #00d4ff;
|
||||
```
|
||||
|
||||
### 2. Einfache Borders
|
||||
```css
|
||||
/* ❌ Nicht kompatibel */
|
||||
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||
|
||||
/* ✅ Kompatibel */
|
||||
border: 1px solid #334155;
|
||||
```
|
||||
|
||||
### 3. Standard-Fonts
|
||||
```css
|
||||
/* ❌ Nicht kompatibel */
|
||||
font-family: 'Inter', sans-serif;
|
||||
|
||||
/* ✅ Kompatibel */
|
||||
font-family: Arial, sans-serif;
|
||||
```
|
||||
|
||||
### 4. Einfache Container
|
||||
```css
|
||||
/* ❌ Nicht kompatibel */
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
/* ✅ Kompatibel */
|
||||
background-color: #1e293b;
|
||||
```
|
||||
|
||||
## 🎨 Optimierte Farbpalette für E-Mail:
|
||||
|
||||
### Hauptfarben
|
||||
- **Hintergrund:** `#0a0a0f` (Dunkelblau)
|
||||
- **Container:** `#1e293b` (Dunkelgrau)
|
||||
- **Akzent:** `#00d4ff` (Neon-Blau)
|
||||
- **Text:** `#ffffff` (Weiß)
|
||||
- **Sekundärtext:** `#cbd5e1` (Hellgrau)
|
||||
|
||||
### Status-Farben
|
||||
- **Erfolg:** `#22c55e` (Grün)
|
||||
- **Warnung:** `#f59e0b` (Orange)
|
||||
- **Fehler:** `#ef4444` (Rot)
|
||||
- **Info:** `#00d4ff` (Blau)
|
||||
|
||||
## 📱 Responsive Design für E-Mail:
|
||||
|
||||
### Media Queries
|
||||
```css
|
||||
@media (max-width: 600px) {
|
||||
.email-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Mobile-First Approach
|
||||
- **Max-Width:** 600px für Container
|
||||
- **Padding:** Reduziert auf mobilen Geräten
|
||||
- **Schriftgrößen:** Angepasst für kleine Bildschirme
|
||||
|
||||
## 🔧 Template-Optimierungen:
|
||||
|
||||
### 1. Inline-CSS verwenden
|
||||
```html
|
||||
<div style="background-color: #1e293b; padding: 20px;">
|
||||
Inhalt
|
||||
</div>
|
||||
```
|
||||
|
||||
### 2. Tabellen-Layout für komplexe Strukturen
|
||||
```html
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="padding: 20px;">
|
||||
Inhalt
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
### 3. Fallback-Farben definieren
|
||||
```css
|
||||
background-color: #00d4ff; /* Fallback */
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2); /* Modern */
|
||||
```
|
||||
|
||||
## 📊 E-Mail-Client-Test-Matrix:
|
||||
|
||||
| Client | Gradients | Backdrop-Filter | Box-Shadow | Custom Fonts |
|
||||
|--------|-----------|-----------------|------------|--------------|
|
||||
| Gmail | ❌ | ❌ | ❌ | ❌ |
|
||||
| Outlook | ❌ | ❌ | ❌ | ❌ |
|
||||
| Apple Mail | ✅ | ❌ | ✅ | ✅ |
|
||||
| Thunderbird | ❌ | ❌ | ❌ | ❌ |
|
||||
| Yahoo Mail | ❌ | ❌ | ❌ | ❌ |
|
||||
|
||||
## 🚀 Empfohlene Template-Struktur:
|
||||
|
||||
### 1. Kompatible Versionen erstellen
|
||||
- `welcome-email-compatible.html` - E-Mail-Client-optimiert
|
||||
- `welcome-email.html` - Moderne Browser-Version
|
||||
|
||||
### 2. Fallback-Strategien
|
||||
- **HTML-Version** für moderne Clients
|
||||
- **Text-Version** für einfache Clients
|
||||
- **Kompatible HTML** für E-Mail-Clients
|
||||
|
||||
### 3. Testing
|
||||
- **Litmus** oder **Email on Acid** für E-Mail-Testing
|
||||
- **Verschiedene Clients** testen
|
||||
- **Mobile Geräte** berücksichtigen
|
||||
|
||||
## 📝 Best Practices:
|
||||
|
||||
### 1. Einfache Struktur
|
||||
- **Minimale CSS** verwenden
|
||||
- **Inline-Styles** bevorzugen
|
||||
- **Tabellen-Layout** für komplexe Strukturen
|
||||
|
||||
### 2. Farben
|
||||
- **Hex-Codes** verwenden (`#00d4ff`)
|
||||
- **Keine Transparenz** (`rgba()` vermeiden)
|
||||
- **Hoher Kontrast** für Lesbarkeit
|
||||
|
||||
### 3. Typografie
|
||||
- **Web-Safe Fonts** verwenden
|
||||
- **Fallback-Fonts** definieren
|
||||
- **Angemessene Schriftgrößen** (mind. 14px)
|
||||
|
||||
### 4. Bilder
|
||||
- **Alt-Text** immer angeben
|
||||
- **Optimierte Größen** verwenden
|
||||
- **Fallback-Farben** definieren
|
||||
|
||||
## 🎯 Sofortige Lösung:
|
||||
|
||||
Verwende die **kompatiblen Versionen** der Templates:
|
||||
- `welcome-email-compatible.html`
|
||||
- `reset-password-compatible.html`
|
||||
|
||||
Diese verwenden nur E-Mail-Client-kompatible CSS-Features und sollten in allen Clients korrekt angezeigt werden.
|
||||
|
||||
---
|
||||
|
||||
**Tipp:** Teste immer in verschiedenen E-Mail-Clients, bevor du die Templates produktiv einsetzt! 📧✨
|
||||
157
public/email-templates/README.md
Normal file
157
public/email-templates/README.md
Normal file
@@ -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** 🥷
|
||||
119
public/email-templates/TEMPLATES-OVERVIEW.md
Normal file
119
public/email-templates/TEMPLATES-OVERVIEW.md
Normal file
@@ -0,0 +1,119 @@
|
||||
# NinjaCross E-Mail Templates - Übersicht
|
||||
|
||||
## 📋 Alle verfügbaren Templates
|
||||
|
||||
| Template | HTML-Datei | Text-Datei | Beschreibung |
|
||||
|----------|------------|------------|--------------|
|
||||
| **Confirm signup** | `welcome-email.html` | `welcome-email.txt` | Willkommens-E-Mail für neue Registrierungen |
|
||||
| **Invite user** | `invite-user.html` | `invite-user.txt` | Einladungs-E-Mail für neue Benutzer |
|
||||
| **Magic Link** | `magic-link.html` | `magic-link.txt` | Passwortlose Anmeldung per Magic Link |
|
||||
| **Change Email Address** | `change-email.html` | `change-email.txt` | E-Mail-Adressen-Änderung bestätigen |
|
||||
| **Reset Password** | `reset-password.html` | `reset-password.txt` | Passwort zurücksetzen |
|
||||
| **Reauthentication** | `reauthentication.html` | `reauthentication.txt` | Erneute Authentifizierung für sensible Aktionen |
|
||||
|
||||
## 🎨 Design-Features
|
||||
|
||||
### Einheitliche Gestaltung
|
||||
- **Dunkles Design** mit Neon-Blau-Akzenten (#00d4ff)
|
||||
- **Gradient-Titel** mit den NinjaCross-Farben
|
||||
- **Glas-Effekt Container** mit Backdrop-Filter
|
||||
- **Responsive Design** für alle Geräte
|
||||
- **Inter-Font** für moderne Typografie
|
||||
|
||||
### Sicherheits-Features
|
||||
- **Zeitlimits** für alle Links (15 Min - 24 Std)
|
||||
- **Sicherheitshinweise** in jeder E-Mail
|
||||
- **Klare Call-to-Action Buttons**
|
||||
- **Warnungen** bei verdächtigen Aktivitäten
|
||||
|
||||
## 🔧 Template-Variablen
|
||||
|
||||
### Standard-Variablen (alle Templates)
|
||||
- `{{ .ConfirmationURL }}` - Link zur Bestätigung/Aktion
|
||||
- `{{ .SiteURL }}` - URL der Website
|
||||
- `{{ .Email }}` - E-Mail-Adresse des Benutzers
|
||||
|
||||
### Spezielle Variablen
|
||||
- `{{ .NewEmail }}` - Neue E-Mail-Adresse (nur Change Email)
|
||||
- `{{ .InvitedBy }}` - Name des einladenden Benutzers (nur Invite User)
|
||||
|
||||
## 📱 E-Mail-Client-Kompatibilität
|
||||
|
||||
### Unterstützte Clients
|
||||
- ✅ Gmail (Web & App)
|
||||
- ✅ Outlook (Web & App)
|
||||
- ✅ Apple Mail
|
||||
- ✅ Thunderbird
|
||||
- ✅ Yahoo Mail
|
||||
- ✅ Mobile E-Mail-Apps
|
||||
|
||||
### Fallback-Strategien
|
||||
1. **HTML-Version** für moderne Clients
|
||||
2. **Text-Version** für einfache Clients
|
||||
3. **Inline-CSS** für bessere Kompatibilität
|
||||
4. **Responsive Design** für mobile Geräte
|
||||
|
||||
## 🚀 Supabase Integration
|
||||
|
||||
### Setup-Schritte
|
||||
1. **Supabase Dashboard** → Authentication → Email Templates
|
||||
2. **Template auswählen** (z.B. "Confirm signup")
|
||||
3. **HTML-Code ersetzen** mit Inhalt aus `.html` Datei
|
||||
4. **Text-Code ersetzen** mit Inhalt aus `.txt` Datei
|
||||
5. **Speichern** und testen
|
||||
|
||||
### E-Mail-Provider
|
||||
- **SMTP Settings** in Authentication → Settings
|
||||
- **Supabase Edge Functions** für erweiterte Funktionen
|
||||
- **Custom SMTP** für eigene E-Mail-Server
|
||||
|
||||
## 🧪 Testing
|
||||
|
||||
### E-Mail-Test
|
||||
1. **Test-Account** erstellen
|
||||
2. **Template auslösen** (Registrierung, Reset, etc.)
|
||||
3. **E-Mail prüfen** in verschiedenen Clients
|
||||
4. **Links testen** auf Funktionalität
|
||||
|
||||
### Browser-Test
|
||||
1. **HTML-Datei** in Browser öffnen
|
||||
2. **Responsive Design** testen
|
||||
3. **Links und Buttons** überprüfen
|
||||
4. **Design-Konsistenz** sicherstellen
|
||||
|
||||
## 📊 Template-Statistiken
|
||||
|
||||
### Dateigrößen
|
||||
- **HTML-Templates**: ~8-12 KB
|
||||
- **Text-Templates**: ~1-2 KB
|
||||
- **Gesamt**: ~60 KB für alle Templates
|
||||
|
||||
### Performance
|
||||
- **Ladezeit**: < 1 Sekunde
|
||||
- **Rendering**: Optimiert für alle Clients
|
||||
- **Mobile**: Vollständig responsive
|
||||
|
||||
## 🔒 Sicherheit
|
||||
|
||||
### Link-Sicherheit
|
||||
- **Zeitlimits**: 15 Min (Reauth) bis 24 Std (Reset)
|
||||
- **Einmalige Nutzung**: Links werden nach Verwendung ungültig
|
||||
- **HTTPS**: Alle Links verwenden sichere Verbindungen
|
||||
|
||||
### Datenschutz
|
||||
- **Keine sensiblen Daten** in E-Mail-Inhalten
|
||||
- **Minimale Informationen** in Templates
|
||||
- **DSGVO-konform** gestaltet
|
||||
|
||||
## 🎯 Nächste Schritte
|
||||
|
||||
1. **Supabase konfigurieren** mit neuen Templates
|
||||
2. **E-Mail-Provider** einrichten
|
||||
3. **Test-E-Mails** versenden
|
||||
4. **Design anpassen** falls gewünscht
|
||||
5. **Monitoring** einrichten für E-Mail-Delivery
|
||||
|
||||
---
|
||||
|
||||
**Erstellt für NinjaCross Timer Leaderboard** 🥷
|
||||
**Alle Templates sind bereit für den produktiven Einsatz!** ✨
|
||||
174
public/email-templates/URL-CONFIGURATION-GUIDE.md
Normal file
174
public/email-templates/URL-CONFIGURATION-GUIDE.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# URL-Konfiguration für NinjaCross E-Mails
|
||||
|
||||
## 🚨 Problem: Reset-Password E-Mail funktioniert nicht
|
||||
|
||||
**Deine Server-URL:** `ninja.reptilfpv.de:3000`
|
||||
|
||||
## 🔧 Mögliche Ursachen:
|
||||
|
||||
### 1. Supabase URL-Konfiguration
|
||||
Supabase muss wissen, wohin die Bestätigungslinks führen sollen.
|
||||
|
||||
**Lösung:**
|
||||
1. **Supabase Dashboard** → **Authentication** → **URL Configuration**
|
||||
2. **Site URL** setzen auf: `https://ninja.reptilfpv.de:3000`
|
||||
3. **Redirect URLs** hinzufügen:
|
||||
- `https://ninja.reptilfpv.de:3000/**`
|
||||
- `http://ninja.reptilfpv.de:3000/**` (falls HTTP verwendet wird)
|
||||
|
||||
### 2. HTTPS vs HTTP Problem
|
||||
E-Mail-Clients blockieren oft HTTP-Links in E-Mails.
|
||||
|
||||
**Lösung:**
|
||||
- **HTTPS verwenden** für alle Links
|
||||
- **SSL-Zertifikat** für `ninja.reptilfpv.de:3000` einrichten
|
||||
- **Port 3000** in der URL kann problematisch sein
|
||||
|
||||
### 3. E-Mail-Client-Sicherheit
|
||||
Manche E-Mail-Clients blockieren Links mit Ports oder verdächtigen Domains.
|
||||
|
||||
**Lösung:**
|
||||
- **Standard-Ports** verwenden (80 für HTTP, 443 für HTTPS)
|
||||
- **Subdomain** verwenden: `ninja.reptilfpv.de` ohne Port
|
||||
- **Reverse Proxy** einrichten (Nginx/Apache)
|
||||
|
||||
## 🚀 Empfohlene Lösungen:
|
||||
|
||||
### Option 1: HTTPS mit Standard-Port
|
||||
```
|
||||
https://ninja.reptilfpv.de
|
||||
```
|
||||
- **Port 443** (Standard HTTPS)
|
||||
- **SSL-Zertifikat** erforderlich
|
||||
- **Reverse Proxy** (Nginx) einrichten
|
||||
|
||||
### Option 2: Subdomain ohne Port
|
||||
```
|
||||
https://ninja.reptilfpv.de
|
||||
```
|
||||
- **Port 3000** intern weiterleiten
|
||||
- **Nginx** als Reverse Proxy
|
||||
- **SSL-Zertifikat** für Subdomain
|
||||
|
||||
### Option 3: Hauptdomain verwenden
|
||||
```
|
||||
https://reptilfpv.de/ninja
|
||||
```
|
||||
- **Hauptdomain** mit Pfad
|
||||
- **Bessere E-Mail-Client-Kompatibilität**
|
||||
- **Standard-Ports** verwenden
|
||||
|
||||
## 🔧 Nginx Reverse Proxy Setup:
|
||||
|
||||
### 1. Nginx-Konfiguration
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
listen 443 ssl;
|
||||
server_name ninja.reptilfpv.de;
|
||||
|
||||
ssl_certificate /path/to/certificate.crt;
|
||||
ssl_certificate_key /path/to/private.key;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. SSL-Zertifikat
|
||||
```bash
|
||||
# Let's Encrypt SSL-Zertifikat
|
||||
sudo certbot --nginx -d ninja.reptilfpv.de
|
||||
```
|
||||
|
||||
## 📧 E-Mail-Template-Optimierungen:
|
||||
|
||||
### 1. Absolute URLs verwenden
|
||||
```html
|
||||
<!-- ❌ Relativ -->
|
||||
<a href="/reset-password">Reset</a>
|
||||
|
||||
<!-- ✅ Absolut -->
|
||||
<a href="https://ninja.reptilfpv.de/reset-password">Reset</a>
|
||||
```
|
||||
|
||||
### 2. HTTPS erzwingen
|
||||
```html
|
||||
<!-- ✅ Immer HTTPS verwenden -->
|
||||
<a href="https://ninja.reptilfpv.de{{ .ConfirmationURL }}">Reset</a>
|
||||
```
|
||||
|
||||
### 3. Fallback-URLs
|
||||
```html
|
||||
<!-- ✅ Mit Fallback -->
|
||||
<a href="{{ .ConfirmationURL }}">Reset</a>
|
||||
<p>Falls der Link nicht funktioniert: https://ninja.reptilfpv.de</p>
|
||||
```
|
||||
|
||||
## 🧪 Testing:
|
||||
|
||||
### 1. E-Mail-Links testen
|
||||
```bash
|
||||
# Test-URLs
|
||||
curl -I https://ninja.reptilfpv.de:3000
|
||||
curl -I https://ninja.reptilfpv.de
|
||||
curl -I http://ninja.reptilfpv.de:3000
|
||||
```
|
||||
|
||||
### 2. E-Mail-Client-Test
|
||||
- **Gmail** - Links in E-Mail testen
|
||||
- **Outlook** - Sicherheitswarnungen prüfen
|
||||
- **Apple Mail** - Link-Funktionalität testen
|
||||
|
||||
### 3. Supabase-Logs prüfen
|
||||
- **Authentication Logs** in Supabase Dashboard
|
||||
- **Fehler-Meldungen** analysieren
|
||||
- **Redirect-URLs** überprüfen
|
||||
|
||||
## 🎯 Sofortige Lösung:
|
||||
|
||||
### 1. Supabase konfigurieren
|
||||
```
|
||||
Site URL: https://ninja.reptilfpv.de:3000
|
||||
Redirect URLs:
|
||||
- https://ninja.reptilfpv.de:3000/**
|
||||
- https://ninja.reptilfpv.de:3000/auth/callback
|
||||
```
|
||||
|
||||
### 2. Optimierte Templates verwenden
|
||||
- **`reset-password-optimized.html`** - Verbesserte Kompatibilität
|
||||
- **`reset-password-table.html`** - Tabellen-basiert für maximale Kompatibilität
|
||||
|
||||
### 3. HTTPS einrichten
|
||||
- **SSL-Zertifikat** für `ninja.reptilfpv.de:3000`
|
||||
- **Oder** Reverse Proxy mit Standard-Port
|
||||
|
||||
## 📞 Debugging:
|
||||
|
||||
### 1. E-Mail-Links prüfen
|
||||
- **Link in E-Mail** kopieren und in Browser testen
|
||||
- **URL-Struktur** analysieren
|
||||
- **Redirects** verfolgen
|
||||
|
||||
### 2. Supabase-Logs
|
||||
- **Authentication** → **Logs** in Supabase Dashboard
|
||||
- **Fehler-Meldungen** suchen
|
||||
- **URL-Parameter** prüfen
|
||||
|
||||
### 3. Browser-Entwicklertools
|
||||
- **Network-Tab** für Redirects
|
||||
- **Console** für JavaScript-Fehler
|
||||
- **Security-Tab** für HTTPS-Probleme
|
||||
|
||||
---
|
||||
|
||||
**Empfehlung:** Verwende `reset-password-table.html` mit HTTPS und Standard-Port für beste Kompatibilität! 🚀
|
||||
274
public/email-templates/change-email.html
Normal file
274
public/email-templates/change-email.html
Normal file
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>E-Mail-Adresse ändern - NinjaCross</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #ffffff;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #0a0a0f;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.email-header {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #94a3b8;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||
margin: 0 2rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.change-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.change-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-info {
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.email-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid rgba(51, 65, 85, 0.5);
|
||||
}
|
||||
|
||||
.email-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.email-label {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.email-value {
|
||||
color: #e2e8f0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: #f59e0b;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #fbbf24;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #0891b2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #334155, transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-content {
|
||||
margin: 0 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
padding: 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.change-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.email-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="change-title">E-Mail-Adresse ändern 📧</h1>
|
||||
|
||||
<p class="change-message">
|
||||
Du möchtest deine E-Mail-Adresse ändern. Bestätige die neue E-Mail-Adresse,
|
||||
um die Änderung abzuschließen.
|
||||
</p>
|
||||
|
||||
<div class="email-info">
|
||||
<div class="email-row">
|
||||
<span class="email-label">Aktuelle E-Mail:</span>
|
||||
<span class="email-value">{{ .Email }}</span>
|
||||
</div>
|
||||
<div class="email-row">
|
||||
<span class="email-label">Neue E-Mail:</span>
|
||||
<span class="email-value">{{ .NewEmail }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
✅ E-Mail-Adresse bestätigen
|
||||
</a>
|
||||
|
||||
<div class="warning-info">
|
||||
<div class="warning-title">⚠️ Wichtiger Hinweis</div>
|
||||
<div class="warning-text">
|
||||
Nach der Bestätigung wird deine neue E-Mail-Adresse für alle zukünftigen
|
||||
Benachrichtigungen und Anmeldungen verwendet.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du diese Änderung nicht angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1.5rem; font-size: 0.75rem; color: #64748b;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
public/email-templates/change-email.txt
Normal file
29
public/email-templates/change-email.txt
Normal file
@@ -0,0 +1,29 @@
|
||||
🥷 NINJACROSS - Die ultimative Timer-Rangliste
|
||||
================================================
|
||||
|
||||
E-Mail-Adresse ändern 📧
|
||||
|
||||
Du möchtest deine E-Mail-Adresse ändern. Bestätige die neue E-Mail-Adresse,
|
||||
um die Änderung abzuschließen.
|
||||
|
||||
📧 E-Mail-Informationen:
|
||||
- Aktuelle E-Mail: {{ .Email }}
|
||||
- Neue E-Mail: {{ .NewEmail }}
|
||||
|
||||
✅ E-Mail-Adresse bestätigen:
|
||||
{{ .ConfirmationURL }}
|
||||
|
||||
⚠️ Wichtiger Hinweis:
|
||||
Nach der Bestätigung wird deine neue E-Mail-Adresse für alle zukünftigen
|
||||
Benachrichtigungen und Anmeldungen verwendet.
|
||||
|
||||
================================================
|
||||
|
||||
Falls du diese Änderung nicht angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
|
||||
Links:
|
||||
- Zur Website: {{ .SiteURL }}
|
||||
- Support: {{ .SiteURL }}/support
|
||||
- Datenschutz: {{ .SiteURL }}/privacy
|
||||
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
300
public/email-templates/invite-user.html
Normal file
300
public/email-templates/invite-user.html
Normal file
@@ -0,0 +1,300 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Einladung zu NinjaCross</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #ffffff;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #0a0a0f;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.email-header {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #94a3b8;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||
margin: 0 2rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.invite-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.invite-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inviter-info {
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inviter-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #00d4ff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.inviter-role {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.features-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: #cbd5e1;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #0891b2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #334155, transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-content {
|
||||
margin: 0 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
padding: 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.invite-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="invite-title">Du wurdest eingeladen! 🎉</h1>
|
||||
|
||||
<p class="invite-message">
|
||||
Du wurdest von einem Administrator zu NinjaCross eingeladen.
|
||||
Klicke auf den Button unten, um dein Konto zu erstellen und der Community beizutreten.
|
||||
</p>
|
||||
|
||||
<div class="inviter-info">
|
||||
<div class="inviter-name">{{ .InvitedBy }}</div>
|
||||
<div class="inviter-role">hat dich zu NinjaCross eingeladen</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
🚀 Konto erstellen
|
||||
</a>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div class="features-section">
|
||||
<h2 class="features-title">Was dich erwartet:</h2>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🏃♂️</div>
|
||||
<div class="feature-text">
|
||||
<strong>Timer-Tracking:</strong> Erfasse deine Zeiten und verfolge deinen Fortschritt
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🏆</div>
|
||||
<div class="feature-text">
|
||||
<strong>Leaderboards:</strong> Vergleiche dich mit anderen Spielern und erreiche die Spitze
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">📊</div>
|
||||
<div class="feature-text">
|
||||
<strong>Statistiken:</strong> Detaillierte Analysen deiner Performance und Verbesserungen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🌍</div>
|
||||
<div class="feature-text">
|
||||
<strong>Multi-Location:</strong> Spiele an verschiedenen Standorten und sammle Erfahrungen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du diese Einladung nicht erwartet hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1.5rem; font-size: 0.75rem; color: #64748b;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
public/email-templates/invite-user.txt
Normal file
34
public/email-templates/invite-user.txt
Normal file
@@ -0,0 +1,34 @@
|
||||
🥷 NINJACROSS - Die ultimative Timer-Rangliste
|
||||
================================================
|
||||
|
||||
Du wurdest eingeladen! 🎉
|
||||
|
||||
Du wurdest von einem Administrator zu NinjaCross eingeladen.
|
||||
Klicke auf den Link unten, um dein Konto zu erstellen und der Community beizutreten.
|
||||
|
||||
👤 Einladung von: {{ .InvitedBy }}
|
||||
|
||||
🚀 Konto erstellen:
|
||||
{{ .ConfirmationURL }}
|
||||
|
||||
Was dich erwartet:
|
||||
==================
|
||||
|
||||
🏃♂️ Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt
|
||||
|
||||
🏆 Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze
|
||||
|
||||
📊 Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen
|
||||
|
||||
🌍 Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen
|
||||
|
||||
================================================
|
||||
|
||||
Falls du diese Einladung nicht erwartet hast, kannst du diese E-Mail ignorieren.
|
||||
|
||||
Links:
|
||||
- Zur Website: {{ .SiteURL }}
|
||||
- Support: {{ .SiteURL }}/support
|
||||
- Datenschutz: {{ .SiteURL }}/privacy
|
||||
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
257
public/email-templates/magic-link.html
Normal file
257
public/email-templates/magic-link.html
Normal file
@@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Magic Link - NinjaCross</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #ffffff;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #0a0a0f;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.email-header {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #94a3b8;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||
margin: 0 2rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.magic-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.magic-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.magic-info {
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.magic-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.magic-description {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.security-info {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-text {
|
||||
color: #86efac;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #0891b2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #334155, transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-content {
|
||||
margin: 0 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
padding: 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.magic-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.magic-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="magic-title">Dein Magic Link ist da! ✨</h1>
|
||||
|
||||
<p class="magic-message">
|
||||
Du hast einen Magic Link angefordert. Klicke auf den Button unten,
|
||||
um dich sicher und ohne Passwort bei NinjaCross anzumelden.
|
||||
</p>
|
||||
|
||||
<div class="magic-info">
|
||||
<span class="magic-icon">🔗</span>
|
||||
<div class="magic-description">
|
||||
Dieser Link ist sicher und führt dich direkt zu deinem Konto
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
🚀 Anmelden
|
||||
</a>
|
||||
|
||||
<div class="security-info">
|
||||
<div class="security-title">🔒 Sicherheitshinweis</div>
|
||||
<div class="security-text">
|
||||
Dieser Link ist nur für dich bestimmt und verfällt nach 24 Stunden.
|
||||
Teile ihn nicht mit anderen Personen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du diesen Magic Link nicht angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1.5rem; font-size: 0.75rem; color: #64748b;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
public/email-templates/magic-link.txt
Normal file
25
public/email-templates/magic-link.txt
Normal file
@@ -0,0 +1,25 @@
|
||||
🥷 NINJACROSS - Die ultimative Timer-Rangliste
|
||||
================================================
|
||||
|
||||
Dein Magic Link ist da! ✨
|
||||
|
||||
Du hast einen Magic Link angefordert. Klicke auf den Link unten,
|
||||
um dich sicher und ohne Passwort bei NinjaCross anzumelden.
|
||||
|
||||
🔗 Magic Link:
|
||||
{{ .ConfirmationURL }}
|
||||
|
||||
🔒 Sicherheitshinweis:
|
||||
Dieser Link ist nur für dich bestimmt und verfällt nach 24 Stunden.
|
||||
Teile ihn nicht mit anderen Personen.
|
||||
|
||||
================================================
|
||||
|
||||
Falls du diesen Magic Link nicht angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
|
||||
Links:
|
||||
- Zur Website: {{ .SiteURL }}
|
||||
- Support: {{ .SiteURL }}/support
|
||||
- Datenschutz: {{ .SiteURL }}/privacy
|
||||
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
327
public/email-templates/reauthentication.html
Normal file
327
public/email-templates/reauthentication.html
Normal file
@@ -0,0 +1,327 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Erneute Authentifizierung - NinjaCross</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #ffffff;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #0a0a0f;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.email-header {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #94a3b8;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||
margin: 0 2rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.reauth-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.reauth-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reauth-info {
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reauth-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reauth-description {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.security-info {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-text {
|
||||
color: #86efac;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: #f59e0b;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #fbbf24;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.token-section {
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin: 2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.token-display {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.token-code {
|
||||
background: #1e293b;
|
||||
border: 2px solid #00d4ff;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #00d4ff;
|
||||
letter-spacing: 0.1em;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
max-width: 300px;
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #0891b2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #334155, transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-content {
|
||||
margin: 0 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
padding: 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.reauth-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.reauth-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="reauth-title">Erneute Authentifizierung erforderlich 🔒</h1>
|
||||
|
||||
<p class="reauth-message">
|
||||
Für diese Aktion ist eine erneute Authentifizierung erforderlich.
|
||||
Klicke auf den Button unten, um deine Identität zu bestätigen.
|
||||
</p>
|
||||
|
||||
<div class="reauth-info">
|
||||
<span class="reauth-icon">🛡️</span>
|
||||
<div class="reauth-description">
|
||||
Diese zusätzliche Sicherheitsmaßnahme schützt dein Konto
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token Section -->
|
||||
<div class="token-section">
|
||||
<h2 style="color: #e2e8f0; text-align: center; margin-bottom: 1rem; font-size: 1.25rem;">Bestätigungscode</h2>
|
||||
<div class="token-display">
|
||||
<p style="color: #cbd5e1; text-align: center; margin-bottom: 0.5rem;">Gib diesen Code ein:</p>
|
||||
<div class="token-code">{{ .Token }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
🔐 Identität bestätigen
|
||||
</a>
|
||||
|
||||
<div class="security-info">
|
||||
<div class="security-title">🔒 Warum ist das nötig?</div>
|
||||
<div class="security-text">
|
||||
Bestimmte Aktionen wie das Ändern sensibler Daten oder das Zugreifen auf
|
||||
administrative Funktionen erfordern eine erneute Authentifizierung,
|
||||
um die Sicherheit deines Kontos zu gewährleisten.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="warning-info">
|
||||
<div class="warning-title">⏰ Zeitlimit</div>
|
||||
<div class="warning-text">
|
||||
Dieser Link verfällt nach 15 Minuten. Falls du diese Aktion nicht
|
||||
angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du diese Aktion nicht angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1.5rem; font-size: 0.75rem; color: #64748b;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
30
public/email-templates/reauthentication.txt
Normal file
30
public/email-templates/reauthentication.txt
Normal file
@@ -0,0 +1,30 @@
|
||||
🥷 NINJACROSS - Die ultimative Timer-Rangliste
|
||||
================================================
|
||||
|
||||
Erneute Authentifizierung erforderlich 🔒
|
||||
|
||||
Für diese Aktion ist eine erneute Authentifizierung erforderlich.
|
||||
Klicke auf den Link unten, um deine Identität zu bestätigen.
|
||||
|
||||
🛡️ Identität bestätigen:
|
||||
{{ .ConfirmationURL }}
|
||||
|
||||
🔒 Warum ist das nötig?
|
||||
Bestimmte Aktionen wie das Ändern sensibler Daten oder das Zugreifen auf
|
||||
administrative Funktionen erfordern eine erneute Authentifizierung,
|
||||
um die Sicherheit deines Kontos zu gewährleisten.
|
||||
|
||||
⏰ Zeitlimit:
|
||||
Dieser Link verfällt nach 15 Minuten. Falls du diese Aktion nicht
|
||||
angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
|
||||
================================================
|
||||
|
||||
Falls du diese Aktion nicht angefordert hast, kannst du diese E-Mail ignorieren.
|
||||
|
||||
Links:
|
||||
- Zur Website: {{ .SiteURL }}
|
||||
- Support: {{ .SiteURL }}/support
|
||||
- Datenschutz: {{ .SiteURL }}/privacy
|
||||
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
249
public/email-templates/reset-password-compatible.html
Normal file
249
public/email-templates/reset-password-compatible.html
Normal file
@@ -0,0 +1,249 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Passwort zurücksetzen - NinjaCross</title>
|
||||
<style>
|
||||
/* E-Mail-Client-kompatible Styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #0a0a0f;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #1e293b;
|
||||
border: 2px solid #334155;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
background-color: #00d4ff;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #e2e8f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 30px 20px;
|
||||
background-color: #1e293b;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reset-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.reset-info {
|
||||
background-color: #334155;
|
||||
border: 1px solid #475569;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reset-description {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 15px 30px;
|
||||
background-color: #00d4ff;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.security-tips {
|
||||
background-color: #22c55e;
|
||||
border: 1px solid #16a34a;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-list {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.security-list li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
background-color: #ef4444;
|
||||
border: 1px solid #dc2626;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
background-color: #0f172a;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="reset-title">Passwort zurücksetzen 🔐</h1>
|
||||
|
||||
<p class="reset-message">
|
||||
Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt.
|
||||
Klicke auf den Button unten, um ein neues Passwort zu erstellen.
|
||||
</p>
|
||||
|
||||
<div class="reset-info">
|
||||
<span class="reset-icon">🔑</span>
|
||||
<div class="reset-description">
|
||||
Dieser Link ist sicher und führt dich zur Passwort-Reset-Seite
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
🔄 Passwort zurücksetzen
|
||||
</a>
|
||||
|
||||
<div class="security-tips">
|
||||
<div class="security-title">🛡️ Tipps für ein sicheres Passwort:</div>
|
||||
<ul class="security-list">
|
||||
<li>• Verwende mindestens 8 Zeichen</li>
|
||||
<li>• Kombiniere Groß- und Kleinbuchstaben</li>
|
||||
<li>• Füge Zahlen und Sonderzeichen hinzu</li>
|
||||
<li>• Verwende keine persönlichen Informationen</li>
|
||||
<li>• Nutze ein einzigartiges Passwort nur für NinjaCross</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="warning-info">
|
||||
<div class="warning-title">⚠️ Sicherheitshinweis</div>
|
||||
<div class="warning-text">
|
||||
Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast,
|
||||
kannst du diese E-Mail ignorieren.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
301
public/email-templates/reset-password-optimized.html
Normal file
301
public/email-templates/reset-password-optimized.html
Normal file
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Passwort zurücksetzen - NinjaCross</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
/* Reset styles for email clients */
|
||||
body, table, td, p, a, li, blockquote {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
table, td {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
border: 0;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Main styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #0a0a0f;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.email-wrapper {
|
||||
width: 100%;
|
||||
background-color: #0a0a0f;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #1e293b;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
background-color: #00d4ff;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #e2e8f0;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 30px 20px;
|
||||
background-color: #1e293b;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.reset-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
|
||||
.reset-info {
|
||||
background-color: #334155;
|
||||
border: 1px solid #475569;
|
||||
padding: 20px;
|
||||
margin: 0 0 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-icon {
|
||||
font-size: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reset-description {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 15px 30px;
|
||||
background-color: #00d4ff;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #0891b2;
|
||||
}
|
||||
|
||||
.security-tips {
|
||||
background-color: #22c55e;
|
||||
border: 1px solid #16a34a;
|
||||
padding: 20px;
|
||||
margin: 30px 0 0 0;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin: 0 0 15px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-list {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.security-list li {
|
||||
margin: 0 0 8px 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
background-color: #ef4444;
|
||||
border: 1px solid #dc2626;
|
||||
padding: 15px;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin: 0 0 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
background-color: #0f172a;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #0891b2;
|
||||
}
|
||||
|
||||
/* Mobile styles */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.email-wrapper {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-wrapper">
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="reset-title">Passwort zurücksetzen 🔐</h1>
|
||||
|
||||
<p class="reset-message">
|
||||
Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt.
|
||||
Klicke auf den Button unten, um ein neues Passwort zu erstellen.
|
||||
</p>
|
||||
|
||||
<div class="reset-info">
|
||||
<span class="reset-icon">🔑</span>
|
||||
<div class="reset-description">
|
||||
Dieser Link ist sicher und führt dich zur Passwort-Reset-Seite
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
🔄 Passwort zurücksetzen
|
||||
</a>
|
||||
|
||||
<div class="security-tips">
|
||||
<div class="security-title">🛡️ Tipps für ein sicheres Passwort:</div>
|
||||
<ul class="security-list">
|
||||
<li>• Verwende mindestens 8 Zeichen</li>
|
||||
<li>• Kombiniere Groß- und Kleinbuchstaben</li>
|
||||
<li>• Füge Zahlen und Sonderzeichen hinzu</li>
|
||||
<li>• Verwende keine persönlichen Informationen</li>
|
||||
<li>• Nutze ein einzigartiges Passwort nur für NinjaCross</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="warning-info">
|
||||
<div class="warning-title">⚠️ Sicherheitshinweis</div>
|
||||
<div class="warning-text">
|
||||
Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast,
|
||||
kannst du diese E-Mail ignorieren.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
<a href="https://ninja.reptilfpv.de:3000">Zur Website</a>
|
||||
<a href="https://ninja.reptilfpv.de:3000/support">Support</a>
|
||||
<a href="https://ninja.reptilfpv.de:3000/privacy">Datenschutz</a>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
323
public/email-templates/reset-password-table.html
Normal file
323
public/email-templates/reset-password-table.html
Normal file
@@ -0,0 +1,323 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Passwort zurücksetzen - NinjaCross</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
<o:OfficeDocumentSettings>
|
||||
<o:PixelsPerInch>96</o:PixelsPerInch>
|
||||
</o:OfficeDocumentSettings>
|
||||
</xml>
|
||||
</noscript>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
/* Reset styles */
|
||||
body, table, td, p, a, li, blockquote {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
table, td {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
border: 0;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Main styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #0a0a0f;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.email-wrapper {
|
||||
width: 100%;
|
||||
background-color: #0a0a0f;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #1e293b;
|
||||
border: 2px solid #334155;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
background-color: #00d4ff;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #e2e8f0;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 30px 20px;
|
||||
background-color: #1e293b;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.reset-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
|
||||
.reset-info {
|
||||
background-color: #334155;
|
||||
border: 1px solid #475569;
|
||||
padding: 20px;
|
||||
margin: 0 0 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-icon {
|
||||
font-size: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reset-description {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 15px 30px;
|
||||
background-color: #00d4ff;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.security-tips {
|
||||
background-color: #22c55e;
|
||||
border: 1px solid #16a34a;
|
||||
padding: 20px;
|
||||
margin: 30px 0 0 0;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin: 0 0 15px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-list {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.security-list li {
|
||||
margin: 0 0 8px 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
background-color: #ef4444;
|
||||
border: 1px solid #dc2626;
|
||||
padding: 15px;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin: 0 0 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
background-color: #0f172a;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
/* Mobile styles */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.email-wrapper {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-wrapper">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #0a0a0f;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 20px 0;">
|
||||
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #1e293b; border: 2px solid #334155; max-width: 600px;">
|
||||
<!-- Header -->
|
||||
<tr>
|
||||
<td style="background-color: #00d4ff; padding: 30px 20px; text-align: center;">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Content -->
|
||||
<tr>
|
||||
<td style="padding: 30px 20px; background-color: #1e293b;">
|
||||
<h1 class="reset-title">Passwort zurücksetzen 🔐</h1>
|
||||
|
||||
<p class="reset-message">
|
||||
Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt.
|
||||
Klicke auf den Button unten, um ein neues Passwort zu erstellen.
|
||||
</p>
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #334155; border: 1px solid #475569; margin: 0 0 30px 0;">
|
||||
<tr>
|
||||
<td style="padding: 20px; text-align: center;">
|
||||
<span class="reset-icon">🔑</span>
|
||||
<div class="reset-description">
|
||||
Dieser Link ist sicher und führt dich zur Passwort-Reset-Seite
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 30px 0;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
🔄 Passwort zurücksetzen
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #22c55e; border: 1px solid #16a34a; margin: 30px 0 0 0;">
|
||||
<tr>
|
||||
<td style="padding: 20px;">
|
||||
<div class="security-title">🛡️ Tipps für ein sicheres Passwort:</div>
|
||||
<ul class="security-list">
|
||||
<li>• Verwende mindestens 8 Zeichen</li>
|
||||
<li>• Kombiniere Groß- und Kleinbuchstaben</li>
|
||||
<li>• Füge Zahlen und Sonderzeichen hinzu</li>
|
||||
<li>• Verwende keine persönlichen Informationen</li>
|
||||
<li>• Nutze ein einzigartiges Passwort nur für NinjaCross</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #ef4444; border: 1px solid #dc2626; margin: 20px 0 0 0;">
|
||||
<tr>
|
||||
<td style="padding: 15px;">
|
||||
<div class="warning-title">⚠️ Sicherheitshinweis</div>
|
||||
<div class="warning-text">
|
||||
Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast,
|
||||
kannst du diese E-Mail ignorieren.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr>
|
||||
<td style="background-color: #0f172a; padding: 20px; text-align: center; color: #64748b; font-size: 12px;">
|
||||
<p>
|
||||
Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
<a href="https://ninja.reptilfpv.de:3000" style="color: #00d4ff; text-decoration: none; margin: 0 10px;">Zur Website</a>
|
||||
<a href="https://ninja.reptilfpv.de:3000/support" style="color: #00d4ff; text-decoration: none; margin: 0 10px;">Support</a>
|
||||
<a href="https://ninja.reptilfpv.de:3000/privacy" style="color: #00d4ff; text-decoration: none; margin: 0 10px;">Datenschutz</a>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
294
public/email-templates/reset-password.html
Normal file
294
public/email-templates/reset-password.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Passwort zurücksetzen - NinjaCross</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #ffffff;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #0a0a0f;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.email-header {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #94a3b8;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||
margin: 0 2rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.reset-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-info {
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reset-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reset-description {
|
||||
color: #94a3b8;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.security-tips {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.security-title {
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.security-list {
|
||||
color: #86efac;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.security-list li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.warning-info {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.warning-title {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.warning-text {
|
||||
color: #fca5a5;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #0891b2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #334155, transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-content {
|
||||
margin: 0 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
padding: 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.reset-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="reset-title">Passwort zurücksetzen 🔐</h1>
|
||||
|
||||
<p class="reset-message">
|
||||
Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt.
|
||||
Klicke auf den Button unten, um ein neues Passwort zu erstellen.
|
||||
</p>
|
||||
|
||||
<div class="reset-info">
|
||||
<span class="reset-icon">🔑</span>
|
||||
<div class="reset-description">
|
||||
Dieser Link ist sicher und führt dich zur Passwort-Reset-Seite
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
🔄 Passwort zurücksetzen
|
||||
</a>
|
||||
|
||||
<div class="security-tips">
|
||||
<div class="security-title">🛡️ Tipps für ein sicheres Passwort:</div>
|
||||
<ul class="security-list">
|
||||
<li>• Verwende mindestens 8 Zeichen</li>
|
||||
<li>• Kombiniere Groß- und Kleinbuchstaben</li>
|
||||
<li>• Füge Zahlen und Sonderzeichen hinzu</li>
|
||||
<li>• Verwende keine persönlichen Informationen</li>
|
||||
<li>• Nutze ein einzigartiges Passwort nur für NinjaCross</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="warning-info">
|
||||
<div class="warning-title">⚠️ Sicherheitshinweis</div>
|
||||
<div class="warning-text">
|
||||
Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast,
|
||||
kannst du diese E-Mail ignorieren.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1.5rem; font-size: 0.75rem; color: #64748b;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
public/email-templates/reset-password.txt
Normal file
32
public/email-templates/reset-password.txt
Normal file
@@ -0,0 +1,32 @@
|
||||
🥷 NINJACROSS - Die ultimative Timer-Rangliste
|
||||
================================================
|
||||
|
||||
Passwort zurücksetzen 🔐
|
||||
|
||||
Du hast eine Anfrage zum Zurücksetzen deines Passworts gestellt.
|
||||
Klicke auf den Link unten, um ein neues Passwort zu erstellen.
|
||||
|
||||
🔑 Passwort zurücksetzen:
|
||||
{{ .ConfirmationURL }}
|
||||
|
||||
🛡️ Tipps für ein sicheres Passwort:
|
||||
• Verwende mindestens 8 Zeichen
|
||||
• Kombiniere Groß- und Kleinbuchstaben
|
||||
• Füge Zahlen und Sonderzeichen hinzu
|
||||
• Verwende keine persönlichen Informationen
|
||||
• Nutze ein einzigartiges Passwort nur für NinjaCross
|
||||
|
||||
⚠️ Sicherheitshinweis:
|
||||
Dieser Link verfällt nach 24 Stunden. Falls du diese Anfrage nicht gestellt hast,
|
||||
kannst du diese E-Mail ignorieren.
|
||||
|
||||
================================================
|
||||
|
||||
Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.
|
||||
|
||||
Links:
|
||||
- Zur Website: {{ .SiteURL }}
|
||||
- Support: {{ .SiteURL }}/support
|
||||
- Datenschutz: {{ .SiteURL }}/privacy
|
||||
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
208
public/email-templates/welcome-email-compatible.html
Normal file
208
public/email-templates/welcome-email-compatible.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Willkommen bei NinjaCross</title>
|
||||
<style>
|
||||
/* E-Mail-Client-kompatible Styles */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #0a0a0f;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #1e293b;
|
||||
border: 2px solid #334155;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
background-color: #00d4ff;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #e2e8f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 30px 20px;
|
||||
background-color: #1e293b;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 15px 30px;
|
||||
background-color: #00d4ff;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
background-color: #334155;
|
||||
border: 1px solid #475569;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: #cbd5e1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
background-color: #0f172a;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="welcome-title">Willkommen bei NinjaCross! 🎉</h1>
|
||||
|
||||
<p class="welcome-message">
|
||||
Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community.
|
||||
Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen.
|
||||
</p>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
✉️ E-Mail bestätigen
|
||||
</a>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🏃♂️</span>
|
||||
<span class="feature-text">
|
||||
<strong>Timer-Tracking:</strong> Erfasse deine Zeiten und verfolge deinen Fortschritt
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🏆</span>
|
||||
<span class="feature-text">
|
||||
<strong>Leaderboards:</strong> Vergleiche dich mit anderen Spielern und erreiche die Spitze
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<span class="feature-icon">📊</span>
|
||||
<span class="feature-text">
|
||||
<strong>Statistiken:</strong> Detaillierte Analysen deiner Performance und Verbesserungen
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🌍</span>
|
||||
<span class="feature-text">
|
||||
<strong>Multi-Location:</strong> Spiele an verschiedenen Standorten und sammle Erfahrungen
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
187
public/email-templates/welcome-email-simple.html
Normal file
187
public/email-templates/welcome-email-simple.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Willkommen bei NinjaCross</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #0a0a0f;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #1e293b;
|
||||
border: 2px solid #334155;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #e2e8f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: #cbd5e1;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin: 0 auto 30px;
|
||||
padding: 15px 30px;
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
background-color: #334155;
|
||||
border: 1px solid #475569;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: #cbd5e1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #0f172a;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<h1 class="title">Willkommen bei NinjaCross! 🎉</h1>
|
||||
|
||||
<p class="message">
|
||||
Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community.
|
||||
Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen.
|
||||
</p>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="button">
|
||||
✉️ E-Mail bestätigen
|
||||
</a>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🏃♂️</span>
|
||||
<span class="feature-text">
|
||||
<strong>Timer-Tracking:</strong> Erfasse deine Zeiten und verfolge deinen Fortschritt
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🏆</span>
|
||||
<span class="feature-text">
|
||||
<strong>Leaderboards:</strong> Vergleiche dich mit anderen Spielern und erreiche die Spitze
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<span class="feature-icon">📊</span>
|
||||
<span class="feature-text">
|
||||
<strong>Statistiken:</strong> Detaillierte Analysen deiner Performance und Verbesserungen
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<span class="feature-icon">🌍</span>
|
||||
<span class="feature-text">
|
||||
<strong>Multi-Location:</strong> Spiele an verschiedenen Standorten und sammle Erfahrungen
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<p>
|
||||
Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 15px;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
274
public/email-templates/welcome-email.html
Normal file
274
public/email-templates/welcome-email.html
Normal file
@@ -0,0 +1,274 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Willkommen bei NinjaCross</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #0a0a0f;
|
||||
color: #ffffff;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #0a0a0f;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.email-header {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #94a3b8;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
background: rgba(30, 41, 59, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||
margin: 0 2rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1.5rem;
|
||||
box-shadow:
|
||||
0 25px 50px rgba(0, 0, 0, 0.3),
|
||||
0 0 0 1px rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.features-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #e2e8f0;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(51, 65, 85, 0.3);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid rgba(0, 212, 255, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
width: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: #cbd5e1;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.email-footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #64748b;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #00d4ff;
|
||||
text-decoration: none;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #0891b2;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, #334155, transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 600px) {
|
||||
.email-content {
|
||||
margin: 0 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.email-header {
|
||||
padding: 2rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<!-- Header -->
|
||||
<div class="email-header">
|
||||
<div class="logo">🥷 NINJACROSS</div>
|
||||
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="email-content">
|
||||
<h1 class="welcome-title">Willkommen bei NinjaCross! 🎉</h1>
|
||||
|
||||
<p class="welcome-message">
|
||||
Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community.
|
||||
Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen.
|
||||
</p>
|
||||
|
||||
<a href="{{ .ConfirmationURL }}" class="cta-button">
|
||||
✉️ E-Mail bestätigen
|
||||
</a>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div class="features-section">
|
||||
<h2 class="features-title">Was dich erwartet:</h2>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🏃♂️</div>
|
||||
<div class="feature-text">
|
||||
<strong>Timer-Tracking:</strong> Erfasse deine Zeiten und verfolge deinen Fortschritt
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🏆</div>
|
||||
<div class="feature-text">
|
||||
<strong>Leaderboards:</strong> Vergleiche dich mit anderen Spielern und erreiche die Spitze
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">📊</div>
|
||||
<div class="feature-text">
|
||||
<strong>Statistiken:</strong> Detaillierte Analysen deiner Performance und Verbesserungen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🌍</div>
|
||||
<div class="feature-text">
|
||||
<strong>Multi-Location:</strong> Spiele an verschiedenen Standorten und sammle Erfahrungen
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="email-footer">
|
||||
<p>
|
||||
Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren.
|
||||
</p>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ .SiteURL }}">Zur Website</a>
|
||||
<a href="{{ .SiteURL }}/support">Support</a>
|
||||
<a href="{{ .SiteURL }}/privacy">Datenschutz</a>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 1.5rem; font-size: 0.75rem; color: #64748b;">
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
public/email-templates/welcome-email.txt
Normal file
32
public/email-templates/welcome-email.txt
Normal file
@@ -0,0 +1,32 @@
|
||||
🥷 NINJACROSS - Die ultimative Timer-Rangliste
|
||||
================================================
|
||||
|
||||
Willkommen bei NinjaCross! 🎉
|
||||
|
||||
Vielen Dank für deine Registrierung! Du bist jetzt Teil der NinjaCross-Community.
|
||||
Bestätige deine E-Mail-Adresse, um dein Konto zu aktivieren und sofort loszulegen.
|
||||
|
||||
📧 E-Mail bestätigen:
|
||||
{{ .ConfirmationURL }}
|
||||
|
||||
Was dich erwartet:
|
||||
==================
|
||||
|
||||
🏃♂️ Timer-Tracking: Erfasse deine Zeiten und verfolge deinen Fortschritt
|
||||
|
||||
🏆 Leaderboards: Vergleiche dich mit anderen Spielern und erreiche die Spitze
|
||||
|
||||
📊 Statistiken: Detaillierte Analysen deiner Performance und Verbesserungen
|
||||
|
||||
🌍 Multi-Location: Spiele an verschiedenen Standorten und sammle Erfahrungen
|
||||
|
||||
================================================
|
||||
|
||||
Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren.
|
||||
|
||||
Links:
|
||||
- Zur Website: {{ .SiteURL }}
|
||||
- Support: {{ .SiteURL }}/support
|
||||
- Datenschutz: {{ .SiteURL }}/privacy
|
||||
|
||||
© 2024 NinjaCross. Alle Rechte vorbehalten.
|
||||
Reference in New Issue
Block a user