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