<div class="row">
<div class="donation-card d-flex flex-row text-left">
<div class="col-4 bg-blue-grey-900 text-white p-5 pt-6" style="border-radius: 4px 0 0 4px">
- <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
- {% if lang == "de" %}
- <p class="copy">
- Die Entwicklung und die Fortführung des Projekts wird allein
- von einer Gruppe von Freiwilligen getragen, die ein Produkt
- entwickelt hat, das tagtäglich von Hunderttausenden genutzt
- wird.
- </p>
+ <div class="mb-6">
+ <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
+ {% if lang == "de" %}
+ <p class="copy">
+ Die Entwicklung und die Fortführung des Projekts wird allein
+ von einer Gruppe von Freiwilligen getragen, die ein Produkt
+ entwickelt hat, das tagtäglich von Hunderttausenden genutzt
+ wird.
+ </p>
+
+ <p class="copy">
+ Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
+ </p>
+ {% else %}
+ <p class="copy">
+ IPFire is an Open Source software project.
+ </p>
+
+ <p class="copy">
+ 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 class="copy">
+ Your donation helps us to make IPFire even better...
+ </p>
+ </div>
+
+ <div class="mb-6">
+ <h3>Why should I donate?</h3>
- <p class="copy">
- Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
+ <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>
- {% else %}
- <p class="copy">
- IPFire is an Open Source software project.
+
+ <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">
- 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 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>
-
- <p class="copy">
- Your donation helps us to make IPFire even better...
+ </div>
+
+ <div class="mb-6">
+ <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>
- {% end %}
+ </div>
+ {% end %}
</div>
<div class="col pl-5 pr-5">
<div class="row">
<div class="col d-flex flex-column">
<h4 class="mb-5">Choose a currency</h4>
- <div class="dropdown-wrapper">
- <select class="currency-dropdown">
- <option class="form-control" value="EUR €">EUR €</option>
- <option class="form-control" value="US $">US $</option>
- </select>
+ <div class="row pt-4">
+ <div class="col">
+ <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked>
+ <label for="euro" class="form-check-label radiobtn">€uro</label>
+ </div>
+ <div class="col">
+ <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd">
+ <label for="usd" class="form-check-label radiobtn">USD $</label>
+ </div>
</div>
</div>
<h4 class="mb-5">Frequency</h4>
<div class="row pt-4">
<div class="col">
- <label class="form-check-label">
- <input class="form-check-input mr-4" type="radio" name="frequency" id="one-time-payment" value="single" onclick="Check()" checked>
- One time
- </label>
+ <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked>
+ <label for="one-time-payment" class="form-check-label radiobtn">One time</label>
</div>
<div class="col">
- <label class="form-check-label">
- <input class="form-check-input mr-4" type="radio" name="frequency" id="monthly-payment" value="monthly" onclick="Check()">
- Monthly
- </label>
+ <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
+ <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label>
</div>
</div>
</div>
<div class="row mb-6">
<div class="col">
<h4 class="mb-5">Choose an amount</h4>
- <div class="form-group d-flex flex-row flex-wrap" id="ifonetime" style="margin-left: -8px;">
+ <div class="form-group d-flex flex-row flex-wrap" style="margin-left: -8px;">
<input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
- <label for="10" class="form-check-label amount">10€</label>
+ <label for="10" class="form-check-label amount">10<span class="currency"></span></label>
<input class="amount-check" type="radio" name="amount" id="25" value="25">
- <label for="25" class="form-check-label amount">25€</label>
+ <label for="25" class="form-check-label amount">25<span class="currency"></span></label>
<input class="amount-check" type="radio" name="amount" id="50" value="50">
- <label for="50" class="form-check-label amount">50€</label>
+ <label for="50" class="form-check-label amount">50<span class="currency"><span class="currency"></label>
+
+ <input class="amount-check" type="radio" name="amount" id="50" value="50">
+ <label for="50" class="form-check-label amount">75<span class="currency"></span></label>
<input class="amount-check" type="radio" name="amount" id="100" value="100">
- <label for="100" class="form-check-label amount">100€</label>
+ <label for="100" class="form-check-label amount">100<span class="currency"></span></label>
<input class="amount-check" type="radio" name="amount" id="250" value="250">
- <label for="250" class="form-check-label amount">250€</label>
+ <label for="250" class="form-check-label amount">250<span class="currency"></span></label>
</div>
</div>
<div class="col">
<div class="form-group">
<h4 class="mb-5">Enter your own</h4>
- <input type="text" class="ownamount w-100" id="enterYourOwn" placeholder="1€ at least">
+ <input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount">
</div>
</div>
</div>
<div class="row mt-6">
- <div class="col">
- <h4>Choose payment</h4>
- </div>
- <div class="col d-flex flex-row justify-content-end">
- <i class="fa fa-lock mr-3" aria-hidden="true" style="position: relative; top: 4px;"></i>
- <p class="text-uppercase">Secure</p>
+ <div class="col d-flex flex-row">
+ <h4 class="mr-3">Choose payment</h4>
+ <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg>
+ <p class="text-uppercase blue_grey_300"><strong>Secure</strong></p>
</div>
</div>
- <div class="row d-flex align-items-center pl-4 pr-4 mb-6">
- <label class="form-check-label col d-flex align-items-center">
- <input class="form-check-input mr-4" type="radio" name="payment" id="creditcard" value="creditcard" checked style="margin-top: 0;">
- <i class="fa fa-cc-amex fa-3x m-3" aria-hidden="true"></i>
- <i class="fa fa-cc-mastercard fa-3x m-3" aria-hidden="true"></i>
- <i class="fa fa-cc-visa fa-3x m-3" aria-hidden="true"></i>
- </label>
- <label class="form-check-label col">
- <input class="form-check-input mr-4" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
- SEPA direct debit
- </label>
+ <div class="row d-flex pl-4 pr-4 mb-6">
+ <div class="col">
+ <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>
+ <label for="creditcard" class="form-check-label radiobtn" style="background-position: 0 20px">
+ <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-4">
+ </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-4">
+ </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/visax@3x.png") }} 3x "
+ alt="Visa" class="m-4">
+ </picture>
+ </label>
+ </div>
+
+ <div class="col" style="padding-top: 20px;">
+ <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
+ <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label>
+ </div>
</div>
</div>
</div>
<div class="row text-left">
<div class="col-5">
- <div class="mb-6">
- <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">
- <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-5 offset-2">
</section>
</div>
</div>
+
+<!-- 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>
+</svg>
{% end block %}
projects / people / shoehn / ipfire.org.git / blobdiff