[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" checked>
												<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">
												<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-single" value="single" checked>
												<label class="form-check-label" for="frequency-single">{{ _("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">
												<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" required>

										<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
											{% for amount in amounts %}
												<label class="btn btn-secondary btn-lg mb-2">
													<input type="radio" name="amount-selector" value="{{ amount }}"
														autocomplete="off"> <span class="USD">$</span>{{ amount }} <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">
											</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 -->

												<picture>
													<source srcset="{{ static_url("img/paypal.png") }},
														{{ static_url("img/paypal@2x.png") }} 2x,
														{{ static_url("img/paypal@3x.png") }} 3x">
													<img src="{{ static_url("img/paypal.png") }}"
														srcset="{{ static_url("img/paypal.png") }},
														{{ static_url("img/paypal@2x.png") }} 2x,
														{{ static_url("img/paypal@3x.png") }} 3x"
														alt="PayPal" class="m-xl-2">
												</picture>
											</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']");

			$(".USD").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 == "single") {
					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">
	25	<input class="form-check-input" type="radio" name="currency" id="EUR" value="EUR" checked>
	26	<label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
	27	</div>
95b30f84	28
a41e6d77 MT	29	<div class="form-check form-check-inline">
	30	<input class="form-check-input" type="radio" name="currency" id="USD" value="USD">
	31	<label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
	32	</div>
	33	</div>
95b30f84	34
a41e6d77 MT	35	<div class="col-12 col-lg-6">
	36	<h6>Frequency</h6>
	37
	38	<div class="form-check form-check-inline">
	39	<input class="form-check-input" type="radio" name="frequency" id="frequency-single" value="single" checked>
	40	<label class="form-check-label" for="frequency-single">{{ _("One Time") }}</label>
	41	</div>
	42
	43	<div class="form-check form-check-inline">
	44	<input class="form-check-input" type="radio" name="frequency" id="frequency-monthly" value="monthly">
	45	<label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
	46	</div>
	47	</div>
	48	</div>
	49
	50	<div class="my-5 p-5 bg-light">
	51	<h6>{{ _("Choose an amount") }}</h6>
	52
6d151de3 MT	53	<input type="hidden" name="amount" required>
6d151de3 MT	54
a41e6d77 MT	55	<div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
	56	{% for amount in amounts %}
	57	<label class="btn btn-secondary btn-lg mb-2">
6d151de3	58	<input type="radio" name="amount-selector" value="{{ amount }}"
a41e6d77 MT	59	autocomplete="off"> <span class="USD">$</span>{{ amount }} <span class="EUR">€</span>
	60	</label>
	61	{% end %}
	62	</div>
	63
	64	<div class="form-group row mb-5">
	65	<label class="col-sm-5 col-form-label col-form-label-lg">
	66	or enter your own
	67	</label>
	68
	69	<div class="col-sm-5">
1740705e MT	70	<input type="number" class="form-control form-control-lg"
1740705e MT	71	name="amount-input" min="1">
a41e6d77 MT	72	</div>
	73	</div>
	74
	75	<div class="row mb-5">
a41e6d77 MT	76	<div class="col d-flex flex-column">
	77	<div class="form-row">
	78	<div class="col">
	79	<div class="form-check form-check-inline mb-3">
ebe19f8e MT	80	<input class="form-check-input" type="radio" name="title" id="mr" value="Mr." checked>
ebe19f8e MT	81	<label class="form-check-label" for="mr">{{ _("Mr.") }}</label>
a41e6d77 MT	82	</div>
a41e6d77 MT	83	<div class="form-check form-check-inline mb-3">
ebe19f8e MT	84	<input class="form-check-input" type="radio" name="title" id="mrs" value="Mrs.">
ebe19f8e MT	85	<label class="form-check-label" for="mrs">{{ _("Mrs.") }}</label>
a41e6d77 MT	86	</div>
	87	</div>
	88	</div>
	89
	90	<div class="form-row">
	91	<div class="col-sm-6">
	92	<div class="form-group">
450af3dc MT	93	<input type="text" class="form-control" name="first_name"
450af3dc MT	94	placeholder="{{ _("First Name" )}}" required>
a41e6d77 MT	95	</div>
	96	</div>
	97
	98	<div class="col-sm-6">
	99	<div class="form-group">
450af3dc	100	<input type="text" class="form-control" name="last_name"
a41e6d77 MT	101	placeholder="{{ _("Last Name" )}}" required>
	102	</div>
	103	</div>
	104	</div>
	105
	106	<div class="form-group">
450af3dc	107	<input type="email" class="form-control" name="email"
a41e6d77 MT	108	placeholder="{{ _("Email Address") }}" required>
	109	</div>
	110
	111	<div class="form-group">
450af3dc	112	<input type="text" class="form-control" name="company_name"
a41e6d77 MT	113	placeholder="{{ _("Company Name (optional)") }}">
	114	</div>
	115
	116	<div class="form-group">
450af3dc	117	<input type="text" class="form-control" name="street1"
a41e6d77 MT	118	placeholder="{{ _("Address Line 1") }}" required>
a41e6d77 MT	119	</div>
95b30f84	120
a41e6d77	121	<div class="form-group">
450af3dc	122	<input type="text" class="form-control" name="street2"
a41e6d77 MT	123	placeholder="{{ _("Address Line 2") }}">
	124	</div>
	125
	126	<div class="form-row">
	127	<div class="col-sm-6">
	128	<div class="form-group">
450af3dc	129	<input type="text" class="form-control" name="city"
a41e6d77	130	placeholder="{{ _("City") }}" required>
2c361abc	131	</div>
be02b78f	132	</div>
a41e6d77 MT	133
	134	<div class="col-sm-6">
	135	<div class="form-group">
450af3dc	136	<input type="text" class="form-control" name="post_code"
a41e6d77 MT	137	placeholder="{{ _("Post Code") }}" required>
	138	</div>
	139	</div>
	140	</div>
	141
	142	<div class="form-row">
	143	<div class="col-sm-6">
	144	<div class="form-group">
450af3dc	145	<select class="form-control" name="country_code" required>
a41e6d77	146	<option value="">- {{ _("Country") }} -</option>
47113f9e MT	147
	148	{% for c in countries %}
	149	<option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
	150	{% end %}
a41e6d77 MT	151	</select>
	152	</div>
	153	</div>
	154
	155	<div class="col-sm-6">
	156	<div class="form-group">
450af3dc	157	<input type="text" class="form-control" name="state"
a41e6d77 MT	158	placeholder="{{ _("State (optional)") }}">
	159	</div>
	160	</div>
	161	</div>
d9d6d3c3 MT	162	</div>
d9d6d3c3 MT	163	</div>
a41e6d77	164
d9d6d3c3 MT	165	<div class="row mb-5">
	166	<div class="col text-center">
	167	<input type="submit" class="btn btn-primary btn-lg"
a41e6d77 MT	168	id="donate" value="{{ _("Donate Now") }}">
	169	</div>
	170	</div>
	171
	172	<div class="row">
d9d6d3c3 MT	173	<div class="col d-flex justify-content-center">
	174	<picture>
	175	<source srcset="{{ static_url("img/amex.png") }},
	176	{{ static_url("img/amex@2x.png") }} 2x,
	177	{{ static_url("img/amex@3x.png") }} 3x">
	178	<img src="{{ static_url("img/amex.png") }}"
	179	srcset="{{ static_url("img/amex.png") }},
	180	{{ static_url("img/amex@2x.png") }} 2x,
	181	{{ static_url("img/amex@3x.png") }} 3x"
	182	alt="Amex" class="m-xl-2">
	183	</picture>
	184
	185	<picture>
	186	<source srcset="{{ static_url("img/mastercard.png") }},
	187	{{ static_url("img/mastercard@2x.png") }} 2x,
	188	{{ static_url("img/mastercard@3x.png") }} 3x">
	189	<img src="{{ static_url("img/mastercard.png") }}"
	190	srcset="{{ static_url("img/mastercard.png") }},
	191	{{ static_url("img/mastercard@2x.png") }} 2x,
	192	{{ static_url("img/mastercard@3x.png") }} 3x"
	193	alt="Mastercard" class="m-xl-2">
	194	</picture>
	195
	196	<picture>
	197	<source srcset="{{ static_url("img/visa.png") }},
	198	{{ static_url("img/visa@2x.png") }} 2x,
	199	{{ static_url("img/visa@3x.png") }} 3x">
	200	<img src="{{ static_url("img/visa.png") }}"
	201	srcset="{{ static_url("img/visa.png") }},
	202	{{ static_url("img/visa@2x.png") }} 2x,
	203	{{ static_url("img/visa@3x.png") }} 3x"
	204	alt="Visa" class="m-xl-2">
	205	</picture>
	206
	207	<!-- XXX insert SEPA logo -->
	208
	209	<picture>
	210	<source srcset="{{ static_url("img/paypal.png") }},
	211	{{ static_url("img/paypal@2x.png") }} 2x,
	212	{{ static_url("img/paypal@3x.png") }} 3x">
	213	<img src="{{ static_url("img/paypal.png") }}"
	214	srcset="{{ static_url("img/paypal.png") }},
	215	{{ static_url("img/paypal@2x.png") }} 2x,
	216	{{ static_url("img/paypal@3x.png") }} 3x"
	217	alt="PayPal" class="m-xl-2">
	218	</picture>
a41e6d77 MT	219	</div>
	220	</div>
	221
	222	<div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
	223	<div class="modal-dialog modal-dialog-centered" role="document">
	224	<div class="modal-content">
	225	<div class="modal-header">
	226	<h5 class="modal-title">Modal title</h5>
	227	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	228	<span aria-hidden="true">×</span>
	229	</button>
	230	</div>
	231
	232	<div class="modal-body">
	233	<p>Modal body text goes here.</p>
	234	</div>
	235
	236	<div class="modal-footer">
760295a7	237	<input type="submit" class="btn btn-primary" value="Donate Now">
a41e6d77 MT	238	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
a41e6d77 MT	239	</div>
fed291df SH	240	</div>
fed291df SH	241	</div>
be02b78f	242	</div>
a41e6d77 MT	243	</div>
	244
	245	<p class="small text-muted">
	246	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.
	247	</p>
ef0d3151 SH	248	</div>
ef0d3151 SH	249	</div>
a41e6d77	250	</form>
95b30f84	251	</div>
a41e6d77 MT	252
	253	<div class="col col-lg-4">
	254	<h5>IP<strong>Fire</strong> is an Open Source software project.</h5>
	255
	256	<p>
	257	IPFire is an Open Source software project.
	258	</p>
	259
	260	<p>
	261	Development and keeping the project healthy is carried out by a
	262	group of volunteers who have built a very successful product,
	263	which hundreds of thousands of people use every day.
	264	</p>
	265
	266	<p>
	267	Your donation helps us to make IPFire even better...
	268	</p>
	269	</div>
	270	</div>
be02b78f SH	271	</div>
be02b78f SH	272	</div>
a41e6d77	273	</div>
95b30f84	274
be02b78f	275	<section>
95b30f84	276	<div class="container">
a41e6d77 MT	277	<div class="row text-left">
	278	<div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
	279	<div class="mb-6" id="whydonate">
	280	<h3>Why should I donate?</h3>
	281
	282	<p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
	283	distribution that is free to use for everyone anywhere in the world. To do that,
	284	we need to provide the infrastructure to distribute it to our users and provide
	285	the right tools for our developers to help them to make IPFire better every day.
	286	</p>
	287
	288	<p class="copy">Donations from individuals and corporations are the only way to keep all of our
	289	services free for everyone. They pay for hosting, advertising, purchase
	290	equipment and to fund the work of the people behind it.
	291	</p>
	292
	293	<p class="copy">Our ambition is to compete with projects backed by large corporations and
	294	proprietary solutions and we cannot do that without you. Become a supporter
	295	today!
	296	</p>
fed291df	297	</div>
95b30f84	298
a41e6d77 MT	299	<div class="mb-6" id="howmuch">
	300	<h3>How much should I give?</h3>
	301
	302	<p class="copy">Donations range from single digits donations to hundreds. For us it is important
	303	to give something back to help this project to succeed. If you want to help,
	304	please do so and encourage others to do so, too.
	305	</p>
fed291df SH	306	</div>
fed291df SH	307	</div>
a41e6d77 MT	308
	309	<div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
	310	<h3>Frequently Asked Questions</h3>
	311	<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>
	312	</div>
	313	</div>
7771acea	314	</div>
be02b78f	315	</section>
95b30f84 MT	316	{% end block %}
	317
	318	{% block javascript %}
	319	<script type="text/javascript">
	320	$(document).ready(function() {
6d151de3 MT	321	var amount = $("input[name='amount']");
6d151de3 MT	322
95b30f84 MT	323	$(".USD").hide();
	324
	325	$("input[name='currency']").on("change", function() {
	326	var currency = $(this).val();
	327
	328	if (currency == "EUR") {
	329	$(".EUR").show();
	330	$(".USD").hide();
	331	} else if (currency == "USD") {
	332	$(".EUR").hide();
	333	$(".USD").show();
	334	}
	335	});
	336
6d151de3 MT	337	// Copy amount when clicking on a radio button
	338	$("input[name='amount-selector']").on("change", function() {
	339	var value = $(this).val();
	340	if (value) {
	341	amount.val(value);
	342
	343	// Clear input field
	344	$("input[name='amount-input']").val("");
	345	}
	346	});
	347
	348	$("input[name='amount-input']").on("change", function() {
	349	var value = $(this).val();
	350	if (value) {
	351	amount.val(value);
	352
	353	// Uncheck all radio buttons
	354	$("input[name='amount-selector']").removeAttr("checked");
	355	$("input[name='amount-selector']").prop("checked", false);
	356	}
	357	});
	358
95b30f84	359	$("#donate").click(function (event) {
91e53e2b	360	var frequency = $("input[name='frequency']").val();
95b30f84	361
91e53e2b	362	if (frequency == "single") {
95b30f84	363	event.preventDefault();
fedb34bf	364
95b30f84 MT	365	$("#modal-upsell").modal("show");
	366	}
	367	});
	368	});
	369	</script>
f5b55ea7	370	{% end block %}