feat(contact): nouvelle template email terminal-style
This commit is contained in:
@@ -36,12 +36,85 @@ export default defineEventHandler(async (event) => {
|
||||
return map[c] ?? c
|
||||
})
|
||||
|
||||
const escapedEmail = email.replace(/[&<>"']/g, (c: string) => {
|
||||
const map: Record<string, string> = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }
|
||||
return map[c] ?? c
|
||||
})
|
||||
|
||||
const dateStr = new Date().toLocaleString('fr-FR', {
|
||||
day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
timeZone: 'Europe/Paris',
|
||||
})
|
||||
|
||||
const html = `<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"></head>
|
||||
<body style="margin:0;padding:0;background-color:#030712;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#030712;padding:40px 16px;">
|
||||
<tr><td align="center">
|
||||
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;width:100%;">
|
||||
<tr><td style="padding:32px 40px 24px;background-color:#0a0f1a;border-radius:16px 16px 0 0;border-bottom:1px solid #1f2937;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td><span style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.025em;">Killian' DAL-CIN</span></td>
|
||||
<td align="right">
|
||||
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#85cb85;margin-right:6px;vertical-align:middle;"></span>
|
||||
<span style="font-size:12px;font-family:'Courier New',monospace;color:#85cb85;letter-spacing:0.05em;text-transform:uppercase;">New Message</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td style="padding:0;background-color:#0a0f1a;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr><td style="padding:28px 40px 20px;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#111827;border-radius:12px;border:1px solid #1f2937;">
|
||||
<tr><td style="padding:10px 16px;border-bottom:1px solid #1f2937;">
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#ef4444;margin-right:6px;opacity:0.7;"></span>
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#eab308;margin-right:6px;opacity:0.7;"></span>
|
||||
<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#22c55e;opacity:0.7;"></span>
|
||||
<span style="font-family:'Courier New',monospace;font-size:11px;color:#6b7280;margin-left:12px;">contact@portfolio</span>
|
||||
</td></tr>
|
||||
<tr><td style="padding:20px;">
|
||||
<div style="font-family:'Courier New',monospace;font-size:13px;line-height:2;color:#9ca3af;">
|
||||
<span style="color:#85cb85;">$</span> <span style="color:#6b7280;">from:</span> <span style="color:#ffffff;font-weight:600;">${escapedName}</span><br>
|
||||
<span style="color:#85cb85;">$</span> <span style="color:#6b7280;">email:</span> <a href="mailto:${escapedEmail}" style="color:#85cb85;text-decoration:none;">${escapedEmail}</a><br>
|
||||
<span style="color:#85cb85;">$</span> <span style="color:#6b7280;">date:</span> <span style="color:#d1d5db;">${dateStr}</span>
|
||||
</div>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr><td style="padding:0 40px;"><div style="height:1px;background:linear-gradient(to right,transparent,#1f2937,#3f8c3f,#1f2937,transparent);"></div></td></tr>
|
||||
</table>
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr><td style="padding:28px 40px 36px;">
|
||||
<p style="margin:0 0 12px;font-family:'Courier New',monospace;font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.1em;">Message</p>
|
||||
<div style="font-size:15px;line-height:1.7;color:#e5e7eb;">${escapedMessage.replace(/\n/g, '<br>')}</div>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td style="padding:20px 40px 28px;background-color:#0a0f1a;border-radius:0 0 16px 16px;border-top:1px solid #1f2937;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td><span style="font-size:12px;color:#4b5563;">killiandalcin.fr</span></td>
|
||||
<td align="right"><span style="font-size:11px;font-family:'Courier New',monospace;color:#374151;">Built with Nuxt</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
await transporter.sendMail({
|
||||
from: `"Portfolio" <${config.smtpUser}>`,
|
||||
from: `"Portfolio Killian'" <${config.smtpUser}>`,
|
||||
to: config.smtpTo,
|
||||
subject: `Contact portfolio - ${name}`,
|
||||
replyTo: email,
|
||||
subject: `Nouveau message — ${name}`,
|
||||
text: `De: ${name} <${email}>\n\n${message}`,
|
||||
html: `<p><strong>De:</strong> ${escapedName} <${email}></p><p>${escapedMessage.replace(/\n/g, '<br>')}</p>`,
|
||||
html,
|
||||
})
|
||||
|
||||
return { success: true }
|
||||
|
||||
Reference in New Issue
Block a user