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