<form action="" method="POST">
{% raw xsrf_form_html() %}
- <div class="row">
- <div class="col-12">
- <h6>Frequency</h6>
+ <div class="p-4 bg-light rounded">
+ <div class="form-group">
+ <h6>I am an ...</h6>
- <input type="hidden" name="frequency" value="{{ frequency }}">
+ <input type="hidden" name="type" value="individual">
<div class="custom-control custom-radio custom-control-inline">
- <input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-one-time"
- value="one-time" {% if frequency == "one-time" %}checked{% end %}>
- <label class="custom-control-label" for="frequency-one-time">{{ _("One Time") }}</label>
+ <input class="custom-control-input" type="radio"
+ name="type-selector" id="type-individual" value="individual" checked>
+ <label class="custom-control-label" for="type-individual">{{ _("Individual") }}</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
- <input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-monthly"
- value="monthly" {% if frequency == "monthly" %}checked{% end %}>
- <label class="custom-control-label" for="frequency-monthly">{{ _("Monthly") }}</label>
+ <input class="custom-control-input" type="radio"
+ name="type-selector" id="type-organization" value="organization">
+ <label class="custom-control-label" for="type-organization">{{ _("Organization") }}</label>
</div>
</div>
- </div>
- <div class="mt-5 mb-3 p-4 bg-light rounded">
- <h6>{{ _("Choose an amount") }}</h6>
+ <h6>
+ {{ _("Choose an amount") }}
+ </h6>
<input type="hidden" name="currency" value="{{ currency }}">
{% end %}
</div>
- <p class="text-center small">
- <a data-toggle="collapse" href="#more" role="button">
- {{ _("More Options") }}
- </a>
- </p>
+ <div class="form-group d-flex justify-content-center">
+ <input type="hidden" name="frequency" value="{{ frequency }}">
+
+ <div class="custom-control custom-radio custom-control-inline">
+ <input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-one-time"
+ value="one-time" {% if frequency == "one-time" %}checked{% end %}>
+ <label class="custom-control-label" for="frequency-one-time">{{ _("One Time Donation") }}</label>
+ </div>
+
+ <div class="custom-control custom-radio custom-control-inline">
+ <input class="custom-control-input" type="radio" name="frequency-selector" id="frequency-monthly"
+ value="monthly" {% if frequency == "monthly" %}checked{% end %}>
+ <label class="custom-control-label" for="frequency-monthly">{{ _("Monthly Recurring") }}</label>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <ul class="list-inline text-center small mb-0">
+ <li class="list-inline-item">
+ <span class="vat-included">includes VAT (if applicable)</span>
+ <span class="vat-excluded">excludes VAT</span>
+ </li>
+
+ <li class="list-inline-item">
+ <a data-toggle="collapse" href="#more" role="button">
+ {{ _("More Options") }}
+ </a>
+ </li>
+ </ul>
+ </div>
<div class="collapse" id="more">
<div class="form-group row">
</p>
</div>
- <div class="row my-5">
- <div class="col d-flex flex-column">
- <div class="form-row">
- <div class="col">
- <div class="custom-control custom-radio custom-control-inline mb-3">
- <input class="custom-control-input" type="radio" name="title" id="mr" value="Mr." checked>
- <label class="custom-control-label" for="mr">{{ _("Mr.") }}</label>
- </div>
- <div class="custom-control custom-radio custom-control-inline mb-3">
- <input class="custom-control-input" type="radio" name="title" id="mrs" value="Mrs.">
- <label class="custom-control-label" for="mrs">{{ _("Mrs.") }}</label>
- </div>
- </div>
- </div>
+ <div class="form-group organization organization-required">
+ <input type="text" class="form-control" name="organization"
+ placeholder="{{ _("Organization") }}">
+ </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
- {% if first_name %}value="{{ first_name }}"{% end %}>
- </div>
- </div>
+ <div class="form-group organization">
+ <input type="text" class="form-control" name="vat_number"
+ placeholder="{{ _("VAT Number") }}">
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" name="last_name"
- placeholder="{{ _("Last Name" )}}" required
- {% if last_name %}value="{{ last_name }}"{% end %}>
- </div>
- </div>
- </div>
+ <small class="form-text text-muted">
+ If you are an organization in Europe and you are VAT-registered, please provide your VAT number here.
+ It will make your donation VAT free (if applicable) and the project will benefit from more of your help.
+ Please see the FAQ below for more details about VAT.
+ </small>
+ </div>
- <div class="form-group">
- <input type="email" class="form-control" name="email"
- placeholder="{{ _("Email Address") }}" required>
+ <div class="form-row">
+ <div class="form-group col">
+ <div class="custom-control custom-radio custom-control-inline">
+ <input class="custom-control-input" type="radio" name="title" id="mr" value="Mr." checked>
+ <label class="custom-control-label" for="mr">{{ _("Mr.") }}</label>
</div>
-
- <div class="form-group">
- <input type="text" class="form-control" name="street1"
- placeholder="{{ _("Address Line 1") }}" required>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input class="custom-control-input" type="radio" name="title" id="mrs" value="Mrs.">
+ <label class="custom-control-label" for="mrs">{{ _("Mrs.") }}</label>
</div>
+ </div>
+ </div>
- <div class="form-group">
- <input type="text" class="form-control" name="street2"
- placeholder="{{ _("Address Line 2") }}">
- </div>
+ <div class="form-row">
+ <div class="form-group col-sm-6">
+ <input type="text" class="form-control" name="first_name"
+ placeholder="{{ _("First Name" )}}" required
+ {% if first_name %}value="{{ first_name }}"{% end %}>
+ </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="form-group col-sm-6">
+ <input type="text" class="form-control" name="last_name"
+ placeholder="{{ _("Last Name" )}}" required
+ {% if last_name %}value="{{ last_name }}"{% end %}>
+ </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-group">
+ <input type="email" class="form-control" name="email"
+ placeholder="{{ _("Email Address") }}" required>
+ </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-group">
+ <input type="text" class="form-control" name="street1"
+ placeholder="{{ _("Address Line 1") }}" required>
+ </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-group">
+ <input type="text" class="form-control" name="street2"
+ placeholder="{{ _("Address Line 2") }}">
+ </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 class="form-row">
+ <div class="form-group col-sm-6">
+ <input type="text" class="form-control" name="city"
+ placeholder="{{ _("City") }}" required>
+ </div>
+
+ <div class="form-group col-sm-6">
+ <input type="text" class="form-control" name="post_code"
+ placeholder="{{ _("Post Code") }}" required>
+ </div>
+ </div>
+
+ <div class="form-row">
+ <div class="form-group col-sm-6">
+ <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>
- <input type="submit" class="btn btn-primary btn-lg"
- id="donate" value="{{ _("Donate Now") }}">
+ <div class="form-group col-sm-6">
+ <input type="text" class="form-control" name="state"
+ placeholder="{{ _("State (optional)") }}">
</div>
</div>
- <div class="row">
- <div class="col d-flex justify-content-around text-muted">
- <span class="pf pf-2x pf-american-express"></span>
- <span class="pf pf-2x pf-mastercard-alt"></span>
- <span class="pf pf-2x pf-visa"></span>
- <span class="pf pf-2x pf-sepa"></span>
- <span class="pf pf-2x pf-paypal"></span>
+ <div class="form-group">
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="tc-accepted" required>
+
+ <label class="custom-control-label" for="tc-accepted">
+ I read and accept the <a href="#t-and-cs">terms & conditions</a>
+ </label>
</div>
</div>
- <div class="modal fade" tabindex="-1" role="dialog" id="modal-monthly-suggestions" aria-hidden="true">
- <div class="modal-dialog modal-dialog-centered" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title">{{ _("Would you like to support us monthly?") }}</h5>
+ <div class="form-group">
+ <input type="submit" class="btn btn-primary btn-block btn-lg"
+ id="donate" value="{{ _("Donate Now") }}">
+ </div>
+ </div>
- <button type="button" class="close" data-dismiss="modal" aria-label="{{ _("Close") }}">
- <span aria-hidden="true">×</span>
- </button>
- </div>
+ <div class="modal fade" tabindex="-1" role="dialog" id="modal-monthly-suggestions" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">{{ _("Would you like to support us monthly?") }}</h5>
- <div class="modal-body">
- <p class="mb-4">
- {{ _("Long-term donations are an even better investment into our project, create lasting change for everyone who is working on the project and make IPFire even better!") }}
- </p>
-
- <div class="row mb-4">
- {% for factor, default in ((3, False), (2, True), (1, False)) %}
- <div class="col d-flex align-items-center">
- <button type="submit"
- class="btn btn-primary btn-block {% if default %}btn-lg{% else %}btn-sm{% end %} monthly-amount-suggestion"
- data-factor="{{ factor }}" data-amount="">
- <span class="EUR">€</span><span class="USD">$</span><span class="suggested-amount"></span>
- <br>
- <small>/ {{ _("month") }}</small>
- </button>
- </div>
- {% end %}
- </div>
+ <button type="button" class="close" data-dismiss="modal" aria-label="{{ _("Close") }}">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
- <button type="submit" class="btn btn-secondary btn-block">
- Donate <span class="EUR">€</span><span class="USD">$</span><span class="amount"></span> once
- </button>
+ <div class="modal-body">
+ <p class="mb-4">
+ {{ _("Long-term donations are an even better investment into our project, create lasting change for everyone who is working on the project and make IPFire even better!") }}
+ </p>
+
+ <div class="row mb-4">
+ {% for factor, default in ((3, False), (2, True), (1, False)) %}
+ <div class="col d-flex align-items-center">
+ <button type="submit"
+ class="btn btn-primary btn-block {% if default %}btn-lg{% else %}btn-sm{% end %} monthly-amount-suggestion"
+ data-factor="{{ factor }}" data-amount="">
+ <span class="EUR">€</span><span class="USD">$</span><span class="suggested-amount"></span>
+ <br>
+ <small>/ {{ _("month") }}</small>
+ </button>
+ </div>
+ {% end %}
</div>
+
+ <button type="submit" class="btn btn-secondary btn-block">
+ Donate <span class="EUR">€</span><span class="USD">$</span><span class="amount"></span> once
+ </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 class="row my-5">
+ <div class="col d-flex justify-content-around text-muted">
+ <span class="pf pf-2x pf-american-express"></span>
+ <span class="pf pf-2x pf-mastercard-alt"></span>
+ <span class="pf pf-2x pf-visa"></span>
+ <span class="pf pf-2x pf-sepa"></span>
+ <span class="pf pf-2x pf-paypal"></span>
+ </div>
+ </div>
</form>
</div>
</div>
</div>
</div>
</section>
+
+ <section class="inverse" id="t-and-cs">
+ <div class="container">
+ <h4>{{ _("Terms & Conditions") }}</h4>
+ </div>
+ </section>
{% end block %}
{% block javascript %}
<script type="text/javascript">
$(document).ready(function() {
+ var type = $("input[name='type']");
var amount = $("input[name='amount']");
var currency = $("input[name='currency']");
var frequency = $("input[name='frequency']");
amount.change();
}
+ // Copy selected type
+ $("input[name='type-selector']").on("change", function() {
+ var value = $(this).val();
+ if (value) {
+ type.val(value);
+ type.change();
+ }
+ });
+
+ type.on("change", function() {
+ var value = $(this).val();
+
+ if (value == "individual") {
+ $(".organization").hide();
+ $(".organization-required").find("input").prop("required", false);
+
+ $(".vat-included").show();
+ $(".vat-excluded").hide();
+ } else if (value == "organization") {
+ $(".organization").show();
+ $(".organization-required").find("input").prop("required", true);
+
+ $(".vat-included").hide();
+ $(".vat-excluded").show();
+ }
+ });
+
$(".toggleCurrency").click(function(event) {
event.preventDefault();
modal.modal("hide");
});
+ // Update everything depending on type
+ type.change();
+
// Update form with initial amount
amount.change();
});
projects / ipfire.org.git / commitdiff
