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