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