mmintel
7bceb6cd2b
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Build & Deploy / 🏗️ Build (push) Successful in 8m18s
Build & Deploy / 🚀 Deploy (push) Successful in 21s
Build & Deploy / 🩺 Smoke Test (push) Failing after 3s
Build & Deploy / 🔔 Notify (push) Successful in 2s
Nightly QA / 📝 E2E (push) Successful in 3m4s
Nightly QA / 🔍 Static Analysis (push) Successful in 3m55s
Nightly QA / 🎭 Lighthouse (push) Successful in 2m21s
Nightly QA / 🔗 Links & Deps (push) Successful in 1m52s
Nightly QA / 🔔 Notify (push) Has been skipped
138 lines
6.6 KiB
TypeScript
138 lines
6.6 KiB
TypeScript
import * as React from "react";
|
|
|
|
export const getInquiryEmailHtml = (data: any) => `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body { font-family: Georgia, 'Times New Roman', Times, serif; background-color: #f8fafc; color: #1e293b; margin: 0; padding: 40px 20px; line-height: 1.6; }
|
|
.wrapper { max-width: 600px; margin: 0 auto; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
|
.top-bar { background-color: #0f172a; color: #ffffff; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
|
|
.brand { font-family: system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
|
|
.status { font-family: ui-monospace, monospace; font-size: 9px; color: #10b981; text-transform: uppercase; font-weight: bold; }
|
|
.header { padding: 40px 32px 24px 32px; border-bottom: 2px solid #f1f5f9; }
|
|
.heading { font-family: system-ui, sans-serif; font-size: 24px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.02em; }
|
|
.content { padding: 32px; }
|
|
.data-grid { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
|
|
.data-row td { padding: 12px 0; border-bottom: 1px solid #f8fafc; vertical-align: top; }
|
|
.label { font-family: system-ui, sans-serif; font-size: 9px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; width: 140px; }
|
|
.value { font-size: 15px; color: #334155; }
|
|
.message-container { background-color: #f8fafc; border: 1px solid #f1f5f9; border-radius: 4px; padding: 24px; margin-top: 12px; }
|
|
.message-text { font-family: Georgia, serif; font-size: 16px; color: #1e293b; white-space: pre-wrap; margin: 0; }
|
|
.config-code { font-family: ui-monospace, monospace; font-size: 12px; color: #64748b; background: #f1f5f9; padding: 16px; border-radius: 4px; display: block; overflow-x: auto; }
|
|
.footer { padding: 32px; color: #94a3b8; font-size: 11px; text-align: center; border-top: 1px solid #f1f5f9; }
|
|
.footer-meta { font-family: ui-monospace, monospace; font-size: 9px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<div class="top-bar">
|
|
<div class="brand">MINTEL_TECHNICAL_OPERATIONS</div>
|
|
<div class="status">● INCOMING_INQUIRY</div>
|
|
</div>
|
|
|
|
<div class="header">
|
|
<h1 class="heading">${data.isFreeText ? "Direktanfrage" : "System-Konfiguration"}</h1>
|
|
<p style="margin: 8px 0 0 0; color: #64748b; font-size: 14px;">Eingang für ${data.companyName || data.name}</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<table class="data-grid">
|
|
<tr class="data-row">
|
|
<td class="label">Absender</td>
|
|
<td class="value"><strong>${data.name}</strong><br/><span style="color: #94a3b8; font-size: 13px;">${data.email}</span></td>
|
|
</tr>
|
|
${data.phone ? `
|
|
<tr class="data-row">
|
|
<td class="label">Telefon</td>
|
|
<td class="value">${data.phone}</td>
|
|
</tr>` : ""}
|
|
${data.role ? `
|
|
<tr class="data-row">
|
|
<td class="label">Position</td>
|
|
<td class="value">${data.role}</td>
|
|
</tr>` : ""}
|
|
<tr class="data-row">
|
|
<td class="label">Unternehmen</td>
|
|
<td class="value">${data.companyName || "—"}</td>
|
|
</tr>
|
|
<tr class="data-row">
|
|
<td class="label">Projekt-Typ</td>
|
|
<td class="value">${data.projectType}</td>
|
|
</tr>
|
|
${data.deadline ? `
|
|
<tr class="data-row">
|
|
<td class="label">Zeitraum</td>
|
|
<td class="value">${data.deadline}</td>
|
|
</tr>` : ""}
|
|
</table>
|
|
|
|
${data.isFreeText ? `
|
|
<div class="label" style="margin-bottom: 8px;">Nachricht</div>
|
|
<div class="message-container">
|
|
<div class="message-text">${data.message}</div>
|
|
</div>
|
|
` : `
|
|
<div class="label" style="margin-bottom: 8px;">Konfigurations-Daten</div>
|
|
<code class="config-code">${JSON.stringify(data.config, null, 2)}</code>
|
|
`}
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Dies ist eine systemgenerierte Benachrichtigung von mintel.me.<br/>
|
|
<div class="footer-meta">
|
|
TIMESTAMP: ${new Date().toISOString()} | STATUS: VALIDATED
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
export const getConfirmationEmailHtml = (data: any) => `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body { font-family: Georgia, 'Times New Roman', Times, serif; background-color: #ffffff; color: #1e293b; margin: 0; padding: 40px 20px; line-height: 1.8; }
|
|
.wrapper { max-width: 600px; margin: 0 auto; }
|
|
.logo-container { padding-bottom: 48px; border-bottom: 1px solid #f1f5f9; margin-bottom: 48px; }
|
|
.status-badge { display: inline-block; font-family: system-ui, sans-serif; font-size: 9px; font-weight: 800; color: #3b82f6; text-transform: uppercase; letter-spacing: 0.2em; border: 1px solid #dbeafe; background: #eff6ff; padding: 4px 12px; border-radius: 99px; margin-bottom: 24px; }
|
|
.greeting { font-family: system-ui, sans-serif; font-size: 32px; font-weight: 800; color: #0f172a; margin: 0 0 16px 0; letter-spacing: -0.03em; }
|
|
.body-text { font-size: 18px; color: #334155; margin-bottom: 32px; }
|
|
.cta-box { border-left: 2px solid #0f172a; padding: 8px 0 8px 24px; margin: 40px 0; }
|
|
.footer { margin-top: 80px; padding-top: 24px; border-top: 1px solid #f1f5f9; font-family: system-ui, sans-serif; font-size: 12px; color: #94a3b8; text-align: center; }
|
|
.footer a { color: #0f172a; text-decoration: none; font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<div class="logo-container">
|
|
<div class="status-badge">Anfrage eingegangen</div>
|
|
<h1 class="greeting">Hallo ${data.name.split(" ")[0]},</h1>
|
|
<p class="body-text">
|
|
vielen Dank für dein Interesse an einer Zusammenarbeit. Deine Nachricht bezüglich <strong>${data.companyName || "deines Projekts"}</strong> ist sicher bei mir angekommen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="body-text">
|
|
Ich werde mir die Details umgehend ansehen und mich in der Regel innerhalb der nächsten 24 Stunden persönlich bei dir zurückmelden, um die nächsten Schritte zu besprechen.
|
|
</div>
|
|
|
|
<div class="cta-box">
|
|
<p style="margin:0; font-style: italic; color: #64748b;">
|
|
„Technical problems are just puzzles with more moving parts.“
|
|
</p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
© ${new Date().getFullYear()} <a href="https://mintel.me">mintel.me</a> — Marc Mintel<br/>
|
|
Professional Website Systems & Technical Architecture
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`;
|