src/club/templates/club/membership_form.html

   1 {% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
   2 {% load i18n %}
   3 {% load chunks %}
   4 {% load thumbnail %}
   5 {% load club %}
   6
   7 {% block titleextra %}{% trans "Join us in freeing the books!" %}{% endblock %}
   8 {% block metadescription %}{% trans "„Wolne Lektury należy wspierać, bo są” - Filip Springer" %}{% endblock %}
   9
  10
  11 {% block body %}
  12
  13   <style>
  14
  15    .plan-select {
  16        margin-bottom: 15px;
  17    }
  18 .methods {
  19  color: #888;
  20 line-height: 30px;
  21 }
  22 .methods .method {
  23   border: 1px solid #888;
  24   border-radius: 5px;
  25 display: inline-block;
  26 padding: 0 5px;
  27 }
  28 .methods img {
  29 height: 30px;
  30 margin-right: 5px;
  31 vertical-align: middle;
  32 }
  33    .payment-method.disabled {
  34        opacity: .5;
  35        filter: grayscale(100%);
  36    }
  37
  38    .button {
  39        box-sizing: border-box;
  40        display: inline-block;
  41        text-align: center;
  42    }
  43    .kwota, .inna .button, .plan-toggle, .inna input {
  44        border: 1px solid black;
  45        border-radius: 8px;
  46        background: none;
  47        cursor: pointer;
  48        padding: 0;
  49        margin-right: 3%;
  50        margin-bottom: 10px;
  51        line-height: 3em;
  52        font-size: 20px;
  53    }
  54    .plan-toggle {
  55        width: 46.5%;
  56    }
  57    .kwota {
  58        width: 30%;
  59    }
  60    .kwota:after {
  61        content: " zł";
  62    }
  63    .kwota.yearly {
  64        background: orange;
  65
  66    }
  67    .inna .button {
  68        width: 63%;
  69    }
  70    .inna input {
  71        width: 60%;
  72        padding-left: 1.5%;
  73        padding-right: 1.5%;
  74        height: 3em !important;
  75        text-align: center;
  76    }
  77    .chunk-alt {
  78        position: relative;
  79        overflow: hidden;
  80    }
  81    .chunk-alt .chunk {
  82        top: 0;
  83    }
  84
  85    .kwota.active, .plan-toggle.active {
  86        background: #9ACD32;
  87    }
  88    .inna input {display: none;}
  89    .inna.active input {display: inline;}
  90    .inna.active .button {display: none;}
  91
  92    .ambassador {
  93        padding: 2em;
  94        margin-bottom: 1em;
  95        border: 1px solid #ddd;
  96        position: relative;
  97    }
  98    .ambassador.with-photo {
  99        padding-right: 145px;
 100    }
 101    .ambassador img {
 102        border-radius: 100%;
 103        height: 100px;
 104        width: 100px;
 105        position: absolute;
 106        top: 35px;
 107        right: 30px;
 108    }
 109    .ambassador div {
 110        text-align: right;
 111        line-height: 1.5em;
 112    }
 113
 114    .club-form-info {
 115        line-height: 1.5em;
 116    }
 117
 118    @media screen and (max-width: 1023px) {
 119        .club-form-info {
 120            margin-top: 2em;
 121        }
 122    }
 123
 124
 125    @media screen and (min-width: 1024px) {
 126        .club-form-info {
 127            border-left: 1px solid #ddd;
 128            padding-left: 2em;
 129            margin-left: 2em;
 130        }
 131        .twocol {
 132            display: flex;
 133        }
 134        .twocol > form, .twocol > div {
 135            flex: 1;
 136        }
 137    }
 138
 139   </style>
 140
 141
 142   <div class="white-box normal-text">
 143
 144     <h1>{% trans "Support Wolne Lektury" %}</h1>
 145     <h2 style="margin-bottom:2em;">
 146       {% if membership %}
 147         {# Displays to members. #}
 148         {% trans "Thank you for your support! Support us again!" %}
 149       {% else %}
 150         {# Displays to non-supporters. #}
 151         {% trans "Thank you for wanting to free the books with us!" %}
 152       {% endif %}</h2>
 153
 154       {% with schedule=request.user|active_schedule %}
 155         {% if schedule %}
 156           <p><a href="{{ schedule.get_absolute_url }}">{% trans "See your past support." %}</a></p>
 157         {% endif %}
 158       {% endwith %}
 159
 160       <div class='twocol'>
 161
 162       <form method="POST" action="" id="payment-form" class="wlform">
 163         {% csrf_token %}
 164
 165         {% chunk 'club_form_top' %}
 166
 167         <ul class="errorlist">
 168           {% for e in  form.non_field_errors %}
 169             <li>{{ e }}</li>
 170           {% endfor %}
 171           {% for e in  form.plan.errors %}
 172             <li>{{ e }}</li>
 173           {% endfor %}
 174           {% for e in  form.amount.errors %}
 175             <li>{{ e }}</li>
 176           {% endfor %}
 177         </ul>
 178
 179         <h3>1. {% trans "Choose your type of support" %}</h3>
 180
 181         {{ form.amount }}
 182         {{ form.monthly }}
 183         <div class="plan-select">
 184           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">{% trans "one-time" %}</span>
 185           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">{% trans "monthly" %}</span>
 186         </div>
 187
 188         <h3>2. {% trans "Choose the amount" %}</h3>
 189
 190         <div class="plan" id="plan-single" style="display:none;" data-monthly="False" data-min-for-year="{{ club.min_for_year }}" data-amount="{{ club.default_single_amount }}">
 191           {% for amount in club.proposed_single_amounts %}
 192             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
 193           {% endfor %}
 194
 195           <span class="inna">
 196             <span class="button">{% trans "different amount" %}</span>
 197             <input type="number" min="{{ club.min_amount }}">
 198           </span>
 199           <div class="methods">{% include 'club/payment/payu.html' %}</div>
 200         </div>
 201
 202
 203         <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
 204           {% for amount in club.proposed_monthly_amounts %}
 205             <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
 206           {% endfor %}
 207
 208           <span class="inna">
 209             <span class="button">{% trans "different amount" %}</span>
 210             <input type="number" min="{{ club.min_amount }}">
 211           </span>
 212           <div class="methods">{% include 'club/payment/payu-re.html' %}</div>
 213         </div>
 214
 215         <h3>3. {% trans "Provide an e-mail address" %}</h3>
 216
 217         <p>{{ form.email }}</p>
 218
 219         <p>
 220           {{ form.agree_newsletter }}
 221           <label for="id_agree_newsletter">
 222             {% trans "I'd like to receive informations about new publications." %}
 223           </label>
 224         </p>
 225
 226         <p>{% trans 'You can unsubscribe at any point. More in the <a target="_blank" href="https://nowoczesnapolska.org.pl/prywatnosc/">privacy policy</a>.' %}</p>
 227
 228         <div><button class="submit" type='submit'>{% trans "Donate" %}</button></div>
 229
 230         {% chunk 'club_form_bottom' %}
 231
 232       </form>
 233
 234       <div class="club-form-info">
 235         {% if ambassador %}
 236         <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
 237             <div>
 238               <em>
 239                 {{ ambassador.text }}
 240               </em>
 241               <div style="font-size: 1.2em">{{ ambassador.name }}</div>
 242             </div>
 243             {% if ambassador.photo %}
 244               <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
 245             {% endif %}
 246           </div>
 247         {% endif %}
 248         <div class="chunk-alt">
 249           <div class="chunk chunk-monthly">
 250             {% chunk 'club-form-info-monthly' %}
 251           </div>
 252           <div class="chunk chunk-single" style="display: none;">
 253             {% chunk 'club-form-info-single' %}
 254           </div>
 255           <div class="chunk chunk-single-year" style="display: none;">
 256             {% chunk 'club-form-info-single-year' %}
 257           </div>
 258   </div>
 259 </div>
 260 </div>
 261
 262 </div>
 263
 264 {% endblock %}