<h1 class="text-center mt-5 mb-5">{{ _("Donate") }}</h1>
- <section class="donation">
- <div class="container">
- <div class="row mb-5">
- <div class="col-12">
- <div class="card">
- <div class="card-body">
- <div class="row">
- <div class="col col-lg-4">
- <h5>IP<strong>Fire</strong> is an Open Source software project.</h5>
-
- <p>
- IPFire is an Open Source software project.
- </p>
+ <div class="container">
+ <div class="card mb-5">
+ <div class="card-body">
+ <div class="row flex-lg-row-reverse">
+ <div class="col-12 col-lg-8">
+ <form action="" method="POST">
+ {% raw xsrf_form_html() %}
+
+ <div class="row justify-content-center">
+ <div class="col-12 col-sm-11 col-xl-12 p-4 p-sm-6 p-md-4 pt-6">
+ <div class="row">
+ <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" checked>
+ <label class="form-check-label" for="EUR">{{ _("Euro") }}</label>
+ </div>
- <p>
- Development and keeping the project healthy is carried out by a
- group of volunteers who have built a very successful product,
- which hundreds of thousands of people use every day.
- </p>
+ <div class="form-check form-check-inline">
+ <input class="form-check-input" type="radio" name="currency" id="USD" value="USD">
+ <label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
+ </div>
+ </div>
- <p>
- Your donation helps us to make IPFire even better...
- </p>
- </div>
+ <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-single" value="single" checked>
+ <label class="form-check-label" for="frequency-single">{{ _("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">
+ <label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
+ </div>
+ </div>
+ </div>
+
+ <div class="my-5 p-5 bg-light">
+ <h6>{{ _("Choose an amount") }}</h6>
+
+ <div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
+ {% for amount in amounts %}
+ <label class="btn btn-secondary btn-lg mb-2">
+ <input type="radio" name="amount" value="{{ amount }}"
+ autocomplete="off"> <span class="USD">$</span>{{ amount }} <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="col-sm-5">
+ <input type="number" class="form-control form-control-lg" id="enterYourOwn">
+ </div>
+ </div>
+
+ <div class="row mb-5">
+ <div class="col">
+ <h6>Choose payment</h6>
+
+ <div class="form-check form-check-inline">
+ <input class="form-check-input" type="radio"
+ name="payment" id="credit-card" value="credit-card" checked>
+ <label for="credit-card" class="form-check-label">
+ <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>
+ </label>
+ </div>
+
+ <div class="form-check form-check-inline">
+ <input class="form-check-input" type="radio" name="payment"
+ id="direct-debit" value="direct-debit">
+
+ <label for="direct-debit" class="form-check-label">
+ SEPA
+ </label>
+ </div>
+
+ <div class="form-check form-check-inline paypal">
+ <input class="form-check-input" type="radio" name="payment"
+ id="paypal" value="paypal">
+
+ <label for="paypal" class="form-check-label">
+ <picture>
+ <source srcset="{{ static_url("img/paypal.png") }},
+ {{ static_url("img/paypal@2x.png") }} 2x,
+ {{ static_url("img/paypal@3x.png") }} 3x ">
+ <img src="{{ static_url("img/paypal.png") }}"
+ srcset="{{ static_url("img/paypal.png") }},
+ {{ static_url("img/paypal@2x.png") }} 2x,
+ {{ static_url("img/paypal@3x.png") }} 3x "
+ alt="PayPal" class="m-xl-2">
+ </picture>
+ </label>
+ </div>
+ </div>
+ </div>
+
+ <div class="row collapse" id="address">
+ <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="inlineRadioOptions" id="inlineRadio1" value="option1">
+ <label class="form-check-label" for="inlineRadio1">{{ _("Mr.") }}</label>
+ </div>
+ <div class="form-check form-check-inline mb-3">
+ <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
+ <label class="form-check-label" for="inlineRadio2">{{ _("Mrs.") }}</label>
+ </div>
+ </div>
+ </div>
+
+ <div class="form-row">
+ <div class="col-sm-6">
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("First Name" )}}" required>
+ </div>
+ </div>
+
+ <div class="col-sm-6">
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("Last Name" )}}" required>
+ </div>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <input type="email" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("Email Address") }}" required>
+ </div>
+
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("Company Name (optional)") }}">
+ </div>
+
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("Address Line 1") }}" required>
+ </div>
- <div class="col col-lg-8">
- <form action="" method="POST">
- {% raw xsrf_form_html() %}
-
- <div class="row justify-content-center">
- <div class="col-12 col-sm-11 col-xl-12">
- <div class="row">
- <div class="d-flex flex-column flex-md-row-reverse text-left col p-0">
- <div class="p-4 p-sm-6 p-md-4 pt-6">
- <div class="row step1">
- <div class="col-12 col-lg-6">
- <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" checked>
- <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">
- <label class="form-check-label" for="USD">{{ _("US Dollar") }}</label>
- </div>
- </div>
-
- <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-single" value="single" checked>
- <label class="form-check-label" for="frequency-single">{{ _("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">
- <label class="form-check-label" for="frequency-monthly">{{ _("Monthly") }}</label>
- </div>
- </div>
- </div>
-
- <div class="my-5 p-5 bg-light">
- <h6>{{ _("Choose an amount") }}</h6>
-
- <div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
- {% for amount in amounts %}
- <label class="btn btn-secondary btn-lg mb-2">
- <input type="radio" name="amount" value="{{ amount }}"
- autocomplete="off"> <span class="USD">$</span>{{ amount }} <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="col-sm-5">
- <input type="number" class="form-control form-control-lg" id="enterYourOwn">
- </div>
- </div>
-
- <div class="row mb-5">
- <div class="col">
- <h6>Choose payment</h6>
-
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="radio"
- name="payment" id="credit-card" value="credit-card" checked>
- <label for="credit-card" class="form-check-label">
- <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>
- </label>
- </div>
-
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="radio" name="payment"
- id="direct-debit" value="direct-debit">
-
- <label for="direct-debit" class="form-check-label">
- SEPA
- </label>
- </div>
-
- <div class="form-check form-check-inline paypal">
- <input class="form-check-input" type="radio" name="payment"
- id="paypal" value="paypal">
-
- <label for="paypal" class="form-check-label">
- <picture>
- <source srcset="{{ static_url("img/paypal.png") }},
- {{ static_url("img/paypal@2x.png") }} 2x,
- {{ static_url("img/paypal@3x.png") }} 3x ">
- <img src="{{ static_url("img/paypal.png") }}"
- srcset="{{ static_url("img/paypal.png") }},
- {{ static_url("img/paypal@2x.png") }} 2x,
- {{ static_url("img/paypal@3x.png") }} 3x "
- alt="PayPal" class="m-xl-2">
- </picture>
- </label>
- </div>
- </div>
- </div>
-
- <div class="row collapse" id="address">
- <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="inlineRadioOptions" id="inlineRadio1" value="option1">
- <label class="form-check-label" for="inlineRadio1">{{ _("Mr.") }}</label>
- </div>
- <div class="form-check form-check-inline mb-3">
- <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
- <label class="form-check-label" for="inlineRadio2">{{ _("Mrs.") }}</label>
- </div>
- </div>
- </div>
-
- <div class="form-row">
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("First Name" )}}" required>
- </div>
- </div>
-
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("Last Name" )}}" required>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <input type="email" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("Email Address") }}" required>
- </div>
-
- <div class="form-group">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("Company Name (optional)") }}">
- </div>
-
- <div class="form-group">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("Address Line 1") }}" required>
- </div>
-
- <div class="form-group">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("Address Line 2") }}">
- </div>
-
- <div class="form-row">
- <div class="col-sm-6">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("City") }}" required>
- </div>
-
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("Post Code") }}" required>
- </div>
- </div>
- </div>
-
- <div class="form-row">
- <div class="col-sm-6">
- <select class="form-control" id="exampleFormControlSelect1" required>
- <option value="">- {{ _("Country") }} -</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
- </div>
-
- <div class="col-sm-6">
- <div class="form-group">
- <input type="text" class="form-control" id="exampleFormControlInput1"
- placeholder="{{ _("State (optional)") }}">
- </div>
- </div>
- </div>
-
- <input type="submit" class="btn btn-primary btn-lg mx-auto"
- id="donate" value="{{ _("Donate Now") }}">
- </div>
- </div>
-
- <div class="row">
- <div class="col text-center">
- <button class="btn btn-primary btn-lg" id="next"
- data-toggle="collapse" href="#address">{{ _("Next") }} »</button>
- </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">
- <button type="button" class="btn btn-primary">Save changes</button>
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <p class="small text-muted">
- There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc.
- </p>
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("Address Line 2") }}">
+ </div>
+
+ <div class="form-row">
+ <div class="col-sm-6">
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("City") }}" required>
</div>
</div>
+
+ <div class="col-sm-6">
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("Post Code") }}" required>
+ </div>
+ </div>
+ </div>
+
+ <div class="form-row">
+ <div class="col-sm-6">
+ <div class="form-group">
+ <select class="form-control" id="exampleFormControlSelect1" required>
+ <option value="">- {{ _("Country") }} -</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="col-sm-6">
+ <div class="form-group">
+ <input type="text" class="form-control" id="exampleFormControlInput1"
+ placeholder="{{ _("State (optional)") }}">
+ </div>
+ </div>
+ </div>
+
+ <input type="submit" class="btn btn-primary btn-lg mx-auto"
+ id="donate" value="{{ _("Donate Now") }}">
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col text-center">
+ <button class="btn btn-primary btn-lg" id="next"
+ data-toggle="collapse" href="#address">{{ _("Next") }} »</button>
+ </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">
+ <button type="button" class="btn btn-primary">Save changes</button>
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ </div>
</div>
</div>
</div>
- </form>
+ </div>
+
+ <p class="small text-muted">
+ There should also be some area for the small-print since we need to tell people who they are donating to and that we don't do any refunds, etc.
+ </p>
</div>
</div>
- </div>
+ </form>
</div>
- </section>
+
+ <div class="col col-lg-4">
+ <h5>IP<strong>Fire</strong> is an Open Source software project.</h5>
+
+ <p>
+ IPFire is an Open Source software project.
+ </p>
+
+ <p>
+ Development and keeping the project healthy is carried out by a
+ group of volunteers who have built a very successful product,
+ which hundreds of thousands of people use every day.
+ </p>
+
+ <p>
+ Your donation helps us to make IPFire even better...
+ </p>
+ </div>
+ </div>
</div>
</div>
- </section>
+ </div>
<section>
<div class="container">
- <div class="row text-left">
- <div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
- <div class="mb-6" id="whydonate">
- <h3>Why should I donate?</h3>
-
- <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
- distribution that is free to use for everyone anywhere in the world. To do that,
- we need to provide the infrastructure to distribute it to our users and provide
- the right tools for our developers to help them to make IPFire better every day.
- </p>
-
- <p class="copy">Donations from individuals and corporations are the only way to keep all of our
- services free for everyone. They pay for hosting, advertising, purchase
- equipment and to fund the work of the people behind it.
- </p>
-
- <p class="copy">Our ambition is to compete with projects backed by large corporations and
- proprietary solutions and we cannot do that without you. Become a supporter
- today!
- </p>
- </div>
-
- <div class="mb-6" id="howmuch">
- <h3>How much should I give?</h3>
-
- <p class="copy">Donations range from single digits donations to hundreds. For us it is important
- to give something back to help this project to succeed. If you want to help,
- please do so and encourage others to do so, too.
- </p>
- </div>
+ <div class="row text-left">
+ <div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
+ <div class="mb-6" id="whydonate">
+ <h3>Why should I donate?</h3>
+
+ <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
+ distribution that is free to use for everyone anywhere in the world. To do that,
+ we need to provide the infrastructure to distribute it to our users and provide
+ the right tools for our developers to help them to make IPFire better every day.
+ </p>
+
+ <p class="copy">Donations from individuals and corporations are the only way to keep all of our
+ services free for everyone. They pay for hosting, advertising, purchase
+ equipment and to fund the work of the people behind it.
+ </p>
+
+ <p class="copy">Our ambition is to compete with projects backed by large corporations and
+ proprietary solutions and we cannot do that without you. Become a supporter
+ today!
+ </p>
</div>
- <div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
- <h3>Frequently Asked Questions</h3>
- <p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+ <div class="mb-6" id="howmuch">
+ <h3>How much should I give?</h3>
+
+ <p class="copy">Donations range from single digits donations to hundreds. For us it is important
+ to give something back to help this project to succeed. If you want to help,
+ please do so and encourage others to do so, too.
+ </p>
</div>
</div>
+
+ <div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
+ <h3>Frequently Asked Questions</h3>
+ <p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
+ </div>
+ </div>
</div>
</section>
-
-<!-- Icons -->
-<svg aria-hidden="true" style="display: none">
- <symbol id="secure" viewBox="0 0 24 24">
- <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
- </symbol>
- <symbol id="arrow-down-2" viewBox="0 0 24 24">
- <path d="M11,3v14.2l-3.6-3.6L6,15l6,6l6-6l-1.4-1.4L13,17.2V3H11z"/>
- </symbol>
-</svg>
{% end block %}
{% block javascript %}
projects / ipfire.org.git / commitdiff
