]> git.ipfire.org Git - ipfire.org.git/blob - templates/donate.html
projects / ipfire.org.git / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
blame | history | raw | HEAD
Drop German translation
[ipfire.org.git] / templates / donate.html
1 {% extends "base-1.html" %}
2
3 {% block title %}{{ _("Donate") }}{% end block %}
4
5 {% block container %}
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">
19 <h4 class="mb-5">Choose a currency</h4>
20 <div class="row pt-4">
21 <div class="col col-sm-4 col-md-5">
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>
25 <div class="col col-sm-4 col-md-5">
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>
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">
35 <div class="col col-sm-4 col-md-5 col-lg-6">
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>
38 </div>
39 <div class="col col-sm-4 col-md-5">
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>
42 </div>
43 </div>
44 </div>
45 </div>
46
47 <div class="row mt-6">
48 <div class="inline-card bg-blue-grey-50 col-11 mx-auto">
49 <div class="or"></div>
50 <div class="row mb-4 mb-sm-6 mb-lg-0">
51 <div class="col-12 col-lg-6 mb-6">
52 <h4 class="mb-5">Choose an amount</h4>
53 <div class="form-group d-flex flex-row flex-wrap" id="amount">
54 <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
55 <label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label>
56
57 <input class="amount-check" type="radio" name="amount" id="25" value="25">
58 <label for="25" class="form-check-label amount"><span id="amount_25">25</span><span class="currency">€</span></label>
59
60 <input class="amount-check" type="radio" name="amount" id="50" value="50">
61 <label for="50" class="form-check-label amount"><span id="amount_50">50</span><span class="currency">€</span></label>
62
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>
65
66 <input class="amount-check" type="radio" name="amount" id="100" value="100">
67 <label for="100" class="form-check-label amount"><span id="amount_100">100</span><span class="currency">€</span></label>
68
69 <input class="amount-check" type="radio" name="amount" id="250" value="250">
70 <label for="250" class="form-check-label amount"><span id="amount_250">250</span><span class="currency">€</span></label>
71 </div>
72 </div>
73 <div class="col">
74 <div class="form-group">
75 <h4 class="mb-5">Enter your own</h4>
76 <input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount">
77 </div>
78 </div>
79 </div>
80 <div class="row mt-5 mt-sm-6 mb-5 mb-lg-0 mt-lg-0">
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>
85 </div>
86 </div>
87
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">
90 <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>
91 <label for="creditcard" class="form-check-label radiobtn cc">
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 "
100 alt="Amex" class="m-xl-2">
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 "
111 alt="Mastercard" class="m-xl-2">
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,
121 {{ static_url("img/visa@3x.png") }} 3x "
122 alt="Visa" class="m-xl-2">
123 </picture>
124 </label>
125 </div>
126
127 <div class="col col-lg-6 col-xl-4" id="sepapayment">
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>
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>
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
153 <p class="small text-left mt-5 mb-6">
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>
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
162 <p class="copy">
163 IPFire is an Open Source software project.
164 </p>
165
166 <p class="copy">
167 Development and keeping the project healthy is carried out by a
168 group of volunteers who have built a very successful product,
169 which hundreds of thousands of people use every day.
170 </p>
171
172 <p class="copy">
173 Your donation helps us to make IPFire even better...
174 </p>
175 </div>
176
177 <div class="mb-6 d-flex justify-content-between">
178 <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>
179 </div>
180
181 <div class="mb-6 d-flex justify-content-between">
182 <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>
183 </div>
184 </div>
185 </div>
186 </div>
187 </div>
188 </div>
189 </section>
190 </div>
191 </div>
192 </section>
193
194 <section>
195 <div class="container">
196 <div class="row text-left">
197 <div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
198 <div class="mb-6" id="whydonate">
199 <h3>Why should I donate?</h3>
200
201 <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
202 distribution that is free to use for everyone anywhere in the world. To do that,
203 we need to provide the infrastructure to distribute it to our users and provide
204 the right tools for our developers to help them to make IPFire better every day.
205 </p>
206
207 <p class="copy">Donations from individuals and corporations are the only way to keep all of our
208 services free for everyone. They pay for hosting, advertising, purchase
209 equipment and to fund the work of the people behind it.
210 </p>
211
212 <p class="copy">Our ambition is to compete with projects backed by large corporations and
213 proprietary solutions and we cannot do that without you. Become a supporter
214 today!
215 </p>
216 </div>
217
218 <div class="mb-6" id="howmuch">
219 <h3>How much should I give?</h3>
220
221 <p class="copy">Donations range from single digits donations to hundreds. For us it is important
222 to give something back to help this project to succeed. If you want to help,
223 please do so and encourage others to do so, too.
224 </p>
225 </div>
226 </div>
227
228 <div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
229 <h3>Frequently Asked Questions</h3>
230 <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>
231 </div>
232 </div>
233 </div>
234 </section>
235
236 <!-- Icons -->
237 <svg aria-hidden="true" style="display: none">
238 <symbol id="secure" viewBox="0 0 24 24">
239 <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"/>
240 </symbol>
241 <symbol id="arrow-down-2" viewBox="0 0 24 24">
242 <path d="M11,3v14.2l-3.6-3.6L6,15l6,6l6-6l-1.4-1.4L13,17.2V3H11z"/>
243 </symbol>
244 </svg>
245
246 <script type="text/javascript">
247 $(document).ready(function(){
248 $("input[name='currency']").on("change", function(){
249 if ($(this).val() == "euro") {
250 $('.currency').html('€');
251 }
252 else if ($(this).val() == "usd") {
253 $('.currency').html('$');
254 }
255 });
256 $("input[name='frequency']").on("change", function(){
257 if ($(this).val() == "single") {
258 $("input#10").attr("value", "10");
259 document.getElementById("amount_10").innerHTML="10";
260 $("input#25").attr("value", "25");
261 document.getElementById("amount_25").innerHTML="25";
262 $("input#50").attr("value", "50");
263 document.getElementById("amount_50").innerHTML="50";
264 $("input#75").attr("value", "75");
265 document.getElementById("amount_75").innerHTML="75";
266 $("input#100").attr("value", "100");
267 document.getElementById("amount_100").innerHTML="100";
268 $("input#250").attr("value", "250");
269 document.getElementById("amount_250").innerHTML="250";
270 document.getElementById("paymentpaypal").style.visibility = 'visible';
271 }
272 else if ($(this).val() == "monthly") {
273 $("input#10").attr("value", "2");
274 document.getElementById("amount_10").innerHTML="2";
275 $("input#25").attr("value", "3");
276 document.getElementById("amount_25").innerHTML="3";
277 $("input#50").attr("value", "5");
278 document.getElementById("amount_50").innerHTML="5";
279 $("input#75").attr("value", "7");
280 document.getElementById("amount_75").innerHTML="7";
281 $("input#100").attr("value", "10");
282 document.getElementById("amount_100").innerHTML="10";
283 $("input#250").attr("value", "12");
284 document.getElementById("amount_250").innerHTML="12";
285 document.getElementById("paymentpaypal").style.visibility = 'hidden';
286 }
287 })
288 });
289 </script>
290
291 {% end block %}
The website of ipfire.org.