Added Email for Supabase
This commit is contained in:
371
adminlogin.html
371
adminlogin.html
@@ -1,371 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Ninja Server - Login</title>
|
|
||||||
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
background: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo h1 {
|
|
||||||
color: #333;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo p {
|
|
||||||
color: #666;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-container.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border: 2px solid #e1e5e9;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 1rem;
|
|
||||||
transition: border-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #667eea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: transparent;
|
|
||||||
color: #667eea;
|
|
||||||
border: 2px solid #667eea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: #667eea;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-form {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-form button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #667eea;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-form button:hover {
|
|
||||||
color: #764ba2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
padding: 0.75rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.success {
|
|
||||||
background: #d4edda;
|
|
||||||
color: #155724;
|
|
||||||
border: 1px solid #c3e6cb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.error {
|
|
||||||
background: #f8d7da;
|
|
||||||
color: #721c24;
|
|
||||||
border: 1px solid #f5c6cb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
border: 3px solid #f3f3f3;
|
|
||||||
border-top: 3px solid #667eea;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
margin: 0 auto 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="logo">
|
|
||||||
<h1>🥷 Ninja Server</h1>
|
|
||||||
<p>Secure Authentication Portal</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="message"></div>
|
|
||||||
<div id="loading" class="loading">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<p>Processing...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Login Form -->
|
|
||||||
<div id="loginForm" class="form-container active">
|
|
||||||
<h2 style="text-align: center; margin-bottom: 1.5rem; color: #333;">Welcome Back</h2>
|
|
||||||
<form id="loginFormElement">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="loginEmail">Email</label>
|
|
||||||
<input type="email" id="loginEmail" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="loginPassword">Password</label>
|
|
||||||
<input type="password" id="loginPassword" required>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
|
||||||
</form>
|
|
||||||
<div class="toggle-form">
|
|
||||||
<p>Don't have an account? <button type="button" onclick="toggleForm()">Sign Up</button></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Register Form -->
|
|
||||||
<div id="registerForm" class="form-container">
|
|
||||||
<h2 style="text-align: center; margin-bottom: 1.5rem; color: #333;">Create Account</h2>
|
|
||||||
<form id="registerFormElement">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="registerEmail">Email</label>
|
|
||||||
<input type="email" id="registerEmail" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="registerPassword">Password</label>
|
|
||||||
<input type="password" id="registerPassword" required minlength="6">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="confirmPassword">Confirm Password</label>
|
|
||||||
<input type="password" id="confirmPassword" required>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Create Account</button>
|
|
||||||
</form>
|
|
||||||
<div class="toggle-form">
|
|
||||||
<p>Already have an account? <button type="button" onclick="toggleForm()">Sign In</button></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Supabase configuration
|
|
||||||
const SUPABASE_URL = 'https://lfxlplnypzvjrhftaoog.supabase.co';
|
|
||||||
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImxmeGxwbG55cHp2anJoZnRhb29nIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDkyMTQ3NzIsImV4cCI6MjA2NDc5MDc3Mn0.XR4preBqWAQ1rT4PFbpkmRdz57BTwIusBI89fIxDHM8';
|
|
||||||
|
|
||||||
// Initialize Supabase client
|
|
||||||
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
|
||||||
|
|
||||||
// Check if user is already logged in
|
|
||||||
async function checkAuth() {
|
|
||||||
const { data: { session } } = await supabase.auth.getSession();
|
|
||||||
if (session) {
|
|
||||||
window.location.href = 'dashboard.html';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toggle between login and register forms
|
|
||||||
function toggleForm() {
|
|
||||||
const loginForm = document.getElementById('loginForm');
|
|
||||||
const registerForm = document.getElementById('registerForm');
|
|
||||||
|
|
||||||
if (loginForm.classList.contains('active')) {
|
|
||||||
loginForm.classList.remove('active');
|
|
||||||
registerForm.classList.add('active');
|
|
||||||
} else {
|
|
||||||
registerForm.classList.remove('active');
|
|
||||||
loginForm.classList.add('active');
|
|
||||||
}
|
|
||||||
clearMessage();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show message
|
|
||||||
function showMessage(message, type = 'success') {
|
|
||||||
const messageDiv = document.getElementById('message');
|
|
||||||
messageDiv.innerHTML = `<div class="message ${type}">${message}</div>`;
|
|
||||||
setTimeout(() => {
|
|
||||||
messageDiv.innerHTML = '';
|
|
||||||
}, 5000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear message
|
|
||||||
function clearMessage() {
|
|
||||||
document.getElementById('message').innerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show/hide loading
|
|
||||||
function setLoading(show) {
|
|
||||||
const loading = document.getElementById('loading');
|
|
||||||
if (show) {
|
|
||||||
loading.classList.add('active');
|
|
||||||
} else {
|
|
||||||
loading.classList.remove('active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle login
|
|
||||||
document.getElementById('loginFormElement').addEventListener('submit', async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setLoading(true);
|
|
||||||
clearMessage();
|
|
||||||
|
|
||||||
const email = document.getElementById('loginEmail').value;
|
|
||||||
const password = document.getElementById('loginPassword').value;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase.auth.signInWithPassword({
|
|
||||||
email: email,
|
|
||||||
password: password
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
showMessage(error.message, 'error');
|
|
||||||
} else {
|
|
||||||
showMessage('Login successful! Redirecting...', 'success');
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.href = 'dashboard.html';
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showMessage('An unexpected error occurred', 'error');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handle registration
|
|
||||||
document.getElementById('registerFormElement').addEventListener('submit', async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setLoading(true);
|
|
||||||
clearMessage();
|
|
||||||
|
|
||||||
const email = document.getElementById('registerEmail').value;
|
|
||||||
const password = document.getElementById('registerPassword').value;
|
|
||||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
||||||
|
|
||||||
if (password !== confirmPassword) {
|
|
||||||
showMessage('Passwords do not match', 'error');
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (password.length < 6) {
|
|
||||||
showMessage('Password must be at least 6 characters', 'error');
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { data, error } = await supabase.auth.signUp({
|
|
||||||
email: email,
|
|
||||||
password: password
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
showMessage(error.message, 'error');
|
|
||||||
} else {
|
|
||||||
if (data.user && !data.user.email_confirmed_at) {
|
|
||||||
showMessage('Registration successful! Please check your email to confirm your account.', 'success');
|
|
||||||
} else {
|
|
||||||
showMessage('Registration successful! Redirecting...', 'success');
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.href = 'dashboard.html';
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
showMessage('An unexpected error occurred', 'error');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Check authentication on page load
|
|
||||||
checkAuth();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
|
|
||||||
@@ -267,23 +267,31 @@
|
|||||||
// Check authentication and load dashboard
|
// Check authentication and load dashboard
|
||||||
async function initDashboard() {
|
async function initDashboard() {
|
||||||
try {
|
try {
|
||||||
// Temporarily disable auth check for design testing
|
// Get current session
|
||||||
// const { data: { session }, error } = await supabase.auth.getSession();
|
const { data: { session }, error } = await supabase.auth.getSession();
|
||||||
|
|
||||||
// if (error) {
|
if (error) {
|
||||||
// console.error('Error checking authentication:', error);
|
console.error('Error checking authentication:', error);
|
||||||
// window.location.href = '/login';
|
// Temporarily show dashboard for testing
|
||||||
// return;
|
displayUserInfo({ email: 'admin@speedrun-arena.com' });
|
||||||
// }
|
showDashboard();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// if (!session) {
|
if (!session) {
|
||||||
// // No session, redirect to login
|
// No session, redirect to login
|
||||||
// window.location.href = '/login';
|
window.location.href = '/login';
|
||||||
// return;
|
return;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// User is authenticated, show dashboard
|
// User is authenticated, show dashboard
|
||||||
displayUserInfo({ email: 'admin@speedrun-arena.com' });
|
if (session.user) {
|
||||||
|
console.log('User data:', session.user);
|
||||||
|
displayUserInfo(session.user);
|
||||||
|
} else {
|
||||||
|
// Fallback if no user data
|
||||||
|
displayUserInfo({ email: 'admin@speedrun-arena.com' });
|
||||||
|
}
|
||||||
showDashboard();
|
showDashboard();
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
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.
|
||||||
@@ -25,6 +25,39 @@
|
|||||||
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
|
||||||
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
|
||||||
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background: rgba(30, 41, 59, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
color: #00d4ff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button:hover {
|
||||||
|
background: #00d4ff;
|
||||||
|
color: #ffffff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button::before {
|
||||||
|
content: "← ";
|
||||||
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -183,6 +216,37 @@
|
|||||||
border-color: rgba(239, 68, 68, 0.3);
|
border-color: rgba(239, 68, 68, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.password-reset-container {
|
||||||
|
display: none;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(239, 68, 68, 0.05);
|
||||||
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-reset-container.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-reset-container p {
|
||||||
|
color: #ef4444;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-reset {
|
||||||
|
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-reset:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
display: none;
|
display: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -242,14 +306,24 @@
|
|||||||
.logo p {
|
.logo p {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Back to Home Button -->
|
||||||
|
<a href="/" class="back-button">Zur Hauptseite</a>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<h1>🥷 NINJACROSS</h1>
|
<h1>🥷 NINJACROSS</h1>
|
||||||
<p>Admin Authentication Portal</p>
|
<p>Dein Dashboard</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="message"></div>
|
<div id="message"></div>
|
||||||
@@ -272,6 +346,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<!-- Password Reset Container -->
|
||||||
|
<div id="passwordResetContainer" class="password-reset-container">
|
||||||
|
<p>Passwort vergessen? Kein Problem!</p>
|
||||||
|
<button type="button" id="resetPasswordBtn" class="btn btn-reset">Passwort zurücksetzen</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="toggle-form">
|
<div class="toggle-form">
|
||||||
<p>Don't have an account? <button type="button" onclick="toggleForm()">Sign Up</button></p>
|
<p>Don't have an account? <button type="button" onclick="toggleForm()">Sign Up</button></p>
|
||||||
</div>
|
</div>
|
||||||
@@ -330,6 +411,7 @@
|
|||||||
loginForm.classList.add('active');
|
loginForm.classList.add('active');
|
||||||
}
|
}
|
||||||
clearMessage();
|
clearMessage();
|
||||||
|
showPasswordReset(false); // Hide password reset when switching forms
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show message
|
// Show message
|
||||||
@@ -346,6 +428,16 @@
|
|||||||
document.getElementById('message').innerHTML = '';
|
document.getElementById('message').innerHTML = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Show/hide password reset container
|
||||||
|
function showPasswordReset(show) {
|
||||||
|
const resetContainer = document.getElementById('passwordResetContainer');
|
||||||
|
if (show) {
|
||||||
|
resetContainer.classList.add('active');
|
||||||
|
} else {
|
||||||
|
resetContainer.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Show/hide loading
|
// Show/hide loading
|
||||||
function setLoading(show) {
|
function setLoading(show) {
|
||||||
const loading = document.getElementById('loading');
|
const loading = document.getElementById('loading');
|
||||||
@@ -361,6 +453,7 @@
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
clearMessage();
|
clearMessage();
|
||||||
|
showPasswordReset(false); // Hide reset button initially
|
||||||
|
|
||||||
const email = document.getElementById('loginEmail').value;
|
const email = document.getElementById('loginEmail').value;
|
||||||
const password = document.getElementById('loginPassword').value;
|
const password = document.getElementById('loginPassword').value;
|
||||||
@@ -373,6 +466,8 @@
|
|||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
showMessage(error.message, 'error');
|
showMessage(error.message, 'error');
|
||||||
|
// Show password reset button on login failure
|
||||||
|
showPasswordReset(true);
|
||||||
} else {
|
} else {
|
||||||
showMessage('Login successful! Redirecting...', 'success');
|
showMessage('Login successful! Redirecting...', 'success');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -381,6 +476,7 @@
|
|||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
showMessage('An unexpected error occurred', 'error');
|
showMessage('An unexpected error occurred', 'error');
|
||||||
|
showPasswordReset(true);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
@@ -433,6 +529,36 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Handle password reset
|
||||||
|
document.getElementById('resetPasswordBtn').addEventListener('click', async () => {
|
||||||
|
const email = document.getElementById('loginEmail').value;
|
||||||
|
|
||||||
|
if (!email) {
|
||||||
|
showMessage('Bitte geben Sie zuerst Ihre E-Mail-Adresse ein', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
clearMessage();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { error } = await supabase.auth.resetPasswordForEmail(email, {
|
||||||
|
redirectTo: `${window.location.origin}/reset-password.html`
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
showMessage('Fehler beim Senden der E-Mail: ' + error.message, 'error');
|
||||||
|
} else {
|
||||||
|
showMessage('Passwort-Reset-E-Mail wurde gesendet! Bitte überprüfen Sie Ihr E-Mail-Postfach.', 'success');
|
||||||
|
showPasswordReset(false);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showMessage('Ein unerwarteter Fehler ist aufgetreten', 'error');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Check authentication on page load
|
// Check authentication on page load
|
||||||
checkAuth();
|
checkAuth();
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
457
public/reset-password.html
Normal file
457
public/reset-password.html
Normal file
@@ -0,0 +1,457 @@
|
|||||||
|
<!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>
|
||||||
|
|
||||||
|
<!-- Supabase -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Reset und Basis-Styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 50%, #020617 100%);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #e2e8f0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: rgba(30, 41, 59, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(51, 65, 85, 0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 40px;
|
||||||
|
max-width: 500px;
|
||||||
|
width: 90%;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
display: block;
|
||||||
|
color: #e2e8f0;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 20px;
|
||||||
|
background: #1e293b;
|
||||||
|
border: 2px solid #334155;
|
||||||
|
border-radius: 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #00d4ff;
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input::placeholder {
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 30px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #00d4ff, #0891b2);
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: #00d4ff;
|
||||||
|
border: 2px solid #00d4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #00d4ff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.success {
|
||||||
|
background: rgba(34, 197, 94, 0.1);
|
||||||
|
border: 1px solid #22c55e;
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.error {
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
border: 1px solid #ef4444;
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.info {
|
||||||
|
background: rgba(59, 130, 246, 0.1);
|
||||||
|
border: 1px solid #3b82f6;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: none;
|
||||||
|
text-align: center;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 3px solid #334155;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-top-color: #00d4ff;
|
||||||
|
animation: spin 1s ease-in-out infinite;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
color: #00d4ff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
color: #0891b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
margin: 20px;
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input, .btn {
|
||||||
|
padding: 12px 15px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 20px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">🥷 NINJACROSS</div>
|
||||||
|
<div class="tagline">Die ultimative Timer-Rangliste</div>
|
||||||
|
|
||||||
|
<h1 class="title">Passwort zurücksetzen 🔐</h1>
|
||||||
|
<p class="subtitle">Gib dein neues Passwort ein, um dein Konto zu sichern</p>
|
||||||
|
|
||||||
|
<div id="messageContainer"></div>
|
||||||
|
|
||||||
|
<form id="resetForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="newPassword" class="form-label">Neues Passwort</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="newPassword"
|
||||||
|
name="newPassword"
|
||||||
|
class="form-input"
|
||||||
|
placeholder="Mindestens 8 Zeichen"
|
||||||
|
required
|
||||||
|
minlength="8"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="confirmPassword" class="form-label">Passwort bestätigen</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="confirmPassword"
|
||||||
|
name="confirmPassword"
|
||||||
|
class="form-input"
|
||||||
|
placeholder="Passwort wiederholen"
|
||||||
|
required
|
||||||
|
minlength="8"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary" id="resetBtn">
|
||||||
|
🔄 Passwort zurücksetzen
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="loading" id="loading">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
Passwort wird zurückgesetzt...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="/" class="back-link">← Zurück zur Hauptseite</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Supabase Konfiguration
|
||||||
|
const supabaseUrl = 'https://lfxlplnypzvjrhftaoog.supabase.co';
|
||||||
|
const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImxmeGxwbG55cHp2anJoZnRhb29nIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTY4OTc2OTMsImV4cCI6MjA3MjQ3MzY5M30.8QZQZQZQZQZQZQZQZQZQZQZQZQZQZQZQZQZQZQZQZQ';
|
||||||
|
|
||||||
|
const supabase = window.supabase.createClient(supabaseUrl, supabaseKey);
|
||||||
|
|
||||||
|
// DOM Elemente
|
||||||
|
const resetForm = document.getElementById('resetForm');
|
||||||
|
const newPasswordInput = document.getElementById('newPassword');
|
||||||
|
const confirmPasswordInput = document.getElementById('confirmPassword');
|
||||||
|
const resetBtn = document.getElementById('resetBtn');
|
||||||
|
const loading = document.getElementById('loading');
|
||||||
|
const messageContainer = document.getElementById('messageContainer');
|
||||||
|
|
||||||
|
// URL-Parameter extrahieren
|
||||||
|
const urlParams = new URLSearchParams(window.location.hash.substring(1));
|
||||||
|
const accessToken = urlParams.get('access_token');
|
||||||
|
const refreshToken = urlParams.get('refresh_token');
|
||||||
|
const tokenType = urlParams.get('token_type');
|
||||||
|
|
||||||
|
// Prüfen ob Reset-Token vorhanden ist
|
||||||
|
if (!accessToken) {
|
||||||
|
showMessage('error', 'Ungültiger oder fehlender Reset-Link. Bitte fordere einen neuen Reset-Link an.');
|
||||||
|
resetForm.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Session mit Token setzen
|
||||||
|
async function setSession() {
|
||||||
|
try {
|
||||||
|
const { data, error } = await supabase.auth.setSession({
|
||||||
|
access_token: accessToken,
|
||||||
|
refresh_token: refreshToken
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Session erfolgreich gesetzt:', data.user?.email);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Setzen der Session:', error);
|
||||||
|
showMessage('error', 'Fehler beim Laden des Reset-Links. Bitte versuche es erneut.');
|
||||||
|
resetForm.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Passwort zurücksetzen
|
||||||
|
async function resetPassword(newPassword) {
|
||||||
|
try {
|
||||||
|
const { data, error } = await supabase.auth.updateUser({
|
||||||
|
password: newPassword
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: true, data };
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Fehler beim Zurücksetzen des Passworts:', error);
|
||||||
|
return { success: false, error: error.message };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nachricht anzeigen
|
||||||
|
function showMessage(type, message) {
|
||||||
|
messageContainer.innerHTML = `
|
||||||
|
<div class="message ${type}">
|
||||||
|
${message}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Formular-Validierung
|
||||||
|
function validateForm() {
|
||||||
|
const newPassword = newPasswordInput.value;
|
||||||
|
const confirmPassword = confirmPasswordInput.value;
|
||||||
|
|
||||||
|
if (newPassword.length < 8) {
|
||||||
|
showMessage('error', 'Das Passwort muss mindestens 8 Zeichen lang sein.');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newPassword !== confirmPassword) {
|
||||||
|
showMessage('error', 'Die Passwörter stimmen nicht überein.');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Formular-Submit Handler
|
||||||
|
resetForm.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!validateForm()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// UI-Status ändern
|
||||||
|
resetBtn.disabled = true;
|
||||||
|
loading.style.display = 'block';
|
||||||
|
resetForm.style.display = 'none';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await resetPassword(newPasswordInput.value);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
showMessage('success', '✅ Passwort erfolgreich zurückgesetzt! Du wirst zur Hauptseite weitergeleitet...');
|
||||||
|
|
||||||
|
// Nach 3 Sekunden zur Hauptseite weiterleiten
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = '/';
|
||||||
|
}, 3000);
|
||||||
|
} else {
|
||||||
|
showMessage('error', `❌ Fehler beim Zurücksetzen: ${result.error}`);
|
||||||
|
resetForm.style.display = 'block';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showMessage('error', '❌ Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es erneut.');
|
||||||
|
resetForm.style.display = 'block';
|
||||||
|
} finally {
|
||||||
|
resetBtn.disabled = false;
|
||||||
|
loading.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Session beim Laden der Seite setzen
|
||||||
|
setSession();
|
||||||
|
|
||||||
|
// Passwort-Sicherheitshinweise
|
||||||
|
newPasswordInput.addEventListener('input', function() {
|
||||||
|
const password = this.value;
|
||||||
|
const hasLength = password.length >= 8;
|
||||||
|
const hasUpper = /[A-Z]/.test(password);
|
||||||
|
const hasLower = /[a-z]/.test(password);
|
||||||
|
const hasNumber = /\d/.test(password);
|
||||||
|
const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
||||||
|
|
||||||
|
if (password.length > 0) {
|
||||||
|
let hints = [];
|
||||||
|
if (!hasLength) hints.push('Mindestens 8 Zeichen');
|
||||||
|
if (!hasUpper) hints.push('Großbuchstaben');
|
||||||
|
if (!hasLower) hints.push('Kleinbuchstaben');
|
||||||
|
if (!hasNumber) hints.push('Zahlen');
|
||||||
|
if (!hasSpecial) hints.push('Sonderzeichen');
|
||||||
|
|
||||||
|
if (hints.length > 0) {
|
||||||
|
showMessage('info', `💡 Tipp: Verwende auch ${hints.join(', ')} für ein sicheres Passwort.`);
|
||||||
|
} else {
|
||||||
|
showMessage('success', '✅ Starkes Passwort!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -132,6 +132,15 @@ app.get('/dashboard', (req, res) => {
|
|||||||
res.sendFile(path.join(__dirname, 'public', 'dashboard.html'));
|
res.sendFile(path.join(__dirname, 'public', 'dashboard.html'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset Password Page
|
||||||
|
* Seite für das Zurücksetzen von Passwörtern über Supabase
|
||||||
|
* Wird von Supabase E-Mail-Links aufgerufen
|
||||||
|
*/
|
||||||
|
app.get('/reset-password.html', (req, res) => {
|
||||||
|
res.sendFile(path.join(__dirname, 'public', 'reset-password.html'));
|
||||||
|
});
|
||||||
|
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
// STATIC FILE SERVING
|
// STATIC FILE SERVING
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
|
|||||||
Reference in New Issue
Block a user