]> git.ipfire.org Git - ipfire.org.git/blame - templates/donate.html
projects / ipfire.org.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
Implement donation redirection to backend
[ipfire.org.git] / templates / donate.html
CommitLineData
e64ce07e 1{% extends "base-1.html" %}
d964a8fa 2
9b5ac075 3{% block title %}{{ _("Donate") }}{% end block %}
60b0917c
MT		 4
5{% block container %}
be02b78f
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>
2c361abc
MT		 11
12 <form action="" method="POST">
13 {% raw xsrf_form_html() %}
14
15 <div class="row justify-content-center mb-6">
16 <div class="col-12 col-sm-11 col-xl-12">
17 <div class="row">
18 <div class="donation-card d-flex flex-column flex-md-row-reverse text-left col p-0">
19 <div class="card p-4 p-sm-6 p-md-4 pt-6">
20 <div class="row py-md-3 px-md-6">
21 <div class="col-12 col-lg-6 d-flex flex-column mb-6 mb-lg-0">
22 <h4 class="mb-5">Choose a currency</h4>
23 <div class="row pt-4">
24 <div class="col col-sm-4 col-md-5">
25 <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked>
26 <label for="euro" class="form-check-label radiobtn">€uro</label>
27 </div>
28 <div class="col col-sm-4 col-md-5">
29 <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd">
30 <label for="usd" class="form-check-label radiobtn">USD $</label>
31 </div>
83985f52 32 </div>
fed291df 33 </div>
2c361abc
MT		 34
35 <div class="col d-flex flex-column">
36 <h4 class="mb-5">Frequency</h4>
37 <div class="row pt-4">
38 <div class="col col-sm-4 col-md-5 col-lg-6">
39 <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked>
40 <label for="one-time-payment" class="form-check-label radiobtn">One time</label>
41 </div>
42 <div class="col col-sm-4 col-md-5">
43 <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
44 <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label>
45 </div>
fed291df
SH		 46 </div>
47 </div>
48 </div>
2c361abc
MT		 49
50 <div class="row mt-6">
51 <div class="inline-card bg-blue-grey-50 col-11 mx-auto">
52 <div class="or"></div>
53 <div class="row mb-4 mb-sm-6 mb-lg-0">
54 <div class="col-12 col-lg-6 mb-6">
55 <h4 class="mb-5">Choose an amount</h4>
56 <div class="form-group d-flex flex-row flex-wrap" id="amount">
57 <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
58 <label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label>
59
60 <input class="amount-check" type="radio" name="amount" id="25" value="25">
61 <label for="25" class="form-check-label amount"><span id="amount_25">25</span><span class="currency">€</span></label>
62
63 <input class="amount-check" type="radio" name="amount" id="50" value="50">
64 <label for="50" class="form-check-label amount"><span id="amount_50">50</span><span class="currency">€</span></label>
65
66 <input class="amount-check" type="radio" name="amount" id="75" value="50">
67 <label for="50" class="form-check-label amount"><span id="amount_75">75</span><span class="currency">€</span></label>
fed291df 68
2c361abc
MT		 69 <input class="amount-check" type="radio" name="amount" id="100" value="100">
70 <label for="100" class="form-check-label amount"><span id="amount_100">100</span><span class="currency">€</span></label>
71
72 <input class="amount-check" type="radio" name="amount" id="250" value="250">
73 <label for="250" class="form-check-label amount"><span id="amount_250">250</span><span class="currency">€</span></label>
74 </div>
75 </div>
76 <div class="col">
77 <div class="form-group">
78 <h4 class="mb-5">Enter your own</h4>
79 <input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount">
80 </div>
fed291df
SH		 81 </div>
82 </div>
2c361abc
MT		 83 <div class="row mt-5 mt-sm-6 mb-5 mb-lg-0 mt-lg-0">
84 <div class="col d-flex flex-row">
85 <h4 class="mr-3">Choose payment</h4>
86 <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg>
87 <p class="text-uppercase blue_grey_300"><strong>Secure</strong></p>
88 </div>
83985f52 89 </div>
be02b78f 90
2c361abc
MT		 91 <div class="row d-flex flex-column flex-lg-row pl-4 pr-4 md-4 mb-lg-0 mb-xl-6">
92 <div class="col col-lg-6 col-xl-4" id="ccpayment">
93 <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>
94 <label for="creditcard" class="form-check-label radiobtn cc">
95 <picture>
96 <source srcset="{{ static_url("img/amex.png") }},
97 {{ static_url("img/amex@2x.png") }} 2x,
98 {{ static_url("img/amex@3x.png") }} 3x ">
99 <img src="{{ static_url("img/amex.png") }}"
100 srcset="{{ static_url("img/amex.png") }},
101 {{ static_url("img/amex@2x.png") }} 2x,
102 {{ static_url("img/amex@3x.png") }} 3x "
103 alt="Amex" class="m-xl-2">
104 </picture>
105
106 <picture>
107 <source srcset="{{ static_url("img/mastercard.png") }},
108 {{ static_url("img/mastercard@2x.png") }} 2x,
109 {{ static_url("img/mastercard@3x.png") }} 3x ">
110 <img src="{{ static_url("img/mastercard.png") }}"
111 srcset="{{ static_url("img/mastercard.png") }},
112 {{ static_url("img/mastercard@2x.png") }} 2x,
113 {{ static_url("img/mastercard@3x.png") }} 3x "
114 alt="Mastercard" class="m-xl-2">
115 </picture>
116
117 <picture>
118 <source srcset="{{ static_url("img/visa.png") }},
119 {{ static_url("img/visa@2x.png") }} 2x,
120 {{ static_url("img/visa@3x.png") }} 3x ">
121 <img src="{{ static_url("img/visa.png") }}"
122 srcset="{{ static_url("img/visa.png") }},
123 {{ static_url("img/visa@2x.png") }} 2x,
124 {{ static_url("img/visa@3x.png") }} 3x "
125 alt="Visa" class="m-xl-2">
126 </picture>
127 </label>
128 </div>
129
130 <div class="col col-lg-6 col-xl-4" id="sepapayment">
131 <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
132 <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label>
133 </div>
134
135 <div class="col col-lg-6 col-xl-4" id="paymentpaypal">
136 <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="paypal" value="paypal">
137 <label for="paypal" class="form-check-label radiobtn">
138 <picture>
139 <source srcset="{{ static_url("img/paypal.png") }},
140 {{ static_url("img/paypal@2x.png") }} 2x,
141 {{ static_url("img/paypal@3x.png") }} 3x ">
142 <img src="{{ static_url("img/paypal.png") }}"
143 srcset="{{ static_url("img/paypal.png") }},
144 {{ static_url("img/paypal@2x.png") }} 2x,
145 {{ static_url("img/paypal@3x.png") }} 3x "
146 alt="PayPal" class="m-xl-4">
147 </picture>
148 </label>
149 </div>
be02b78f 150 </div>
fed291df
SH		 151 </div>
152 </div>
2c361abc
MT		 153
154 <input type="submit" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);" value="Donate Now">
fed291df 155
2c361abc
MT		 156 <p class="small text-left mt-5 mb-6">
157 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.
e52b45b6 158 </p>
be02b78f 159 </div>
2c361abc
MT		 160
161 <div class="info col-md-4 bg-blue-grey-900 text-white p-5 pt-6">
162 <div class="mb-6">
163 <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
164
165 <p class="copy">
166 IPFire is an Open Source software project.
167 </p>
be02b78f 168
2c361abc
MT		 169 <p class="copy">
170 Development and keeping the project healthy is carried out by a
171 group of volunteers who have built a very successful product,
172 which hundreds of thousands of people use every day.
173 </p>
174
175 <p class="copy">
176 Your donation helps us to make IPFire even better...
177 </p>
178 </div>
179
180 <div class="mb-6 d-flex justify-content-between">
181 <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>
182 </div>
183
184 <div class="mb-6 d-flex justify-content-between">
185 <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>
186 </div>
be02b78f 187 </div>
be02b78f 188 </div>
ef0d3151
SH		 189 </div>
190 </div>
60b0917c 191 </div>
2c361abc 192 </form>
be02b78f
SH		 193 </section>
194 </div>
195 </div>
196 </section>
197
198 <section>
199 <div class="container">
fed291df 200 <div class="row text-left">
be02b78f
SH		 201 <div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
202 <div class="mb-6" id="whydonate">
203 <h3>Why should I donate?</h3>
204
205 <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
206 distribution that is free to use for everyone anywhere in the world. To do that,
207 we need to provide the infrastructure to distribute it to our users and provide
208 the right tools for our developers to help them to make IPFire better every day.
209 </p>
210
211 <p class="copy">Donations from individuals and corporations are the only way to keep all of our
212 services free for everyone. They pay for hosting, advertising, purchase
213 equipment and to fund the work of the people behind it.
214 </p>
215
216 <p class="copy">Our ambition is to compete with projects backed by large corporations and
217 proprietary solutions and we cannot do that without you. Become a supporter
218 today!
219 </p>
220 </div>
221
222 <div class="mb-6" id="howmuch">
223 <h3>How much should I give?</h3>
224
225 <p class="copy">Donations range from single digits donations to hundreds. For us it is important
226 to give something back to help this project to succeed. If you want to help,
227 please do so and encourage others to do so, too.
228 </p>
229 </div>
fed291df
SH		 230 </div>
231
be02b78f 232 <div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
fed291df 233 <h3>Frequently Asked Questions</h3>
be02b78f 234 <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>
fed291df
SH		 235 </div>
236 </div>
7771acea 237 </div>
be02b78f 238 </section>
83985f52
SH		 239
240<!-- Icons -->
241<svg aria-hidden="true" style="display: none">
242 <symbol id="secure" viewBox="0 0 24 24">
243 <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"/>
244 </symbol>
be02b78f
SH		 245 <symbol id="arrow-down-2" viewBox="0 0 24 24">
246 <path d="M11,3v14.2l-3.6-3.6L6,15l6,6l6-6l-1.4-1.4L13,17.2V3H11z"/>
247 </symbol>
83985f52 248</svg>
fedb34bf
SH		 249
250<script type="text/javascript">
251$(document).ready(function(){
252 $("input[name='currency']").on("change", function(){
253 if ($(this).val() == "euro") {
254 $('.currency').html('€');
255 }
256 else if ($(this).val() == "usd") {
257 $('.currency').html('$');
258 }
259 });
260 $("input[name='frequency']").on("change", function(){
261 if ($(this).val() == "single") {
262 $("input#10").attr("value", "10");
263 document.getElementById("amount_10").innerHTML="10";
264 $("input#25").attr("value", "25");
265 document.getElementById("amount_25").innerHTML="25";
266 $("input#50").attr("value", "50");
267 document.getElementById("amount_50").innerHTML="50";
268 $("input#75").attr("value", "75");
269 document.getElementById("amount_75").innerHTML="75";
270 $("input#100").attr("value", "100");
271 document.getElementById("amount_100").innerHTML="100";
272 $("input#250").attr("value", "250");
273 document.getElementById("amount_250").innerHTML="250";
be02b78f 274 document.getElementById("paymentpaypal").style.visibility = 'visible';
fedb34bf
SH		 275 }
276 else if ($(this).val() == "monthly") {
277 $("input#10").attr("value", "2");
278 document.getElementById("amount_10").innerHTML="2";
279 $("input#25").attr("value", "3");
280 document.getElementById("amount_25").innerHTML="3";
281 $("input#50").attr("value", "5");
282 document.getElementById("amount_50").innerHTML="5";
283 $("input#75").attr("value", "7");
284 document.getElementById("amount_75").innerHTML="7";
285 $("input#100").attr("value", "10");
286 document.getElementById("amount_100").innerHTML="10";
287 $("input#250").attr("value", "12");
288 document.getElementById("amount_250").innerHTML="12";
be02b78f 289 document.getElementById("paymentpaypal").style.visibility = 'hidden';
fedb34bf
SH		 290 }
291 })
292});
293</script>
ef0d3151 294
f5b55ea7 295{% end block %}
The website of ipfire.org.