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