summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorsajolida <sajolida@pimienta.org>2019-03-20 15:42:35 +0000
committersajolida <sajolida@pimienta.org>2019-03-20 15:42:35 +0000
commit6493c9526d5485686588531f7f8be2810742702e (patch)
tree18a356c5f428de7fec26020ebf2fd3169c89bda3
parent781668b0c82078c0ce22bac0e1dc07f608e33e95 (diff)
Add a permanent incentive to donate on /home (#14599)
-rw-r--r--wiki/src/home.css59
-rw-r--r--wiki/src/home.html13
-rw-r--r--wiki/src/home.js12
3 files changed, 57 insertions, 27 deletions
diff --git a/wiki/src/home.css b/wiki/src/home.css
index 9fc7151..5584cbb 100644
--- a/wiki/src/home.css
+++ b/wiki/src/home.css
@@ -1,13 +1,44 @@
-/* Donation message */
+/* Random message box */
-#donation-message {
- background: #eee;
+.random-message {
+ display: none;
overflow: auto;
- padding: 1em;
- font-weight: bold;
- font-size: 16px;
- border: 1px solid #ddd;
margin-bottom: 2em;
+ padding: 1em 2em 1em 2em !important;
+ background: #eee !important;
+ border: 1px solid #ddd !important;
+ border-radius: 0.5em;
+ box-sizing: border-box;
+ box-shadow: 1px 1px 5px #ccc;
+ color: black !important;
+}
+
+.random-message p:last-child {
+ margin-bottom: 0;
+}
+
+.random-message h2:first-child {
+ margin-top: 0;
+}
+
+/* Donate message */
+
+#donate {
+ background: #eee url(lib/give-love.svg) no-repeat top 50% left 1.5em !important;
+ background-size: 5em !important;
+ padding-left: 8em !important;
+ border: 1px solid #ddd !important;
+ font-size: 16px;
+}
+
+.donate-button {
+ box-shadow: 1px 1px 5px #ccc;
+ border-radius: 0.5em;
+ padding: 0.5em 1em;
+ background: #53b351;
+ line-height: 1em;
+ font-weight: bold;
+ text-align: center;
}
span.highlight {
@@ -18,20 +49,10 @@ span.underlined {
border-bottom: 3px solid #9f73d2;
}
-#donation-message p {
- margin-bottom: 0.5em;
-}
-
-/* Survey */
+/* Survey message */
#survey {
- display: none;
- max-width: 45em;
- padding: 0.5em 2em 0.5em 9em;
background: #b49cd3 url('lib/survey.png') no-repeat top 50% left 2em !important;
border: none !important;
- box-shadow: 1px 1px 5px #ccc;
- border-radius: 0.5em;
- box-sizing: border-box;
- color: black !important;
+ padding-left: 9em !important;
}
diff --git a/wiki/src/home.html b/wiki/src/home.html
index 4615be7..9a68164 100644
--- a/wiki/src/home.html
+++ b/wiki/src/home.html
@@ -15,7 +15,7 @@ translation of the label below is long and gets split into two lines. -->
</a>
</div>
-<a id="survey" href="https://survey.tails.boum.org/index.php/232773?lang=en">
+<a id="survey" class="random-message" href="https://survey.tails.boum.org/index.php/232773?lang=en" data-n="20">
<h2>Survey on <strong>file storage encryption</strong></h2>
@@ -26,4 +26,15 @@ only our team can access the data.</p>
</a>
+<a id="donate" class="random-message" href="https://tails.boum.org/donate?r=h" data-n="5">
+
+<p>Tails depends on donations from users like you to survive.<br/>
+<span class="underlined">But, not everyone can donate.</span> When you donate,
+you are offering to many others who need it, this precious tool that is
+Tails.</p>
+
+<p class="donate-button">Donate</p>
+
+</a>
+
[[!inline pages="news" raw="yes" sort="age"]]
diff --git a/wiki/src/home.js b/wiki/src/home.js
index 62da6d0..b4f6f77 100644
--- a/wiki/src/home.js
+++ b/wiki/src/home.js
@@ -2,14 +2,12 @@ document.addEventListener('DOMContentLoaded', function() {
document.title = "Tails";
- var n = 20; // Probability of displaying the survey button is 1/n
-
- function displaySurvey() {
- if(Math.floor(n * Math.random()) == 0) {
- document.getElementById("survey").style.display = "block";
+ var randomMessages = document.getElementsByClassName('random-message');
+ for (let i = 0; i < randomMessages.length; i++) {
+ var message = randomMessages[i]
+ if(Math.floor(message.dataset.n * Math.random()) == 0) {
+ message.style.display = "block";
}
}
- displaySurvey();
-
});