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