<h1 class="text-center mt-5 mb-5">{{ _("Donate") }}</h1>
<div class="container">
- <div class="card mb-5">
- <div class="row">
- <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>
- 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 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 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="col p-5 p-md-4 pt-4">
- <form action="" method="POST">
- {% raw xsrf_form_html() %}
+ <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="row mt-md-4">
- <div class="col-12 col-lg-6 mb-3 mb-md-0">
- <h6>Choose a currency</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="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="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="currency" id="USD" value="USD"
- {% if currency == "USD" %}checked{% end %}>
- <label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
+ <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="col-12 col-lg-6">
- <h6>Frequency</h6>
+ <div class="mt-5 mb-3 p-4 bg-light rounded">
+ <h6>{{ _("Choose an amount") }}</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>
+ <input type="hidden" name="amount" {% if amount %}value="{{ amount }}"{% end %} required>
- <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 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>
- </div>
-
- <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>
- <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>
+ <div class="form-group row mb-5">
+ <label class="col-sm-5 col-form-label col-form-label-lg">
+ or enter your own
</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="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 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>
- <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 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>
- <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 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>
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" name="last_name"
- placeholder="{{ _("Last Name" )}}" required>
+ <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>
- <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 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>
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" name="post_code"
- placeholder="{{ _("Post Code") }}" required>
+ <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>
-
- <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 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>
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" name="state"
- placeholder="{{ _("State (optional)") }}">
+ <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>
- <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>
- <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="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>
- <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 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>
- </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>
+ <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>
- </div>
- <div class="row">
- <div class="col-12 col-md-6 donation-explanation">
- <div class="d-block d-md-none">
- <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 class="donation-explanation">
+ <section>
+ <h5>Why should I donate?</h5>
- <section>
- <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>
+ </section>
- 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>
- </section>
+ <section>
+ <h5>How much should I give?</h5>
- <section>
- <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>
+ </section>
- <p>
- We rely on steady contributions from companies to keep the project healthy
- and encourage them to set up a monthly donation.
- </p>
- </section>
- </div>
+ <div class="faq">
+ <h5>Frequently Asked Questions</h5>
- <div class="col-12 col-md-6 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 text-muted" id="faq-bank-transfer">
+ <p>
+ We do accept direct transfers through SEPA. These are our bank details:
+ </p>
- <div class="collapse text-muted" 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 text-muted" 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 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>
+ <div class="collapse text-muted" 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 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>
- <a data-toggle="collapse" href="#faq-tax-deduction">
- Is my donation tax deductible?
- </a>
- </p>
-
- <div class="collapse text-muted" 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>
+ <a data-toggle="collapse" href="#faq-tax-deduction">
+ Is my donation tax deductible?
+ </a>
+ </p>
- <p>
- <a data-toggle="collapse" href="#faq-cancel">
- How do I cancel or change my recurring donation?
- </a>
- </p>
-
- <div class="collapse text-muted" 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 text-muted" 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>
- <a data-toggle="collapse" href="#faq-email">
- Who can I email directly with questions about donating?
- </a>
- </p>
-
- <div class="collapse text-muted" 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>
+ <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>
+
+ <div class="collapse text-muted" 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>
+
+ <div class="collapse text-muted" 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>
</div>
projects / ipfire.org.git / commitdiff
