Commit 5735211c authored by sajolida's avatar sajolida
Browse files

Merge branch 'web/17702-newsletter-opt-in'

parents e6de3aef 0133fff8
......@@ -78,7 +78,6 @@
#donate-paypal-button {
width: 100%;
margin-top: 0.5em;
border: solid 3px white;
}
......@@ -105,11 +104,11 @@
}
#currency, #dollar-amounts, #euro-amounts, #frequency-buttons,
#frequency-explanation #donate-paypal-button, .tax-deductible {
#frequency-explanation, #donate-paypal-button, .tax-deductible {
display: inline-block;
}
#frequency-buttons, #frequency-explanation, #require-paypal, #paypay-with-js .tax-deductible {
#frequency-buttons, #frequency-explanation, #require-paypal, #paypal-with-js .tax-deductible, #newsletter {
padding: 0 4px;
}
......@@ -147,7 +146,7 @@
.tax-deductible {
font-size: 11px;
margin-top: 9px;
color: #555;
}
.amounts .btn {
......@@ -168,6 +167,29 @@
padding: 4px;
}
/* Newsletter */
#newsletter {
margin-top: 1.5em;
min-height: 3em;
}
#newsletter label {
margin-bottom: 0;
}
#email {
display: none;
font-size: 11px;
color: #555;
margin-bottom: 0;
}
p.email {
font-size: 11px;
color: #555;
}
/* Version without JavaScript */
#paypal-without-js h2 {
......@@ -186,8 +208,6 @@
#paypal-without-js form label {
font-size: 12px;
margin-left: 0.5em;
margin-right: 0.5em;
}
/* Other ways */
......
......@@ -201,7 +201,8 @@ permitted by law.</strong></p>
<input type="hidden" name="business" value="tailsriseuplabs@riseup.net" id="business"/>
<input type="hidden" name="currency_code" value="USD" id="currency_code"/>
<input type="hidden" name="item_name" value="Donation to Tails"/>
<input type="hidden" name="custom" value="forced"/>
<input type="hidden" name="custom" id="custom"/>
<input type="hidden" name="no_note" value="1"/>
<!-- Note for translators: adapt the URLs to return to the page in your language. -->
......@@ -292,9 +293,9 @@ permitted by law.</strong></p>
</div>
<div id="frequency-buttons">
<div class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="one-time"/>One-time</div>
<div class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="monthly"/>Monthly</div>
<div class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="yearly"/>Yearly</div>
<label class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="one-time"/>One-time</label>
<label class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="monthly"/>Monthly</label>
<label class="col-sm-4 col-xs-12"><input type="radio" name="frequency" id="yearly"/>Yearly</label>
</div>
<div id="frequency-explanation">
......@@ -303,12 +304,17 @@ permitted by law.</strong></p>
link="no" class="paypal-inline" alt="PayPal"]] account.
</div>
<div id="newsletter">
<label>
<input type="checkbox" id="opt-in"/>I want to receive a newsletter 2&ndash;3 times a year.
</label>
<p id="email">We will use the email address provided in the PayPal form.</p>
</div>
<div id="donate-paypal-button">
<button class="btn btn-primary btn-lg btn-block col-md-12">Donate</button>
</div>
</form>
<p id="dollar-tax" class="tax-deductible donate-dollars">Your donation goes entirely to Tails
and will be handled by Riseup Labs which is a 501(c)(3) non-profit organization
in the USA.<br/><strong>Donations are [[!toggle id="tax-deductible" text="tax-deductible"]] to the full extent
......@@ -319,6 +325,8 @@ and will be handled by CCT which is a non-profit organization
in Germany.<br/><strong>Donations are [[!toggle id="tax-deductible" text="tax-deductible"]] to the full extent
permitted by law.</strong></p>
</form>
[[!toggleable id="tax-deductible" text="""
<p>If you need a donation receipt, contact us at<br/>
<a href="mailto:tails-fundraising@boum.org">tails-fundraising@boum.org</a>.</p>
......@@ -358,18 +366,20 @@ link="no" class="paypal-inline" alt="PayPal"]] account.</p>
<input type="hidden" name="src" value="1"/>
<input type="hidden" name="p3" value="1"/>
<input type="radio" name="a3" value="5" id="sub5" checked="checked"/><label for="sub5">$5</label>
<input type="radio" name="a3" value="10" id="sub10"/><label for="sub10">$10</label>
<input type="radio" name="a3" value="25" id="sub25"/><label for="sub25">$25</label>
<input type="radio" name="a3" value="50" id="sub50"/><label for="sub50">$50</label>
<label for="sub5"><input type="radio" name="a3" value="5" id="sub5" checked="checked"/>$5</label>
<label for="sub10"><input type="radio" name="a3" value="10" id="sub10"/>$10</label>
<label for="sub25"><input type="radio" name="a3" value="25" id="sub25"/>$25</label>
<label for="sub50"><input type="radio" name="a3" value="50" id="sub50"/>$50</label>
<br/>
<input type="radio" name="a3" value="100" id="sub100"/><label for="sub100">$100</label>
<input type="radio" name="a3" value="150" id="sub150"/><label for="sub150">$150</label>
<input type="radio" name="a3" value="500" id="sub500"/><label for="sub500">$200</label>
<label for="sub100"><input type="radio" name="a3" value="100" id="sub100"/>$100</label>
<label for="sub150"><input type="radio" name="a3" value="150" id="sub150"/>$150</label>
<label for="sub500"><input type="radio" name="a3" value="500" id="sub500"/>$200</label>
<br/>
<input type="radio" name="t3" value="M" id="sub_m" checked="checked"/><label for="sub_m">Monthly</label>
<input type="radio" name="t3" value="Y" id="sub_y"/><label for="sub_y">Yearly</label>
<label for="sub_m"><input type="radio" name="t3" value="M" id="sub_m" checked="checked"/>Monthly</label>
<label for="sub_y"><input type="radio" name="t3" value="Y" id="sub_y"/>Yearly</label>
<br/>
<label><input type="checkbox" name="custom"/>I want to receive a newsletter 2&ndash;3 times a year.</label>
<p class="email">You will provide your email address in the PayPal form.</p>
<input type="submit" value="Donate"/>
</form>
......@@ -393,16 +403,18 @@ link="no" class="paypal-inline" alt="PayPal"]] account.</p>
<!-- Note for translators: adapt the value of 'lc' to your language. -->
<input type="hidden" name="lc" value="US"/>
<input type="radio" name="amount" value="5" id="pp_5" checked="checked"/><label for="pp_5">$5</label>
<input type="radio" name="amount" value="10" id="pp_10"/><label for="pp_10">$10</label>
<input type="radio" name="amount" value="25" id="pp_25"/><label for="pp_25">$25</label>
<input type="radio" name="amount" value="50" id="pp_50"/><label for="pp_50">$50</label>
<label for="pp_5"><input type="radio" name="amount" value="5" id="pp_5" checked="checked"/>$5</label>
<label for="pp_10"><input type="radio" name="amount" value="10" id="pp_10"/>$10</label>
<label for="pp_25"><input type="radio" name="amount" value="25" id="pp_25"/>$25</label>
<label for="pp_50"><input type="radio" name="amount" value="50" id="pp_50"/>$50</label>
<br/>
<input type="radio" name="amount" value="100" id="pp_100"/><label for="pp_100">$100</label>
<input type="radio" name="amount" value="150" id="pp_150"/><label for="pp_150">$150</label>
<input type="radio" name="amount" value="200" id="pp_200"/><label for="pp_200">$200</label>
<input type="radio" name="amount" value="" id="pp_cust"/><label for="pp_cust">Custom amount</label>
<label for="pp_100"><input type="radio" name="amount" value="100" id="pp_100"/>$100</label>
<label for="pp_150"><input type="radio" name="amount" value="150" id="pp_150"/>$150</label>
<label for="pp_200"><input type="radio" name="amount" value="200" id="pp_200"/>$200</label>
<label for="pp_cust"><input type="radio" name="amount" value="" id="pp_cust"/>Custom amount</label>
<br/>
<label><input type="checkbox" name="custom"/>I want to receive a newsletter 2&ndash;3 times a year.</label>
<p class="email">You will provide your email address in the PayPal form.</p>
<input type="submit" value="Donate"/>
</form>
......@@ -416,82 +428,6 @@ permitted by law.</strong></p>
<a href="mailto:tails-fundraising@boum.org">tails-fundraising@boum.org</a>.</p>
</div> <!-- #dollars-without-js -->
<!--
<p><br/></p>
-->
<!-- Note for translators: the following parts need to be translated:
- https://tails.boum.org/donate/thanks/
- https://tails.boum.org/donate/canceled/
- US -->
<!--
<div id="euros-without-js">
<h2>Donate in euros</h2>
<p id="euro-tax" class="tax-deductible">Your donation goes entirely to Tails
and will be handled by CCT which is a non-profit organization
in Germany.<br/><strong>Donations are tax-deductible to the full extent
permitted by law.</strong></p>
<h3>Recurring donation</h3>
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_xclick-subscriptions"/>
<input type="hidden" name="business" value="tails@torservers.net"/>
<input type="hidden" name="currency_code" value="EUR" id="currency_code"/>
<input type="hidden" name="item_name" value="Donation to Tails"/>
<input type="hidden" name="no_note" value="1"/>
<input type="hidden" name="return" value="https://tails.boum.org/donate/thanks/" class="return-url"/>
<input type="hidden" name="cancel_return" value="https://tails.boum.org/donate/canceled/" class="return-url"/>
<input type="hidden" name="lc" value="US"/>
<input type="hidden" name="src" value="1"/>
<input type="hidden" name="p3" value="1"/>
<input type="radio" name="a3" value="5" id="sub5" checked="checked"/><label for="sub5">5€</label>
<input type="radio" name="a3" value="10" id="sub10"/><label for="sub10">10€</label>
<input type="radio" name="a3" value="20" id="sub20"/><label for="sub20">20€</label>
<input type="radio" name="a3" value="50" id="sub50"/><label for="sub50">50€</label>
<input type="radio" name="a3" value="100" id="sub100"/><label for="sub100">100€</label>
<input type="radio" name="a3" value="250" id="sub250"/><label for="sub250">250€</label>
<input type="radio" name="a3" value="500" id="sub500"/><label for="sub500">500€</label>
<br/>
<input type="radio" name="t3" value="M" id="sub_m" checked="checked"/><label for="sub_m">Monthly</label>
<input type="radio" name="t3" value="Y" id="sub_y"/><label for="sub_y">Yearly</label>
<br/>
<input type="submit" value="Donate"/> (Requires a [[!img paypal-inline.png link="no" class="paypal-inline" alt="PayPal"]] account.)
</form>
<h3>One-time donation</h3>
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_donations"/>
<input type="hidden" name='business' value="tails@torservers.net"/>
<input type="hidden" name="currency_code" value="EUR" id="currency_code"/>
<input type="hidden" name="item_name" value="Donation to Tails"/>
<input type="hidden" name="no_note" value="1"/>
<input type="hidden" name="return" value="https://tails.boum.org/donate/thanks/" class="return-url"/>
<input type="hidden" name="cancel_return" value="https://tails.boum.org/donate/canceled/" class="return-url"/>
<input type="hidden" name="lc" value="US"/>
<input type="radio" name="amount" value="5" id="pp_5" checked="checked"/><label for="pp_5">5€</label>
<input type="radio" name="amount" value="10" id="pp_10"/><label for="pp_10">10€</label>
<input type="radio" name="amount" value="20" id="pp_20"/><label for="pp_20">20€</label>
<input type="radio" name="amount" value="50" id="pp_50"/><label for="pp_50">50€</label>
<input type="radio" name="amount" value="100" id="pp_100"/><label for="pp_100">100€</label>
<input type="radio" name="amount" value="" id="pp_cust"/><label for="pp_cust">Custom amount</label>
<br/>
<input type="submit" value="Donate"/>
</form>
</div>
-->
</div> <!-- #paypal-without-js -->
......
......@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
// A/B testing
let variant;
if (Math.round(Date.now() / 1000 / 60 / 60 / 5) % 2 == 0) { // divide time since epoch by slots of 5 hours
if (false) { // Math.round(Date.now() / 1000 / 60 / 60 / 5) % 2 == 0) { // divide time since epoch by slots of 5 hours
variant = "default";
document.getElementById("variant-forced").remove();
} else {
......@@ -28,11 +28,20 @@ document.addEventListener('DOMContentLoaded', function() {
}
}
function getCustom() {
return JSON.parse(document.getElementById("custom").value);
}
function setCustom(custom) {
document.getElementById("custom").value = JSON.stringify(custom);
}
setCustom({});
// Show version with JavaScript
show(document.getElementById('paypal-with-js'));
hide(document.getElementById('paypal-without-js'));
// default donation is in $
// Default donation is in $
toggle(document.getElementsByClassName('donate-dollars'), "show");
toggle(document.getElementsByClassName('donate-euros'), "hide");
......@@ -67,7 +76,7 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('t3').value = 'Y';
}
// toggle button groups
// Toggle button groups
var element = document.getElementsByClassName('btn');
for (let i = 0; i < element.length; i++) {
element[i].addEventListener('click', function() {
......@@ -79,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
// change donation values on change and on click
// Change donation values on change and on click
var defaultvalue = 5;
var belement = document.getElementsByClassName('btn-amount');
for (let i = 0; i < belement.length; i++) {
......@@ -144,10 +153,27 @@ document.addEventListener('DOMContentLoaded', function() {
}
if (!frequency) {
e.preventDefault();
console.log(document.getElementById("donate-paypal-button").classList.remove("active"));
document.getElementById("donate-paypal-button").classList.remove("active");
document.getElementById("frequency-buttons").classList.add("shake");
}
}
}
// Newsletter subscription
function newsletterSubscription() {
var custom = getCustom();
if (document.getElementById("opt-in").checked) {
custom.newsletter = true;
show(document.getElementById("email"));
} else {
custom.newsletter = false;
hide(document.getElementById("email"));
}
setCustom(custom);
}
newsletterSubscription();
document.getElementById("opt-in").onclick = function(e) {
newsletterSubscription();
}
});
......@@ -293,23 +293,16 @@ table.img caption, .image .caption {
/* Forms */
form.donation label {
margin-left: 0.5em;
margin-right: 1em;
}
form.donation br {
margin-bottom: 0.5em;
}
form.donation {
margin-left: 1em;
margin-top: -1em;
margin-bottom: 2em;
label {
display: block;
margin-bottom: 0;
}
label.block {
margin-top: 1em;
input[type="checkbox"], input[type="radio"] {
margin-right: 5px !important;
vertical-align: bottom;
position: relative;
top: -1px;
}
/* Layout */
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment