src/templates/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         <h1 class="text-center mt-5 mb-5">{{ _("Donate") }}</h1>
   9
  10         <div class="container">
  11                 <div class="card mb-5">
  12                         <div class="row">
  13                                 <div class="d-none d-md-block col col-md-4 p-4 bg-dark text-white">
  14                                         <h5 class="text-white mt-4">Why we need you to donate today</h5>
  15
  16                                         <p>
  17                                                 IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
  18                                                 schools and homes worldwide.
  19                                         </p>
  20
  21                                         <p>
  22                                                 It is trusted by many and has proven that free software, developed by a diverse
  23                                                 community, can not only be equal, but better than proprietary solutions.
  24                                         </p>
  25
  26                                         <p>
  27                                                 But still, development doesn’t come free to us and therefore
  28                                                 we are asking for your contribution today.
  29                                         </p>
  30                                 </div>
  31
  32                                 <div class="col p-5 p-md-4 pt-4">
  33                                         <form action="" method="POST">
  34                                                 {% raw xsrf_form_html() %}
  35
  36                                                 <div class="row mt-md-4">
  37                                                         <div class="col-12 col-lg-6 mb-3 mb-md-0">
  38                                                                 <h6>Choose a currency</h6>
  39
  40                                                                 <div class="form-check form-check-inline">
  41                                                                         <input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
  42                                                                                 {% if currency == "EUR" %}checked{% end %}>
  43                                                                         <label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
  44                                                                 </div>
  45
  46                                                                 <div class="form-check form-check-inline">
  47                                                                         <input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
  48                                                                                 {% if currency == "USD" %}checked{% end %}>
  49                                                                         <label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
  50                                                                 </div>
  51                                                         </div>
  52
  53                                                         <div class="col-12 col-lg-6">
  54                                                                 <h6>Frequency</h6>
  55
  56                                                                 <div class="form-check form-check-inline">
  57                                                                         <input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
  58                                                                                 value="one-time" {% if frequency == "one-time" %}checked{% end %}>
  59                                                                         <label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
  60                                                                 </div>
  61
  62                                                                 <div class="form-check form-check-inline">
  63                                                                         <input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
  64                                                                                 value="monthly" {% if frequency == "monthly" %}checked{% end %}>
  65                                                                         <label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
  66                                                                 </div>
  67                                                         </div>
  68                                                 </div>
  69
  70                                                 <div class="mt-5 mb-3 p-4 bg-light rounded">
  71                                                         <h6>{{ _("Choose an amount") }}</h6>
  72
  73                                                         <input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
  74
  75                                                         <div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
  76                                                                 {% for a in amounts %}
  77                                                                         <label class="btn btn-secondary btn-lg mb-2">
  78                                                                                 <input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
  79                                                                                         autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
  80                                                                         </label>
  81                                                                 {% end %}
  82                                                         </div>
  83
  84                                                         <div class="form-group row mb-5">
  85                                                                 <label class="col-sm-5 col-form-label col-form-label-lg">
  86                                                                         or enter your own
  87                                                                 </label>
  88
  89                                                                 <div class="col-sm-5">
  90                                                                         <input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
  91                                                                                 {% if not amount in amounts %}value="{{ amount }}"{% end %}>
  92                                                                 </div>
  93                                                         </div>
  94
  95                                                         <div class="row mb-5">
  96                                                                 <div class="col d-flex flex-column">
  97                                                                         <div class="form-row">
  98                                                                                 <div class="col">
  99                                                                                         <div class="form-check form-check-inline mb-3">
 100                                                                                                 <input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
 101                                                                                                 <label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
 102                                                                                         </div>
 103                                                                                         <div class="form-check form-check-inline mb-3">
 104                                                                                                 <input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
 105                                                                                                 <label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
 106                                                                                         </div>
 107                                                                                 </div>
 108                                                                         </div>
 109
 110                                                                         <div class="form-row">
 111                                                                                 <div class="col-sm-6">
 112                                                                                         <div class="form-group">
 113                                                                                                 <input type="text" class="form-control" name="first_name"
 114                                                                                                         placeholder="{{ _("First Name" )}}" required>
 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                                                                                         </div>
 123                                                                                 </div>
 124                                                                         </div>
 125
 126                                                                         <div class="form-group">
 127                                                                                 <input type="email" class="form-control" name="email"
 128                                                                                         placeholder="{{ _("Email Address") }}" required>
 129                                                                         </div>
 130
 131                                                                         <div class="form-group">
 132                                                                                 <input type="text" class="form-control" name="company_name"
 133                                                                                         placeholder="{{ _("Company Name (optional)") }}">
 134                                                                         </div>
 135
 136                                                                         <div class="form-group">
 137                                                                                 <input type="text" class="form-control" name="street1"
 138                                                                                         placeholder="{{ _("Address Line 1") }}" required>
 139                                                                         </div>
 140
 141                                                                         <div class="form-group">
 142                                                                                 <input type="text" class="form-control" name="street2"
 143                                                                                         placeholder="{{ _("Address Line 2") }}">
 144                                                                         </div>
 145
 146                                                                         <div class="form-row">
 147                                                                                 <div class="col-sm-6">
 148                                                                                         <div class="form-group">
 149                                                                                                 <input type="text" class="form-control" name="city"
 150                                                                                                         placeholder="{{ _("City") }}" required>
 151                                                                                         </div>
 152                                                                                 </div>
 153
 154                                                                                 <div class="col-sm-6">
 155                                                                                         <div class="form-group">
 156                                                                                                 <input type="text" class="form-control" name="post_code"
 157                                                                                                         placeholder="{{ _("Post Code") }}" required>
 158                                                                                         </div>
 159                                                                                 </div>
 160                                                                         </div>
 161
 162                                                                         <div class="form-row">
 163                                                                                 <div class="col-sm-6">
 164                                                                                         <div class="form-group">
 165                                                                                                 <select class="form-control" name="country_code" required>
 166                                                                                                         <option value="">- {{ _("Country") }} -</option>
 167
 168                                                                                                         {% for c in countries %}
 169                                                                                                                 <option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
 170                                                                                                         {% end %}
 171                                                                                                 </select>
 172                                                                                         </div>
 173                                                                                 </div>
 174
 175                                                                                 <div class="col-sm-6">
 176                                                                                         <div class="form-group">
 177                                                                                                 <input type="text" class="form-control" name="state"
 178                                                                                                         placeholder="{{ _("State (optional)") }}">
 179                                                                                         </div>
 180                                                                                 </div>
 181                                                                         </div>
 182                                                                 </div>
 183                                                         </div>
 184
 185                                                         <div class="row mb-5">
 186                                                                 <div class="col text-center">
 187                                                                         <input type="submit" class="btn btn-primary btn-lg"
 188                                                                                 id="donate" value="{{ _("Donate Now") }}">
 189                                                                 </div>
 190                                                         </div>
 191
 192                                                         <div class="row">
 193                                                                 <div class="col d-flex justify-content-center">
 194                                                                         <picture>
 195                                                                                 <source srcset="{{ static_url("img/amex.png") }},
 196                                                                                         {{ static_url("img/amex@2x.png") }} 2x,
 197                                                                                         {{ static_url("img/amex@3x.png") }} 3x">
 198                                                                                 <img src="{{ static_url("img/amex.png") }}"
 199                                                                                         srcset="{{ static_url("img/amex.png") }},
 200                                                                                         {{ static_url("img/amex@2x.png") }} 2x,
 201                                                                                         {{ static_url("img/amex@3x.png") }} 3x"
 202                                                                                         alt="Amex" class="m-xl-2">
 203                                                                         </picture>
 204
 205                                                                         <picture>
 206                                                                                 <source srcset="{{ static_url("img/mastercard.png") }},
 207                                                                                         {{ static_url("img/mastercard@2x.png") }} 2x,
 208                                                                                         {{ static_url("img/mastercard@3x.png") }} 3x">
 209                                                                                 <img src="{{ static_url("img/mastercard.png") }}"
 210                                                                                         srcset="{{ static_url("img/mastercard.png") }},
 211                                                                                         {{ static_url("img/mastercard@2x.png") }} 2x,
 212                                                                                         {{ static_url("img/mastercard@3x.png") }} 3x"
 213                                                                                         alt="Mastercard" class="m-xl-2">
 214                                                                         </picture>
 215
 216                                                                         <picture>
 217                                                                                 <source srcset="{{ static_url("img/visa.png") }},
 218                                                                                         {{ static_url("img/visa@2x.png") }} 2x,
 219                                                                                         {{ static_url("img/visa@3x.png") }} 3x">
 220                                                                                 <img src="{{ static_url("img/visa.png") }}"
 221                                                                                         srcset="{{ static_url("img/visa.png") }},
 222                                                                                         {{ static_url("img/visa@2x.png") }} 2x,
 223                                                                                         {{ static_url("img/visa@3x.png") }} 3x"
 224                                                                                         alt="Visa" class="m-xl-2">
 225                                                                         </picture>
 226
 227                                                                         <!-- XXX insert SEPA logo -->
 228                                                                 </div>
 229                                                         </div>
 230
 231                                                         <div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
 232                                                                 <div class="modal-dialog modal-dialog-centered" role="document">
 233                                                                         <div class="modal-content">
 234                                                                                 <div class="modal-header">
 235                                                                                         <h5 class="modal-title">Modal title</h5>
 236                                                                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 237                                                                                                 <span aria-hidden="true">&times;</span>
 238                                                                                         </button>
 239                                                                                 </div>
 240
 241                                                                                 <div class="modal-body">
 242                                                                                         <p>Modal body text goes here.</p>
 243                                                                                 </div>
 244
 245                                                                                 <div class="modal-footer">
 246                                                                                         <input type="submit" class="btn btn-primary" value="Donate Now">
 247                                                                                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 248                                                                                 </div>
 249                                                                         </div>
 250                                                                 </div>
 251                                                         </div>
 252                                                 </div>
 253
 254                                                 <p class="small text-muted mb-0">
 255                                                         The organization you will be donating to is Lightning Wire Labs GmbH who is
 256                                                         kindly handling donations for the IPFire project.
 257                                                         After clicking "Donate Now", you will be redirected to Lightning Wire Labs
 258                                                         where you will be able to complete the transaction.
 259                                                 </p>
 260                                         </form>
 261                                 </div>
 262                         </div>
 263                 </div>
 264
 265                 <div class="row">
 266                         <div class="col-12 col-md-6 donation-explanation">
 267                                 <div class="d-block d-md-none">
 268                                         <h5>Why we need you to donate today</h5>
 269
 270                                         <p>
 271                                                 IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
 272                                                 schools and homes worldwide.
 273                                         </p>
 274
 275                                         <p>
 276                                                 It is trusted by many and has proven that free software, developed by a diverse
 277                                                 community, can not only be equal, but better than proprietary solutions.
 278                                         </p>
 279
 280                                         <p>
 281                                                 But still, development doesn’t come free to us and therefore
 282                                                 we are asking for your contribution today.
 283                                         </p>
 284                                 </div>
 285
 286                                 <section>
 287                                         <h5>Why should I donate?</h5>
 288
 289                                         <p>
 290                                                 At IPFire, we are working hard to provide you with a free firewall distribution
 291                                                 that is like no other. We release updates regularly and enhance functionality
 292                                                 to make IPFire more secure, faster and easier to use.
 293                                         </p>
 294
 295                                         <p>
 296                                                 To achieve our high standards that we have set for ourselves, we need your help.
 297
 298                                                 Only with your donation, we can get the right tools, people and utilities that
 299                                                 we need to make our work most efficient and reach our maximum potential.
 300
 301                                                 Only with your donation, we can achieve our vision to make the Internet a safer
 302                                                 place that is fair for everyone and giving equal opportunities.
 303                                         </p>
 304                                 </section>
 305
 306                                 <section>
 307                                         <h5>How much should I give?</h5>
 308
 309                                         <p>
 310                                                 We are grateful for every single donation, but of course, we appreciate
 311                                                 if you help us as much as you can.
 312                                         </p>
 313
 314                                         <p>
 315                                                 We rely on steady contributions from companies to keep the project healthy
 316                                                 and encourage them to set up a monthly donation.
 317                                         </p>
 318                                 </section>
 319                         </div>
 320
 321                         <div class="col-12 col-md-6 faq">
 322                                 <h5>Frequently Asked Questions</h5>
 323
 324                                 <p>
 325                                         <a data-toggle="collapse" href="#faq-bank-transfer">
 326                                                 Do you accept bank transfer via SEPA?
 327                                         </a>
 328                                 </p>
 329
 330                                 <div class="collapse text-muted" id="faq-bank-transfer">
 331                                         <p>
 332                                                 We do accept direct transfers through SEPA. These are our bank details:
 333                                         </p>
 334
 335                                         <dl>
 336                                                 <dt>IBAN</dt>
 337                                                 <dd>DE76 3605 0105 1010 8206 84</dd>
 338
 339                                                 <dt>BIC</dt>
 340                                                 <dd>SPESDE3EXXX</dd>
 341                                         </dl>
 342                                 </div>
 343
 344                                 <p>
 345                                         <a data-toggle="collapse" href="#faq-address">
 346                                                 Why do you need my address in order to process a donation?
 347                                         </a>
 348                                 </p>
 349
 350                                 <div class="collapse text-muted" id="faq-address">
 351                                         <p>
 352                                                 We understand that your privacy is very important.
 353                                         </p>
 354
 355                                         <p>
 356                                                 We ask for a minimum amount of information required to process
 357                                                 credit card donations, including billing addresses.
 358                                                 This allows our payment processor to verify your identity,
 359                                                 process your payment, and prevent fraudulent charges to your credit card.
 360                                         </p>
 361
 362                                         <p>
 363                                                 We keep your information private - if you have questions, please refer to
 364                                                 Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
 365                                         </p>
 366
 367                                         <p>
 368                                                 If you would rather not fill in your information on our online donation form,
 369                                                 you can send your donation via SEPA bank transfer.
 370                                         </p>
 371                                 </div>
 372
 373                                 <p>
 374                                         <a data-toggle="collapse" href="#faq-tax-deduction">
 375                                                 Is my donation tax deductible?
 376                                         </a>
 377                                 </p>
 378
 379                                 <div class="collapse text-muted" id="faq-tax-deduction">
 380                                         <p>
 381                                                 IPFire is not registered as a charitable organization and therefore donations
 382                                                 are not tax deductible in Germany or the European Union.
 383                                         </p>
 384
 385                                         <p>
 386                                                 For donors outside of the European Union, please consult your tax advisor
 387                                                 about whether your donation is tax deductible.
 388                                         </p>
 389                                 </div>
 390
 391                                 <p>
 392                                         <a data-toggle="collapse" href="#faq-cancel">
 393                                                 How do I cancel or change my recurring donation?
 394                                         </a>
 395                                 </p>
 396
 397                                 <div class="collapse text-muted" id="faq-cancel">
 398                                         <p>
 399                                                 Your credit card statements or bank statements will contain a link
 400                                                 that you can follow to cancel your donation at any time.
 401                                         </p>
 402                                 </div>
 403
 404                                 <p>
 405                                         <a data-toggle="collapse" href="#faq-email">
 406                                                 Who can I email directly with questions about donating?
 407                                         </a>
 408                                 </p>
 409
 410                                 <div class="collapse text-muted" id="faq-email">
 411                                         <p>
 412                                                 If you have a question about donating to the IPFire Project,
 413                                                 please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
 414                                         </p>
 415                                 </div>
 416                         </div>
 417                 </div>
 418         </div>
 419 {% end block %}
 420
 421 {% block javascript %}
 422         <script type="text/javascript">
 423                 $(document).ready(function() {
 424                         var amount = $("input[name='amount']");
 425
 426                         // Adjust form to default currency
 427                         var currency = $("input[name='currency']:checked").val();
 428                         if (currency == "EUR") {
 429                                 $(".USD").hide();
 430                         } else if (currency == "USD") {
 431                                 $(".EUR").hide();
 432                         }
 433
 434                         $("input[name='currency']").on("change", function() {
 435                                 var currency = $(this).val();
 436
 437                                 if (currency == "EUR") {
 438                                         $(".EUR").show();
 439                                         $(".USD").hide();
 440                                 } else if (currency == "USD") {
 441                                         $(".EUR").hide();
 442                                         $(".USD").show();
 443                                 }
 444                         });
 445
 446                         // Copy amount when clicking on a radio button
 447                         $("input[name='amount-selector']").on("change", function() {
 448                                 var value = $(this).val();
 449                                 if (value) {
 450                                         amount.val(value);
 451
 452                                         // Clear input field
 453                                         $("input[name='amount-input']").val("");
 454                                 }
 455                         });
 456
 457                         $("input[name='amount-input']").on("change", function() {
 458                                 var value = $(this).val();
 459                                 if (value) {
 460                                         amount.val(value);
 461
 462                                         // Uncheck all radio buttons
 463                                         $("input[name='amount-selector']").removeAttr("checked");
 464                                         $("input[name='amount-selector']").prop("checked", false);
 465                                 }
 466                         });
 467
 468                         $("#donate").click(function (event) {
 469                                 var frequency = $("input[name='frequency']").val();
 470
 471                                 if (frequency == "one-time") {
 472                                         event.preventDefault();
 473
 474                                         $("#modal-upsell").modal("show");
 475                                 }
 476                         });
 477                 });
 478         </script>
 479 {% end block %}