diff --git a/web/donate/donate.org b/web/donate/donate.org index 1320966..3c9c2ed 100644 --- a/web/donate/donate.org +++ b/web/donate/donate.org @@ -1,257 +1,257 @@ # -*- html -*- #+TITLE: GnuPG - Donate #+STARTUP: showall #+SETUPFILE: "../share/setup.inc" # # Note: Do not use relative links because this page is also used as a # template from cgi-bin/. Using https://www.gnupg.org/... is # fine as it is stripped before publishing. #+BEGIN_HTML <!--custom-page--> <!-- this disables all standard processing. --> <!-- bootstrap core and site css --> <link href="/share/3rdparty/bootstrap/bootstrap-gnupg.css" rel="stylesheet"> <link href="/share/campaign/campaign.css" rel="stylesheet"> <script defer src="/share/3rdparty/jquery/jquery.min.js"></script> <script defer src="/share/3rdparty/bootstrap/bootstrap.min.js"></script> <script defer src="/share/3rdparty/bootstrap/carousel.js"></script> <script defer src="/share/3rdparty/bs-autohidingnavbar.js"></script> <script defer src="/share/3rdparty/bcswipe.js"></script> <script defer src="/share/campaign/campaign.js"></script> </head> <body lang="<!--LANG-->"> <style> .help-inline { margin-bottom: 0; margin-top: 5px; } </style> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img class="navbar-brand" alt="GnuPG" src="/share/gnupg-lock-white-250x250.png"> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/donate">Back</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="camp-gutter container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1>Support GnuPG</h1> <p>To process your donation we need to collect some information. This information is only used for the purpose of the donation and no data will ever be send to any entity not directly involved in the donation process. Not giving a name makes the donation “anonymous” in that the name won’t be listed on the public thank you page. </p> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2"> <!--ERRORPANEL--> </div> </div> <form class="form-horizontal" role="form" action="/cgi-bin/procdonate.cgi" method="POST"> <input type="hidden" name="mode" value="main" /> <!-- Amount and currency input field --> <div class="form-group"> <label for="inputType" class="col-xs-12 col-sm-2 control-label"> Amount <!--ERR_AMOUNT--> </label> <div class="col-xs-5 col-sm-3"> <input type="text" class="form-control" name="amount" id="amountother" placeholder="" value=""/><!--AMOUNT--> </div> <div class="col-xs-7 col-sm-3 col-lg-2"> <select class="form-control" name="currency" id="currency"> <option value="EUR" selected="selected"><!--SEL_EUR-->Euro</option> <option value="USD" ><!--SEL_USD-->US Dollar</option> <option value="GBP" ><!--SEL_GBP-->British Pound</option> <option value="JPY" ><!--SEL_JPY-->Yen</option> </select> </div> </div> <!-- Custom amounts --> <div class="form-group"> <div class="col-sm-offset-2 col-sm-6"> <div class="btn-group btn-group-xs" role="group" aria-label="suggested amounts"> <a href="/cgi-bin/procdonate.cgi?mode=preset&s_amt=500&s_cur=eur" class="btn btn-default amount-btn-500">500 €</a> <a href="/cgi-bin/procdonate.cgi?mode=preset&s_amt=200&s_cur=eur" class="btn btn-default amount-btn-200">200 €</a> <a href="/cgi-bin/procdonate.cgi?mode=preset&s_amt=100&s_cur=eur" class="btn btn-default amount-btn-100">100 €</a> <a href="/cgi-bin/procdonate.cgi?mode=preset&s_amt=50&s_cur=eur" class="btn btn-default amount-btn-50">50 €</a> <a href="/cgi-bin/procdonate.cgi?mode=preset&s_amt=20&s_cur=eur" class="btn btn-default amount-btn-20">20 €</a> <a href="/cgi-bin/procdonate.cgi?mode=preset&s_amt=10&s_cur=eur" class="btn btn-default amount-btn-10">10 €</a> <a href="/cgi-bin/procdonate.cgi?mode=preset&s_amt=5&s_cur=eur" class="btn btn-default amount-btn-5">5 €</a> </div> <span class="help-block"> Suggested amounts. </span> </div> </div> <!-- Recurring --> <div class="form-group"> <label for="recur" class="col-sm-2 control-label">Recurring</label> <div class="col-sm-2"> <select class="form-control" name="recur" id="recur"> <option value="0" selected="selected"><!--RECUR_NONE-->Just once</option> <option value="12" ><!--RECUR_MONTH-->Monthly</option> <option value="4" ><!--RECUR_QUARTER-->Quarterly</option> <option value="1" ><!--RECUR_YEAR-->Yearly</option> </select> </div> </div> <!-- Pay using --> <div class="form-group"> <label for="paytype" class="col-sm-2 control-label"> Pay using <!--ERR_PAYTYPE--> </label> <div class="col-sm-6"> <div class="radio"> <label> <input type="radio" name="paytype" id="cc" value="cc" /><!--CHECK_CC--> Credit Card </label> </div> <div class="radio"> <label> <input type="radio" name="paytype" id="pp" value="pp" /><!--CHECK_PP--> PayPal - <span class="help-block help-inline"> + <span class="help-block help-inline" id="paypal-note"> Please note that in certain countries recurring donations are not possible with PayPal. </span> </label> </div> <div class="radio"> <label> <input type="radio" name="paytype" id="se" value="se" /><!--CHECK_SE--> SEPA (European bank transfer) </label> </div> <div class="radio"> <label> <input type="radio" name="paytype" id="bc" value="bc" /><!--CHECK_BC--> Bitcoin </label> </div> </div> </div> <!-- Name --> <div class="form-group"> <label for="name" class="col-sm-2 control-label"> Name <!--ERR_NAME--> <p class="text-muted"><small>(optional)</small></p> </label> <div class="col-sm-6"> <input type="text" class="form-control" name="name" id="f_name" placeholder="Name (optional)" value=""/><!--NAME--> <span class="help-block"> If you want to be listed on the <a href="https://www.gnupg.org/donate/kudos.html" >list of donors</a>, please enter your name as it shall appear there. </span> </div> </div> <!-- Email --> <div class="form-group"> <label for="mail" class="col-sm-2 control-label"> Email <!--ERR_MAIL--> <p class="text-muted"><small>(optional)</small></p> </label> <div class="col-sm-6"> <input type="email" class="form-control" name="mail" id="f_mail" placeholder="Email (optional)" value=""/><!--MAIL--> <span class="help-block"> In case of payment problems we may want to contact you, thus please enter your e-mail address. </span> </div> </div> <!-- Message --> <div class="form-group"> <label for="message" class="col-sm-2 control-label"> Message <p class="text-muted"><small>(optional)</small></p> </label> <div class="col-sm-6"> <textarea class="form-control" name="message" id="f_message" rows="4" ></textarea><!--MESSAGE--> <span class="help-block"> If you want to leave a message for us, please enter it here. </span> </div> </div> <div class="row"> <div class="col-sm-10 col-sm-offset-2"> <button type="submit" class="btn btn-primary btn-large" >Proceed to donation</button> </div> </div> </form> </div> <div class="camp-gutter container-fluid" id="camp-footer"> <div class="container"> <div class="row"> <div id="cpyright"> <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/"> <img alt="CC-BY-SA 4.0" style="border: 0" src="/share/cc-by-sa_80x15.png"/></a> This web page is Copyright 2017 The GnuPG Project and licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> Creative Commons Attribution-ShareAlike 4.0 International License</a>. See <a href="/copying.html">copying</a> for details. </div> </div> </div> </div> </body> #+END_HTML diff --git a/web/share/campaign/campaign.js b/web/share/campaign/campaign.js index ba931c5..f71857b 100644 --- a/web/share/campaign/campaign.js +++ b/web/share/campaign/campaign.js @@ -1,145 +1,157 @@ /* Javascript for campaign related pages * * This code is Copyright 2017 The GnuPG Project and licensed * under a Creative Commons Attribution-ShareAlike 4.0 International * License. See the file copying.org for details. */ /* For mobile devices in landscape orientation, the navbar is in the way of the video. So hide it automatically then. */ $(document).ready(function() { $(".navbar-fixed-top").autoHidingNavbar({ disableAutohide: true, hideOffset: 20 }); check_autohide = function(event) { let hide = (screen.width < 768) && (screen.height < screen.width); $(".navbar-fixed-top").autoHidingNavbar("setDisableAutohide", !hide); if (!hide) { $(".navbar-fixed-top").autoHidingNavbar("show"); } }; $(window).on('orientationchange', check_autohide); check_autohide(); }); /* Random starting points for the testimonial carousel. */ $(document).ready(function() { let nr_items_lg = 3 * $("#myCarousel div.item").length; let nr_items_md = 2 * $("#myCarouselMedium div.item").length; let nr_items_xs = 1 * $("#myCarouselSmall div.item").length; let nr_items = Math.min(nr_items_lg, nr_items_md, nr_items_xs); let active_item = Math.trunc(nr_items * Math.random()); let active_slide_lg = Math.trunc(active_item / 3); let active_slide_md = Math.trunc(active_item / 2); let active_slide_xs = Math.trunc(active_item / 1); $("#myCarousel div.item").removeClass("active"); $("#myCarouselMedium div.item").removeClass("active"); $("#myCarouselSmall div.item").removeClass("active"); $("#myCarousel div.item").eq(active_slide_lg).addClass("active"); $("#myCarouselMedium div.item").eq(active_slide_md).addClass("active"); $("#myCarouselSmall div.item").eq(active_slide_xs).addClass("active"); }); /* Advance carousel by swiping. */ $(document).ready(function() { $('.carousel').bcSwipe({ threshold: 50 }); }); /* Fill donation amounts w/ javascript if possible. */ $(document).ready(function() { let vals = ["500", "200", "100", "50", "20", "10", "5"]; for (let idx = 0; idx < vals.length; ++idx) { let value = vals[idx]; $(".amount-btn-" + value.toString()).attr("href", "#"); $(".amount-btn-" + value.toString()).on("click", function(event) { $("#amountother").prop("value", value.toString()); $("#currency option").prop("selected", false); $("#currency option[value='EUR']").prop("selected", true); $("#recur option").prop("selected", false); $("#recur option[value='12']").prop("selected", true); event.preventDefault(); }); } }); function get_param_from_url(name) { let params = location.search.substring(1); // Snip away the ? params = params.split('&'); let idx = 0; for (; idx < params.length; idx++) { let param = params[idx].split('='); if (param[0] != name) { return; } if (param.length > 1) { return decodeURIComponent(param[1]); } return ""; } } /* Defer loading Youtube iframe until the user clicks on the video. */ $(document).ready(function() { let YTID = { "main": "wNHhkntqklg", "thenmozhi": "2V-6JdTsIns", "sze": "tKPMof5ptc0", "sheera": "zwPaVA4vhDM", "seanus": "H6iO_MkOICM", "noah": "neibFsqgxgw", "michael": "w4PY1ihLm0w", "matt": "MWxhdPw9I8c", "lisa": "Vd8sz5X-1og", "john": "xdVHQhWrIro", "jason": "RtvlfTiSEMc", "geoffrey": "Y4yat43CvEc", "daniel": "coFFCJlMRjk", "cindy": "kPSEYvmFLWY", "benjamin": "atFz16nInIs", "arthur": "Js_OqRLm9F4", "andrew": "DXiU9wewjn4", "andre": "bcNLlWqZ9d0", "alex": "1OMJWpdl0DA" }; /* For the video preview, we use this for devices without hover events. */ if ("ontouchstart" in document.documentElement) { $("body").addClass("touch"); } let wanted_yt_id = get_param_from_url('play'); $(".camp-video").each(function() { let yt_ids = $(this).data("embed").split(","); let yt_id_idx = yt_ids.indexOf(wanted_yt_id); if (yt_id_idx != -1) { $(this).data("embed", wanted_yt_id); $(this).children("img").attr("src", "/share/campaign/img/thumbs/" + wanted_yt_id + ".jpg"); } }); /* To download the thumbs in share/campaign/img/thumbs: for f in YTID1 YTID2 ...; do wget -O $f.jpg http://i1.ytimg.com/vi/$f/maxresdefault.jpg; done # or hqdefault.jpg */ /* Click handler for all videos. */ $(".camp-video").one("click", function() { let yt_id = $(this).data("embed").split(",")[0]; yt_id = YTID[yt_id]; // What if key does not exist? let yt_list = $(this).data("embed-list"); let extra_parms = ""; if (yt_list) { extra_parms = "&list=" + yt_list; } if (screen.width < 768) { extra_parms = extra_parms + "&cc_load_policy=1" } $(this).html('<iframe class="embed-responsive-item" allowfullscreen src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1&modestbranding=1&rel=0' + extra_parms + '"></iframe>'); }); }); + +/* hide the note about recurring donations under the Paypal option. */ +$(document).ready(function() { + $("#recur").change(function() { + if (this.value !== 0) { + $("#paypal-note").hide(); + } + else { + $("#paypal-note").show(); + } + }); +});