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

{% extends "../base.html" %}

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

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

	<section>
		<div class="container">
			<div class="row">
				<div class="col col-lg-6">
					<h1 class="display-2">{{ _("Donate") }}</h1>

					<p>
						{{ _("Please support our project with your donation today") }}
					</p>
				</div>
			</div>
		</div>
	</section>

	<section class="inverse">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-12 col-md-8">
					<form action="" method="POST">
						{% raw xsrf_form_html() %}

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

								<input type="hidden" name="frequency" value="{{ frequency }}">

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

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

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

							<input type="hidden" name="currency" value="{{ currency }}">

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

							<p class="text-center small">
								<a data-toggle="collapse" href="#more" role="button">
									{{ _("More Options") }}
								</a>
							</p>

							<div class="collapse" id="more">
								<div class="form-group row">
									<label class="col-sm-5 col-form-label col-form-label-lg">
										Enter your own
									</label>

									<div class="col-sm-7">
										<div class="input-group input-group-lg">
											<div class="input-group-prepend">
												<span class="input-group-text EUR">€</span>
												<span class="input-group-text USD">$</span>
											</div>

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

								<p class="small text-right">
									<a class="toggleCurrency EUR" href="#">{{ _("Prefer donating in US Dollar?") }}</a>
									<a class="toggleCurrency USD" href="#">{{ _("Prefer donating in Euro?") }}</a>
								</p>
							</div>

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

									<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-around text-muted">
									<span class="pf pf-2x pf-american-express"></span>
									<span class="pf pf-2x pf-mastercard-alt"></span>
									<span class="pf pf-2x pf-visa"></span>
									<span class="pf pf-2x pf-sepa"></span>
								</div>
							</div>

							<div class="modal fade" tabindex="-1" role="dialog" id="modal-monthly-suggestions" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">{{ _("Would you like to support us monthly?") }}</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 class="mb-4">
												{{ _("Long-term donations are an even better investment into our project, create lasting change for everyone who is working on the project and make IPFire even better!") }}
											</p>

											<div class="row mb-4">
												{% for factor, default in ((3, False), (2, True), (1, False)) %}
													<div class="col d-flex align-items-center">
														<button type="submit"
																class="btn btn-primary btn-block {% if default %}btn-lg{% else %}btn-sm{% end %} monthly-amount-suggestion"
																data-factor="{{ factor }}" data-amount="">
															<span class="EUR">€</span><span class="USD">$</span><span class="suggested-amount"></span>
															<br>
															<small>/ {{ _("month") }}</small>
														</button>
													</div>
												{% end %}
											</div>

											<button type="submit" class="btn btn-secondary btn-block">
												Donate <span class="EUR">€</span><span class="USD">$</span><span class="amount"></span> once
											</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>
					</form>
				</div>
			</div>
		</div>
	</section>

	<section>
		<div class="container">
			<h5>Why should I donate?</h5>

			<p>
				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>
				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>

			<h5>How much should I give?</h5>

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

			<p>
				We rely on steady contributions from companies to keep the project healthy
				and encourage them to set up a monthly donation.
			</p>

			<div class="faq">
				<h5>Frequently Asked Questions</h5>

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

				<div class="collapse" 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" 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" 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" 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" 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>
	</section>
{% end block %}

{% block javascript %}
	<script type="text/javascript">
		$(document).ready(function() {
			var amount    = $("input[name='amount']");
			var currency  = $("input[name='currency']");
			var frequency = $("input[name='frequency']");
			var submit    = $("#donate");
			var modal     = $("#modal-monthly-suggestions");

			// Adjust form to default currency
			if (currency.val() == "EUR") {
				$(".USD").hide();
			} else if (currency.val() == "USD") {
				$(".EUR").hide();
			}

			$(".toggleCurrency").click(function(event) {
				event.preventDefault();

				if (currency.val() == "EUR") {
					currency.val("USD");

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

					$(".EUR").show();
					$(".USD").hide();
				}
			});

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

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

			amount.on("change keyup mouseup", function() {
				var value = $(this).val();

				// Enable/disable submit button
				submit.prop("disabled", !value);

				if (value) {
					// Check matching elements
					$("input[name='amount-selector']").each(function (i, selector) {
						var s = $(selector);
						var b = s.parent(".btn");

						if (s.val() === value) {
							b.addClass("active");
						} else {
							b.removeClass("active");
						}
					});

					// Update all amounts
					$(".amount").html(value);

					// Update suggestions
					$(".monthly-amount-suggestion").each(function (i, element) {
						var factor = $(element).data("factor");
						if (!factor)
							return;

						var suggested_amount = Math.floor(value / factor);

						// Update value
						$(element).data("amount", suggested_amount);

						// Update text on button
						$(element).find(".suggested-amount").html(suggested_amount);
					});
				}
			});

			submit.click(function (event) {
				if (frequency.val() == "one-time" && amount.val() > 10) {
					event.preventDefault();

					modal.modal("show");
				}
			});

			$(".monthly-amount-suggestion").click(function (event) {
				// Set frequency to monthly
				$("input[name='frequency-selector']").prop("checked", false);
				$("input[name='frequency-selector'][value='monthly']").prop("checked", true);
				frequency.val("monthly");

				// Set amount
				var value = $(this).data("amount");
				amount.val(value);
				amount.change();

				// Hide the modal
				modal.modal("hide");
			});

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