From d7bbf25f1d627d38fa8a4c82365af1052721396d Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 30 Jul 2018 19:43:47 +0100
Subject: [PATCH] donation: Make explanation section dark

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/templates/donate.html | 408 +++++++++++++++++++-------------------
 1 file changed, 203 insertions(+), 205 deletions(-)

diff --git a/src/templates/donate.html b/src/templates/donate.html
index 97003b73..5d544dcb 100644
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -9,261 +9,259 @@
 
 	<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 px-4 px-sm-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="row flex-lg-row-reverse">
+				<div class="col-12 col-lg-8 p-4">
+					<form action="" method="POST">
+						{% raw xsrf_form_html() %}
+
+						<div class="row justify-content-center mt-4">
+							<div class="col-12 col-sm-11 col-xl-12 px-4 px-sm-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 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="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-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 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="mt-5 mb-3 p-5 bg-light">
-										<h6>{{ _("Choose an amount") }}</h6>
+								<div class="mt-5 mb-3 p-5 bg-light">
+									<h6>{{ _("Choose an amount") }}</h6>
 
-										<input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
+									<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
+									<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="col-sm-5">
-												<input type="number" class="form-control form-control-lg" name="amount-input" min="5" step="0.01"
-													{% if not amount in amounts %}value="{{ amount }}"{% 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="5" step="0.01"
+												{% 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 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 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 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="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="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="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-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 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 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 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 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 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 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 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-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 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>
-
-									<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>
 								</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>
 							</div>
-						</form>
-					</div>
-
-					<div class="col col-lg-4">
-						<h5>Why we need you to donate today</h5>
-
-						<p>
-							IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
-							schools and homes worldwide.
-						</p>
-
-						<p>
-							It is trusted by many and has proven that free software, developed by a diverse
-							community, can not only be equal, but better than proprietary solutions.
-						</p>
-
-						<p>
-							But still, development doesn’t come free to us and therefore
-							we are asking for your contribution today.
-						</p>
-					</div>
+						</div>
+					</form>
+				</div>
+
+				<div class="col col-lg-4 p-4 bg-dark text-white">
+					<h5 class="text-white mt-4">Why we need you to donate today</h5>
+
+					<p>
+						IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
+						schools and homes worldwide.
+					</p>
+
+					<p>
+						It is trusted by many and has proven that free software, developed by a diverse
+						community, can not only be equal, but better than proprietary solutions.
+					</p>
+
+					<p>
+						But still, development doesn’t come free to us and therefore
+						we are asking for your contribution today.
+					</p>
 				</div>
 			</div>
 		</div>
-- 
2.47.3