]>
Commit | Line | Data |
---|---|---|
081800ca | 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 | |
a41e6d77 | 22 | <div class="container"> |
bddae05d MT |
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"> | |
a6100896 | 31 | <div class="col-12"> |
bddae05d | 32 | <h6>Frequency</h6> |
d7bbf25f | 33 | |
54e768a2 MT |
34 | <div class="custom-control custom-radio custom-control-inline"> |
35 | <input class="custom-control-input" type="radio" name="frequency" id="frequency-one-time" | |
bddae05d | 36 | value="one-time" {% if frequency == "one-time" %}checked{% end %}> |
54e768a2 | 37 | <label class="custom-control-label" for="frequency-one-time">{{ _("One Time") }}</label> |
bddae05d | 38 | </div> |
95b30f84 | 39 | |
54e768a2 MT |
40 | <div class="custom-control custom-radio custom-control-inline"> |
41 | <input class="custom-control-input" type="radio" name="frequency" id="frequency-monthly" | |
bddae05d | 42 | value="monthly" {% if frequency == "monthly" %}checked{% end %}> |
54e768a2 | 43 | <label class="custom-control-label" for="frequency-monthly">{{ _("Monthly") }}</label> |
bddae05d | 44 | </div> |
f89c578d MT |
45 | </div> |
46 | </div> | |
95b30f84 | 47 | |
bddae05d MT |
48 | <div class="mt-5 mb-3 p-4 bg-light rounded"> |
49 | <h6>{{ _("Choose an amount") }}</h6> | |
a41e6d77 | 50 | |
a6100896 | 51 | <input type="hidden" name="currency" value="{{ currency }}"> |
a41e6d77 | 52 | |
a6100896 | 53 | <div class="btn-group-toggle flex-wrap text-center mb-3" data-toggle="buttons"> |
bddae05d | 54 | {% for a in amounts %} |
c599391b | 55 | <label class="btn btn-outline-primary btn-lg mb-2"> |
bddae05d | 56 | <input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %} |
a6100896 | 57 | autocomplete="off"> <span class="EUR">€</span><span class="USD">$</span>{{ a }} |
bddae05d MT |
58 | </label> |
59 | {% end %} | |
d7bbf25f | 60 | </div> |
a41e6d77 | 61 | |
a6100896 MT |
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> | |
d7bbf25f | 80 | |
a6100896 MT |
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> | |
bddae05d | 85 | </div> |
a6100896 MT |
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> | |
f89c578d | 91 | </div> |
a41e6d77 | 92 | |
a6100896 | 93 | <div class="row my-5"> |
bddae05d MT |
94 | <div class="col d-flex flex-column"> |
95 | <div class="form-row"> | |
96 | <div class="col"> | |
54e768a2 MT |
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> | |
bddae05d | 100 | </div> |
54e768a2 MT |
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> | |
bddae05d | 104 | </div> |
d7bbf25f | 105 | </div> |
f89c578d | 106 | </div> |
a41e6d77 | 107 | |
bddae05d MT |
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> | |
d7bbf25f | 114 | </div> |
a41e6d77 | 115 | |
bddae05d MT |
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> | |
d7bbf25f | 121 | </div> |
f89c578d | 122 | </div> |
f89c578d | 123 | |
bddae05d MT |
124 | <div class="form-group"> |
125 | <input type="email" class="form-control" name="email" | |
126 | placeholder="{{ _("Email Address") }}" required> | |
127 | </div> | |
a41e6d77 | 128 | |
bddae05d MT |
129 | <div class="form-group"> |
130 | <input type="text" class="form-control" name="company_name" | |
131 | placeholder="{{ _("Company Name (optional)") }}"> | |
132 | </div> | |
f89c578d | 133 | |
bddae05d MT |
134 | <div class="form-group"> |
135 | <input type="text" class="form-control" name="street1" | |
136 | placeholder="{{ _("Address Line 1") }}" required> | |
137 | </div> | |
f89c578d | 138 | |
bddae05d MT |
139 | <div class="form-group"> |
140 | <input type="text" class="form-control" name="street2" | |
141 | placeholder="{{ _("Address Line 2") }}"> | |
142 | </div> | |
f89c578d | 143 | |
bddae05d MT |
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> | |
d7bbf25f | 150 | </div> |
95b30f84 | 151 | |
bddae05d MT |
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> | |
d7bbf25f | 157 | </div> |
f89c578d | 158 | </div> |
a41e6d77 | 159 | |
bddae05d MT |
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> | |
d7bbf25f MT |
171 | </div> |
172 | ||
bddae05d MT |
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> | |
d9d6d3c3 MT |
178 | </div> |
179 | </div> | |
a41e6d77 | 180 | |
bddae05d MT |
181 | <input type="submit" class="btn btn-primary btn-lg" |
182 | id="donate" value="{{ _("Donate Now") }}"> | |
183 | </div> | |
f89c578d | 184 | </div> |
f89c578d | 185 | |
bddae05d | 186 | <div class="row"> |
35ce056e MT |
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> | |
bddae05d | 192 | </div> |
f89c578d | 193 | </div> |
f89c578d | 194 | |
bddae05d MT |
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">×</span> | |
202 | </button> | |
203 | </div> | |
a41e6d77 | 204 | |
bddae05d MT |
205 | <div class="modal-body"> |
206 | <p>Modal body text goes here.</p> | |
207 | </div> | |
a41e6d77 | 208 | |
bddae05d MT |
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> | |
be02b78f | 213 | </div> |
a41e6d77 | 214 | </div> |
ef0d3151 SH |
215 | </div> |
216 | </div> | |
f89c578d | 217 | |
bddae05d MT |
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> | |
d7bbf25f MT |
226 | </div> |
227 | ||
fbbfd560 MT |
228 | <section> |
229 | <h5>Why should I donate?</h5> | |
95b30f84 | 230 | |
fbbfd560 MT |
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> | |
8bc72662 | 236 | |
fbbfd560 MT |
237 | <p> |
238 | To achieve our high standards that we have set for ourselves, we need your help. | |
8bc72662 | 239 | |
fbbfd560 MT |
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. | |
8bc72662 | 242 | |
fbbfd560 MT |
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> | |
8bc72662 | 246 | |
fbbfd560 | 247 | <h5>How much should I give?</h5> |
8bc72662 | 248 | |
fbbfd560 MT |
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> | |
8bc72662 | 253 | |
fbbfd560 MT |
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> | |
8bc72662 | 258 | |
bddae05d MT |
259 | <div class="faq"> |
260 | <h5>Frequently Asked Questions</h5> | |
a41e6d77 | 261 | |
bddae05d MT |
262 | <p> |
263 | <a data-toggle="collapse" href="#faq-bank-transfer"> | |
264 | Do you accept bank transfer via SEPA? | |
265 | </a> | |
266 | </p> | |
a41e6d77 | 267 | |
fbbfd560 | 268 | <div class="collapse" id="faq-bank-transfer"> |
bddae05d MT |
269 | <p> |
270 | We do accept direct transfers through SEPA. These are our bank details: | |
271 | </p> | |
95b30f84 | 272 | |
bddae05d MT |
273 | <dl> |
274 | <dt>IBAN</dt> | |
275 | <dd>DE76 3605 0105 1010 8206 84</dd> | |
a41e6d77 | 276 | |
bddae05d MT |
277 | <dt>BIC</dt> |
278 | <dd>SPESDE3EXXX</dd> | |
279 | </dl> | |
280 | </div> | |
8bc72662 | 281 | |
bddae05d MT |
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> | |
8bc72662 | 287 | |
fbbfd560 | 288 | <div class="collapse" id="faq-address"> |
bddae05d MT |
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> | |
8bc72662 | 310 | |
bddae05d MT |
311 | <p> |
312 | <a data-toggle="collapse" href="#faq-tax-deduction"> | |
313 | Is my donation tax deductible? | |
314 | </a> | |
315 | </p> | |
8bc72662 | 316 | |
fbbfd560 | 317 | <div class="collapse" id="faq-tax-deduction"> |
bddae05d MT |
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> | |
a41e6d77 | 322 | |
bddae05d MT |
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 | ||
fbbfd560 | 335 | <div class="collapse" id="faq-cancel"> |
bddae05d MT |
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 | ||
fbbfd560 | 348 | <div class="collapse" id="faq-email"> |
bddae05d MT |
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> | |
fbbfd560 | 355 | </section> |
a41e6d77 | 356 | </div> |
7771acea | 357 | </div> |
8bc72662 | 358 | </div> |
95b30f84 MT |
359 | {% end block %} |
360 | ||
361 | {% block javascript %} | |
362 | <script type="text/javascript"> | |
363 | $(document).ready(function() { | |
6d151de3 | 364 | var amount = $("input[name='amount']"); |
a6100896 | 365 | var currency = $("input[name='currency']"); |
6d151de3 | 366 | |
bd2723d4 | 367 | // Adjust form to default currency |
a6100896 | 368 | if (currency.val() == "EUR") { |
bd2723d4 | 369 | $(".USD").hide(); |
a6100896 | 370 | } else if (currency.val() == "USD") { |
bd2723d4 MT |
371 | $(".EUR").hide(); |
372 | } | |
95b30f84 | 373 | |
a6100896 MT |
374 | $(".toggleCurrency").click(function(event) { |
375 | event.preventDefault(); | |
376 | ||
377 | if (currency.val() == "EUR") { | |
378 | currency.val("USD"); | |
95b30f84 | 379 | |
95b30f84 MT |
380 | $(".EUR").hide(); |
381 | $(".USD").show(); | |
a6100896 MT |
382 | } else if (currency.val() == "USD") { |
383 | currency.val("EUR"); | |
384 | ||
385 | $(".EUR").show(); | |
386 | $(".USD").hide(); | |
95b30f84 MT |
387 | } |
388 | }); | |
389 | ||
6d151de3 MT |
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); | |
6d151de3 MT |
395 | } |
396 | }); | |
397 | ||
a6100896 | 398 | amount.on("change keyup mouseup", function() { |
6d151de3 MT |
399 | var value = $(this).val(); |
400 | if (value) { | |
a6100896 MT |
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 | }); | |
6d151de3 MT |
412 | } |
413 | }); | |
414 | ||
95b30f84 | 415 | $("#donate").click(function (event) { |
91e53e2b | 416 | var frequency = $("input[name='frequency']").val(); |
95b30f84 | 417 | |
bd2723d4 | 418 | if (frequency == "one-time") { |
95b30f84 | 419 | event.preventDefault(); |
fedb34bf | 420 | |
95b30f84 MT |
421 | $("#modal-upsell").modal("show"); |
422 | } | |
423 | }); | |
424 | }); | |
425 | </script> | |
f5b55ea7 | 426 | {% end block %} |