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