[tor-commits] [webwml/staging] Bug #17880: Donation banner on home page

[nima at torproject.org]

commit 8b7fb8a46588da4dc8c991be396fa3b1f4a66ef4
Author: Arthur Edelstein <arthuredelstein at gmail.com>
Date:   Fri Dec 18 16:17:23 2015 -0500

    Bug #17880: Donation banner on home page
---
 css/layout.css                |   33 +++++++++++++++++++++++++++++++++
 en/index.wml                  |   24 ++++++++++++++++++++++++
 images/homepage-banner-cd.jpg |  Bin 0 -> 84779 bytes
 images/homepage-banner-lp.jpg |  Bin 0 -> 101171 bytes
 images/homepage-banner-rd.jpg |  Bin 0 -> 86882 bytes
 images/homepage-banner-rr.jpg |  Bin 0 -> 98192 bytes
 images/homepage-banner-ss.jpg |  Bin 0 -> 92697 bytes
 7 files changed, 57 insertions(+)

diff --git a/css/layout.css b/css/layout.css
index 4908ee0..e0cd4a1 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -1310,3 +1310,36 @@ p.blogDate {
 }
 /* End hide from IE-mac */
 
+#donation-banner {
+  display: block;
+  height: 200px;
+  margin: auto;
+  margin-bottom: 5px;
+  position: relative;
+  width: 700px;
+}
+
+#donation-banner > a {
+  display: block;
+}
+
+#donation-banner > img {
+  display: block;
+}
+
+#donate-button {
+  background-color: green;
+  border-radius: 5px;
+  bottom: 15px;
+  color: white;
+  font-family: sans-serif;
+  font-size: 20px;
+  padding: 14px 14px;
+  position: absolute;
+  right: 15px;
+  text-align: center;
+}
+
+#donate-button:hover {
+  filter: brightness(1.2);
+}
diff --git a/en/index.wml b/en/index.wml
index fededd4..09ed2c8 100644
--- a/en/index.wml
+++ b/en/index.wml
@@ -2,6 +2,30 @@
 # Revision: $Revision$
 # Translation-Priority: 1-high
 
+<!-- Donation banner for fundraising campaign. -->
+<div id="donation-banner">
+  <a href="donate/donate-hpbanner.html.en">
+    <noscript>
+      <!-- We don't have JavaScript, so show our default champion. -->
+      <img id="donation-banner-image-noscript" src="images/homepage-banner-ss.jpg" />
+    </noscript>
+    <!-- Placeholder for the champion banner image that will be added
+         by JavaScript. -->
+    <img id="donation-banner-image"" />
+   </a>
+  <a href="donate/donate-hpbanner.html.en">
+     <div id="donate-button">Please Donate!</div>
+  </a>
+</div>
+
+<script>
+  <!-- Show a different champion at random. -->
+  var alternates = ["cd", "lp", "rd", "rr", "ss"];
+  var alternate = alternates[Math.floor(Math.random() * alternates.length)];
+  var image = document.getElementById("donation-banner-image");
+  image.src = "images/homepage-banner-" + alternate + ".jpg";
+</script>
+
 #include "head.wmi" TITLE="Tor Project: Anonymity Online" CHARSET="UTF-8"
 
 <div id="home">
diff --git a/images/homepage-banner-cd.jpg b/images/homepage-banner-cd.jpg
new file mode 100755
index 0000000..4c0e4b3
Binary files /dev/null and b/images/homepage-banner-cd.jpg differ
diff --git a/images/homepage-banner-lp.jpg b/images/homepage-banner-lp.jpg
new file mode 100755
index 0000000..f5fa76a
Binary files /dev/null and b/images/homepage-banner-lp.jpg differ
diff --git a/images/homepage-banner-rd.jpg b/images/homepage-banner-rd.jpg
new file mode 100755
index 0000000..646f59e
Binary files /dev/null and b/images/homepage-banner-rd.jpg differ
diff --git a/images/homepage-banner-rr.jpg b/images/homepage-banner-rr.jpg
new file mode 100755
index 0000000..4a2a512
Binary files /dev/null and b/images/homepage-banner-rr.jpg differ
diff --git a/images/homepage-banner-ss.jpg b/images/homepage-banner-ss.jpg
new file mode 100755
index 0000000..c4a0fa7
Binary files /dev/null and b/images/homepage-banner-ss.jpg differ