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