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