]>
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"> | |
16 | <h3>IP<strong>Fire</strong> is an Open Source software project.</h3> | |
17 | {% if lang == "de" %} | |
18 | <p class="copy"> | |
19 | Die Entwicklung und die Fortführung des Projekts wird allein | |
20 | von einer Gruppe von Freiwilligen getragen, die ein Produkt | |
21 | entwickelt hat, das tagtäglich von Hunderttausenden genutzt | |
22 | wird. | |
23 | </p> | |
24 | ||
25 | <p class="copy"> | |
26 | Jede einzelne Spende hilft IPFire noch weiter zu verbessern... | |
27 | </p> | |
28 | {% else %} | |
29 | <p class="copy"> | |
30 | IPFire is an Open Source software project. | |
31 | </p> | |
32 | ||
33 | <p class="copy"> | |
34 | Development and keeping the project healthy is carried out by a | |
35 | group of volunteers who have built a very successful product, | |
36 | which hundreds of thousands of people use every day. | |
37 | </p> | |
38 | ||
39 | <p class="copy"> | |
40 | Your donation helps us to make IPFire even better... | |
41 | </p> | |
42 | {% end %} | |
b54b8ec3 | 43 | </div> |
a33e1b4b SH |
44 | |
45 | <div class="col pl-5 pr-5"> | |
46 | <div class="card p-3 pt-6"> | |
47 | <div class="row"> | |
48 | <div class="col d-flex flex-column"> | |
49 | <h4 class="mb-5">Choose a currency</h4> | |
50 | <div class="dropdown-wrapper"> | |
51 | <select class="currency-dropdown"> | |
52 | <option class="form-control" value="EUR €">EUR €</option> | |
53 | <option class="form-control" value="US $">US $</option> | |
54 | </select> | |
55 | </div> | |
56 | </div> | |
57 | ||
58 | <div class="col d-flex flex-column"> | |
59 | <h4 class="mb-5">Frequency</h4> | |
60 | <div class="row pt-4"> | |
61 | <div class="col"> | |
62 | <label class="form-check-label"> | |
63 | <input class="form-check-input mr-4" type="radio" name="frequency" id="one-time-payment" value="single" onclick="Check()" checked> | |
64 | One time | |
65 | </label> | |
66 | </div> | |
67 | <div class="col"> | |
68 | <label class="form-check-label"> | |
69 | <input class="form-check-input mr-4" type="radio" name="frequency" id="monthly-payment" value="monthly" onclick="Check()"> | |
70 | Monthly | |
71 | </label> | |
72 | </div> | |
73 | </div> | |
74 | </div> | |
75 | </div> | |
76 | ||
77 | <div class="row mt-6"> | |
78 | <div class="inline-card bg-blue-grey-50 w-100 p-5"> | |
79 | <div class="row mb-6"> | |
80 | <div class="col"> | |
81 | <h4 class="mb-5">Choose an amount</h4> | |
82 | <div class="form-group d-flex flex-row flex-wrap" id="ifonetime" style="margin-left: -8px;"> | |
83 | <input class="amount-check" type="radio" name="amount" id="10" value="10" checked> | |
84 | <label for="10" class="form-check-label amount">10€</label> | |
85 | ||
86 | <input class="amount-check" type="radio" name="amount" id="25" value="25"> | |
87 | <label for="25" class="form-check-label amount">25€</label> | |
88 | ||
89 | <input class="amount-check" type="radio" name="amount" id="50" value="50"> | |
90 | <label for="50" class="form-check-label amount">50€</label> | |
91 | ||
92 | <input class="amount-check" type="radio" name="amount" id="100" value="100"> | |
93 | <label for="100" class="form-check-label amount">100€</label> | |
94 | ||
95 | <input class="amount-check" type="radio" name="amount" id="250" value="250"> | |
96 | <label for="250" class="form-check-label amount">250€</label> | |
97 | </div> | |
98 | </div> | |
99 | <div class="col"> | |
100 | <div class="form-group"> | |
101 | <h4 class="mb-5">Enter your own</h4> | |
102 | <input type="text" class="ownamount w-100" id="enterYourOwn" placeholder="1€ at least"> | |
103 | </div> | |
104 | </div> | |
105 | </div> | |
106 | <div class="row mt-6"> | |
107 | <div class="col"> | |
108 | <h4>Choose payment</h4> | |
109 | </div> | |
110 | <div class="col d-flex flex-row justify-content-end"> | |
111 | <i class="fa fa-lock mr-3" aria-hidden="true" style="position: relative; top: 4px;"></i> | |
112 | <p class="text-uppercase">Secure</p> | |
113 | </div> | |
114 | </div> | |
115 | ||
116 | <div class="row d-flex align-items-center pl-4 pr-4 mb-6"> | |
117 | <label class="form-check-label col d-flex align-items-center"> | |
118 | <input class="form-check-input mr-4" type="radio" name="payment" id="creditcard" value="creditcard" checked style="margin-top: 0;"> | |
119 | <i class="fa fa-cc-amex fa-3x m-3" aria-hidden="true"></i> | |
120 | <i class="fa fa-cc-mastercard fa-3x m-3" aria-hidden="true"></i> | |
121 | <i class="fa fa-cc-visa fa-3x m-3" aria-hidden="true"></i> | |
122 | </label> | |
123 | <label class="form-check-label col"> | |
124 | <input class="form-check-input mr-4" type="radio" name="payment" id="sepa-payment" value="sepa-payment"> | |
125 | SEPA direct debit | |
126 | </label> | |
127 | </div> | |
128 | </div> | |
129 | </div> | |
130 | ||
131 | <button type="button" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);">Donate Now</button> | |
132 | ||
133 | <p class="small text-left mt-6 mb-6"> | |
134 | 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. | |
135 | </p> | |
136 | </div> | |
b54b8ec3 SH |
137 | </div> |
138 | </div> | |
60b0917c MT |
139 | </div> |
140 | </div> | |
a33e1b4b SH |
141 | </div> |
142 | ||
143 | <div class="row text-left"> | |
144 | <div class="col-5"> | |
145 | <div class="mb-6"> | |
146 | <h3>Why should I donate?</h3> | |
147 | ||
148 | <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall | |
149 | distribution that is free to use for everyone anywhere in the world. To do that, | |
150 | we need to provide the infrastructure to distribute it to our users and provide | |
151 | the right tools for our developers to help them to make IPFire better every day. | |
152 | </p> | |
153 | ||
154 | <p class="copy">Donations from individuals and corporations are the only way to keep all of our | |
155 | services free for everyone. They pay for hosting, advertising, purchase | |
156 | equipment and to fund the work of the people behind it. | |
157 | </p> | |
158 | ||
159 | <p class="copy">Our ambition is to compete with projects backed by large corporations and | |
160 | proprietary solutions and we cannot do that without you. Become a supporter | |
161 | today! | |
162 | </p> | |
163 | </div> | |
b54b8ec3 | 164 | |
a33e1b4b SH |
165 | <div class="mb-6"> |
166 | <h3>How much should I give?</h3> | |
167 | ||
168 | <p class="copy">Donations range from single digits donations to hundreds. For us it is important | |
169 | to give something back to help this project to succeed. If you want to help, | |
170 | please do so and encourage others to do so, too. | |
171 | </p> | |
172 | </div> | |
173 | </div> | |
b54b8ec3 | 174 | |
a33e1b4b SH |
175 | <div class="col-5 offset-2"> |
176 | <h3>Frequently Asked Questions</h3> | |
177 | </div> | |
178 | </div> | |
179 | </section> | |
7771acea | 180 | </div> |
b54b8ec3 SH |
181 | </div> |
182 | ||
f5b55ea7 | 183 | {% end block %} |