1ae2f82e562d5c66683f904840cecb16b7ce6918
[wolnelektury.git] / src / club / templates / club / membership_form.html
1 {% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
2 {% load i18n %}
3 {% load chunks %}
4 {% load thumbnail %}
5 {% load club %}
6
7 {% block titleextra %}{% trans "Join us in freeing the books!" %}{% endblock %}
8 {% block metadescription %}{% trans "„Wolne Lektury należy wspierać, bo są” - Filip Springer" %}{% endblock %}
9
10
11 {% block body %}
12
13   <style>
14
15    .plan-select {
16        margin-bottom: 15px;
17    }
18 .methods {
19  color: #888;
20 line-height: 30px;
21 }
22 .methods .method {
23   border: 1px solid #888;
24   border-radius: 5px;
25 display: inline-block;
26 padding: 0 5px;
27 }
28 .methods img {
29 height: 30px;
30 margin-right: 5px;
31 vertical-align: middle;
32 }
33    .payment-method.disabled {
34        opacity: .5;
35        filter: grayscale(100%);
36    }
37
38    .button {
39        box-sizing: border-box;
40        display: inline-block;
41        text-align: center;
42    }
43    .kwota, .inna .button, .plan-toggle, .inna input {
44        border: 1px solid black;
45        border-radius: 8px;
46        background: none;
47        cursor: pointer;
48        padding: 0;
49        margin-right: 3%;
50        margin-bottom: 10px;
51        line-height: 3em;
52        font-size: 20px;
53    }
54    .plan-toggle {
55        width: 46.5%;
56    }
57    .kwota {
58        width: 30%;
59    }
60    .kwota:after {
61        content: " zł";
62    }
63    .kwota.yearly {
64        background: orange;
65
66    }
67    .inna .button {
68        width: 63%;
69    }
70    .inna input {
71        width: 60%;
72        padding-left: 1.5%;
73        padding-right: 1.5%;
74        height: 3em !important;
75        text-align: center;
76    }
77    .chunk-alt {
78        position: relative;
79        overflow: hidden;
80    }
81    .chunk-alt .chunk {
82        top: 0;
83    }
84
85    .kwota.active, .plan-toggle.active {
86        background: #9ACD32;
87    }
88    .inna input {display: none;}
89    .inna.active input {display: inline;}
90    .inna.active .button {display: none;}
91
92    .ambassador {
93        padding: 2em;
94        margin-bottom: 1em;
95        border: 1px solid #ddd;
96        position: relative;
97    }
98    .ambassador.with-photo {
99        padding-right: 145px;
100    }
101    .ambassador img {
102        border-radius: 100%;
103        height: 100px;
104        width: 100px;
105        position: absolute;
106        top: 35px;
107        right: 30px;
108    }
109    .ambassador div {
110        text-align: right;
111        line-height: 1.5em;
112    }
113
114    .club-form-info {
115        line-height: 1.5em;
116    }
117
118    @media screen and (max-width: 1023px) {
119        .club-form-info {
120            margin-top: 2em;
121        }
122    }
123
124
125    @media screen and (min-width: 1024px) {
126        .club-form-info {
127            border-left: 1px solid #ddd;
128            padding-left: 2em;
129            margin-left: 2em;
130        }
131        .twocol {
132            display: flex;
133        }
134        .twocol > form, .twocol > div {
135            flex: 1;
136        }
137    }
138
139   </style>
140
141
142   <div class="white-box normal-text">
143
144     <h1>{% trans "Support Wolne Lektury" %}</h1>
145     <h2 style="margin-bottom:2em;">
146       {% if membership %}
147         {# Displays to members. #}
148         {% trans "Thank you for your support! Support us again!" %}
149       {% else %}
150         {# Displays to non-supporters. #}
151         {% trans "Thank you for wanting to free the books with us!" %}
152       {% endif %}</h2>
153
154       {% with schedule=request.user|active_schedule %}
155         {% if schedule %}
156           <p><a href="{{ schedule.get_absolute_url }}">{% trans "See your past support." %}</a></p>
157         {% endif %}
158       {% endwith %}
159
160       <div class='twocol'>
161
162       <form method="POST" action="" id="payment-form" class="wlform">
163         {% csrf_token %}
164
165         {% chunk 'club_form_top' %}
166
167         <ul class="errorlist">
168           {% for e in  form.non_field_errors %}
169             <li>{{ e }}</li>
170           {% endfor %}
171           {% for e in  form.plan.errors %}
172             <li>{{ e }}</li>
173           {% endfor %}
174           {% for e in  form.amount.errors %}
175             <li>{{ e }}</li>
176           {% endfor %}
177         </ul>
178
179         <h3>1. {% trans "Choose your type of support" %}</h3>
180
181         {{ form.amount }}
182         {{ form.monthly }}
183         <div class="plan-select">
184           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">{% trans "one-time" %}</span>
185           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">{% trans "monthly" %}</span>
186         </div>
187
188         <h3>2. {% trans "Choose the amount" %}</h3>
189
190         <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 }}">
191           {% for amount in club.proposed_single_amounts %}
192             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
193           {% endfor %}
194
195           <span class="inna">
196             <span class="button">{% trans "different amount" %}</span>
197             <input type="number" min="{{ club.min_amount }}">
198           </span>
199           <div class="methods">{% include 'club/payment/payu.html' %}</div>
200         </div>
201
202
203         <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
204           {% for amount in club.proposed_monthly_amounts %}
205             <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
206           {% endfor %}
207
208           <span class="inna">
209             <span class="button">{% trans "different amount" %}</span>
210             <input type="number" min="{{ club.min_amount }}">
211           </span>
212           <div class="methods">{% include 'club/payment/payu-re.html' %}</div>
213         </div>
214
215         <h3>3. {% trans "Provide an e-mail address" %}</h3>
216
217         <p>{{ form.email }}</p>
218
219         <p>
220           {{ form.agree_newsletter }}
221           <label for="id_agree_newsletter">
222             {% trans "I'd like to receive informations about new publications." %}
223           </label>
224         </p>
225
226         <p>{% trans 'You can unsubscribe at any point. More in the <a target="_blank" href="https://nowoczesnapolska.org.pl/prywatnosc/">privacy policy</a>.' %}</p>
227
228         <div><button class="submit" type='submit'>{% trans "Donate" %}</button></div>
229
230         {% chunk 'club_form_bottom' %}
231
232       </form>
233
234       <div class="club-form-info">
235         {% if ambassador %}
236         <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
237             <div>
238               <em>
239                 {{ ambassador.text }}
240               </em>
241               <div style="font-size: 1.2em">{{ ambassador.name }}</div>
242             </div>
243             {% if ambassador.photo %}
244               <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
245             {% endif %}
246           </div>
247         {% endif %}
248         <div class="chunk-alt">
249           <div class="chunk chunk-monthly">
250             {% chunk 'club-form-info-monthly' %}
251           </div>
252           <div class="chunk chunk-single" style="display: none;">
253             {% chunk 'club-form-info-single' %}
254           </div>
255           <div class="chunk chunk-single-year" style="display: none;">
256             {% chunk 'club-form-info-single-year' %}
257           </div>
258   </div>
259 </div>
260 </div>
261
262 </div>
263
264 {% endblock %}