@seliseblocks/mailcraft 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/DOCS.md +557 -0
  2. package/LICENSE +21 -0
  3. package/README.md +126 -0
  4. package/dist/mailcraft-editor.bundle.js +519 -0
  5. package/dist/mailcraft-editor.bundle.js.map +7 -0
  6. package/examples/templates/activate-your-account.html +54 -0
  7. package/examples/templates/back-in-stock.html +63 -0
  8. package/examples/templates/cart-left-behind.html +74 -0
  9. package/examples/templates/community-giveaway.html +81 -0
  10. package/examples/templates/frontend-futures-invite.html +69 -0
  11. package/examples/templates/give-25-get-25.html +69 -0
  12. package/examples/templates/invoice-paid.html +77 -0
  13. package/examples/templates/meet-nova-launch.html +69 -0
  14. package/examples/templates/mega-weekend-sale.html +57 -0
  15. package/examples/templates/order-confirmed.html +80 -0
  16. package/examples/templates/rate-your-headphones.html +71 -0
  17. package/examples/templates/reset-your-password.html +54 -0
  18. package/examples/templates/thankyou-promo-code.html +68 -0
  19. package/examples/templates/the-sunday-brief.html +47 -0
  20. package/examples/templates/welcome-to-your-workspace.html +62 -0
  21. package/examples/templates/your-order-shipped.html +74 -0
  22. package/examples/templates/your-password-was-changed.html +58 -0
  23. package/examples/templates/your-signin-code.html +58 -0
  24. package/examples/vanilla.html +1574 -0
  25. package/package.json +66 -0
  26. package/src/core/accent.js +194 -0
  27. package/src/core/assets.js +15 -0
  28. package/src/core/binder.js +119 -0
  29. package/src/core/blocks.js +256 -0
  30. package/src/core/css-cascade.js +117 -0
  31. package/src/core/editor-core.js +1492 -0
  32. package/src/core/export.js +58 -0
  33. package/src/core/footer.js +73 -0
  34. package/src/core/i18n/ar.js +177 -0
  35. package/src/core/i18n/bg.js +152 -0
  36. package/src/core/i18n/bn.js +176 -0
  37. package/src/core/i18n/ca.js +152 -0
  38. package/src/core/i18n/cs.js +152 -0
  39. package/src/core/i18n/da.js +152 -0
  40. package/src/core/i18n/de-CH.js +152 -0
  41. package/src/core/i18n/de.js +152 -0
  42. package/src/core/i18n/dz.js +179 -0
  43. package/src/core/i18n/el.js +152 -0
  44. package/src/core/i18n/en.js +269 -0
  45. package/src/core/i18n/es.js +152 -0
  46. package/src/core/i18n/et.js +152 -0
  47. package/src/core/i18n/fi.js +152 -0
  48. package/src/core/i18n/fr.js +152 -0
  49. package/src/core/i18n/hr.js +152 -0
  50. package/src/core/i18n/hu.js +152 -0
  51. package/src/core/i18n/index.js +83 -0
  52. package/src/core/i18n/it.js +152 -0
  53. package/src/core/i18n/lt.js +152 -0
  54. package/src/core/i18n/lv.js +152 -0
  55. package/src/core/i18n/nb.js +152 -0
  56. package/src/core/i18n/nl.js +152 -0
  57. package/src/core/i18n/pl.js +152 -0
  58. package/src/core/i18n/pt.js +152 -0
  59. package/src/core/i18n/ro.js +152 -0
  60. package/src/core/i18n/ru.js +152 -0
  61. package/src/core/i18n/sk.js +152 -0
  62. package/src/core/i18n/sl.js +152 -0
  63. package/src/core/i18n/sv.js +152 -0
  64. package/src/core/i18n/tables.js +50 -0
  65. package/src/core/i18n/tr.js +152 -0
  66. package/src/core/i18n/uk.js +152 -0
  67. package/src/core/icons.js +235 -0
  68. package/src/core/ids.js +1 -0
  69. package/src/core/import-html.js +959 -0
  70. package/src/core/layout-style.js +115 -0
  71. package/src/core/parse.js +10 -0
  72. package/src/core/placeholder.js +15 -0
  73. package/src/core/sanitize.js +141 -0
  74. package/src/core/storage-limits.js +184 -0
  75. package/src/core/storage.js +85 -0
  76. package/src/core/theme.js +1 -0
  77. package/src/core/toolbar.js +67 -0
  78. package/src/core/variables.js +11 -0
  79. package/src/create-editor.js +109 -0
  80. package/src/index.js +9 -0
  81. package/src/mailcraft-editor.js +1862 -0
  82. package/src/render/block-body.js +295 -0
  83. package/src/render/canvas.js +284 -0
  84. package/src/render/fields.js +609 -0
  85. package/src/render/focus-preserve.js +158 -0
  86. package/src/render/rte.js +212 -0
  87. package/src/render/screenshot.js +132 -0
  88. package/src/render/story.js +415 -0
  89. package/src/render/style.js +452 -0
package/examples/templates/mega-weekend-sale.html ADDED
@@ -0,0 +1,57 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>MEGA weekend — 50% off everything</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#ffffff;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#101010;">
12
+ <tr>
13
+ <td style="height:6px; line-height:6px; font-size:0; background-color:#d9f24f;">&nbsp;</td>
14
+ </tr>
15
+ <tr>
16
+ <td align="center" style="padding:40px 32px 8px;">
17
+ <p style="margin:0 0 16px; font-family:'Courier New', Courier, monospace; font-size:13px; font-weight:bold; letter-spacing:0.3em; text-transform:uppercase; color:#d9f24f;">48 hours only</p>
18
+ <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:58px; line-height:0.95; font-weight:bold; letter-spacing:-0.02em; color:#ffffff;">50% OFF<br />EVERYTHING</h1>
19
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.6; color:#b8b8b8;">Saturday and Sunday. The whole store, every shelf, no asterisks.</p>
20
+ </td>
21
+ </tr>
22
+ <tr>
23
+ <td align="center" style="padding:28px 32px 8px;">
24
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
25
+ <tr>
26
+ <td align="center" style="border-top:2px dashed #3a3a3a; border-bottom:2px dashed #3a3a3a; padding:14px 10px; font-family:'Courier New', Courier, monospace; font-size:13px; font-weight:bold; letter-spacing:0.18em; text-transform:uppercase; color:#ffffff;">No code &middot; No minimum &middot; No exceptions</td>
27
+ </tr>
28
+ </table>
29
+ </td>
30
+ </tr>
31
+ <tr>
32
+ <td align="center" style="padding:28px 32px 8px;">
33
+ <a href="https://example.com/mega-weekend" style="display:inline-block; background-color:#d9f24f; color:#101010; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-decoration:none; padding:16px 48px;">GET IT BEFORE MONDAY</a>
34
+ </td>
35
+ </tr>
36
+ <tr>
37
+ <td style="padding:34px 32px 26px;">
38
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
39
+ <tr>
40
+ <td width="33%" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-transform:uppercase; color:#8a8a8a; border-right:1px solid #3a3a3a;">Sat 00:00<br /><span style="color:#ffffff; font-size:13px;">Opens</span></td>
41
+ <td width="34%" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-transform:uppercase; color:#8a8a8a; border-right:1px solid #3a3a3a;">All weekend<br /><span style="color:#ffffff; font-size:13px;">50% off</span></td>
42
+ <td width="33%" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-transform:uppercase; color:#8a8a8a;">Sun 23:59<br /><span style="color:#d9f24f; font-size:13px;">Gone</span></td>
43
+ </tr>
44
+ </table>
45
+ </td>
46
+ </tr>
47
+ <tr>
48
+ <td align="center" style="background-color:#0a0a0a; padding:16px 32px;">
49
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6e6e6e;">Sent to {{ email }} &middot; While stock lasts.<br /><a href="{{ unsubscribe_url }}" style="color:#6e6e6e;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#6e6e6e;">Preferences</a></p>
50
+ </td>
51
+ </tr>
52
+ </table>
53
+ </td>
54
+ </tr>
55
+ </table>
56
+ </body>
57
+ </html>
package/examples/templates/order-confirmed.html ADDED
@@ -0,0 +1,80 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Order confirmed</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#f4f4f2;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f2;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
12
+ <tr>
13
+ <td style="padding:32px 36px 6px;">
14
+ <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.16em; text-transform:uppercase; color:#2f9e44;">Order confirmed</p>
15
+ <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.25; color:#1a1a1a;">Thanks, {{ first_name }} &mdash; it&rsquo;s on its way</h1>
16
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#4a4a4a;">Order <strong>#48213</strong>, placed today. We&rsquo;ll email tracking as soon as the courier scans it &mdash; usually within one business day.</p>
17
+ </td>
18
+ </tr>
19
+ <tr>
20
+ <td style="padding:24px 36px 4px;">
21
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e6e6e2; ">
22
+ <tr>
23
+ <td style="padding:14px 18px; border-bottom:1px solid #e6e6e2;">
24
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
25
+ <tr>
26
+ <td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Field jacket &mdash; olive, M</td>
27
+ <td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">$148.00</td>
28
+ </tr>
29
+ </table>
30
+ </td>
31
+ </tr>
32
+ <tr>
33
+ <td style="padding:14px 18px; border-bottom:1px solid #e6e6e2;">
34
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
35
+ <tr>
36
+ <td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Merino crew &mdash; charcoal, M</td>
37
+ <td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">$85.00</td>
38
+ </tr>
39
+ </table>
40
+ </td>
41
+ </tr>
42
+ <tr>
43
+ <td style="padding:14px 18px; background-color:#fafaf8;">
44
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
45
+ <tr>
46
+ <td style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#4a4a4a;">Shipping</td>
47
+ <td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#4a4a4a;">Free</td>
48
+ </tr>
49
+ <tr>
50
+ <td style="padding-top:6px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#1a1a1a;">Total</td>
51
+ <td align="right" style="padding-top:6px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#1a1a1a;">$233.00</td>
52
+ </tr>
53
+ </table>
54
+ </td>
55
+ </tr>
56
+ </table>
57
+ </td>
58
+ </tr>
59
+ <tr>
60
+ <td align="center" style="padding:22px 36px 6px;">
61
+ <a href="https://example.com/orders/48213" style="display:inline-block; background-color:#1a1a1a; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-decoration:none; padding:12px 30px; ">View your order</a>
62
+ </td>
63
+ </tr>
64
+ <tr>
65
+ <td style="padding:24px 36px 8px;">
66
+ <hr style="border:none; border-top:1px solid #e6e6e2; margin:0;" />
67
+ </td>
68
+ </tr>
69
+ <tr>
70
+ <td style="padding:10px 36px 30px;">
71
+ <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.6; color:#4a4a4a;">Need a different size? Exchanges are free for 30 days &mdash; start one from the order page above.</p>
72
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#9a9a94;">This receipt was sent to {{ email }}. <a href="{{ unsubscribe_url }}" style="color:#9a9a94;">Unsubscribe from marketing</a> &mdash; you will still receive order emails.</p>
73
+ </td>
74
+ </tr>
75
+ </table>
76
+ </td>
77
+ </tr>
78
+ </table>
79
+ </body>
80
+ </html>
package/examples/templates/rate-your-headphones.html ADDED
@@ -0,0 +1,71 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>How are your new headphones?</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#f2f4f8;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f2f4f8;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
+ <tr>
13
+ <td align="center" style="padding:36px 36px 10px;">
14
+ <p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:26px; letter-spacing:0.1em; color:#e6b93c;">&#9733; &#9733; &#9733; &#9733; &#9733;</p>
15
+ <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#16233a;">Two weeks with your headphones &mdash; how is it going?</h1>
16
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#435d80;">Hi {{ first_name }}, a quick one: your thoughts help the next buyer decide. It takes about a minute, and we&rsquo;d really appreciate it.</p>
17
+ </td>
18
+ </tr>
19
+ <tr>
20
+ <td align="center" style="padding:22px 36px 8px;">
21
+ <table role="presentation" cellpadding="0" cellspacing="0">
22
+ <tr>
23
+ <td align="center" style="padding:0 6px;"><a href="https://example.com/review/5" style="display:block; width:52px; height:52px; background-color:#f6f9fd; border:1px solid #dbe5f2; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:52px; text-decoration:none; color:#e6b93c;">&#9733;</a></td>
24
+ <td align="center" style="padding:0 6px;"><a href="https://example.com/review/4" style="display:block; width:52px; height:52px; background-color:#f6f9fd; border:1px solid #dbe5f2; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:52px; text-decoration:none; color:#e6b93c;">&#9733;</a></td>
25
+ <td align="center" style="padding:0 6px;"><a href="https://example.com/review/3" style="display:block; width:52px; height:52px; background-color:#f6f9fd; border:1px solid #dbe5f2; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:52px; text-decoration:none; color:#e6b93c;">&#9733;</a></td>
26
+ <td align="center" style="padding:0 6px;"><a href="https://example.com/review/2" style="display:block; width:52px; height:52px; background-color:#f6f9fd; border:1px solid #dbe5f2; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:52px; text-decoration:none; color:#e6b93c;">&#9733;</a></td>
27
+ <td align="center" style="padding:0 6px;"><a href="https://example.com/review/1" style="display:block; width:52px; height:52px; background-color:#f6f9fd; border:1px solid #dbe5f2; font-family:Arial, Helvetica, sans-serif; font-size:22px; line-height:52px; text-decoration:none; color:#e6b93c;">&#9733;</a></td>
28
+ </tr>
29
+ </table>
30
+ <p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8194a7;">Tap a star to start &mdash; honest beats polite.</p>
31
+ </td>
32
+ </tr>
33
+ <tr>
34
+ <td style="padding:26px 36px 4px;">
35
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f9fd; ">
36
+ <tr>
37
+ <td valign="middle" width="30%" align="center" style="padding:22px 16px;">
38
+ <table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#16233a; ">
39
+ <tr>
40
+ <td align="center" style="padding:24px 20px;">
41
+ <p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#93a7c4;">Studio</p>
42
+ <p style="margin:0; font-family:Georgia, serif; font-size:18px; color:#ffffff;">MK II</p>
43
+ </td>
44
+ </tr>
45
+ </table>
46
+ </td>
47
+ <td valign="middle" width="70%" style="padding:16px 16px 16px 4px;">
48
+ <h2 style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:15.5px; color:#16233a;">Studio Headphones MK II</h2>
49
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#435d80;">Order #47190 &middot; delivered 12 August</p>
50
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.55; color:#435d80;">Review in the next 7 days and shipping on your next order is on us &mdash; good or bad.</p>
51
+ </td>
52
+ </tr>
53
+ </table>
54
+ </td>
55
+ </tr>
56
+ <tr>
57
+ <td style="padding:24px 36px 8px;">
58
+ <hr style="border:none; border-top:1px solid #e3eaf3; margin:0;" />
59
+ </td>
60
+ </tr>
61
+ <tr>
62
+ <td align="center" style="padding:12px 36px 32px;">
63
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">Sent to {{ email }} &middot; we only ask once per order.<br /><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Preferences</a></p>
64
+ </td>
65
+ </tr>
66
+ </table>
67
+ </td>
68
+ </tr>
69
+ </table>
70
+ </body>
71
+ </html>
package/examples/templates/reset-your-password.html ADDED
@@ -0,0 +1,54 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Reset your password</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#eef2f6;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
12
+ <tr>
13
+ <td align="center" style="background-color:#0065b3; padding:22px 36px;">
14
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
15
+ </td>
16
+ </tr>
17
+ <tr>
18
+ <td align="center" style="padding:34px 36px 8px;">
19
+ <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#d97706;">Password reset</p>
20
+ <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Reset your password</h1>
21
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Hi {{ first_name }}, we received a request to reset the password for <strong>{{ email }}</strong>. Use the button below to choose a new one.</p>
22
+ </td>
23
+ </tr>
24
+ <tr>
25
+ <td align="center" style="padding:26px 36px 8px;">
26
+ <a href="https://example.com/reset" style="display:inline-block; background-color:#0065b3; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 38px; ">Choose a new password</a>
27
+ </td>
28
+ </tr>
29
+ <tr>
30
+ <td align="center" style="padding:10px 36px 4px;">
31
+ <p style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">Button not working? Paste this into your browser:</p>
32
+ <p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:12px; line-height:1.6; color:#3f5063;"><a href="https://example.com/reset" style="color:#0065b3;">https://example.com/reset</a></p>
33
+ </td>
34
+ </tr>
35
+ <tr>
36
+ <td style="padding:28px 36px 8px;">
37
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f8fc; ">
38
+ <tr>
39
+ <td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#5b6d80;">This link works once and expires in 30 minutes. If you didn&rsquo;t ask for a reset, ignore this email &mdash; your current password keeps working.</td>
40
+ </tr>
41
+ </table>
42
+ </td>
43
+ </tr>
44
+ <tr>
45
+ <td style="padding:24px 36px 30px;">
46
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
47
+ </td>
48
+ </tr>
49
+ </table>
50
+ </td>
51
+ </tr>
52
+ </table>
53
+ </body>
54
+ </html>
package/examples/templates/thankyou-promo-code.html ADDED
@@ -0,0 +1,68 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>A little thank-you — 20% off</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#fdf8f3;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fdf8f3;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
+ <tr>
13
+ <td align="center" style="padding:38px 36px 8px;">
14
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#c2762d;">A small thank-you</p>
15
+ <h1 style="margin:0 0 12px; font-family:Georgia, 'Times New Roman', serif; font-size:30px; line-height:1.2; color:#2d2a24;">Here&rsquo;s 20% off, {{ first_name }}</h1>
16
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#5d574c;">It&rsquo;s been a year since you joined us &mdash; and that&rsquo;s worth celebrating. Here&rsquo;s a little something to mark it.</p>
17
+ </td>
18
+ </tr>
19
+ <tr>
20
+ <td align="center" style="padding:26px 36px 8px;">
21
+ <table role="presentation" cellpadding="0" cellspacing="0" style="border:2px dashed #d9b98a; ">
22
+ <tr>
23
+ <td align="center" style="padding:22px 46px;">
24
+ <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.18em; text-transform:uppercase; color:#a3845c;">Your code</p>
25
+ <p style="margin:0 0 8px; font-family:'Courier New', Courier, monospace; font-size:28px; font-weight:bold; letter-spacing:0.12em; color:#2d2a24;">THANKYOU20</p>
26
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#a3845c;">20% off &middot; yours until 30 September</p>
27
+ </td>
28
+ </tr>
29
+ </table>
30
+ </td>
31
+ </tr>
32
+ <tr>
33
+ <td align="center" style="padding:24px 36px 8px;">
34
+ <a href="https://example.com/shop" style="display:inline-block; background-color:#2d2a24; color:#f6efe4; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 40px; ">Use my code</a>
35
+ </td>
36
+ </tr>
37
+ <tr>
38
+ <td style="padding:26px 36px 6px;">
39
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
40
+ <tr>
41
+ <td width="50%" valign="top" style="padding:0 10px 0 0;">
42
+ <h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#2d2a24;">Works on everything</h3>
43
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.55; color:#5d574c;">One code, whole store. Apply it at checkout and watch the total drop.</p>
44
+ </td>
45
+ <td width="50%" valign="top" style="padding:0 0 0 10px;">
46
+ <h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#2d2a24;">Stack it with sales</h3>
47
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.55; color:#5d574c;">Already-marked-down pieces count too &mdash; yes, really.</p>
48
+ </td>
49
+ </tr>
50
+ </table>
51
+ </td>
52
+ </tr>
53
+ <tr>
54
+ <td style="padding:24px 36px 8px;">
55
+ <hr style="border:none; border-top:1px solid #eee3d2; margin:0;" />
56
+ </td>
57
+ </tr>
58
+ <tr>
59
+ <td align="center" style="padding:12px 36px 32px;">
60
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#a3988a;">Sent to {{ email }} &middot; One code per order.<br /><a href="{{ unsubscribe_url }}" style="color:#a3988a;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#a3988a;">Preferences</a></p>
61
+ </td>
62
+ </tr>
63
+ </table>
64
+ </td>
65
+ </tr>
66
+ </table>
67
+ </body>
68
+ </html>
package/examples/templates/the-sunday-brief.html ADDED
@@ -0,0 +1,47 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>The Sunday Brief</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#f1f0ec;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f1f0ec;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
12
+ <tr>
13
+ <td style="background-color:#1c1b18; padding:26px 32px;">
14
+ <h1 style="margin:0 0 6px; font-family:Georgia, 'Times New Roman', serif; font-size:26px; line-height:1.2; color:#f5f2ea;">The Sunday Brief</h1>
15
+ <p style="margin:0; font-family:Georgia, serif; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:#b8b2a4;">Issue 214 &middot; Curated reads for a slow morning</p>
16
+ </td>
17
+ </tr>
18
+ <tr>
19
+ <td style="height:5px; line-height:5px; font-size:0; background-color:#a06b2c;">&nbsp;</td>
20
+ </tr>
21
+ <tr>
22
+ <td align="center" style="background-color:#f6f4ee; padding:36px 40px 34px; border-bottom:1px solid #e3e0d8;">
23
+ <p style="margin:0 0 10px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#a06b2c;">Cover story</p>
24
+ <h2 style="margin:0 0 12px; font-family:Georgia, 'Times New Roman', serif; font-size:28px; line-height:1.25; color:#1c1b18;">Why the best ideas arrive before nine</h2>
25
+ <p style="margin:0 0 18px; font-family:Georgia, serif; font-size:15px; line-height:1.65; color:#3d3a33;">Hello {{ first_name }} &mdash; this week we sat down with three writers who guard their mornings like a vault. What they cut, what they kept, and the one ritual all three share.</p>
26
+ <a href="https://example.com/issue-214" style="display:inline-block; background-color:#1c1b18; color:#f5f2ea; font-family:Georgia, serif; font-size:14px; font-weight:bold; text-decoration:none; padding:12px 26px; ">Read the full story</a>
27
+ </td>
28
+ </tr>
29
+ <tr>
30
+ <td style="padding:26px 32px 4px;">
31
+ <h3 style="margin:0 0 8px; font-family:Georgia, serif; font-size:17px; color:#1c1b18;">Also worth your time</h3>
32
+ <p style="margin:0 0 10px; font-family:Georgia, serif; font-size:14px; line-height:1.6; color:#3d3a33;"><a href="https://example.com/reads/1" style="color:#a06b2c;">The quiet return of the personal website</a> &mdash; a ten-minute read on owning your corner of the internet.</p>
33
+ <p style="margin:0 0 10px; font-family:Georgia, serif; font-size:14px; line-height:1.6; color:#3d3a33;"><a href="https://example.com/reads/2" style="color:#a06b2c;">Notes on a smaller inbox</a> &mdash; what happened when we unsubscribed from everything for a month.</p>
34
+ <p style="margin:0 0 10px; font-family:Georgia, serif; font-size:14px; line-height:1.6; color:#3d3a33;"><a href="https://example.com/reads/3" style="color:#a06b2c;">Interview: the archivist of lost fonts</a> &mdash; rescuing typefaces from forgotten floppy disks.</p>
35
+ </td>
36
+ </tr>
37
+ <tr>
38
+ <td align="center" style="padding:24px 32px 30px;">
39
+ <p style="margin:0; font-family:Georgia, serif; font-size:12px; line-height:1.6; color:#8d887b;">You are reading The Sunday Brief because you subscribed at example.com.<br /><a href="{{ unsubscribe_url }}" style="color:#8d887b;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8d887b;">Update preferences</a></p>
40
+ </td>
41
+ </tr>
42
+ </table>
43
+ </td>
44
+ </tr>
45
+ </table>
46
+ </body>
47
+ </html>
package/examples/templates/welcome-to-your-workspace.html ADDED
@@ -0,0 +1,62 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Welcome to your workspace</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#eef2f6;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
+ <tr>
13
+ <td style="height:5px; line-height:5px; font-size:0; background-color:#0065b3; ">&nbsp;</td>
14
+ </tr>
15
+ <tr>
16
+ <td style="padding:34px 36px 8px;">
17
+ <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Welcome aboard, {{ first_name }}</h1>
18
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Your workspace for {{ company }} is ready. Three small steps and your whole team can be working in it today.</p>
19
+ </td>
20
+ </tr>
21
+ <tr>
22
+ <td style="padding:24px 36px 0;">
23
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0065b3; ">
24
+ <tr>
25
+ <td align="center" style="padding:26px 30px;">
26
+ <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:21px; font-weight:bold; color:#ffffff;">Your workspace is live</p>
27
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; letter-spacing:0.04em; color:#cfe3f7;">Unlimited projects &nbsp;&middot;&nbsp; Invite anyone &nbsp;&middot;&nbsp; Connect your tools</p>
28
+ </td>
29
+ </tr>
30
+ </table>
31
+ </td>
32
+ </tr>
33
+ <tr>
34
+ <td style="padding:26px 36px 4px;">
35
+ <h2 style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#10243c;">Get set up in five minutes</h2>
36
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#3f5063;"><strong style="color:#0065b3;">1.</strong> &nbsp;Create your first project &mdash; a name is enough, everything else can change later.</p>
37
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#3f5063;"><strong style="color:#0065b3;">2.</strong> &nbsp;Invite your team &mdash; anyone with a {{ company }} email joins without approval.</p>
38
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.6; color:#3f5063;"><strong style="color:#0065b3;">3.</strong> &nbsp;Connect your tools &mdash; two clicks each for calendar, storage and chat.</p>
39
+ </td>
40
+ </tr>
41
+ <tr>
42
+ <td align="center" style="padding:18px 36px 6px;">
43
+ <a href="https://example.com/getting-started" style="display:inline-block; background-color:#0065b3; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:13px 34px; ">Open your workspace</a>
44
+ </td>
45
+ </tr>
46
+ <tr>
47
+ <td style="padding:26px 36px 8px;">
48
+ <hr style="border:none; border-top:1px solid #e1e8ef; margin:0;" />
49
+ </td>
50
+ </tr>
51
+ <tr>
52
+ <td style="padding:12px 36px 32px;">
53
+ <p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.6; color:#3f5063;">Stuck on anything? Reply to this email &mdash; a real person reads every message, usually within the hour.</p>
54
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
55
+ </td>
56
+ </tr>
57
+ </table>
58
+ </td>
59
+ </tr>
60
+ </table>
61
+ </body>
62
+ </html>
package/examples/templates/your-order-shipped.html ADDED
@@ -0,0 +1,74 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Your order is on its way</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#eef2f6;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
12
+ <tr>
13
+ <td align="center" style="background-color:#0065b3; padding:22px 36px;">
14
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
15
+ </td>
16
+ </tr>
17
+ <tr>
18
+ <td align="center" style="padding:34px 36px 8px;">
19
+ <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#0065b3;">Shipped &middot; Order #48213</p>
20
+ <h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#10243c;">Your order is on its way, {{ first_name }}</h1>
21
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#3f5063;">Order <strong>#48213</strong> left our warehouse this morning and arrives <strong>Thursday, 2 September</strong>.</p>
22
+ </td>
23
+ </tr>
24
+ <tr>
25
+ <td style="padding:24px 36px 8px;">
26
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e1e8ef; ">
27
+ <tr>
28
+ <td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
29
+ <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:#8194a7;">Carrier</p>
30
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#10243c;">DHL Express</p>
31
+ </td>
32
+ <td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
33
+ <p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:#8194a7;">Tracking number</p>
34
+ <p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:14px; color:#10243c;">JD014669321DE</p>
35
+ </td>
36
+ </tr>
37
+ <tr>
38
+ <td colspan="2" style="padding:20px 18px 18px;">
39
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
40
+ <tr>
41
+ <td width="75%" style="height:6px; background-color:#0065b3; font-size:0; line-height:6px;">&nbsp;</td>
42
+ <td width="25%" style="height:6px; background-color:#e1e8ef; font-size:0; line-height:6px;">&nbsp;</td>
43
+ </tr>
44
+ <tr>
45
+ <td style="padding-top:8px; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; color:#0065b3;">Ordered &middot; Packed &middot; Shipped</td>
46
+ <td align="right" style="padding-top:8px; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; color:#8194a7;">Out for delivery</td>
47
+ </tr>
48
+ </table>
49
+ </td>
50
+ </tr>
51
+ </table>
52
+ </td>
53
+ </tr>
54
+ <tr>
55
+ <td align="center" style="padding:22px 36px 6px;">
56
+ <a href="https://example.com/track/48213" style="display:inline-block; background-color:#0065b3; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-decoration:none; padding:12px 32px; ">Track my parcel</a>
57
+ </td>
58
+ </tr>
59
+ <tr>
60
+ <td style="padding:22px 36px 8px;">
61
+ <hr style="border:none; border-top:1px solid #e1e8ef; margin:0;" />
62
+ </td>
63
+ </tr>
64
+ <tr>
65
+ <td style="padding:10px 36px 30px;">
66
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">No one home? The courier leaves a note and tries again the next working day. This update was sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
67
+ </td>
68
+ </tr>
69
+ </table>
70
+ </td>
71
+ </tr>
72
+ </table>
73
+ </body>
74
+ </html>
package/examples/templates/your-password-was-changed.html ADDED
@@ -0,0 +1,58 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Your password was changed</title>
6
+ </head>
7
+ <body style="margin:0; padding:0; background-color:#eef2f6;">
8
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
+ <tr>
10
+ <td align="center" style="padding:24px 12px;">
11
+ <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
12
+ <tr>
13
+ <td align="center" style="background-color:#0065b3; padding:22px 36px;">
14
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
15
+ </td>
16
+ </tr>
17
+ <tr>
18
+ <td align="center" style="padding:34px 36px 8px;">
19
+ <p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#2f9e44;">Security update</p>
20
+ <h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Password updated</h1>
21
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Hi {{ first_name }}, your {{ company }} password was just changed. Everything went through &mdash; no action is needed.</p>
22
+ </td>
23
+ </tr>
24
+ <tr>
25
+ <td style="padding:26px 36px 8px;">
26
+ <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e1e8ef; ">
27
+ <tr>
28
+ <td style="padding:14px 18px; border-bottom:1px solid #e1e8ef; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">Account</td>
29
+ <td align="right" style="padding:14px 18px; border-bottom:1px solid #e1e8ef; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#10243c;">{{ email }}</td>
30
+ </tr>
31
+ <tr>
32
+ <td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">When</td>
33
+ <td align="right" style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#10243c;">Just now, from this account&rsquo;s session</td>
34
+ </tr>
35
+ </table>
36
+ </td>
37
+ </tr>
38
+ <tr>
39
+ <td style="padding:24px 36px 6px;">
40
+ <p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.65; color:#3f5063;"><strong style="color:#10243c;">Wasn&rsquo;t you?</strong> Reset your password right away and reply to this email &mdash; our team will lock the account while we look into it.</p>
41
+ </td>
42
+ </tr>
43
+ <tr>
44
+ <td align="center" style="padding:14px 36px 8px;">
45
+ <a href="https://example.com/reset" style="display:inline-block; background-color:#ffffff; color:#0065b3; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-decoration:none; padding:12px 32px; border:2px solid #0065b3;">Reset my password</a>
46
+ </td>
47
+ </tr>
48
+ <tr>
49
+ <td style="padding:26px 36px 30px;">
50
+ <p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;"><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> &middot; <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
51
+ </td>
52
+ </tr>
53
+ </table>
54
+ </td>
55
+ </tr>
56
+ </table>
57
+ </body>
58
+ </html>