<div class="container">
<div class="card mb-5">
<div class="row">
- <div class="d-none d-md-block col col-lg-4 p-4 bg-dark text-white">
+ <div class="d-none d-md-block col col-md-4 p-4 bg-dark text-white">
<h5 class="text-white mt-4">Why we need you to donate today</h5>
<p>
</p>
</div>
- <div class="col p-4">
+ <div class="col p-5 p-md-4 pt-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="row mt-md-4">
+ <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="EUR" value="EUR"
+ {% if currency == "EUR" %}checked{% end %}>
+ <label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
+ </div>
-
<div class="form-check form-check-inline">
- <input class="form-check-input" type="radio" name="currency" id="USD" value="USD"
- {% if currency == "USD" %}checked{% end %}>
- <label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
- </div>
- </div>
+ <div class="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>
+ <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-4 bg-light rounded">
+ <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="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
+ {% for a in amounts %}
+ <label class="btn btn-secondary btn-lg mb-2">
+ <input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
+ autocomplete="off"> <span class="USD">$</span>{{ a }} <span class="EUR">€</span>
+ </label>
+ {% end %}
+ </div>
-
<div class="form-group row mb-5">
- <label class="col-sm-5 col-form-label col-form-label-lg">
- or enter your own
- </label>
+ <div class="form-group row mb-5">
+ <label class="col-sm-5 col-form-label col-form-label-lg">
+ or enter your own
+ </label>
- <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="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>
+ <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-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 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="email" class="form-control" name="email"
- placeholder="{{ _("Email Address") }}" required>
+ <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="company_name"
- placeholder="{{ _("Company Name (optional)") }}">
+ <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="street1"
- placeholder="{{ _("Address Line 1") }}" required>
+ <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="street2"
- placeholder="{{ _("Address Line 2") }}">
+ <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>
- <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>
+ {% for c in countries %}
+ <option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+ {% end %}
+ </select>
</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 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 class="row mb-5">
+ <div class="col text-center">
+ <input type="submit" class="btn btn-primary btn-lg"
+ id="donate" value="{{ _("Donate Now") }}">
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col d-flex justify-content-center">
+ <picture>
+ <source srcset="{{ static_url("img/amex.png") }},
+ {{ static_url("img/amex@2x.png") }} 2x,
+ {{ static_url("img/amex@3x.png") }} 3x">
+ <img src="{{ static_url("img/amex.png") }}"
+ srcset="{{ static_url("img/amex.png") }},
+ {{ static_url("img/amex@2x.png") }} 2x,
+ {{ static_url("img/amex@3x.png") }} 3x"
+ alt="Amex" class="m-xl-2">
+ </picture>
+
+ <picture>
+ <source srcset="{{ static_url("img/mastercard.png") }},
+ {{ static_url("img/mastercard@2x.png") }} 2x,
+ {{ static_url("img/mastercard@3x.png") }} 3x">
+ <img src="{{ static_url("img/mastercard.png") }}"
+ srcset="{{ static_url("img/mastercard.png") }},
+ {{ static_url("img/mastercard@2x.png") }} 2x,
+ {{ static_url("img/mastercard@3x.png") }} 3x"
+ alt="Mastercard" class="m-xl-2">
+ </picture>
+
+ <picture>
+ <source srcset="{{ static_url("img/visa.png") }},
+ {{ static_url("img/visa@2x.png") }} 2x,
+ {{ static_url("img/visa@3x.png") }} 3x">
+ <img src="{{ static_url("img/visa.png") }}"
+ srcset="{{ static_url("img/visa.png") }},
+ {{ static_url("img/visa@2x.png") }} 2x,
+ {{ static_url("img/visa@3x.png") }} 3x"
+ alt="Visa" class="m-xl-2">
+ </picture>
+
+ <!-- XXX insert SEPA logo -->
+ </div>
+ </div>
+
+ <div class="modal fade" tabindex="-1" role="dialog" id="modal-upsell" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Modal title</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
</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 class="modal-body">
+ <p>Modal body text goes here.</p>
</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">×</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 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>
-
- <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>
</div>
+
+ <p class="small text-muted mb-0">
+ The organization you will be donating to is Lightning Wire Labs GmbH who is
+ kindly handling donations for the IPFire project.
+ After clicking "Donate Now", you will be redirected to Lightning Wire Labs
+ where you will be able to complete the transaction.
+ </p>
</form>
</div>
</div>
projects / ipfire.org.git / commitdiff
