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: Testing backclick template changes Created Dec. 22, 2017, 5:11 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="fullname">Full name</label>
254 <?GIS FULLNAME params="id='fullname'"?>
255 </div>
256
257 <?GIS NEWSLETTER 10 checked params="hidden"?>
258
259 <input type="hidden" name="REFRESH" value="../web.html">
260
261 <button type="submit" class="secondary">Sign Up</button>
262 </form>
263 <footer id="page-footer">
264 <a href="https://eyeo.com/en/privacy" target="_blank">Privacy Policy</a>
265 </footer>
266 <!--/NEW-USER-->
267
268 </div>
269 </div>
270 </body>
271 </html>
272
273 <!--**************************************************************************** ***
274 * EMAIL TEMPLATES
275
276 Der folgende Abschnitt beschreibt Elemente der Bestätigungs-eMail.
277 "DOI" steht hierbei für Double-Opt-In. Der potentielle Abonnent bekommt
278 eine eMail zugesendet, die einen Bestätigungs-Link beinhaltet. Dieser
279 Link wird im Abschnitt "BODY" mit dem TAG "$$DOI-LINK$$ gesetzt. Dieser
280 TAG muss enthalten sein, ansonsten kann der Abonnent die Anmeldung nicht
281 bestätigen!
282 Im Abschnitt "TO" kann man über die Notation $$FELDNAME$$ auf Felder
283 zugreifen, die der potentielle Abonnent gerade ausgefüllt hat.
284 Dies kann auch im Abschnitt "SUBJECT" und "BODY" geschehen.
285 Ist eines dieser Felder das Feld Anrede, so können mit der im Kapitel der
286 XML-Schnittstelle
287 beschriebenen Notation "$$männl$weibl$$" geschlechtsspezifische
288 Satzabschnitte
289 eingefügt werden.
290 ****************************************************************************** - ->
291
292 <!--**************************************************************************** ***
293 * Confirm Email Template
294 ****************************************************************************** - ->
295 <!--DOI-EMAIL-->
296 <!--SENDER-EMAIL-->confirm@eyeomail.com<!--/SENDER-EMAIL-->
297 <!--SENDER-NAME-->Adblock Plus<!--/SENDER-NAME-->
298 <!--PRIORITY-->1<!--/PRIORITY-->
299 <!--TO-->$$FULLNAME$$<!--/TO-->
300 <!--SUBJECT-->Adblock Plus Newsletter Confirmation<!--/SUBJECT-->
301 <!--BODY-->
302 <html>
303 <head>
304 <title>test</title>
305 <style type="text/css">
306 html,body{
307 margin:0;
308 padding:0;
309 height:100%;
310 border:none;
311 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
312 }
313 </style>
314 </head>
315 <body bgcolor="#EBEBEB">
316 <div style="width:100%;height:100%;background-color:#EBEBEB">
317 <table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center">
318 <tr>
319 <td width="600" height="70">
320 <img src="http://asp.backclick.de/email-header/email-header-anmeldebestaet igung.png">
321 </td>
322 </tr>
323 <tr>
324 <td colspan="2" width="600">
325
326 <table cellpadding="0" border="0" cellspacing="25" width="600">
327 <tr>
328 <td style="color:#003366;" width="600">
329 Dear $$FULLNAME$$,<br><br>
330 um Ihre Anmeldung zu vervollständigen, müssen Sie auf den folgenden Link<br>
331 klicken, oder diesen kopieren und in Ihrer Browserzeile einfügen und die entsprechende<br>
332 Seite aufrufen:<br><br>
333
334 $$DOI-LINK$$<br><br>
335
336 Sie werden dann mit folgenden Daten:<br><br>
337 E-Mail: $$EMAIL$$<br>
338 Passwort: $$PASSWORD$$<br>
339 FULLNAME: $$FULLNAME$$<br><br>
340
341 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<br><br><!--/SU CCESS:NEW-NEWSLETTER-->
342
343 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<br><!--/SUCCESS:NEW-N EWSLETTER-1-->
344
345 <br>angemeldet.<br><br>
346 </td>
347 </tr>
348 </table>
349 </td>
350 </tr>
351 <tr>
352 <td bgcolor="#3A5775" colspan="2" width="600">
353 <div style="margin-left:25px;margin-top:10px;margin-bottom:10px;font-size: 10pt;color:white">
354 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir<br>
355 Sie darum, diese E-Mail einfach zu ignorieren.
356 </div>
357 </td>
358 </tr>
359 </table>
360 </div>
361 </body>
362 </html>
363 <!--/BODY-->
364 <!--TEXT-->
365 Dear $$FULLNAME$$,
366 um Ihre Anmeldung zu vervollständigen, müssen Sie auf den folgenden Link
367 klicken, oder diesen kopieren und in Ihrer Browserzeile einfügen und die entspre chende
368 Seite aufrufen:
369
370 $$DOI-LINK$$
371
372 Sie werden dann mit folgenden Daten:
373
374 E-Mail: $$EMAIL$$
375 Passwort: $$PASSWORD$$
376 FULLNAME: $$FULLNAME$$
377
378 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<!--/SUCCESS:NEW-NEWSLETTER -->
379
380 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<!--/SUCCESS:NEW-NEWSLETTER-1--><! --SUCCESS:NEW-NEWSLETTER-2-->
381 - Newsletter 2<!--/SUCCESS:NEW-NEWSLETTER-2--><!--SUCCESS:NEW-NEWSLETTER-3-->
382 - Newsletter 3<!--/SUCCESS:NEW-NEWSLETTER-3--><!--SUCCESS:NEW-NEWSLETTER-4-->
383 - Newsletter 3<!--/SUCCESS:NEW-NEWSLETTER-4-->
384
385 angemeldet.
386
387 -----------
388 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir
389 Sie darum, diese E-Mail einfach zu ignorieren.
390 <!--/TEXT-->
391 <!--/DOI-EMAIL-->
392
393 <!--**************************************************************************** ***
394 * Subscription Confirmed Template
395 ****************************************************************************** - ->
396 <!--
397 Für den Abschnitt "CONFIRM-EMAIL" gelten die gleichen Regeln, wie für
398 den Abschnitt "DOI"
399 -->
400
401 <!--CONFIRM-EMAIL-->
402 <!--SENDER-NAME-->Adblock Plus<!--/SENDER-NAME-->
403 <!--PRIORITY-->3<!--/PRIORITY-->
404 <!--TO-->$$FULLNAME$$<!--/TO-->
405 <!--SUBJECT-->Adblock Plus Newsletter Subscription Successful<!--/SUBJECT-->
406 <!--BODY-->
407 <html>
408 <head>
409 <title>test</title>
410 <style type="text/css">
411 html,body{
412 margin:0;
413 padding:0;
414 height:100%;
415 border:none;
416 font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
417 }
418 </style>
419 </head>
420 <body bgcolor="#EBEBEB">
421 <div style="width:100%;height:100%;background-color:#EBEBEB">
422 <table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center">
423 <tr>
424 <td width="600" height="70">
425 <img src="http://asp.backclick.de/email-header/email-header-anmeldung-erfo lgreich.png">
426 </td>
427 </tr>
428 <tr>
429 <td colspan="2" width="600">
430 <table cellpadding="0" border="0" cellspacing="25" width="600">
431 <tr>
432 <td style="color:#003366;" width="600">
433 Sie wurden mit folgenden Daten<br><br>
434
435 E-Mail: $$EMAIL$$<br>
436 FULLNAME: $$FULLNAME$$<br>
437 Passwort: $$PASSWORD$$<br><br>
438
439 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<br><br><!--/SU CCESS:NEW-NEWSLETTER-->
440
441 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<br><!--/SUCCESS:NEW-N EWSLETTER-1-->
442 <br>angemeldet.<br><br>
443
444 Viel Vergnügen beim Lesen Ihrer Newsletter wünscht Ihnen<br><br>
445
446 <strong>Ihr Redaktions-Team</strong><br><br>
447 </td>
448 </tr>
449 </table>
450 </td>
451 </tr>
452 <tr>
453 <td bgcolor="#3A5775" colspan="2" width="600">
454 <div style="margin-left:25px;margin-top:10px;margin-bottom:10px;font-size: 10pt;color:white">
455 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir<br>
456 Sie darum, diese E-Mail einfach zu ignorieren.
457 </div>
458 </td>
459 </tr>
460 </table>
461 </div>
462 </body>
463 </html>
464 <!--/BODY-->
465 <!--TEXT-->
466 Dear $$FULLNAME$$,
467
468 Sie wurden mit folgenden Daten
469
470 E-Mail: $$EMAIL$$
471 FULLNAME: $$FULLNAME$$
472 Passwort: $$PASSWORD$$
473
474 <!--SUCCESS:NEW-NEWSLETTER-->für folgende Newsletter:<!--/SUCCESS:NEW-NEWSLETTER -->
475
476 <!--SUCCESS:NEW-NEWSLETTER-1--> - Newsletter 1<!--/SUCCESS:NEW-NEWSLETTER-1--><! --SUCCESS:NEW-NEWSLETTER-2-->
477 - Newsletter 2<!--/SUCCESS:NEW-NEWSLETTER-2--><!--SUCCESS:NEW-NEWSLETTER-3-->
478 - Newsletter 3<!--/SUCCESS:NEW-NEWSLETTER-3--><!--SUCCESS:NEW-NEWSLETTER-4-->
479 - Newsletter 4<!--/SUCCESS:NEW-NEWSLETTER-4-->
480
481 angemeldet.
482
483 Viel Vergnügen beim Lesen Ihrer Newsletter wünscht Ihnen
484
485 Ihr Redaktions-Team
486
487 -----------
488 Sollten Sie diese E-Mail ungewollt erhalten haben, bitten wir
489 Sie darum, diese E-Mail einfach zu ignorieren.
490 <!--/TEXT-->
491 <!--/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