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