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