Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code
Issues
All Issues

Side by Side Diff: backclick.html

Issue 29646555: Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter (Closed)
Patch Set: Update confirmation and success texts Created Jan. 3, 2018, 11:43 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « .hgignore ('k') | css/main.css » ('j') | css/main.css » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
juliandoucette 2018/01/04 02:34:16 It seems like this file should be generated from s
ire 2018/01/04 11:14:38 Done.
2 <html lang="en" dir="ltr">
3 <head>
4 <!-- website-defaults/includes/meta/standard -->
5 <meta charset="utf-8">
6 <meta http-equiv="x-ua-compatible" content="ie=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>Adblock Plus newsletter signup form</title>
9 <meta name="description" content="A newsletter sign up form, so users can stay up to date with all things related to Adblock Plus.">
10
11 <!-- styles:start -->
12 <style>
13 .unstyled, .unstyled * { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none !important; }
14
15 .sr-only { position: absolute !important; overflow: hidden !important; clip: rec t(0, 0, 0, 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; }
16
17 /** Center within a responsive fixed width Use modifier classes defined in _widt h.scss to change said fixed width */
18 .container { width: 1140px; max-width: 100%; margin-right: auto; margin-left: au to; padding-right: 1em; padding-left: 1em; }
19
20 /** Clear without collapsed margin */
21 .clearfix:after, .clearfix:before { display: table; content: " "; }
22
23 .clearfix:after { clear: both; }
24
25 /** Align a block to the start of a line */
26 .float-start { float: left; }
27
28 [dir="rtl"] .float-start { float: right; }
29
30 /** Align a block to the end of a line */
31 .float-end { float: right; }
32
33 [dir="rtl"] .float-end { float: left; }
34
35 /** Force full-width */
36 .full-width { display: block; width: 100%; }
37
38 /** Fix a block to the width of a phone */
39 .phone-width { width: auto; }
40
41 /** Fix a block to the width of a phablet */
42 .phablet-width { width: 540px; }
43
44 /** Fix a block to the width of a tablet */
45 .tablet-width { width: 720px; }
46
47 /** Fix a block to the width of a desktop */
48 .desktop-width { width: 960px; }
49
50 /** Fix a block to the width of a large desktop */
51 .large-desktop-width { width: 1140px; }
52
53 /******************************************************************************* CSS Reset */
54 /* Reset margins, paddings, and font globally */
55 html, body, h1, h2, h3, h4, h5, h6, a, p, span, em, small, strong, sub, sup, str ike, s, mark, del, ins, abbr, dfn, blockquote, q, cite, code, pre, kbd, samp, va r, output, ruby, ol, ul, li, dl, dt, dd, div, section, article, main, aside, nav , header, hgroup, footer, img, figure, figcaption, address, time, audio, video, canvas, object, iframe, embed, details, summary, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0px; padding: 0px; bor der: 0px; font-size: 100%; font: inherit; vertical-align: baseline; }
56
57 /* Add the correct display in IE 9-. */
58 article, aside, footer, header, nav, section, main { display: block; }
59
60 /* Set default box-sizing (opinionated) */
61 *, *:before, *:after { box-sizing: inherit; }
62
63 html { box-sizing: border-box; }
64
65 /* Remove the margin in all browsers (opinionated). */
66 body { margin: 0px; }
67
68 /* Remove list styles (opinionated) */
69 ol, ul { list-style: none; }
70
71 /* Remove quotes ("") in most browsers (opinionated) */
72 blockquote, q { quotes: none; }
73
74 /* Remove quotes ("") in Safari (opinionated) */
75 blockquote:before, blockquote:after, q:before, q:after { content: ""; content: n one; }
76
77 /* Share borders between adjacent cells (opinionated) */
78 table { border-collapse: collapse; border-spacing: 0; }
79
80 /* Normalize inline content (opinionated) */
81 b, strong { font-weight: bolder; }
82
83 small { font-size: smaller; }
84
85 abbr { text-decoration: underline; cursor: help; }
86
87 sup { position: relative; font-size: 75%; vertical-align: super; }
88
89 a, a:visited { color: inherit; /* Remove the gray background on active links in IE 10. */ background-color: transparent; text-decoration: none; /* Set default p ointer regardless of href (opinionated) */ cursor: pointer; }
90
91 a:hover, a:active, a:focus { text-decoration: underline; }
92
93 img { /* Make fixed width images responsive */ max-width: 100%; /* Remove the bo rder on images inside links in IE 10-. */ border-style: none; }
94
95 /* Set correct display for hidden attribute in IE 10- */
96 [hidden] { display: none; }
97
98 /******************************************************************************* Base styles */
99 html { color: #212121; background-color: #fff; font-family: "Source Sans Pro", s ans-serif; line-height: 1.5; }
100
101 /******************************************************************************* Basic forms fields /* 1. Reset */
102 /* Change the font styles in all browsers (opinionated). */
103 input, optgroup, select, textarea { font: inherit; }
104
105 /* Show the overflow in IE and Edge */
106 input { overflow: visible; }
107
108 /* Remove the inheritance of text transform in Edge, Firefox, and IE. */
109 select { text-transform: none; }
110
111 /* Set block display (opinionated) */
112 fieldset { display: block; }
113
114 /* Correct the text wrapping in Edge and IE. */
115 legend { display: table; max-width: 100%; white-space: normal; }
116
117 /* Remove the default vertical scrollbar in IE. */
118 textarea { overflow: auto; }
119
120 /* Remove the padding in IE 10-. */
121 [type="checkbox"], [type="radio"] { padding: 0px; }
122
123 /******************************************************************************* Buttons /* 1. Reset */
124 button { margin: 0px; color: inherit; font: inherit; /* Show the overflow in IE and Edge */ overflow: visible; /* Remove rounded corners in Chrome 62+ */ border -radius: 0; /* Remove the inheritance of text transform in Edge, Firefox, and IE . */ text-transform: none; }
125
126 /** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` contro ls in Android 4. 2. Correct the inability to style clickable types in iOS and Sa fari. */
127 button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearan ce: button; }
128
129 /* Remove the inner border and padding in Firefox. */
130 button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-mo z-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0px; border-style: n one; }
131
132 /* Restore the focus styles unset by the previous rule. */
133 button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focus ring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
134
135 /******************************************************************************* Layout */
136 html { background-color: #F3F3F3; }
137
138 @media (min-width: 576px) { body { display: table; width: 100%; min-height: 100v h; } }
139
140 /* .outer-container */
141 @media (min-width: 576px) { .outer-container { display: table-cell; vertical-ali gn: middle; } }
142
143 /* #page-header */
144 #page-header { margin-top: 2em; margin-bottom: 1em; }
145
146 @media (min-width: 576px) { #page-header { margin-top: 0; margin-bottom: 2em; te xt-align: center; } }
147
148 #page-header figure { display: inline-table; font-size: 1.5em; font-weight: 300; }
149
150 @media (min-width: 576px) { #page-header figure { font-size: 2em; } }
151
152 #page-header figure img, #page-header figure figcaption { display: table-cell; v ertical-align: middle; }
153
154 #page-header figure img { height: 1.5em; }
155
156 @media (min-width: 576px) { #page-header figure img { height: 2em; } }
157
158 #page-header figure figcaption { padding: 0 0.5em; }
159
160 #page-header figure strong { font-weight: 700; }
161
162 #page-header h1 { margin: 1em auto 0.5em; font-weight: 700; }
163
164 /* #sign-up, #page-footer */
165 #sign-up, #page-footer { width: 100%; }
166
167 @media (min-width: 576px) { #sign-up, #page-footer { max-width: 320px; margin-ri ght: auto; margin-left: auto; } }
168
169 #page-footer { margin-top: 1em; text-align: center; }
170
171 @media (min-width: 576px) { #page-footer { text-align: left; } }
172
173 /******************************************************************************* Content */
174 a, a:visited { color: #077CA6; text-decoration: underline; }
175
176 /******************************************************************************* Form */
177 input, button { width: 100%; height: 2.6em; border-radius: 4px; }
178
179 /* Input field */
180 input { margin-bottom: 2em; padding: 0 0.5em; border: 1px solid #CDCDCD; }
181
182 /* Error state */
183 .invalid { border-color: #f44336; }
184
185 .error-message { display: none; }
186
187 .invalid + .error-message { display: block; margin-top: -0.5em; margin-bottom: 1 em; color: #f44336; }
188
189 /* Buttons */
190 button { border: 0; text-transform: uppercase; }
191
192 .secondary { color: #fff; background-color: #C70D2B; }
193
194 </style>
195 <!-- styles:end -->
196
197 <!--FILTER-COMMENTS-->
198 </head>
199 <body>
200 <div class="outer-container">
201 <div class="container phablet-width content">
202
203 <header id="page-header">
204 <figure>
205 <img src="https://eyeo.com/images/backclick/abp-logo.png" srcset="http s://eyeo.com/images/backclick/abp-logo.svg 2x" alt="ABP inside red octagon">
206 <figcaption>Adblock <strong>Plus</strong></figcaption>
207 </figure>
208
209 <!--NEW-USER-->
210 <h1>Sign up for the Adblock Plus newsletter</h1>
211 <p>Stay up to date with all things Adblock Plus</p>
212 <!--/NEW-USER-->
213
214 <!--UNCONFIRMED--><!--SUCCESS-->
215 <h1>Confirm your email</h1>
216 <p>You should have received an email with a confirmation link. Please cl ick the link to confirm your email and subscribe</p>
217 <!--/SUCCESS--><!--/UNCONFIRMED-->
218
219 <!--CONFIRMED--><!--SUCCESS-->
220 <h1>Thank you for subscribing to the <strong>Adblock Plus</strong> newsl etter</h1>
221 <p>We look forward to sharing our updates with you</p>
222 <!--/SUCCESS--><!--/CONFIRMED-->
223 </header>
224
225 <!--NEW-USER-->
226 <form name="abonnenten_anmeldung" action="web.subscribe?tid=14&mid=0" meth od="post" id="sign-up">
227
228 <div>
229 <label for="email">Email Address *</label>
230
231 <?GIS EMAIL params="id='email' type='email' class='<!--ERROR:ROBINSON- ->invalid<!--/ERROR:ROBINSON--><!--ERROR:INCORRECT-EMAIL-->invalid<!--/ERROR:INC ORRECT-EMAIL--><!--ERROR:NO-EMAIL-->invalid<!--/ERROR:NO-EMAIL--><!--ALREADY-CON FIRMED--><!--ERROR-->invalid<!--/ERROR--><!--/ALREADY-CONFIRMED--><!--ERROR:ALRE ADY-ON-10-->invalid<!--/ERROR:ALREADY-ON-10-->' required" mandatory?>
juliandoucette 2018/01/04 02:34:16 NIT/Suggest: Check out how I did this in my minima
ire 2018/01/04 11:14:36 The difference here being that the classes are app
232
233 <!--ERROR:ROBINSON-->
juliandoucette 2018/01/04 02:34:17 I don't think we will use this feature. Please con
ire 2018/01/04 11:14:37 Asked here: https://issues.adblockplus.org/ticket/
ire 2018/01/08 11:02:37 Removed feature.
234 <div class="error-message">This email address is blacklisted and canno t subscribe.</div>
235 <!--/ERROR:ROBINSON-->
236
237 <!--ERROR:NO-EMAIL-->
238 <div class="error-message">Please enter a valid email address</div>
juliandoucette 2018/01/04 02:34:18 NIT/TOL: Why no period?
ire 2018/01/04 11:14:37 There's no period in the spec and I don't think th
239 <!--/ERROR:NO-EMAIL-->
240
241 <!--ERROR:INCORRECT-EMAIL-->
242 <div class="error-message">Please enter a valid email address</div>
243 <!--/ERROR:INCORRECT-EMAIL-->
244
245 <!--ERROR:ALREADY-ON-10-->
246 <div class="error-message">This email address is already subscribed to the Adblock Plus newsletter</div>
juliandoucette 2018/01/04 02:34:17 Is this necessary?
ire 2018/01/04 11:14:35 If the user is already subscribed and they try to
247 <!--/ERROR:ALREADY-ON-10-->
248
249 <!--ALREADY-CONFIRMED--><!--ERROR-->
250 <div class="error-message">This email address is already subscribed to the Adblock Plus newsletter</div>
juliandoucette 2018/01/04 02:34:18 NIT: This seems like more of a success message tha
ire 2018/01/04 11:14:36 This message should only appear if the user is try
251 <!--/ERROR--><!--/ALREADY-CONFIRMED-->
252 </div>
253
254 <div>
255 <label for="fullname">Full name</label>
256 <?GIS FULLNAME params="id='fullname'"?>
257 </div>
258
259 <!--ERROR:NO-PASSWORD-->
juliandoucette 2018/01/04 02:34:17 I don't think these apply (because we don't set a
ire 2018/01/04 11:14:37 I left them mainly for debugging purposes. Since B
260 <p>Error: No Password</p><br>
261 <!--/ERROR:NO-PASSWORD-->
262
263 <!--ERROR:WRONG-PASSWORD-->
264 <p>Error: Wrong Password</p><br>
265 <!--/ERROR:WRONG-PASSWORD-->
266
267 <!--ERROR:INCORRECT-PASSWORD-->
268 <p>Error: Incorrect Password</p><br>
269 <!--/ERROR:INCORRECT-PASSWORD-->
270
271 <?GIS NEWSLETTER 10 checked params="hidden"?>
juliandoucette 2018/01/04 02:34:18 TOL: What's the difference between putting params=
ire 2018/01/04 11:14:35 I don't think the `params` part is necessary, so I
272
273 <input type="hidden" name="REFRESH" value="../web.html">
juliandoucette 2018/01/04 02:34:17 Is this necessary?
ire 2018/01/04 11:14:36 Nope, removed.
274
275 <button type="submit" class="secondary">Sign Up</button>
276 </form>
277 <footer id="page-footer">
278 <a href="https://eyeo.com/en/privacy" target="_blank">Privacy Policy</a>
279 </footer>
280 <!--/NEW-USER-->
281
282 </div>
283 </div>
284 </body>
285 </html>
286
287 <!--**************************************************************************** ***
288 * EMAIL TEMPLATES
289
290 Der folgende Abschnitt beschreibt Elemente der Bestätigungs-eMail.
291 "DOI" steht hierbei für Double-Opt-In. Der potentielle Abonnent bekommt
292 eine eMail zugesendet, die einen Bestätigungs-Link beinhaltet. Dieser
293 Link wird im Abschnitt "BODY" mit dem TAG "$$DOI-LINK$$ gesetzt. Dieser
294 TAG muss enthalten sein, ansonsten kann der Abonnent die Anmeldung nicht
295 bestätigen!
296 Im Abschnitt "TO" kann man über die Notation $$FELDNAME$$ auf Felder
297 zugreifen, die der potentielle Abonnent gerade ausgefüllt hat.
298 Dies kann auch im Abschnitt "SUBJECT" und "BODY" geschehen.
299 Ist eines dieser Felder das Feld Anrede, so können mit der im Kapitel der
300 XML-Schnittstelle
301 beschriebenen Notation "$$männl$weibl$$" geschlechtsspezifische
302 Satzabschnitte
303 eingefügt werden.
304 ****************************************************************************** - ->
305
306 <!--**************************************************************************** ***
307 * Confirm Email Template
308 ****************************************************************************** - ->
309 <!--DOI-EMAIL-->
310 <!--SENDER-EMAIL-->confirm@eyeomail.com<!--/SENDER-EMAIL-->
311 <!--SENDER-NAME-->Marsha at Adblock Plus<!--/SENDER-NAME-->
312 <!--PRIORITY-->1<!--/PRIORITY-->
313 <!--TO-->$$FULLNAME$$<!--/TO-->
314 <!--SUBJECT-->Confirm your email address<!--/SUBJECT-->
315 <!--BODY-->
316 <html>
317 <head>
318 <title>Confirm Email</title>
319 <style type="text/css">
320 html,body{
321 margin:0;
322 padding:0;
323 height:100%;
324 border:none;
325 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
326 }
327 </style>
328 </head>
329 <body bgcolor="#EBEBEB">
330 <div style="width:100%;height:100%;background-color:#EBEBEB">
331 <table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center">
332 <tr>
333 <td width="600" height="70">
334 <img src="http://asp.backclick.de/email-header/email-header-anmeldebestaet igung.png">
335 </td>
336 </tr>
337 <tr>
338 <td colspan="2" width="600">
339
340 <table cellpadding="0" border="0" cellspacing="25" width="600">
341 <tr>
342 <td style="color:#003366;" width="600">
343 Hey $$FULLNAME$$,<br><br>
344
345 We take ad blocking seriously across all channels, so we want to mak e sure that you actually signed up for our new monthly Adblock Plus update.<br>< br>
346
347 Please confirm your email address by clicking on the link below:<br> <br>
348
349 $$DOI-LINK$$<br><br>
350
351 Thanks for subscribing. We promise not to use your email address for anything evil!<br><br>
352
353 The Adblock Plus Team<br><br>
354
355 If you were not expecting this email, please disregard it.<br><br>
356 </td>
357 </tr>
358 </table>
359 </td>
360 </tr>
361 </table>
362 </div>
363 </body>
364 </html>
365 <!--/BODY-->
366 <!--TEXT-->
367 Hey $$FULLNAME$$,
368
369 We take ad blocking seriously across all channels, so we want to make sure that you actually signed up for our new monthly Adblock Plus update.
370
371 Please confirm your email address by clicking on the link below:
372
373 $$DOI-LINK$$
374
375 Thanks for subscribing. We promise not to use your email address for anything ev il!
376
377 The Adblock Plus Team
378
379 If you were not expecting this email, please disregard it.
380 <!--/TEXT-->
381 <!--/DOI-EMAIL-->
382
383 <!--**************************************************************************** ***
384 * Subscription Confirmed Template
385 ****************************************************************************** - ->
386 <!--
387 Für den Abschnitt "CONFIRM-EMAIL" gelten die gleichen Regeln, wie für
388 den Abschnitt "DOI"
389 -->
390
391 <!--CONFIRM-EMAIL-->
392 <!--SENDER-NAME-->Marsha at Adblock Plus<!--/SENDER-NAME-->
393 <!--PRIORITY-->3<!--/PRIORITY-->
394 <!--TO-->$$FULLNAME$$<!--/TO-->
395 <!--SUBJECT-->Adblock Plus Newsletter Subscription Successful<!--/SUBJECT-->
396 <!--BODY-->
397 <html>
398 <head>
399 <title>test</title>
400 <style type="text/css">
401 html,body{
402 margin:0;
403 padding:0;
404 height:100%;
405 border:none;
406 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
407 }
408 </style>
409 </head>
410 <body bgcolor="#EBEBEB">
411 <div style="width:100%;height:100%;background-color:#EBEBEB">
412 <table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center">
413 <tr>
414 <td width="600" height="70">
415 <img src="http://asp.backclick.de/email-header/email-header-anmeldung-erfo lgreich.png">
416 </td>
417 </tr>
418 <tr>
419 <td colspan="2" width="600">
420 <table cellpadding="0" border="0" cellspacing="25" width="600">
421 <tr>
422 <td style="color:#003366;" width="600">
423 Hey $$FULLNAME$$,<br><br>
424
425 Success email body here.
426 </td>
427 </tr>
428 </table>
429 </td>
430 </tr>
431 </table>
432 </div>
433 </body>
434 </html>
435 <!--/BODY-->
436 <!--TEXT-->
437 Hey $$FULLNAME$$,
438
439 Success email body here.
440 <!--/TEXT-->
441 <!--/CONFIRM-EMAIL-->
OLDNEW
« no previous file with comments | « .hgignore ('k') | css/main.css » ('j') | css/main.css » ('J')

Powered by Google App Engine
This is Rietveld