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

Unified Diff: adblock-browser-head.html

Issue 4814987935612928: Issue 2213 - landing page for mobile beta launch (Closed)
Patch Set: Adjusted for IE8 after tests and addressed Thomas and Sebastian comments Created April 22, 2015, 3:19 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« adblock-browser.html ('K') | « adblock-browser.html ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: adblock-browser-head.html
===================================================================
new file mode 100644
--- /dev/null
+++ b/adblock-browser-head.html
@@ -0,0 +1,251 @@
+<meta name="title" content="Adblock Browser Beta Launch" />
+<meta property="og:title" content="Adblock Browser Beta Launch" />
+<meta name="description" content="Want Adblock Browser for your smartphone or tablet? Join the Adblock Browser for Android Beta Google+ community." />
+<meta property="og:description" content="Want Adblock Browser for your smartphone or tablet? Join the Adblock Browser for Android Beta Google+ community." />
+
+<style type="text/css">
+#content *
+{
+ box-sizing: content-box;
+}
+
+#content h1
+{
+ margin-bottom: 28px;
+}
+
+ol
+{
+ font-size: 16px;
+ padding-left: 60px;
+}
+
+ol li
+{
+ margin-bottom: 14px;
+}
+
+#content h3.subscribe-header
+{
+ font-size: 18px;
+ margin-bottom: 14px;
+}
+
+.subscribe-description
+{
+ margin: 14px 0px 20px 0px;
+}
+
+.button-community-wrapper
+{
+ display: inline-block;
+ text-align: center;
+ border: solid 1px #4CAE4C;
+ border-radius: 3px;
+ background-color: #5CB85C;
+ margin: 10px 0px 30px 0px;
+}
+
+.button-community-wrapper a
+{
+ display: block;
+ padding: 25px 20px;
+ color: #FFFFFF;
+ font-weight: bold;
+ font-size: 14px;
+ text-decoration: none;
+}
+
+#subscribe-textbox
+{
+ border: solid 1px #B5B4B0;
+ margin-right: 20px;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-size: 16px;
+ width: 276px;
+ line-height: 44px;
+ height: 44px;
Thomas Greiner 2015/04/23 10:47:11 You don't need to explicitly specify the height if
saroyanm 2015/04/23 13:07:59 It's hack for IE8 unfortunately without specifying
Thomas Greiner 2015/04/23 13:38:00 As mentioned in an earlier comment, please add com
+}
+
+#subscribe-textbox.placeholder
+{
+ color: #B5B4B0;
+}
+
+#subscribe-button
+{
+ border: solid 1px #357EBD;
+ border-radius: 3px;
+ background-color: #428BCA;
+ color: #FFFFFF;
+ font-size: 14px;
+ font-weight: bold;
+ min-width: 146px;
+ height: 44px;
+}
+
+#subscribe-button span
+{
+ padding-left: 30px;
+ padding-right: 30px;
+}
+
+.disclaimer
+{
+ display: none;
+ font-size: 14px;
+ color: #D00;
+ border: 1px solid #D00;
+ border-radius: 5px;
+ padding: 5px;
+ margin-top: 30px;
+}
+
+html[lang="fr"] .disclaimer.lang-fr
+{
+ display: block;
+}
+
+#subscribe-form .empty-label, #subscribe-form .sucess-label,
+#response-error, #subscribe-form .invalid-label, #email-placeholder,
+#subscribe-form.success input, #subscribe-form.success button
+{
+ display: none;
+}
+
+#subscribe-form .empty-label,
+#subscribe-form .invalid-label
+{
+ margin-top: 30px;
+}
+
+#subscribe-form.success .sucess-label,
+#subscribe-form.empty .empty-label,
+#subscribe-form.invalid .invalid-label,
+#subscribe-form.error #response-error
+{
+ display: block;
+}
+</style>
+
+<script type="text/javascript"><!--
Thomas Greiner 2015/04/23 10:47:11 It looks like `<!--` and `-->` are special excepti
saroyanm 2015/04/23 13:07:59 Done.
+function addListener(obj, type, listener, useCapture)
+{
+ if ("addEventListener" in obj)
+ {
+ obj.addEventListener(type, function(ev)
+ {
+ ev.preventDefault();
Thomas Greiner 2015/04/23 10:47:11 The default behavior is not to prevent the default
saroyanm 2015/04/23 13:07:59 Done.
+ listener(ev);
+ }, useCapture);
+ }
+ else
+ {
+ if (type == "DOMContentLoaded")
+ type = "readystatechange";
+
+ // XMLHttpRequest missing attachEvent method In IE 8
+ if (obj instanceof XMLHttpRequest && type == "load")
Thomas Greiner 2015/04/23 10:47:11 It's more useful if you'd make this more generic:
saroyanm 2015/04/23 13:07:59 Done.
+ {
+ obj.onreadystatechange = listener;
+ return;
+ }
+ obj.attachEvent("on" + type, function()
+ {
+ if (document.readyState == "complete")
+ {
+ event.returnValue = false;
Thomas Greiner 2015/04/23 10:47:11 The default return value is `true` so let's only s
saroyanm 2015/04/23 13:07:59 Done.
+ listener(event);
+ }
+ });
+ }
+}
+
+function addPlaceholder(textbox)
+{
+ textbox.setAttribute("class", "placeholder");
+ textbox.value = getPlaceholderText();
+}
+
+function getPlaceholderText()
+{
+ var text = "innerText" in document.body ? "innerText" : "textContent";
+ return document.getElementById("email-placeholder")[text];
+}
+
+function contentLoad()
+{
+ var emailTextbox = document.getElementById("subscribe-textbox");
+
+ // textbox placeholder implementation for browsers
+ // that don't support placeholder attribute
+ if (!("placeholder" in document.createElement("input"))
+ && !emailTextbox.value)
+ {
+ addPlaceholder(emailTextbox);
+ addListener(emailTextbox, "focus", function()
+ {
+ if (emailTextbox.value == getPlaceholderText())
+ {
+ emailTextbox.value = "";
+ emailTextbox.setAttribute("class", "");
+ }
+ }, false);
+
+ addListener(emailTextbox, "blur", function()
+ {
+ if (!emailTextbox.value)
+ addPlaceholder(emailTextbox);
+ }, false);
+ }
+
+ addListener(document.getElementById("subscribe-form"), "submit", function()
+ {
+ var formElement = document.getElementById("subscribe-form");
+ if (!emailTextbox.value || emailTextbox.value == getPlaceholderText())
+ {
+ formElement.setAttribute("class", "empty");
+ return;
+ }
+
+ // Simple email validation for browsers
+ // that don't support input of type email
+ var input = document.createElement("input");
+ input.setAttribute("type", "email");
+ if (input.type !== "email"
+ && !(/(.+)@(.+){2,}\.(.+){2,}/.test(emailTextbox.value)))
+ {
+ formElement.setAttribute("class", "invalid");
+ return;
+ }
+
+ if (!window.XMLHttpRequest)
+ {
+ formElement.submit();
+ return;
+ }
+
+ var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value);
+ var request = new XMLHttpRequest();
+ request.open("POST", formElement.action, true);
+ request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+ request.setRequestHeader("Content-length", params.length);
+ addListener(request, "load", function()
+ {
+ if (request.status >= 200 && request.status < 300)
+ {
+ formElement.setAttribute("class", "success");
+ }
+ else
+ {
+ var text = "innerText" in document.body ? "innerText" : "textContent";
Thomas Greiner 2015/04/23 10:47:11 The variable name is implying that this is a text
saroyanm 2015/04/23 13:07:59 Done.
+ document.getElementById("response-error")[text] = request.statusText;
+ formElement.setAttribute("class", "error");
+ }
+ }, false);
+ request.send(params);
+ }, false);
+}
+addListener(document, "DOMContentLoaded", contentLoad, false);
+--></script>
« adblock-browser.html ('K') | « adblock-browser.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld