[ipfire.org.git] / src / templates / donate.html

{% extends "base.html" %}

{% block title %}{{ _("Donate") }}{% end block %}

{% block container %}
	{% set amounts = (10, 25, 50, 75, 100, 250) %}

	<h1 class="text-center mt-5 mb-5">{{ _("Donate") }}</h1>

	<div class="container">
		<div class="card mb-5">
			<div class="card-body">
				<div class="row flex-lg-row-reverse">
					<div class="col-12 col-lg-8">
						<form action="" method="POST">
							{% raw xsrf_form_html() %}

							<div class="row justify-content-center">
								<div class="col-12 col-sm-11 col-xl-12 px-4 px-sm-6">
									<div class="row">
										<div class="col-12 col-lg-6 mb-3 mb-md-0">
											<h6>Choose a currency</h6>

											<div class="form-check form-check-inline">
												<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
													{% if currency == "EUR" %}checked{% end %}>
												<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
											</div>

											<div class="form-check form-check-inline">
												<input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
													{% if currency == "USD" %}checked{% end %}>
												<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
											</div>
										</div>

										<div class="col-12 col-lg-6">
											<h6>Frequency</h6>

											<div class="form-check form-check-inline">
												<input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
													value="one-time" {% if frequency == "one-time" %}checked{% end %}>
												<label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
											</div>

											<div class="form-check form-check-inline">
												<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
													value="monthly" {% if frequency == "monthly" %}checked{% end %}>
												<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
											</div>
										</div>
									</div>

									<div class="mt-5 mb-3 p-5 bg-light">
										<h6>{{ _("Choose an amount") }}</h6>

										<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>

										<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
											{% for a in amounts %}
												<label class="btn btn-secondary btn-lg mb-2">
													<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
														autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
												</label>
											{% end %}
										</div>

										<div class="form-group row mb-5">
											<label class="col-sm-5 col-form-label col-form-label-lg">
												or enter your own
											</label>

											<div class="col-sm-5">
												<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
													{% if not amount in amounts %}value="{{ amount }}"{% end %}>
											</div>
										</div>

										<div class="row mb-5">
											<div class="col d-flex flex-column">
												<div class="form-row">
													<div class="col">
														<div class="form-check form-check-inline mb-3">
															<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
															<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
														</div>
														<div class="form-check form-check-inline mb-3">
															<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
															<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
														</div>
													</div>
												</div>

												<div class="form-row">
													<div class="col-sm-6">
														<div class="form-group">
															<input type="text" class="form-control" name="first_name"
																placeholder="{{ _("First Name" )}}" required>
														</div>
													</div>

													<div class="col-sm-6">
														<div class="form-group">
															<input type="text" class="form-control" name="last_name"
																placeholder="{{ _("Last Name" )}}" required>
														</div>
													</div>
												</div>

												<div class="form-group">
													<input type="email" class="form-control" name="email"
														placeholder="{{ _("Email Address") }}" required>
												</div>

												<div class="form-group">
													<input type="text" class="form-control" name="company_name"
														placeholder="{{ _("Company Name (optional)") }}">
												</div>

												<div class="form-group">
													<input type="text" class="form-control" name="street1"
														placeholder="{{ _("Address Line 1") }}" required>
												</div>

												<div class="form-group">
													<input type="text" class="form-control" name="street2"
														placeholder="{{ _("Address Line 2") }}">
												</div>

												<div class="form-row">
													<div class="col-sm-6">
														<div class="form-group">
															<input type="text" class="form-control" name="city"
																placeholder="{{ _("City") }}" required>
														</div>
													</div>

													<div class="col-sm-6">
														<div class="form-group">
															<input type="text" class="form-control" name="post_code"
																placeholder="{{ _("Post Code") }}" required>
														</div>
													</div>
												</div>

												<div class="form-row">
													<div class="col-sm-6">
														<div class="form-group">
															<select class="form-control" name="country_code" required>
																<option value="">- {{ _("Country") }} -</option>

																{% for c in countries %}
																	<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
																{% end %}
															</select>
														</div>
													</div>

													<div class="col-sm-6">
														<div class="form-group">
															<input type="text" class="form-control" name="state"
																placeholder="{{ _("State (optional)") }}">
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="row mb-5">
											<div class="col text-center">
												<input type="submit" class="btn btn-primary btn-lg"
													id="donate" value="{{ _("Donate Now") }}">
											</div>
										</div>

										<div class="row">
											<div class="col d-flex justify-content-center">
												<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-xl-2">
												</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-xl-2">
												</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/visa@3x.png") }} 3x"
														alt="Visa" class="m-xl-2">
												</picture>

												<!-- XXX insert SEPA logo -->
											</div>
										</div>

										<div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
											<div class="modal-dialog modal-dialog-centered" role="document">
												<div class="modal-content">
													<div class="modal-header">
														<h5 class="modal-title">Modal title</h5>
														<button type="button" class="close" data-dismiss="modal" aria-label="Close">
															<span aria-hidden="true">&times;</span>
														</button>
													</div>

													<div class="modal-body">
														<p>Modal body text goes here.</p>
													</div>

													<div class="modal-footer">
														<input type="submit" class="btn btn-primary" value="Donate Now">
														<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
													</div>
												</div>
											</div>
										</div>
									</div>

									<p class="small text-muted mb-0">
										The organization you will be donating to is Lightning Wire Labs GmbH who is
										kindly handling donations for the IPFire project.
										After clicking "Donate Now", you will be redirected to Lightning Wire Labs
										where you will be able to complete the transaction.
									</p>
								</div>
							</div>
						</form>
					</div>

					<div class="col col-lg-4">
						<h5>Why we need you to donate today</h5>

						<p>
							IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
							schools and homes worldwide.
						</p>

						<p>
							It is trusted by many and has proven that free software, developed by a diverse
							community, can not only be equal, but better than proprietary solutions.
						</p>

						<p>
							But still, development doesn’t come free to us and therefore
							we are asking for your contribution today.
						</p>
					</div>
				</div>
			</div>
		</div>

		<div class="row justify-content-center">
			<div class="col-10 col-md-5">
				<section>
					<h3>Why should I donate?</h3>

					<p class="text-muted">
						At IPFire, we are working hard to provide you with a free firewall distribution
						that is like no other. We release updates regularly and enhance functionality
						to make IPFire more secure, faster and easier to use.
					</p>

					<p class="text-muted">
						To achieve our high standards that we have set for ourselves, we need your help.

						Only with your donation, we can get the right tools, people and utilities that
						we need to make our work most efficient and reach our maximum potential.

						Only with your donation, we can achieve our vision to make the Internet a safer
						place that is fair for everyone and giving equal opportunities.
					</p>
				</section>

				<section>
					<h3>How much should I give?</h3>

					<p class="text-muted">
						We are grateful for every single donation, but of course, we appreciate
						if you help us as much as you can.
					</p>

					<p class="text-muted">
						We rely on steady contributions from companies to keep the project healthy
						and encourage them to set up a monthly donation.
					</p>
				</section>
			</div>

			<div class="col-10 col-md-5 faq">
				<h3>Frequently Asked Questions</h3>

				<p>
					<a data-toggle="collapse" href="#faq-bank-transfer">
						Do you accept bank transfer via SEPA?
					</a>
				</p>

				<div class="collapse text-muted" id="faq-bank-transfer">
					<p>
						We do accept direct transfers through SEPA. These are our bank details:
					</p>

					<dl>
						<dt>IBAN</dt>
						<dd>DE76 3605 0105 1010 8206 84</dd>

						<dt>BIC</dt>
						<dd>SPESDE3EXXX</dd>
					</dl>
				</div>

				<p>
					<a data-toggle="collapse" href="#faq-address">
						Why do you need my address in order to process a donation?
					</a>
				</p>

				<div class="collapse text-muted" id="faq-address">
					<p>
						We understand that your privacy is very important.
					</p>

					<p>
						We ask for a minimum amount of information required to process
						credit card donations, including billing addresses.
						This allows our payment processor to verify your identity,
						process your payment, and prevent fraudulent charges to your credit card.
					</p>

					<p>
						We keep your information private - if you have questions, please refer to
						Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
					</p>

					<p>
						If you would rather not fill in your information on our online donation form,
						you can send your donation via SEPA bank transfer.
					</p>
				</div>

				<p>
					<a data-toggle="collapse" href="#faq-tax-deduction">
						Is my donation tax deductible?
					</a>
				</p>

				<div class="collapse text-muted" id="faq-tax-deduction">
					<p>
						IPFire is not registered as a charitable organization and therefore donations
						are not tax deductible in Germany or the European Union.
					</p>

					<p>
						For donors outside of the European Union, please consult your tax advisor
						about whether your donation is tax deductible.
					</p>
				</div>

				<p>
					<a data-toggle="collapse" href="#faq-cancel">
						How do I cancel or change my recurring donation?
					</a>
				</p>

				<div class="collapse text-muted" id="faq-cancel">
					<p>
						Your credit card statements or bank statements will contain a link
						that you can follow to cancel your donation at any time.
					</p>
				</div>

				<p>
					<a data-toggle="collapse" href="#faq-email">
						Who can I email directly with questions about donating?
					</a>
				</p>

				<div class="collapse text-muted" id="faq-email">
					<p>
						If you have a question about donating to the IPFire Project,
						please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
					</p>
				</div>
			</div>
		</div>
	</div>
{% end block %}

{% block javascript %}
	<script type="text/javascript">
		$(document).ready(function() {
			var amount = $("input[name='amount']");

			// Adjust form to default currency
			var currency = $("input[name='currency']:checked").val();
			if (currency == "EUR") {
				$(".USD").hide();
			} else if (currency == "USD") {
				$(".EUR").hide();
			}

			$("input[name='currency']").on("change", function() {
				var currency = $(this).val();

				if (currency == "EUR") {
					$(".EUR").show();
					$(".USD").hide();
				} else if (currency == "USD") {
					$(".EUR").hide();
					$(".USD").show();
				}
			});

			// Copy amount when clicking on a radio button
			$("input[name='amount-selector']").on("change", function() {
				var value = $(this).val();
				if (value) {
					amount.val(value);

					// Clear input field
					$("input[name='amount-input']").val("");
				}
			});

			$("input[name='amount-input']").on("change", function() {
				var value = $(this).val();
				if (value) {
					amount.val(value);

					// Uncheck all radio buttons
					$("input[name='amount-selector']").removeAttr("checked");
					$("input[name='amount-selector']").prop("checked", false);
				}
			});

			$("#donate").click(function (event) {
				var frequency = $("input[name='frequency']").val();

				if (frequency == "one-time") {
					event.preventDefault();

					$("#modal-upsell").modal("show");
				}
			});
		});
	</script>
{% end block %}
Commit	Line	Data
081800ca	1	{% extends "base.html" %}
95b30f84	2
9b5ac075	3	{% block title %}{{ _("Donate") }}{% end block %}
95b30f84	4
60b0917c	5	{% block container %}
95b30f84 MT	6	{% set amounts = (10, 25, 50, 75, 100, 250) %}
	7
	8	<h1 class="text-center mt-5 mb-5">{{ _("Donate") }}</h1>
	9
a41e6d77 MT	10	<div class="container">
	11	<div class="card mb-5">
	12	<div class="card-body">
	13	<div class="row flex-lg-row-reverse">
	14	<div class="col-12 col-lg-8">
	15	<form action="" method="POST">
	16	{% raw xsrf_form_html() %}
	17
	18	<div class="row justify-content-center">
8bc72662	19	<div class="col-12 col-sm-11 col-xl-12 px-4 px-sm-6">
a41e6d77 MT	20	<div class="row">
	21	<div class="col-12 col-lg-6 mb-3 mb-md-0">
	22	<h6>Choose a currency</h6>
	23
	24	<div class="form-check form-check-inline">
bd2723d4 MT	25	<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR"
bd2723d4 MT	26	{% if currency == "EUR" %}checked{% end %}>
a41e6d77 MT	27	<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
a41e6d77 MT	28	</div>
95b30f84	29
a41e6d77	30	<div class="form-check form-check-inline">
bd2723d4 MT	31	<input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
bd2723d4 MT	32	{% if currency == "USD" %}checked{% end %}>
a41e6d77 MT	33	<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
	34	</div>
	35	</div>
95b30f84	36
a41e6d77 MT	37	<div class="col-12 col-lg-6">
	38	<h6>Frequency</h6>
	39
	40	<div class="form-check form-check-inline">
bd2723d4 MT	41	<input class="form-check-input" type="radio" name="frequency" id="frequency-one-time"
	42	value="one-time" {% if frequency == "one-time" %}checked{% end %}>
	43	<label class="form-check-label" for="frequency-one-time">{{ _("One Time") }}</label>
a41e6d77 MT	44	</div>
	45
	46	<div class="form-check form-check-inline">
bd2723d4 MT	47	<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly"
bd2723d4 MT	48	value="monthly" {% if frequency == "monthly" %}checked{% end %}>
a41e6d77 MT	49	<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
	50	</div>
	51	</div>
	52	</div>
	53
8bc72662	54	<div class="mt-5 mb-3 p-5 bg-light">
a41e6d77 MT	55	<h6>{{ _("Choose an amount") }}</h6>
a41e6d77 MT	56
bd2723d4	57	<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
6d151de3	58
a41e6d77	59	<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
bd2723d4	60	{% for a in amounts %}
a41e6d77	61	<label class="btn btn-secondary btn-lg mb-2">
bd2723d4 MT	62	<input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
bd2723d4 MT	63	autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
a41e6d77 MT	64	</label>
	65	{% end %}
	66	</div>
	67
	68	<div class="form-group row mb-5">
	69	<label class="col-sm-5 col-form-label col-form-label-lg">
	70	or enter your own
	71	</label>
	72
	73	<div class="col-sm-5">
8bc72662	74	<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
bd2723d4	75	{% if not amount in amounts %}value="{{ amount }}"{% end %}>
a41e6d77 MT	76	</div>
	77	</div>
	78
	79	<div class="row mb-5">
a41e6d77 MT	80	<div class="col d-flex flex-column">
	81	<div class="form-row">
	82	<div class="col">
	83	<div class="form-check form-check-inline mb-3">
ebe19f8e MT	84	<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
ebe19f8e MT	85	<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
a41e6d77 MT	86	</div>
a41e6d77 MT	87	<div class="form-check form-check-inline mb-3">
ebe19f8e MT	88	<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
ebe19f8e MT	89	<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
a41e6d77 MT	90	</div>
	91	</div>
	92	</div>
	93
	94	<div class="form-row">
	95	<div class="col-sm-6">
	96	<div class="form-group">
450af3dc MT	97	<input type="text" class="form-control" name="first_name"
450af3dc MT	98	placeholder="{{ _("First Name" )}}" required>
a41e6d77 MT	99	</div>
	100	</div>
	101
	102	<div class="col-sm-6">
	103	<div class="form-group">
450af3dc	104	<input type="text" class="form-control" name="last_name"
a41e6d77 MT	105	placeholder="{{ _("Last Name" )}}" required>
	106	</div>
	107	</div>
	108	</div>
	109
	110	<div class="form-group">
450af3dc	111	<input type="email" class="form-control" name="email"
a41e6d77 MT	112	placeholder="{{ _("Email Address") }}" required>
	113	</div>
	114
	115	<div class="form-group">
450af3dc	116	<input type="text" class="form-control" name="company_name"
a41e6d77 MT	117	placeholder="{{ _("Company Name (optional)") }}">
	118	</div>
	119
	120	<div class="form-group">
450af3dc	121	<input type="text" class="form-control" name="street1"
a41e6d77 MT	122	placeholder="{{ _("Address Line 1") }}" required>
a41e6d77 MT	123	</div>
95b30f84	124
a41e6d77	125	<div class="form-group">
450af3dc	126	<input type="text" class="form-control" name="street2"
a41e6d77 MT	127	placeholder="{{ _("Address Line 2") }}">
	128	</div>
	129
	130	<div class="form-row">
	131	<div class="col-sm-6">
	132	<div class="form-group">
450af3dc	133	<input type="text" class="form-control" name="city"
a41e6d77	134	placeholder="{{ _("City") }}" required>
2c361abc	135	</div>
be02b78f	136	</div>
a41e6d77 MT	137
	138	<div class="col-sm-6">
	139	<div class="form-group">
450af3dc	140	<input type="text" class="form-control" name="post_code"
a41e6d77 MT	141	placeholder="{{ _("Post Code") }}" required>
	142	</div>
	143	</div>
	144	</div>
	145
	146	<div class="form-row">
	147	<div class="col-sm-6">
	148	<div class="form-group">
450af3dc	149	<select class="form-control" name="country_code" required>
a41e6d77	150	<option value="">- {{ _("Country") }} -</option>
47113f9e MT	151
	152	{% for c in countries %}
	153	<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
	154	{% end %}
a41e6d77 MT	155	</select>
	156	</div>
	157	</div>
	158
	159	<div class="col-sm-6">
	160	<div class="form-group">
450af3dc	161	<input type="text" class="form-control" name="state"
a41e6d77 MT	162	placeholder="{{ _("State (optional)") }}">
	163	</div>
	164	</div>
	165	</div>
d9d6d3c3 MT	166	</div>
d9d6d3c3 MT	167	</div>
a41e6d77	168
d9d6d3c3 MT	169	<div class="row mb-5">
	170	<div class="col text-center">
	171	<input type="submit" class="btn btn-primary btn-lg"
a41e6d77 MT	172	id="donate" value="{{ _("Donate Now") }}">
	173	</div>
	174	</div>
	175
	176	<div class="row">
d9d6d3c3 MT	177	<div class="col d-flex justify-content-center">
	178	<picture>
	179	<source srcset="{{ static_url("img/amex.png") }},
	180	{{ static_url("img/amex@2x.png") }} 2x,
	181	{{ static_url("img/amex@3x.png") }} 3x">
	182	<img src="{{ static_url("img/amex.png") }}"
	183	srcset="{{ static_url("img/amex.png") }},
	184	{{ static_url("img/amex@2x.png") }} 2x,
	185	{{ static_url("img/amex@3x.png") }} 3x"
	186	alt="Amex" class="m-xl-2">
	187	</picture>
	188
	189	<picture>
	190	<source srcset="{{ static_url("img/mastercard.png") }},
	191	{{ static_url("img/mastercard@2x.png") }} 2x,
	192	{{ static_url("img/mastercard@3x.png") }} 3x">
	193	<img src="{{ static_url("img/mastercard.png") }}"
	194	srcset="{{ static_url("img/mastercard.png") }},
	195	{{ static_url("img/mastercard@2x.png") }} 2x,
	196	{{ static_url("img/mastercard@3x.png") }} 3x"
	197	alt="Mastercard" class="m-xl-2">
	198	</picture>
	199
	200	<picture>
	201	<source srcset="{{ static_url("img/visa.png") }},
	202	{{ static_url("img/visa@2x.png") }} 2x,
	203	{{ static_url("img/visa@3x.png") }} 3x">
	204	<img src="{{ static_url("img/visa.png") }}"
	205	srcset="{{ static_url("img/visa.png") }},
	206	{{ static_url("img/visa@2x.png") }} 2x,
	207	{{ static_url("img/visa@3x.png") }} 3x"
	208	alt="Visa" class="m-xl-2">
	209	</picture>
	210
	211	<!-- XXX insert SEPA logo -->
a41e6d77 MT	212	</div>
	213	</div>
	214
	215	<div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
	216	<div class="modal-dialog modal-dialog-centered" role="document">
	217	<div class="modal-content">
	218	<div class="modal-header">
	219	<h5 class="modal-title">Modal title</h5>
	220	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	221	<span aria-hidden="true">×</span>
	222	</button>
	223	</div>
	224
	225	<div class="modal-body">
	226	<p>Modal body text goes here.</p>
	227	</div>
	228
	229	<div class="modal-footer">
760295a7	230	<input type="submit" class="btn btn-primary" value="Donate Now">
a41e6d77 MT	231	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
a41e6d77 MT	232	</div>
fed291df SH	233	</div>
fed291df SH	234	</div>
be02b78f	235	</div>
a41e6d77 MT	236	</div>
a41e6d77 MT	237
8bc72662 MT	238	<p class="small text-muted mb-0">
	239	The organization you will be donating to is Lightning Wire Labs GmbH who is
	240	kindly handling donations for the IPFire project.
	241	After clicking "Donate Now", you will be redirected to Lightning Wire Labs
	242	where you will be able to complete the transaction.
a41e6d77	243	</p>
ef0d3151 SH	244	</div>
ef0d3151 SH	245	</div>
a41e6d77	246	</form>
95b30f84	247	</div>
a41e6d77 MT	248
a41e6d77 MT	249	<div class="col col-lg-4">
8bc72662	250	<h5>Why we need you to donate today</h5>
a41e6d77 MT	251
a41e6d77 MT	252	<p>
8bc72662 MT	253	IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
8bc72662 MT	254	schools and homes worldwide.
a41e6d77 MT	255	</p>
	256
	257	<p>
8bc72662 MT	258	It is trusted by many and has proven that free software, developed by a diverse
8bc72662 MT	259	community, can not only be equal, but better than proprietary solutions.
a41e6d77 MT	260	</p>
	261
	262	<p>
8bc72662 MT	263	But still, development doesn’t come free to us and therefore
8bc72662 MT	264	we are asking for your contribution today.
a41e6d77 MT	265	</p>
	266	</div>
	267	</div>
be02b78f SH	268	</div>
be02b78f SH	269	</div>
95b30f84	270
8bc72662 MT	271	<div class="row justify-content-center">
	272	<div class="col-10 col-md-5">
	273	<section>
	274	<h3>Why should I donate?</h3>
	275
	276	<p class="text-muted">
	277	At IPFire, we are working hard to provide you with a free firewall distribution
	278	that is like no other. We release updates regularly and enhance functionality
	279	to make IPFire more secure, faster and easier to use.
	280	</p>
	281
	282	<p class="text-muted">
	283	To achieve our high standards that we have set for ourselves, we need your help.
	284
	285	Only with your donation, we can get the right tools, people and utilities that
	286	we need to make our work most efficient and reach our maximum potential.
	287
	288	Only with your donation, we can achieve our vision to make the Internet a safer
	289	place that is fair for everyone and giving equal opportunities.
	290	</p>
	291	</section>
	292
	293	<section>
	294	<h3>How much should I give?</h3>
	295
	296	<p class="text-muted">
	297	We are grateful for every single donation, but of course, we appreciate
	298	if you help us as much as you can.
	299	</p>
	300
	301	<p class="text-muted">
	302	We rely on steady contributions from companies to keep the project healthy
	303	and encourage them to set up a monthly donation.
	304	</p>
	305	</section>
	306	</div>
a41e6d77	307
8bc72662 MT	308	<div class="col-10 col-md-5 faq">
8bc72662 MT	309	<h3>Frequently Asked Questions</h3>
a41e6d77	310
8bc72662 MT	311	<p>
	312	<a data-toggle="collapse" href="#faq-bank-transfer">
	313	Do you accept bank transfer via SEPA?
	314	</a>
	315	</p>
95b30f84	316
8bc72662 MT	317	<div class="collapse text-muted" id="faq-bank-transfer">
	318	<p>
	319	We do accept direct transfers through SEPA. These are our bank details:
	320	</p>
a41e6d77	321
8bc72662 MT	322	<dl>
	323	<dt>IBAN</dt>
	324	<dd>DE76 3605 0105 1010 8206 84</dd>
	325
	326	<dt>BIC</dt>
	327	<dd>SPESDE3EXXX</dd>
	328	</dl>
	329	</div>
	330
	331	<p>
	332	<a data-toggle="collapse" href="#faq-address">
	333	Why do you need my address in order to process a donation?
	334	</a>
	335	</p>
	336
	337	<div class="collapse text-muted" id="faq-address">
	338	<p>
	339	We understand that your privacy is very important.
	340	</p>
	341
	342	<p>
	343	We ask for a minimum amount of information required to process
	344	credit card donations, including billing addresses.
	345	This allows our payment processor to verify your identity,
	346	process your payment, and prevent fraudulent charges to your credit card.
	347	</p>
	348
	349	<p>
	350	We keep your information private - if you have questions, please refer to
	351	Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
	352	</p>
	353
	354	<p>
	355	If you would rather not fill in your information on our online donation form,
	356	you can send your donation via SEPA bank transfer.
	357	</p>
	358	</div>
	359
	360	<p>
	361	<a data-toggle="collapse" href="#faq-tax-deduction">
	362	Is my donation tax deductible?
	363	</a>
	364	</p>
	365
	366	<div class="collapse text-muted" id="faq-tax-deduction">
	367	<p>
	368	IPFire is not registered as a charitable organization and therefore donations
	369	are not tax deductible in Germany or the European Union.
	370	</p>
	371
	372	<p>
	373	For donors outside of the European Union, please consult your tax advisor
	374	about whether your donation is tax deductible.
	375	</p>
	376	</div>
	377
	378	<p>
	379	<a data-toggle="collapse" href="#faq-cancel">
	380	How do I cancel or change my recurring donation?
	381	</a>
	382	</p>
	383
	384	<div class="collapse text-muted" id="faq-cancel">
	385	<p>
386	Your credit card statements or bank statements will contain a link
387	that you can follow to cancel your donation at any time.
388	</p>
fed291df	389	</div>
a41e6d77	390
8bc72662 MT	391	<p>
	392	<a data-toggle="collapse" href="#faq-email">
	393	Who can I email directly with questions about donating?
	394	</a>
	395	</p>
	396
	397	<div class="collapse text-muted" id="faq-email">
	398	<p>
	399	If you have a question about donating to the IPFire Project,
	400	please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
	401	</p>
a41e6d77 MT	402	</div>
a41e6d77 MT	403	</div>
7771acea	404	</div>
8bc72662	405	</div>
95b30f84 MT	406	{% end block %}
	407
	408	{% block javascript %}
	409	<script type="text/javascript">
	410	$(document).ready(function() {
6d151de3 MT	411	var amount = $("input[name='amount']");
6d151de3 MT	412
bd2723d4 MT	413	// Adjust form to default currency
	414	var currency = $("input[name='currency']:checked").val();
	415	if (currency == "EUR") {
	416	$(".USD").hide();
	417	} else if (currency == "USD") {
	418	$(".EUR").hide();
	419	}
95b30f84 MT	420
	421	$("input[name='currency']").on("change", function() {
	422	var currency = $(this).val();
	423
	424	if (currency == "EUR") {
	425	$(".EUR").show();
	426	$(".USD").hide();
	427	} else if (currency == "USD") {
	428	$(".EUR").hide();
	429	$(".USD").show();
	430	}
	431	});
	432
6d151de3 MT	433	// Copy amount when clicking on a radio button
	434	$("input[name='amount-selector']").on("change", function() {
	435	var value = $(this).val();
	436	if (value) {
	437	amount.val(value);
	438
	439	// Clear input field
	440	$("input[name='amount-input']").val("");
	441	}
	442	});
	443
	444	$("input[name='amount-input']").on("change", function() {
	445	var value = $(this).val();
	446	if (value) {
	447	amount.val(value);
	448
	449	// Uncheck all radio buttons
	450	$("input[name='amount-selector']").removeAttr("checked");
	451	$("input[name='amount-selector']").prop("checked", false);
	452	}
	453	});
	454
95b30f84	455	$("#donate").click(function (event) {
91e53e2b	456	var frequency = $("input[name='frequency']").val();
95b30f84	457
bd2723d4	458	if (frequency == "one-time") {
95b30f84	459	event.preventDefault();
fedb34bf	460
95b30f84 MT	461	$("#modal-upsell").modal("show");
	462	}
	463	});
	464	});
	465	</script>
f5b55ea7	466	{% end block %}