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
+20 -10
View File
@@ -18,20 +18,25 @@ function base(content: string) {
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]--> <!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<title>Second Brain</title> <title>Second Brain</title>
</head> </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 --> <!-- 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> <tr>
<td align="center" style="padding:32px 16px;"> <td align="center" style="padding:32px 16px;">
<!-- 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:2px 6px 6px 2px;">
<!-- Card --> <!-- 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;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#F5F5F0;">
<!-- Header --> <!-- Header -->
<tr> <tr>
<td style="padding:20px 28px;border-bottom:2px solid #AAAAAA;"> <td style="padding:20px 28px;border-bottom:2px solid #AAAAAA;background-color:#F5F5F0;">
<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> <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> </td>
</tr> </tr>
@@ -44,8 +49,8 @@ function base(content: string) {
<!-- Footer --> <!-- Footer -->
<tr> <tr>
<td style="padding:14px 28px;border-top:2px solid #AAAAAA;"> <td style="padding:14px 28px;border-top:2px solid #AAAAAA;background-color:#F5F5F0;">
<p style="margin:0;font-family:'Courier New',Courier,monospace;font-size:11px;color:#AAAAAA;">Это автоматическое письмо, не отвечайте на него.</p> <p style="margin:0;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#AAAAAA;">Это автоматическое письмо, не отвечайте на него.</p>
</td> </td>
</tr> </tr>
@@ -55,20 +60,25 @@ function base(content: string) {
</td> </td>
</tr> </tr>
</table> </table>
<!-- /Shadow wrapper -->
</td>
</tr>
</table>
</body> </body>
</html>`; </html>`;
} }
// Reusable inline styles // 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 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:'Courier New',Courier,monospace;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) { function btn(href: string, label: string) {
return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:24px;"> return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top:24px;">
<tr> <tr>
<td style="background-color:#E8F0D8;border:2px solid #323232;border-right:4px solid #323232;border-bottom:4px solid #323232;"> <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> </td>
</tr> </tr>
</table>`; </table>`;