templates/donate.html

   1 {% extends "base-1.html" %}
   2
   3 {% block title %}{{ _("Donate") }}{% end block %}
   4
   5 {% block container %}
   6         <section class="donation">
   7                 <div class="container">
   8                         <div class="row">
   9                                 <section class="features-content col-12 text-center">
  10                                         <h2 class="display-2">{{ _("Donate") }}</h2>
  11
  12                                         <div class="row justify-content-center mb-6">
  13                                                 <div class="col-12 col-sm-11 col-xl-12">
  14                                                         <div class="row">
  15                                                                 <div class="donation-card d-flex flex-column flex-md-row-reverse text-left col p-0">
  16                                                                         <div class="card p-4 p-sm-6 p-md-4 pt-6">
  17                                                                                 <div class="row py-md-3 px-md-6">
  18                                                                                         <div class="col-12 col-lg-6 d-flex flex-column mb-6 mb-lg-0">
  19                                                                                                 <h4 class="mb-5">Choose a currency</h4>
  20                                                                                                 <div class="row pt-4">
  21                                                                                                         <div class="col col-sm-4 col-md-5">
  22                                                                                                                 <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="euro" value="euro" checked>
  23                                                                                                                 <label for="euro" class="form-check-label radiobtn">€uro</label>
  24                                                                                                         </div>
  25                                                                                                         <div class="col col-sm-4 col-md-5">
  26                                                                                                                 <input class="form-check-input mr-4 radiobtn" type="radio" name="currency" id="usd" value="usd">
  27                                                                                                                 <label for="usd" class="form-check-label radiobtn">USD $</label>
  28                                                                                                         </div>
  29                                                                                                 </div>
  30                                                                                         </div>
  31
  32                                                                                         <div class="col d-flex flex-column">
  33                                                                                                 <h4 class="mb-5">Frequency</h4>
  34                                                                                                 <div class="row pt-4">
  35                                                                                                         <div class="col col-sm-4 col-md-5 col-lg-6">
  36                                                                                                                 <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="one-time-payment" value="single" checked>
  37                                                                                                                 <label for="one-time-payment" class="form-check-label radiobtn">One time</label>
  38                                                                                                         </div>
  39                                                                                                         <div class="col col-sm-4 col-md-5">
  40                                                                                                                 <input class="form-check-input mr-4 radiobtn" type="radio" name="frequency" id="monthly-payment" value="monthly">
  41                                                                                                                 <label for="monthly-payment" class="form-check-label radiobtn">Monthly</label>
  42                                                                                                         </div>
  43                                                                                                 </div>
  44                                                                                         </div>
  45                                                                                 </div>
  46
  47                                                                                 <div class="row mt-6">
  48                                                                                         <div class="inline-card bg-blue-grey-50 col-11 mx-auto">
  49                                                                                                 <div class="or"></div>
  50                                                                                                 <div class="row mb-4 mb-sm-6 mb-lg-0">
  51                                                                                                         <div class="col-12 col-lg-6 mb-6">
  52                                                                                                                 <h4 class="mb-5">Choose an amount</h4>
  53                                                                                                                 <div class="form-group d-flex flex-row flex-wrap" id="amount">
  54                                                                                                                         <input class="amount-check" type="radio" name="amount" id="10" value="10" checked>
  55                                                                                                                         <label for="10" class="form-check-label amount"><span id="amount_10">10</span><span class="currency">€</span></label>
  56
  57                                                                                                                         <input class="amount-check" type="radio" name="amount" id="25" value="25">
  58                                                                                                                         <label for="25" class="form-check-label amount"><span id="amount_25">25</span><span class="currency">€</span></label>
  59
  60                                                                                                                         <input class="amount-check" type="radio" name="amount" id="50" value="50">
  61                                                                                                                         <label for="50" class="form-check-label amount"><span id="amount_50">50</span><span class="currency">€</span></label>
  62
  63                                                                                                                         <input class="amount-check" type="radio" name="amount" id="75" value="50">
  64                                                                                                                         <label for="50" class="form-check-label amount"><span id="amount_75">75</span><span class="currency">€</span></label>
  65
  66                                                                                                                         <input class="amount-check" type="radio" name="amount" id="100" value="100">
  67                                                                                                                         <label for="100" class="form-check-label amount"><span id="amount_100">100</span><span class="currency">€</span></label>
  68
  69                                                                                                                         <input class="amount-check" type="radio" name="amount" id="250" value="250">
  70                                                                                                                         <label for="250" class="form-check-label amount"><span id="amount_250">250</span><span class="currency">€</span></label>
  71                                                                                                                 </div>
  72                                                                                                         </div>
  73                                                                                                         <div class="col">
  74                                                                                                                 <div class="form-group">
  75                                                                                                                         <h4 class="mb-5">Enter your own</h4>
  76                                                                                                                         <input type="number" class="ownamount w-100" id="enterYourOwn" placeholder="Enter your own amount">
  77                                                                                                                 </div>
  78                                                                                                         </div>
  79                                                                                                 </div>
  80                                                                                                 <div class="row mt-5 mt-sm-6 mb-5 mb-lg-0 mt-lg-0">
  81                                                                                                         <div class="col d-flex flex-row">
  82                                                                                                                 <h4 class="mr-3">Choose payment</h4>
  83                                                                                                                 <svg class="icon i_secure ml-4"><use xlink:href="#secure"/></svg>
  84                                                                                                                 <p class="text-uppercase blue_grey_300"><strong>Secure</strong></p>
  85                                                                                                         </div>
  86                                                                                                 </div>
  87
  88                                                                                                 <div class="row d-flex flex-column flex-lg-row pl-4 pr-4 md-4 mb-lg-0 mb-xl-6">
  89                                                                                                         <div class="col col-lg-6 col-xl-4" id="ccpayment">
  90                                                                                                                 <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="creditcard" value="creditcard" checked>
  91                                                                                                                 <label for="creditcard" class="form-check-label radiobtn cc">
  92                                                                                                                         <picture>
  93                                                                                                                                 <source srcset="{{ static_url("img/amex.png") }},
  94                                                                                                                                         {{ static_url("img/amex@2x.png") }} 2x,
  95                                                                                                                                         {{ static_url("img/amex@3x.png") }} 3x ">
  96                                                                                                                                 <img src="{{ static_url("img/amex.png") }}"
  97                                                                                                                                          srcset="{{ static_url("img/amex.png") }},
  98                                                                                                                                         {{ static_url("img/amex@2x.png") }} 2x,
  99                                                                                                                                         {{ static_url("img/amex@3x.png") }} 3x "
 100                                                                                                                                         alt="Amex" class="m-xl-2">
 101                                                                                                                         </picture>
 102
 103                                                                                                                         <picture>
 104                                                                                                                                 <source srcset="{{ static_url("img/mastercard.png") }},
 105                                                                                                                                         {{ static_url("img/mastercard@2x.png") }} 2x,
 106                                                                                                                                         {{ static_url("img/mastercard@3x.png") }} 3x ">
 107                                                                                                                                 <img src="{{ static_url("img/mastercard.png") }}"
 108                                                                                                                                          srcset="{{ static_url("img/mastercard.png") }},
 109                                                                                                                                         {{ static_url("img/mastercard@2x.png") }} 2x,
 110                                                                                                                                         {{ static_url("img/mastercard@3x.png") }} 3x "
 111                                                                                                                                         alt="Mastercard" class="m-xl-2">
 112                                                                                                                         </picture>
 113
 114                                                                                                                         <picture>
 115                                                                                                                                 <source srcset="{{ static_url("img/visa.png") }},
 116                                                                                                                                         {{ static_url("img/visa@2x.png") }} 2x,
 117                                                                                                                                         {{ static_url("img/visa@3x.png") }} 3x ">
 118                                                                                                                                 <img src="{{ static_url("img/visa.png") }}"
 119                                                                                                                                          srcset="{{ static_url("img/visa.png") }},
 120                                                                                                                                         {{ static_url("img/visa@2x.png") }} 2x,
 121                                                                                                                                         {{ static_url("img/visa@3x.png") }} 3x "
 122                                                                                                                                         alt="Visa" class="m-xl-2">
 123                                                                                                                         </picture>
 124                                                                                                                 </label>
 125                                                                                                         </div>
 126
 127                                                                                                         <div class="col col-lg-6 col-xl-4" id="sepapayment">
 128                                                                                                                 <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="sepa-payment" value="sepa-payment">
 129                                                                                                                 <label for="sepa-payment" class="form-check-label radiobtn">SEPA direct debit</label>
 130                                                                                                         </div>
 131
 132                                                                                                         <div class="col col-lg-6 col-xl-4" id="paymentpaypal">
 133                                                                                                                 <input class="form-check-input mr-4 radiobtn" type="radio" name="payment" id="paypal" value="paypal">
 134                                                                                                                 <label for="paypal" class="form-check-label radiobtn">
 135                                                                                                                         <picture>
 136                                                                                                                                 <source srcset="{{ static_url("img/paypal.png") }},
 137                                                                                                                                         {{ static_url("img/paypal@2x.png") }} 2x,
 138                                                                                                                                         {{ static_url("img/paypal@3x.png") }} 3x ">
 139                                                                                                                                 <img src="{{ static_url("img/paypal.png") }}"
 140                                                                                                                                          srcset="{{ static_url("img/paypal.png") }},
 141                                                                                                                                         {{ static_url("img/paypal@2x.png") }} 2x,
 142                                                                                                                                         {{ static_url("img/paypal@3x.png") }} 3x "
 143                                                                                                                                         alt="PayPal" class="m-xl-4">
 144                                                                                                                         </picture>
 145                                                                                                                 </label>
 146                                                                                                         </div>
 147                                                                                                 </div>
 148                                                                                         </div>
 149                                                                                 </div>
 150
 151                                                                                 <button type="button" class="btn btn-primary btn-lg m-0" style="position: relative; top: -24px; left: 50%; transform: translateX(-50%);">Donate Now</button>
 152
 153                                                                                 <p class="small text-left mt-5 mb-6">
 154                                                                                         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.
 155                                                                                 </p>
 156                                                                         </div>
 157
 158                                                                         <div class="info col-md-4 bg-blue-grey-900 text-white p-5 pt-6">
 159                                                                                 <div class="mb-6">
 160                                                                                         <h3>IP<strong>Fire</strong> is an Open Source software project.</h3>
 161                                                                                         {% if lang == "de" %}
 162                                                                                                 <p class="copy">
 163                                                                                                         Die Entwicklung und die Fortführung des Projekts wird allein
 164                                                                                                         von einer Gruppe von Freiwilligen getragen, die ein Produkt
 165                                                                                                         entwickelt hat, das tagtäglich von Hunderttausenden genutzt
 166                                                                                                         wird.
 167                                                                                                 </p>
 168
 169                                                                                                 <p class="copy">
 170                                                                                                         Jede einzelne Spende hilft IPFire noch weiter zu verbessern...
 171                                                                                                 </p>
 172                                                                                         {% else %}
 173                                                                                                 <p class="copy">
 174                                                                                                         IPFire is an Open Source software project.
 175                                                                                                 </p>
 176
 177                                                                                                 <p class="copy">
 178                                                                                                         Development and keeping the project healthy is carried out by a
 179                                                                                                         group of volunteers who have built a very successful product,
 180                                                                                                         which hundreds of thousands of people use every day.
 181                                                                                                 </p>
 182
 183                                                                                                 <p class="copy">
 184                                                                                                         Your donation helps us to make IPFire even better...
 185                                                                                                 </p>
 186                                                                                 </div>
 187
 188                                                                                 <div class="mb-6 d-flex justify-content-between">
 189                                                                                         <h3><a href="#whydonate">Why should I donate?</a></h3><a href="#whydonate"><svg class="icon i_arrow_down_2 ml-4"><use xlink:href="#arrow-down-2"/></svg></a>
 190                                                                                 </div>
 191
 192                                                                                 <div class="mb-6 d-flex justify-content-between">
 193                                                                                         <h3><a href="#howmuch">How much should I give?</a></h3><a href="#howmuch"><svg class="icon i_arrow_down_2 ml-4"><use xlink:href="#arrow-down-2"/></svg></a>
 194                                                                                 </div>
 195                                                                         {% end %}
 196                                                                         </div>
 197                                                                 </div>
 198                                                         </div>
 199                                                 </div>
 200                                         </div>
 201                                 </section>
 202                         </div>
 203                 </div>
 204         </section>
 205
 206         <section>
 207                 <div class="container">
 208                                 <div class="row text-left">
 209                                         <div class="col-10 col-md-5 offset-sm-1 offset-xl-0">
 210                                                 <div class="mb-6" id="whydonate">
 211                                                         <h3>Why should I donate?</h3>
 212
 213                                                         <p class="copy">We are proud of what we are doing here at IPFire. We create a free firewall
 214                                                                 distribution that is free to use for everyone anywhere in the world. To do that,
 215                                                                 we need to provide the infrastructure to distribute it to our users and provide
 216                                                                 the right tools for our developers to help them to make IPFire better every day.
 217                                                         </p>
 218
 219                                                         <p class="copy">Donations from individuals and corporations are the only way to keep all of our
 220                                                                 services free for everyone. They pay for hosting, advertising, purchase
 221                                                                 equipment and to fund the work of the people behind it.
 222                                                         </p>
 223
 224                                                         <p class="copy">Our ambition is to compete with projects backed by large corporations and
 225                                                                 proprietary solutions and we cannot do that without you. Become a supporter
 226                                                                 today!
 227                                                         </p>
 228                                                 </div>
 229
 230                                                 <div class="mb-6" id="howmuch">
 231                                                         <h3>How much should I give?</h3>
 232
 233                                                         <p class="copy">Donations range from single digits donations to hundreds. For us it is important
 234                                                                 to give something back to help this project to succeed. If you want to help,
 235                                                                 please do so and encourage others to do so, too.
 236                                                         </p>
 237                                                 </div>
 238                                         </div>
 239
 240                                         <div class="col-10 col-md-4 offset-sm-1 offset-xl-2">
 241                                                 <h3>Frequently Asked Questions</h3>
 242                                                 <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>
 243                                         </div>
 244                                 </div>
 245                 </div>
 246         </section>
 247
 248 <!-- Icons -->
 249 <svg aria-hidden="true" style="display: none">
 250         <symbol id="secure" viewBox="0 0 24 24">
 251                 <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"/>
 252         </symbol>
 253         <symbol id="arrow-down-2" viewBox="0 0 24 24">
 254                 <path d="M11,3v14.2l-3.6-3.6L6,15l6,6l6-6l-1.4-1.4L13,17.2V3H11z"/>
 255         </symbol>
 256 </svg>
 257
 258 <script type="text/javascript">
 259 $(document).ready(function(){
 260         $("input[name='currency']").on("change", function(){
 261                 if ($(this).val() == "euro") {
 262                         $('.currency').html('€');
 263                 }
 264                 else if ($(this).val() == "usd") {
 265                         $('.currency').html('$');
 266                 }
 267         });
 268         $("input[name='frequency']").on("change", function(){
 269                 if ($(this).val() == "single") {
 270                         $("input#10").attr("value", "10");
 271                         document.getElementById("amount_10").innerHTML="10";
 272                         $("input#25").attr("value", "25");
 273                         document.getElementById("amount_25").innerHTML="25";
 274                         $("input#50").attr("value", "50");
 275                         document.getElementById("amount_50").innerHTML="50";
 276                         $("input#75").attr("value", "75");
 277                         document.getElementById("amount_75").innerHTML="75";
 278                         $("input#100").attr("value", "100");
 279                         document.getElementById("amount_100").innerHTML="100";
 280                         $("input#250").attr("value", "250");
 281                         document.getElementById("amount_250").innerHTML="250";
 282                         document.getElementById("paymentpaypal").style.visibility = 'visible';
 283                 }
 284                 else if ($(this).val() == "monthly") {
 285                         $("input#10").attr("value", "2");
 286                         document.getElementById("amount_10").innerHTML="2";
 287                         $("input#25").attr("value", "3");
 288                         document.getElementById("amount_25").innerHTML="3";
 289                         $("input#50").attr("value", "5");
 290                         document.getElementById("amount_50").innerHTML="5";
 291                         $("input#75").attr("value", "7");
 292                         document.getElementById("amount_75").innerHTML="7";
 293                         $("input#100").attr("value", "10");
 294                         document.getElementById("amount_100").innerHTML="10";
 295                         $("input#250").attr("value", "12");
 296                         document.getElementById("amount_250").innerHTML="12";
 297                         document.getElementById("paymentpaypal").style.visibility = 'hidden';
 298                 }
 299         })
 300 });
 301 </script>
 302
 303 {% end block %}