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