Bug #17880: Donation banner on home page

7 files changed, 57 insertions, 0 deletions

diff --git a/css/layout.css b/css/layout.css
index 4908ee0e..e0cd4a10 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 fededd47..09ed2c8f 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 00000000..4c0e4b38
--- /dev/null
+++ b/images/homepage-banner-cd.jpg
diff --git a/images/homepage-banner-lp.jpg b/images/homepage-banner-lp.jpg
new file mode 100755
index 00000000..f5fa76a6
--- /dev/null
+++ b/images/homepage-banner-lp.jpg
diff --git a/images/homepage-banner-rd.jpg b/images/homepage-banner-rd.jpg
new file mode 100755
index 00000000..646f59e6
--- /dev/null
+++ b/images/homepage-banner-rd.jpg
diff --git a/images/homepage-banner-rr.jpg b/images/homepage-banner-rr.jpg
new file mode 100755
index 00000000..4a2a512e
--- /dev/null
+++ b/images/homepage-banner-rr.jpg
diff --git a/images/homepage-banner-ss.jpg b/images/homepage-banner-ss.jpg
new file mode 100755
index 00000000..c4a0fa73
--- /dev/null
+++ b/images/homepage-banner-ss.jpg