fix
[wolnelektury.git] / src / wolnelektury / templates / main_page.html
1 {% extends "base.html" %}
2 {% load i18n %}
3 {% load static %}
4 {% load thumbnail %}
5 {% load catalogue_tags %}
6 {% load social_tags %}
7 {% load sponsors %}
8
9 {% block under-menu %}
10   {% comment %}
11     <div class="l-your-books">
12       <div class="l-container">
13         <div class="l-your-books__continue">
14           <div class="l-your-books__header">
15             <h3>Czytaj dalej</h3>
16           </div>
17           <div class="l-books">
18             <article class="l-books__item">
19               <figure class="l-books__item__img">
20                 <a href="#">
21                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
22                 </a>
23               </figure>
24               <div class="l-books__item__actions">
25                 <a href="#"><i class="icon icon-book"></i></a>
26                 <a href="#"><i class="icon icon-audio"></i></a>
27                 <a href="#"><i class="icon icon-picture"></i></a>
28                 <a href="#"><i class="icon icon-like"></i></a>
29               </div>
30               <h3><a href="#">Stanisław Brzozowski</a></h3>
31               <h2><a href="#">Wstęp do filozofii</a></h2>
32             </article>
33           </div>
34         </div>
35         <div class="l-your-books__shelf">
36           <div class="l-your-books__header">
37             <h3>Moja półka</h3>
38             <div class="l-your-books__header__actions">
39               <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
40               <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
41             </div>
42           </div>
43           <div class="l-books">
44             <article class="l-books__item">
45               <figure class="l-books__item__img">
46                 <a href="#">
47                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
48                 </a>
49               </figure>
50               <div class="l-books__item__actions">
51                 <a href="#"><i class="icon icon-book"></i></a>
52                 <a href="#"><i class="icon icon-audio"></i></a>
53                 <a href="#"><i class="icon icon-picture"></i></a>
54                 <a href="#"><i class="icon icon-like"></i></a>
55               </div>
56               <h3><a href="#">Stanisław Brzozowski</a></h3>
57               <h2><a href="#">Wstęp do filozofii</a></h2>
58             </article>
59             <article class="l-books__item">
60               <figure class="l-books__item__img">
61                 <a href="#">
62                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
63                 </a>
64               </figure>
65               <div class="l-books__item__actions">
66                 <a href="#"><i class="icon icon-book"></i></a>
67                 <a href="#"><i class="icon icon-audio"></i></a>
68                 <a href="#"><i class="icon icon-picture"></i></a>
69                 <a href="#"><i class="icon icon-like"></i></a>
70               </div>
71               <h3><a href="#">Stanisław Brzozowski</a></h3>
72               <h2><a href="#">Wstęp do filozofii</a></h2>
73             </article>
74             <article class="l-books__item">
75               <figure class="l-books__item__img">
76                 <a href="#">
77                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
78                 </a>
79               </figure>
80               <div class="l-books__item__actions">
81                 <a href="#"><i class="icon icon-book"></i></a>
82                 <a href="#"><i class="icon icon-audio"></i></a>
83                 <a href="#"><i class="icon icon-picture"></i></a>
84                 <a href="#"><i class="icon icon-like"></i></a>
85               </div>
86               <h3><a href="#">Stanisław Brzozowski</a></h3>
87               <h2><a href="#">Wstęp do filozofii</a></h2>
88             </article>
89             <article class="l-books__item">
90               <figure class="l-books__item__img">
91                 <a href="#">
92                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
93                 </a>
94               </figure>
95               <div class="l-books__item__actions">
96                 <a href="#"><i class="icon icon-book"></i></a>
97                 <a href="#"><i class="icon icon-audio"></i></a>
98                 <a href="#"><i class="icon icon-picture"></i></a>
99                 <a href="#"><i class="icon icon-like"></i></a>
100               </div>
101               <h3><a href="#">Stanisław Brzozowski</a></h3>
102               <h2><a href="#">Wstęp do filozofii</a></h2>
103             </article>
104             <article class="l-books__item">
105               <figure class="l-books__item__img">
106                 <a href="#">
107                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
108                 </a>
109               </figure>
110               <div class="l-books__item__actions">
111                 <a href="#"><i class="icon icon-book"></i></a>
112                 <a href="#"><i class="icon icon-audio"></i></a>
113                 <a href="#"><i class="icon icon-picture"></i></a>
114                 <a href="#"><i class="icon icon-like"></i></a>
115               </div>
116               <h3><a href="#">Stanisław Brzozowski</a></h3>
117               <h2><a href="#">Wstęp do filozofii</a></h2>
118             </article>
119             <article class="l-books__item l-books__item--placeholder">
120               <figure class="l-books__item__img">
121                 <a href="#">
122                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
123                 </a>
124               </figure>
125               <div class="l-books__item__actions">
126                 <a href="#"><i class="icon icon-book"></i></a>
127                 <a href="#"><i class="icon icon-audio"></i></a>
128                 <a href="#"><i class="icon icon-picture"></i></a>
129                 <a href="#"><i class="icon icon-like"></i></a>
130               </div>
131               <h3><a href="#">Stanisław Brzozowski</a></h3>
132               <h2><a href="#">Wstęp do filozofii</a></h2>
133             </article>
134           </div>
135         </div>
136       </div>
137     </div>
138   {% endcomment %}
139 {% endblock %}
140
141 {% block global-content %}
142   <main class="l-main">
143
144     {% if widget %}
145       <div class="l-change-pop show"><p>{{ widget.description }}</p></div>
146       <section class="l-section">
147         <iframe src="{{ widget.url }}" style="width: 100%; height: 600px; border: none;"></iframe>
148       </section>
149     {% endif %}
150
151     {% if recommended_collection %}
152       <section class="l-section">
153         <div class="l-collections js-collections">
154           <div class="l-collections__header">
155             <h3><a href="{{ recommended_collection.get_absolute_url }}">{{ recommended_collection.title }}</a></h3>
156             <div class="l-your-books__header__actions">
157               <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
158               <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
159             </div>
160           </div>
161           <div class="l-books">
162             {% for book in recommended_collection.get_books %}
163               {% include 'catalogue/book_box.html' %}
164             {% endfor %}
165           </div>
166           <div class="c-read_more">
167             <a href="/katalog/kolekcje/">{% trans "zobacz wszystkie kolekcje" %}</a>
168           </div>
169         </div>
170
171       </section>
172     {% endif %}
173
174     <section class="l-section">
175       <div class="p-homepage__info">
176         <div class="p-homepage__info__box p-homepage__info__box--carousel">
177           {% carousel 'main_2022' %}
178         </div>
179         <div class="p-homepage__info__box p-homepage__info__box--donate">
180           <figure>
181             <img src="{% static '2022/images/book-donate.svg' %}" alt="{% trans 'Dorzuć się!' %}">
182           </figure>
183           <div class="p-homepage__info__box__content">
184             <p>
185               {% blocktrans trimmed %}
186                 Nasze książki są dostępne dla tysięcy
187                 dzieciaków dzięki <strong>darowiznom</strong> od
188                 osób takich jak <strong>Ty</strong>!
189               {% endblocktrans %}
190             </p>
191             <a href="{% url 'club_join' %}?pk_campaign=home" class="l-button l-button--default l-button--default--dark">{% trans "Dorzuć się!" %}</a>
192           </div>
193         </div>
194         <div class="p-homepage__info__box p-homepage__info__box--newsletter">
195           <figure>
196             <img src="{% static '2022/images/book-newsletter.svg' %}" alt="{% trans 'Zapisz się na nasz Newsletter!' %}">
197           </figure>
198           <div class="p-homepage__info__box__content">
199             <h3>
200               {% trans "Informacja o&nbsp;nowościach" %} <strong>{% trans "Newsletter!" %}</strong>
201             </h3>
202             <a href="{% url 'subscribe' %}?pk_campaign=home" class="l-button l-button--default">{% trans "Zapisz się" context "Newsletter" %}</a>
203           </div>
204         </div>
205       </div>
206     </section>
207
208     <section class="l-section l-section--row">
209       <div class="l-quotes" style="">
210         {% for ambassador in ambassadors %}
211           <div class="l-quotes__item">
212             {% thumbnail ambassador.photo '100x100' crop="center" as ambphoto %}
213             <img src="{{ ambphoto.url  }}" alt="{{ ambassador.name }}">
214               {% endthumbnail %}
215               <h4>{{ ambassador.name }}</h4>
216               <p>
217                 {{ ambassador.text }}
218               </p>
219           </div>
220         {% endfor %}
221       </div>
222
223       <div class="l-quotes-ad" style="">
224         {% preview_ad_homepage %}
225       </div>
226
227     </section>
228
229     <section class="l-section">
230       <div class="p-homepage__info p-homepage__info--second">
231         <div class="p-homepage__info__box p-homepage__info__box--full">
232           <figure>
233             <img src="{% static '2022/images/kid.png' %}" alt="{% trans 'Dorzuć się!' %}">
234           </figure>
235           <div class="p-homepage__info__box__content">
236             <p>
237               {% blocktrans trimmed %}
238                 <strong>Wolne Lektury</strong> to lektury szkolne
239                 i tysiące innych książek – za <strong>darmo</strong>
240                 i <strong>bez rejestracji</strong>.
241               {% endblocktrans %}
242             </p>
243             <p>{% trans "Czytaj i słuchaj online, ściągaj na swój telefon lub komputer, dziel się z innymi." %}</p>
244             <p>{% trans "Dla uczennic i uczniów dodajemy przypisy, motywy literackie, biogramy i geotagowanie." %}</p>
245             <a href="{% url 'infopage' 'o-projekcie' %}?pk_campaign=wl-infobox" class="l-button l-button--default l-button--default--dark">{% trans "Dowiedz się więcej" %}</a>
246           </div>
247         </div>
248         <div class="p-homepage__info__box__rows">
249           <div class="p-homepage__info__box p-homepage__info__box--full--sm">
250             <figure>
251               <img src="{% static '2022/images/kid-2.png' %}" alt="{% trans 'Dorzuć się!' %}">
252             </figure>
253             <div class="p-homepage__info__box__content">
254               <p>
255                 {% blocktrans trimmed %}
256                   Jesteśmy częścią ruchu <strong>wolnej kultury</strong>!
257                 {% endblocktrans %}
258               </p>
259               <a href="https://fundacja.wolnelektury.pl/o-fundacji/?pk_campaign=wl-infobox" class="l-button l-button--default">{% trans "Dowiedz się więcej" %}</a>
260             </div>
261           </div>
262           <div class="p-homepage__info__box p-homepage__info__box--full--sm">
263             <figure>
264               <img src="{% static '2022/images/kid-3.png' %}" alt="{% trans 'Dorzuć się!' %}">
265             </figure>
266             <div class="p-homepage__info__box__content">
267               <p>
268                 {% blocktrans trimmed %}
269                   Jak budujemy najpopularniejszą <strong>bibliotekę online</strong> w Polsce
270                 {% endblocktrans %}
271               </p>
272               <a href="/info/jak-powstaja-wolne-lektury/" class="l-button l-button--default">{% trans "Dowiedz się więcej" %}</a>
273             </div>
274           </div>
275         </div>
276       </div>
277     </section>
278   </main>
279
280
281   <section class="l-section">
282     <div class="l-collections js-collections">
283       <div class="l-collections__header">
284         <h3><a href="/katalog/nowe/">{% trans "Nowości" %}</a></h3>
285         <div class="l-your-books__header__actions">
286           <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
287           <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
288         </div>
289       </div>
290       <div class="l-books" style="display:block;">
291         {% for book in last_published %}
292           {% include 'catalogue/book_box.html' %}
293         {% endfor %}
294       </div>
295     </div>
296   </section>
297
298   <div class="l-container">
299     <section class="l-section">
300       <div class="p-homepage__uptodate">
301         <div class="p-homepage__uptodate__header">
302           <h3>{% trans "Bądź na bieżąco" %}</h3>
303           <ul>
304             <li>
305               <a href="https://www.facebook.com/wolnelektury/"
306                  title="Facebook" tabindex="-1" target="_blank">
307                 <i class="icon icon-fb" aria-hidden="true"></i>
308               </a>
309             </li>
310             <li>
311               <a href="https://www.youtube.com/c/WolneLekturyYT/"
312                  title="YouTube" tabindex="-1" target="_blank">
313                 <i class="icon icon-yt" aria-hidden="true"></i>
314               </a>
315             </li>
316             <li>
317               <a href="https://www.instagram.com/wolnelektury/"
318                  title="Instagram" tabindex="-1" target="_blank">
319                 <i class="icon icon-ig" aria-hidden="true"></i>
320               </a>
321             </li>
322             <li>
323               <a href="https://twitter.com/wolnelektury"
324                  title="Twitter" tabindex="-1" target="_blank">
325                 <i class="icon icon-tt" aria-hidden="true"></i>
326               </a>
327             </li>
328           </ul>
329         </div>
330
331         {% sponsor_page 'footer' %}
332
333       </div>
334     </section>
335   </div>
336
337 {% endblock %}