269 lines
13 KiB
HTML
269 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bestellbestätigung</title>
|
|
</head>
|
|
<body style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; color: #333333; background-color: #f5f5f5;">
|
|
|
|
<!-- Container -->
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f5f5f5;">
|
|
<tr>
|
|
<td style="padding: 20px 0;">
|
|
|
|
<!-- Email Content -->
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" align="center" style="background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
|
|
|
|
<!-- Header -->
|
|
<tr>
|
|
<td style="background-color: #1a365d; padding: 30px 40px; text-align: center;">
|
|
<h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: 700;">Bestellbestätigung</h1>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Greeting -->
|
|
<tr>
|
|
<td style="padding: 40px 40px 20px 40px;">
|
|
<p style="margin: 0 0 20px 0; font-size: 18px;">
|
|
Guten Tag {{ $json.body.customer_data.billing.firstName }} {{ $json.body.customer_data.billing.lastName }},
|
|
</p>
|
|
<p style="margin: 0 0 20px 0;">
|
|
vielen Dank für Ihre Bestellung bei Skrift. Wir haben Ihre Bestellung erhalten und werden diese schnellstmöglich bearbeiten.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Order Number Box -->
|
|
<tr>
|
|
<td style="padding: 0 40px 30px 40px;">
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f0f7ff; border-radius: 8px; border-left: 4px solid #1a365d;">
|
|
<tr>
|
|
<td style="padding: 20px;">
|
|
<p style="margin: 0; font-size: 14px; color: #666666;">Ihre Bestellnummer:</p>
|
|
<p style="margin: 5px 0 0 0; font-size: 24px; font-weight: 700; color: #1a365d;">{{ $json.body.order_number }}</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Divider -->
|
|
<tr>
|
|
<td style="padding: 0 40px;">
|
|
<hr style="border: none; border-top: 1px solid #e0e0e0; margin: 0;">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Order Details Section -->
|
|
<tr>
|
|
<td style="padding: 30px 40px 10px 40px;">
|
|
<h2 style="margin: 0 0 20px 0; font-size: 20px; color: #1a365d;">Ihre Bestellung</h2>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Product Info -->
|
|
<tr>
|
|
<td style="padding: 0 40px 20px 40px;">
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
<tr>
|
|
<td width="40%" style="padding: 8px 0; color: #666666;">Produkt:</td>
|
|
<td width="60%" style="padding: 8px 0; font-weight: 600;">{{ $json.body.product === 'businessbriefe' ? 'Business Briefe' : $json.body.product === 'business-postkarten' ? 'Business Postkarten' : $json.body.product === 'follow-ups' ? 'Follow-Ups' : $json.body.product === 'einladungen' ? 'Einladungen' : $json.body.product === 'private-briefe' ? 'Private Briefe' : $json.body.product }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px 0; color: #666666;">Menge:</td>
|
|
<td style="padding: 8px 0; font-weight: 600;">{{ $json.body.quantity }} Stück</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px 0; color: #666666;">Format:</td>
|
|
<td style="padding: 8px 0; font-weight: 600;">{{ $json.body.format === 'a4' ? 'A4 Hochformat' : $json.body.format === 'a6p' ? 'A6 Hochformat' : $json.body.format === 'a6l' ? 'A6 Querformat' : $json.body.format }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px 0; color: #666666;">Versand:</td>
|
|
<td style="padding: 8px 0; font-weight: 600;">{{ $json.body.shipping_mode === 'direct' ? 'Einzelversand durch Skrift' : 'Sammellieferung' }}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Envelope Info -->
|
|
{{ $json.body.envelope ? `
|
|
<tr>
|
|
<td style="padding: 0 40px 20px 40px;">
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #fafafa; border-radius: 6px;">
|
|
<tr>
|
|
<td style="padding: 15px;">
|
|
<p style="margin: 0 0 10px 0; font-weight: 600; color: #1a365d;">Umschlag</p>
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
<tr>
|
|
<td width="40%" style="padding: 4px 0; color: #666666; font-size: 14px;">Format:</td>
|
|
<td width="60%" style="padding: 4px 0; font-size: 14px;">${ $json.body.format === 'a4' ? 'DIN Lang' : 'C6' }</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 4px 0; color: #666666; font-size: 14px;">Beschriftung:</td>
|
|
<td style="padding: 4px 0; font-size: 14px;">${ $json.body.envelope_mode === 'recipientData' ? 'Empfängeradresse' : $json.body.envelope_mode === 'customText' ? 'Individueller Text' : 'Keine' }</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
` : '' }}
|
|
|
|
<!-- Divider -->
|
|
<tr>
|
|
<td style="padding: 10px 40px;">
|
|
<hr style="border: none; border-top: 1px solid #e0e0e0; margin: 0;">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Price Section -->
|
|
<tr>
|
|
<td style="padding: 20px 40px 10px 40px;">
|
|
<h2 style="margin: 0 0 20px 0; font-size: 20px; color: #1a365d;">Preisübersicht</h2>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td style="padding: 0 40px 20px 40px;">
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
<!-- Zwischensumme -->
|
|
<tr>
|
|
<td style="padding: 8px 0; color: #666666;">Zwischensumme (netto):</td>
|
|
<td style="padding: 8px 0; text-align: right;">{{ $json.body.quote.subtotalNet.toFixed(2).replace('.', ',') }} {{ $json.body.quote.currency }}</td>
|
|
</tr>
|
|
<!-- MwSt -->
|
|
<tr>
|
|
<td style="padding: 8px 0; color: #666666;">MwSt. ({{ Math.round($json.body.quote.vatRate * 100) }}%):</td>
|
|
<td style="padding: 8px 0; text-align: right;">{{ $json.body.quote.vatAmount.toFixed(2).replace('.', ',') }} {{ $json.body.quote.currency }}</td>
|
|
</tr>
|
|
<!-- Gutschein -->
|
|
{{ $json.body.quote.voucher ? `
|
|
<tr>
|
|
<td style="padding: 8px 0; color: #276749;">Gutschein (${ $json.body.quote.voucher.code }):</td>
|
|
<td style="padding: 8px 0; text-align: right; color: #276749;">-${ $json.body.quote.discountAmount.toFixed(2).replace('.', ',') } ${ $json.body.quote.currency }</td>
|
|
</tr>
|
|
` : '' }}
|
|
<!-- Trennlinie -->
|
|
<tr>
|
|
<td colspan="2" style="padding: 10px 0;">
|
|
<hr style="border: none; border-top: 2px solid #1a365d; margin: 0;">
|
|
</td>
|
|
</tr>
|
|
<!-- Gesamtbetrag -->
|
|
<tr>
|
|
<td style="padding: 8px 0; font-size: 18px; font-weight: 700; color: #1a365d;">Gesamtbetrag (brutto):</td>
|
|
<td style="padding: 8px 0; text-align: right; font-size: 18px; font-weight: 700; color: #1a365d;">{{ $json.body.quote.totalGross.toFixed(2).replace('.', ',') }} {{ $json.body.quote.currency }}</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Divider -->
|
|
<tr>
|
|
<td style="padding: 10px 40px;">
|
|
<hr style="border: none; border-top: 1px solid #e0e0e0; margin: 0;">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Billing Address -->
|
|
<tr>
|
|
<td style="padding: 20px 40px 10px 40px;">
|
|
<h2 style="margin: 0 0 20px 0; font-size: 20px; color: #1a365d;">Rechnungsadresse</h2>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td style="padding: 0 40px 20px 40px;">
|
|
<p style="margin: 0; line-height: 1.6;">
|
|
{{ $json.body.customer_data.billing.company ? `<strong>${$json.body.customer_data.billing.company}</strong><br>` : '' }}
|
|
{{ $json.body.customer_data.billing.firstName }} {{ $json.body.customer_data.billing.lastName }}<br>
|
|
{{ $json.body.customer_data.billing.street }}{{ $json.body.customer_data.billing.houseNumber ? ' ' + $json.body.customer_data.billing.houseNumber : '' }}<br>
|
|
{{ $json.body.customer_data.billing.zip }} {{ $json.body.customer_data.billing.city }}<br>
|
|
{{ $json.body.customer_data.billing.country }}<br>
|
|
<br>
|
|
E-Mail: {{ $json.body.customer_data.billing.email }}<br>
|
|
Telefon: {{ $json.body.customer_data.billing.phone }}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Shipping Address (falls abweichend) -->
|
|
{{ $json.body.customer_data.shippingDifferent ? `
|
|
<tr>
|
|
<td style="padding: 0 40px 10px 40px;">
|
|
<h2 style="margin: 0 0 20px 0; font-size: 20px; color: #1a365d;">Lieferadresse</h2>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 0 40px 20px 40px;">
|
|
<p style="margin: 0; line-height: 1.6;">
|
|
${ $json.body.customer_data.shipping.company ? '<strong>' + $json.body.customer_data.shipping.company + '</strong><br>' : '' }
|
|
${ $json.body.customer_data.shipping.firstName } ${ $json.body.customer_data.shipping.lastName }<br>
|
|
${ $json.body.customer_data.shipping.street }${ $json.body.customer_data.shipping.houseNumber ? ' ' + $json.body.customer_data.shipping.houseNumber : '' }<br>
|
|
${ $json.body.customer_data.shipping.zip } ${ $json.body.customer_data.shipping.city }<br>
|
|
${ $json.body.customer_data.shipping.country }
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
` : '' }}
|
|
|
|
<!-- Divider -->
|
|
<tr>
|
|
<td style="padding: 10px 40px;">
|
|
<hr style="border: none; border-top: 1px solid #e0e0e0; margin: 0;">
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Next Steps -->
|
|
<tr>
|
|
<td style="padding: 20px 40px;">
|
|
<h2 style="margin: 0 0 15px 0; font-size: 20px; color: #1a365d;">Wie geht es weiter?</h2>
|
|
<ol style="margin: 0; padding: 0 0 0 20px; line-height: 1.8;">
|
|
<li>Wir prüfen Ihre Bestellung und bereiten die Produktion vor.</li>
|
|
<li>Nach Fertigstellung erhalten Sie eine Versandbestätigung.</li>
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Contact Info -->
|
|
<tr>
|
|
<td style="padding: 20px 40px 30px 40px;">
|
|
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f5f5f5; border-radius: 6px;">
|
|
<tr>
|
|
<td style="padding: 20px; text-align: center;">
|
|
<p style="margin: 0 0 10px 0; font-weight: 600;">Fragen zu Ihrer Bestellung?</p>
|
|
<p style="margin: 0; font-size: 14px; color: #666666;">
|
|
Kontaktieren Sie uns unter<br>
|
|
<a href="mailto:hello@skrift.de" style="color: #1a365d; text-decoration: none;">hello@skrift.de</a>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td style="background-color: #f5f5f5; padding: 30px 40px; text-align: center; border-top: 1px solid #e0e0e0;">
|
|
<p style="margin: 0 0 10px 0; font-size: 14px; color: #666666;">
|
|
Mit freundlichen Grüßen<br>
|
|
<strong>Ihr Skrift-Team</strong>
|
|
</p>
|
|
<p style="margin: 20px 0 0 0; font-size: 12px; color: #999999;">
|
|
Skrift | Hundscheiderweg 4 | 66679 Losheim am See<br>
|
|
<a href="https://skrift.de" style="color: #1a365d; text-decoration: none;">www.skrift.de</a>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</body>
|
|
</html>
|