[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]

[tor-commits] [webwml/staging] Bug 23484: 2017 Homepage donation banner



commit 7f17ea251531e45fdf372ee8fd65a02baf9ad3e3
Author: Arthur Edelstein <arthuredelstein@xxxxxxxxx>
Date:   Tue Nov 15 02:05:59 2016 -0500

    Bug 23484: 2017 Homepage donation banner
---
 css/donation-banner.css | 113 ++++++++++++++++++++++++++++++++++++++++++++++++
 en/index.wml            |   2 +-
 images/onion-hand.png   | Bin 0 -> 69055 bytes
 include/head.wmi        |  20 +++++++++
 js/donation_banner.js   |  33 ++++++++++++++
 5 files changed, 167 insertions(+), 1 deletion(-)

diff --git a/css/donation-banner.css b/css/donation-banner.css
new file mode 100644
index 00000000..57c0af39
--- /dev/null
+++ b/css/donation-banner.css
@@ -0,0 +1,113 @@
+#banner-wrapper {
+    -khtml-user-select: none;    /* Konqueror */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* Internet Explorer/Edge */
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    display: block;
+    height: 150px;
+    justify-content: center;
+    left: 0px;
+    margin-top: 0px;
+    min-width: 900px;
+    opacity: 1;
+    position: absolute;
+    user-select: none;
+    width: 100%;
+    z-index: 1;
+}
+#banner-wrapper:before {
+    background-color: #551373;
+    background-image: url('../images/onion-hand.png');
+    background-position: calc(50% - 40px) 50%;
+    background-size: cover;
+    content: "";
+    height: 150px;
+    left: 0px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+}
+#banner-contents-container {
+    align-items: center;
+    height: 100%;
+    margin: 0 auto;
+    max-width: 960px;
+    position: relative;
+    width: 960px;
+}
+#banner-tagline {
+    align-items: center;
+    bottom: 60px;
+    color: white;
+    display: flex;
+    font-family: monospace;
+    font-weight: bold;
+    left: 200px;
+    position: absolute;
+    right: 0px;
+    text-align: start;
+    text-transform: uppercase;
+    top: 10px;
+}
+#banner-slogan {
+    align-items: center;
+    bottom: 30px;
+    color: #f8f8a0;
+    display: flex;
+    font-size: 20px;
+    font-family: monospace;
+    font-weight: bold;
+    left: 200px;
+    position: absolute;
+    right: 285px;
+    text-align: start;
+    top: 90px;
+    white-space: nowrap;
+}
+#banner-mozilla {
+    align-items: center;
+    bottom: 5px;
+    color: white;
+    display: flex;
+    font-size: 18px;
+    font-family: sans-serif;
+    left: 200px;
+    position: absolute;
+    right: 285px;
+    text-align: start;
+    top: 120px;
+    white-space: nowrap;
+}
+#banner-donate-button {
+    align-items: center;
+    background-color: #13a513;
+    border: 0px;
+    bottom: 10px;
+    color: #fbf7ef;
+    display: flex;
+    font-family: sans-serif;
+    font-size: 22px;
+    font-weight: bold;
+    justify-content: center;
+    left: 630px;
+    letter-spacing: -0.00em;
+    position: absolute;
+    right: 10px;
+    top: 90px;
+}
+#banner-donate-button:hover {
+    background-color: #38bc38;
+}
+#banner-spacer {
+    background-color: #551373;
+    display: block;
+    height: 150px;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+}
+body {
+    min-width: 960px;
+}
diff --git a/en/index.wml b/en/index.wml
index 478e96e9..5c166f10 100644
--- a/en/index.wml
+++ b/en/index.wml
@@ -2,7 +2,7 @@
 # Revision: $Revision$
 # Translation-Priority: 1-high
 
-#include "head.wmi" TITLE="Tor Project | Privacy Online" CHARSET="UTF-8"
+#include "head.wmi" TITLE="Tor Project | Privacy Online" CHARSET="UTF-8" DONATION_BANNER="true"
 
 
 <div id="home">
diff --git a/images/onion-hand.png b/images/onion-hand.png
new file mode 100644
index 00000000..00a5a41c
Binary files /dev/null and b/images/onion-hand.png differ
diff --git a/include/head.wmi b/include/head.wmi
index dc4d5e26..f496462f 100644
--- a/include/head.wmi
+++ b/include/head.wmi
@@ -33,6 +33,7 @@
    # begin WML to generate css/js paths
    <ifneq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/$(STYLESHEET)" rel="stylesheet">">
    <ifeq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/css/master.min.css" rel="stylesheet">">
+   <ifeq "$(DONATION_BANNER)" "true" "<link href="$(DOCROOT)/css/donation-banner.css" rel="stylesheet">">
 
    #<link href="css/master.min.css" rel="stylesheet">
    <!--[if lte IE 8]>
@@ -48,6 +49,25 @@
    # end WML to generate css/js paths
 </head>
 <body>
+<!-- Insert donation banner if flag is true -->
+<ifeq "$(DONATION_BANNER)" "true" "
+    <div id="banner-wrapper">
+        <div id="banner-contents-container">
+            <div id="banner-tagline"><span><noscript>Protecting the Privacy of Millions Every Day</noscript></span></div>
+            <div id="banner-slogan"><span>Tor: Powering Digital Resistance</span></div>
+            <div id="banner-mozilla"><span>Give today and Mozilla will match your gift!</span></div>
+            <a id="banner-donate-button-link"
+               href="https://www.torproject.org/donate/donate-pdr-hp";>
+                <div id="banner-donate-button">
+                    <span>Donate Now!&#160;&#9654;</span>
+                </div>
+            </a>
+        </div>
+    </div>
+    <div id="banner-spacer"></div>
+    <script src="js/donation_banner.js"></script>
+
+">
 <div id="wrap">
   <div id="header">
     <h1 id="logo"><a href="<page index>">Tor</a></h1>
diff --git a/js/donation_banner.js b/js/donation_banner.js
new file mode 100644
index 00000000..239fcafd
--- /dev/null
+++ b/js/donation_banner.js
@@ -0,0 +1,33 @@
+/* jshint esnext:true */
+
+let kTaglines = [
+  "Protecting Journalists, Whistleblowers, & Activists Since 2006",
+  "Networking Freedom Worldwide",
+  "Freedom Online",
+  "Fostering Free Expression Worldwide",
+  "Protecting the Privacy of Millions Every Day",
+];
+
+let kTaglineSizes = [
+  30,
+  40,
+  48,
+  36,
+  36,
+];
+
+// Returns a random integer x, such that 0 <= x < max
+let randomInteger = function (max) {
+  return Math.floor(max * Math.random());
+};
+
+// The main donation banner function.
+let runDonationBanner = function () {
+  // Load random tag line once page is loaded
+  let index = randomInteger(kTaglines.length);
+  let taglineElement = document.querySelector("#banner-tagline span");
+  taglineElement.innerText = kTaglines[index];
+  taglineElement.style.fontSize = kTaglineSizes[index] + "px";
+};
+
+runDonationBanner();



_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits