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