@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.
- package/DOCS.md +557 -0
- package/LICENSE +21 -0
- package/README.md +126 -0
- package/dist/mailcraft-editor.bundle.js +519 -0
- package/dist/mailcraft-editor.bundle.js.map +7 -0
- package/examples/templates/activate-your-account.html +54 -0
- package/examples/templates/back-in-stock.html +63 -0
- package/examples/templates/cart-left-behind.html +74 -0
- package/examples/templates/community-giveaway.html +81 -0
- package/examples/templates/frontend-futures-invite.html +69 -0
- package/examples/templates/give-25-get-25.html +69 -0
- package/examples/templates/invoice-paid.html +77 -0
- package/examples/templates/meet-nova-launch.html +69 -0
- package/examples/templates/mega-weekend-sale.html +57 -0
- package/examples/templates/order-confirmed.html +80 -0
- package/examples/templates/rate-your-headphones.html +71 -0
- package/examples/templates/reset-your-password.html +54 -0
- package/examples/templates/thankyou-promo-code.html +68 -0
- package/examples/templates/the-sunday-brief.html +47 -0
- package/examples/templates/welcome-to-your-workspace.html +62 -0
- package/examples/templates/your-order-shipped.html +74 -0
- package/examples/templates/your-password-was-changed.html +58 -0
- package/examples/templates/your-signin-code.html +58 -0
- package/examples/vanilla.html +1574 -0
- package/package.json +66 -0
- package/src/core/accent.js +194 -0
- package/src/core/assets.js +15 -0
- package/src/core/binder.js +119 -0
- package/src/core/blocks.js +256 -0
- package/src/core/css-cascade.js +117 -0
- package/src/core/editor-core.js +1492 -0
- package/src/core/export.js +58 -0
- package/src/core/footer.js +73 -0
- package/src/core/i18n/ar.js +177 -0
- package/src/core/i18n/bg.js +152 -0
- package/src/core/i18n/bn.js +176 -0
- package/src/core/i18n/ca.js +152 -0
- package/src/core/i18n/cs.js +152 -0
- package/src/core/i18n/da.js +152 -0
- package/src/core/i18n/de-CH.js +152 -0
- package/src/core/i18n/de.js +152 -0
- package/src/core/i18n/dz.js +179 -0
- package/src/core/i18n/el.js +152 -0
- package/src/core/i18n/en.js +269 -0
- package/src/core/i18n/es.js +152 -0
- package/src/core/i18n/et.js +152 -0
- package/src/core/i18n/fi.js +152 -0
- package/src/core/i18n/fr.js +152 -0
- package/src/core/i18n/hr.js +152 -0
- package/src/core/i18n/hu.js +152 -0
- package/src/core/i18n/index.js +83 -0
- package/src/core/i18n/it.js +152 -0
- package/src/core/i18n/lt.js +152 -0
- package/src/core/i18n/lv.js +152 -0
- package/src/core/i18n/nb.js +152 -0
- package/src/core/i18n/nl.js +152 -0
- package/src/core/i18n/pl.js +152 -0
- package/src/core/i18n/pt.js +152 -0
- package/src/core/i18n/ro.js +152 -0
- package/src/core/i18n/ru.js +152 -0
- package/src/core/i18n/sk.js +152 -0
- package/src/core/i18n/sl.js +152 -0
- package/src/core/i18n/sv.js +152 -0
- package/src/core/i18n/tables.js +50 -0
- package/src/core/i18n/tr.js +152 -0
- package/src/core/i18n/uk.js +152 -0
- package/src/core/icons.js +235 -0
- package/src/core/ids.js +1 -0
- package/src/core/import-html.js +959 -0
- package/src/core/layout-style.js +115 -0
- package/src/core/parse.js +10 -0
- package/src/core/placeholder.js +15 -0
- package/src/core/sanitize.js +141 -0
- package/src/core/storage-limits.js +184 -0
- package/src/core/storage.js +85 -0
- package/src/core/theme.js +1 -0
- package/src/core/toolbar.js +67 -0
- package/src/core/variables.js +11 -0
- package/src/create-editor.js +109 -0
- package/src/index.js +9 -0
- package/src/mailcraft-editor.js +1862 -0
- package/src/render/block-body.js +295 -0
- package/src/render/canvas.js +284 -0
- package/src/render/fields.js +609 -0
- package/src/render/focus-preserve.js +158 -0
- package/src/render/rte.js +212 -0
- package/src/render/screenshot.js +132 -0
- package/src/render/story.js +415 -0
- package/src/render/style.js +452 -0
|
@@ -0,0 +1,1574 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>MailCraft — live demo</title>
|
|
7
|
+
<meta name="description" content="A host application embedding the MailCraft email editor: host-owned theme, locale, brand colour, typography and template gallery." />
|
|
8
|
+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230065b3'/%3E%3Crect x='7' y='9.5' width='18' height='13' rx='2.2' fill='none' stroke='white' stroke-width='2.2'/%3E%3Cpath d='M7 11.5 16 18l9-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
|
|
9
|
+
<style>
|
|
10
|
+
/* The host app's brand color, as a design token -- exactly where a real
|
|
11
|
+
app keeps it. The editor is pointed at it with accent="var(--brand)".
|
|
12
|
+
The rest of the tokens are this page's own chrome, mirroring the editor's
|
|
13
|
+
palette (src/render/style.js) so the demo reads as one application rather
|
|
14
|
+
than a widget dropped into a stranger's page. */
|
|
15
|
+
:root {
|
|
16
|
+
--brand: #0065b3;
|
|
17
|
+
--bg: #ffffff;
|
|
18
|
+
--surface: #f8fafc;
|
|
19
|
+
--surface-2: #f1f5f9;
|
|
20
|
+
--text: #172033;
|
|
21
|
+
--muted: #667085;
|
|
22
|
+
--faint: #98a2b3;
|
|
23
|
+
--line: rgba(15, 23, 42, 0.11);
|
|
24
|
+
--line-soft: rgba(15, 23, 42, 0.07);
|
|
25
|
+
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
26
|
+
}
|
|
27
|
+
/* One attribute drives both: the same switch that sets the editor's `theme`
|
|
28
|
+
repaints this page. Host-owned light/dark, demonstrated rather than
|
|
29
|
+
described. */
|
|
30
|
+
body[data-theme="dark"] {
|
|
31
|
+
--bg: #0b1120;
|
|
32
|
+
--surface: #111827;
|
|
33
|
+
--surface-2: #182235;
|
|
34
|
+
--text: #f1f5f9;
|
|
35
|
+
--muted: #a8b3c4;
|
|
36
|
+
--faint: #718096;
|
|
37
|
+
--line: rgba(226, 232, 240, 0.12);
|
|
38
|
+
--line-soft: rgba(226, 232, 240, 0.07);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
* { box-sizing: border-box; }
|
|
42
|
+
html, body { margin: 0; height: 100%; }
|
|
43
|
+
body {
|
|
44
|
+
font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--bg);
|
|
45
|
+
-webkit-font-smoothing: antialiased;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* The editor is `display: block; height: 100%`, so a flex column is all it
|
|
49
|
+
takes to give it every pixel the chrome does not use. */
|
|
50
|
+
.app { display: flex; flex-direction: column; height: 100%; }
|
|
51
|
+
mailcraft-editor { flex: 1 1 auto; min-height: 0; }
|
|
52
|
+
|
|
53
|
+
/* ---- top bar: brand, menu, theme ------------------------------------- */
|
|
54
|
+
.topbar {
|
|
55
|
+
flex: none; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 18px;
|
|
56
|
+
background: var(--surface); border-bottom: 1px solid var(--line-soft);
|
|
57
|
+
}
|
|
58
|
+
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--brand); }
|
|
59
|
+
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
|
|
60
|
+
.tag {
|
|
61
|
+
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
|
|
62
|
+
color: var(--brand); background: var(--surface-2);
|
|
63
|
+
background: color-mix(in srgb, var(--brand) 12%, transparent);
|
|
64
|
+
padding: 4px 9px; border-radius: 999px;
|
|
65
|
+
}
|
|
66
|
+
.menu { display: flex; align-items: center; gap: 2px; margin-right: auto; overflow-x: auto; scrollbar-width: none; }
|
|
67
|
+
.menu::-webkit-scrollbar { display: none; }
|
|
68
|
+
.menu a {
|
|
69
|
+
color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
|
|
70
|
+
padding: 7px 11px; border-radius: 8px; transition: color 0.15s, background 0.15s;
|
|
71
|
+
}
|
|
72
|
+
.menu a:hover { color: var(--text); background: var(--surface-2); }
|
|
73
|
+
.topbar .end { display: flex; align-items: center; gap: 8px; flex: none; }
|
|
74
|
+
|
|
75
|
+
/* ---- control strip: what this host app owns --------------------------- */
|
|
76
|
+
.controls {
|
|
77
|
+
flex: none; display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 18px;
|
|
78
|
+
background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
|
|
79
|
+
}
|
|
80
|
+
.controls::-webkit-scrollbar { display: none; }
|
|
81
|
+
.field { display: flex; align-items: center; gap: 8px; flex: none; }
|
|
82
|
+
.field > label {
|
|
83
|
+
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
|
|
84
|
+
}
|
|
85
|
+
.spacer { margin-left: auto; }
|
|
86
|
+
|
|
87
|
+
select, .btn, input[type="color"] {
|
|
88
|
+
font: inherit; font-size: 12.5px; height: 32px; color: var(--text); background: var(--surface);
|
|
89
|
+
border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
|
|
90
|
+
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
|
91
|
+
}
|
|
92
|
+
select { padding: 0 8px; max-width: 220px; }
|
|
93
|
+
select:hover, .btn:hover, input[type="color"]:hover { border-color: var(--brand); }
|
|
94
|
+
select:focus-visible, .btn:focus-visible, input[type="color"]:focus-visible {
|
|
95
|
+
outline: 2px solid var(--brand); outline-offset: 1px;
|
|
96
|
+
}
|
|
97
|
+
.btn { padding: 0 13px; font-weight: 600; }
|
|
98
|
+
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
|
|
99
|
+
.btn.primary:hover { filter: brightness(1.08); }
|
|
100
|
+
input[type="color"] { width: 34px; padding: 2px; }
|
|
101
|
+
|
|
102
|
+
@media (max-width: 780px) {
|
|
103
|
+
.tag, .brand-name { display: none; }
|
|
104
|
+
.topbar, .controls { gap: 12px; padding: 0 12px; }
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
107
|
+
</head>
|
|
108
|
+
<body data-theme="light">
|
|
109
|
+
<div class="app">
|
|
110
|
+
|
|
111
|
+
<!-- The chrome below stands in for the host application's own: a product
|
|
112
|
+
header with its own navigation, and a strip of controls the host owns.
|
|
113
|
+
Theme, language, brand colour and chrome typography are host decisions,
|
|
114
|
+
pushed into the editor as attributes -- the editor never asks. -->
|
|
115
|
+
<header class="topbar">
|
|
116
|
+
<a class="brand" id="home-link" href="../README.md">
|
|
117
|
+
<svg width="26" height="26" viewBox="0 0 32 32" aria-hidden="true">
|
|
118
|
+
<rect width="32" height="32" rx="7" fill="currentColor" />
|
|
119
|
+
<rect x="7" y="9.5" width="18" height="13" rx="2.2" fill="none" stroke="#fff" stroke-width="2.2" />
|
|
120
|
+
<path d="M7 11.5 16 18l9-6.5" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
|
|
121
|
+
</svg>
|
|
122
|
+
<span class="brand-name">MailCraft</span>
|
|
123
|
+
</a>
|
|
124
|
+
<span class="tag">Live demo</span>
|
|
125
|
+
|
|
126
|
+
<!-- Menu. The documentation link is resolved at runtime (see the script at
|
|
127
|
+
the foot of the file): DOCS.md when this file is opened straight off
|
|
128
|
+
disk, DOCS.html once the same file is served from GitHub Pages. -->
|
|
129
|
+
<nav class="menu" aria-label="Primary">
|
|
130
|
+
<a id="docs-link" href="../DOCS.md">Documentation</a>
|
|
131
|
+
<a id="readme-link" href="../README.md">Overview</a>
|
|
132
|
+
<a href="https://github.com/SELISEdigitalplatforms/blocks-mailcraft" rel="noopener">GitHub</a>
|
|
133
|
+
<a href="https://www.npmjs.com/package/@seliseblocks/mailcraft" rel="noopener">npm</a>
|
|
134
|
+
</nav>
|
|
135
|
+
|
|
136
|
+
<div class="end">
|
|
137
|
+
<button id="theme-btn" class="btn" type="button">Switch to dark</button>
|
|
138
|
+
</div>
|
|
139
|
+
</header>
|
|
140
|
+
|
|
141
|
+
<div class="controls">
|
|
142
|
+
<!-- The template gallery is host UI: the editor has no Templates tab. This
|
|
143
|
+
picker sends email HTML to editor.loadTemplate() -- that's the whole
|
|
144
|
+
integration. The first template auto-loads on startup; picking another
|
|
145
|
+
loads it immediately, no separate Load step. -->
|
|
146
|
+
<div class="field">
|
|
147
|
+
<label for="template-select">Template</label>
|
|
148
|
+
<select id="template-select"></select>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div class="field">
|
|
152
|
+
<label for="lang-select">Language</label>
|
|
153
|
+
<select id="lang-select"></select>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<!-- ui-font restyles the editor chrome only; email typography stays owned
|
|
157
|
+
by the document theme. "Match host app" is ui-font="inherit" -- the
|
|
158
|
+
computed family of this page. -->
|
|
159
|
+
<div class="field">
|
|
160
|
+
<label for="font-select">Font</label>
|
|
161
|
+
<select id="font-select">
|
|
162
|
+
<option value="">Default (Manrope)</option>
|
|
163
|
+
<option value="inherit">Match host app</option>
|
|
164
|
+
<option value="Georgia, 'Times New Roman', serif">Serif</option>
|
|
165
|
+
<option value="Verdana, Geneva, sans-serif">Verdana</option>
|
|
166
|
+
</select>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div class="field spacer">
|
|
170
|
+
<label for="brand-input">Brand</label>
|
|
171
|
+
<input id="brand-input" type="color" value="#0065b3" />
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<!-- `theme`, `locale`, `accent` and `ui-font` are host-owned: while the `theme`
|
|
176
|
+
attribute is present the editor hides its built-in light/dark toggle,
|
|
177
|
+
`locale` selects a shipped UI translation (plus RTL for e.g. locale="ar"),
|
|
178
|
+
`accent` paints the chrome in this app's brand color, and `ui-font`
|
|
179
|
+
restyles the editor chrome only (email typography stays owned by the
|
|
180
|
+
document theme). `var(--brand)`
|
|
181
|
+
is read off this element, so pointing at a design token is enough -- a
|
|
182
|
+
literal (accent="#e11d48") or accent="inherit" (the host's CSS
|
|
183
|
+
`accent-color`) work too. The editor derives the hover shade, the color
|
|
184
|
+
of text drawn on the accent and the tinted washes from it, correcting
|
|
185
|
+
each for contrast against the light or dark chrome. -->
|
|
186
|
+
<mailcraft-editor
|
|
187
|
+
id="editor"
|
|
188
|
+
variables="first_name,last_name,email,company,unsubscribe_url"
|
|
189
|
+
theme="light"
|
|
190
|
+
locale="en"
|
|
191
|
+
accent="var(--brand)"
|
|
192
|
+
></mailcraft-editor>
|
|
193
|
+
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<!-- Plain script (not type="module") so this file also works when opened
|
|
197
|
+
directly by double-clicking it -- browsers block ES module imports from
|
|
198
|
+
file:// pages. Regenerate after touching src/ with `npm run build`. -->
|
|
199
|
+
<script src="../dist/mailcraft-editor.bundle.js"></script>
|
|
200
|
+
|
|
201
|
+
<!-- ---- template gallery (host content) -------------------------------------
|
|
202
|
+
Each block below is a complete email as plain HTML, inlined so this demo
|
|
203
|
+
works when double-clicked (fetch() is blocked on file:// pages). The same
|
|
204
|
+
emails live as standalone files in templates/ to copy into your own app;
|
|
205
|
+
a real host would pull the HTML from wherever it stores templates. -->
|
|
206
|
+
<script type="text/x-template" data-name="Activate your account">
|
|
207
|
+
<!doctype html>
|
|
208
|
+
<html>
|
|
209
|
+
<head>
|
|
210
|
+
<meta charset="utf-8" />
|
|
211
|
+
<title>Activate your account</title>
|
|
212
|
+
</head>
|
|
213
|
+
<body style="margin:0; padding:0; background-color:#eef2f6;">
|
|
214
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
|
|
215
|
+
<tr>
|
|
216
|
+
<td align="center" style="padding:24px 12px;">
|
|
217
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
|
|
218
|
+
<tr>
|
|
219
|
+
<td align="center" style="background-color:#0065b3; padding:22px 36px;">
|
|
220
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
|
|
221
|
+
</td>
|
|
222
|
+
</tr>
|
|
223
|
+
<tr>
|
|
224
|
+
<td align="center" style="padding:34px 36px 8px;">
|
|
225
|
+
<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>
|
|
226
|
+
<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>
|
|
227
|
+
<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>
|
|
228
|
+
</td>
|
|
229
|
+
</tr>
|
|
230
|
+
<tr>
|
|
231
|
+
<td align="center" style="padding:26px 36px 8px;">
|
|
232
|
+
<a href="https://example.com/activate" 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; ">Activate my account</a>
|
|
233
|
+
</td>
|
|
234
|
+
</tr>
|
|
235
|
+
<tr>
|
|
236
|
+
<td align="center" style="padding:10px 36px 4px;">
|
|
237
|
+
<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>
|
|
238
|
+
<p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:12px; line-height:1.6; color:#3f5063;"><a href="https://example.com/activate" style="color:#0065b3;">https://example.com/activate</a></p>
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr>
|
|
242
|
+
<td style="padding:28px 36px 8px;">
|
|
243
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f8fc; ">
|
|
244
|
+
<tr>
|
|
245
|
+
<td style="padding:16px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.65; color:#5b6d80;">This link is personal to <strong>{{ email }}</strong> and expires in 24 hours. If you didn’t create an account with {{ company }}, you can safely ignore this email.</td>
|
|
246
|
+
</tr>
|
|
247
|
+
</table>
|
|
248
|
+
</td>
|
|
249
|
+
</tr>
|
|
250
|
+
<tr>
|
|
251
|
+
<td style="padding:24px 36px 30px;">
|
|
252
|
+
<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>
|
|
253
|
+
</td>
|
|
254
|
+
</tr>
|
|
255
|
+
</table>
|
|
256
|
+
</td>
|
|
257
|
+
</tr>
|
|
258
|
+
</table>
|
|
259
|
+
</body>
|
|
260
|
+
</html>
|
|
261
|
+
</script>
|
|
262
|
+
<script type="text/x-template" data-name="Back in stock">
|
|
263
|
+
<!doctype html>
|
|
264
|
+
<html>
|
|
265
|
+
<head>
|
|
266
|
+
<meta charset="utf-8" />
|
|
267
|
+
<title>Back in stock — the one you wanted</title>
|
|
268
|
+
</head>
|
|
269
|
+
<body style="margin:0; padding:0; background-color:#faf7f2;">
|
|
270
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#faf7f2;">
|
|
271
|
+
<tr>
|
|
272
|
+
<td align="center" style="padding:24px 12px;">
|
|
273
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
|
|
274
|
+
<tr>
|
|
275
|
+
<td align="center" style="padding:36px 36px 8px;">
|
|
276
|
+
<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>
|
|
277
|
+
<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>
|
|
278
|
+
<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>
|
|
279
|
+
</td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr>
|
|
282
|
+
<td style="padding:24px 36px 4px;">
|
|
283
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f1e9; ">
|
|
284
|
+
<tr>
|
|
285
|
+
<td width="38%" valign="middle" align="center" style="padding:22px 18px;">
|
|
286
|
+
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#b85c38; ">
|
|
287
|
+
<tr>
|
|
288
|
+
<td align="center" style="padding:30px 24px;">
|
|
289
|
+
<p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#f3dcc9;">Terracotta</p>
|
|
290
|
+
<p style="margin:0; font-family:Georgia, serif; font-size:22px; color:#ffffff;">Trainer</p>
|
|
291
|
+
</td>
|
|
292
|
+
</tr>
|
|
293
|
+
</table>
|
|
294
|
+
</td>
|
|
295
|
+
<td width="62%" valign="middle" style="padding:18px 18px 18px 6px;">
|
|
296
|
+
<h2 style="margin:0 0 6px; font-family:Georgia, serif; font-size:19px; color:#29241d;">Terracotta Trainer</h2>
|
|
297
|
+
<p style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:13.5px; line-height:1.55; color:#5d574c;">Suede and canvas, hand-finished. Your size (42) is one of 60 pairs back from restock.</p>
|
|
298
|
+
<p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:15px; color:#29241d;"><span style="text-decoration:line-through; color:#a3988a;">$129</span> <strong>$99</strong> <span style="font-size:12px; color:#b85c38;">restock price</span></p>
|
|
299
|
+
<a href="https://example.com/product/terracotta-trainer" style="display:inline-block; background-color:#b85c38; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:13.5px; font-weight:bold; text-decoration:none; padding:11px 26px; ">Grab my pair</a>
|
|
300
|
+
</td>
|
|
301
|
+
</tr>
|
|
302
|
+
</table>
|
|
303
|
+
</td>
|
|
304
|
+
</tr>
|
|
305
|
+
<tr>
|
|
306
|
+
<td align="center" style="padding:20px 36px 8px;">
|
|
307
|
+
<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>
|
|
308
|
+
</td>
|
|
309
|
+
</tr>
|
|
310
|
+
<tr>
|
|
311
|
+
<td style="padding:20px 36px 8px;">
|
|
312
|
+
<hr style="border:none; border-top:1px solid #eee7db; margin:0;" />
|
|
313
|
+
</td>
|
|
314
|
+
</tr>
|
|
315
|
+
<tr>
|
|
316
|
+
<td align="center" style="padding:12px 36px 32px;">
|
|
317
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#a3988a;">You asked us to write when this returned, {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#a3988a;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#a3988a;">Preferences</a></p>
|
|
318
|
+
</td>
|
|
319
|
+
</tr>
|
|
320
|
+
</table>
|
|
321
|
+
</td>
|
|
322
|
+
</tr>
|
|
323
|
+
</table>
|
|
324
|
+
</body>
|
|
325
|
+
</html>
|
|
326
|
+
</script>
|
|
327
|
+
<script type="text/x-template" data-name="Cart left behind">
|
|
328
|
+
<!doctype html>
|
|
329
|
+
<html>
|
|
330
|
+
<head>
|
|
331
|
+
<meta charset="utf-8" />
|
|
332
|
+
<title>You left something behind</title>
|
|
333
|
+
</head>
|
|
334
|
+
<body style="margin:0; padding:0; background-color:#f6f6f8;">
|
|
335
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f6f8;">
|
|
336
|
+
<tr>
|
|
337
|
+
<td align="center" style="padding:24px 12px;">
|
|
338
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
|
|
339
|
+
<tr>
|
|
340
|
+
<td align="center" style="padding:34px 36px 8px;">
|
|
341
|
+
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#f0ecfa; ">
|
|
342
|
+
<tr>
|
|
343
|
+
<td align="center" style="padding:12px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.16em; text-transform:uppercase; color:#7048b8;">Your bag is waiting</td>
|
|
344
|
+
</tr>
|
|
345
|
+
</table>
|
|
346
|
+
</td>
|
|
347
|
+
</tr>
|
|
348
|
+
<tr>
|
|
349
|
+
<td align="center" style="padding:16px 36px 6px;">
|
|
350
|
+
<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>
|
|
351
|
+
<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>
|
|
352
|
+
</td>
|
|
353
|
+
</tr>
|
|
354
|
+
<tr>
|
|
355
|
+
<td style="padding:22px 36px 4px;">
|
|
356
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e7e3f2; ">
|
|
357
|
+
<tr>
|
|
358
|
+
<td width="30%" valign="middle" align="center" style="padding:22px 16px;">
|
|
359
|
+
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#7048b8; ">
|
|
360
|
+
<tr>
|
|
361
|
+
<td align="center" style="padding:26px 22px;">
|
|
362
|
+
<p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#dddcf3;">Chestnut</p>
|
|
363
|
+
<p style="margin:0; font-family:Georgia, serif; font-size:19px; color:#ffffff;">Weekend bag</p>
|
|
364
|
+
</td>
|
|
365
|
+
</tr>
|
|
366
|
+
</table>
|
|
367
|
+
</td>
|
|
368
|
+
<td width="70%" valign="middle" style="padding:16px 16px 16px 4px;">
|
|
369
|
+
<h2 style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#241b3a;">Leather weekend bag</h2>
|
|
370
|
+
<p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#574d70;">Chestnut · one size</p>
|
|
371
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#241b3a;"><span style="text-decoration:line-through; color:#9c92b8;">$210.00</span> <strong>$178.50</strong></p>
|
|
372
|
+
</td>
|
|
373
|
+
</tr>
|
|
374
|
+
<tr>
|
|
375
|
+
<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>
|
|
376
|
+
</tr>
|
|
377
|
+
</table>
|
|
378
|
+
</td>
|
|
379
|
+
</tr>
|
|
380
|
+
<tr>
|
|
381
|
+
<td align="center" style="padding:22px 36px 6px;">
|
|
382
|
+
<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>
|
|
383
|
+
<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>
|
|
384
|
+
</td>
|
|
385
|
+
</tr>
|
|
386
|
+
<tr>
|
|
387
|
+
<td style="padding:22px 36px 8px;">
|
|
388
|
+
<hr style="border:none; border-top:1px solid #eceaf3; margin:0;" />
|
|
389
|
+
</td>
|
|
390
|
+
</tr>
|
|
391
|
+
<tr>
|
|
392
|
+
<td align="center" style="padding:12px 36px 32px;">
|
|
393
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#9c92b8;">Sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#9c92b8;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#9c92b8;">Preferences</a></p>
|
|
394
|
+
</td>
|
|
395
|
+
</tr>
|
|
396
|
+
</table>
|
|
397
|
+
</td>
|
|
398
|
+
</tr>
|
|
399
|
+
</table>
|
|
400
|
+
</body>
|
|
401
|
+
</html>
|
|
402
|
+
</script>
|
|
403
|
+
<script type="text/x-template" data-name="Community giveaway">
|
|
404
|
+
<!doctype html>
|
|
405
|
+
<html>
|
|
406
|
+
<head>
|
|
407
|
+
<meta charset="utf-8" />
|
|
408
|
+
<title>You’re in — the community giveaway</title>
|
|
409
|
+
</head>
|
|
410
|
+
<body style="margin:0; padding:0; background-color:#0c1226;">
|
|
411
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226;">
|
|
412
|
+
<tr>
|
|
413
|
+
<td align="center" style="padding:24px 12px;">
|
|
414
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#131b36; ">
|
|
415
|
+
<tr>
|
|
416
|
+
<td align="center" style="height:10px; line-height:10px; font-size:0; padding:0;">
|
|
417
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
|
|
418
|
+
<tr>
|
|
419
|
+
<td width="20%" style="height:10px; background-color:#f59e0b; font-size:0; line-height:10px; "> </td>
|
|
420
|
+
<td width="20%" style="height:10px; background-color:#ef4444; font-size:0; line-height:10px;"> </td>
|
|
421
|
+
<td width="20%" style="height:10px; background-color:#ec4899; font-size:0; line-height:10px;"> </td>
|
|
422
|
+
<td width="20%" style="height:10px; background-color:#8b5cf6; font-size:0; line-height:10px;"> </td>
|
|
423
|
+
<td width="20%" style="height:10px; background-color:#38bdf8; font-size:0; line-height:10px; "> </td>
|
|
424
|
+
</tr>
|
|
425
|
+
</table>
|
|
426
|
+
</td>
|
|
427
|
+
</tr>
|
|
428
|
+
<tr>
|
|
429
|
+
<td align="center" style="padding:36px 36px 8px;">
|
|
430
|
+
<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>
|
|
431
|
+
<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>
|
|
432
|
+
<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>
|
|
433
|
+
</td>
|
|
434
|
+
</tr>
|
|
435
|
+
<tr>
|
|
436
|
+
<td style="padding:26px 40px 4px;">
|
|
437
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
438
|
+
<tr>
|
|
439
|
+
<td width="50%" valign="top" style="padding:0 8px 0 0;">
|
|
440
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226; ">
|
|
441
|
+
<tr>
|
|
442
|
+
<td style="padding:16px 18px;">
|
|
443
|
+
<p style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:26px; font-weight:bold; color:#f59e0b;">5</p>
|
|
444
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.5; color:#aeb8d8;">free yearly plans up for grabs</p>
|
|
445
|
+
</td>
|
|
446
|
+
</tr>
|
|
447
|
+
</table>
|
|
448
|
+
</td>
|
|
449
|
+
<td width="50%" valign="top" style="padding:0 0 0 8px;">
|
|
450
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226; ">
|
|
451
|
+
<tr>
|
|
452
|
+
<td style="padding:16px 18px;">
|
|
453
|
+
<p style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:26px; font-weight:bold; color:#38bdf8;">+5</p>
|
|
454
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.5; color:#aeb8d8;">friend passes each winner can gift</p>
|
|
455
|
+
</td>
|
|
456
|
+
</tr>
|
|
457
|
+
</table>
|
|
458
|
+
</td>
|
|
459
|
+
</tr>
|
|
460
|
+
</table>
|
|
461
|
+
</td>
|
|
462
|
+
</tr>
|
|
463
|
+
<tr>
|
|
464
|
+
<td align="center" style="padding:24px 36px 8px;">
|
|
465
|
+
<a href="https://example.com/giveaway" style="display:inline-block; background-color:#f59e0b; color:#0c1226; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 44px; ">Enter the giveaway</a>
|
|
466
|
+
<p style="margin:12px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#8a94b8;">Drawn live on stream, Friday 18 September · no purchase needed.</p>
|
|
467
|
+
</td>
|
|
468
|
+
</tr>
|
|
469
|
+
<tr>
|
|
470
|
+
<td style="padding:26px 36px 8px;">
|
|
471
|
+
<hr style="border:none; border-top:1px solid #232e58; margin:0;" />
|
|
472
|
+
</td>
|
|
473
|
+
</tr>
|
|
474
|
+
<tr>
|
|
475
|
+
<td align="center" style="padding:12px 36px 32px;">
|
|
476
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#5d6788;">Sent to {{ email }} · Winners notified by reply, never by DM.<br /><a href="{{ unsubscribe_url }}" style="color:#5d6788;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#5d6788;">Preferences</a></p>
|
|
477
|
+
</td>
|
|
478
|
+
</tr>
|
|
479
|
+
</table>
|
|
480
|
+
</td>
|
|
481
|
+
</tr>
|
|
482
|
+
</table>
|
|
483
|
+
</body>
|
|
484
|
+
</html>
|
|
485
|
+
</script>
|
|
486
|
+
<script type="text/x-template" data-name="Frontend Futures invite">
|
|
487
|
+
<!doctype html>
|
|
488
|
+
<html>
|
|
489
|
+
<head>
|
|
490
|
+
<meta charset="utf-8" />
|
|
491
|
+
<title>You’re invited — Frontend Futures, 24 Sept</title>
|
|
492
|
+
</head>
|
|
493
|
+
<body style="margin:0; padding:0; background-color:#0e0c1a;">
|
|
494
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0e0c1a;">
|
|
495
|
+
<tr>
|
|
496
|
+
<td align="center" style="padding:24px 12px;">
|
|
497
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#171332; ">
|
|
498
|
+
<tr>
|
|
499
|
+
<td align="center" style="padding:12px 36px 0;">
|
|
500
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; letter-spacing:0.24em; text-transform:uppercase; color:#8f7bd8;">{{ company }} presents</p>
|
|
501
|
+
</td>
|
|
502
|
+
</tr>
|
|
503
|
+
<tr>
|
|
504
|
+
<td align="center" style="padding:20px 36px 6px;">
|
|
505
|
+
<h1 style="margin:0 0 8px; font-family:Georgia, 'Times New Roman', serif; font-size:42px; line-height:1.05; color:#ffffff;">Frontend<br />Futures</h1>
|
|
506
|
+
<p style="margin:0; font-family:Georgia, serif; font-size:15px; font-style:italic; color:#c3b6f2;">A one-evening conference on what the web becomes next.</p>
|
|
507
|
+
</td>
|
|
508
|
+
</tr>
|
|
509
|
+
<tr>
|
|
510
|
+
<td align="center" style="padding:22px 36px 6px;">
|
|
511
|
+
<table role="presentation" cellpadding="0" cellspacing="0">
|
|
512
|
+
<tr>
|
|
513
|
+
<td align="center" valign="top" style="padding:0 18px;">
|
|
514
|
+
<p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold; color:#a48ef0;">24</p>
|
|
515
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8f83b8;">September</p>
|
|
516
|
+
</td>
|
|
517
|
+
<td align="center" valign="top" style="padding:0 18px; border-left:1px solid #332a5e;">
|
|
518
|
+
<p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold; color:#a48ef0;">18:30</p>
|
|
519
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8f83b8;">Doors</p>
|
|
520
|
+
</td>
|
|
521
|
+
<td align="center" valign="top" style="padding:0 18px; border-left:1px solid #332a5e;">
|
|
522
|
+
<p style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:bold; color:#a48ef0;">7</p>
|
|
523
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8f83b8;">Talks</p>
|
|
524
|
+
</td>
|
|
525
|
+
</tr>
|
|
526
|
+
</table>
|
|
527
|
+
</td>
|
|
528
|
+
</tr>
|
|
529
|
+
<tr>
|
|
530
|
+
<td style="padding:26px 44px 6px;">
|
|
531
|
+
<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>
|
|
532
|
+
</td>
|
|
533
|
+
</tr>
|
|
534
|
+
<tr>
|
|
535
|
+
<td align="center" style="padding:24px 36px 8px;">
|
|
536
|
+
<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>
|
|
537
|
+
<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>
|
|
538
|
+
</td>
|
|
539
|
+
</tr>
|
|
540
|
+
<tr>
|
|
541
|
+
<td style="padding:26px 36px 8px;">
|
|
542
|
+
<hr style="border:none; border-top:1px solid #2c2454; margin:0;" />
|
|
543
|
+
</td>
|
|
544
|
+
</tr>
|
|
545
|
+
<tr>
|
|
546
|
+
<td align="center" style="padding:12px 36px 32px;">
|
|
547
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6d6494;">Can’t make it in person? The talks are streamed and archived.<br />Sent to {{ email }} · <a href="{{ unsubscribe_url }}" style="color:#6d6494;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#6d6494;">Preferences</a></p>
|
|
548
|
+
</td>
|
|
549
|
+
</tr>
|
|
550
|
+
</table>
|
|
551
|
+
</td>
|
|
552
|
+
</tr>
|
|
553
|
+
</table>
|
|
554
|
+
</body>
|
|
555
|
+
</html>
|
|
556
|
+
</script>
|
|
557
|
+
<script type="text/x-template" data-name="Give 25 get 25">
|
|
558
|
+
<!doctype html>
|
|
559
|
+
<html>
|
|
560
|
+
<head>
|
|
561
|
+
<meta charset="utf-8" />
|
|
562
|
+
<title>Give $25, get $25</title>
|
|
563
|
+
</head>
|
|
564
|
+
<body style="margin:0; padding:0; background-color:#0f1c17;">
|
|
565
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0f1c17;">
|
|
566
|
+
<tr>
|
|
567
|
+
<td align="center" style="padding:24px 12px;">
|
|
568
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#16352a; ">
|
|
569
|
+
<tr>
|
|
570
|
+
<td align="center" style="background-color:#1e7a4f; padding:30px 32px 26px; ">
|
|
571
|
+
<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>
|
|
572
|
+
<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>
|
|
573
|
+
<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>
|
|
574
|
+
</td>
|
|
575
|
+
</tr>
|
|
576
|
+
<tr>
|
|
577
|
+
<td align="center" style="padding:28px 36px 8px;">
|
|
578
|
+
<p style="margin:0 0 8px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#9dc3ad;">Your personal link</p>
|
|
579
|
+
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#0f1c17; ">
|
|
580
|
+
<tr>
|
|
581
|
+
<td style="padding:12px 22px; font-family:'Courier New', Courier, monospace; font-size:13px; color:#e9f5ee;">example.com/r/{{ first_name }}-8f2</td>
|
|
582
|
+
</tr>
|
|
583
|
+
</table>
|
|
584
|
+
</td>
|
|
585
|
+
</tr>
|
|
586
|
+
<tr>
|
|
587
|
+
<td align="center" style="padding:18px 36px 8px;">
|
|
588
|
+
<a href="https://example.com/r/share" style="display:inline-block; background-color:#ffd166; color:#16352a; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; text-decoration:none; padding:14px 42px; ">Share my link</a>
|
|
589
|
+
</td>
|
|
590
|
+
</tr>
|
|
591
|
+
<tr>
|
|
592
|
+
<td style="padding:26px 36px 4px;">
|
|
593
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
594
|
+
<tr>
|
|
595
|
+
<td width="33%" valign="top" align="center" style="padding:0 8px;">
|
|
596
|
+
<h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">1. Share</h3>
|
|
597
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#9dc3ad;">Send your link to a friend who’d like this as much as you do.</p>
|
|
598
|
+
</td>
|
|
599
|
+
<td width="34%" valign="top" align="center" style="padding:0 8px;">
|
|
600
|
+
<h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">2. They save $25</h3>
|
|
601
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#9dc3ad;">Their first order over $75 comes $25 off, automatically.</p>
|
|
602
|
+
</td>
|
|
603
|
+
<td width="33%" valign="top" align="center" style="padding:0 8px;">
|
|
604
|
+
<h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">3. You get $25</h3>
|
|
605
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#9dc3ad;">Credit lands in your account the day their order ships.</p>
|
|
606
|
+
</td>
|
|
607
|
+
</tr>
|
|
608
|
+
</table>
|
|
609
|
+
</td>
|
|
610
|
+
</tr>
|
|
611
|
+
<tr>
|
|
612
|
+
<td style="padding:28px 36px 8px;">
|
|
613
|
+
<hr style="border:none; border-top:1px solid #24503d; margin:0;" />
|
|
614
|
+
</td>
|
|
615
|
+
</tr>
|
|
616
|
+
<tr>
|
|
617
|
+
<td align="center" style="padding:12px 36px 32px;">
|
|
618
|
+
<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>
|
|
619
|
+
</td>
|
|
620
|
+
</tr>
|
|
621
|
+
</table>
|
|
622
|
+
</td>
|
|
623
|
+
</tr>
|
|
624
|
+
</table>
|
|
625
|
+
</body>
|
|
626
|
+
</html>
|
|
627
|
+
</script>
|
|
628
|
+
<script type="text/x-template" data-name="Invoice paid">
|
|
629
|
+
<!doctype html>
|
|
630
|
+
<html>
|
|
631
|
+
<head>
|
|
632
|
+
<meta charset="utf-8" />
|
|
633
|
+
<title>Invoice paid — #INV-2051</title>
|
|
634
|
+
</head>
|
|
635
|
+
<body style="margin:0; padding:0; background-color:#f4f6f9;">
|
|
636
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9;">
|
|
637
|
+
<tr>
|
|
638
|
+
<td align="center" style="padding:24px 12px;">
|
|
639
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
|
|
640
|
+
<tr>
|
|
641
|
+
<td style="padding:30px 36px 10px;">
|
|
642
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
643
|
+
<tr>
|
|
644
|
+
<td style="font-family:Arial, Helvetica, sans-serif; font-size:19px; font-weight:bold; color:#14324f;">{{ company }}</td>
|
|
645
|
+
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.5; color:#6b7c8f;">Invoice <strong style="color:#14324f;">#INV-2051</strong><br />Issued 26 August 2026</td>
|
|
646
|
+
</tr>
|
|
647
|
+
</table>
|
|
648
|
+
</td>
|
|
649
|
+
</tr>
|
|
650
|
+
<tr>
|
|
651
|
+
<td style="padding:18px 36px 8px;">
|
|
652
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#e9f7ee; ">
|
|
653
|
+
<tr>
|
|
654
|
+
<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>
|
|
655
|
+
</tr>
|
|
656
|
+
</table>
|
|
657
|
+
</td>
|
|
658
|
+
</tr>
|
|
659
|
+
<tr>
|
|
660
|
+
<td style="padding:22px 36px 4px;">
|
|
661
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0; ">
|
|
662
|
+
<tr>
|
|
663
|
+
<td 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;">Description</td>
|
|
664
|
+
<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>
|
|
665
|
+
</tr>
|
|
666
|
+
<tr>
|
|
667
|
+
<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>
|
|
668
|
+
<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>
|
|
669
|
+
</tr>
|
|
670
|
+
<tr>
|
|
671
|
+
<td style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">Extra seats × 2</td>
|
|
672
|
+
<td align="right" style="padding:14px 18px; border-bottom:1px solid #e2e8f0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#14324f;">$24.00</td>
|
|
673
|
+
</tr>
|
|
674
|
+
<tr>
|
|
675
|
+
<td style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#6b7c8f;">Tax</td>
|
|
676
|
+
<td align="right" style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#6b7c8f;">$6.16</td>
|
|
677
|
+
</tr>
|
|
678
|
+
<tr>
|
|
679
|
+
<td style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#14324f;">Total paid</td>
|
|
680
|
+
<td align="right" style="padding:14px 18px; background-color:#f7fafc; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#14324f;">$79.16</td>
|
|
681
|
+
</tr>
|
|
682
|
+
</table>
|
|
683
|
+
</td>
|
|
684
|
+
</tr>
|
|
685
|
+
<tr>
|
|
686
|
+
<td align="center" style="padding:22px 36px 6px;">
|
|
687
|
+
<a href="https://example.com/invoices/2051" style="display:inline-block; background-color:#14324f; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-decoration:none; padding:12px 30px; ">Download receipt (PDF)</a>
|
|
688
|
+
</td>
|
|
689
|
+
</tr>
|
|
690
|
+
<tr>
|
|
691
|
+
<td style="padding:22px 36px 8px;">
|
|
692
|
+
<hr style="border:none; border-top:1px solid #e2e8f0; margin:0;" />
|
|
693
|
+
</td>
|
|
694
|
+
</tr>
|
|
695
|
+
<tr>
|
|
696
|
+
<td style="padding:10px 36px 30px;">
|
|
697
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">Charged to Visa •••• 4242. Questions about this invoice? Just reply to this email.<br /><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
|
|
698
|
+
</td>
|
|
699
|
+
</tr>
|
|
700
|
+
</table>
|
|
701
|
+
</td>
|
|
702
|
+
</tr>
|
|
703
|
+
</table>
|
|
704
|
+
</body>
|
|
705
|
+
</html>
|
|
706
|
+
</script>
|
|
707
|
+
<script type="text/x-template" data-name="Meet Nova launch">
|
|
708
|
+
<!doctype html>
|
|
709
|
+
<html>
|
|
710
|
+
<head>
|
|
711
|
+
<meta charset="utf-8" />
|
|
712
|
+
<title>Meet Nova — our biggest release yet</title>
|
|
713
|
+
</head>
|
|
714
|
+
<body style="margin:0; padding:0; background-color:#0b1020;">
|
|
715
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0b1020;">
|
|
716
|
+
<tr>
|
|
717
|
+
<td align="center" style="padding:24px 12px;">
|
|
718
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#111832; ">
|
|
719
|
+
<tr>
|
|
720
|
+
<td align="center" style="background-color:#0065b3; padding:34px 32px 30px; ">
|
|
721
|
+
<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>
|
|
722
|
+
<h1 style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:38px; line-height:1.1; color:#ffffff;">Meet Nova</h1>
|
|
723
|
+
<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>
|
|
724
|
+
</td>
|
|
725
|
+
</tr>
|
|
726
|
+
<tr>
|
|
727
|
+
<td align="center" style="padding:32px 36px 6px;">
|
|
728
|
+
<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>
|
|
729
|
+
<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>
|
|
730
|
+
</td>
|
|
731
|
+
</tr>
|
|
732
|
+
<tr>
|
|
733
|
+
<td style="padding:24px 36px 4px;">
|
|
734
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
735
|
+
<tr>
|
|
736
|
+
<td width="33%" valign="top" align="center" style="padding:0 8px;">
|
|
737
|
+
<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>
|
|
738
|
+
<h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Faster</h3>
|
|
739
|
+
<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>
|
|
740
|
+
</td>
|
|
741
|
+
<td width="34%" valign="top" align="center" style="padding:0 8px;">
|
|
742
|
+
<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
|
+
<h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Assist</h3>
|
|
744
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; line-height:1.55; color:#8f9cbd;">Drafts, summaries and clean-ups, one keystroke away.</p>
|
|
745
|
+
</td>
|
|
746
|
+
<td width="33%" valign="top" align="center" style="padding:0 8px;">
|
|
747
|
+
<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>
|
|
748
|
+
<h3 style="margin:10px 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#ffffff;">Private</h3>
|
|
749
|
+
<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>
|
|
750
|
+
</td>
|
|
751
|
+
</tr>
|
|
752
|
+
</table>
|
|
753
|
+
</td>
|
|
754
|
+
</tr>
|
|
755
|
+
<tr>
|
|
756
|
+
<td align="center" style="padding:28px 36px 8px;">
|
|
757
|
+
<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>
|
|
758
|
+
<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>
|
|
759
|
+
</td>
|
|
760
|
+
</tr>
|
|
761
|
+
<tr>
|
|
762
|
+
<td style="padding:26px 36px 8px;">
|
|
763
|
+
<hr style="border:none; border-top:1px solid #232e52; margin:0;" />
|
|
764
|
+
</td>
|
|
765
|
+
</tr>
|
|
766
|
+
<tr>
|
|
767
|
+
<td align="center" style="padding:14px 36px 32px;">
|
|
768
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#68738f;">Sent to {{ email }}.<br /><a href="{{ unsubscribe_url }}" style="color:#68738f;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#68738f;">Preferences</a></p>
|
|
769
|
+
</td>
|
|
770
|
+
</tr>
|
|
771
|
+
</table>
|
|
772
|
+
</td>
|
|
773
|
+
</tr>
|
|
774
|
+
</table>
|
|
775
|
+
</body>
|
|
776
|
+
</html>
|
|
777
|
+
</script>
|
|
778
|
+
<script type="text/x-template" data-name="Mega weekend sale">
|
|
779
|
+
<!doctype html>
|
|
780
|
+
<html>
|
|
781
|
+
<head>
|
|
782
|
+
<meta charset="utf-8" />
|
|
783
|
+
<title>MEGA weekend — 50% off everything</title>
|
|
784
|
+
</head>
|
|
785
|
+
<body style="margin:0; padding:0; background-color:#ffffff;">
|
|
786
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff;">
|
|
787
|
+
<tr>
|
|
788
|
+
<td align="center" style="padding:24px 12px;">
|
|
789
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#101010;">
|
|
790
|
+
<tr>
|
|
791
|
+
<td style="height:6px; line-height:6px; font-size:0; background-color:#d9f24f;"> </td>
|
|
792
|
+
</tr>
|
|
793
|
+
<tr>
|
|
794
|
+
<td align="center" style="padding:40px 32px 8px;">
|
|
795
|
+
<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>
|
|
796
|
+
<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>
|
|
797
|
+
<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>
|
|
798
|
+
</td>
|
|
799
|
+
</tr>
|
|
800
|
+
<tr>
|
|
801
|
+
<td align="center" style="padding:28px 32px 8px;">
|
|
802
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
803
|
+
<tr>
|
|
804
|
+
<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 · No minimum · No exceptions</td>
|
|
805
|
+
</tr>
|
|
806
|
+
</table>
|
|
807
|
+
</td>
|
|
808
|
+
</tr>
|
|
809
|
+
<tr>
|
|
810
|
+
<td align="center" style="padding:28px 32px 8px;">
|
|
811
|
+
<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>
|
|
812
|
+
</td>
|
|
813
|
+
</tr>
|
|
814
|
+
<tr>
|
|
815
|
+
<td style="padding:34px 32px 26px;">
|
|
816
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
817
|
+
<tr>
|
|
818
|
+
<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>
|
|
819
|
+
<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>
|
|
820
|
+
<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>
|
|
821
|
+
</tr>
|
|
822
|
+
</table>
|
|
823
|
+
</td>
|
|
824
|
+
</tr>
|
|
825
|
+
<tr>
|
|
826
|
+
<td align="center" style="background-color:#0a0a0a; padding:16px 32px;">
|
|
827
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#6e6e6e;">Sent to {{ email }} · While stock lasts.<br /><a href="{{ unsubscribe_url }}" style="color:#6e6e6e;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#6e6e6e;">Preferences</a></p>
|
|
828
|
+
</td>
|
|
829
|
+
</tr>
|
|
830
|
+
</table>
|
|
831
|
+
</td>
|
|
832
|
+
</tr>
|
|
833
|
+
</table>
|
|
834
|
+
</body>
|
|
835
|
+
</html>
|
|
836
|
+
</script>
|
|
837
|
+
<script type="text/x-template" data-name="Order confirmed">
|
|
838
|
+
<!doctype html>
|
|
839
|
+
<html>
|
|
840
|
+
<head>
|
|
841
|
+
<meta charset="utf-8" />
|
|
842
|
+
<title>Order confirmed</title>
|
|
843
|
+
</head>
|
|
844
|
+
<body style="margin:0; padding:0; background-color:#f4f4f2;">
|
|
845
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f2;">
|
|
846
|
+
<tr>
|
|
847
|
+
<td align="center" style="padding:24px 12px;">
|
|
848
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
|
|
849
|
+
<tr>
|
|
850
|
+
<td style="padding:32px 36px 6px;">
|
|
851
|
+
<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>
|
|
852
|
+
<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>
|
|
853
|
+
<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>
|
|
854
|
+
</td>
|
|
855
|
+
</tr>
|
|
856
|
+
<tr>
|
|
857
|
+
<td style="padding:24px 36px 4px;">
|
|
858
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e6e6e2; ">
|
|
859
|
+
<tr>
|
|
860
|
+
<td style="padding:14px 18px; border-bottom:1px solid #e6e6e2;">
|
|
861
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
862
|
+
<tr>
|
|
863
|
+
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Field jacket — olive, M</td>
|
|
864
|
+
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">$148.00</td>
|
|
865
|
+
</tr>
|
|
866
|
+
</table>
|
|
867
|
+
</td>
|
|
868
|
+
</tr>
|
|
869
|
+
<tr>
|
|
870
|
+
<td style="padding:14px 18px; border-bottom:1px solid #e6e6e2;">
|
|
871
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
872
|
+
<tr>
|
|
873
|
+
<td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">Merino crew — charcoal, M</td>
|
|
874
|
+
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#1a1a1a;">$85.00</td>
|
|
875
|
+
</tr>
|
|
876
|
+
</table>
|
|
877
|
+
</td>
|
|
878
|
+
</tr>
|
|
879
|
+
<tr>
|
|
880
|
+
<td style="padding:14px 18px; background-color:#fafaf8;">
|
|
881
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
882
|
+
<tr>
|
|
883
|
+
<td style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#4a4a4a;">Shipping</td>
|
|
884
|
+
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#4a4a4a;">Free</td>
|
|
885
|
+
</tr>
|
|
886
|
+
<tr>
|
|
887
|
+
<td style="padding-top:6px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#1a1a1a;">Total</td>
|
|
888
|
+
<td align="right" style="padding-top:6px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#1a1a1a;">$233.00</td>
|
|
889
|
+
</tr>
|
|
890
|
+
</table>
|
|
891
|
+
</td>
|
|
892
|
+
</tr>
|
|
893
|
+
</table>
|
|
894
|
+
</td>
|
|
895
|
+
</tr>
|
|
896
|
+
<tr>
|
|
897
|
+
<td align="center" style="padding:22px 36px 6px;">
|
|
898
|
+
<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>
|
|
899
|
+
</td>
|
|
900
|
+
</tr>
|
|
901
|
+
<tr>
|
|
902
|
+
<td style="padding:24px 36px 8px;">
|
|
903
|
+
<hr style="border:none; border-top:1px solid #e6e6e2; margin:0;" />
|
|
904
|
+
</td>
|
|
905
|
+
</tr>
|
|
906
|
+
<tr>
|
|
907
|
+
<td style="padding:10px 36px 30px;">
|
|
908
|
+
<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>
|
|
909
|
+
<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>
|
|
910
|
+
</td>
|
|
911
|
+
</tr>
|
|
912
|
+
</table>
|
|
913
|
+
</td>
|
|
914
|
+
</tr>
|
|
915
|
+
</table>
|
|
916
|
+
</body>
|
|
917
|
+
</html>
|
|
918
|
+
</script>
|
|
919
|
+
<script type="text/x-template" data-name="Rate your headphones">
|
|
920
|
+
<!doctype html>
|
|
921
|
+
<html>
|
|
922
|
+
<head>
|
|
923
|
+
<meta charset="utf-8" />
|
|
924
|
+
<title>How are your new headphones?</title>
|
|
925
|
+
</head>
|
|
926
|
+
<body style="margin:0; padding:0; background-color:#f2f4f8;">
|
|
927
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f2f4f8;">
|
|
928
|
+
<tr>
|
|
929
|
+
<td align="center" style="padding:24px 12px;">
|
|
930
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
|
|
931
|
+
<tr>
|
|
932
|
+
<td align="center" style="padding:36px 36px 10px;">
|
|
933
|
+
<p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:26px; letter-spacing:0.1em; color:#e6b93c;">★ ★ ★ ★ ★</p>
|
|
934
|
+
<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>
|
|
935
|
+
<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>
|
|
936
|
+
</td>
|
|
937
|
+
</tr>
|
|
938
|
+
<tr>
|
|
939
|
+
<td align="center" style="padding:22px 36px 8px;">
|
|
940
|
+
<table role="presentation" cellpadding="0" cellspacing="0">
|
|
941
|
+
<tr>
|
|
942
|
+
<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;">★</a></td>
|
|
943
|
+
<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;">★</a></td>
|
|
944
|
+
<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;">★</a></td>
|
|
945
|
+
<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;">★</a></td>
|
|
946
|
+
<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>
|
|
947
|
+
</tr>
|
|
948
|
+
</table>
|
|
949
|
+
<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>
|
|
950
|
+
</td>
|
|
951
|
+
</tr>
|
|
952
|
+
<tr>
|
|
953
|
+
<td style="padding:26px 36px 4px;">
|
|
954
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f9fd; ">
|
|
955
|
+
<tr>
|
|
956
|
+
<td valign="middle" width="30%" align="center" style="padding:22px 16px;">
|
|
957
|
+
<table role="presentation" cellpadding="0" cellspacing="0" style="background-color:#16233a; ">
|
|
958
|
+
<tr>
|
|
959
|
+
<td align="center" style="padding:24px 20px;">
|
|
960
|
+
<p style="margin:0 0 4px; font-family:Georgia, serif; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:#93a7c4;">Studio</p>
|
|
961
|
+
<p style="margin:0; font-family:Georgia, serif; font-size:18px; color:#ffffff;">MK II</p>
|
|
962
|
+
</td>
|
|
963
|
+
</tr>
|
|
964
|
+
</table>
|
|
965
|
+
</td>
|
|
966
|
+
<td valign="middle" width="70%" style="padding:16px 16px 16px 4px;">
|
|
967
|
+
<h2 style="margin:0 0 4px; font-family:Arial, Helvetica, sans-serif; font-size:15.5px; color:#16233a;">Studio Headphones MK II</h2>
|
|
968
|
+
<p style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#435d80;">Order #47190 · delivered 12 August</p>
|
|
969
|
+
<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>
|
|
970
|
+
</td>
|
|
971
|
+
</tr>
|
|
972
|
+
</table>
|
|
973
|
+
</td>
|
|
974
|
+
</tr>
|
|
975
|
+
<tr>
|
|
976
|
+
<td style="padding:24px 36px 8px;">
|
|
977
|
+
<hr style="border:none; border-top:1px solid #e3eaf3; margin:0;" />
|
|
978
|
+
</td>
|
|
979
|
+
</tr>
|
|
980
|
+
<tr>
|
|
981
|
+
<td align="center" style="padding:12px 36px 32px;">
|
|
982
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#8194a7;">Sent to {{ email }} · we only ask once per order.<br /><a href="{{ unsubscribe_url }}" style="color:#8194a7;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#8194a7;">Preferences</a></p>
|
|
983
|
+
</td>
|
|
984
|
+
</tr>
|
|
985
|
+
</table>
|
|
986
|
+
</td>
|
|
987
|
+
</tr>
|
|
988
|
+
</table>
|
|
989
|
+
</body>
|
|
990
|
+
</html>
|
|
991
|
+
</script>
|
|
992
|
+
<script type="text/x-template" data-name="Reset your password">
|
|
993
|
+
<!doctype html>
|
|
994
|
+
<html>
|
|
995
|
+
<head>
|
|
996
|
+
<meta charset="utf-8" />
|
|
997
|
+
<title>Reset your password</title>
|
|
998
|
+
</head>
|
|
999
|
+
<body style="margin:0; padding:0; background-color:#eef2f6;">
|
|
1000
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
|
|
1001
|
+
<tr>
|
|
1002
|
+
<td align="center" style="padding:24px 12px;">
|
|
1003
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
|
|
1004
|
+
<tr>
|
|
1005
|
+
<td align="center" style="background-color:#0065b3; padding:22px 36px;">
|
|
1006
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
|
|
1007
|
+
</td>
|
|
1008
|
+
</tr>
|
|
1009
|
+
<tr>
|
|
1010
|
+
<td align="center" style="padding:34px 36px 8px;">
|
|
1011
|
+
<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>
|
|
1012
|
+
<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>
|
|
1013
|
+
<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>
|
|
1014
|
+
</td>
|
|
1015
|
+
</tr>
|
|
1016
|
+
<tr>
|
|
1017
|
+
<td align="center" style="padding:26px 36px 8px;">
|
|
1018
|
+
<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>
|
|
1019
|
+
</td>
|
|
1020
|
+
</tr>
|
|
1021
|
+
<tr>
|
|
1022
|
+
<td align="center" style="padding:10px 36px 4px;">
|
|
1023
|
+
<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>
|
|
1024
|
+
<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>
|
|
1025
|
+
</td>
|
|
1026
|
+
</tr>
|
|
1027
|
+
<tr>
|
|
1028
|
+
<td style="padding:28px 36px 8px;">
|
|
1029
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f8fc; ">
|
|
1030
|
+
<tr>
|
|
1031
|
+
<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>
|
|
1032
|
+
</tr>
|
|
1033
|
+
</table>
|
|
1034
|
+
</td>
|
|
1035
|
+
</tr>
|
|
1036
|
+
<tr>
|
|
1037
|
+
<td style="padding:24px 36px 30px;">
|
|
1038
|
+
<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>
|
|
1039
|
+
</td>
|
|
1040
|
+
</tr>
|
|
1041
|
+
</table>
|
|
1042
|
+
</td>
|
|
1043
|
+
</tr>
|
|
1044
|
+
</table>
|
|
1045
|
+
</body>
|
|
1046
|
+
</html>
|
|
1047
|
+
</script>
|
|
1048
|
+
<script type="text/x-template" data-name="Thank-you promo code">
|
|
1049
|
+
<!doctype html>
|
|
1050
|
+
<html>
|
|
1051
|
+
<head>
|
|
1052
|
+
<meta charset="utf-8" />
|
|
1053
|
+
<title>A little thank-you — 20% off</title>
|
|
1054
|
+
</head>
|
|
1055
|
+
<body style="margin:0; padding:0; background-color:#fdf8f3;">
|
|
1056
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fdf8f3;">
|
|
1057
|
+
<tr>
|
|
1058
|
+
<td align="center" style="padding:24px 12px;">
|
|
1059
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
|
|
1060
|
+
<tr>
|
|
1061
|
+
<td align="center" style="padding:38px 36px 8px;">
|
|
1062
|
+
<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>
|
|
1063
|
+
<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>
|
|
1064
|
+
<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>
|
|
1065
|
+
</td>
|
|
1066
|
+
</tr>
|
|
1067
|
+
<tr>
|
|
1068
|
+
<td align="center" style="padding:26px 36px 8px;">
|
|
1069
|
+
<table role="presentation" cellpadding="0" cellspacing="0" style="border:2px dashed #d9b98a; ">
|
|
1070
|
+
<tr>
|
|
1071
|
+
<td align="center" style="padding:22px 46px;">
|
|
1072
|
+
<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>
|
|
1073
|
+
<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>
|
|
1074
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12.5px; color:#a3845c;">20% off · yours until 30 September</p>
|
|
1075
|
+
</td>
|
|
1076
|
+
</tr>
|
|
1077
|
+
</table>
|
|
1078
|
+
</td>
|
|
1079
|
+
</tr>
|
|
1080
|
+
<tr>
|
|
1081
|
+
<td align="center" style="padding:24px 36px 8px;">
|
|
1082
|
+
<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>
|
|
1083
|
+
</td>
|
|
1084
|
+
</tr>
|
|
1085
|
+
<tr>
|
|
1086
|
+
<td style="padding:26px 36px 6px;">
|
|
1087
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
1088
|
+
<tr>
|
|
1089
|
+
<td width="50%" valign="top" style="padding:0 10px 0 0;">
|
|
1090
|
+
<h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#2d2a24;">Works on everything</h3>
|
|
1091
|
+
<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>
|
|
1092
|
+
</td>
|
|
1093
|
+
<td width="50%" valign="top" style="padding:0 0 0 10px;">
|
|
1094
|
+
<h3 style="margin:0 0 6px; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; color:#2d2a24;">Stack it with sales</h3>
|
|
1095
|
+
<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>
|
|
1096
|
+
</td>
|
|
1097
|
+
</tr>
|
|
1098
|
+
</table>
|
|
1099
|
+
</td>
|
|
1100
|
+
</tr>
|
|
1101
|
+
<tr>
|
|
1102
|
+
<td style="padding:24px 36px 8px;">
|
|
1103
|
+
<hr style="border:none; border-top:1px solid #eee3d2; margin:0;" />
|
|
1104
|
+
</td>
|
|
1105
|
+
</tr>
|
|
1106
|
+
<tr>
|
|
1107
|
+
<td align="center" style="padding:12px 36px 32px;">
|
|
1108
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#a3988a;">Sent to {{ email }} · One code per order.<br /><a href="{{ unsubscribe_url }}" style="color:#a3988a;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#a3988a;">Preferences</a></p>
|
|
1109
|
+
</td>
|
|
1110
|
+
</tr>
|
|
1111
|
+
</table>
|
|
1112
|
+
</td>
|
|
1113
|
+
</tr>
|
|
1114
|
+
</table>
|
|
1115
|
+
</body>
|
|
1116
|
+
</html>
|
|
1117
|
+
</script>
|
|
1118
|
+
<script type="text/x-template" data-name="The Sunday Brief">
|
|
1119
|
+
<!doctype html>
|
|
1120
|
+
<html>
|
|
1121
|
+
<head>
|
|
1122
|
+
<meta charset="utf-8" />
|
|
1123
|
+
<title>The Sunday Brief</title>
|
|
1124
|
+
</head>
|
|
1125
|
+
<body style="margin:0; padding:0; background-color:#f1f0ec;">
|
|
1126
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f1f0ec;">
|
|
1127
|
+
<tr>
|
|
1128
|
+
<td align="center" style="padding:24px 12px;">
|
|
1129
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
|
|
1130
|
+
<tr>
|
|
1131
|
+
<td style="background-color:#1c1b18; padding:26px 32px;">
|
|
1132
|
+
<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>
|
|
1133
|
+
<p style="margin:0; font-family:Georgia, serif; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:#b8b2a4;">Issue 214 · Curated reads for a slow morning</p>
|
|
1134
|
+
</td>
|
|
1135
|
+
</tr>
|
|
1136
|
+
<tr>
|
|
1137
|
+
<td style="height:5px; line-height:5px; font-size:0; background-color:#a06b2c;"> </td>
|
|
1138
|
+
</tr>
|
|
1139
|
+
<tr>
|
|
1140
|
+
<td align="center" style="background-color:#f6f4ee; padding:36px 40px 34px; border-bottom:1px solid #e3e0d8;">
|
|
1141
|
+
<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>
|
|
1142
|
+
<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>
|
|
1143
|
+
<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>
|
|
1144
|
+
<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>
|
|
1145
|
+
</td>
|
|
1146
|
+
</tr>
|
|
1147
|
+
<tr>
|
|
1148
|
+
<td style="padding:26px 32px 4px;">
|
|
1149
|
+
<h3 style="margin:0 0 8px; font-family:Georgia, serif; font-size:17px; color:#1c1b18;">Also worth your time</h3>
|
|
1150
|
+
<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>
|
|
1151
|
+
<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>
|
|
1152
|
+
<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>
|
|
1153
|
+
</td>
|
|
1154
|
+
</tr>
|
|
1155
|
+
<tr>
|
|
1156
|
+
<td align="center" style="padding:24px 32px 30px;">
|
|
1157
|
+
<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> · <a href="https://example.com/preferences" style="color:#8d887b;">Update preferences</a></p>
|
|
1158
|
+
</td>
|
|
1159
|
+
</tr>
|
|
1160
|
+
</table>
|
|
1161
|
+
</td>
|
|
1162
|
+
</tr>
|
|
1163
|
+
</table>
|
|
1164
|
+
</body>
|
|
1165
|
+
</html>
|
|
1166
|
+
</script>
|
|
1167
|
+
<script type="text/x-template" data-name="Welcome to your workspace">
|
|
1168
|
+
<!doctype html>
|
|
1169
|
+
<html>
|
|
1170
|
+
<head>
|
|
1171
|
+
<meta charset="utf-8" />
|
|
1172
|
+
<title>Welcome to your workspace</title>
|
|
1173
|
+
</head>
|
|
1174
|
+
<body style="margin:0; padding:0; background-color:#eef2f6;">
|
|
1175
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
|
|
1176
|
+
<tr>
|
|
1177
|
+
<td align="center" style="padding:24px 12px;">
|
|
1178
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
|
|
1179
|
+
<tr>
|
|
1180
|
+
<td style="height:5px; line-height:5px; font-size:0; background-color:#0065b3; "> </td>
|
|
1181
|
+
</tr>
|
|
1182
|
+
<tr>
|
|
1183
|
+
<td style="padding:34px 36px 8px;">
|
|
1184
|
+
<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>
|
|
1185
|
+
<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>
|
|
1186
|
+
</td>
|
|
1187
|
+
</tr>
|
|
1188
|
+
<tr>
|
|
1189
|
+
<td style="padding:24px 36px 0;">
|
|
1190
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0065b3; ">
|
|
1191
|
+
<tr>
|
|
1192
|
+
<td align="center" style="padding:26px 30px;">
|
|
1193
|
+
<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>
|
|
1194
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; letter-spacing:0.04em; color:#cfe3f7;">Unlimited projects · Invite anyone · Connect your tools</p>
|
|
1195
|
+
</td>
|
|
1196
|
+
</tr>
|
|
1197
|
+
</table>
|
|
1198
|
+
</td>
|
|
1199
|
+
</tr>
|
|
1200
|
+
<tr>
|
|
1201
|
+
<td style="padding:26px 36px 4px;">
|
|
1202
|
+
<h2 style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#10243c;">Get set up in five minutes</h2>
|
|
1203
|
+
<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>
|
|
1204
|
+
<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>
|
|
1205
|
+
<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>
|
|
1206
|
+
</td>
|
|
1207
|
+
</tr>
|
|
1208
|
+
<tr>
|
|
1209
|
+
<td align="center" style="padding:18px 36px 6px;">
|
|
1210
|
+
<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>
|
|
1211
|
+
</td>
|
|
1212
|
+
</tr>
|
|
1213
|
+
<tr>
|
|
1214
|
+
<td style="padding:26px 36px 8px;">
|
|
1215
|
+
<hr style="border:none; border-top:1px solid #e1e8ef; margin:0;" />
|
|
1216
|
+
</td>
|
|
1217
|
+
</tr>
|
|
1218
|
+
<tr>
|
|
1219
|
+
<td style="padding:12px 36px 32px;">
|
|
1220
|
+
<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>
|
|
1221
|
+
<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>
|
|
1222
|
+
</td>
|
|
1223
|
+
</tr>
|
|
1224
|
+
</table>
|
|
1225
|
+
</td>
|
|
1226
|
+
</tr>
|
|
1227
|
+
</table>
|
|
1228
|
+
</body>
|
|
1229
|
+
</html>
|
|
1230
|
+
</script>
|
|
1231
|
+
<script type="text/x-template" data-name="Your order shipped">
|
|
1232
|
+
<!doctype html>
|
|
1233
|
+
<html>
|
|
1234
|
+
<head>
|
|
1235
|
+
<meta charset="utf-8" />
|
|
1236
|
+
<title>Your order is on its way</title>
|
|
1237
|
+
</head>
|
|
1238
|
+
<body style="margin:0; padding:0; background-color:#eef2f6;">
|
|
1239
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
|
|
1240
|
+
<tr>
|
|
1241
|
+
<td align="center" style="padding:24px 12px;">
|
|
1242
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
|
|
1243
|
+
<tr>
|
|
1244
|
+
<td align="center" style="background-color:#0065b3; padding:22px 36px;">
|
|
1245
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
|
|
1246
|
+
</td>
|
|
1247
|
+
</tr>
|
|
1248
|
+
<tr>
|
|
1249
|
+
<td align="center" style="padding:34px 36px 8px;">
|
|
1250
|
+
<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 · Order #48213</p>
|
|
1251
|
+
<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>
|
|
1252
|
+
<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>
|
|
1253
|
+
</td>
|
|
1254
|
+
</tr>
|
|
1255
|
+
<tr>
|
|
1256
|
+
<td style="padding:24px 36px 8px;">
|
|
1257
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e1e8ef; ">
|
|
1258
|
+
<tr>
|
|
1259
|
+
<td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
|
|
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;">Carrier</p>
|
|
1261
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#10243c;">DHL Express</p>
|
|
1262
|
+
</td>
|
|
1263
|
+
<td style="padding:16px 18px; border-bottom:1px solid #e1e8ef;">
|
|
1264
|
+
<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>
|
|
1265
|
+
<p style="margin:0; font-family:'Courier New', Courier, monospace; font-size:14px; color:#10243c;">JD014669321DE</p>
|
|
1266
|
+
</td>
|
|
1267
|
+
</tr>
|
|
1268
|
+
<tr>
|
|
1269
|
+
<td colspan="2" style="padding:20px 18px 18px;">
|
|
1270
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
1271
|
+
<tr>
|
|
1272
|
+
<td width="75%" style="height:6px; background-color:#0065b3; font-size:0; line-height:6px;"> </td>
|
|
1273
|
+
<td width="25%" style="height:6px; background-color:#e1e8ef; font-size:0; line-height:6px;"> </td>
|
|
1274
|
+
</tr>
|
|
1275
|
+
<tr>
|
|
1276
|
+
<td style="padding-top:8px; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; color:#0065b3;">Ordered · Packed · Shipped</td>
|
|
1277
|
+
<td align="right" style="padding-top:8px; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; color:#8194a7;">Out for delivery</td>
|
|
1278
|
+
</tr>
|
|
1279
|
+
</table>
|
|
1280
|
+
</td>
|
|
1281
|
+
</tr>
|
|
1282
|
+
</table>
|
|
1283
|
+
</td>
|
|
1284
|
+
</tr>
|
|
1285
|
+
<tr>
|
|
1286
|
+
<td align="center" style="padding:22px 36px 6px;">
|
|
1287
|
+
<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>
|
|
1288
|
+
</td>
|
|
1289
|
+
</tr>
|
|
1290
|
+
<tr>
|
|
1291
|
+
<td style="padding:22px 36px 8px;">
|
|
1292
|
+
<hr style="border:none; border-top:1px solid #e1e8ef; margin:0;" />
|
|
1293
|
+
</td>
|
|
1294
|
+
</tr>
|
|
1295
|
+
<tr>
|
|
1296
|
+
<td style="padding:10px 36px 30px;">
|
|
1297
|
+
<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> · <a href="https://example.com/preferences" style="color:#8194a7;">Notification settings</a></p>
|
|
1298
|
+
</td>
|
|
1299
|
+
</tr>
|
|
1300
|
+
</table>
|
|
1301
|
+
</td>
|
|
1302
|
+
</tr>
|
|
1303
|
+
</table>
|
|
1304
|
+
</body>
|
|
1305
|
+
</html>
|
|
1306
|
+
</script>
|
|
1307
|
+
<script type="text/x-template" data-name="Your password was changed">
|
|
1308
|
+
<!doctype html>
|
|
1309
|
+
<html>
|
|
1310
|
+
<head>
|
|
1311
|
+
<meta charset="utf-8" />
|
|
1312
|
+
<title>Your password was changed</title>
|
|
1313
|
+
</head>
|
|
1314
|
+
<body style="margin:0; padding:0; background-color:#eef2f6;">
|
|
1315
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
|
|
1316
|
+
<tr>
|
|
1317
|
+
<td align="center" style="padding:24px 12px;">
|
|
1318
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
|
|
1319
|
+
<tr>
|
|
1320
|
+
<td align="center" style="background-color:#0065b3; padding:22px 36px;">
|
|
1321
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; letter-spacing:0.08em; color:#ffffff;">{{ company }}</p>
|
|
1322
|
+
</td>
|
|
1323
|
+
</tr>
|
|
1324
|
+
<tr>
|
|
1325
|
+
<td align="center" style="padding:34px 36px 8px;">
|
|
1326
|
+
<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>
|
|
1327
|
+
<h1 style="margin:0 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:26px; line-height:1.25; color:#10243c;">Password updated</h1>
|
|
1328
|
+
<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>
|
|
1329
|
+
</td>
|
|
1330
|
+
</tr>
|
|
1331
|
+
<tr>
|
|
1332
|
+
<td style="padding:26px 36px 8px;">
|
|
1333
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e1e8ef; ">
|
|
1334
|
+
<tr>
|
|
1335
|
+
<td style="padding:14px 18px; border-bottom:1px solid #e1e8ef; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">Account</td>
|
|
1336
|
+
<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>
|
|
1337
|
+
</tr>
|
|
1338
|
+
<tr>
|
|
1339
|
+
<td style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#8194a7;">When</td>
|
|
1340
|
+
<td align="right" style="padding:14px 18px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#10243c;">Just now, from this account’s session</td>
|
|
1341
|
+
</tr>
|
|
1342
|
+
</table>
|
|
1343
|
+
</td>
|
|
1344
|
+
</tr>
|
|
1345
|
+
<tr>
|
|
1346
|
+
<td style="padding:24px 36px 6px;">
|
|
1347
|
+
<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>
|
|
1348
|
+
</td>
|
|
1349
|
+
</tr>
|
|
1350
|
+
<tr>
|
|
1351
|
+
<td align="center" style="padding:14px 36px 8px;">
|
|
1352
|
+
<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>
|
|
1353
|
+
</td>
|
|
1354
|
+
</tr>
|
|
1355
|
+
<tr>
|
|
1356
|
+
<td style="padding:26px 36px 30px;">
|
|
1357
|
+
<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>
|
|
1358
|
+
</td>
|
|
1359
|
+
</tr>
|
|
1360
|
+
</table>
|
|
1361
|
+
</td>
|
|
1362
|
+
</tr>
|
|
1363
|
+
</table>
|
|
1364
|
+
</body>
|
|
1365
|
+
</html>
|
|
1366
|
+
</script>
|
|
1367
|
+
<script type="text/x-template" data-name="Your sign-in code">
|
|
1368
|
+
<!doctype html>
|
|
1369
|
+
<html>
|
|
1370
|
+
<head>
|
|
1371
|
+
<meta charset="utf-8" />
|
|
1372
|
+
<title>Your verification code</title>
|
|
1373
|
+
</head>
|
|
1374
|
+
<body style="margin:0; padding:0; background-color:#10141c;">
|
|
1375
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#10141c;">
|
|
1376
|
+
<tr>
|
|
1377
|
+
<td align="center" style="padding:24px 12px;">
|
|
1378
|
+
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#1a1f2b; ">
|
|
1379
|
+
<tr>
|
|
1380
|
+
<td align="center" style="padding:36px 36px 0;">
|
|
1381
|
+
<p style="margin:0 0 14px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; letter-spacing:0.2em; text-transform:uppercase; color:#7d8aa5;">{{ company }} · sign-in code</p>
|
|
1382
|
+
</td>
|
|
1383
|
+
</tr>
|
|
1384
|
+
<tr>
|
|
1385
|
+
<td align="center" style="padding:8px 36px 10px;">
|
|
1386
|
+
<h1 style="margin:0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:24px; line-height:1.3; color:#f2f5fa;">Hi {{ first_name }}, here is your code</h1>
|
|
1387
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:14.5px; line-height:1.65; color:#a8b3c7;">Enter this one-time code to finish signing in. It works only once.</p>
|
|
1388
|
+
</td>
|
|
1389
|
+
</tr>
|
|
1390
|
+
<tr>
|
|
1391
|
+
<td align="center" style="padding:26px 36px 8px;">
|
|
1392
|
+
<div style="display:inline-block; background-color:#10141c; border:1px solid #2c3446; ">
|
|
1393
|
+
<table role="presentation" cellpadding="0" cellspacing="0">
|
|
1394
|
+
<tr>
|
|
1395
|
+
<td align="center" style="padding:20px 44px; font-family:'Courier New', Courier, monospace; font-size:38px; font-weight:bold; letter-spacing:0.35em; color:#ffffff;">814722</td>
|
|
1396
|
+
</tr>
|
|
1397
|
+
</table>
|
|
1398
|
+
</div>
|
|
1399
|
+
</td>
|
|
1400
|
+
</tr>
|
|
1401
|
+
<tr>
|
|
1402
|
+
<td align="center" style="padding:10px 36px 8px;">
|
|
1403
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#7d8aa5;">This code expires in <strong style="color:#f2f5fa;">10 minutes</strong>.</p>
|
|
1404
|
+
</td>
|
|
1405
|
+
</tr>
|
|
1406
|
+
<tr>
|
|
1407
|
+
<td style="padding:26px 36px 8px;">
|
|
1408
|
+
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#151a24; ">
|
|
1409
|
+
<tr>
|
|
1410
|
+
<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>
|
|
1411
|
+
</tr>
|
|
1412
|
+
</table>
|
|
1413
|
+
</td>
|
|
1414
|
+
</tr>
|
|
1415
|
+
<tr>
|
|
1416
|
+
<td align="center" style="padding:22px 36px 32px;">
|
|
1417
|
+
<p style="margin:0; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; line-height:1.6; color:#5d6981;">Sent to {{ email }}<br /><a href="{{ unsubscribe_url }}" style="color:#5d6981;">Unsubscribe</a> · <a href="https://example.com/preferences" style="color:#5d6981;">Notification settings</a></p>
|
|
1418
|
+
</td>
|
|
1419
|
+
</tr>
|
|
1420
|
+
</table>
|
|
1421
|
+
</td>
|
|
1422
|
+
</tr>
|
|
1423
|
+
</table>
|
|
1424
|
+
</body>
|
|
1425
|
+
</html>
|
|
1426
|
+
</script>
|
|
1427
|
+
|
|
1428
|
+
<script>
|
|
1429
|
+
const bundle = window.MailCraftEditorBundle;
|
|
1430
|
+
const editor = document.getElementById('editor');
|
|
1431
|
+
editor.addEventListener('export', (e) => {
|
|
1432
|
+
console.log('exported html length', e.detail.length);
|
|
1433
|
+
});
|
|
1434
|
+
|
|
1435
|
+
// ---- menu ---------------------------------------------------------------
|
|
1436
|
+
// The same file is read two ways: double-clicked off disk, and served as part
|
|
1437
|
+
// of the GitHub Pages site, where Jekyll has turned DOCS.md into DOCS.html.
|
|
1438
|
+
// One check keeps both links live instead of picking a winner.
|
|
1439
|
+
if (location.protocol !== 'file:') {
|
|
1440
|
+
document.getElementById('docs-link').href = '../DOCS.html';
|
|
1441
|
+
document.getElementById('readme-link').href = '../';
|
|
1442
|
+
document.getElementById('home-link').href = '../';
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
// Host-controlled theme: flip the attribute, the editor follows -- and this
|
|
1446
|
+
// page follows with it, so light/dark is one decision for the whole app.
|
|
1447
|
+
const themeBtn = document.getElementById('theme-btn');
|
|
1448
|
+
themeBtn.addEventListener('click', () => {
|
|
1449
|
+
const next = editor.getAttribute('theme') === 'dark' ? 'light' : 'dark';
|
|
1450
|
+
editor.setAttribute('theme', next);
|
|
1451
|
+
document.body.dataset.theme = next;
|
|
1452
|
+
themeBtn.textContent = next === 'dark' ? 'Switch to light' : 'Switch to dark';
|
|
1453
|
+
});
|
|
1454
|
+
|
|
1455
|
+
// Host-controlled brand color. Nothing notifies an element that a CSS
|
|
1456
|
+
// custom property changed, so after moving --brand the host re-sets the
|
|
1457
|
+
// attribute to the same string -- that is the "re-read my token" signal.
|
|
1458
|
+
// (Handing over a literal, `editor.accent = brandInput.value`, needs no
|
|
1459
|
+
// nudge and is the shorter route when the color isn't already a token.)
|
|
1460
|
+
const brandInput = document.getElementById('brand-input');
|
|
1461
|
+
brandInput.addEventListener('input', () => {
|
|
1462
|
+
document.documentElement.style.setProperty('--brand', brandInput.value);
|
|
1463
|
+
editor.accent = 'var(--brand)';
|
|
1464
|
+
});
|
|
1465
|
+
|
|
1466
|
+
// Host-controlled chrome font. The attribute takes any CSS font-family
|
|
1467
|
+
// value; "inherit" snapshots this page's computed family. Setting the
|
|
1468
|
+
// attribute re-renders the chrome immediately.
|
|
1469
|
+
const fontSelect = document.getElementById('font-select');
|
|
1470
|
+
fontSelect.addEventListener('change', () => {
|
|
1471
|
+
if (fontSelect.value) editor.setAttribute('ui-font', fontSelect.value);
|
|
1472
|
+
else editor.removeAttribute('ui-font');
|
|
1473
|
+
});
|
|
1474
|
+
|
|
1475
|
+
// Host-controlled language: one attribute per shipped locale.
|
|
1476
|
+
const langSelect = document.getElementById('lang-select');
|
|
1477
|
+
bundle.LOCALES.forEach((l) => {
|
|
1478
|
+
const o = document.createElement('option');
|
|
1479
|
+
o.value = l.tag; o.textContent = l.name;
|
|
1480
|
+
langSelect.appendChild(o);
|
|
1481
|
+
});
|
|
1482
|
+
langSelect.value = editor.getAttribute('locale') || 'en';
|
|
1483
|
+
langSelect.addEventListener('change', () => {
|
|
1484
|
+
editor.setAttribute('locale', langSelect.value);
|
|
1485
|
+
});
|
|
1486
|
+
|
|
1487
|
+
// ---- templates ----------------------------------------------------------
|
|
1488
|
+
// Templates are host content and host UI -- the editor has no gallery, no
|
|
1489
|
+
// Templates tab, and ships no catalogue. The whole integration is one call:
|
|
1490
|
+
// send email HTML, the editor imports it.
|
|
1491
|
+
//
|
|
1492
|
+
// editor.loadTemplate({ name, html }) // raw email HTML, via the importer
|
|
1493
|
+
// editor.loadTemplate({ name, doc }) // a saved document object
|
|
1494
|
+
// const doc = editor.getContent() // capture back out, to store as a template
|
|
1495
|
+
//
|
|
1496
|
+
// The first template loads on its own: a host app typically opens a known
|
|
1497
|
+
// starting point (a fresh campaign skeleton, a draft from the DB) rather
|
|
1498
|
+
// than an empty canvas, so no button press is needed.
|
|
1499
|
+
const tplSelect = document.getElementById('template-select');
|
|
1500
|
+
const blocks = Array.from(document.querySelectorAll('script[type="text/x-template"]'));
|
|
1501
|
+
blocks.forEach((block, i) => {
|
|
1502
|
+
const o = document.createElement('option');
|
|
1503
|
+
o.value = String(i); o.textContent = block.dataset.name;
|
|
1504
|
+
tplSelect.appendChild(o);
|
|
1505
|
+
});
|
|
1506
|
+
const loadSelected = () => {
|
|
1507
|
+
const block = blocks[Number(tplSelect.value)];
|
|
1508
|
+
editor.loadTemplate({ name: block.dataset.name, html: block.textContent });
|
|
1509
|
+
};
|
|
1510
|
+
tplSelect.addEventListener('change', loadSelected);
|
|
1511
|
+
loadSelected();
|
|
1512
|
+
|
|
1513
|
+
// ---- storage ------------------------------------------------------------
|
|
1514
|
+
//
|
|
1515
|
+
// What may be uploaded is the host app's call, so the editor ships no
|
|
1516
|
+
// defaults: with a provider wired and no limits set, uploads are refused.
|
|
1517
|
+
// The values below are a reasonable email starting point, not a rule --
|
|
1518
|
+
//
|
|
1519
|
+
// * JPEG/PNG/GIF render everywhere. WebP does not: Outlook on Windows
|
|
1520
|
+
// draws mail with the Word engine and shows nothing at all. AVIF is
|
|
1521
|
+
// worse supported still.
|
|
1522
|
+
// * 2 MB is a per-file ceiling most sending platforms are comfortable
|
|
1523
|
+
// with; tighten it if yours is stricter.
|
|
1524
|
+
// * Email bodies are 600px wide, so 1600px leaves room for a retina
|
|
1525
|
+
// asset without letting a 6000px camera original through.
|
|
1526
|
+
//
|
|
1527
|
+
// SVG is missing on purpose. It is a script host, and it renders inside the
|
|
1528
|
+
// editor's own DOM as soon as it appears as a library tile -- listing it in
|
|
1529
|
+
// `accept` is not enough on its own, it also needs `allowSvg: true`.
|
|
1530
|
+
editor.storageLimits = {
|
|
1531
|
+
accept: ['image/jpeg', 'image/png', 'image/gif'],
|
|
1532
|
+
maxBytes: 2 * 1024 * 1024,
|
|
1533
|
+
maxWidth: 1600,
|
|
1534
|
+
maxHeight: 1600,
|
|
1535
|
+
maxFilesPerDrop: 20,
|
|
1536
|
+
};
|
|
1537
|
+
|
|
1538
|
+
// A provider is a plain object with four methods — two required. The editor
|
|
1539
|
+
// never fetches anything itself, so this is the whole seam between it and
|
|
1540
|
+
// whatever storage you run. Nothing about it is vendor-specific: point the
|
|
1541
|
+
// calls below at S3, a DMS, a CDN or your own API and the editor is
|
|
1542
|
+
// unchanged.
|
|
1543
|
+
//
|
|
1544
|
+
// Left commented out, this demo keeps its seeded placeholder files.
|
|
1545
|
+
//
|
|
1546
|
+
// editor.storageProvider = {
|
|
1547
|
+
// async list({ folderId, cursor, query }) {
|
|
1548
|
+
// const r = await myApi.listImages({ folder: folderId, cursor, q: query });
|
|
1549
|
+
// return {
|
|
1550
|
+
// items: r.files.map((f) => ({
|
|
1551
|
+
// id: f.id, name: f.name, url: f.publicUrl,
|
|
1552
|
+
// folder: f.folderName, folderId: f.folderId,
|
|
1553
|
+
// w: f.width, ht: f.height, size: f.bytes,
|
|
1554
|
+
// })),
|
|
1555
|
+
// cursor: r.nextCursor ?? null,
|
|
1556
|
+
// };
|
|
1557
|
+
// },
|
|
1558
|
+
// async upload(file, { folderId, width, height, signal }) {
|
|
1559
|
+
// const saved = await myApi.upload(file, folderId, { signal });
|
|
1560
|
+
// return { id: saved.id, name: file.name, url: saved.publicUrl,
|
|
1561
|
+
// folder: '', folderId, w: width, ht: height, size: file.size };
|
|
1562
|
+
// },
|
|
1563
|
+
// async folders() { return myApi.folders(); }, // optional
|
|
1564
|
+
// async remove(asset) { await myApi.delete(asset.id); }, // optional
|
|
1565
|
+
// };
|
|
1566
|
+
//
|
|
1567
|
+
// The one hard requirement is on `url`: it has to still resolve after the
|
|
1568
|
+
// campaign is sent. A URL that expires in an hour produces mail whose images
|
|
1569
|
+
// are already broken when it lands.
|
|
1570
|
+
//
|
|
1571
|
+
// README.md has the full contract.
|
|
1572
|
+
</script>
|
|
1573
|
+
</body>
|
|
1574
|
+
</html>
|