[people/shoehn/ipfire.org.git] / templates / donate.html

{% extends "base-1.html" %}
		
{% block title %}{{ _("Donate") }}{% end block %}
 
{% block container %}
	<div class="container">
		<div class="row">
			<section class="features-content col-12 text-center">
				<h2 class="display-2">{{ _("Donate") }}</h2>
				
				<div class="row justify-content-center mb-6">
					<div class="col-12">
						<div class="row">
							<div class="donation-card d-flex flex-row text-left">
								<div class="col-4 bg-blue-grey-900 text-white p-5 pt-6" style="border-radius: 4px 0 0 4px">
									<div class="mb-6">
										<h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
										{% if lang == "de" %}
											<p class="copy">
												Die Entwicklung und die Fortführung des Projekts wird allein
												von einer Gruppe von Freiwilligen getragen, die ein Produkt
												entwickelt hat, das tagtäglich von Hunderttausenden genutzt
												wird.
											</p>
								
											<p class="copy">
												Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
											</p>
										{% else %}
											<p class="copy">
												IPFire is an Open Source software project.
											</p>
								
											<p class="copy">
												Development and keeping the project healthy is carried out by a
												group of volunteers who have built a very successful product,
												which hundreds of thousands of people use every day.
											</p>
								
											<p class="copy">
												Your donation helps us to make IPFire even better...
											</p>
									</div>
										
									<div class="mb-6">										
										<h3>Why should I donate?</h3>
							
										<p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
											distribution that is free to use for everyone anywhere in the world. To do that,
											we need to provide the infrastructure to distribute it to our users and provide
											the right tools for our developers to help them to make IPFire better every day.
										</p>
										
										<p class="copy">Donations from individuals and corporations are the only way to keep all of our
											services free for everyone. They pay for hosting, advertising, purchase
											equipment and to fund the work of the people behind it.
										</p>
										
										<p class="copy">Our ambition is to compete with projects backed by large corporations and
											proprietary solutions and we cannot do that without you. Become a supporter
											today!
										</p>
									</div>
								
									<div class="mb-6">
										<h3>How much should I give?</h3>
										
										<p class="copy">Donations range from single digits donations to hundreds. For us it is important
											to give something back to help this project to succeed. If you want to help,
											please do so and encourage others to do so, too.
										</p>
									</div>
								{% end %}
								</div>
								
								<div class="col pl-5 pr-5">
									<div class="card p-3 pt-6">
										<div class="row">
											<div class="col d-flex flex-column">
												<h4 class="mb-5">Choose a currency</h4>
												<div class="row pt-4">
													<div class="col">
														<input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked>
														<label for="euro" class="form-check-label radiobtn">€uro</label>
													</div>
													<div class="col">
														<input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd">
														<label for="usd" class="form-check-label radiobtn">USD $</label>
													</div>
												</div>
											</div>
											
											<div class="col d-flex flex-column">
												<h4 class="mb-5">Frequency</h4>
												<div class="row pt-4">
													<div class="col">
														<input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked>
														<label for="one-time-payment" class="form-check-label radiobtn">One time</label>
													</div>
													<div class="col">
														<input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
														<label for="monthly-payment" class="form-check-label radiobtn">Monthly</label>
													</div>
												</div>
											</div>
										</div>
									
										<div class="row mt-6">
											<div class="inline-card bg-blue-grey-50 w-100 p-5">
												<div class="row mb-6">
													<div class="col">
														<h4 class="mb-5">Choose an amount</h4>
														<div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;">
															<input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
															<label for="10" class="form-check-label amount">10<span class="currency"></span></label>
															
															<input class="amount-check" type="radio" name="amount" id="25" value="25">
															<label for="25" class="form-check-label amount">25<span class="currency"></span></label>
															
															<input class="amount-check" type="radio" name="amount" id="50" value="50">
															<label for="50" class="form-check-label amount">50<span class="currency"><span class="currency"></label>
															
															<input class="amount-check" type="radio" name="amount" id="50" value="50">
															<label for="50" class="form-check-label amount">75<span class="currency"></span></label>
														
															<input class="amount-check" type="radio" name="amount" id="100" value="100">
															<label for="100" class="form-check-label amount">100<span class="currency"></span></label>
															
															<input class="amount-check" type="radio" name="amount" id="250" value="250">
															<label for="250" class="form-check-label amount">250<span class="currency"></span></label>
														</div>											
													</div>
													<div class="col">
														<div class="form-group">
															<h4 class="mb-5">Enter your own</h4>
															<input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount">
														</div>
													</div>
												</div>
												<div class="row mt-6">
													<div class="col d-flex flex-row">
														<h4 class="mr-3">Choose payment</h4>
														<svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg>
														<p class="text-uppercase blue_grey_300"><strong>Secure</strong></p>
													</div>
												</div>
												
												<div class="row d-flex pl-4 pr-4 mb-6">
													<div class="col">
														<input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>
														<label for="creditcard" class="form-check-label radiobtn" style="background-position: 0 20px">
															<picture>
																<source srcset="{{ static_url("img/amex.png") }},
																	{{ static_url("img/amex@2x.png") }} 2x,
																	{{ static_url("img/amex@3x.png") }} 3x ">
																<img src="{{ static_url("img/amex.png") }}"
																	 srcset="{{ static_url("img/amex.png") }},
																	{{ static_url("img/amex@2x.png") }} 2x,
																	{{ static_url("img/amex@3x.png") }} 3x "
																	alt="Amex" class="m-4">
															</picture>
															
															<picture>
																<source srcset="{{ static_url("img/mastercard.png") }},
																	{{ static_url("img/mastercard@2x.png") }} 2x,
																	{{ static_url("img/mastercard@3x.png") }} 3x ">
																<img src="{{ static_url("img/mastercard.png") }}"
																	 srcset="{{ static_url("img/mastercard.png") }},
																	{{ static_url("img/mastercard@2x.png") }} 2x,
																	{{ static_url("img/mastercard@3x.png") }} 3x "
																	alt="Mastercard" class="m-4">
															</picture>
															
															<picture>
																<source srcset="{{ static_url("img/visa.png") }},
																	{{ static_url("img/visa@2x.png") }} 2x,
																	{{ static_url("img/visa@3x.png") }} 3x ">
																<img src="{{ static_url("img/visa.png") }}"
																	 srcset="{{ static_url("img/visa.png") }},
																	{{ static_url("img/visa@2x.png") }} 2x,
																	{{ static_url("img/visax@3x.png") }} 3x "
																	alt="Visa" class="m-4">
															</picture>
														</label>
													</div>
													
													<div class="col" style="padding-top: 20px;">
														<input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
														<label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label>
													</div>
												</div>
											</div>
										</div>
										
										<button type="button" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);">Donate Now</button>
									
										<p class="small text-left mt-6 mb-6">
											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.
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="row text-left">
					<div class="col-5">
					</div>
					
					<div class="col-5 offset-2">
						<h3>Frequently Asked Questions</h3>
					</div>
				</div>
			</section>
		</div>
	</div>

<!-- Icons -->
<svg aria-hidden="true" style="display: none">
	<symbol id="secure" viewBox="0 0 24 24">
		<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"/>
	</symbol>
</svg>
	
{% end block %}
Commit	Line	Data
e64ce07e	1	{% extends "base-1.html" %}
d964a8fa	2
9b5ac075	3	{% block title %}{{ _("Donate") }}{% end block %}
60b0917c MT	4
60b0917c MT	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>
0c707f0b SH	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>
0c707f0b SH	98	<label for="one-time-payment" class="form-check-label radiobtn">One time</label>
a33e1b4b SH	99	</div>
a33e1b4b SH	100	<div class="col">
0c707f0b SH	101	<input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
0c707f0b SH	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
a33e1b4b SH	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
a33e1b4b SH	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
a33e1b4b SH	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
a33e1b4b SH	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>
b54b8ec3 SH	202	</div>
60b0917c MT	203	</div>
60b0917c MT	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 %}