donate: Make help texts narrow as the rest of the page

[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">
			<div class="row justify-content-center">
				<div class="col-12 col-md-8">
					<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>
			</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 %}