full upgrade
This commit is contained in:
@@ -3,412 +3,199 @@ import nodemailer from "nodemailer";
|
||||
import SMTPTransport from "nodemailer/lib/smtp-transport";
|
||||
import Mail from "nodemailer/lib/mailer";
|
||||
|
||||
// Email templates with beautiful designs
|
||||
const BRAND = {
|
||||
siteUrl: "https://dk0.dev",
|
||||
email: "contact@dk0.dev",
|
||||
bg: "#FDFCF8",
|
||||
sand: "#F3F1E7",
|
||||
border: "#E7E5E4",
|
||||
text: "#292524",
|
||||
muted: "#78716C",
|
||||
mint: "#A7F3D0",
|
||||
red: "#EF4444",
|
||||
};
|
||||
|
||||
function escapeHtml(input: string): string {
|
||||
return input
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function nl2br(input: string): string {
|
||||
return input.replace(/\r\n|\r|\n/g, "<br>");
|
||||
}
|
||||
|
||||
function baseEmail(opts: { title: string; subtitle: string; bodyHtml: string }) {
|
||||
const sentAt = new Date().toLocaleString("de-DE", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${escapeHtml(opts.title)}</title>
|
||||
</head>
|
||||
<body style="margin:0;padding:0;background-color:${BRAND.bg};font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:${BRAND.text};">
|
||||
<div style="max-width:640px;margin:0 auto;padding:28px 14px;">
|
||||
<div style="background:#ffffff;border:1px solid ${BRAND.border};border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.08);">
|
||||
<div style="background:${BRAND.text};padding:22px 26px;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
|
||||
<div style="font-weight:800;font-size:16px;color:${BRAND.bg};">Dennis Konkol</div>
|
||||
<div style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-weight:800;font-size:14px;color:${BRAND.bg};">
|
||||
dk<span style="color:${BRAND.red};">0</span>.dev
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px;">
|
||||
<div style="font-size:22px;font-weight:900;letter-spacing:-0.02em;color:${BRAND.bg};">${escapeHtml(opts.title)}</div>
|
||||
<div style="margin-top:4px;font-size:13px;color:#d6d3d1;">${escapeHtml(opts.subtitle)} • ${sentAt}</div>
|
||||
</div>
|
||||
<div style="height:3px;background:${BRAND.mint};margin-top:18px;border-radius:999px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="padding:26px;">
|
||||
${opts.bodyHtml}
|
||||
</div>
|
||||
|
||||
<div style="padding:18px 26px;background:${BRAND.bg};border-top:1px solid ${BRAND.border};">
|
||||
<div style="font-size:12px;color:${BRAND.muted};line-height:1.5;">
|
||||
Automatisch generiert von <a href="${BRAND.siteUrl}" style="color:${BRAND.text};text-decoration:underline;">dk0.dev</a> •
|
||||
<a href="mailto:${BRAND.email}" style="color:${BRAND.text};text-decoration:underline;">${BRAND.email}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
const emailTemplates = {
|
||||
welcome: {
|
||||
subject: "Vielen Dank für deine Nachricht! 👋",
|
||||
template: (name: string, originalMessage: string) => `
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Willkommen - Dennis Konkol</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
||||
|
||||
<!-- Header -->
|
||||
<div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
||||
👋 Hallo ${name}!
|
||||
</h1>
|
||||
<p style="color: #d1fae5; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
||||
Vielen Dank für deine Nachricht
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="padding: 40px 30px;">
|
||||
|
||||
<!-- Welcome Message -->
|
||||
<div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #bbf7d0;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
||||
<span style="color: #ffffff; font-size: 24px;">✓</span>
|
||||
</div>
|
||||
<h2 style="color: #065f46; margin: 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
|
||||
</div>
|
||||
<p style="color: #047857; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
|
||||
Vielen Dank für deine Nachricht! Ich habe sie erhalten und werde mich so schnell wie möglich bei dir melden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Original Message Reference -->
|
||||
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
|
||||
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
|
||||
<span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
|
||||
Deine ursprüngliche Nachricht
|
||||
</h3>
|
||||
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
|
||||
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
|
||||
<h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
|
||||
🚀 Was passiert als nächstes?
|
||||
</h3>
|
||||
<div style="display: grid; gap: 15px;">
|
||||
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
||||
<span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">📧</span>
|
||||
<div>
|
||||
<h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Schnelle Antwort</h4>
|
||||
<p style="color: #4b5563; margin: 0; font-size: 14px;">Ich antworte normalerweise innerhalb von 24 Stunden</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
|
||||
<span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">💼</span>
|
||||
<div>
|
||||
<h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Projekt-Diskussion</h4>
|
||||
<p style="color: #4b5563; margin: 0; font-size: 14px;">Gerne besprechen wir dein Projekt im Detail</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
|
||||
<span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🤝</span>
|
||||
<div>
|
||||
<h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Zusammenarbeit</h4>
|
||||
<p style="color: #4b5563; margin: 0; font-size: 14px;">Lass uns gemeinsam etwas Großartiges schaffen!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Links -->
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<h3 style="color: #374151; margin: 0 0 20px 0; font-size: 18px; font-weight: 600;">Entdecke mehr von mir</h3>
|
||||
<div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
|
||||
<a href="https://dk0.dev" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
|
||||
🌐 Portfolio
|
||||
</a>
|
||||
<a href="https://github.com/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #374151 0%, #111827 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
|
||||
💻 GitHub
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #0077b5 0%, #005885 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
|
||||
💼 LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 1px;"></span>
|
||||
</div>
|
||||
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
|
||||
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
|
||||
<a href="https://dk0.dev" style="color: #10b981; text-decoration: none; font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-weight: bold;">dk<span style="color: #ef4444;">0</span>.dev</a> •
|
||||
<a href="mailto:contact@dk0.dev" style="color: #10b981; text-decoration: none;">contact@dk0.dev</a>
|
||||
</p>
|
||||
<p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
|
||||
${new Date().toLocaleString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
template: (name: string, originalMessage: string) => {
|
||||
const safeName = escapeHtml(name);
|
||||
const safeMsg = nl2br(escapeHtml(originalMessage));
|
||||
return baseEmail({
|
||||
title: `Danke, ${safeName}!`,
|
||||
subtitle: "Nachricht erhalten",
|
||||
bodyHtml: `
|
||||
<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
|
||||
Hey ${safeName},<br><br>
|
||||
danke für deine Nachricht — ich habe sie erhalten und melde mich so schnell wie möglich bei dir zurück.
|
||||
</div>
|
||||
|
||||
<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
|
||||
<div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
|
||||
<div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
|
||||
</div>
|
||||
<div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
|
||||
${safeMsg}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:20px;text-align:center;">
|
||||
<a href="${BRAND.siteUrl}" style="display:inline-block;background:${BRAND.text};color:${BRAND.bg};text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
|
||||
Portfolio ansehen
|
||||
</a>
|
||||
</div>
|
||||
`.trim(),
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
project: {
|
||||
subject: "Projekt-Anfrage erhalten! 🚀",
|
||||
template: (name: string, originalMessage: string) => `
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Projekt-Anfrage - Dennis Konkol</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
||||
|
||||
<!-- Header -->
|
||||
<div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
||||
🚀 Projekt-Anfrage erhalten!
|
||||
</h1>
|
||||
<p style="color: #e9d5ff; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
||||
Hallo ${name}, lass uns etwas Großartiges schaffen!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="padding: 40px 30px;">
|
||||
|
||||
<!-- Project Message -->
|
||||
<div style="background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e9d5ff;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
||||
<span style="color: #ffffff; font-size: 24px;">💼</span>
|
||||
</div>
|
||||
<h2 style="color: #6b21a8; margin: 0; font-size: 22px; font-weight: 600;">Bereit für dein Projekt!</h2>
|
||||
</div>
|
||||
<p style="color: #7c2d12; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
|
||||
Vielen Dank für deine Projekt-Anfrage! Ich bin gespannt darauf, mehr über deine Ideen zu erfahren und wie wir sie gemeinsam umsetzen können.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Original Message -->
|
||||
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
|
||||
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
|
||||
<span style="width: 6px; height: 6px; background: #8b5cf6; border-radius: 50%; margin-right: 10px;"></span>
|
||||
Deine Projekt-Nachricht
|
||||
</h3>
|
||||
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #8b5cf6;">
|
||||
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Process Steps -->
|
||||
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
|
||||
<h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
|
||||
🎯 Mein Arbeitsprozess
|
||||
</h3>
|
||||
<div style="display: grid; gap: 15px;">
|
||||
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
||||
<span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">💬</span>
|
||||
<div>
|
||||
<h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">1. Erstgespräch</h4>
|
||||
<p style="color: #4b5563; margin: 0; font-size: 14px;">Wir besprechen deine Anforderungen im Detail</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
|
||||
<span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">📋</span>
|
||||
<div>
|
||||
<h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">2. Konzept & Planung</h4>
|
||||
<p style="color: #4b5563; margin: 0; font-size: 14px;">Ich erstelle ein detailliertes Konzept für dein Projekt</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #10b981;">
|
||||
<span style="color: #10b981; font-size: 20px; margin-right: 15px;">⚡</span>
|
||||
<div>
|
||||
<h4 style="color: #059669; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">3. Entwicklung</h4>
|
||||
<p style="color: #4b5563; margin: 0; font-size: 14px;">Agile Entwicklung mit regelmäßigen Updates</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
|
||||
<span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🎉</span>
|
||||
<div>
|
||||
<h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">4. Launch & Support</h4>
|
||||
<p style="color: #4b5563; margin: 0; font-size: 14px;">Deployment und kontinuierlicher Support</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<a href="mailto:contact@dk0.dev?subject=Projekt-Diskussion mit ${name}" style="display: inline-block; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
||||
💬 Projekt besprechen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 1px;"></span>
|
||||
</div>
|
||||
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
|
||||
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
|
||||
<a href="https://dki.one" style="color: #8b5cf6; text-decoration: none;">dki.one</a> •
|
||||
<a href="mailto:contact@dk0.dev" style="color: #8b5cf6; text-decoration: none;">contact@dk0.dev</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
template: (name: string, originalMessage: string) => {
|
||||
const safeName = escapeHtml(name);
|
||||
const safeMsg = nl2br(escapeHtml(originalMessage));
|
||||
return baseEmail({
|
||||
title: `Projekt-Anfrage: danke, ${safeName}!`,
|
||||
subtitle: "Ich melde mich zeitnah",
|
||||
bodyHtml: `
|
||||
<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
|
||||
Hey ${safeName},<br><br>
|
||||
mega — danke für die Projekt-Anfrage. Ich schaue mir deine Nachricht an und komme mit Rückfragen/Ideen auf dich zu.
|
||||
</div>
|
||||
|
||||
<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
|
||||
<div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
|
||||
<div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Projekt-Nachricht</div>
|
||||
</div>
|
||||
<div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
|
||||
${safeMsg}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:20px;text-align:center;">
|
||||
<a href="mailto:${BRAND.email}" style="display:inline-block;background:${BRAND.text};color:${BRAND.bg};text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
|
||||
Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
`.trim(),
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
quick: {
|
||||
subject: "Danke für deine Nachricht! ⚡",
|
||||
template: (name: string, originalMessage: string) => `
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Quick Response - Dennis Konkol</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
||||
|
||||
<!-- Header -->
|
||||
<div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
||||
⚡ Schnelle Antwort!
|
||||
</h1>
|
||||
<p style="color: #fef3c7; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
||||
Hallo ${name}, danke für deine Nachricht!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="padding: 40px 30px;">
|
||||
|
||||
<!-- Quick Response -->
|
||||
<div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #fde68a;">
|
||||
<div style="text-align: center;">
|
||||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
||||
<span style="color: #ffffff; font-size: 24px;">⚡</span>
|
||||
</div>
|
||||
<h2 style="color: #92400e; margin: 0 0 15px 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
|
||||
<p style="color: #a16207; margin: 0; line-height: 1.6; font-size: 16px;">
|
||||
Vielen Dank für deine Nachricht! Ich werde mich so schnell wie möglich bei dir melden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Original Message -->
|
||||
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
|
||||
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
|
||||
<span style="width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; margin-right: 10px;"></span>
|
||||
Deine Nachricht
|
||||
</h3>
|
||||
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #f59e0b;">
|
||||
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Info -->
|
||||
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 25px; border-radius: 12px; border: 1px solid #bfdbfe;">
|
||||
<h3 style="color: #1e40af; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; text-align: center;">
|
||||
📞 Kontakt
|
||||
</h3>
|
||||
<p style="color: #1e40af; margin: 0; text-align: center; line-height: 1.6; font-size: 14px;">
|
||||
<strong>E-Mail:</strong> <a href="mailto:contact@dk0.dev" style="color: #1e40af; text-decoration: none;">contact@dk0.dev</a><br>
|
||||
<strong>Portfolio:</strong> <a href="https://dki.one" style="color: #1e40af; text-decoration: none;">dki.one</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 1px;"></span>
|
||||
</div>
|
||||
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
|
||||
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
|
||||
<a href="https://dki.one" style="color: #f59e0b; text-decoration: none;">dki.one</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
template: (name: string, originalMessage: string) => {
|
||||
const safeName = escapeHtml(name);
|
||||
const safeMsg = nl2br(escapeHtml(originalMessage));
|
||||
return baseEmail({
|
||||
title: `Danke, ${safeName}!`,
|
||||
subtitle: "Kurze Bestätigung",
|
||||
bodyHtml: `
|
||||
<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
|
||||
Hey ${safeName},<br><br>
|
||||
kurze Bestätigung: deine Nachricht ist angekommen. Ich melde mich bald zurück.
|
||||
</div>
|
||||
|
||||
<div style="margin-top:18px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
|
||||
<div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
|
||||
<div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Deine Nachricht</div>
|
||||
</div>
|
||||
<div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
|
||||
${safeMsg}
|
||||
</div>
|
||||
</div>
|
||||
`.trim(),
|
||||
});
|
||||
},
|
||||
},
|
||||
reply: {
|
||||
subject: "Antwort auf deine Nachricht 📧",
|
||||
template: (name: string, originalMessage: string) => `
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Antwort - Dennis Konkol</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
||||
|
||||
<!-- Header -->
|
||||
<div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
||||
📧 Hallo ${name}!
|
||||
</h1>
|
||||
<p style="color: #dbeafe; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
||||
Hier ist meine Antwort auf deine Nachricht
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="padding: 40px 30px;">
|
||||
|
||||
<!-- Reply Message -->
|
||||
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #93c5fd;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
||||
<span style="color: #ffffff; font-size: 24px;">💬</span>
|
||||
</div>
|
||||
<h2 style="color: #1e40af; margin: 0; font-size: 22px; font-weight: 600;">Meine Antwort</h2>
|
||||
</div>
|
||||
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
||||
<p style="color: #1e40af; margin: 0; line-height: 1.6; font-size: 16px; white-space: pre-wrap;">${originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Original Message Reference -->
|
||||
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
|
||||
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
|
||||
<span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
|
||||
Deine ursprüngliche Nachricht
|
||||
</h3>
|
||||
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
||||
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div style="background: #f8fafc; padding: 25px; border-radius: 12px; text-align: center; border: 1px solid #e2e8f0;">
|
||||
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 18px; font-weight: 600;">Weitere Fragen?</h3>
|
||||
<p style="color: #6b7280; margin: 0 0 20px 0; line-height: 1.6;">
|
||||
Falls du weitere Fragen hast oder mehr über meine Projekte erfahren möchtest, zögere nicht, mir zu schreiben!
|
||||
</p>
|
||||
<div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
|
||||
<a href="https://dki.one" style="display: inline-flex; align-items: center; padding: 12px 24px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500; transition: all 0.2s;">
|
||||
🌐 Portfolio besuchen
|
||||
</a>
|
||||
<a href="mailto:contact@dk0.dev" style="display: inline-flex; align-items: center; padding: 12px 24px; background: #ffffff; color: #3b82f6; text-decoration: none; border-radius: 8px; font-weight: 500; border: 2px solid #3b82f6; transition: all 0.2s;">
|
||||
📧 Direkt antworten
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
||||
<p style="color: #6b7280; margin: 0 0 10px 0; font-size: 14px; font-weight: 500;">
|
||||
<strong>Dennis Konkol</strong> • <a href="https://dki.one" style="color: #3b82f6; text-decoration: none;">dki.one</a>
|
||||
</p>
|
||||
<p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
|
||||
${new Date().toLocaleString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
template: (name: string, originalMessage: string) => {
|
||||
const safeName = escapeHtml(name);
|
||||
const safeMsg = nl2br(escapeHtml(originalMessage));
|
||||
return baseEmail({
|
||||
title: `Antwort für ${safeName}`,
|
||||
subtitle: "Neue Nachricht",
|
||||
bodyHtml: `
|
||||
<div style="font-size:15px;line-height:1.65;color:${BRAND.text};">
|
||||
Hey ${safeName},<br><br>
|
||||
hier ist meine Antwort:
|
||||
</div>
|
||||
|
||||
<div style="margin-top:14px;background:${BRAND.bg};border:1px solid ${BRAND.border};border-radius:16px;overflow:hidden;">
|
||||
<div style="padding:14px 16px;background:${BRAND.sand};border-bottom:1px solid ${BRAND.border};">
|
||||
<div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">Antwort</div>
|
||||
</div>
|
||||
<div style="padding:16px;line-height:1.65;color:${BRAND.text};font-size:14px;border-left:4px solid ${BRAND.mint};">
|
||||
${safeMsg}
|
||||
</div>
|
||||
</div>
|
||||
`.trim(),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
|
||||
Reference in New Issue
Block a user