fix: revert email templates to inline styles for GMX webmail compat
GMX webmail strips <head> content including <style> blocks, rendering emails as unstyled plain text. Reverts to inline styles (the only reliable approach for email HTML) while keeping the proper HTML document structure and extra text content added for mail checker compliance. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,49 +5,29 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Your Cameleer verification code</title>
|
||||
<style>
|
||||
body { margin:0; padding:0; background:#f5f1eb; }
|
||||
.wrapper { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; max-width:480px; margin:0 auto; background:#fff; border-radius:8px; overflow:hidden; border:1px solid #e8e0d4; }
|
||||
.header { background:#C6820E; padding:20px 24px; text-align:center; }
|
||||
.header span { font-size:22px; font-weight:700; color:#fff; letter-spacing:0.5px; }
|
||||
.content { padding:32px 24px 24px; position:relative; overflow:hidden; }
|
||||
.watermark { position:absolute; top:-30px; right:-50px; width:320px; height:320px; opacity:0.07; pointer-events:none; border:0; outline:none; }
|
||||
.inner { position:relative; }
|
||||
.title { color:#1a1a1a; font-size:16px; font-weight:600; margin:0 0 8px; }
|
||||
.subtitle { color:#444; font-size:14px; line-height:1.6; margin:0 0 24px; }
|
||||
.code-box { text-align:center; margin:0 0 24px; }
|
||||
.code-box div { display:inline-block; background:#FDF6EC; border:2px solid #C6820E; border-radius:8px; padding:16px 32px; }
|
||||
.code-box span { font-size:32px; font-weight:700; letter-spacing:8px; color:#C6820E; font-family:'Courier New',Courier,monospace; }
|
||||
.hint { color:#888; font-size:13px; line-height:1.5; margin:0 0 16px; }
|
||||
.detail { color:#888; font-size:13px; line-height:1.5; margin:0; }
|
||||
.footer { border-top:1px solid #e8e0d4; padding:16px 24px; text-align:center; }
|
||||
.footer p { margin:0; }
|
||||
.footer .contact { color:#999; font-size:12px; }
|
||||
.footer .tagline { color:#bbb; font-size:11px; margin-top:6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<span>Cameleer.io</span>
|
||||
<body style="margin:0;padding:0;background:#f5f1eb;">
|
||||
<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;max-width:480px;margin:0 auto;background:#ffffff;border-radius:8px;overflow:hidden;border:1px solid #e8e0d4;">
|
||||
<div style="background:#C6820E;padding:20px 24px;text-align:center;">
|
||||
<span style="font-size:22px;font-weight:700;color:#ffffff;letter-spacing:0.5px;">Cameleer.io</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="{{watermarkUrl}}" class="watermark" alt="" />
|
||||
<div class="inner">
|
||||
<p class="title">Quick checkpoint</p>
|
||||
<p class="subtitle">Here's your verification code. Just making sure it's really you at the reins.</p>
|
||||
<div class="code-box">
|
||||
<div>
|
||||
<span>{{code}}</span>
|
||||
<div style="padding:32px 24px 24px;position:relative;overflow:hidden;">
|
||||
<img src="{{watermarkUrl}}" style="position:absolute;top:-30px;right:-50px;width:320px;height:320px;opacity:0.07;pointer-events:none;border:0;outline:none;" alt="" />
|
||||
<div style="position:relative;">
|
||||
<p style="color:#1a1a1a;font-size:16px;font-weight:600;margin:0 0 8px;">Quick checkpoint</p>
|
||||
<p style="color:#444;font-size:14px;line-height:1.6;margin:0 0 24px;">Here's your verification code. Just making sure it's really you at the reins.</p>
|
||||
<div style="text-align:center;margin:0 0 24px;">
|
||||
<div style="display:inline-block;background:#FDF6EC;border:2px solid #C6820E;border-radius:8px;padding:16px 32px;">
|
||||
<span style="font-size:32px;font-weight:700;letter-spacing:8px;color:#C6820E;font-family:'Courier New',Courier,monospace;">{{code}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hint">This code expires in 10 minutes.</p>
|
||||
<p class="detail">You are receiving this email because a verification was requested on your Cameleer account. Cameleer is an observability platform for Apache Camel integrations providing real-time route tracing, message inspection, and performance monitoring. If you did not request this verification, please ignore this email or contact your administrator for assistance.</p>
|
||||
<p style="color:#888;font-size:13px;line-height:1.5;margin:0 0 16px;">This code expires in 10 minutes.</p>
|
||||
<p style="color:#888;font-size:13px;line-height:1.5;margin:0;">You are receiving this email because a verification was requested on your Cameleer account. Cameleer is an observability platform for Apache Camel integrations providing real-time route tracing, message inspection, and performance monitoring. If you did not request this verification, please ignore this email or contact your administrator for assistance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p class="contact">Questions? Contact your administrator</p>
|
||||
<p class="tagline">Cameleer — Apache Camel observability</p>
|
||||
<div style="border-top:1px solid #e8e0d4;padding:16px 24px;text-align:center;">
|
||||
<p style="color:#999;font-size:12px;margin:0;">Questions? Contact your administrator</p>
|
||||
<p style="color:#bbb;font-size:11px;margin:6px 0 0;">Cameleer — Apache Camel observability</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user