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