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