]>
Commit | Line | Data |
---|---|---|
e64ce07e | 1 | {% extends "base-1.html" %} |
d964a8fa | 2 | |
9b5ac075 | 3 | {% block title %}{{ _("Donate") }}{% end block %} |
60b0917c MT |
4 | |
5 | {% block container %} | |
b54b8ec3 SH |
6 | <div class="container"> |
7 | <div class="row"> | |
8 | <section class="features-content col-12 text-center"> | |
a33e1b4b | 9 | <h2 class="display-2">{{ _("Donate") }}</h2> |
b54b8ec3 | 10 | |
a33e1b4b SH |
11 | <div class="row justify-content-center mb-6"> |
12 | <div class="col-12"> | |
13 | <div class="row"> | |
14 | <div class="donation-card d-flex flex-row text-left"> | |
15 | <div class="col-4 bg-blue-grey-900 text-white p-5 pt-6" style="border-radius: 4px 0 0 4px"> | |
0c707f0b SH |
16 | <div class="mb-6"> |
17 | <h3>IP<strong>Fire</strong> is an Open Source software project.</h3> | |
18 | {% if lang == "de" %} | |
19 | <p class="copy"> | |
20 | Die Entwicklung und die Fortführung des Projekts wird allein | |
21 | von einer Gruppe von Freiwilligen getragen, die ein Produkt | |
22 | entwickelt hat, das tagtäglich von Hunderttausenden genutzt | |
23 | wird. | |
24 | </p> | |
25 | ||
26 | <p class="copy"> | |
27 | Jede einzelne Spende hilft IPFire noch weiter zu verbessern... | |
28 | </p> | |
29 | {% else %} | |
30 | <p class="copy"> | |
31 | IPFire is an Open Source software project. | |
32 | </p> | |
33 | ||
34 | <p class="copy"> | |
35 | Development and keeping the project healthy is carried out by a | |
36 | group of volunteers who have built a very successful product, | |
37 | which hundreds of thousands of people use every day. | |
38 | </p> | |
39 | ||
40 | <p class="copy"> | |
41 | Your donation helps us to make IPFire even better... | |
42 | </p> | |
43 | </div> | |
44 | ||
45 | <div class="mb-6"> | |
46 | <h3>Why should I donate?</h3> | |
a33e1b4b | 47 | |
0c707f0b SH |
48 | <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall |
49 | distribution that is free to use for everyone anywhere in the world. To do that, | |
50 | we need to provide the infrastructure to distribute it to our users and provide | |
51 | the right tools for our developers to help them to make IPFire better every day. | |
a33e1b4b | 52 | </p> |
0c707f0b SH |
53 | |
54 | <p class="copy">Donations from individuals and corporations are the only way to keep all of our | |
55 | services free for everyone. They pay for hosting, advertising, purchase | |
56 | equipment and to fund the work of the people behind it. | |
a33e1b4b | 57 | </p> |
0c707f0b SH |
58 | |
59 | <p class="copy">Our ambition is to compete with projects backed by large corporations and | |
60 | proprietary solutions and we cannot do that without you. Become a supporter | |
61 | today! | |
a33e1b4b | 62 | </p> |
0c707f0b SH |
63 | </div> |
64 | ||
65 | <div class="mb-6"> | |
66 | <h3>How much should I give?</h3> | |
67 | ||
68 | <p class="copy">Donations range from single digits donations to hundreds. For us it is important | |
69 | to give something back to help this project to succeed. If you want to help, | |
70 | please do so and encourage others to do so, too. | |
a33e1b4b | 71 | </p> |
0c707f0b SH |
72 | </div> |
73 | {% end %} | |
b54b8ec3 | 74 | </div> |
a33e1b4b SH |
75 | |
76 | <div class="col pl-5 pr-5"> | |
77 | <div class="card p-3 pt-6"> | |
78 | <div class="row"> | |
79 | <div class="col d-flex flex-column"> | |
80 | <h4 class="mb-5">Choose a currency</h4> | |
0c707f0b SH |
81 | <div class="row pt-4"> |
82 | <div class="col"> | |
83 | <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked> | |
84 | <label for="euro" class="form-check-label radiobtn">€uro</label> | |
85 | </div> | |
86 | <div class="col"> | |
87 | <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd"> | |
88 | <label for="usd" class="form-check-label radiobtn">USD $</label> | |
89 | </div> | |
a33e1b4b SH |
90 | </div> |
91 | </div> | |
92 | ||
93 | <div class="col d-flex flex-column"> | |
94 | <h4 class="mb-5">Frequency</h4> | |
95 | <div class="row pt-4"> | |
96 | <div class="col"> | |
0c707f0b SH |
97 | <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked> |
98 | <label for="one-time-payment" class="form-check-label radiobtn">One time</label> | |
a33e1b4b SH |
99 | </div> |
100 | <div class="col"> | |
0c707f0b SH |
101 | <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly"> |
102 | <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label> | |
a33e1b4b SH |
103 | </div> |
104 | </div> | |
105 | </div> | |
106 | </div> | |
107 | ||
108 | <div class="row mt-6"> | |
109 | <div class="inline-card bg-blue-grey-50 w-100 p-5"> | |
110 | <div class="row mb-6"> | |
111 | <div class="col"> | |
112 | <h4 class="mb-5">Choose an amount</h4> | |
0c707f0b | 113 | <div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;"> |
a33e1b4b | 114 | <input class="amount-check" type="radio" name="amount" id="10" value="10" checked> |
0c707f0b | 115 | <label for="10" class="form-check-label amount">10<span class="currency"></span></label> |
a33e1b4b SH |
116 | |
117 | <input class="amount-check" type="radio" name="amount" id="25" value="25"> | |
0c707f0b | 118 | <label for="25" class="form-check-label amount">25<span class="currency"></span></label> |
a33e1b4b SH |
119 | |
120 | <input class="amount-check" type="radio" name="amount" id="50" value="50"> | |
0c707f0b SH |
121 | <label for="50" class="form-check-label amount">50<span class="currency"><span class="currency"></label> |
122 | ||
123 | <input class="amount-check" type="radio" name="amount" id="50" value="50"> | |
124 | <label for="50" class="form-check-label amount">75<span class="currency"></span></label> | |
a33e1b4b SH |
125 | |
126 | <input class="amount-check" type="radio" name="amount" id="100" value="100"> | |
0c707f0b | 127 | <label for="100" class="form-check-label amount">100<span class="currency"></span></label> |
a33e1b4b SH |
128 | |
129 | <input class="amount-check" type="radio" name="amount" id="250" value="250"> | |
0c707f0b | 130 | <label for="250" class="form-check-label amount">250<span class="currency"></span></label> |
a33e1b4b SH |
131 | </div> |
132 | </div> | |
133 | <div class="col"> | |
134 | <div class="form-group"> | |
135 | <h4 class="mb-5">Enter your own</h4> | |
0c707f0b | 136 | <input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount"> |
a33e1b4b SH |
137 | </div> |
138 | </div> | |
139 | </div> | |
140 | <div class="row mt-6"> | |
0c707f0b SH |
141 | <div class="col d-flex flex-row"> |
142 | <h4 class="mr-3">Choose payment</h4> | |
143 | <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg> | |
144 | <p class="text-uppercase blue_grey_300"><strong>Secure</strong></p> | |
a33e1b4b SH |
145 | </div> |
146 | </div> | |
147 | ||
0c707f0b SH |
148 | <div class="row d-flex pl-4 pr-4 mb-6"> |
149 | <div class="col"> | |
150 | <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked> | |
151 | <label for="creditcard" class="form-check-label radiobtn" style="background-position: 0 20px"> | |
152 | <picture> | |
153 | <source srcset="{{ static_url("img/amex.png") }}, | |
154 | {{ static_url("img/amex@2x.png") }} 2x, | |
155 | {{ static_url("img/amex@3x.png") }} 3x "> | |
156 | <img src="{{ static_url("img/amex.png") }}" | |
157 | srcset="{{ static_url("img/amex.png") }}, | |
158 | {{ static_url("img/amex@2x.png") }} 2x, | |
159 | {{ static_url("img/amex@3x.png") }} 3x " | |
160 | alt="Amex" class="m-4"> | |
161 | </picture> | |
162 | ||
163 | <picture> | |
164 | <source srcset="{{ static_url("img/mastercard.png") }}, | |
165 | {{ static_url("img/mastercard@2x.png") }} 2x, | |
166 | {{ static_url("img/mastercard@3x.png") }} 3x "> | |
167 | <img src="{{ static_url("img/mastercard.png") }}" | |
168 | srcset="{{ static_url("img/mastercard.png") }}, | |
169 | {{ static_url("img/mastercard@2x.png") }} 2x, | |
170 | {{ static_url("img/mastercard@3x.png") }} 3x " | |
171 | alt="Mastercard" class="m-4"> | |
172 | </picture> | |
173 | ||
174 | <picture> | |
175 | <source srcset="{{ static_url("img/visa.png") }}, | |
176 | {{ static_url("img/visa@2x.png") }} 2x, | |
177 | {{ static_url("img/visa@3x.png") }} 3x "> | |
178 | <img src="{{ static_url("img/visa.png") }}" | |
179 | srcset="{{ static_url("img/visa.png") }}, | |
180 | {{ static_url("img/visa@2x.png") }} 2x, | |
181 | {{ static_url("img/visax@3x.png") }} 3x " | |
182 | alt="Visa" class="m-4"> | |
183 | </picture> | |
184 | </label> | |
185 | </div> | |
186 | ||
187 | <div class="col" style="padding-top: 20px;"> | |
188 | <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment"> | |
189 | <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label> | |
190 | </div> | |
a33e1b4b SH |
191 | </div> |
192 | </div> | |
193 | </div> | |
194 | ||
195 | <button type="button" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);">Donate Now</button> | |
196 | ||
197 | <p class="small text-left mt-6 mb-6"> | |
198 | 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. | |
199 | </p> | |
200 | </div> | |
b54b8ec3 SH |
201 | </div> |
202 | </div> | |
60b0917c MT |
203 | </div> |
204 | </div> | |
a33e1b4b SH |
205 | </div> |
206 | ||
207 | <div class="row text-left"> | |
208 | <div class="col-5"> | |
a33e1b4b | 209 | </div> |
b54b8ec3 | 210 | |
a33e1b4b SH |
211 | <div class="col-5 offset-2"> |
212 | <h3>Frequently Asked Questions</h3> | |
213 | </div> | |
214 | </div> | |
215 | </section> | |
7771acea | 216 | </div> |
b54b8ec3 | 217 | </div> |
0c707f0b SH |
218 | |
219 | <!-- Icons --> | |
220 | <svg aria-hidden="true" style="display: none"> | |
221 | <symbol id="secure" viewBox="0 0 24 24"> | |
222 | <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"/> | |
223 | </symbol> | |
224 | </svg> | |
b54b8ec3 | 225 | |
f5b55ea7 | 226 | {% end block %} |