]> git.ipfire.org Git - people/shoehn/ipfire.org.git/blame - templates/donate.html
projects / people / shoehn / ipfire.org.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
Donation page responsivness
[people/shoehn/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 %}
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 %}
Sven's copy of the ipfire.org website