[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) %}

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

								<div class="custom-control custom-radio custom-control-inline">
									<input class="custom-control-input" type="radio" name="frequency" 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" 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 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 button
			$("input[name='amount-selector']").on("change", function() {
				var value = $(this).val();
				if (value) {
					amount.val(value);
					amount.change();
				}
			});

			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) {
				var frequency = $("input[name='frequency']").val();

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

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

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

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