admins/lms-sb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish email template: white outer bg, beige card, Arial font

Browse Source 
- Outer background: #FFFFFF
- Card background: #F5F5F0 (beige)
- All text/buttons: Arial/Helvetica (renders consistently on mobile)
- Shadow via table wrapper technique (works in Gmail Android)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
dmitriylaukhin
2026-04-07 18:05:47 +05:00
parent 32b0fa9d6f
commit 66b311f17e
1 changed files with 37 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/email.ts
+37 -27
View File
@@ -18,39 +18,49 @@ function base(content: string) {
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<title>Second Brain</title>
</head>
<body style="margin:0;padding:0;background-color:#F5F5F0;font-family:'Courier New',Courier,monospace;color:#323232;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<body style="margin:0;padding:0;background-color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;color:#323232;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<!-- Outer wrapper -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#F5F5F0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#FFFFFF;">
<tr>
<td align="center" style="padding:32px 16px;">
<!-- Card -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:560px;background-color:#F5F5F0;border:2px solid #AAAAAA;border-right:4px solid #AAAAAA;border-bottom:4px solid #AAAAAA;">
<!-- Header -->
<!-- Shadow wrapper: gray bg + padding creates border+shadow illusion -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:560px;background-color:#AAAAAA;">
<tr>
<td style="padding:20px 28px;border-bottom:2px solid #AAAAAA;">
<p style="margin:0;font-family:'Courier New',Courier,monospace;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#323232;">Second Brain · Образовательная платформа</p>
<td style="padding:2px 6px 6px 2px;">
<!-- Card -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#F5F5F0;">
<!-- Header -->
<tr>
<td style="padding:20px 28px;border-bottom:2px solid #AAAAAA;background-color:#F5F5F0;">
<p style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#323232;">Second Brain · Образовательная платформа</p>
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding:28px 28px 24px;">
${content}
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:14px 28px;border-top:2px solid #AAAAAA;background-color:#F5F5F0;">
<p style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#AAAAAA;">Это автоматическое письмо, не отвечайте на него.</p>
</td>
</tr>
</table>
<!-- /Card -->
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding:28px 28px 24px;">
${content}
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:14px 28px;border-top:2px solid #AAAAAA;">
<p style="margin:0;font-family:'Courier New',Courier,monospace;font-size:11px;color:#AAAAAA;">Это автоматическое письмо, не отвечайте на него.</p>
</td>
</tr>
</table>
<!-- /Card -->
<!-- /Shadow wrapper -->
</td>
</tr>
@@ -61,14 +71,14 @@ function base(content: string) {
}
// Reusable inline styles
const p = `style="margin:0 0 14px;font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.65;color:#323232;"`;
const pLast = `style="margin:0;font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.65;color:#323232;"`;
const p = `style="margin:0 0 14px;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.65;color:#323232;"`;
const pLast = `style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.65;color:#323232;"`;
function btn(href: string, label: string) {
return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:24px;">
<tr>
<td style="background-color:#E8F0D8;border:2px solid #323232;border-right:4px solid #323232;border-bottom:4px solid #323232;">
<a href="${href}" target="_blank" style="display:inline-block;padding:10px 22px;font-family:'Courier New',Courier,monospace;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#323232;text-decoration:none;">${label} →</a>
<a href="${href}" target="_blank" style="display:inline-block;padding:10px 22px;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#323232;text-decoration:none;">${label} →</a>
</td>
</tr>
</table>`;