src/templates/donate/donate.html

   1 {% extends "../base.html" %}
   2
   3 {% block title %}{{ _("Donate") }}{% end block %}
   4
   5 {% block container %}
   6         {% set amounts = (10, 25, 50, 75, 100, 250) %}
   7
   8         <section>
   9                 <div class="container">
  10                         <div class="row">
  11                                 <div class="col col-lg-6">
  12                                         <h1 class="display-2">{{ _("Donate") }}</h1>
  13
  14                                         <p>
  15                                                 {{ _("Please support our project with your donation today") }}
  16                                         </p>
  17                                 </div>
  18                         </div>
  19                 </div>
  20         </section>
  21
  22         <section class="inverse">
  23                 <div class="container">
  24                         <div class="row justify-content-center">
  25                                 <div class="col-12 col-md-8">
  26                                         <form action="" method="POST">
  27                                                 {% raw xsrf_form_html() %}
  28
  29                                                 <div class="row">
  30                                                         <div class="col-12">
  31                                                                 <h6>Frequency</h6>
  32
  33                                                                 <input type="hidden" name="frequency" value="{{ frequency }}">
  34
  35                                                                 <div class="custom-control custom-radio custom-control-inline">
  36                                                                         <input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-one-time"
  37                                                                                 value="one-time" {% if frequency == "one-time" %}checked{% end %}>
  38                                                                         <label class="custom-control-label" for="frequency-one-time">{{ _("One Time") }}</label>
  39                                                                 </div>
  40
  41                                                                 <div class="custom-control custom-radio custom-control-inline">
  42                                                                         <input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-monthly"
  43                                                                                 value="monthly" {% if frequency == "monthly" %}checked{% end %}>
  44                                                                         <label class="custom-control-label" for="frequency-monthly">{{ _("Monthly") }}</label>
  45                                                                 </div>
  46                                                         </div>
  47                                                 </div>
  48
  49                                                 <div class="mt-5 mb-3 p-4 bg-light rounded">
  50                                                         <h6>{{ _("Choose an amount") }}</h6>
  51
  52                                                         <input type="hidden" name="currency" value="{{ currency }}">
  53
  54                                                         <div class="btn-group-toggle flex-wrap text-center mb-3" data-toggle="buttons">
  55                                                                 {% for a in amounts %}
  56                                                                         <label class="btn btn-outline-primary btn-lg mb-2">
  57                                                                                 <input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
  58                                                                                         autocomplete="off"> <span class="EUR">€</span><span class="USD">$</span>{{ a }}
  59                                                                         </label>
  60                                                                 {% end %}
  61                                                         </div>
  62
  63                                                         <p class="text-center small">
  64                                                                 <a data-toggle="collapse" href="#more" role="button">
  65                                                                         {{ _("More Options") }}
  66                                                                 </a>
  67                                                         </p>
  68
  69                                                         <div class="collapse" id="more">
  70                                                                 <div class="form-group row">
  71                                                                         <label class="col-sm-5 col-form-label col-form-label-lg">
  72                                                                                 Enter your own
  73                                                                         </label>
  74
  75                                                                         <div class="col-sm-7">
  76                                                                                 <div class="input-group input-group-lg">
  77                                                                                         <div class="input-group-prepend">
  78                                                                                                 <span class="input-group-text EUR">€</span>
  79                                                                                                 <span class="input-group-text USD">$</span>
  80                                                                                         </div>
  81
  82                                                                                         <input type="number" class="form-control form-control-lg" name="amount" min="5" step="0.01"
  83                                                                                                 {% if amount %}value="{{ "%.2f" % amount }}"{% end %}>
  84                                                                                 </div>
  85                                                                         </div>
  86                                                                 </div>
  87
  88                                                                 <p class="small text-right">
  89                                                                         <a class="toggleCurrency EUR" href="#">{{ _("Prefer donating in US Dollar?") }}</a>
  90                                                                         <a class="toggleCurrency USD" href="#">{{ _("Prefer donating in Euro?") }}</a>
  91                                                                 </p>
  92                                                         </div>
  93
  94                                                         <div class="row my-5">
  95                                                                 <div class="col d-flex flex-column">
  96                                                                         <div class="form-row">
  97                                                                                 <div class="col">
  98                                                                                         <div class="custom-control custom-radio custom-control-inline mb-3">
  99                                                                                                 <input class="custom-control-input" type="radio" name="title" id="mr" value="Mr." checked>
 100                                                                                                 <label class="custom-control-label" for="mr">{{ _("Mr.") }}</label>
 101                                                                                         </div>
 102                                                                                         <div class="custom-control custom-radio custom-control-inline mb-3">
 103                                                                                                 <input class="custom-control-input" type="radio" name="title" id="mrs" value="Mrs.">
 104                                                                                                 <label class="custom-control-label" for="mrs">{{ _("Mrs.") }}</label>
 105                                                                                         </div>
 106                                                                                 </div>
 107                                                                         </div>
 108
 109                                                                         <div class="form-row">
 110                                                                                 <div class="col-sm-6">
 111                                                                                         <div class="form-group">
 112                                                                                                 <input type="text" class="form-control" name="first_name"
 113                                                                                                         placeholder="{{ _("First Name" )}}" required
 114                                                                                                         {% if first_name %}value="{{ first_name }}"{% end %}>
 115                                                                                         </div>
 116                                                                                 </div>
 117
 118                                                                                 <div class="col-sm-6">
 119                                                                                         <div class="form-group">
 120                                                                                                 <input type="text" class="form-control" name="last_name"
 121                                                                                                         placeholder="{{ _("Last Name" )}}" required
 122                                                                                                         {% if last_name %}value="{{ last_name }}"{% end %}>
 123                                                                                         </div>
 124                                                                                 </div>
 125                                                                         </div>
 126
 127                                                                         <div class="form-group">
 128                                                                                 <input type="email" class="form-control" name="email"
 129                                                                                         placeholder="{{ _("Email Address") }}" required>
 130                                                                         </div>
 131
 132                                                                         <div class="form-group">
 133                                                                                 <input type="text" class="form-control" name="street1"
 134                                                                                         placeholder="{{ _("Address Line 1") }}" required>
 135                                                                         </div>
 136
 137                                                                         <div class="form-group">
 138                                                                                 <input type="text" class="form-control" name="street2"
 139                                                                                         placeholder="{{ _("Address Line 2") }}">
 140                                                                         </div>
 141
 142                                                                         <div class="form-row">
 143                                                                                 <div class="col-sm-6">
 144                                                                                         <div class="form-group">
 145                                                                                                 <input type="text" class="form-control" name="city"
 146                                                                                                         placeholder="{{ _("City") }}" required>
 147                                                                                         </div>
 148                                                                                 </div>
 149
 150                                                                                 <div class="col-sm-6">
 151                                                                                         <div class="form-group">
 152                                                                                                 <input type="text" class="form-control" name="post_code"
 153                                                                                                         placeholder="{{ _("Post Code") }}" required>
 154                                                                                         </div>
 155                                                                                 </div>
 156                                                                         </div>
 157
 158                                                                         <div class="form-row">
 159                                                                                 <div class="col-sm-6">
 160                                                                                         <div class="form-group">
 161                                                                                                 <select class="form-control" name="country_code" required>
 162                                                                                                         <option value="">- {{ _("Country") }} -</option>
 163
 164                                                                                                         {% for c in countries %}
 165                                                                                                                 <option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
 166                                                                                                         {% end %}
 167                                                                                                 </select>
 168                                                                                         </div>
 169                                                                                 </div>
 170
 171                                                                                 <div class="col-sm-6">
 172                                                                                         <div class="form-group">
 173                                                                                                 <input type="text" class="form-control" name="state"
 174                                                                                                         placeholder="{{ _("State (optional)") }}">
 175                                                                                         </div>
 176                                                                                 </div>
 177                                                                         </div>
 178
 179                                                                         <input type="submit" class="btn btn-primary btn-lg"
 180                                                                                 id="donate" value="{{ _("Donate Now") }}">
 181                                                                 </div>
 182                                                         </div>
 183
 184                                                         <div class="row">
 185                                                                 <div class="col d-flex justify-content-around text-muted">
 186                                                                         <span class="pf pf-2x pf-american-express"></span>
 187                                                                         <span class="pf pf-2x pf-mastercard-alt"></span>
 188                                                                         <span class="pf pf-2x pf-visa"></span>
 189                                                                         <span class="pf pf-2x pf-sepa"></span>
 190                                                                         <span class="pf pf-2x pf-paypal"></span>
 191                                                                 </div>
 192                                                         </div>
 193
 194                                                         <div class="modal fade" tabindex="-1" role="dialog" id="modal-monthly-suggestions" aria-hidden="true">
 195                                                                 <div class="modal-dialog modal-dialog-centered" role="document">
 196                                                                         <div class="modal-content">
 197                                                                                 <div class="modal-header">
 198                                                                                         <h5 class="modal-title">{{ _("Would you like to support us monthly?") }}</h5>
 199
 200                                                                                         <button type="button" class="close" data-dismiss="modal" aria-label="{{ _("Close") }}">
 201                                                                                                 <span aria-hidden="true">&times;</span>
 202                                                                                         </button>
 203                                                                                 </div>
 204
 205                                                                                 <div class="modal-body">
 206                                                                                         <p class="mb-4">
 207                                                                                                 {{ _("Long-term donations are an even better investment into our project, create lasting change for everyone who is working on the project and make IPFire even better!") }}
 208                                                                                         </p>
 209
 210                                                                                         <div class="row mb-4">
 211                                                                                                 {% for factor, default in ((3, False), (2, True), (1, False)) %}
 212                                                                                                         <div class="col d-flex align-items-center">
 213                                                                                                                 <button type="submit"
 214                                                                                                                                 class="btn btn-primary btn-block {% if default %}btn-lg{% else %}btn-sm{% end %} monthly-amount-suggestion"
 215                                                                                                                                 data-factor="{{ factor }}" data-amount="">
 216                                                                                                                         <span class="EUR">€</span><span class="USD">$</span><span class="suggested-amount"></span>
 217                                                                                                                         <br>
 218                                                                                                                         <small>/ {{ _("month") }}</small>
 219                                                                                                                 </button>
 220                                                                                                         </div>
 221                                                                                                 {% end %}
 222                                                                                         </div>
 223
 224                                                                                         <button type="submit" class="btn btn-secondary btn-block">
 225                                                                                                 Donate <span class="EUR">€</span><span class="USD">$</span><span class="amount"></span> once
 226                                                                                         </button>
 227                                                                                 </div>
 228                                                                         </div>
 229                                                                 </div>
 230                                                         </div>
 231                                                 </div>
 232
 233                                                 <p class="small text-muted mb-0">
 234                                                         The organization you will be donating to is Lightning Wire Labs GmbH who is
 235                                                         kindly handling donations for the IPFire project.
 236                                                         After clicking "Donate Now", you will be redirected to Lightning Wire Labs
 237                                                         where you will be able to complete the transaction.
 238                                                 </p>
 239                                         </form>
 240                                 </div>
 241                         </div>
 242                 </div>
 243         </section>
 244
 245         <section>
 246                 <div class="container">
 247                         <div class="row justify-content-center">
 248                                 <div class="col-12 col-md-8">
 249                                         <h5>Why should I donate?</h5>
 250
 251                                         <p>
 252                                                 At IPFire, we are working hard to provide you with a free firewall distribution
 253                                                 that is like no other. We release updates regularly and enhance functionality
 254                                                 to make IPFire more secure, faster and easier to use.
 255                                         </p>
 256
 257                                         <p>
 258                                                 To achieve our high standards that we have set for ourselves, we need your help.
 259
 260                                                 Only with your donation, we can get the right tools, people and utilities that
 261                                                 we need to make our work most efficient and reach our maximum potential.
 262
 263                                                 Only with your donation, we can achieve our vision to make the Internet a safer
 264                                                 place that is fair for everyone and giving equal opportunities.
 265                                         </p>
 266
 267                                         <h5>How much should I give?</h5>
 268
 269                                         <p>
 270                                                 We are grateful for every single donation, but of course, we appreciate
 271                                                 if you help us as much as you can.
 272                                         </p>
 273
 274                                         <p>
 275                                                 We rely on steady contributions from companies to keep the project healthy
 276                                                 and encourage them to set up a monthly donation.
 277                                         </p>
 278
 279                                         <div class="faq">
 280                                                 <h5>Frequently Asked Questions</h5>
 281
 282                                                 <p>
 283                                                         <a data-toggle="collapse" href="#faq-bank-transfer">
 284                                                                 Do you accept bank transfer via SEPA?
 285                                                         </a>
 286                                                 </p>
 287
 288                                                 <div class="collapse" id="faq-bank-transfer">
 289                                                         <p>
 290                                                                 We do accept direct transfers through SEPA. These are our bank details:
 291                                                         </p>
 292
 293                                                         <dl>
 294                                                                 <dt>Bank Account Owner</dt>
 295                                                                 <dd>IPFire Project</dd>
 296
 297                                                                 <dt>IBAN</dt>
 298                                                                 <dd>DE76 3605 0105 1010 8206 84</dd>
 299
 300                                                                 <dt>BIC</dt>
 301                                                                 <dd>SPESDE3EXXX</dd>
 302                                                         </dl>
 303                                                 </div>
 304
 305                                                 <p>
 306                                                         <a data-toggle="collapse" href="#faq-address">
 307                                                                 Why do you need my address in order to process a donation?
 308                                                         </a>
 309                                                 </p>
 310
 311                                                 <div class="collapse" id="faq-address">
 312                                                         <p>
 313                                                                 We understand that your privacy is very important.
 314                                                         </p>
 315
 316                                                         <p>
 317                                                                 We ask for a minimum amount of information required to process
 318                                                                 credit card donations, including billing addresses.
 319                                                                 This allows our payment processor to verify your identity,
 320                                                                 process your payment, and prevent fraudulent charges to your credit card.
 321                                                         </p>
 322
 323                                                         <p>
 324                                                                 We keep your information private - if you have questions, please refer to
 325                                                                 Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
 326                                                         </p>
 327
 328                                                         <p>
 329                                                                 If you would rather not fill in your information on our online donation form,
 330                                                                 you can send your donation via SEPA bank transfer.
 331                                                         </p>
 332                                                 </div>
 333
 334                                                 <p>
 335                                                         <a data-toggle="collapse" href="#faq-credit-card">
 336                                                                 I am concerned about losing my credit card details
 337                                                         </a>
 338                                                 </p>
 339
 340                                                 <div class="collapse" id="faq-credit-card">
 341                                                         <p>
 342                                                                 Credit card fraud is a serious and common problem.
 343                                                                 To avoid that you and we fall victim of that, we comply with
 344                                                                 <a href="https://en.wikipedia.org/wiki/Payment_Card_Industry_Data_Security_Standard">PCI DSS</a>,
 345                                                                 which is mandatory in Europe.
 346                                                         </p>
 347
 348                                                         <p>
 349                                                                 That means that we never handle any credit card data
 350                                                                 or store it on our systems. The entire transaction
 351                                                                 is securely handled by our payment provider and our
 352                                                                 systems are regularly audited to ensure that we
 353                                                                 implement this standard correctly.
 354                                                         </p>
 355                                                 </div>
 356
 357                                                 <p>
 358                                                         <a data-toggle="collapse" href="#faq-tax-deduction">
 359                                                                 Is my donation tax deductible?
 360                                                         </a>
 361                                                 </p>
 362
 363                                                 <div class="collapse" id="faq-tax-deduction">
 364                                                         <p>
 365                                                                 IPFire is not registered as a charitable organization and therefore donations
 366                                                                 are not tax deductible in Germany or the European Union.
 367                                                         </p>
 368
 369                                                         <p>
 370                                                                 For donors outside of the European Union, please consult your tax advisor
 371                                                                 about whether your donation is tax deductible.
 372                                                         </p>
 373                                                 </div>
 374
 375                                                 <p>
 376                                                         <a data-toggle="collapse" href="#faq-cc">
 377                                                                 What will be charged to my credit card?
 378                                                         </a>
 379                                                 </p>
 380
 381                                                 <div class="collapse" id="faq-cc">
 382                                                         <p>
 383                                                                 We are based in Germany. Donations by credit card from other countries
 384                                                                 my be subject to an international payment fee charged by your credit card issuer.
 385                                                                 This is usually a small fee around 1%, but please check with your bank
 386                                                                 before donating.
 387                                                         </p>
 388
 389                                                         <p>
 390                                                                 If you consider this charge too high, please consider using SEPA direct
 391                                                                 Debit or Bank Transfer if you can.
 392                                                                 Even with this charge, it is a lot cheaper than paying the higher processing
 393                                                                 fees of other payment services like PayPal which keep a lot more of the
 394                                                                 donation to themselves.
 395                                                         </p>
 396                                                 </div>
 397
 398                                                 <p>
 399                                                         <a data-toggle="collapse" href="#faq-cancel">
 400                                                                 How do I cancel or change my recurring donation?
 401                                                         </a>
 402                                                 </p>
 403
 404                                                 <div class="collapse" id="faq-cancel">
 405                                                         <p>
 406                                                                 Your credit card statements or bank statements will contain a link
 407                                                                 that you can follow to cancel your donation at any time.
 408                                                         </p>
 409                                                 </div>
 410
 411                                                 <p>
 412                                                         <a data-toggle="collapse" href="#faq-email">
 413                                                                 Who can I email directly with questions about donating?
 414                                                         </a>
 415                                                 </p>
 416
 417                                                 <div class="collapse" id="faq-email">
 418                                                         <p>
 419                                                                 If you have a question about donating to the IPFire Project,
 420                                                                 please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
 421                                                         </p>
 422                                                 </div>
 423                                         </div>
 424                                 </div>
 425                         </div>
 426                 </div>
 427         </section>
 428 {% end block %}
 429
 430 {% block javascript %}
 431         <script type="text/javascript">
 432                 $(document).ready(function() {
 433                         var amount    = $("input[name='amount']");
 434                         var currency  = $("input[name='currency']");
 435                         var frequency = $("input[name='frequency']");
 436                         var submit    = $("#donate");
 437                         var modal     = $("#modal-monthly-suggestions");
 438
 439                         // Adjust form to default currency
 440                         if (currency.val() == "EUR") {
 441                                 $(".USD").hide();
 442                         } else if (currency.val() == "USD") {
 443                                 $(".EUR").hide();
 444                         }
 445
 446                         if (amount.val()) {
 447                                 $("#more").collapse("show");
 448                                 amount.change();
 449                         }
 450
 451                         $(".toggleCurrency").click(function(event) {
 452                                 event.preventDefault();
 453
 454                                 if (currency.val() == "EUR") {
 455                                         currency.val("USD");
 456
 457                                         $(".EUR").hide();
 458                                         $(".USD").show();
 459                                 } else if (currency.val() == "USD") {
 460                                         currency.val("EUR");
 461
 462                                         $(".EUR").show();
 463                                         $(".USD").hide();
 464                                 }
 465                         });
 466
 467                         // Copy amount when clicking on a radio buttons
 468                         $("input[name='amount-selector']").on("change", function() {
 469                                 var value = $(this).val();
 470                                 if (value) {
 471                                         amount.val(value);
 472                                         amount.change();
 473                                 }
 474                         });
 475
 476                         // Copy frequency when clicking on a radio buttons
 477                         $("input[name='frequency-selector']").on("change", function() {
 478                                 var value = $(this).val();
 479                                 if (value) {
 480                                         frequency.val(value);
 481                                 }
 482                         });
 483
 484                         amount.on("change keyup mouseup", function() {
 485                                 var value = $(this).val();
 486                                 value = parseFloat(value);
 487
 488                                 // Enable/disable submit button
 489                                 submit.prop("disabled", !value);
 490
 491                                 if (value) {
 492                                         // Check matching elements
 493                                         $("input[name='amount-selector']").each(function (i, selector) {
 494                                                 var s = $(selector);
 495                                                 var b = s.parent(".btn");
 496                                                 var v = parseFloat(s.val());
 497
 498                                                 if (value == v) {
 499                                                         b.addClass("active");
 500                                                 } else {
 501                                                         b.removeClass("active");
 502                                                 }
 503                                         });
 504
 505                                         // Update all amounts
 506                                         $(".amount").html(value);
 507
 508                                         // Update suggestions
 509                                         $(".monthly-amount-suggestion").each(function (i, element) {
 510                                                 var factor = $(element).data("factor");
 511                                                 if (!factor)
 512                                                         return;
 513
 514                                                 var suggested_amount = Math.floor(value / factor);
 515
 516                                                 // Update value
 517                                                 $(element).data("amount", suggested_amount);
 518
 519                                                 // Update text on button
 520                                                 $(element).find(".suggested-amount").html(suggested_amount);
 521                                         });
 522                                 }
 523                         });
 524
 525                         submit.click(function (event) {
 526                                 if (frequency.val() == "one-time" && amount.val() > 10) {
 527                                         event.preventDefault();
 528
 529                                         modal.modal("show");
 530                                 }
 531                         });
 532
 533                         $(".monthly-amount-suggestion").click(function (event) {
 534                                 // Set frequency to monthly
 535                                 $("input[name='frequency-selector']").prop("checked", false);
 536                                 $("input[name='frequency-selector'][value='monthly']").prop("checked", true);
 537                                 frequency.val("monthly");
 538
 539                                 // Set amount
 540                                 var value = $(this).data("amount");
 541                                 amount.val(value);
 542                                 amount.change();
 543
 544                                 // Hide the modal
 545                                 modal.modal("hide");
 546                         });
 547
 548                         // Update form with initial amount
 549                         amount.change();
 550                 });
 551         </script>
 552 {% end block %}