]>
Commit | Line | Data |
---|---|---|
e64ce07e | 1 | {% extends "base-1.html" %} |
d964a8fa | 2 | |
9b5ac075 | 3 | {% block title %}{{ _("Donate") }}{% end block %} |
60b0917c MT |
4 | |
5 | {% block container %} | |
ea23fbb7 SH |
6 | <section class="donation"> |
7 | <div class="container"> | |
8 | <div class="row"> | |
9 | <section class="features-content col-12 text-center"> | |
10 | <h2 class="display-2">{{ _("Donate") }}</h2> | |
11 | ||
12 | <div class="row justify-content-center mb-6"> | |
13 | <div class="col-12 col-sm-11 col-xl-12"> | |
14 | <div class="row"> | |
15 | <div class="donation-card d-flex flex-column flex-md-row-reverse text-left col p-0"> | |
16 | <div class="card p-4 p-sm-6 p-md-4 pt-6"> | |
17 | <div class="row py-md-3 px-md-6"> | |
18 | <div class="col-12 col-lg-6 d-flex flex-column mb-6 mb-lg-0"> | |
a33e1b4b | 19 | <h4 class="mb-5">Choose a currency</h4> |
0c707f0b | 20 | <div class="row pt-4"> |
ea23fbb7 | 21 | <div class="col col-sm-4 col-md-5"> |
0c707f0b SH |
22 | <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked> |
23 | <label for="euro" class="form-check-label radiobtn">€uro</label> | |
24 | </div> | |
ea23fbb7 | 25 | <div class="col col-sm-4 col-md-5"> |
0c707f0b SH |
26 | <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd"> |
27 | <label for="usd" class="form-check-label radiobtn">USD $</label> | |
28 | </div> | |
a33e1b4b SH |
29 | </div> |
30 | </div> | |
31 | ||
32 | <div class="col d-flex flex-column"> | |
33 | <h4 class="mb-5">Frequency</h4> | |
34 | <div class="row pt-4"> | |
ea23fbb7 | 35 | <div class="col col-sm-4 col-md-5 col-lg-6"> |
0c707f0b SH |
36 | <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked> |
37 | <label for="one-time-payment" class="form-check-label radiobtn">One time</label> | |
a33e1b4b | 38 | </div> |
ea23fbb7 | 39 | <div class="col col-sm-4 col-md-5"> |
0c707f0b SH |
40 | <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly"> |
41 | <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label> | |
a33e1b4b SH |
42 | </div> |
43 | </div> | |
44 | </div> | |
45 | </div> | |
46 | ||
47 | <div class="row mt-6"> | |
ea23fbb7 | 48 | <div class="inline-card bg-blue-grey-50 col-11 mx-auto"> |
8977de1e | 49 | <div class="or"></div> |
ea23fbb7 SH |
50 | <div class="row mb-4 mb-sm-6 mb-lg-0"> |
51 | <div class="col-12 col-lg-6 mb-6"> | |
a33e1b4b | 52 | <h4 class="mb-5">Choose an amount</h4> |
ea23fbb7 | 53 | <div class="form-group d-flex flex-row flex-wrap" id="amount"> |
a33e1b4b | 54 | <input class="amount-check" type="radio" name="amount" id="10" value="10" checked> |
8977de1e | 55 | <label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label> |
a33e1b4b SH |
56 | |
57 | <input class="amount-check" type="radio" name="amount" id="25" value="25"> | |
8977de1e | 58 | <label for="25" class="form-check-label amount"><span id="amount_25">25</span><span class="currency">€</span></label> |
a33e1b4b SH |
59 | |
60 | <input class="amount-check" type="radio" name="amount" id="50" value="50"> | |
8977de1e | 61 | <label for="50" class="form-check-label amount"><span id="amount_50">50</span><span class="currency">€</span></label> |
0c707f0b | 62 | |
8977de1e SH |
63 | <input class="amount-check" type="radio" name="amount" id="75" value="50"> |
64 | <label for="50" class="form-check-label amount"><span id="amount_75">75</span><span class="currency">€</span></label> | |
a33e1b4b SH |
65 | |
66 | <input class="amount-check" type="radio" name="amount" id="100" value="100"> | |
8977de1e | 67 | <label for="100" class="form-check-label amount"><span id="amount_100">100</span><span class="currency">€</span></label> |
a33e1b4b SH |
68 | |
69 | <input class="amount-check" type="radio" name="amount" id="250" value="250"> | |
8977de1e | 70 | <label for="250" class="form-check-label amount"><span id="amount_250">250</span><span class="currency">€</span></label> |
a33e1b4b SH |
71 | </div> |
72 | </div> | |
73 | <div class="col"> | |
74 | <div class="form-group"> | |
75 | <h4 class="mb-5">Enter your own</h4> | |
0c707f0b | 76 | <input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount"> |
a33e1b4b SH |
77 | </div> |
78 | </div> | |
79 | </div> | |
ea23fbb7 | 80 | <div class="row mt-5 mt-sm-6 mb-5 mb-lg-0 mt-lg-0"> |
0c707f0b SH |
81 | <div class="col d-flex flex-row"> |
82 | <h4 class="mr-3">Choose payment</h4> | |
83 | <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg> | |
84 | <p class="text-uppercase blue_grey_300"><strong>Secure</strong></p> | |
a33e1b4b SH |
85 | </div> |
86 | </div> | |
87 | ||
ea23fbb7 SH |
88 | <div class="row d-flex flex-column flex-lg-row pl-4 pr-4 md-4 mb-lg-0 mb-xl-6"> |
89 | <div class="col col-lg-6 col-xl-4" id="ccpayment"> | |
0c707f0b | 90 | <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked> |
ea23fbb7 | 91 | <label for="creditcard" class="form-check-label radiobtn cc"> |
0c707f0b SH |
92 | <picture> |
93 | <source srcset="{{ static_url("img/amex.png") }}, | |
94 | {{ static_url("img/amex@2x.png") }} 2x, | |
95 | {{ static_url("img/amex@3x.png") }} 3x "> | |
96 | <img src="{{ static_url("img/amex.png") }}" | |
97 | srcset="{{ static_url("img/amex.png") }}, | |
98 | {{ static_url("img/amex@2x.png") }} 2x, | |
99 | {{ static_url("img/amex@3x.png") }} 3x " | |
ea23fbb7 | 100 | alt="Amex" class="m-xl-2"> |
0c707f0b SH |
101 | </picture> |
102 | ||
103 | <picture> | |
104 | <source srcset="{{ static_url("img/mastercard.png") }}, | |
105 | {{ static_url("img/mastercard@2x.png") }} 2x, | |
106 | {{ static_url("img/mastercard@3x.png") }} 3x "> | |
107 | <img src="{{ static_url("img/mastercard.png") }}" | |
108 | srcset="{{ static_url("img/mastercard.png") }}, | |
109 | {{ static_url("img/mastercard@2x.png") }} 2x, | |
110 | {{ static_url("img/mastercard@3x.png") }} 3x " | |
ea23fbb7 | 111 | alt="Mastercard" class="m-xl-2"> |
0c707f0b SH |
112 | </picture> |
113 | ||
114 | <picture> | |
115 | <source srcset="{{ static_url("img/visa.png") }}, | |
116 | {{ static_url("img/visa@2x.png") }} 2x, | |
117 | {{ static_url("img/visa@3x.png") }} 3x "> | |
118 | <img src="{{ static_url("img/visa.png") }}" | |
119 | srcset="{{ static_url("img/visa.png") }}, | |
120 | {{ static_url("img/visa@2x.png") }} 2x, | |
ea23fbb7 SH |
121 | {{ static_url("img/visa@3x.png") }} 3x " |
122 | alt="Visa" class="m-xl-2"> | |
0c707f0b SH |
123 | </picture> |
124 | </label> | |
125 | </div> | |
126 | ||
ea23fbb7 | 127 | <div class="col col-lg-6 col-xl-4" id="sepapayment"> |
0c707f0b SH |
128 | <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment"> |
129 | <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label> | |
130 | </div> | |
ea23fbb7 SH |
131 | |
132 | <div class="col col-lg-6 col-xl-4" id="paymentpaypal"> | |
133 | <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="paypal" value="paypal"> | |
134 | <label for="paypal" class="form-check-label radiobtn"> | |
135 | <picture> | |
136 | <source srcset="{{ static_url("img/paypal.png") }}, | |
137 | {{ static_url("img/paypal@2x.png") }} 2x, | |
138 | {{ static_url("img/paypal@3x.png") }} 3x "> | |
139 | <img src="{{ static_url("img/paypal.png") }}" | |
140 | srcset="{{ static_url("img/paypal.png") }}, | |
141 | {{ static_url("img/paypal@2x.png") }} 2x, | |
142 | {{ static_url("img/paypal@3x.png") }} 3x " | |
143 | alt="PayPal" class="m-xl-4"> | |
144 | </picture> | |
145 | </label> | |
146 | </div> | |
a33e1b4b SH |
147 | </div> |
148 | </div> | |
149 | </div> | |
150 | ||
151 | <button type="button" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);">Donate Now</button> | |
152 | ||
ea23fbb7 | 153 | <p class="small text-left mt-5 mb-6"> |
a33e1b4b SH |
154 | There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc. |
155 | </p> | |
156 | </div> | |
ea23fbb7 SH |
157 | |
158 | <div class="info col-md-4 bg-blue-grey-900 text-white p-5 pt-6"> | |
159 | <div class="mb-6"> | |
160 | <h3>IP<strong>Fire</strong> is an Open Source software project.</h3> | |
161 | {% if lang == "de" %} | |
162 | <p class="copy"> | |
163 | Die Entwicklung und die Fortführung des Projekts wird allein | |
164 | von einer Gruppe von Freiwilligen getragen, die ein Produkt | |
165 | entwickelt hat, das tagtäglich von Hunderttausenden genutzt | |
166 | wird. | |
167 | </p> | |
168 | ||
169 | <p class="copy"> | |
170 | Jede einzelne Spende hilft IPFire noch weiter zu verbessern... | |
171 | </p> | |
172 | {% else %} | |
173 | <p class="copy"> | |
174 | IPFire is an Open Source software project. | |
175 | </p> | |
176 | ||
177 | <p class="copy"> | |
178 | Development and keeping the project healthy is carried out by a | |
179 | group of volunteers who have built a very successful product, | |
180 | which hundreds of thousands of people use every day. | |
181 | </p> | |
182 | ||
183 | <p class="copy"> | |
184 | Your donation helps us to make IPFire even better... | |
185 | </p> | |
186 | </div> | |
187 | ||
188 | <div class="mb-6 d-flex justify-content-between"> | |
189 | <h3><a href="#whydonate">Why should I donate?</a></h3><a href="#whydonate"><svg class="icon i_arrow_down_2 ml-4"><use xlink:href="#arrow-down-2"/></svg></a> | |
190 | </div> | |
191 | ||
192 | <div class="mb-6 d-flex justify-content-between"> | |
193 | <h3><a href="#howmuch">How much should I give?</a></h3><a href="#howmuch"><svg class="icon i_arrow_down_2 ml-4"><use xlink:href="#arrow-down-2"/></svg></a> | |
194 | </div> | |
195 | {% end %} | |
196 | </div> | |
b54b8ec3 SH |
197 | </div> |
198 | </div> | |
60b0917c MT |
199 | </div> |
200 | </div> | |
ea23fbb7 SH |
201 | </section> |
202 | </div> | |
203 | </div> | |
204 | </section> | |
205 | ||
206 | <section> | |
207 | <div class="container"> | |
a33e1b4b | 208 | <div class="row text-left"> |
ea23fbb7 SH |
209 | <div class="col-10 col-md-5 offset-sm-1 offset-xl-0"> |
210 | <div class="mb-6" id="whydonate"> | |
211 | <h3>Why should I donate?</h3> | |
212 | ||
213 | <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall | |
214 | distribution that is free to use for everyone anywhere in the world. To do that, | |
215 | we need to provide the infrastructure to distribute it to our users and provide | |
216 | the right tools for our developers to help them to make IPFire better every day. | |
217 | </p> | |
218 | ||
219 | <p class="copy">Donations from individuals and corporations are the only way to keep all of our | |
220 | services free for everyone. They pay for hosting, advertising, purchase | |
221 | equipment and to fund the work of the people behind it. | |
222 | </p> | |
223 | ||
224 | <p class="copy">Our ambition is to compete with projects backed by large corporations and | |
225 | proprietary solutions and we cannot do that without you. Become a supporter | |
226 | today! | |
227 | </p> | |
228 | </div> | |
229 | ||
230 | <div class="mb-6" id="howmuch"> | |
231 | <h3>How much should I give?</h3> | |
232 | ||
233 | <p class="copy">Donations range from single digits donations to hundreds. For us it is important | |
234 | to give something back to help this project to succeed. If you want to help, | |
235 | please do so and encourage others to do so, too. | |
236 | </p> | |
237 | </div> | |
a33e1b4b | 238 | </div> |
b54b8ec3 | 239 | |
ea23fbb7 | 240 | <div class="col-10 col-md-4 offset-sm-1 offset-xl-2"> |
a33e1b4b | 241 | <h3>Frequently Asked Questions</h3> |
ea23fbb7 | 242 | <p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> |
a33e1b4b SH |
243 | </div> |
244 | </div> | |
7771acea | 245 | </div> |
ea23fbb7 | 246 | </section> |
0c707f0b SH |
247 | |
248 | <!-- Icons --> | |
249 | <svg aria-hidden="true" style="display: none"> | |
250 | <symbol id="secure" viewBox="0 0 24 24"> | |
251 | <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/> | |
252 | </symbol> | |
ea23fbb7 SH |
253 | <symbol id="arrow-down-2" viewBox="0 0 24 24"> |
254 | <path d="M11,3v14.2l-3.6-3.6L6,15l6,6l6-6l-1.4-1.4L13,17.2V3H11z"/> | |
255 | </symbol> | |
0c707f0b | 256 | </svg> |
8977de1e SH |
257 | |
258 | <script type="text/javascript"> | |
259 | $(document).ready(function(){ | |
260 | $("input[name='currency']").on("change", function(){ | |
261 | if ($(this).val() == "euro") { | |
262 | $('.currency').html('€'); | |
263 | } | |
264 | else if ($(this).val() == "usd") { | |
265 | $('.currency').html('$'); | |
266 | } | |
267 | }); | |
268 | $("input[name='frequency']").on("change", function(){ | |
269 | if ($(this).val() == "single") { | |
270 | $("input#10").attr("value", "10"); | |
271 | document.getElementById("amount_10").innerHTML="10"; | |
272 | $("input#25").attr("value", "25"); | |
273 | document.getElementById("amount_25").innerHTML="25"; | |
274 | $("input#50").attr("value", "50"); | |
275 | document.getElementById("amount_50").innerHTML="50"; | |
276 | $("input#75").attr("value", "75"); | |
277 | document.getElementById("amount_75").innerHTML="75"; | |
278 | $("input#100").attr("value", "100"); | |
279 | document.getElementById("amount_100").innerHTML="100"; | |
280 | $("input#250").attr("value", "250"); | |
281 | document.getElementById("amount_250").innerHTML="250"; | |
ea23fbb7 | 282 | document.getElementById("paymentpaypal").style.visibility = 'visible'; |
8977de1e SH |
283 | } |
284 | else if ($(this).val() == "monthly") { | |
285 | $("input#10").attr("value", "2"); | |
286 | document.getElementById("amount_10").innerHTML="2"; | |
287 | $("input#25").attr("value", "3"); | |
288 | document.getElementById("amount_25").innerHTML="3"; | |
289 | $("input#50").attr("value", "5"); | |
290 | document.getElementById("amount_50").innerHTML="5"; | |
291 | $("input#75").attr("value", "7"); | |
292 | document.getElementById("amount_75").innerHTML="7"; | |
293 | $("input#100").attr("value", "10"); | |
294 | document.getElementById("amount_100").innerHTML="10"; | |
295 | $("input#250").attr("value", "12"); | |
296 | document.getElementById("amount_250").innerHTML="12"; | |
ea23fbb7 | 297 | document.getElementById("paymentpaypal").style.visibility = 'hidden'; |
8977de1e SH |
298 | } |
299 | }) | |
300 | }); | |
301 | </script> | |
b54b8ec3 | 302 | |
f5b55ea7 | 303 | {% end block %} |