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-cancel">
 356                                                                 How do I cancel or change my recurring donation?
 357                                                         </a>
 358                                                 </p>
 359
 360                                                 <div class="collapse" id="faq-cancel">
 361                                                         <p>
 362                                                                 Your credit card statements or bank statements will contain a link
 363                                                                 that you can follow to cancel your donation at any time.
 364                                                         </p>
 365                                                 </div>
 366
 367                                                 <p>
 368                                                         <a data-toggle="collapse" href="#faq-email">
 369                                                                 Who can I email directly with questions about donating?
 370                                                         </a>
 371                                                 </p>
 372
 373                                                 <div class="collapse" id="faq-email">
 374                                                         <p>
 375                                                                 If you have a question about donating to the IPFire Project,
 376                                                                 please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
 377                                                         </p>
 378                                                 </div>
 379                                         </div>
 380                                 </div>
 381                         </div>
 382                 </div>
 383         </section>
 384 {% end block %}
 385
 386 {% block javascript %}
 387         <script type="text/javascript">
 388                 $(document).ready(function() {
 389                         var amount    = $("input[name='amount']");
 390                         var currency  = $("input[name='currency']");
 391                         var frequency = $("input[name='frequency']");
 392                         var submit    = $("#donate");
 393                         var modal     = $("#modal-monthly-suggestions");
 394
 395                         // Adjust form to default currency
 396                         if (currency.val() == "EUR") {
 397                                 $(".USD").hide();
 398                         } else if (currency.val() == "USD") {
 399                                 $(".EUR").hide();
 400                         }
 401
 402                         $(".toggleCurrency").click(function(event) {
 403                                 event.preventDefault();
 404
 405                                 if (currency.val() == "EUR") {
 406                                         currency.val("USD");
 407
 408                                         $(".EUR").hide();
 409                                         $(".USD").show();
 410                                 } else if (currency.val() == "USD") {
 411                                         currency.val("EUR");
 412
 413                                         $(".EUR").show();
 414                                         $(".USD").hide();
 415                                 }
 416                         });
 417
 418                         // Copy amount when clicking on a radio buttons
 419                         $("input[name='amount-selector']").on("change", function() {
 420                                 var value = $(this).val();
 421                                 if (value) {
 422                                         amount.val(value);
 423                                         amount.change();
 424                                 }
 425                         });
 426
 427                         // Copy frequency when clicking on a radio buttons
 428                         $("input[name='frequency-selector']").on("change", function() {
 429                                 var value = $(this).val();
 430                                 if (value) {
 431                                         frequency.val(value);
 432                                 }
 433                         });
 434
 435                         amount.on("change keyup mouseup", function() {
 436                                 var value = $(this).val();
 437
 438                                 // Enable/disable submit button
 439                                 submit.prop("disabled", !value);
 440
 441                                 if (value) {
 442                                         // Check matching elements
 443                                         $("input[name='amount-selector']").each(function (i, selector) {
 444                                                 var s = $(selector);
 445                                                 var b = s.parent(".btn");
 446
 447                                                 if (s.val() === value) {
 448                                                         b.addClass("active");
 449                                                 } else {
 450                                                         b.removeClass("active");
 451                                                 }
 452                                         });
 453
 454                                         // Update all amounts
 455                                         $(".amount").html(value);
 456
 457                                         // Update suggestions
 458                                         $(".monthly-amount-suggestion").each(function (i, element) {
 459                                                 var factor = $(element).data("factor");
 460                                                 if (!factor)
 461                                                         return;
 462
 463                                                 var suggested_amount = Math.floor(value / factor);
 464
 465                                                 // Update value
 466                                                 $(element).data("amount", suggested_amount);
 467
 468                                                 // Update text on button
 469                                                 $(element).find(".suggested-amount").html(suggested_amount);
 470                                         });
 471                                 }
 472                         });
 473
 474                         submit.click(function (event) {
 475                                 if (frequency.val() == "one-time" && amount.val() > 10) {
 476                                         event.preventDefault();
 477
 478                                         modal.modal("show");
 479                                 }
 480                         });
 481
 482                         $(".monthly-amount-suggestion").click(function (event) {
 483                                 // Set frequency to monthly
 484                                 $("input[name='frequency-selector']").prop("checked", false);
 485                                 $("input[name='frequency-selector'][value='monthly']").prop("checked", true);
 486                                 frequency.val("monthly");
 487
 488                                 // Set amount
 489                                 var value = $(this).data("amount");
 490                                 amount.val(value);
 491                                 amount.change();
 492
 493                                 // Hide the modal
 494                                 modal.modal("hide");
 495                         });
 496
 497                         // Update form with initial amount
 498                         amount.change();
 499                 });
 500         </script>
 501 {% end block %}