def4539a85e92789829b7eb7709b62e743fe6a21
[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        padding: 2em;
71        margin-bottom: 1em;
72        border: 1px solid #ddd;
73        position: relative;
74    }
75    .ambassador.with-photo {
76        padding-right: 145px;
77    }
78    .ambassador img {
79        border-radius: 100%;
80        height: 100px;
81        width: 100px;
82        position: absolute;
83        top: 35px;
84        right: 30px;
85    }
86    .ambassador div {
87        text-align: right;
88        line-height: 1.5em;
89    }
90
91    .club-form-info {
92        line-height: 1.5em;
93    }
94
95    @media screen and (max-width: 1023px) {
96        .club-form-info {
97            margin-top: 2em;
98        }
99    }
100
101
102    @media screen and (min-width: 1024px) {
103        .club-form-info {
104            border-left: 1px solid #ddd;
105            padding-left: 2em;
106            margin-left: 2em;
107        }
108        .twocol {
109            display: flex;
110        }
111        .twocol > form, .twocol > div {
112            flex: 1;
113        }
114    }
115
116   </style>
117
118
119   <div class="white-box normal-text">
120
121     <h1>Wspieraj Wolne Lektury</h1>
122     <h2 style="margin-bottom:2em;">
123       {% 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>
124
125     {% chunk 'club_form_top' %}
126     <div class='twocol'>
127
128       <form method="POST" action="" id="payment-form" class="wlform">
129         {% csrf_token %}
130         <h3>Zadeklaruj, jak często i jaką kwotą chcesz nas wspierać:</h3>
131
132         <ul class="errorlist">
133           {% for e in  form.non_field_errors %}
134             <li>{{ e }}</li>
135           {% endfor %}
136           {% for e in  form.plan.errors %}
137             <li>{{ e }}</li>
138           {% endfor %}
139           {% for e in  form.amount.errors %}
140             <li>{{ e }}</li>
141           {% endfor %}
142         </ul>
143
144         {{ form.amount }}
145         {{ form.monthly }}
146         <div>
147           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
148           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
149         </div>
150
151         <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 }}">
152           {% for amount in club.proposed_single_amounts %}
153             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
154           {% endfor %}
155
156           <span class="inna">
157             <span class="button">inna kwota</span>
158             <input type="number" min="{{ club.min_amount }}">
159           </span>
160         </div>
161
162
163         <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
164           {% for amount in club.proposed_monthly_amounts %}
165             <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
166           {% endfor %}
167
168           <span class="inna">
169             <span class="button">inna kwota</span>
170             <input type="number" min="{{ club.min_amount }}">
171           </span>
172         </div>
173
174         <h3>
175           Podaj nam swój adres e-mail, żebyśmy mogli się z Tobą skontaktować:
176         </h3>
177
178         <p>
179           {{ form.email }}</p>
180         <button class="submit" type='submit'>Dołącz</button>
181       </form>
182
183       <div class="club-form-info">
184         {% if ambassador %}
185         <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
186             <div>
187               <em>
188                 {{ ambassador.text }}
189               </em>
190               <div style="font-size: 1.2em">{{ ambassador.name }}</div>
191             </div>
192             {% if ambassador.photo %}
193               <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
194             {% endif %}
195           </div>
196         {% endif %}
197         <div class="chunk-alt">
198           <div class="chunk chunk-monthly">
199             {% chunk 'club-form-info-monthly' %}
200           </div>
201           <div class="chunk chunk-single" style="display: none;">
202             {% chunk 'club-form-info-single' %}
203           </div>
204           <div class="chunk chunk-single-year" style="display: none;">
205             {% chunk 'club-form-info-single-year' %}
206           </div>
207   </div>
208 </div>
209 </div>
210
211 </div>
212
213 {% endblock %}