{% block container %}
{% set amounts = (10, 25, 50, 75, 100, 250) %}
- <section>
- <div class="container">
- <div class="row">
- <div class="col col-lg-6">
- <h1 class="display-2">{{ _("Donate") }}</h1>
-
- <p>
- {{ _("Please support our project with your donation today") }}
- </p>
- </div>
+ <section class="hero is-primary">
+ <div class="hero-body">
+ <div class="container">
+ <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <ul>
+ <li>
+ <a href="/">Home</a>
+ </li>
+ <li class="is-active">
+ <a href="#" aria-current="page">Donate</a>
+ </li>
+ </ul>
+ </nav>
+ <h1 class="title is-1">
+ Donate
+ </h1>
+ <p class="subtitle">{{ _("Please support our project with your donation today") }}</p>
</div>
</div>
</section>
- <section class="inverse">
+ <section class="section">
<div class="container">
- <div class="row justify-content-center">
- <div class="col-12 col-md-8">
+ <div class="columns">
+ <div class="column is-8">
<form id="donation-form" action="" method="POST">
{% raw xsrf_form_html() %}
- <div class="row">
- <div class="col-12">
- <h6>Frequency</h6>
+ <h5 class="title is-5">I am an ...</h5>
+
+ <input type="hidden" name="type" value="individual">
- <input type="hidden" name="frequency" value="{{ frequency }}">
+ <div class="block">
+ <div class="control">
+ <label class="radio">
+ <input class="custom-control-input" type="radio"
+ name="type-selector" id="type-individual" value="individual" checked>
- <div class="form-check form-check-inline">
+ {{ _("Individual") }}
+ </label>
+ <label class="custom-control-label" for="type-individual"></label>
+ <label class="radio">
+ <input class="custom-control-input" type="radio"
+ name="type-selector" id="type-organization" value="organization">
+
+ {{ _("Organization") }}
+ </label>
+ <label class="custom-control-label" for="type-organization"></label>
+ </div>
+ </div>
+
+ <h5 class="title is-5">Frequency</h5>
+
+ <input type="hidden" name="frequency" value="{{ frequency }}">
+
+ <div class="block">
+ <div class="control">
+ <label class="radio">
<input class="form-check-input" type="radio" name="frequency-selector" 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">
+ {{ _("One Time") }}
+ </label>
+ <label class="form-check-label" for="frequency-one-time"></label>
+
+ <label class="radio">
<input class="form-check-input" type="radio" name="frequency-selector" id="frequency-monthly"
value="monthly" {% if frequency == "monthly" %}checked{% end %}>
- <label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
- </div>
+
+ {{ _("Monthly") }}
+ </label>
+ <label class="form-check-label" for="frequency-monthly"></label>
</div>
</div>
- <div class="mt-5 mb-3 p-4 bg-light rounded">
- <h6>{{ _("Choose an amount") }}</h6>
+ <div class="block">
+ <h5 class="title is-5">{{ _("Choose an amount") }}</h5>
+ </div>
- <input type="hidden" name="currency" value="{{ currency }}">
+ <input type="hidden" name="currency" value="{{ currency }}">
+
+ <div class="block">
+ <div class="buttons" data-toggle="buttons">
+ <p class="control">
+ {% for a in amounts %}
+ <label class="button is-outlined is-primary">
+ <input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
+ autocomplete="off" class="is-hidden"> <span class="EUR">€</span><span class="USD">$</span>{{ a }}
+ </label>
+ {% end %}
+ </p>
+ </div>
+ </div>
- <div class="btn-group-toggle flex-wrap text-center mb-3" data-toggle="buttons">
- {% for a in amounts %}
- <label class="btn btn-outline-primary btn-lg mb-2">
- <input type="radio" name="amount-selector" value="{{ a }}" {% if amount == a %}checked{% end %}
- autocomplete="off"> <span class="EUR">€</span><span class="USD">$</span>{{ a }}
- </label>
- {% end %}
+ <div class="block">
+ <h6 class="title is-6">Or Enter your own</h6>
+
+ <div class="columns">
+ <div class="column is-3">
+ <div class="field">
+ <p class="control has-icons-left">
+ <input type="number" class="input" name="amount" min="5" step="0.01"
+ {% if amount %}value="{{ "%.2f" % amount }}"{% end %}>
+ <span class="input-group-text EUR icon is-small is-left">
+ <i class="fas fa-euro-sign"></i>
+ </span>
+ <span class="input-group-text USD icon is-small is-left">
+ <i class="fas fa-dollar-sign"></i>
+ </span>
+ </p>
+ </div>
+ </div>
</div>
- <p class="text-center small">
- <a data-toggle="collapse" href="#more" role="button">
- {{ _("More Options") }}
- </a>
+ <p class="small text-end">
+ <a class="toggleCurrency EUR" href="#">{{ _("Prefer donating in US Dollar?") }}</a>
+ <a class="toggleCurrency USD" href="#">{{ _("Prefer donating in Euro?") }}</a>
</p>
+ </div>
- <div class="collapse" id="more">
- <div class="mb-3 row">
- <label class="col-sm-5 col-form-label col-form-label-lg">
- Enter your own
- </label>
-
- <div class="col-sm-7">
- <div class="input-group input-group-lg">
- <span class="input-group-text EUR">€</span>
- <span class="input-group-text USD">$</span>
+ <div class="block">
+ <div class="organization organization-required">
+ <input type="text" class="input" name="organization"
+ placeholder="{{ _("Organization") }}">
+ </div>
+ </div>
+ <div class="block">
+ <div class="organization">
+ <input type="text" class="input" name="vat_number"
+ placeholder="{{ _("VAT Number") }}">
+ </div>
+ </div>
+ <div class="block">
+ <div class="organization">
+ <p class="is-size-6">
+ 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.
+ </p>
+ </div>
+ </div>
- <input type="number" class="form-control form-control-lg" name="amount" min="5" step="0.01"
- {% if amount %}value="{{ "%.2f" % amount }}"{% end %}>
- </div>
- </div>
+ <div class="columns">
+ <div class="column is-2">
+ <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>
-
- <p class="small text-end">
- <a class="toggleCurrency EUR" href="#">{{ _("Prefer donating in US Dollar?") }}</a>
- <a class="toggleCurrency USD" href="#">{{ _("Prefer donating in Euro?") }}</a>
- </p>
</div>
+ <div class="column is-2">
+ <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="row my-5">
- <div class="col d-flex flex-column">
- <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="columns">
+ <div class="column">
+ <input type="text" class="input" name="first_name"
+ placeholder="{{ _("First Name" )}}" required
+ {% if first_name %}value="{{ first_name }}"{% end %}>
+ </div>
- <div class="row">
- <div class="col-12 col-sm-6">
- <div class="mb-3">
- <input type="text" class="form-control" name="first_name"
- placeholder="{{ _("First Name" )}}" required
- {% if first_name %}value="{{ first_name }}"{% end %}>
- </div>
- </div>
-
- <div class="col-12 col-sm-6">
- <div class="mb-3">
- <input type="text" class="form-control" name="last_name"
- placeholder="{{ _("Last Name" )}}" required
- {% if last_name %}value="{{ last_name }}"{% end %}>
- </div>
- </div>
- </div>
+ <div class="column">
+ <input type="text" class="input" name="last_name"
+ placeholder="{{ _("Last Name" )}}" required
+ {% if last_name %}value="{{ last_name }}"{% end %}>
+ </div>
+ </div>
- <div class="mb-3">
- <input type="email" class="form-control" name="email"
- placeholder="{{ _("Email Address") }}" required>
- </div>
+ <div class="block">
+ <input type="email" class="input" name="email"
+ placeholder="{{ _("Email Address") }}" required>
+ </div>
- <div class="mb-3">
- <input type="text" class="form-control" name="street1"
- placeholder="{{ _("Address Line 1") }}" required>
- </div>
+ <div class="block">
+ <input type="text" class="input" name="street1"
+ placeholder="{{ _("Address Line 1") }}" required>
+ </div>
- <div class="mb-3">
- <input type="text" class="form-control" name="street2"
- placeholder="{{ _("Address Line 2") }}">
- </div>
+ <div class="block">
+ <input type="text" class="input" name="street2"
+ placeholder="{{ _("Address Line 2") }}">
+ </div>
- <div class="row">
- <div class="col-12 col-sm-6">
- <div class="mb-3">
- <input type="text" class="form-control" name="city"
- placeholder="{{ _("City") }}" required>
- </div>
- </div>
-
- <div class="col-12 col-sm-6">
- <div class="mb-3">
- <input type="text" class="form-control" name="post_code"
- placeholder="{{ _("Post Code") }}" required>
- </div>
- </div>
- </div>
+ <div class="columns">
+ <div class="column">
+ <input type="text" class="input" name="city"
+ placeholder="{{ _("City") }}" required>
+ </div>
+ <div class="column">
+ <input type="text" class="input" name="post_code"
+ placeholder="{{ _("Post Code") }}" required>
+ </div>
+ </div>
- <div class="row">
- <div class="col-12 col-sm-6">
- <div class="mb-3">
- <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-12 col-sm-6">
- <div class="mb-3">
- <input type="text" class="form-control" name="state"
- placeholder="{{ _("State (optional)") }}">
- </div>
- </div>
- </div>
+ <div class="columns">
+ <div class="column is-half">
+ <div class="select">
+ <select name="country_code" required>
+ <option value="">- {{ _("Country") }} -</option>
- <input type="submit" class="btn btn-primary btn-lg"
- id="donate" value="{{ _("Donate Now") }}">
+ {% for c in countries %}
+ <option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+ {% end %}
+ </select>
</div>
</div>
- <div class="row">
- <div class="col d-flex justify-content-around text-muted">
+ <div class="column">
+ <input type="text" class="input" name="state"
+ placeholder="{{ _("State (optional)") }}">
+ </div>
+ </div>
+
+ <div class="block">
+ <input type="submit" class="button is-primary is-outlined is-fullwidth is-medium"
+ id="donate" value="{{ _("Donate Now") }}">
+ </div>
+
+ <div class="block">
+ <div class="level">
+ <div class="level-item has-text-centered">
<span class="pf pf-2x pf-american-express"></span>
+ </div>
+ <div class="level-item has-text-centered">
<span class="pf pf-2x pf-mastercard-alt"></span>
+ </div>
+ <div class="level-item has-text-centered">
<span class="pf pf-2x pf-visa"></span>
+ </div>
+ <div class="level-item has-text-centered">
<span class="pf pf-2x pf-sepa"></span>
- <span class="pf pf-2x pf-paypal"></span>
</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>
-
- <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">
- <div class="d-grid">
- <button type="submit"
- class="btn btn-primary {% 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>
- </div>
- {% end %}
- </div>
-
- <div class="d-grid">
- <button type="submit" class="btn btn-secondary">
- Donate <span class="EUR">€</span><span class="USD">$</span><span class="amount"></span> once
- </button>
- </div>
- </div>
- </div>
+ <div class="level-item has-text-centered">
+ <span class="pf pf-2x pf-paypal"></span>
</div>
</div>
</div>
- <p class="small text-muted mb-0">
+ <p class="is-size-6">
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
</div>
</section>
- <section>
+ <section class="section">
<div class="container">
- <div class="row justify-content-center">
- <div class="col-12 col-md-8">
- <h5>Why should I donate?</h5>
+ <div class="columns">
+ <div class="column is-8">
+ <div class="block">
+ <h5 class="title is-5">Why should I donate?</h5>
- <p>
- At IPFire, we are working hard to provide you with a free firewall distribution
- that is like no other. We release updates regularly and enhance functionality
- to make IPFire more secure, faster and easier to use.
- </p>
+ At IPFire, we are working hard to provide you with a free firewall distribution
+ that is like no other. We release updates regularly and enhance functionality
+ to make IPFire more secure, faster and easier to use.
+ </p>
- <p>
- To achieve our high standards that we have set for ourselves, we need your help.
+ To achieve our high standards that we have set for ourselves, we need your help.
- Only with your donation, we can get the right tools, people and utilities that
- we need to make our work most efficient and reach our maximum potential.
+ Only with your donation, we can get the right tools, people and utilities that
+ we need to make our work most efficient and reach our maximum potential.
- Only with your donation, we can achieve our vision to make the Internet a safer
- place that is fair for everyone and giving equal opportunities.
- </p>
+ Only with your donation, we can achieve our vision to make the Internet a safer
+ place that is fair for everyone and giving equal opportunities.
+ </p>
+ </div>
- <h5>How much should I give?</h5>
+ <div class="block">
+ <h5 class="title is-5">How much should I give?</h5>
- <p>
- We are grateful for every single donation, but of course, we appreciate
- if you help us as much as you can.
- </p>
+ We are grateful for every single donation, but of course, we appreciate
+ if you help us as much as you can.
+ </p>
- <p>
- We rely on steady contributions from companies to keep the project healthy
- and encourage them to set up a monthly donation.
- </p>
+ <p>
+ We rely on steady contributions from companies to keep the project healthy
+ and encourage them to set up a monthly donation.
+ </p>
+ </div>
<div class="faq">
- <h5>Frequently Asked Questions</h5>
+ <h5 class="title is-5">Frequently Asked Questions</h5>
- <p>
- <a data-toggle="collapse" href="#faq-bank-transfer">
- Do you accept bank transfer via SEPA?
- </a>
- </p>
+ <div class="block">
+ <h6 class="title is-6">
+ Do you accept bank transfer via SEPA?
+ </h6>
- <div class="collapse" id="faq-bank-transfer">
<p>
We do accept direct transfers through SEPA. These are our bank details:
</p>
</dl>
</div>
- <p>
- <a data-toggle="collapse" href="#faq-address">
+ <div class="block">
+ <h6 class="title is-6">
Why do you need my address in order to process a donation?
- </a>
- </p>
+ </h6>
- <div class="collapse" id="faq-address">
<p>
We understand that your privacy is very important.
</p>
</p>
</div>
- <p>
- <a data-toggle="collapse" href="#faq-credit-card">
+ <div class="block">
+ <h6 class="title is-6">
I am concerned about losing my credit card details
- </a>
- </p>
+ </h6>
- <div class="collapse" id="faq-credit-card">
<p>
Credit card fraud is a serious and common problem.
To avoid that you and we fall victim of that, we comply with
</p>
</div>
- <p>
- <a data-toggle="collapse" href="#faq-tax-deduction">
+ <div class="block">
+ <h6 class="title is-6">
Is my donation tax deductible?
- </a>
- </p>
+ </h6>
- <div class="collapse" id="faq-tax-deduction">
<p>
IPFire is not registered as a charitable organization and therefore donations
are not tax deductible in Germany or the European Union.
</p>
</div>
- <p>
- <a data-toggle="collapse" href="#faq-cc">
+ <div class="block">
+ <h6 class="title is-6">
What will be charged to my credit card?
- </a>
- </p>
+ </h6>
- <div class="collapse" id="faq-cc">
<p>
We are based in Germany. Donations by credit card from other countries
may be subject to an international payment fee charged by your credit card issuer.
</p>
</div>
- <p>
- <a data-toggle="collapse" href="#faq-cancel">
+ <div class="block">
+ <h6 class="title is-6">
How do I cancel or change my recurring donation?
- </a>
- </p>
+ </h6>
- <div class="collapse" id="faq-cancel">
<p>
Your credit card statements or bank statements will contain a link
that you can follow to cancel your donation at any time.
</p>
</div>
- <p>
- <a data-toggle="collapse" href="#faq-email">
+ <div class="block">
+ <h6 class="title is-6">
Who can I email directly with questions about donating?
- </a>
- </p>
+ </h6>
- <div class="collapse" id="faq-email">
<p>
If you have a question about donating to the IPFire Project,
please contact us at <a href="mailto:donate@ipfire.org">donate@ipfire.org</a>.
{% 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']");
}
if (amount.val()) {
- $("#more").collapse("show");
+ //$("#more").collapse("show");
amount.change();
}
+ // Copy selected type
+ $("input[name='type-selector']").on("change", function() {
+ var value = $(this).val();
+ if (value) {
+ type.val(value);
+ type.change();
+ }
+ });
+
+ // Update Organization / Individual on radio-click
+ 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();
}
});
+
// Copy amount when clicking on a radio buttons
$("input[name='amount-selector']").on("change", function() {
var value = $(this).val();
// Check matching elements
$("input[name='amount-selector']").each(function (i, selector) {
var s = $(selector);
- var b = s.parent(".btn");
+ var b = s.parent(".button");
var v = parseFloat(s.val());
if (value == v) {
- b.addClass("active");
+ b.removeClass("is-outlined");
} else {
- b.removeClass("active");
+ b.addClass("is-outlined");
}
});
modal.modal("hide");
});
+ // Update everything depending on type
+ type.change();
+
// Update form with initial amount
amount.change();
});
</script>
-{% end block %}
+{% end block %}
\ No newline at end of file
projects / ipfire.org.git / commitdiff
