src/club/templates/club/membership_form.html

   1 {% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
   2 {% load chunks %}
   3 {% load thumbnail %}
   4
   5 {% block titleextra %}Towarzystwo Wolnych Lektur{% endblock %}
   6
   7
   8 {% block body %}
   9
  10   <style>
  11    .payment-method.disabled {
  12        opacity: .5;
  13        filter: grayscale(100%);
  14    }
  15
  16    .button {
  17        box-sizing: border-box;
  18        display: inline-block;
  19        text-align: center;
  20    }
  21    .kwota, .inna .button, .plan-toggle, .inna input {
  22        border: 1px solid black;
  23        background: none;
  24        cursor: pointer;
  25        padding: 10px 0;
  26        margin-right: 3%;
  27        margin-bottom: 10px;
  28        line-height: 3em;
  29    }
  30    .plan-toggle {
  31        width: 46.5%;
  32    }
  33    .kwota {
  34        width: 30%;
  35    }
  36    .kwota:after {
  37        content: " zł";
  38    }
  39    .kwota.yearly {
  40        background: orange;
  41
  42    }
  43    .inna .button {
  44        width: 63%;
  45    }
  46    .inna input {
  47        width: 60%;
  48        padding-left: 1.5%;
  49        padding-right: 1.5%;
  50        height: 3em !important;
  51        text-align: center;
  52    }
  53    .chunk-alt {
  54        position: relative;
  55        overflow: hidden;
  56    }
  57    .chunk-alt .chunk {
  58        top: 0;
  59    }
  60
  61    .kwota.active, .plan-toggle.active {
  62        background: black;
  63        color: white;
  64    }
  65    .inna input {display: none;}
  66    .inna.active input {display: inline;}
  67    .inna.active .button {display: none;}
  68
  69    .ambassador {
  70        padding: 2em;
  71        margin-bottom: 1em;
  72        border: 1px solid #ddd;
  73        position: relative;
  74    }
  75    .ambassador.with-photo {
  76        padding-right: 145px;
  77    }
  78    .ambassador img {
  79        border-radius: 100%;
  80        height: 100px;
  81        width: 100px;
  82        position: absolute;
  83        top: 35px;
  84        right: 30px;
  85    }
  86    .ambassador div {
  87        text-align: right;
  88        line-height: 1.5em;
  89    }
  90
  91    .club-form-info {
  92        line-height: 1.5em;
  93    }
  94
  95    @media screen and (max-width: 1023px) {
  96        .club-form-info {
  97            margin-top: 2em;
  98        }
  99    }
 100
 101
 102    @media screen and (min-width: 1024px) {
 103        .club-form-info {
 104            border-left: 1px solid #ddd;
 105            padding-left: 2em;
 106            margin-left: 2em;
 107        }
 108        .twocol {
 109            display: flex;
 110        }
 111        .twocol > form, .twocol > div {
 112            flex: 1;
 113        }
 114    }
 115
 116   </style>
 117
 118
 119   <div class="white-box normal-text">
 120
 121     <h1>Wspieraj Wolne Lektury</h1>
 122     <h2 style="margin-bottom:2em;">
 123       {% if membership %}Dziękujemy za Twoje dotychczasowe zaangażowanie! Wesprzyj nas ponownie!{% else %}Dziękujemy, że chcesz razem z nami uwalniać książki!{% endif %}</h2>
 124
 125     {% chunk 'club_form_top' %}
 126     <div class='twocol'>
 127
 128       <form method="POST" action="" id="payment-form" class="wlform">
 129         {% csrf_token %}
 130         <h3>Zadeklaruj, jak często i jaką kwotą chcesz nas wspierać:</h3>
 131
 132         <ul class="errorlist">
 133           {% for e in  form.non_field_errors %}
 134             <li>{{ e }}</li>
 135           {% endfor %}
 136           {% for e in  form.plan.errors %}
 137             <li>{{ e }}</li>
 138           {% endfor %}
 139           {% for e in  form.amount.errors %}
 140             <li>{{ e }}</li>
 141           {% endfor %}
 142         </ul>
 143
 144         {{ form.amount }}
 145         {{ form.monthly }}
 146         <div>
 147           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
 148           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
 149         </div>
 150
 151         <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 }}">
 152           {% for amount in club.proposed_single_amounts %}
 153             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
 154           {% endfor %}
 155
 156           <span class="inna">
 157             <span class="button">inna kwota</span>
 158             <input type="number" min="{{ club.min_amount }}">
 159           </span>
 160         </div>
 161
 162
 163         <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
 164           {% for amount in club.proposed_monthly_amounts %}
 165             <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
 166           {% endfor %}
 167
 168           <span class="inna">
 169             <span class="button">inna kwota</span>
 170             <input type="number" min="{{ club.min_amount }}">
 171           </span>
 172         </div>
 173
 174         <h3>
 175           Podaj nam swój adres e-mail, żebyśmy mogli się z Tobą skontaktować:
 176         </h3>
 177
 178         <p>
 179           {{ form.email }}</p>
 180         <button class="submit" type='submit'>Dołącz</button>
 181       </form>
 182
 183       <div class="club-form-info">
 184         {% if ambassador %}
 185         <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
 186             <div>
 187               <em>
 188                 {{ ambassador.text }}
 189               </em>
 190               <div style="font-size: 1.2em">{{ ambassador.name }}</div>
 191             </div>
 192             {% if ambassador.photo %}
 193               <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
 194             {% endif %}
 195           </div>
 196         {% endif %}
 197         <div class="chunk-alt">
 198           <div class="chunk chunk-monthly">
 199             {% chunk 'club-form-info-monthly' %}
 200           </div>
 201           <div class="chunk chunk-single" style="display: none;">
 202             {% chunk 'club-form-info-single' %}
 203           </div>
 204           <div class="chunk chunk-single-year" style="display: none;">
 205             {% chunk 'club-form-info-single-year' %}
 206           </div>
 207   </div>
 208 </div>
 209 </div>
 210
 211 </div>
 212
 213 {% endblock %}