[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 p-4 p-sm-6 p-md-4 pt-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="my-5 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="1"
													{% 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">
										There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc.
									</p>
								</div>
							</div>
						</form>
					</div>

					<div class="col col-lg-4">
						<h5>IP<strong>Fire</strong> is an Open Source software project.</h5>

						<p>
							IPFire is an Open Source software project.
						</p>

						<p>
							Development and keeping the project healthy is carried out by a
							group of volunteers who have built a very successful product,
							which hundreds of thousands of people use every day.
						</p>

						<p>
							Your donation helps us to make IPFire even better...
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<section>
		<div class="container">
			<div class="row text-left">
				<div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
					<div class="mb-6" id="whydonate">
						<h3>Why should I donate?</h3>

						<p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
							distribution that is free to use for everyone anywhere in the world. To do that,
							we need to provide the infrastructure to distribute it to our users and provide
							the right tools for our developers to help them to make IPFire better every day.
						</p>

						<p class="copy">Donations from individuals and corporations are the only way to keep all of our
							services free for everyone. They pay for hosting, advertising, purchase
							equipment and to fund the work of the people behind it.
						</p>

						<p class="copy">Our ambition is to compete with projects backed by large corporations and
							proprietary solutions and we cannot do that without you. Become a supporter
							today!
						</p>
					</div>

					<div class="mb-6" id="howmuch">
						<h3>How much should I give?</h3>

						<p class="copy">Donations range from single digits donations to hundreds. For us it is important
							to give something back to help this project to succeed. If you want to help,
							please do so and encourage others to do so, too.
						</p>
					</div>
				</div>

				<div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
					<h3>Frequently Asked Questions</h3>
					<p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
				</div>
			</div>
		</div>
	</section>
{% 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">
	19	<div class="col-12 col-sm-11 col-xl-12 p-4 p-sm-6 p-md-4 pt-6">
	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
	54	<div class="my-5 p-5 bg-light">
	55	<h6>{{ _("Choose an amount") }}</h6>
	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">
bd2723d4 MT	74	<input type="number" class="form-control form-control-lg" name="amount-input" min="1"
bd2723d4 MT	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>
	237
	238	<p class="small text-muted">
	239	There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc.
	240	</p>
ef0d3151 SH	241	</div>
ef0d3151 SH	242	</div>
a41e6d77	243	</form>
95b30f84	244	</div>
a41e6d77 MT	245
	246	<div class="col col-lg-4">
	247	<h5>IP<strong>Fire</strong> is an Open Source software project.</h5>
	248
	249	<p>
	250	IPFire is an Open Source software project.
	251	</p>
	252
	253	<p>
	254	Development and keeping the project healthy is carried out by a
	255	group of volunteers who have built a very successful product,
	256	which hundreds of thousands of people use every day.
	257	</p>
	258
	259	<p>
	260	Your donation helps us to make IPFire even better...
	261	</p>
	262	</div>
	263	</div>
be02b78f SH	264	</div>
be02b78f SH	265	</div>
a41e6d77	266	</div>
95b30f84	267
be02b78f	268	<section>
95b30f84	269	<div class="container">
a41e6d77 MT	270	<div class="row text-left">
	271	<div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
	272	<div class="mb-6" id="whydonate">
	273	<h3>Why should I donate?</h3>
	274
	275	<p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
	276	distribution that is free to use for everyone anywhere in the world. To do that,
	277	we need to provide the infrastructure to distribute it to our users and provide
	278	the right tools for our developers to help them to make IPFire better every day.
	279	</p>
	280
	281	<p class="copy">Donations from individuals and corporations are the only way to keep all of our
	282	services free for everyone. They pay for hosting, advertising, purchase
	283	equipment and to fund the work of the people behind it.
	284	</p>
	285
	286	<p class="copy">Our ambition is to compete with projects backed by large corporations and
	287	proprietary solutions and we cannot do that without you. Become a supporter
	288	today!
	289	</p>
fed291df	290	</div>
95b30f84	291
a41e6d77 MT	292	<div class="mb-6" id="howmuch">
	293	<h3>How much should I give?</h3>
	294
	295	<p class="copy">Donations range from single digits donations to hundreds. For us it is important
	296	to give something back to help this project to succeed. If you want to help,
	297	please do so and encourage others to do so, too.
	298	</p>
fed291df SH	299	</div>
fed291df SH	300	</div>
a41e6d77 MT	301
	302	<div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
	303	<h3>Frequently Asked Questions</h3>
	304	<p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
	305	</div>
	306	</div>
7771acea	307	</div>
be02b78f	308	</section>
95b30f84 MT	309	{% end block %}
	310
	311	{% block javascript %}
	312	<script type="text/javascript">
	313	$(document).ready(function() {
6d151de3 MT	314	var amount = $("input[name='amount']");
6d151de3 MT	315
bd2723d4 MT	316	// Adjust form to default currency
	317	var currency = $("input[name='currency']:checked").val();
	318	if (currency == "EUR") {
	319	$(".USD").hide();
	320	} else if (currency == "USD") {
	321	$(".EUR").hide();
	322	}
95b30f84 MT	323
	324	$("input[name='currency']").on("change", function() {
	325	var currency = $(this).val();
	326
	327	if (currency == "EUR") {
	328	$(".EUR").show();
	329	$(".USD").hide();
	330	} else if (currency == "USD") {
	331	$(".EUR").hide();
	332	$(".USD").show();
	333	}
	334	});
	335
6d151de3 MT	336	// Copy amount when clicking on a radio button
	337	$("input[name='amount-selector']").on("change", function() {
	338	var value = $(this).val();
	339	if (value) {
	340	amount.val(value);
	341
	342	// Clear input field
	343	$("input[name='amount-input']").val("");
	344	}
	345	});
	346
	347	$("input[name='amount-input']").on("change", function() {
	348	var value = $(this).val();
	349	if (value) {
	350	amount.val(value);
	351
	352	// Uncheck all radio buttons
	353	$("input[name='amount-selector']").removeAttr("checked");
	354	$("input[name='amount-selector']").prop("checked", false);
	355	}
	356	});
	357
95b30f84	358	$("#donate").click(function (event) {
91e53e2b	359	var frequency = $("input[name='frequency']").val();
95b30f84	360
bd2723d4	361	if (frequency == "one-time") {
95b30f84	362	event.preventDefault();
fedb34bf	363
95b30f84 MT	364	$("#modal-upsell").modal("show");
	365	}
	366	});
	367	});
	368	</script>
f5b55ea7	369	{% end block %}