Browse code

Bug 23484: 2017 Homepage donation banner

Arthur Edelstein authored on 15/11/2016 08:05:59
Showing 5 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,113 @@
1
+#banner-wrapper {
2
+    -khtml-user-select: none;    /* Konqueror */
3
+    -moz-user-select: none;      /* Firefox */
4
+    -ms-user-select: none;       /* Internet Explorer/Edge */
5
+    -webkit-touch-callout: none; /* iOS Safari */
6
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
7
+    display: block;
8
+    height: 150px;
9
+    justify-content: center;
10
+    left: 0px;
11
+    margin-top: 0px;
12
+    min-width: 900px;
13
+    opacity: 1;
14
+    position: absolute;
15
+    user-select: none;
16
+    width: 100%;
17
+    z-index: 1;
18
+}
19
+#banner-wrapper:before {
20
+    background-color: #551373;
21
+    background-image: url('../images/onion-hand.png');
22
+    background-position: calc(50% - 40px) 50%;
23
+    background-size: cover;
24
+    content: "";
25
+    height: 150px;
26
+    left: 0px;
27
+    position: absolute;
28
+    top: 0px;
29
+    right: 0px;
30
+}
31
+#banner-contents-container {
32
+    align-items: center;
33
+    height: 100%;
34
+    margin: 0 auto;
35
+    max-width: 960px;
36
+    position: relative;
37
+    width: 960px;
38
+}
39
+#banner-tagline {
40
+    align-items: center;
41
+    bottom: 60px;
42
+    color: white;
43
+    display: flex;
44
+    font-family: monospace;
45
+    font-weight: bold;
46
+    left: 200px;
47
+    position: absolute;
48
+    right: 0px;
49
+    text-align: start;
50
+    text-transform: uppercase;
51
+    top: 10px;
52
+}
53
+#banner-slogan {
54
+    align-items: center;
55
+    bottom: 30px;
56
+    color: #f8f8a0;
57
+    display: flex;
58
+    font-size: 20px;
59
+    font-family: monospace;
60
+    font-weight: bold;
61
+    left: 200px;
62
+    position: absolute;
63
+    right: 285px;
64
+    text-align: start;
65
+    top: 90px;
66
+    white-space: nowrap;
67
+}
68
+#banner-mozilla {
69
+    align-items: center;
70
+    bottom: 5px;
71
+    color: white;
72
+    display: flex;
73
+    font-size: 18px;
74
+    font-family: sans-serif;
75
+    left: 200px;
76
+    position: absolute;
77
+    right: 285px;
78
+    text-align: start;
79
+    top: 120px;
80
+    white-space: nowrap;
81
+}
82
+#banner-donate-button {
83
+    align-items: center;
84
+    background-color: #13a513;
85
+    border: 0px;
86
+    bottom: 10px;
87
+    color: #fbf7ef;
88
+    display: flex;
89
+    font-family: sans-serif;
90
+    font-size: 22px;
91
+    font-weight: bold;
92
+    justify-content: center;
93
+    left: 630px;
94
+    letter-spacing: -0.00em;
95
+    position: absolute;
96
+    right: 10px;
97
+    top: 90px;
98
+}
99
+#banner-donate-button:hover {
100
+    background-color: #38bc38;
101
+}
102
+#banner-spacer {
103
+    background-color: #551373;
104
+    display: block;
105
+    height: 150px;
106
+    position: relative;
107
+    top: 0px;
108
+    left: 0px;
109
+    width: 100%;
110
+}
111
+body {
112
+    min-width: 960px;
113
+}
... ...
@@ -2,7 +2,7 @@
2 2
 # Revision: $Revision$
3 3
 # Translation-Priority: 1-high
4 4
 
5
-#include "head.wmi" TITLE="Tor Project | Privacy Online" CHARSET="UTF-8"
5
+#include "head.wmi" TITLE="Tor Project | Privacy Online" CHARSET="UTF-8" DONATION_BANNER="true"
6 6
 
7 7
 
8 8
 <div id="home">
9 9
new file mode 100644
10 10
Binary files /dev/null and b/images/onion-hand.png differ
... ...
@@ -33,6 +33,7 @@
33 33
    # begin WML to generate css/js paths
34 34
    <ifneq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/$(STYLESHEET)" rel="stylesheet">">
35 35
    <ifeq "$(STYLESHEET)" "" "<link href="$(DOCROOT)/css/master.min.css" rel="stylesheet">">
36
+   <ifeq "$(DONATION_BANNER)" "true" "<link href="$(DOCROOT)/css/donation-banner.css" rel="stylesheet">">
36 37
 
37 38
    #<link href="css/master.min.css" rel="stylesheet">
38 39
    <!--[if lte IE 8]>
... ...
@@ -48,6 +49,25 @@
48 49
    # end WML to generate css/js paths
49 50
 </head>
50 51
 <body>
52
+<!-- Insert donation banner if flag is true -->
53
+<ifeq "$(DONATION_BANNER)" "true" "
54
+    <div id="banner-wrapper">
55
+        <div id="banner-contents-container">
56
+            <div id="banner-tagline"><span><noscript>Protecting the Privacy of Millions Every Day</noscript></span></div>
57
+            <div id="banner-slogan"><span>Tor: Powering Digital Resistance</span></div>
58
+            <div id="banner-mozilla"><span>Give today and Mozilla will match your gift!</span></div>
59
+            <a id="banner-donate-button-link"
60
+               href="https://www.torproject.org/donate/donate-pdr-hp">
61
+                <div id="banner-donate-button">
62
+                    <span>Donate Now!&#160;&#9654;</span>
63
+                </div>
64
+            </a>
65
+        </div>
66
+    </div>
67
+    <div id="banner-spacer"></div>
68
+    <script src="js/donation_banner.js"></script>
69
+
70
+">
51 71
 <div id="wrap">
52 72
   <div id="header">
53 73
     <h1 id="logo"><a href="<page index>">Tor</a></h1>
54 74
new file mode 100644
... ...
@@ -0,0 +1,33 @@
1
+/* jshint esnext:true */
2
+
3
+let kTaglines = [
4
+  "Protecting Journalists, Whistleblowers, & Activists Since 2006",
5
+  "Networking Freedom Worldwide",
6
+  "Freedom Online",
7
+  "Fostering Free Expression Worldwide",
8
+  "Protecting the Privacy of Millions Every Day",
9
+];
10
+
11
+let kTaglineSizes = [
12
+  30,
13
+  40,
14
+  48,
15
+  36,
16
+  36,
17
+];
18
+
19
+// Returns a random integer x, such that 0 <= x < max
20
+let randomInteger = function (max) {
21
+  return Math.floor(max * Math.random());
22
+};
23
+
24
+// The main donation banner function.
25
+let runDonationBanner = function () {
26
+  // Load random tag line once page is loaded
27
+  let index = randomInteger(kTaglines.length);
28
+  let taglineElement = document.querySelector("#banner-tagline span");
29
+  taglineElement.innerText = kTaglines[index];
30
+  taglineElement.style.fontSize = kTaglineSizes[index] + "px";
31
+};
32
+
33
+runDonationBanner();