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