62666b1d24f6bc06e06a9cb603434ee80d82045a
[wolnelektury.git] / src / club / templates / club / donation_step_base.html
1 {% extends 'base.html' %}
2 {% load chunks %}
3 {% load club %}
4 {% load static %}
5
6
7 {% block global-content %}
8   <div class="l-container">
9     <div class="l-breadcrumb">
10       <a href="/"><span>Strona główna</span></a>
11       <span>Wesprzyj nas</span>
12     </div>
13   </div>
14
15
16   <main class="l-main">
17     <div class="l-checkout__support">
18       <div class="l-checkout__support__bar">
19         <span data-label="Jest nas {% club_count_recurring %}" style="width: calc({% club_count_recurring %}% / 5);"></span>
20       </div>
21       <div class="l-checkout__support__footer">
22         <p>Dołącz do naszych stałych <strong>darczyńców</strong>!</p>
23         <p>Potrzebujemy <strong>500</strong> regularnych darczyńców, by Wolne Lektury mogły działać!</p>
24       </div>
25     </div>
26
27     <div class="l-checkout__box">
28       <div class="l-checkout__box__header">
29         <img src="{% block donation-jumbo-image %}{% static '2022/images/checkout-img-1.jpg' %}{% endblock %}" alt="Wspieraj Wolne Lektury">
30         <div class="l-checkout__box__header__content">
31           <h1>Wspieraj Wolne Lektury</h1>
32           <p>Dziękujemy, że chcesz razem z nami uwalniać książki!</p>
33           <p>Wspieraj Wolne Lektury stałą wpłatą – nawet niewielka ma wielką moc! Możesz też wesprzeć Wolne Lektury jednorazowo.</p>
34         </div>
35       </div>
36       <div class="l-checkout__steps">
37
38         {% if view.step > 1 and view.step != 4 %}
39           <a href="{% url 'donation_step1' schedule.key %}">
40         {% endif %}
41         <div class="{% if view.step == 1 %}is-current{% else %}is-completed{% endif %}">
42           <span>1</span>
43           <p>Rodzaj wsparcia</p>
44         </div>
45         {% if view.step > 1 and view.step != 4 %}
46           </a>
47         {% endif %}
48
49         {% if view.step != 2 and schedule and view.step != 4 %}
50           <a href="{% url 'donation_step2' schedule.key %}">
51         {% endif %}
52         <div class="{% if view.step == 2 %}is-current{% elif not schedule %}is-inactive{% else %}is-completed{% endif %}">
53           <span>2</span>
54           <p>Dane</p>
55         </div>
56         {% if view.step != 2 and schedule and view.step != 4 %}
57           </a>
58         {% endif %}
59
60         {% if view.step != 3 and schedule.email and view.step != 4 %}
61           <a href="{{ schedule.get_absolute_url }}">
62         {% endif %}
63         <div class="{% if view.step == 3 %}is-current{% elif not schedule or not schedule.method %}is-inactive{% else %}is-completed{% endif %}">
64           <span>3</span>
65           <p>Forma płatności</p>
66         </div>
67         {% if view.step != 3 and schedule.email and view.step != 4 %}
68           </a>
69         {% endif %}
70
71         <div class="{% if view.step == 4 %}is-completed{% else %}is-inactive{% endif %}">
72           <span>4</span>
73           <p>Gotowe</p>
74         </div>
75       </div>
76
77
78       {% block donation-step-content %}{% endblock %}
79
80     </div>
81
82     <div class="l-checkout__footer">
83       <div class="l-checkout__footer__content">
84         <div class="l-checkout__footer__content__item">
85           <h3>Transparentność jest dla nas bardzo ważna.</h3>
86           <div>
87             <div class="l-article__overlay" data-max-height="91">
88               {% chunk 'donation-transparency' %}
89             </div>
90             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Więcej" data-action="Mniej">Więcej</button>
91           </div>
92         </div>
93         <div class="l-checkout__footer__content__item">
94           <h3>Informacja o przetwarzaniu danych osobowych</h3>
95           <div>
96             <div class="l-article__overlay" data-max-height="91">
97               {% chunk 'donation-data-processing' %}
98             </div>
99             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Więcej" data-action="Mniej">Więcej</button>
100           </div>
101         </div>
102         <div class="l-checkout__footer__content__item">
103           <h3>FAQ</h3>
104           <div>
105             <div class="l-article__overlay" data-max-height="91">
106               {% chunk 'donation-faq' %}
107             </div>
108             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Więcej" data-action="Mniej">Więcej</button>
109           </div>
110         </div>
111         <div class="l-checkout__footer__content__item">
112           <h3>Regulamin darowizn</h3>
113           <div>
114             <div class="l-article__overlay" data-max-height="91">
115               {% chunk 'donation-regulamin' %}
116             </div>
117             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Więcej" data-action="Mniej">Więcej</button>
118           </div>
119         </div>
120       </div>
121     </div>
122   </main>
123
124
125
126 {% endblock %}