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 sender email Created Dec. 22, 2017, 4:48 p.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') | default.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
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 <!-- Resources -->
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 </style>
194
195 <!--FILTER-COMMENTS-->
196 </head>
197 <body>
198 <div class="outer-container">
199 <div class="container phablet-width content">
200
201 <header id="page-header">
202 <figure>
203 <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">
204 <figcaption>Adblock <strong>Plus</strong></figcaption>
205 </figure>
206
207 <!--NEW-USER-->
208 <h1>Sign up for the Adblock Plus newsletter</h1>
209 <p>Stay up to date with all things Adblock Plus</p>
210 <!--/NEW-USER-->
211
212 <!--UNCONFIRMED--><!--SUCCESS-->
213 <h1>Confirm your email</h1>
214 <p>You will now receive a confirmation e-mail.</p>
215 <!--/SUCCESS--><!--/UNCONFIRMED-->
216
217 <!--CONFIRMED--><!--SUCCESS-->
218 <h1>Confirmation successful</h1>
219 <p>You have been successfully signed up for the AdblockPlus newsletter</ p>
220 <!--/SUCCESS--><!--/CONFIRMED-->
221 </header>
222
223 <!--NEW-USER-->
224 <form name="abonnenten_anmeldung" action="web.subscribe?tid=14&mid=0" meth od="post" id="sign-up">
225
226 <div>
227 <label for="email">Email Address *</label>
228
229 <?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-->' required" ma ndatory?>
230
231 <!--ERROR:ROBINSON-->
232 <div class="error-message">
233 Sie sind mit der E-Mail-Adresse<br>
234 '<i><?gis name="eMail" content="form"?></i>' in unserer Robinsonlist e vermerkt und
235 können sich deshalb nicht anmelden!
236 </div>
237 <!--/ERROR:ROBINSON-->
238
239 <!--ERROR:NO-EMAIL-->
240 <div class="error-message">Please enter a valid email address</div>
241 <!--/ERROR:NO-EMAIL-->
242
243 <!--ERROR:INCORRECT-EMAIL-->
244 <div class="error-message">Please enter a valid email address</div>
245 <!--/ERROR:INCORRECT-EMAIL-->
246
247 <!--ALREADY-CONFIRMED--><!--ERROR-->
248 <div class="error-message">This email address is already subscribed</d iv>
249 <!--/ERROR--><!--/ALREADY-CONFIRMED-->
250 </div>
251
252 <div>
253 <label for="firstname">First name</label>
254 <?GIS NACHNAME params="id='firstname'"?>
255 </div>
256
257 <div>
258 <label for="lastname">Last name</label>
259 <?GIS VORNAME params="id='lastname'"?>
260 </div>
261
262 <input type="hidden" name="NEWSLETTER" value="1">
263
264 <input type="hidden" name="REFRESH" value="../web.html">
265
266 <button type="submit" class="secondary">Sign Up</button>
267 </form>
268 <footer id="page-footer">
269 <a href="https://eyeo.com/en/privacy" target="_blank">Privacy Policy</a>
270 </footer>
271 <!--/NEW-USER-->
272
273 </div>
274 </div>
275 </body>
276 </html>
277
278 <!--**************************************************************************** ***
279 * EMAIL TEMPLATES
280
281 Der folgende Abschnitt beschreibt Elemente der Bestätigungs-eMail.
282 "DOI" steht hierbei für Double-Opt-In. Der potentielle Abonnent bekommt
283 eine eMail zugesendet, die einen Bestätigungs-Link beinhaltet. Dieser
284 Link wird im Abschnitt "BODY" mit dem TAG "$$DOI-LINK$$ gesetzt. Dieser
285 TAG muss enthalten sein, ansonsten kann der Abonnent die Anmeldung nicht
286 bestätigen!
287 Im Abschnitt "TO" kann man über die Notation $$FELDNAME$$ auf Felder
288 zugreifen, die der potentielle Abonnent gerade ausgefüllt hat.
289 Dies kann auch im Abschnitt "SUBJECT" und "BODY" geschehen.
290 Ist eines dieser Felder das Feld Anrede, so können mit der im Kapitel der
291 XML-Schnittstelle
292 beschriebenen Notation "$$männl$weibl$$" geschlechtsspezifische
293 Satzabschnitte
294 eingefügt werden.
295 ****************************************************************************** - ->
296
297 <!--**************************************************************************** ***
298 * Confirm Email Template
299 ****************************************************************************** - ->
300 <!--DOI-EMAIL-->
301 <!--SENDER-EMAIL-->confirm@eyeomail.com<!--/SENDER-EMAIL-->
302 <!--SENDER-NAME-->Adblock Plus<!--/SENDER-NAME-->
303 <!--PRIORITY-->1<!--/PRIORITY-->
304 <!--TO-->$$NACHNAME$$ $$VORNAME$$<!--/TO-->
305 <!--SUBJECT-->Adblock Plus Newsletter Confirmation<!--/SUBJECT-->
306 <!--BODY-->
307 <html>
308 <head>
309 <title>test</title>
310 <style type="text/css">
311 html,body{
312 margin:0;
313 padding:0;
314 height:100%;
315 border:none;
316 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
317 }
318 </style>
319 </head>
320 <body bgcolor="#EBEBEB">
321 <div style="width:100%;height:100%;background-color:#EBEBEB">
322 <table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center">
323 <tr>
324 <td width="600" height="70">
325 <img src="http://asp.backclick.de/email-header/email-header-anmeldebestaet igung.png">
326 </td>
327 </tr>
328 <tr>
329 <td colspan="2" width="600">
330
331 <table cellpadding="0" border="0" cellspacing="25" width="600">
332 <tr>
333 <td style="color:#003366;" width="600">
334 Dear $$NACHNAME$$ $$VORNAME$$,<br><br>
335 um Ihre Anmeldung zu vervollständigen, müssen Sie auf den folgenden Link<br>
336 klicken, oder diesen kopieren und in Ihrer Browserzeile einfügen und die entsprechende<br>
337 Seite aufrufen:<br><br>
338
339 $$DOI-LINK$$<br><br>
340
341 Sie werden dann mit folgenden Daten:<br><br>
342 E-Mail: $$EMAIL$$<br>
343 Passwort: $$PASSWORD$$<br>
344 Anrede: $$ANREDE$$<br>
345 FULLNAME: $$NACHNAME$$ $$VORNAME$$<br><br>
346
347 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<br><br><!--/SU CCESS:NEW-NEWSLETTER-->
348
349 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<br><!--/SUCCESS:NEW-N EWSLETTER-1-->
350
351 <br>angemeldet.<br><br>
352 </td>
353 </tr>
354 </table>
355 </td>
356 </tr>
357 <tr>
358 <td bgcolor="#3A5775" colspan="2" width="600">
359 <div style="margin-left:25px;margin-top:10px;margin-bottom:10px;font-size: 10pt;color:white">
360 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir<br>
361 Sie darum, diese E-Mail einfach zu ignorieren.
362 </div>
363 </td>
364 </tr>
365 </table>
366 </div>
367 </body>
368 </html>
369 <!--/BODY-->
370 <!--TEXT-->
371 Dear $$NACHNAME$$ $$VORNAME$$,
372 um Ihre Anmeldung zu vervollständigen, müssen Sie auf den folgenden Link
373 klicken, oder diesen kopieren und in Ihrer Browserzeile einfügen und die entspre chende
374 Seite aufrufen:
375
376 $$DOI-LINK$$
377
378 Sie werden dann mit folgenden Daten:
379
380 E-Mail: $$EMAIL$$
381 Passwort: $$PASSWORD$$
382 Anrede: $$ANREDE$$
383 FULLNAME: $$NACHNAME$$ $$VORNAME$$
384
385 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<!--/SUCCESS:NEW-NEWSLETTER -->
386
387 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<!--/SUCCESS:NEW-NEWSLETTER-1--><! --SUCCESS:NEW-NEWSLETTER-2-->
388 - Newsletter 2<!--/SUCCESS:NEW-NEWSLETTER-2--><!--SUCCESS:NEW-NEWSLETTER-3-->
389 - Newsletter 3<!--/SUCCESS:NEW-NEWSLETTER-3--><!--SUCCESS:NEW-NEWSLETTER-4-->
390 - Newsletter 3<!--/SUCCESS:NEW-NEWSLETTER-4-->
391
392 angemeldet.
393
394 -----------
395 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir
396 Sie darum, diese E-Mail einfach zu ignorieren.
397 <!--/TEXT-->
398 <!--/DOI-EMAIL-->
399
400 <!--**************************************************************************** ***
401 * Subscription Confirmed Template
402 ****************************************************************************** - ->
403 <!--
404 Für den Abschnitt "CONFIRM-EMAIL" gelten die gleichen Regeln, wie für
405 den Abschnitt "DOI"
406 -->
407
408 <!--CONFIRM-EMAIL-->
409 <!--SENDER-NAME-->Adblock Plus<!--/SENDER-NAME-->
410 <!--PRIORITY-->3<!--/PRIORITY-->
411 <!--TO-->$$NACHNAME$$ $$VORNAME$$<!--/TO-->
412 <!--SUBJECT-->Adblock Plus Newsletter Subscription Successful<!--/SUBJECT-->
413 <!--BODY-->
414 <html>
415 <head>
416 <title>test</title>
417 <style type="text/css">
418 html,body{
419 margin:0;
420 padding:0;
421 height:100%;
422 border:none;
423 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
424 }
425 </style>
426 </head>
427 <body bgcolor="#EBEBEB">
428 <div style="width:100%;height:100%;background-color:#EBEBEB">
429 <table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center">
430 <tr>
431 <td width="600" height="70">
432 <img src="http://asp.backclick.de/email-header/email-header-anmeldung-erfo lgreich.png">
433 </td>
434 </tr>
435 <tr>
436 <td colspan="2" width="600">
437 <table cellpadding="0" border="0" cellspacing="25" width="600">
438 <tr>
439 <td style="color:#003366;" width="600">
440 Sie wurden mit folgenden Daten<br><br>
441
442 E-Mail: $$EMAIL$$<br>
443 Anrede: $$ANREDE$$<br>
444 FULLNAME: $$NACHNAME$$ $$VORNAME$$<br>
445 Passwort: $$PASSWORD$$<br><br>
446
447 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<br><br><!--/SU CCESS:NEW-NEWSLETTER-->
448
449 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<br><!--/SUCCESS:NEW-N EWSLETTER-1-->
450 <br>angemeldet.<br><br>
451
452 Viel Vergnügen beim Lesen Ihrer Newsletter wünscht Ihnen<br><br>
453
454 <strong>Ihr Redaktions-Team</strong><br><br>
455 </td>
456 </tr>
457 </table>
458 </td>
459 </tr>
460 <tr>
461 <td bgcolor="#3A5775" colspan="2" width="600">
462 <div style="margin-left:25px;margin-top:10px;margin-bottom:10px;font-size: 10pt;color:white">
463 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir<br>
464 Sie darum, diese E-Mail einfach zu ignorieren.
465 </div>
466 </td>
467 </tr>
468 </table>
469 </div>
470 </body>
471 </html>
472 <!--/BODY-->
473 <!--TEXT-->
474 Dear $$NACHNAME$$ $$VORNAME$$,
475
476 Sie wurden mit folgenden Daten
477
478 E-Mail: $$EMAIL$$
479 Anrede: $$ANREDE$$
480 FULLNAME: $$NACHNAME$$ $$VORNAME$$
481 Passwort: $$PASSWORD$$
482
483 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<!--/SUCCESS:NEW-NEWSLETTER -->
484
485 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<!--/SUCCESS:NEW-NEWSLETTER-1--><! --SUCCESS:NEW-NEWSLETTER-2-->
486 - Newsletter 2<!--/SUCCESS:NEW-NEWSLETTER-2--><!--SUCCESS:NEW-NEWSLETTER-3-->
487 - Newsletter 3<!--/SUCCESS:NEW-NEWSLETTER-3--><!--SUCCESS:NEW-NEWSLETTER-4-->
488 - Newsletter 4<!--/SUCCESS:NEW-NEWSLETTER-4-->
489
490 angemeldet.
491
492 Viel Vergnügen beim Lesen Ihrer Newsletter wünscht Ihnen
493
494 Ihr Redaktions-Team
495
496 -----------
497 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir
498 Sie darum, diese E-Mail einfach zu ignorieren.
499 <!--/TEXT-->
500 <!--/CONFIRM-EMAIL-->
OLDNEW
« no previous file with comments | « .hgignore ('k') | default.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld