commit 7f17ea251531e45fdf372ee8fd65a02baf9ad3e3 Author: Arthur Edelstein arthuredelstein@gmail.com 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%22%3E + <div id="banner-donate-button"> + <span>Donate Now! ▶</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();