Issue 2844 - Create Microsoft Edge coming soon landing page

includes/index.tmpl

Index: includes/index.tmpl
===================================================================
--- a/includes/index.tmpl
+++ b/includes/index.tmpl
@@ -33,6 +33,124 @@
 <meta content="{{"Adblock Plus is the most popular adblocker available for Firefox, Chrome, Opera, Safari, Android and Internet Explorer. Block all annoying ads all over the web: remove video ads on YouTube, block Facebook ads, get rid of pop-ups and much more. On Google Chrome, Adblock Plus is one of the fastest growing extensions ever. Our adblock for Chrome is being used by 10 million people. Download online for free now!"|translate("s2")}}" name="description">
 <meta content="{{"Adblock Plus - Surf the web without annoying ads!"|translate("s1")}}" property="og:title">
 <meta content="{{"Adblock Plus is the most popular adblocker available for Firefox, Chrome, Opera, Safari, Android and Internet Explorer. Block all annoying ads all over the web: remove video ads on YouTube, block Facebook ads, get rid of pop-ups and much more. On Google Chrome, Adblock Plus is one of the fastest growing extensions ever. Our adblock for Chrome is being used by 10 million people. Download online for free now!"|translate("s2")}}" property="og:description">
+<script type="text/javascript">
+//<![CDATA[
+function addListener(obj, type, listener, useCapture)
+{
+  if ("addEventListener" in obj)
+  {
+    obj.addEventListener(type, function(ev)
+    {
+      if (listener(ev) === false)
+        ev.preventDefault();
+    }, useCapture);
+  }
+  else
+  {
+    // IE 8
+    if (type == "DOMContentLoaded")
+      type = "readystatechange";
+
+    type = "on" + type;
+    if ("attachEvent" in obj)
+    {
+      obj.attachEvent(type, function()
+      {
+        if (document.readyState == "complete" && listener(event) === false)
+          event.returnValue = false;
+      });
+    }
+    else
+    {
+      obj[type] = listener;
+    }
+  }
+}
+
+function addPlaceholder(textbox)
+{
+  textbox.setAttribute("class", "placeholder");
+  textbox.value = getPlaceholderText();
+}
+
+function getPlaceholderText()
+{
+  return document.getElementById("subscribe-textbox").getAttribute("placeholder");
+}
+
+function contentLoad()
+{
+  var emailTextbox = document.getElementById("subscribe-textbox");
+
+  // IE9 + Safari iOS
+  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 (!window.XMLHttpRequest)
+    {
+      formElement.submit();
+      return false;
+    }
+
+    var pathArray = window.location.pathname.split("/");
+    var params = emailTextbox.name + "=" + encodeURIComponent(emailTextbox.value);
+    params += "&lang=" + pathArray[1];
+    params += "&edge=" + "true";
+    var request = new XMLHttpRequest();
+    request.open("POST", formElement.action, true);
+    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    addListener(request, "readystatechange", function()
+    {
+      if (request.readyState == 4)
+      {
+        if (request.status >= 200 && request.status < 300)
+        {
+          formElement.setAttribute("class", "success");
+        }
+        else if (request.status == 400)
+        {
+          formElement.setAttribute("class", "invalid");
+        }
+        else
+        {
+          var errorWrapper = document.getElementById("response-error");
+          if ("textContent" in errorWrapper)
+            errorWrapper.textContent = request.statusText;
+          else // IE8
+            errorWrapper.innerText = request.statusText;
+
+          formElement.setAttribute("class", "error");
+        }
+      }
+    }, false);
+    request.send(params);
+    return false;
+  }, false);
+}
+addListener(document, "DOMContentLoaded", contentLoad, false);
+//]]>
+</script>
+
 </head>
 
 
@@ -60,6 +178,24 @@
           <div class="sprite"></div>
 {{"Integrated by default in"|translate("s11")}} <a href="http://www.maxthon.com/" target="_blank">{{"Maxthon Cloud Browser"|translate("s12")}}</a>
         </li>
+        <span id="feature-edge">
+          <p class="subscribe-description">
+            {{"Get a heads-up prior to the launch!"|translate("ios-subscription-description")}}
+          </p>
+          <div class="sprite"></div>
+          <form id="subscribe-form" accept-charset="utf-8" action="/submitEmail" method="post">
+            <input id="subscribe-textbox" type="email" name="email" placeholder="{{"Your email address"|translate("ios-subscription-input-placeholder")}}" required />
+            <button id="subscribe-button" type="submit"><span>{{"Notify me"|translate("ios-subscription-button")}}</span></button>
+            <span class="sucess-label">
+              {{"A confirmation email has been sent. Please check your email and click the confirmation link."|translate("subscription-message-success")}}
+            </span>
+            <span class="invalid-label">
+              {{"Please enter a valid email address."|translate("subscription-message-invalid-email")}}
+            </span>
+            <span id="response-error">
+            </span>
+          </form>
+        </span>
       </ul>
     </div>
 
@@ -71,6 +207,7 @@
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplusie.exe" id="install-internet-explorer">{{"Install for Internet Explorer"|translate("s17")}}</a>
       <a class="install-button" href="https://update.adblockplus.org/latest/adblockplussafari.safariextz" id="install-safari">{{"Install for Safari"|translate("s18")}}</a>
       <a class="install-button" href="https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb" id="install-yandex-browser" onclick="chrome.webstore.install(); return false;">{{"Install for Yandex Browser"|translate("s19")}}</a>
+      <div id="edge-other-browsers">{{"Download ABP for another browser:"|translate("edge-other-browser")}}</div>
       <ul>
         <li>
           <a class="sprite" href="firefox" id="platform-firefox" title="{{"Adblock Plus for Firefox"|translate("s20")}}"></a>
@@ -96,6 +233,9 @@
         <li>
           <a class="sprite" href="maxthon" id="platform-maxthon" title="{{"Adblock Plus for Maxthon"|translate("s27")}}"></a>
         </li>
+        <li>
+          <a class="sprite" href="edge" id="platform-edge" title="{{"Adblock Plus for Microsoft Edge"|translate("abp-microsoft-edge")}}"></a>
+        </li>
       </ul>
     </div>
   </section>
@@ -120,6 +260,7 @@
 
   <iframe frameborder="0" height="285" id="video" itemprop="video" src="//www.youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&amp;autohide=1&amp;enablejsapi=1&amp;controls=2&amp;fs=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light" width="520"></iframe>
   <img height="305" id="maxthon-instruction" src="/img/maxthon-instruction.png" width="540">
+  <img height="320" id="edge-incoming" src="/img/edge_teaser.png" width="520">
 </div>
 
 <div id="key-facts">
@@ -185,6 +326,9 @@
       <button id="more-maxthon" onclick="showTab(this);return false;">
         {{"Maxthon"|translate("s59")}}
       </button>
+      <button id="more-edge" onclick="showTab(this);return false;">
+        {{"Microsoft Edge"|translate("Microsoft Edge")}}
+      </button>
     </div>
 
     <div class="more-tab" id="tab-firefox">
@@ -337,6 +481,13 @@
         {{"Different from being as an extension on other browsers, Adblock Plus has been integrated by default for Maxthon users, and as an opt-in option for Chinese users. Are you fed up with advertisers infringing on your browsing experience? Simply install Maxthon Cloud Browser and all annoying ads will be automatically blocked from the internet. Blinking banners, popups, video commercials on YouTube and Facebook ads: Maxthon Cloud Browser with Adblock Plus integrated will automatically remove any unwanted ad from every website you visit. Want more? You can easily activate additional privacy and security features such as tracking and malware protection."|translate("s98")}}
       </p>
     </div>
+    <div class="more-tab" id="tab-edge">
+      <h2>{{"Be notified when Adblock Plus for Microsoft Edge is available!"|translate("abp-for-edge-be-notified")}}</h2>
+
+      <p>
+        {{"Microsoft Edge <a href='https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508820-javascript-browser-extensions'>does not yet support extensions</a>. However, you can be sure that a version of Adblock Plus for Microsoft Edge will be released as soon as possible. Enter your email in the field above to receive a notification when Adblock Plus for Microsoft Edge is available. While you're waiting, you may want to try the latest version of Adblock Plus for Internet Explorer"|translate("ms-edge-description")}}
+      </p>
+    </div>
   </div>
 </section>