6e64de1d0a47c642689d6866cdf7365c5ba30258
[wolnelektury.git] / 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
5 {% block titleextra %}Towarzystwo Wolnych Lektur{% endblock %}
6
7
8 {% block body %}
9
10   <style>
11    .payment-method.disabled {
12        opacity: .5;
13        filter: grayscale(100%);
14    }
15
16    .button {
17        box-sizing: border-box;
18        display: inline-block;
19        text-align: center;
20    }
21    .kwota, .inna .button, .plan-toggle, .inna input {
22        border: 1px solid black;
23        background: none;
24        cursor: pointer;
25        padding: 10px 0;
26        margin-right: 3%;
27        margin-bottom: 10px;
28        line-height: 3em;
29    }
30    .plan-toggle {
31        width: 46.5%;
32    }
33    .kwota {
34        width: 30%;
35    }
36    .kwota:after {
37        content: " zł";
38    }
39    .kwota.yearly {
40        background: orange;
41
42    }
43    .inna .button {
44        width: 63%;
45    }
46    .inna input {
47        width: 60%;
48        padding-left: 1.5%;
49        padding-right: 1.5%;
50        height: 3em !important;
51        text-align: center;
52    }
53    .chunk-alt {
54        position: relative;
55        overflow: hidden;
56    }
57    .chunk-alt .chunk {
58        top: 0;
59    }
60
61    .kwota.active, .plan-toggle.active {
62        background: black;
63        color: white;
64    }
65    .inna input {display: none;}
66    .inna.active input {display: inline;}
67    .inna.active .button {display: none;}
68
69    .ambassador {
70        display: flex;
71        justify-content: end;
72        padding: 2em;
73        margin-bottom: 1em;
74        border: 1px solid #ddd;
75    }
76    .ambassador img {
77        border-radius: 100%;
78        margin-left: 1em;
79        align-self: center;
80    }
81    .ambassador div {
82        text-align: right;
83        align-self: center;
84        line-height: 1.5em;
85    }
86
87    .club-form-info {
88        line-height: 1.5em;
89    }
90
91    @media screen and (max-width: 1023px) {
92        .club-form-info {
93            margin-top: 2em;
94        }
95    }
96
97
98    @media screen and (min-width: 1024px) {
99        .club-form-info {
100            border-left: 1px solid #ddd;
101            padding-left: 2em;
102            margin-left: 2em;
103        }
104        .twocol {
105            display: flex;
106        }
107        .twocol > form, .twocol > div {
108            flex: 1;
109        }
110    }
111
112   </style>
113
114
115   <div class="white-box normal-text">
116
117     <h1>Wspieraj Wolne Lektury</h1>
118     <h2 style="margin-bottom:2em;">
119       {% 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>
120
121     {% chunk 'club_form_top' %}
122     <div class='twocol'>
123
124       <form method="POST" action="" id="payment-form" class="wlform">
125         {% csrf_token %}
126         <h3>Zadeklaruj, jak często i jaką kwotą chcesz nas wspierać:</h3>
127
128         <ul class="errorlist">
129           {% for e in  form.non_field_errors %}
130             <li>{{ e }}</li>
131           {% endfor %}
132           {% for e in  form.plan.errors %}
133             <li>{{ e }}</li>
134           {% endfor %}
135           {% for e in  form.amount.errors %}
136             <li>{{ e }}</li>
137           {% endfor %}
138         </ul>
139
140         {{ form.amount }}
141         {{ form.monthly }}
142         <div>
143           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
144           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
145         </div>
146
147         <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 }}">
148           {% for amount in club.proposed_single_amounts %}
149             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
150           {% endfor %}
151
152           <span class="inna">
153             <span class="button">inna kwota</span>
154             <input type="number" min="{{ club.min_amount }}">
155           </span>
156         </div>
157
158
159         <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
160           {% for amount in club.proposed_monthly_amounts %}
161             <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
162           {% endfor %}
163
164           <span class="inna">
165             <span class="button">inna kwota</span>
166             <input type="number" min="{{ club.min_amount }}">
167           </span>
168         </div>
169
170         <h3>
171           Podaj nam swój adres e-mail, żebyśmy mogli się z Tobą skontaktować:
172         </h3>
173
174         <p>
175           {{ form.email }}</p>
176         <button class="submit" type='submit'>Dołącz</button>
177       </form>
178
179       <div class="club-form-info">
180         {% if ambassador %}
181           <div class="ambassador">
182             <div>
183               <em>
184                 {{ ambassador.text }}
185               </em>
186               <div style="font-size: 1.2em">{{ ambassador.name }}</div>
187             </div>
188             {% if ambassador.photo %}
189               <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
190             {% endif %}
191           </div>
192         {% endif %}
193         <div class="chunk-alt">
194           <div class="chunk chunk-monthly">
195             {% chunk 'club-form-info-monthly' %}
196           </div>
197           <div class="chunk chunk-single" style="display: none;">
198             {% chunk 'club-form-info-single' %}
199           </div>
200           <div class="chunk chunk-single-year" style="display: none;">
201             {% chunk 'club-form-info-single-year' %}
202           </div>
203   </div>
204 </div>
205 </div>
206
207 </div>
208
209 {% endblock %}