</div>
</section>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col-12 col-md-8">
- <div class="card mb-5">
- <div class="card-body">
- <form action="" method="POST">
- {% raw xsrf_form_html() %}
-
- <div class="row mt-md-4">
- <div class="col-12">
- <h6>Frequency</h6>
-
- <div class="custom-control custom-radio custom-control-inline">
- <input class="custom-control-input" type="radio" name="frequency" 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>
- </div>
+ <section class="inverse">
+ <div class="container">
+ <div class="row justify-content-center">
+ <div class="col-12 col-md-8">
+ <form action="" method="POST">
+ {% raw xsrf_form_html() %}
+
+ <div class="row mt-md-4">
+ <div class="col-12">
+ <h6>Frequency</h6>
+
+ <div class="custom-control custom-radio custom-control-inline">
+ <input class="custom-control-input" type="radio" name="frequency" 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>
+ </div>
- <div class="custom-control custom-radio custom-control-inline">
- <input class="custom-control-input" type="radio" name="frequency" id="frequency-monthly"
- value="monthly" {% if frequency == "monthly" %}checked{% end %}>
- <label class="custom-control-label" for="frequency-monthly">{{ _("Monthly") }}</label>
- </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input class="custom-control-input" type="radio" name="frequency" id="frequency-monthly"
+ value="monthly" {% if frequency == "monthly" %}checked{% end %}>
+ <label class="custom-control-label" for="frequency-monthly">{{ _("Monthly") }}</label>
</div>
</div>
+ </div>
- <div class="mt-5 mb-3 p-4 bg-light rounded">
- <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="currency" value="{{ currency }}">
+ <input type="hidden" name="currency" value="{{ currency }}">
- <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>
+ <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>
- <p class="text-center small">
- <a data-toggle="collapse" href="#more" role="button">
- {{ _("More Options") }}
- </a>
- </p>
+ <p class="text-center small">
+ <a data-toggle="collapse" href="#more" role="button">
+ {{ _("More Options") }}
+ </a>
+ </p>
- <div class="collapse" id="more">
- <div class="form-group 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">
- <div class="input-group-prepend">
- <span class="input-group-text EUR">€</span>
- <span class="input-group-text USD">$</span>
- </div>
-
- <input type="number" class="form-control form-control-lg" name="amount" min="5" step="0.01"
- {% if amount %}value="{{ amount }}"{% end %}>
+ <div class="collapse" id="more">
+ <div class="form-group 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">
+ <div class="input-group-prepend">
+ <span class="input-group-text EUR">€</span>
+ <span class="input-group-text USD">$</span>
</div>
+
+ <input type="number" class="form-control form-control-lg" name="amount" min="5" step="0.01"
+ {% if amount %}value="{{ amount }}"{% end %}>
</div>
</div>
-
- <p class="small text-right">
- <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="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>
+ <p class="small text-right">
+ <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="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-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>
+ <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="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" name="state"
- placeholder="{{ _("State (optional)") }}">
- </div>
+ {% for c in countries %}
+ <option value="{{ c.alpha2 }}" {% if country == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+ {% end %}
+ </select>
</div>
</div>
- <input type="submit" class="btn btn-primary btn-lg"
- id="donate" value="{{ _("Donate Now") }}">
+ <div class="col-sm-6">
+ <div class="form-group">
+ <input type="text" class="form-control" name="state"
+ placeholder="{{ _("State (optional)") }}">
+ </div>
+ </div>
</div>
+
+ <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-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>
- </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>
</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 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-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>
+ </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>
+ <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>
+ </div>
+ </section>
- <section>
- <h5>Why should I donate?</h5>
+ <section>
+ <div class="container">
+ <h5>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>
+ <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.
+ <p>
+ 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>
- <h5>How much should I give?</h5>
+ <h5>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>
+ <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 class="faq">
- <h5>Frequently Asked Questions</h5>
+ <div class="faq">
+ <h5>Frequently Asked Questions</h5>
- <p>
- <a data-toggle="collapse" href="#faq-bank-transfer">
- Do you accept bank transfer via SEPA?
- </a>
- </p>
+ <p>
+ <a data-toggle="collapse" href="#faq-bank-transfer">
+ Do you accept bank transfer via SEPA?
+ </a>
+ </p>
- <div class="collapse" id="faq-bank-transfer">
- <p>
- We do accept direct transfers through SEPA. These are our bank details:
- </p>
+ <div class="collapse" id="faq-bank-transfer">
+ <p>
+ We do accept direct transfers through SEPA. These are our bank details:
+ </p>
- <dl>
- <dt>IBAN</dt>
- <dd>DE76 3605 0105 1010 8206 84</dd>
+ <dl>
+ <dt>IBAN</dt>
+ <dd>DE76 3605 0105 1010 8206 84</dd>
- <dt>BIC</dt>
- <dd>SPESDE3EXXX</dd>
- </dl>
- </div>
+ <dt>BIC</dt>
+ <dd>SPESDE3EXXX</dd>
+ </dl>
+ </div>
- <p>
- <a data-toggle="collapse" href="#faq-address">
- Why do you need my address in order to process a donation?
- </a>
- </p>
+ <p>
+ <a data-toggle="collapse" href="#faq-address">
+ Why do you need my address in order to process a donation?
+ </a>
+ </p>
- <div class="collapse" id="faq-address">
- <p>
- We understand that your privacy is very important.
- </p>
+ <div class="collapse" id="faq-address">
+ <p>
+ We understand that your privacy is very important.
+ </p>
- <p>
- We ask for a minimum amount of information required to process
- credit card donations, including billing addresses.
- This allows our payment processor to verify your identity,
- process your payment, and prevent fraudulent charges to your credit card.
- </p>
+ <p>
+ We ask for a minimum amount of information required to process
+ credit card donations, including billing addresses.
+ This allows our payment processor to verify your identity,
+ process your payment, and prevent fraudulent charges to your credit card.
+ </p>
- <p>
- We keep your information private - if you have questions, please refer to
- Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
- </p>
+ <p>
+ We keep your information private - if you have questions, please refer to
+ Lightning Wire Labs' <a href="https://www.lightningwirelabs.com/legal">Privacy Policy</a>.
+ </p>
- <p>
- If you would rather not fill in your information on our online donation form,
- you can send your donation via SEPA bank transfer.
- </p>
- </div>
+ <p>
+ If you would rather not fill in your information on our online donation form,
+ you can send your donation via SEPA bank transfer.
+ </p>
+ </div>
- <p>
- <a data-toggle="collapse" href="#faq-tax-deduction">
- Is my donation tax deductible?
- </a>
- </p>
+ <p>
+ <a data-toggle="collapse" href="#faq-tax-deduction">
+ Is my donation tax deductible?
+ </a>
+ </p>
- <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 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>
- <p>
- For donors outside of the European Union, please consult your tax advisor
- about whether your donation is tax deductible.
- </p>
- </div>
+ <p>
+ For donors outside of the European Union, please consult your tax advisor
+ about whether your donation is tax deductible.
+ </p>
+ </div>
- <p>
- <a data-toggle="collapse" href="#faq-cancel">
- How do I cancel or change my recurring donation?
- </a>
- </p>
+ <p>
+ <a data-toggle="collapse" href="#faq-cancel">
+ How do I cancel or change my recurring donation?
+ </a>
+ </p>
- <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>
+ <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">
- Who can I email directly with questions about donating?
- </a>
- </p>
+ <p>
+ <a data-toggle="collapse" href="#faq-email">
+ Who can I email directly with questions about donating?
+ </a>
+ </p>
- <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>.
- </p>
- </div>
- </div>
- </section>
+ <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>.
+ </p>
+ </div>
</div>
</div>
- </div>
+ </section>
{% end block %}
{% block javascript %}