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: #9ACD32;
  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     <div class='twocol'>
 154
 155       <form method="POST" action="" id="payment-form" class="wlform">
 156         {% csrf_token %}
 157
 158         {% chunk 'club_form_top' %}
 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         <h3>1. Wybierz rodzaj wsparcia</h3>
 173
 174         {{ form.amount }}
 175         {{ form.monthly }}
 176         <div class="plan-select">
 177           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
 178           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
 179         </div>
 180
 181         <h3>2. Wybierz kwotę</h3>
 182
 183         <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 }}">
 184           {% for amount in club.proposed_single_amounts %}
 185             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
 186           {% endfor %}
 187
 188           <span class="inna">
 189             <span class="button">inna kwota</span>
 190             <input type="number" min="{{ club.min_amount }}">
 191           </span>
 192 <div class="methods">{% include 'club/payment/payu.html' %}</div>
 193         </div>
 194
 195
 196         <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
 197           {% for amount in club.proposed_monthly_amounts %}
 198             <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
 199           {% endfor %}
 200
 201           <span class="inna">
 202             <span class="button">inna kwota</span>
 203             <input type="number" min="{{ club.min_amount }}">
 204           </span>
 205 <div class="methods">{% include 'club/payment/payu-re.html' %}</div>
 206         </div>
 207
 208         <h3>3. Podaj adres e-mail</h3>
 209
 210         <p>{{ form.email }}</p>
 211
 212         <p>
 213           {{ form.agree_newsletter }}
 214           <label for="id_agree_newsletter">
 215             Chcę dostawać informacje o nowościach
 216           </label>
 217         </p>
 218
 219         <p>W każdej chwili możesz zrezygnować z subskrypcji. Więcej w <a target="_blank" href="https://nowoczesnapolska.org.pl/prywatnosc/">polityce prywatności</a>.</p>
 220
 221         <div><button class="submit" type='submit'>Wpłać</button></div>
 222
 223         {% chunk 'club_form_bottom' %}
 224
 225       </form>
 226
 227       <div class="club-form-info">
 228         {% if ambassador %}
 229         <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
 230             <div>
 231               <em>
 232                 {{ ambassador.text }}
 233               </em>
 234               <div style="font-size: 1.2em">{{ ambassador.name }}</div>
 235             </div>
 236             {% if ambassador.photo %}
 237               <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
 238             {% endif %}
 239           </div>
 240         {% endif %}
 241         <div class="chunk-alt">
 242           <div class="chunk chunk-monthly">
 243             {% chunk 'club-form-info-monthly' %}
 244           </div>
 245           <div class="chunk chunk-single" style="display: none;">
 246             {% chunk 'club-form-info-single' %}
 247           </div>
 248           <div class="chunk chunk-single-year" style="display: none;">
 249             {% chunk 'club-form-info-single-year' %}
 250           </div>
 251   </div>
 252 </div>
 253 </div>
 254
 255 </div>
 256
 257 {% endblock %}