X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/9a5e7a1f45c46fbf3509cb660e29806e7ca05a8d..3c2212f96c81ec3440c8ad8c9290786cf30327e4:/src/club/templates/club/membership_form.html

diff --git a/src/club/templates/club/membership_form.html b/src/club/templates/club/membership_form.html
index 474095be3..fe85c1c88 100644
--- a/src/club/templates/club/membership_form.html
+++ b/src/club/templates/club/membership_form.html
@@ -1,224 +1,45 @@
 {% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
+{% load i18n %}
 {% load chunks %}
 {% load thumbnail %}
 {% load club %}
 
-{% block titleextra %}Uwalniaj książki razem z nami!{% endblock %}
-{% block metadescription %}„Wolne Lektury należy wspierać, bo są” - Filip Springer{% endblock %}
+{% block titleextra %}{% trans "Join us in freeing the books!" %}{% endblock %}
+{% block metadescription %}{% trans "„Wolne Lektury należy wspierać, bo są” - Filip Springer" %}{% endblock %}
 
 
 {% block body %}
-
-  <style>
-
-   .plan-select {
-       margin-bottom: 15px;
-   }
-.methods {
- color: #888;
-line-height: 30px;
-}
-.methods .method {
-  border: 1px solid #888;
-  border-radius: 5px;
-display: inline-block;
-padding: 0 5px;
-}
-.methods img {
-height: 30px;
-margin-right: 5px;
-vertical-align: middle;
-}
-   .payment-method.disabled {
-       opacity: .5;
-       filter: grayscale(100%);
-   }
-
-   .button {
-       box-sizing: border-box;
-       display: inline-block;
-       text-align: center;
-   }
-   .kwota, .inna .button, .plan-toggle, .inna input {
-       border: 1px solid black;
-       border-radius: 8px;
-       background: none;
-       cursor: pointer;
-       padding: 0;
-       margin-right: 3%;
-       margin-bottom: 10px;
-       line-height: 3em;
-       font-size: 20px;
-   }
-   .plan-toggle {
-       width: 46.5%;
-   }
-   .kwota {
-       width: 30%;
-   }
-   .kwota:after {
-       content: " zł";
-   }
-   .kwota.yearly {
-       background: orange;
-
-   }
-   .inna .button {
-       width: 63%;
-   }
-   .inna input {
-       width: 60%;
-       padding-left: 1.5%;
-       padding-right: 1.5%;
-       height: 3em !important;
-       text-align: center;
-   }
-   .chunk-alt {
-       position: relative;
-       overflow: hidden;
-   }
-   .chunk-alt .chunk {
-       top: 0;
-   }
-
-   .kwota.active, .plan-toggle.active {
-       background: #9ACD32;
-   }
-   .inna input {display: none;}
-   .inna.active input {display: inline;}
-   .inna.active .button {display: none;}
-
-   .ambassador {
-       padding: 2em;
-       margin-bottom: 1em;
-       border: 1px solid #ddd;
-       position: relative;
-   }
-   .ambassador.with-photo {
-       padding-right: 145px;
-   }
-   .ambassador img {
-       border-radius: 100%;
-       height: 100px;
-       width: 100px;
-       position: absolute;
-       top: 35px;
-       right: 30px;
-   }
-   .ambassador div {
-       text-align: right;
-       line-height: 1.5em;
-   }
-
-   .club-form-info {
-       line-height: 1.5em;
-   }
-
-   @media screen and (max-width: 1023px) {
-       .club-form-info {
-           margin-top: 2em;
-       }
-   }
-
-
-   @media screen and (min-width: 1024px) {
-       .club-form-info {
-           border-left: 1px solid #ddd;
-           padding-left: 2em;
-           margin-left: 2em;
-       }
-       .twocol {
-           display: flex;
-       }
-       .twocol > form, .twocol > div {
-           flex: 1;
-       }
-   }
-
-  </style>
-
-
   <div class="white-box normal-text">
 
-    <h1>Wspieraj Wolne Lektury</h1>
+    <h1>{% trans "Support Wolne Lektury" %}</h1>
     <h2 style="margin-bottom:2em;">
-      {% 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>
-
-    {% with schedule=request.user|active_schedule %}
-     {% if schedule %}
-      <p><a href="{{ schedule.get_absolute_url }}">Zobacz swoje dotychczasowe wsparcie.</a></p>
-     {% endif %}
-    {% endwith %}
+      {% if membership %}
+        {# Displays to members. #}
+        {% trans "Thank you for your support! Support us again!" %}
+      {% else %}
+        {# Displays to non-supporters. #}
+        {% trans "Thank you for wanting to free the books with us!" %}
+      {% endif %}</h2>
+
+      {% with schedule=request.user|active_schedule %}
+        {% if schedule %}
+          <p><a href="{{ schedule.get_absolute_url }}">{% trans "See your past support." %}</a></p>
+        {% endif %}
+      {% endwith %}
 
-    <div class='twocol'>
+      <div class='twocol'>
 
       <form method="POST" action="" id="payment-form" class="wlform">
         {% csrf_token %}
 
         {% chunk 'club_form_top' %}
 
-        <ul class="errorlist">
-          {% for e in  form.non_field_errors %}
-            <li>{{ e }}</li>
-          {% endfor %}
-          {% for e in  form.plan.errors %}
-            <li>{{ e }}</li>
-          {% endfor %}
-          {% for e in  form.amount.errors %}
-            <li>{{ e }}</li>
-          {% endfor %}
-        </ul>
-
-        <h3>1. Wybierz rodzaj wsparcia</h3>
+        {% club_monthly_since '2020-12-01' as cc %}
+        {% club_monthly_missing_since '2020-12-01' 100 as cm %}
+        <p>Pomóż nam zdobyć 100 nowych Przyjaciół do końca roku. W grudniu stałą wpłatą wsparło nas już <b style="color: #0d7e85">{{ cc }}</b> czytelników i czytelniczek, brakuje  <b style="color: #0d7e85">{{ cm }}</b>.</p>
+        <div class="funding" style="background: none;"><div class="description"><div class="progress" style="text-align: center; background-size: {{ cc }}% 1px;"><span class="piece progress-collected">&nbsp;{{ cc }}</span><span class="piece progress-target">{{ cm }}&nbsp;</span><div style="clear: both"></div></div></div></div>
 
-        {{ form.amount }}
-        {{ form.monthly }}
-        <div class="plan-select">
-          <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
-          <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
-        </div>
-
-        <h3>2. Wybierz kwotę</h3>
-
-        <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 }}">
-          {% for amount in club.proposed_single_amounts %}
-            <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
-          {% endfor %}
-
-          <span class="inna">
-            <span class="button">inna kwota</span>
-            <input type="number" min="{{ club.min_amount }}">
-          </span>
-<div class="methods">{% include 'club/payment/payu.html' %}</div>
-        </div>
-
-
-        <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
-          {% for amount in club.proposed_monthly_amounts %}
-            <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
-          {% endfor %}
-
-          <span class="inna">
-            <span class="button">inna kwota</span>
-            <input type="number" min="{{ club.min_amount }}">
-          </span>
-<div class="methods">{% include 'club/payment/payu-re.html' %}</div>
-        </div>
-
-        <h3>3. Podaj adres e-mail</h3>
-
-        <p>{{ form.email }}</p>
-
-        <p>
-          {{ form.agree_newsletter }}
-          <label for="agree_newsletter">
-            Chcę dostawać informacje o nowościach
-          </label>
-        </p>
-
-        <p>W każdej chwili możesz zrezygnować z subskrypcji. Więcej w <a href="https://nowoczesnapolska.org.pl/prywatnosc/">polityce prywatności</a>.</p>
-
-        <div><button class="submit" type='submit'>Wpłać</button></div>
+        {% include "club/payment_form.html" %}
 
         {% chunk 'club_form_bottom' %}
 
@@ -238,17 +59,8 @@ vertical-align: middle;
             {% endif %}
           </div>
         {% endif %}
-        <div class="chunk-alt">
-          <div class="chunk chunk-monthly">
-            {% chunk 'club-form-info-monthly' %}
-          </div>
-          <div class="chunk chunk-single" style="display: none;">
-            {% chunk 'club-form-info-single' %}
-          </div>
-          <div class="chunk chunk-single-year" style="display: none;">
-            {% chunk 'club-form-info-single-year' %}
-          </div>
-  </div>
+
+        {% include "club/payment_info.html" %}
 </div>
 </div>