@seliseblocks/mailcraft 0.2.16 → 0.2.19
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.
- package/CHANGELOG.md +47 -0
- package/DOCS.md +70 -67
- package/README.md +8 -8
- package/README.md.txt +8 -8
- package/dist/mailcraft-editor.bundle.js +89 -76
- package/dist/mailcraft-editor.bundle.js.map +3 -3
- package/examples/templates/activate-your-account.html +1 -1
- package/examples/templates/back-in-stock.html +4 -4
- package/examples/templates/cart-left-behind.html +3 -3
- package/examples/templates/community-giveaway.html +3 -3
- package/examples/templates/frontend-futures-invite.html +3 -3
- package/examples/templates/give-25-get-25.html +2 -2
- package/examples/templates/invoice-paid.html +3 -3
- package/examples/templates/meet-nova-launch.html +7 -7
- package/examples/templates/mega-weekend-sale.html +1 -1
- package/examples/templates/order-confirmed.html +6 -6
- package/examples/templates/rate-your-headphones.html +3 -3
- package/examples/templates/reset-your-password.html +1 -1
- package/examples/templates/thankyou-promo-code.html +3 -3
- package/examples/templates/the-sunday-brief.html +4 -4
- package/examples/templates/welcome-to-your-workspace.html +4 -4
- package/examples/templates/your-order-shipped.html +2 -2
- package/examples/templates/your-password-was-changed.html +2 -2
- package/examples/templates/your-signin-code.html +1 -1
- package/examples/vanilla.html +66 -66
- package/package.json +1 -1
- package/src/core/binder.js +10 -0
- package/src/core/blocks.js +3 -3
- package/src/core/editor-core.js +195 -6
- package/src/core/export.js +311 -22
- package/src/core/i18n/ar.js +2 -0
- package/src/core/i18n/bg.js +2 -0
- package/src/core/i18n/bn.js +2 -0
- package/src/core/i18n/ca.js +2 -0
- package/src/core/i18n/cs.js +2 -0
- package/src/core/i18n/da.js +2 -0
- package/src/core/i18n/de-CH.js +2 -0
- package/src/core/i18n/de.js +2 -0
- package/src/core/i18n/dz.js +2 -0
- package/src/core/i18n/el.js +2 -0
- package/src/core/i18n/en.js +2 -0
- package/src/core/i18n/es.js +2 -0
- package/src/core/i18n/et.js +2 -0
- package/src/core/i18n/fi.js +2 -0
- package/src/core/i18n/fr.js +2 -0
- package/src/core/i18n/hr.js +2 -0
- package/src/core/i18n/hu.js +2 -0
- package/src/core/i18n/index.js +83 -83
- package/src/core/i18n/it.js +2 -0
- package/src/core/i18n/lt.js +2 -0
- package/src/core/i18n/lv.js +2 -0
- package/src/core/i18n/nb.js +2 -0
- package/src/core/i18n/nl.js +2 -0
- package/src/core/i18n/pl.js +2 -0
- package/src/core/i18n/pt.js +2 -0
- package/src/core/i18n/ro.js +2 -0
- package/src/core/i18n/ru.js +2 -0
- package/src/core/i18n/sk.js +2 -0
- package/src/core/i18n/sl.js +2 -0
- package/src/core/i18n/sv.js +2 -0
- package/src/core/i18n/tr.js +2 -0
- package/src/core/i18n/uk.js +2 -0
- package/src/core/icons.js +17 -43
- package/src/core/ids.js +1 -1
- package/src/core/import-html.js +390 -20
- package/src/core/layout-style.js +25 -0
- package/src/core/parse.js +10 -10
- package/src/core/placeholder.js +15 -15
- package/src/core/sanitize.js +4 -1
- package/src/core/theme.js +22 -1
- package/src/core/variables.js +11 -11
- package/src/mailcraft-editor.js +11 -1
- package/src/render/block-body.js +129 -17
- package/src/render/canvas.js +35 -6
- package/src/render/fields.js +19 -0
- package/src/render/focus-preserve.js +158 -158
- package/src/render/screenshot.js +26 -3
- package/src/render/style.js +6 -1
package/examples/vanilla.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
-
<title>Blocks MailCraft
|
|
6
|
+
<title>Blocks MailCraft: live demo</title>
|
|
7
7
|
<meta name="description" content="A host application embedding the Blocks MailCraft email editor: host-owned theme, locale, brand colour, typography and template gallery." />
|
|
8
8
|
<link rel="icon" href="../assets/brand/icon.svg" media="(prefers-color-scheme: light)">
|
|
9
9
|
<link rel="icon" href="../assets/brand/icon-white.svg" media="(prefers-color-scheme: dark)">
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
<div class="field">
|
|
166
166
|
<label for="font-select">Font</label>
|
|
167
167
|
<select id="font-select">
|
|
168
|
-
<option value="">Default (
|
|
168
|
+
<option value="">Default (editor font)</option>
|
|
169
169
|
<option value="inherit">Match host app</option>
|
|
170
170
|
<option value="Georgia, 'Times New Roman', serif">Serif</option>
|
|
171
171
|
<option value="Verdana, Geneva, sans-serif">Verdana</option>
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
<td align="center" style="padding:34px 36px 8px;">
|
|
231
231
|
<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;">Account activation</p>
|
|
232
232
|
<h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">One last step, {{ first_name }}</h1>
|
|
233
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Welcome to {{ company }}. Tap the button below to activate your account
|
|
233
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#3f5063;">Welcome to {{ company }}. Tap the button below to activate your account; it takes less than ten seconds.</p>
|
|
234
234
|
</td>
|
|
235
235
|
</tr>
|
|
236
236
|
<tr>
|
|
@@ -270,7 +270,7 @@
|
|
|
270
270
|
<html>
|
|
271
271
|
<head>
|
|
272
272
|
<meta charset="utf-8" />
|
|
273
|
-
<title>Back in stock
|
|
273
|
+
<title>Back in stock: the one you wanted</title>
|
|
274
274
|
</head>
|
|
275
275
|
<body style="margin:0; padding:0; background-color:#faf7f2;">
|
|
276
276
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#faf7f2;">
|
|
@@ -281,7 +281,7 @@
|
|
|
281
281
|
<td align="center" style="padding:36px 36px 8px;">
|
|
282
282
|
<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:#b85c38;">Back in stock</p>
|
|
283
283
|
<h1 style="margin:0 0 10px; font-family:Georgia, 'Times New Roman', serif; font-size:28px; line-height:1.25; color:#29241d;">Good news, {{ first_name }}</h1>
|
|
284
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#5d574c;">The Terracotta Trainer in your size is back
|
|
284
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#5d574c;">The Terracotta Trainer in your size is back, and your watchlist held your place in line.</p>
|
|
285
285
|
</td>
|
|
286
286
|
</tr>
|
|
287
287
|
<tr>
|
|
@@ -289,7 +289,7 @@
|
|
|
289
289
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f1e9; ">
|
|
290
290
|
<tr>
|
|
291
291
|
<td width="38%" valign="middle" align="center" style="padding:22px 18px;">
|
|
292
|
-
<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22340%22%20viewBox%3D%220%200%20340%20340%22%3E%20%3Crect%20width%3D%22340%22%20height%3D%22340%22%20fill%3D%22%23b85c38%22%2F%3E%20%3Ccircle%20cx%3D%22264%22%20cy%3D%2272%22%20r%3D%2242%22%20fill%3D%22%23c96f4a%22%2F%3E%20%3Ccircle%20cx%3D%2256%22%20cy%3D%22290%22%20r%3D%2254%22%20fill%3D%22%23a9502e%22%2F%3E%20%3Cellipse%20cx%3D%22172%22%20cy%3D%22252%22%20rx%3D%22120%22%20ry%3D%2213%22%20fill%3D%22%238f4526%22%2F%3E%20%3Cpath%20d%3D%22M52%20222%20Q52%20242%2076%20242%20L268%20242%20Q288%20242%20288%20224%20L288%20216%20Q288%20208%20278%20206%20L62%20206%20Q52%20208%2052%20222%20Z%22%20fill%3D%22%23f3e9dc%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q60%20152%2096%20140%20Q128%20130%20148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20Z%22%20fill%3D%22%23e8d9c4%22%2F%3E%20%3Cpath%20d%3D%22M148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20L196%20208%20Q170%20198%20156%20174%20Z%22%20fill%3D%22%23caa27f%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q61%20170%2082%20152%20Q68%20172%2070%20208%20Z%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3Cg%20stroke%3D%22%238f5a3a%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3Cline%20x1%3D%22112%22%20y1%3D%22152%22%20x2%3D%22140%22%20y2%3D%22166%22%2F%3E%20%3Cline%20x1%3D%22106%22%20y1%3D%22168%22%20x2%3D%22136%22%20y2%3D%22182%22%2F%3E%20%3Cline%20x1%3D%22102%22%20y1%3D%22184%22%20x2%3D%22132%22%20y2%3D%22198%22%2F%3E%20%3C%2Fg%3E%20%3Crect%20x%3D%2258%22%20y%3D%22230%22%20width%3D%22224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3C%2Fsvg%3E" width="170" alt="Terracotta Trainer
|
|
292
|
+
<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22340%22%20viewBox%3D%220%200%20340%20340%22%3E%20%3Crect%20width%3D%22340%22%20height%3D%22340%22%20fill%3D%22%23b85c38%22%2F%3E%20%3Ccircle%20cx%3D%22264%22%20cy%3D%2272%22%20r%3D%2242%22%20fill%3D%22%23c96f4a%22%2F%3E%20%3Ccircle%20cx%3D%2256%22%20cy%3D%22290%22%20r%3D%2254%22%20fill%3D%22%23a9502e%22%2F%3E%20%3Cellipse%20cx%3D%22172%22%20cy%3D%22252%22%20rx%3D%22120%22%20ry%3D%2213%22%20fill%3D%22%238f4526%22%2F%3E%20%3Cpath%20d%3D%22M52%20222%20Q52%20242%2076%20242%20L268%20242%20Q288%20242%20288%20224%20L288%20216%20Q288%20208%20278%20206%20L62%20206%20Q52%20208%2052%20222%20Z%22%20fill%3D%22%23f3e9dc%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q60%20152%2096%20140%20Q128%20130%20148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20Z%22%20fill%3D%22%23e8d9c4%22%2F%3E%20%3Cpath%20d%3D%22M148%20150%20Q170%20172%20210%20178%20L262%20188%20Q286%20194%20286%20208%20L196%20208%20Q170%20198%20156%20174%20Z%22%20fill%3D%22%23caa27f%22%2F%3E%20%3Cpath%20d%3D%22M62%20208%20Q61%20170%2082%20152%20Q68%20172%2070%20208%20Z%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3Cg%20stroke%3D%22%238f5a3a%22%20stroke-width%3D%226%22%20stroke-linecap%3D%22round%22%3E%20%3Cline%20x1%3D%22112%22%20y1%3D%22152%22%20x2%3D%22140%22%20y2%3D%22166%22%2F%3E%20%3Cline%20x1%3D%22106%22%20y1%3D%22168%22%20x2%3D%22136%22%20y2%3D%22182%22%2F%3E%20%3Cline%20x1%3D%22102%22%20y1%3D%22184%22%20x2%3D%22132%22%20y2%3D%22198%22%2F%3E%20%3C%2Fg%3E%20%3Crect%20x%3D%2258%22%20y%3D%22230%22%20width%3D%22224%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%23d9c3a6%22%2F%3E%20%3C%2Fsvg%3E" width="170" alt="Terracotta Trainer, suede and canvas sneaker" style="display:block; width:170px; max-width:100%; height:auto;" />
|
|
293
293
|
</td>
|
|
294
294
|
<td width="62%" valign="middle" style="padding:18px 18px 18px 6px;">
|
|
295
295
|
<h2 style="margin:0 0 6px; font-family:Georgia, serif; font-size:19px; color:#29241d;">Terracotta Trainer</h2>
|
|
@@ -303,7 +303,7 @@
|
|
|
303
303
|
</tr>
|
|
304
304
|
<tr>
|
|
305
305
|
<td align="center" style="padding:20px 36px 8px;">
|
|
306
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8b8271;">Last restock sold out in 4 days
|
|
306
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8b8271;">Last restock sold out in 4 days; sizes go first, pairs follow.</p>
|
|
307
307
|
</td>
|
|
308
308
|
</tr>
|
|
309
309
|
<tr>
|
|
@@ -347,7 +347,7 @@
|
|
|
347
347
|
<tr>
|
|
348
348
|
<td align="center" style="padding:16px 36px 6px;">
|
|
349
349
|
<h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:25px; line-height:1.3; color:#241b3a;">Still thinking it over, {{ first_name }}?</h1>
|
|
350
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#574d70;">Your bag is being held for the next 48 hours
|
|
350
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#574d70;">Your bag is being held for the next 48 hours, with a little thank-you for coming back.</p>
|
|
351
351
|
</td>
|
|
352
352
|
</tr>
|
|
353
353
|
<tr>
|
|
@@ -364,7 +364,7 @@
|
|
|
364
364
|
</td>
|
|
365
365
|
</tr>
|
|
366
366
|
<tr>
|
|
367
|
-
<td colspan="2" style="padding:14px 16px; background-color:#faf8fd; border-top:1px solid #e7e3f2; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#574d70;">Come-back code <strong style="font-family:'Courier New', Courier, monospace; color:#7048b8;">COMEBACK15</strong> applied at checkout
|
|
367
|
+
<td colspan="2" style="padding:14px 16px; background-color:#faf8fd; border-top:1px solid #e7e3f2; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#574d70;">Come-back code <strong style="font-family:'Courier New', Courier, monospace; color:#7048b8;">COMEBACK15</strong> applied at checkout: 15% off this bag.</td>
|
|
368
368
|
</tr>
|
|
369
369
|
</table>
|
|
370
370
|
</td>
|
|
@@ -372,7 +372,7 @@
|
|
|
372
372
|
<tr>
|
|
373
373
|
<td align="center" style="padding:22px 36px 6px;">
|
|
374
374
|
<a href="https://example.com/cart" style="display:inline-block; background-color:#7048b8; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 40px; ">Finish my order</a>
|
|
375
|
-
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#9c92b8;">Held until Friday, 18:00
|
|
375
|
+
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#9c92b8;">Held until Friday, 18:00; after that the bag returns to the shelf.</p>
|
|
376
376
|
</td>
|
|
377
377
|
</tr>
|
|
378
378
|
<tr>
|
|
@@ -397,7 +397,7 @@
|
|
|
397
397
|
<html>
|
|
398
398
|
<head>
|
|
399
399
|
<meta charset="utf-8" />
|
|
400
|
-
<title>You’re in
|
|
400
|
+
<title>You’re in: the community giveaway</title>
|
|
401
401
|
</head>
|
|
402
402
|
<body style="margin:0; padding:0; background-color:#0c1226;">
|
|
403
403
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226;">
|
|
@@ -420,8 +420,8 @@
|
|
|
420
420
|
<tr>
|
|
421
421
|
<td align="center" style="padding:36px 36px 8px;">
|
|
422
422
|
<p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#38bdf8;">The community giveaway</p>
|
|
423
|
-
<h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:34px; line-height:1.15; color:#ffffff;">One year free
|
|
424
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#aeb8d8;">We turned five this month. To celebrate, five lucky members win a free year
|
|
423
|
+
<h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:34px; line-height:1.15; color:#ffffff;">One year free,<br />for you and a friend</h1>
|
|
424
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#aeb8d8;">We turned five this month. To celebrate, five lucky members win a free year, and each brings a friend along. Entry takes one click, {{ first_name }}.</p>
|
|
425
425
|
</td>
|
|
426
426
|
</tr>
|
|
427
427
|
<tr>
|
|
@@ -480,7 +480,7 @@
|
|
|
480
480
|
<html>
|
|
481
481
|
<head>
|
|
482
482
|
<meta charset="utf-8" />
|
|
483
|
-
<title>You’re invited
|
|
483
|
+
<title>You’re invited: Frontend Futures, 24 Sept</title>
|
|
484
484
|
</head>
|
|
485
485
|
<body style="margin:0; padding:0; background-color:#0e0c1a;">
|
|
486
486
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0e0c1a;">
|
|
@@ -520,12 +520,12 @@
|
|
|
520
520
|
</tr>
|
|
521
521
|
<tr>
|
|
522
522
|
<td style="padding:26px 44px 6px;">
|
|
523
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#b3a9d6;">{{ first_name }}, one evening, seven short talks, zero sales pitches
|
|
523
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#b3a9d6;">{{ first_name }}, one evening, seven short talks, zero sales pitches: view transitions, state machines, and what accessibility looks like from the inside. Followed by drinks and argumentative dessert.</p>
|
|
524
524
|
</td>
|
|
525
525
|
</tr>
|
|
526
526
|
<tr>
|
|
527
527
|
<td align="center" style="padding:24px 36px 8px;">
|
|
528
|
-
<a href="https://example.com/events/frontend-futures" style="display:inline-block; background-color:#a48ef0; color:#171332; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 44px; ">Reserve a seat
|
|
528
|
+
<a href="https://example.com/events/frontend-futures" style="display:inline-block; background-color:#a48ef0; color:#171332; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 44px; ">Reserve a seat (free)</a>
|
|
529
529
|
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#8f83b8;">The Atrium, 4 Harbour Lane · seats are first come, first served</p>
|
|
530
530
|
</td>
|
|
531
531
|
</tr>
|
|
@@ -562,7 +562,7 @@
|
|
|
562
562
|
<td align="center" style="background-color:#1e7a4f; padding:30px 32px 26px; ">
|
|
563
563
|
<p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#cdeeda;">The {{ company }} referral programme</p>
|
|
564
564
|
<h1 style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:36px; line-height:1.1; color:#ffffff;">Give $25 · Get $25</h1>
|
|
565
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.5; color:#d9efe2;">You both win
|
|
565
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.5; color:#d9efe2;">You both win: they save on their first order, you get credit when it ships.</p>
|
|
566
566
|
</td>
|
|
567
567
|
</tr>
|
|
568
568
|
<tr>
|
|
@@ -607,7 +607,7 @@
|
|
|
607
607
|
</tr>
|
|
608
608
|
<tr>
|
|
609
609
|
<td align="center" style="padding:12px 36px 32px;">
|
|
610
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6f9784;">No cap on rewards
|
|
610
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6f9784;">No cap on rewards; refer three friends, get $75. Sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#6f9784;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#6f9784;">Preferences</a></p>
|
|
611
611
|
</td>
|
|
612
612
|
</tr>
|
|
613
613
|
</table>
|
|
@@ -622,7 +622,7 @@
|
|
|
622
622
|
<html>
|
|
623
623
|
<head>
|
|
624
624
|
<meta charset="utf-8" />
|
|
625
|
-
<title>Invoice paid
|
|
625
|
+
<title>Invoice paid: #INV-2051</title>
|
|
626
626
|
</head>
|
|
627
627
|
<body style="margin:0; padding:0; background-color:#f4f6f9;">
|
|
628
628
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9;">
|
|
@@ -643,7 +643,7 @@
|
|
|
643
643
|
<td style="padding:18px 36px 8px;">
|
|
644
644
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#e9f7ee; ">
|
|
645
645
|
<tr>
|
|
646
|
-
<td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#1e7a3c;">✔ Paid in full
|
|
646
|
+
<td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#1e7a3c;">✔ Paid in full. Thank you, {{ first_name }}</td>
|
|
647
647
|
</tr>
|
|
648
648
|
</table>
|
|
649
649
|
</td>
|
|
@@ -656,7 +656,7 @@
|
|
|
656
656
|
<td align="right" style="padding:12px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.12em; text-transform:uppercase; color:#8194a7;">Amount</td>
|
|
657
657
|
</tr>
|
|
658
658
|
<tr>
|
|
659
|
-
<td style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">Pro plan
|
|
659
|
+
<td style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">Pro plan, monthly</td>
|
|
660
660
|
<td align="right" style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">$49.00</td>
|
|
661
661
|
</tr>
|
|
662
662
|
<tr>
|
|
@@ -701,7 +701,7 @@
|
|
|
701
701
|
<html>
|
|
702
702
|
<head>
|
|
703
703
|
<meta charset="utf-8" />
|
|
704
|
-
<title>Meet Nova
|
|
704
|
+
<title>Meet Nova: our biggest release yet</title>
|
|
705
705
|
</head>
|
|
706
706
|
<body style="margin:0; padding:0; background-color:#0b1020;">
|
|
707
707
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0b1020;">
|
|
@@ -712,18 +712,18 @@
|
|
|
712
712
|
<td align="center" style="background-color:#0065b3; padding:34px 32px 30px; ">
|
|
713
713
|
<p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.22em; text-transform:uppercase; color:#bfdbfe;">New from {{ company }}</p>
|
|
714
714
|
<h1 style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:38px; line-height:1.1; color:#ffffff;">Meet Nova</h1>
|
|
715
|
-
<p style="margin:10px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.5; color:#dbeafe;">Our biggest release yet
|
|
715
|
+
<p style="margin:10px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.5; color:#dbeafe;">Our biggest release yet, and it’s already in your account.</p>
|
|
716
716
|
</td>
|
|
717
717
|
</tr>
|
|
718
718
|
<tr>
|
|
719
719
|
<td style="padding:0;">
|
|
720
|
-
<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22230%22%20viewBox%3D%220%200%20600%20230%22%3E%20%3Crect%20width%3D%22600%22%20height%3D%22230%22%20fill%3D%22%230b1020%22%2F%3E%20%3Ccircle%20cx%3D%22524%22%20cy%3D%2230%22%20r%3D%2296%22%20fill%3D%22%23111832%22%2F%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22216%22%20r%3D%2280%22%20fill%3D%22%23111832%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%2240%22%20width%3D%22300%22%20height%3D%22172%22%20rx%3D%2212%22%20fill%3D%22%2316203c%22%2F%3E%20%3Cpath%20d%3D%22M150%2052%20Q150%2040%20162%2040%20L438%2040%20Q450%2040%20450%2052%20L450%2072%20L150%2072%20Z%22%20fill%3D%22%231c2848%22%2F%3E%20%3Ccircle%20cx%3D%22172%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Ccircle%20cx%3D%22190%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%233b6ea5%22%2F%3E%20%3Ccircle%20cx%3D%22208%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2328497a%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%2290%22%20width%3D%22122%22%20height%3D%2214%22%20rx%3D%227%22%20fill%3D%22%232b3d69%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22118%22%20width%3D%22264%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22136%22%20width%3D%22236%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22154%22%20width%3D%22250%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22180%22%20width%3D%2298%22%20height%3D%2220%22%20rx%3D%2210%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Cpath%20d%3D%22M470%2084%20L479%20108%20L502%20117%20L479%20126%20L470%20150%20L461%20126%20L438%20117%20L461%20108%20Z%22%20fill%3D%22%23d9e9f9%22%2F%3E%20%3Cpath%20d%3D%22M502%2056%20L506%2067%20L517%2071%20L506%2075%20L502%2086%20L498%2075%20L487%2071%20L498%2067%20Z%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3C%2Fsvg%3E" width="600" alt="Nova
|
|
720
|
+
<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22230%22%20viewBox%3D%220%200%20600%20230%22%3E%20%3Crect%20width%3D%22600%22%20height%3D%22230%22%20fill%3D%22%230b1020%22%2F%3E%20%3Ccircle%20cx%3D%22524%22%20cy%3D%2230%22%20r%3D%2296%22%20fill%3D%22%23111832%22%2F%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22216%22%20r%3D%2280%22%20fill%3D%22%23111832%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%2240%22%20width%3D%22300%22%20height%3D%22172%22%20rx%3D%2212%22%20fill%3D%22%2316203c%22%2F%3E%20%3Cpath%20d%3D%22M150%2052%20Q150%2040%20162%2040%20L438%2040%20Q450%2040%20450%2052%20L450%2072%20L150%2072%20Z%22%20fill%3D%22%231c2848%22%2F%3E%20%3Ccircle%20cx%3D%22172%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Ccircle%20cx%3D%22190%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%233b6ea5%22%2F%3E%20%3Ccircle%20cx%3D%22208%22%20cy%3D%2256%22%20r%3D%225%22%20fill%3D%22%2328497a%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%2290%22%20width%3D%22122%22%20height%3D%2214%22%20rx%3D%227%22%20fill%3D%22%232b3d69%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22118%22%20width%3D%22264%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22136%22%20width%3D%22236%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22154%22%20width%3D%22250%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%2322335c%22%2F%3E%20%3Crect%20x%3D%22168%22%20y%3D%22180%22%20width%3D%2298%22%20height%3D%2220%22%20rx%3D%2210%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3Cpath%20d%3D%22M470%2084%20L479%20108%20L502%20117%20L479%20126%20L470%20150%20L461%20126%20L438%20117%20L461%20108%20Z%22%20fill%3D%22%23d9e9f9%22%2F%3E%20%3Cpath%20d%3D%22M502%2056%20L506%2067%20L517%2071%20L506%2075%20L502%2086%20L498%2075%20L487%2071%20L498%2067%20Z%22%20fill%3D%22%2358a8e3%22%2F%3E%20%3C%2Fsvg%3E" width="600" alt="Nova, the new workspace" style="display:block; width:100%; max-width:600px; height:auto;" />
|
|
721
721
|
</td>
|
|
722
722
|
</tr>
|
|
723
723
|
<tr>
|
|
724
724
|
<td align="center" style="padding:32px 36px 6px;">
|
|
725
725
|
<h2 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:21px; line-height:1.3; color:#ffffff;">Everything you asked for, in one update</h2>
|
|
726
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#aebad6;">Hi {{ first_name }}
|
|
726
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.7; color:#aebad6;">Hi {{ first_name }}: over 4,000 of you shaped this release. Nova rebuilds the parts that slowed you down and adds the three things you asked for most.</p>
|
|
727
727
|
</td>
|
|
728
728
|
</tr>
|
|
729
729
|
<tr>
|
|
@@ -733,7 +733,7 @@
|
|
|
733
733
|
<td width="33%" valign="top" align="center" style="padding:0 8px;">
|
|
734
734
|
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#1c2848; "><tr><td align="center" style="padding:12px 16px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#58a8e3;">2×</td></tr></table>
|
|
735
735
|
<h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Faster</h3>
|
|
736
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">A new engine under the hood
|
|
736
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">A new engine under the hood; big projects open instantly.</p>
|
|
737
737
|
</td>
|
|
738
738
|
<td width="34%" valign="top" align="center" style="padding:0 8px;">
|
|
739
739
|
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#1c2848; "><tr><td align="center" style="padding:12px 16px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#58a8e3;">Smart</td></tr></table>
|
|
@@ -743,7 +743,7 @@
|
|
|
743
743
|
<td width="33%" valign="top" align="center" style="padding:0 8px;">
|
|
744
744
|
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#1c2848; "><tr><td align="center" style="padding:12px 16px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#58a8e3;">100%</td></tr></table>
|
|
745
745
|
<h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Private</h3>
|
|
746
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">Your data stays yours
|
|
746
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">Your data stays yours: encrypted, never trained on.</p>
|
|
747
747
|
</td>
|
|
748
748
|
</tr>
|
|
749
749
|
</table>
|
|
@@ -752,7 +752,7 @@
|
|
|
752
752
|
<tr>
|
|
753
753
|
<td align="center" style="padding:28px 36px 8px;">
|
|
754
754
|
<a href="https://example.com/nova" style="display:inline-block; background-color:#58a8e3; color:#0b1020; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 40px; ">Try Nova today</a>
|
|
755
|
-
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#8f9cbd;">Free for every current customer
|
|
755
|
+
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#8f9cbd;">Free for every current customer: nothing to buy, nothing to migrate.</p>
|
|
756
756
|
</td>
|
|
757
757
|
</tr>
|
|
758
758
|
<tr>
|
|
@@ -777,7 +777,7 @@
|
|
|
777
777
|
<html>
|
|
778
778
|
<head>
|
|
779
779
|
<meta charset="utf-8" />
|
|
780
|
-
<title>MEGA weekend
|
|
780
|
+
<title>MEGA weekend: 50% off everything</title>
|
|
781
781
|
</head>
|
|
782
782
|
<body style="margin:0; padding:0; background-color:#ffffff;">
|
|
783
783
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff;">
|
|
@@ -846,8 +846,8 @@
|
|
|
846
846
|
<tr>
|
|
847
847
|
<td style="padding:32px 36px 6px;">
|
|
848
848
|
<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>
|
|
849
|
-
<h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.25; color:#1a1a1a;">Thanks, {{ first_name }}
|
|
850
|
-
<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’ll email tracking as soon as the courier scans it
|
|
849
|
+
<h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.25; color:#1a1a1a;">Thanks, {{ first_name }}: it’s on its way</h1>
|
|
850
|
+
<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’ll email tracking as soon as the courier scans it, usually within one business day.</p>
|
|
851
851
|
</td>
|
|
852
852
|
</tr>
|
|
853
853
|
<tr>
|
|
@@ -857,7 +857,7 @@
|
|
|
857
857
|
<td style="padding:14px 18px; border-bottom:1px solid #e6e6e2;">
|
|
858
858
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
859
859
|
<tr>
|
|
860
|
-
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Field jacket
|
|
860
|
+
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Field jacket, olive, M</td>
|
|
861
861
|
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">$148.00</td>
|
|
862
862
|
</tr>
|
|
863
863
|
</table>
|
|
@@ -867,7 +867,7 @@
|
|
|
867
867
|
<td style="padding:14px 18px; border-bottom:1px solid #e6e6e2;">
|
|
868
868
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
869
869
|
<tr>
|
|
870
|
-
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Merino crew
|
|
870
|
+
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Merino crew, charcoal, M</td>
|
|
871
871
|
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">$85.00</td>
|
|
872
872
|
</tr>
|
|
873
873
|
</table>
|
|
@@ -902,8 +902,8 @@
|
|
|
902
902
|
</tr>
|
|
903
903
|
<tr>
|
|
904
904
|
<td style="padding:10px 36px 30px;">
|
|
905
|
-
<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
|
|
906
|
-
<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
|
|
905
|
+
<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; start one from the order page above.</p>
|
|
906
|
+
<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>; you will still receive order emails.</p>
|
|
907
907
|
</td>
|
|
908
908
|
</tr>
|
|
909
909
|
</table>
|
|
@@ -928,7 +928,7 @@
|
|
|
928
928
|
<tr>
|
|
929
929
|
<td align="center" style="padding:36px 36px 10px;">
|
|
930
930
|
<p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:26px; letter-spacing:0.1em; color:#e6b93c;">★ ★ ★ ★ ★</p>
|
|
931
|
-
<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
|
|
931
|
+
<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: how is it going?</h1>
|
|
932
932
|
<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’d really appreciate it.</p>
|
|
933
933
|
</td>
|
|
934
934
|
</tr>
|
|
@@ -943,7 +943,7 @@
|
|
|
943
943
|
<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;">★</a></td>
|
|
944
944
|
</tr>
|
|
945
945
|
</table>
|
|
946
|
-
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8194a7;">Tap a star to start
|
|
946
|
+
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8194a7;">Tap a star to start; honest beats polite.</p>
|
|
947
947
|
</td>
|
|
948
948
|
</tr>
|
|
949
949
|
<tr>
|
|
@@ -956,7 +956,7 @@
|
|
|
956
956
|
<td valign="middle" width="70%" style="padding:16px 16px 16px 4px;">
|
|
957
957
|
<h2 style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:15.5px; color:#16233a;">Studio Headphones MK II</h2>
|
|
958
958
|
<p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#435d80;">Order #47190 · delivered 12 August</p>
|
|
959
|
-
<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
|
|
959
|
+
<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, good or bad.</p>
|
|
960
960
|
</td>
|
|
961
961
|
</tr>
|
|
962
962
|
</table>
|
|
@@ -1018,7 +1018,7 @@
|
|
|
1018
1018
|
<td style="padding:28px 36px 8px;">
|
|
1019
1019
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f8fc; ">
|
|
1020
1020
|
<tr>
|
|
1021
|
-
<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’t ask for a reset, ignore this email
|
|
1021
|
+
<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’t ask for a reset, ignore this email; your current password keeps working.</td>
|
|
1022
1022
|
</tr>
|
|
1023
1023
|
</table>
|
|
1024
1024
|
</td>
|
|
@@ -1040,7 +1040,7 @@
|
|
|
1040
1040
|
<html>
|
|
1041
1041
|
<head>
|
|
1042
1042
|
<meta charset="utf-8" />
|
|
1043
|
-
<title>A little thank-you
|
|
1043
|
+
<title>A little thank-you: 20% off</title>
|
|
1044
1044
|
</head>
|
|
1045
1045
|
<body style="margin:0; padding:0; background-color:#fdf8f3;">
|
|
1046
1046
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fdf8f3;">
|
|
@@ -1051,7 +1051,7 @@
|
|
|
1051
1051
|
<td align="center" style="padding:38px 36px 8px;">
|
|
1052
1052
|
<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>
|
|
1053
1053
|
<h1 style="margin:0 0 12px; font-family:Georgia, 'Times New Roman', serif; font-size:30px; line-height:1.2; color:#2d2a24;">Here’s 20% off, {{ first_name }}</h1>
|
|
1054
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#5d574c;">It’s been a year since you joined us
|
|
1054
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.65; color:#5d574c;">It’s been a year since you joined us, and that’s worth celebrating. Here’s a little something to mark it.</p>
|
|
1055
1055
|
</td>
|
|
1056
1056
|
</tr>
|
|
1057
1057
|
<tr>
|
|
@@ -1082,7 +1082,7 @@
|
|
|
1082
1082
|
</td>
|
|
1083
1083
|
<td width="50%" valign="top" style="padding:0 0 0 10px;">
|
|
1084
1084
|
<h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#2d2a24;">Stack it with sales</h3>
|
|
1085
|
-
<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
|
|
1085
|
+
<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. Yes, really.</p>
|
|
1086
1086
|
</td>
|
|
1087
1087
|
</tr>
|
|
1088
1088
|
</table>
|
|
@@ -1135,16 +1135,16 @@
|
|
|
1135
1135
|
<td align="center" style="background-color:#f6f4ee; padding:36px 40px 34px; border-bottom:1px solid #e3e0d8;">
|
|
1136
1136
|
<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>
|
|
1137
1137
|
<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>
|
|
1138
|
-
<p style="margin:0 0 18px; font-family:Georgia, serif; font-size:15px; line-height:1.65; color:#3d3a33;">Hello {{ first_name }}
|
|
1138
|
+
<p style="margin:0 0 18px; font-family:Georgia, serif; font-size:15px; line-height:1.65; color:#3d3a33;">Hello {{ first_name }}. 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>
|
|
1139
1139
|
<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>
|
|
1140
1140
|
</td>
|
|
1141
1141
|
</tr>
|
|
1142
1142
|
<tr>
|
|
1143
1143
|
<td style="padding:26px 32px 4px;">
|
|
1144
1144
|
<h3 style="margin:0 0 8px; font-family:Georgia, serif; font-size:17px; color:#1c1b18;">Also worth your time</h3>
|
|
1145
|
-
<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
|
|
1146
|
-
<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
|
|
1147
|
-
<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
|
|
1145
|
+
<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>: a ten-minute read on owning your corner of the internet.</p>
|
|
1146
|
+
<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>: what happened when we unsubscribed from everything for a month.</p>
|
|
1147
|
+
<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>: rescuing typefaces from forgotten floppy disks.</p>
|
|
1148
1148
|
</td>
|
|
1149
1149
|
</tr>
|
|
1150
1150
|
<tr>
|
|
@@ -1195,9 +1195,9 @@
|
|
|
1195
1195
|
<tr>
|
|
1196
1196
|
<td style="padding:26px 36px 4px;">
|
|
1197
1197
|
<h2 style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#10243c;">Get set up in five minutes</h2>
|
|
1198
|
-
<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> Create your first project
|
|
1199
|
-
<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> Invite your team
|
|
1200
|
-
<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> Connect your tools
|
|
1198
|
+
<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> Create your first project; a name is enough, everything else can change later.</p>
|
|
1199
|
+
<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> Invite your team: anyone with a {{ company }} email joins without approval.</p>
|
|
1200
|
+
<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> Connect your tools: two clicks each for calendar, storage and chat.</p>
|
|
1201
1201
|
</td>
|
|
1202
1202
|
</tr>
|
|
1203
1203
|
<tr>
|
|
@@ -1212,7 +1212,7 @@
|
|
|
1212
1212
|
</tr>
|
|
1213
1213
|
<tr>
|
|
1214
1214
|
<td style="padding:12px 36px 32px;">
|
|
1215
|
-
<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
|
|
1215
|
+
<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; a real person reads every message, usually within the hour.</p>
|
|
1216
1216
|
<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> · <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
|
|
1217
1217
|
</td>
|
|
1218
1218
|
</tr>
|
|
@@ -1254,11 +1254,11 @@
|
|
|
1254
1254
|
<tr>
|
|
1255
1255
|
<td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
|
|
1256
1256
|
<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>
|
|
1257
|
-
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#10243c;">
|
|
1257
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#10243c;">Express Courier</p>
|
|
1258
1258
|
</td>
|
|
1259
1259
|
<td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
|
|
1260
1260
|
<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>
|
|
1261
|
-
<p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:14px; color:#10243c;">
|
|
1261
|
+
<p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:14px; color:#10243c;">EC4821397205XX</p>
|
|
1262
1262
|
</td>
|
|
1263
1263
|
</tr>
|
|
1264
1264
|
<tr>
|
|
@@ -1321,7 +1321,7 @@
|
|
|
1321
1321
|
<td align="center" style="padding:34px 36px 8px;">
|
|
1322
1322
|
<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>
|
|
1323
1323
|
<h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Password updated</h1>
|
|
1324
|
-
<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
|
|
1324
|
+
<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; no action is needed.</p>
|
|
1325
1325
|
</td>
|
|
1326
1326
|
</tr>
|
|
1327
1327
|
<tr>
|
|
@@ -1340,7 +1340,7 @@
|
|
|
1340
1340
|
</tr>
|
|
1341
1341
|
<tr>
|
|
1342
1342
|
<td style="padding:24px 36px 6px;">
|
|
1343
|
-
<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’t you?</strong> Reset your password right away and reply to this email
|
|
1343
|
+
<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’t you?</strong> Reset your password right away and reply to this email; our team will lock the account while we look into it.</p>
|
|
1344
1344
|
</td>
|
|
1345
1345
|
</tr>
|
|
1346
1346
|
<tr>
|
|
@@ -1403,7 +1403,7 @@
|
|
|
1403
1403
|
<td style="padding:26px 36px 8px;">
|
|
1404
1404
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#151a24; ">
|
|
1405
1405
|
<tr>
|
|
1406
|
-
<td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#7d8aa5;">Never share this code
|
|
1406
|
+
<td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#7d8aa5;">Never share this code, not with support, not with anyone. {{ company }} will never ask for it by phone or email. If you didn’t try to sign in, change your password right away.</td>
|
|
1407
1407
|
</tr>
|
|
1408
1408
|
</table>
|
|
1409
1409
|
</td>
|
|
@@ -1535,14 +1535,14 @@
|
|
|
1535
1535
|
maxFilesPerDrop: 20,
|
|
1536
1536
|
};
|
|
1537
1537
|
|
|
1538
|
-
// A provider is a plain object with four methods
|
|
1538
|
+
// A provider is a plain object with four methods, two required. The editor
|
|
1539
1539
|
// never fetches anything itself, so this is the whole seam between it and
|
|
1540
1540
|
// whatever storage you run. Nothing about it is vendor-specific: point the
|
|
1541
1541
|
// calls below at S3, a DMS, a CDN or your own API and the editor is
|
|
1542
1542
|
// unchanged.
|
|
1543
1543
|
//
|
|
1544
1544
|
// This demo wires a real one. There is no server behind a static page, so
|
|
1545
|
-
// the "backend" is IndexedDB in your own browser
|
|
1545
|
+
// the "backend" is IndexedDB in your own browser, but everything the editor
|
|
1546
1546
|
// is allowed to see about it behaves like a service: round-trip latency,
|
|
1547
1547
|
// folders and search resolved on the far side, cursor-paged listings,
|
|
1548
1548
|
// uploads that are still there after a reload, deletes that stay deleted,
|
|
@@ -1551,7 +1551,7 @@
|
|
|
1551
1551
|
//
|
|
1552
1552
|
// The editor ships no files of its own: with nothing wired here the library
|
|
1553
1553
|
// opens empty and stays that way until someone drops something in. Every
|
|
1554
|
-
// file in the Assets modal is defined below
|
|
1554
|
+
// file in the Assets modal is defined below: host content, in host code,
|
|
1555
1555
|
// exactly where a real integration keeps it.
|
|
1556
1556
|
|
|
1557
1557
|
// ---- the pretend backend ------------------------------------------------
|
|
@@ -1574,7 +1574,7 @@
|
|
|
1574
1574
|
|
|
1575
1575
|
// The demo's own placeholder images, as SVG data URIs so the catalogue
|
|
1576
1576
|
// needs no binaries next to this file. A real backend hands back durable
|
|
1577
|
-
// https URLs instead
|
|
1577
|
+
// https URLs instead; see the note on `url` at the bottom.
|
|
1578
1578
|
const ph = (label, w, ht) => 'data:image/svg+xml;utf8,' + encodeURIComponent(
|
|
1579
1579
|
'<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">'
|
|
1580
1580
|
+ '<defs><pattern id="p" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">'
|
|
@@ -1695,7 +1695,7 @@
|
|
|
1695
1695
|
folders: async () => { await nap(LATENCY / 2); return FOLDERS.map((f) => ({ id: f.id, name: f.name })); },
|
|
1696
1696
|
|
|
1697
1697
|
// Folder, search and paging are all resolved here, on the far side of the
|
|
1698
|
-
// wire
|
|
1698
|
+
// wire, which is exactly why the editor stops filtering locally the
|
|
1699
1699
|
// moment a provider is assigned. A cursor is opaque to it: this one is an
|
|
1700
1700
|
// offset, a real one is usually a continuation token.
|
|
1701
1701
|
async list(q) {
|
|
@@ -1718,7 +1718,7 @@
|
|
|
1718
1718
|
|
|
1719
1719
|
// The editor has already validated the file against `storageLimits` and
|
|
1720
1720
|
// measured it, so `width`/`height` arrive filled in. Uploading from "All
|
|
1721
|
-
// files" means no folder was chosen
|
|
1721
|
+
// files" means no folder was chosen; a backend still has to put the
|
|
1722
1722
|
// bytes somewhere, and "Uploads" is this one's answer.
|
|
1723
1723
|
async upload(file, opts) {
|
|
1724
1724
|
const url = await readAsDataUrl(file);
|
|
@@ -1738,7 +1738,7 @@
|
|
|
1738
1738
|
await drop(asset.id);
|
|
1739
1739
|
},
|
|
1740
1740
|
|
|
1741
|
-
/** Not part of the contract
|
|
1741
|
+
/** Not part of the contract: a console escape hatch for this demo. */
|
|
1742
1742
|
async reset() {
|
|
1743
1743
|
const rows = await readAll();
|
|
1744
1744
|
for (let i = 0; i < rows.length; i++) await drop(rows[i].id);
|
|
@@ -1749,7 +1749,7 @@
|
|
|
1749
1749
|
})();
|
|
1750
1750
|
|
|
1751
1751
|
// The provider itself: four thin methods over whatever the backend is. This
|
|
1752
|
-
// is the entire integration
|
|
1752
|
+
// is the entire integration: no editor internals, no imports, no build step.
|
|
1753
1753
|
const demoStorage = {
|
|
1754
1754
|
folders: () => demoBackend.folders(),
|
|
1755
1755
|
list: (q) => demoBackend.list(q),
|
|
@@ -1760,7 +1760,7 @@
|
|
|
1760
1760
|
|
|
1761
1761
|
// Handy while poking at the demo: `mailcraftDemo.reset()` empties the
|
|
1762
1762
|
// library, re-seeds it, and re-lists it. Re-assigning the provider is how a
|
|
1763
|
-
// host tells the editor to start over
|
|
1763
|
+
// host tells the editor to start over, the same call the line above makes.
|
|
1764
1764
|
window.mailcraftDemo = {
|
|
1765
1765
|
reset: () => demoBackend.reset().then(() => { editor.storageProvider = demoStorage; }),
|
|
1766
1766
|
};
|
|
@@ -1772,12 +1772,12 @@
|
|
|
1772
1772
|
// folders: () => myApi.folders(), // optional
|
|
1773
1773
|
// remove: (asset) => myApi.delete(asset.id), // optional
|
|
1774
1774
|
//
|
|
1775
|
-
//
|
|
1775
|
+
// Each response maps onto `{ id, name, url, folder, folderId, w, ht, size }`.
|
|
1776
1776
|
//
|
|
1777
1777
|
// The one hard requirement is on `url`: it has to still resolve after the
|
|
1778
1778
|
// campaign is sent. A URL that expires in an hour produces mail whose images
|
|
1779
1779
|
// are already broken when it lands. This demo cheats it with data URIs, which
|
|
1780
|
-
// no email client will render
|
|
1780
|
+
// no email client will render; a real integration returns the durable https
|
|
1781
1781
|
// URL its CDN serves.
|
|
1782
1782
|
//
|
|
1783
1783
|
// README.md has the full contract.
|
package/package.json
CHANGED
package/src/core/binder.js
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
export function binder(getProps, set, core) {
|
|
3
3
|
return {
|
|
4
4
|
head: (label) => ({ kind: 'head', label }),
|
|
5
|
+
/*
|
|
6
|
+
* A read-only line of prose in the panel, for something the editor knows
|
|
7
|
+
* about the current selection that no control can express -- a `cid:`
|
|
8
|
+
* source that cannot resolve outside a sent message, a placeholder that
|
|
9
|
+
* would ship as a placeholder. It carries no key and writes nothing, so
|
|
10
|
+
* it never enters an undo step; `tone` picks the accent ('warn' is the
|
|
11
|
+
* only one used today, 'info' reads as plain muted text).
|
|
12
|
+
*/
|
|
13
|
+
note: (text, tone) => ({ kind: 'note', label: String(text || ''), tone: tone === 'info' ? 'info' : 'warn' }),
|
|
5
14
|
// `suggestions` (optional array of strings) renders as a datalist on the
|
|
6
15
|
// input: the user picks one of the host's values or types any other.
|
|
7
16
|
text: (label, key, ph, suggestions) => ({ kind: 'text', label, value: getProps()[key] ?? '', placeholder: ph || '', suggestions: Array.isArray(suggestions) && suggestions.length ? suggestions : null, onChange: (v) => set(key, v) }),
|
|
@@ -126,6 +135,7 @@ export function decorate(list) {
|
|
|
126
135
|
const d = Object.assign({}, f, {
|
|
127
136
|
key: i,
|
|
128
137
|
isHead: f.kind === 'head', isArea: f.kind === 'area', isBtn: f.kind === 'btn', isSeg: f.kind === 'seg',
|
|
138
|
+
isNote: f.kind === 'note',
|
|
129
139
|
isRange: f.kind === 'range', isToggle: f.kind === 'toggle', isSocial: f.kind === 'social', isTableGrid: f.kind === 'tablegrid', isRichLinks: f.kind === 'richLinks',
|
|
130
140
|
isRangeGroup: f.kind === 'rangeGroup', isSlider: f.kind === 'slider',
|
|
131
141
|
isRow: ['text', 'num', 'color', 'select'].indexOf(f.kind) > -1,
|