{% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
+{% load i18n %}
+{% load chunks %}
+{% load thumbnail %}
+{% load club %}
-
-{% block titleextra %}Towarzystwo Wolnych Lektur{% 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>
- .payment-method.disabled {
- opacity: .5;
- filter: grayscale(100%);
- }
-
+ <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>{% if membership %}Odnów swoje członkostwo w Towarzystwie Wolnych Lektur{% else %}Dołącz do Towarzystwa Wolnych Lektur{% endif %}</h1>
-
-<form method="POST" action="" id="payment-form" class="wlform">
- {% csrf_token %}
-
- <h2>Składka</h2>
-
- <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>
-
- {% for plan in form.plans %}
-
- <div>
- <input class="plan" type="radio" name="plan" value="{{ plan.id }}" id="plan{{ plan.id }}" data-methods="{% for m in plan.payment_methods %}{{ m.slug }} {% endfor %}">
- <label for="plan{{ plan.id }}">
- <input
- name="amount-{{ plan.id }}"
- type="number"
- placeholder="min. {{ plan.min_amount|floatformat:0 }}"
- value="{{ plan.default_amount|floatformat:0 }}"
- min="{{ plan.min_amount|floatformat:0 }}"
- step="1"
- style="width: 5em;"
- > zł
- {{ plan.get_interval_display }}
- </label>
- </div>
+ <div class="white-box normal-text">
- {% endfor %}
-
- <h2>Metoda płatności</h2>
-
- <ul class="errorlist">
- {% for e in form.method.errors %}
- <li>{{ e }}</li>
- {% endfor %}
- </ul>
-
- {% for payment_method in form.payment_methods %}
- <div class="payment-method" id="payment-method-{{ payment_method.slug }}">
- <input type="radio" id="method{{ payment_method.slug }}" name="method" value="{{ payment_method.slug }}">
- <label for="method{{ payment_method.slug }}" style="display:inline-block">
- {% include payment_method.template_name %}
- </label>
- </div>
- {% endfor %}
+ <h1>{% trans "Support Wolne Lektury" %}</h1>
+ <h2 style="margin-bottom:2em;">
+ {% 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'>
+
+ <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>
- <p style="margin-top: 2em;">
- {{ form.email.label }}:
- {{ form.email }}</p>
- <button class="submit" type='submit'>Dołącz</button>
-</form>
+ <h3>1. {% trans "Choose your type of support" %}</h3>
+
+ {{ form.amount }}
+ {{ form.monthly }}
+ <div class="plan-select">
+ <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">{% trans "one-time" %}</span>
+ <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">{% trans "monthly" %}</span>
+ </div>
+
+ <h3>2. {% trans "Choose the amount" %}</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">{% trans "different amount" %}</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">{% trans "different amount" %}</span>
+ <input type="number" min="{{ club.min_amount }}">
+ </span>
+ <div class="methods">{% include 'club/payment/payu-re.html' %}</div>
+ </div>
+
+ <h3>3. {% trans "Provide an e-mail address" %}</h3>
+
+ <p>{{ form.email }}</p>
+
+ <p>
+ {{ form.agree_newsletter }}
+ <label for="id_agree_newsletter">
+ {% trans "I'd like to receive informations about new publications." %}
+ </label>
+ </p>
+
+ <p>{% trans 'You can unsubscribe at any point. More in the <a target="_blank" href="https://nowoczesnapolska.org.pl/prywatnosc/">privacy policy</a>.' %}</p>
+
+ <div><button class="submit" type='submit'>{% trans "Donate" %}</button></div>
+
+ {% chunk 'club_form_bottom' %}
+
+ </form>
+
+ <div class="club-form-info">
+ {% if ambassador %}
+ <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
+ <div>
+ <em>
+ {{ ambassador.text }}
+ </em>
+ <div style="font-size: 1.2em">{{ ambassador.name }}</div>
+ </div>
+ {% if ambassador.photo %}
+ <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
+ {% 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>
+</div>
+</div>
</div>
fnp / wolnelektury.git / blobdiff