]> git.ipfire.org Git - ipfire.org.git/commitdiff
donation: Make explanation section dark
authorMichael Tremer <michael.tremer@ipfire.org>
Mon, 30 Jul 2018 18:43:47 +0000 (19:43 +0100)
committerMichael Tremer <michael.tremer@ipfire.org>
Mon, 30 Jul 2018 18:43:47 +0000 (19:43 +0100)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/templates/donate.html

index 97003b7381a79e5d07c0d82e6140664dc248ced3..5d544dcb122d3497fcffe3ae598022dc00abdc8f 100644 (file)
 
        <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>