Unified Diff: backclick.html
Issue 29646555:
Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter (Closed)
Patch Set: Add gulp task to inline css, update templates
Created Jan. 3, 2018, 11:17 a.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« .hgignore ('k')
|
css/main.css » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: backclick.html |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/backclick.html |
| @@ -0,0 +1,441 @@ |
| +<!doctype html> |
| +<html lang="en" dir="ltr"> |
| +<head> |
| + <!-- website-defaults/includes/meta/standard --> |
| + <meta charset="utf-8"> |
| + <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| + <title>Adblock Plus newsletter signup form</title> |
| + <meta name="description" content="A newsletter sign up form, so users can stay up to date with all things related to Adblock Plus."> |
| + |
| + <!-- styles:start --> |
| +<style> |
| +.unstyled, .unstyled * { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none !important; } |
| + |
| +.sr-only { position: absolute !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } |
| + |
| +/** Center within a responsive fixed width Use modifier classes defined in _width.scss to change said fixed width */ |
| +.container { width: 1140px; max-width: 100%; margin-right: auto; margin-left: auto; padding-right: 1em; padding-left: 1em; } |
| + |
| +/** Clear without collapsed margin */ |
| +.clearfix:after, .clearfix:before { display: table; content: " "; } |
| + |
| +.clearfix:after { clear: both; } |
| + |
| +/** Align a block to the start of a line */ |
| +.float-start { float: left; } |
| + |
| +[dir="rtl"] .float-start { float: right; } |
| + |
| +/** Align a block to the end of a line */ |
| +.float-end { float: right; } |
| + |
| +[dir="rtl"] .float-end { float: left; } |
| + |
| +/** Force full-width */ |
| +.full-width { display: block; width: 100%; } |
| + |
| +/** Fix a block to the width of a phone */ |
| +.phone-width { width: auto; } |
| + |
| +/** Fix a block to the width of a phablet */ |
| +.phablet-width { width: 540px; } |
| + |
| +/** Fix a block to the width of a tablet */ |
| +.tablet-width { width: 720px; } |
| + |
| +/** Fix a block to the width of a desktop */ |
| +.desktop-width { width: 960px; } |
| + |
| +/** Fix a block to the width of a large desktop */ |
| +.large-desktop-width { width: 1140px; } |
| + |
| +/******************************************************************************* CSS Reset */ |
| +/* Reset margins, paddings, and font globally */ |
| +html, body, h1, h2, h3, h4, h5, h6, a, p, span, em, small, strong, sub, sup, strike, s, mark, del, ins, abbr, dfn, blockquote, q, cite, code, pre, kbd, samp, var, 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; border: 0px; font-size: 100%; font: inherit; vertical-align: baseline; } |
| + |
| +/* Add the correct display in IE 9-. */ |
| +article, aside, footer, header, nav, section, main { display: block; } |
| + |
| +/* Set default box-sizing (opinionated) */ |
| +*, *:before, *:after { box-sizing: inherit; } |
| + |
| +html { box-sizing: border-box; } |
| + |
| +/* Remove the margin in all browsers (opinionated). */ |
| +body { margin: 0px; } |
| + |
| +/* Remove list styles (opinionated) */ |
| +ol, ul { list-style: none; } |
| + |
| +/* Remove quotes ("") in most browsers (opinionated) */ |
| +blockquote, q { quotes: none; } |
| + |
| +/* Remove quotes ("") in Safari (opinionated) */ |
| +blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } |
| + |
| +/* Share borders between adjacent cells (opinionated) */ |
| +table { border-collapse: collapse; border-spacing: 0; } |
| + |
| +/* Normalize inline content (opinionated) */ |
| +b, strong { font-weight: bolder; } |
| + |
| +small { font-size: smaller; } |
| + |
| +abbr { text-decoration: underline; cursor: help; } |
| + |
| +sup { position: relative; font-size: 75%; vertical-align: super; } |
| + |
| +a, a:visited { color: inherit; /* Remove the gray background on active links in IE 10. */ background-color: transparent; text-decoration: none; /* Set default pointer regardless of href (opinionated) */ cursor: pointer; } |
| + |
| +a:hover, a:active, a:focus { text-decoration: underline; } |
| + |
| +img { /* Make fixed width images responsive */ max-width: 100%; /* Remove the border on images inside links in IE 10-. */ border-style: none; } |
| + |
| +/* Set correct display for hidden attribute in IE 10- */ |
| +[hidden] { display: none; } |
| + |
| +/******************************************************************************* Base styles */ |
| +html { color: #212121; background-color: #fff; font-family: "Source Sans Pro", sans-serif; line-height: 1.5; } |
| + |
| +/******************************************************************************* Basic forms fields /* 1. Reset */ |
| +/* Change the font styles in all browsers (opinionated). */ |
| +input, optgroup, select, textarea { font: inherit; } |
| + |
| +/* Show the overflow in IE and Edge */ |
| +input { overflow: visible; } |
| + |
| +/* Remove the inheritance of text transform in Edge, Firefox, and IE. */ |
| +select { text-transform: none; } |
| + |
| +/* Set block display (opinionated) */ |
| +fieldset { display: block; } |
| + |
| +/* Correct the text wrapping in Edge and IE. */ |
| +legend { display: table; max-width: 100%; white-space: normal; } |
| + |
| +/* Remove the default vertical scrollbar in IE. */ |
| +textarea { overflow: auto; } |
| + |
| +/* Remove the padding in IE 10-. */ |
| +[type="checkbox"], [type="radio"] { padding: 0px; } |
| + |
| +/******************************************************************************* Buttons /* 1. Reset */ |
| +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; } |
| + |
| +/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */ |
| +button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } |
| + |
| +/* Remove the inner border and padding in Firefox. */ |
| +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0px; border-style: none; } |
| + |
| +/* Restore the focus styles unset by the previous rule. */ |
| +button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } |
| + |
| +/******************************************************************************* Layout */ |
| +html { background-color: #F3F3F3; } |
| + |
| +@media (min-width: 576px) { body { display: table; width: 100%; min-height: 100vh; } } |
| + |
| +/* .outer-container */ |
| +@media (min-width: 576px) { .outer-container { display: table-cell; vertical-align: middle; } } |
| + |
| +/* #page-header */ |
| +#page-header { margin-top: 2em; margin-bottom: 1em; } |
| + |
| +@media (min-width: 576px) { #page-header { margin-top: 0; margin-bottom: 2em; text-align: center; } } |
| + |
| +#page-header figure { display: inline-table; font-size: 1.5em; font-weight: 300; } |
| + |
| +@media (min-width: 576px) { #page-header figure { font-size: 2em; } } |
| + |
| +#page-header figure img, #page-header figure figcaption { display: table-cell; vertical-align: middle; } |
| + |
| +#page-header figure img { height: 1.5em; } |
| + |
| +@media (min-width: 576px) { #page-header figure img { height: 2em; } } |
| + |
| +#page-header figure figcaption { padding: 0 0.5em; } |
| + |
| +#page-header figure strong { font-weight: 700; } |
| + |
| +#page-header h1 { margin: 1em auto 0.5em; font-weight: 700; } |
| + |
| +/* #sign-up, #page-footer */ |
| +#sign-up, #page-footer { width: 100%; } |
| + |
| +@media (min-width: 576px) { #sign-up, #page-footer { max-width: 320px; margin-right: auto; margin-left: auto; } } |
| + |
| +#page-footer { margin-top: 1em; text-align: center; } |
| + |
| +@media (min-width: 576px) { #page-footer { text-align: left; } } |
| + |
| +/******************************************************************************* Content */ |
| +a, a:visited { color: #077CA6; text-decoration: underline; } |
| + |
| +/******************************************************************************* Form */ |
| +input, button { width: 100%; height: 2.6em; border-radius: 4px; } |
| + |
| +/* Input field */ |
| +input { margin-bottom: 2em; padding: 0 0.5em; border: 1px solid #CDCDCD; } |
| + |
| +/* Error state */ |
| +.invalid { border-color: #f44336; } |
| + |
| +.error-message { display: none; } |
| + |
| +.invalid + .error-message { display: block; margin-top: -0.5em; margin-bottom: 1em; color: #f44336; } |
| + |
| +/* Buttons */ |
| +button { border: 0; text-transform: uppercase; } |
| + |
| +.secondary { color: #fff; background-color: #C70D2B; } |
| + |
| +</style> |
| +<!-- styles:end --> |
| + |
| +<!--FILTER-COMMENTS--> |
| +</head> |
| +<body> |
| + <div class="outer-container"> |
| + <div class="container phablet-width content"> |
| + |
| + <header id="page-header"> |
| + <figure> |
| + <img src="https://eyeo.com/images/backclick/abp-logo.png" srcset="https://eyeo.com/images/backclick/abp-logo.svg 2x" alt="ABP inside red octagon"> |
| + <figcaption>Adblock <strong>Plus</strong></figcaption> |
| + </figure> |
| + |
| + <!--NEW-USER--> |
| + <h1>Sign up for the Adblock Plus newsletter</h1> |
| + <p>Stay up to date with all things Adblock Plus</p> |
| + <!--/NEW-USER--> |
| + |
| + <!--UNCONFIRMED--><!--SUCCESS--> |
| + <h1>Confirm your email</h1> |
| + <p>You will now receive a confirmation e-mail.</p> |
| + <!--/SUCCESS--><!--/UNCONFIRMED--> |
| + |
| + <!--CONFIRMED--><!--SUCCESS--> |
| + <h1>Confirmation successful</h1> |
| + <p>You have been successfully signed up for the AdblockPlus newsletter</p> |
| + <!--/SUCCESS--><!--/CONFIRMED--> |
| + </header> |
| + |
| + <!--NEW-USER--> |
| + <form name="abonnenten_anmeldung" action="web.subscribe?tid=14&mid=0" method="post" id="sign-up"> |
| + |
| + <div> |
| + <label for="email">Email Address *</label> |
| + |
| + <?GIS EMAIL params="id='email' type='email' class='<!--ERROR:ROBINSON-->invalid<!--/ERROR:ROBINSON--><!--ERROR:INCORRECT-EMAIL-->invalid<!--/ERROR:INCORRECT-EMAIL--><!--ERROR:NO-EMAIL-->invalid<!--/ERROR:NO-EMAIL--><!--ALREADY-CONFIRMED--><!--ERROR-->invalid<!--/ERROR--><!--/ALREADY-CONFIRMED--><!--ERROR:ALREADY-ON-10-->invalid<!--/ERROR:ALREADY-ON-10-->' required" mandatory?> |
| + |
| + <!--ERROR:ROBINSON--> |
| + <div class="error-message">This email address is blacklisted and cannot subscribe.</div> |
| + <!--/ERROR:ROBINSON--> |
| + |
| + <!--ERROR:NO-EMAIL--> |
| + <div class="error-message">Please enter a valid email address</div> |
| + <!--/ERROR:NO-EMAIL--> |
| + |
| + <!--ERROR:INCORRECT-EMAIL--> |
| + <div class="error-message">Please enter a valid email address</div> |
| + <!--/ERROR:INCORRECT-EMAIL--> |
| + |
| + <!--ERROR:ALREADY-ON-10--> |
| + <div class="error-message">This email address is already subscribed to the Adblock Plus newsletter</div> |
| + <!--/ERROR:ALREADY-ON-10--> |
| + |
| + <!--ALREADY-CONFIRMED--><!--ERROR--> |
| + <div class="error-message">This email address is already subscribed to the Adblock Plus newsletter</div> |
| + <!--/ERROR--><!--/ALREADY-CONFIRMED--> |
| + </div> |
| + |
| + <div> |
| + <label for="fullname">Full name</label> |
| + <?GIS FULLNAME params="id='fullname'"?> |
| + </div> |
| + |
| + <!--ERROR:NO-PASSWORD--> |
| + <p>Error: No Password</p><br> |
| + <!--/ERROR:NO-PASSWORD--> |
| + |
| + <!--ERROR:WRONG-PASSWORD--> |
| + <p>Error: Wrong Password</p><br> |
| + <!--/ERROR:WRONG-PASSWORD--> |
| + |
| + <!--ERROR:INCORRECT-PASSWORD--> |
| + <p>Error: Incorrect Password</p><br> |
| + <!--/ERROR:INCORRECT-PASSWORD--> |
| + |
| + <?GIS NEWSLETTER 10 checked params="hidden"?> |
| + |
| + <input type="hidden" name="REFRESH" value="../web.html"> |
| + |
| + <button type="submit" class="secondary">Sign Up</button> |
| + </form> |
| + <footer id="page-footer"> |
| + <a href="https://eyeo.com/en/privacy" target="_blank">Privacy Policy</a> |
| + </footer> |
| + <!--/NEW-USER--> |
| + |
| + </div> |
| + </div> |
| +</body> |
| +</html> |
| + |
| +<!--******************************************************************************* |
| +* EMAIL TEMPLATES |
| + |
| +Der folgende Abschnitt beschreibt Elemente der Bestätigungs-eMail. |
| +"DOI" steht hierbei für Double-Opt-In. Der potentielle Abonnent bekommt |
| +eine eMail zugesendet, die einen Bestätigungs-Link beinhaltet. Dieser |
| +Link wird im Abschnitt "BODY" mit dem TAG "$$DOI-LINK$$ gesetzt. Dieser |
| +TAG muss enthalten sein, ansonsten kann der Abonnent die Anmeldung nicht |
| +bestätigen! |
| +Im Abschnitt "TO" kann man über die Notation $$FELDNAME$$ auf Felder |
| +zugreifen, die der potentielle Abonnent gerade ausgefüllt hat. |
| +Dies kann auch im Abschnitt "SUBJECT" und "BODY" geschehen. |
| +Ist eines dieser Felder das Feld Anrede, so können mit der im Kapitel der |
| +XML-Schnittstelle |
| +beschriebenen Notation "$$männl$weibl$$" geschlechtsspezifische |
| +Satzabschnitte |
| +eingefügt werden. |
| +****************************************************************************** --> |
| + |
| +<!--******************************************************************************* |
| +* Confirm Email Template |
| +****************************************************************************** --> |
| +<!--DOI-EMAIL--> |
| +<!--SENDER-EMAIL-->confirm@eyeomail.com<!--/SENDER-EMAIL--> |
| +<!--SENDER-NAME-->Marsha at Adblock Plus<!--/SENDER-NAME--> |
| +<!--PRIORITY-->1<!--/PRIORITY--> |
| +<!--TO-->$$FULLNAME$$<!--/TO--> |
| +<!--SUBJECT-->Confirm your email address<!--/SUBJECT--> |
| +<!--BODY--> |
| +<html> |
| +<head> |
| +<title>Confirm Email</title> |
| +<style type="text/css"> |
| +html,body{ |
| + margin:0; |
| + padding:0; |
| + height:100%; |
| + border:none; |
| + font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif; |
| +} |
| +</style> |
| +</head> |
| +<body bgcolor="#EBEBEB"> |
| +<div style="width:100%;height:100%;background-color:#EBEBEB"> |
| +<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center"> |
| + <tr> |
| + <td width="600" height="70"> |
| + <img src="http://asp.backclick.de/email-header/email-header-anmeldebestaetigung.png"> |
| + </td> |
| + </tr> |
| + <tr> |
| + <td colspan="2" width="600"> |
| + |
| + <table cellpadding="0" border="0" cellspacing="25" width="600"> |
| + <tr> |
| + <td style="color:#003366;" width="600"> |
| + Hey $$FULLNAME$$,<br><br> |
| + |
| + 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.<br><br> |
| + |
| + Please confirm your email address by clicking on the link below:<br><br> |
| + |
| + $$DOI-LINK$$<br><br> |
| + |
| + Thanks for subscribing. We promise not to use your email address for anything evil!<br><br> |
| + |
| + The Adblock Plus Team<br><br> |
| + |
| + If you were not expecting this email, please disregard it.<br><br> |
| + </td> |
| + </tr> |
| + </table> |
| + </td> |
| + </tr> |
| +</table> |
| +</div> |
| +</body> |
| +</html> |
| +<!--/BODY--> |
| +<!--TEXT--> |
| +Hey $$FULLNAME$$, |
| + |
| +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. |
| + |
| +Please confirm your email address by clicking on the link below: |
| + |
| +$$DOI-LINK$$ |
| + |
| +Thanks for subscribing. We promise not to use your email address for anything evil! |
| + |
| +The Adblock Plus Team |
| + |
| +If you were not expecting this email, please disregard it. |
| +<!--/TEXT--> |
| +<!--/DOI-EMAIL--> |
| + |
| +<!--******************************************************************************* |
| +* Subscription Confirmed Template |
| +****************************************************************************** --> |
| +<!-- |
| +Für den Abschnitt "CONFIRM-EMAIL" gelten die gleichen Regeln, wie für |
| +den Abschnitt "DOI" |
| +--> |
| + |
| +<!--CONFIRM-EMAIL--> |
| +<!--SENDER-NAME-->Marsha at Adblock Plus<!--/SENDER-NAME--> |
| +<!--PRIORITY-->3<!--/PRIORITY--> |
| +<!--TO-->$$FULLNAME$$<!--/TO--> |
| +<!--SUBJECT-->Adblock Plus Newsletter Subscription Successful<!--/SUBJECT--> |
| +<!--BODY--> |
| +<html> |
| +<head> |
| +<title>test</title> |
| +<style type="text/css"> |
| +html,body{ |
| + margin:0; |
| + padding:0; |
| + height:100%; |
| + border:none; |
| + font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif; |
| +} |
| +</style> |
| +</head> |
| +<body bgcolor="#EBEBEB"> |
| +<div style="width:100%;height:100%;background-color:#EBEBEB"> |
| +<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#D9E1E8" align="center"> |
| + <tr> |
| + <td width="600" height="70"> |
| + <img src="http://asp.backclick.de/email-header/email-header-anmeldung-erfolgreich.png"> |
| + </td> |
| + </tr> |
| + <tr> |
| + <td colspan="2" width="600"> |
| + <table cellpadding="0" border="0" cellspacing="25" width="600"> |
| + <tr> |
| + <td style="color:#003366;" width="600"> |
| + Hey $$FULLNAME$$,<br><br> |
| + |
| + Success email body here. |
| + </td> |
| + </tr> |
| + </table> |
| + </td> |
| + </tr> |
| +</table> |
| +</div> |
| +</body> |
| +</html> |
| +<!--/BODY--> |
| +<!--TEXT--> |
| +Hey $$FULLNAME$$, |
| + |
| +Success email body here. |
| +<!--/TEXT--> |
| +<!--/CONFIRM-EMAIL--> |
« no previous file with comments
|
« .hgignore ('k')
|
css/main.css » ('j')
|
no next file with comments »
