templates/donate.html

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