8112c09e086eb4713b0a1e76a49dd228fd87f7db
[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     {% if recommended_collection %}
143       <section class="l-section">
144         <div class="l-collections js-collections">
145           <div class="l-collections__header">
146             <h3><a href="{{ recommended_collection.get_absolute_url }}">{{ recommended_collection.title }}</a></h3>
147             {% comment %}
148             <div class="l-your-books__header__actions">
149               <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
150               <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
151             </div>
152             {% endcomment %}
153           </div>
154           <div class="l-books">
155             {% for book in recommended_collection.get_5_books %}
156               {% include 'catalogue/2022/book_box.html' %}
157             {% endfor %}
158           </div>
159         </div>
160       </section>
161     {% endif %}
162
163     <section class="l-section">
164         <div class="p-homepage__info">
165           <div class="p-homepage__info__box">
166             {% carousel_2022 'main_2022' %}
167           </div>
168           <div class="p-homepage__info__box p-homepage__info__box--donate">
169             <figure>
170               <img src="{% static '2022/images/book-donate.svg' %}" alt="Dorzuć się!">
171             </figure>
172             <div class="p-homepage__info__box__content">
173               <p>
174                 Nasze książki są dostępne dla tysięcy
175                 dzieciaków dzięki <strong>darowiznom</strong> od
176                 osób takich jak <strong>Ty</strong>!
177               </p>
178               <a href="{% url 'club_join' %}?pk_campaign=home" class="l-button l-button--default l-button--default--dark">Dorzuć się!</a>
179             </div>
180           </div>
181           <div class="p-homepage__info__box p-homepage__info__box--newsletter">
182             <figure>
183               <img src="{% static '2022/images/book-newsletter.svg' %}" alt="Zapisz się na nasz Newsletter!">
184             </figure>
185             <div class="p-homepage__info__box__content">
186               <h3>
187                 Zapisz się na nasz <strong>Newsletter!</strong>
188               </h3>
189               <a href="{% url 'subscribe' %}?pk_campaign=home" class="l-button l-button--default">Weź udział</a>
190             </div>
191           </div>
192         </div>
193     </section>
194
195     <section class="l-section">
196       <div class="l-quotes">
197         {% for ambassador in ambassadors %}
198           <div class="l-quotes__item">
199             {% thumbnail ambassador.photo '100x100' crop="center" as ambphoto %}
200             <img src="{{ ambphoto.url  }}" alt="{{ ambassador.name }}">
201               {% endthumbnail %}
202               <h4>{{ ambassador.name }}</h4>
203               <p>
204                 {{ ambassador.text }}
205               </p>
206           </div>
207         {% endfor %}
208       </div>
209     </section>
210
211     <section class="l-section">
212       <div class="p-homepage__info p-homepage__info--second">
213         <div class="p-homepage__info__box p-homepage__info__box--full">
214           <figure>
215             <img src="{% static '2022/images/kid.png' %}" alt="Dorzuć się!">
216           </figure>
217           <div class="p-homepage__info__box__content">
218             <p>
219               <strong>Wolne Lektury</strong> to lektury szkolne
220               i tysiące innych książek – za <strong>darmo</strong>
221               i <strong>bez rejestracji</strong>.
222             </p>
223             <p>Czytaj i słuchaj online, ściągaj na swój telefon lub komputer, dziel się z innymi.</p>
224             <p>Dla uczennic i uczniów dodajemy przypisy, motywy literackie, biogramy i geotagowanie.</p>
225             <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>
226           </div>
227         </div>
228         <div class="p-homepage__info__box__rows">
229           <div class="p-homepage__info__box p-homepage__info__box--full--sm">
230             <figure>
231               <img src="{% static '2022/images/kid-2.png' %}" alt="Dorzuć się!">
232             </figure>
233             <div class="p-homepage__info__box__content">
234               <p>
235                 Jesteśmy częścią ruchu <strong>wolnej kultury</strong>!
236               </p>
237               <a href="https://nowoczesnapolska.org.pl/o-fundacji/?pk_campaign=wl-infobox" class="l-button l-button--default">Dowiedz się więcej</a>
238             </div>
239           </div>
240           <div class="p-homepage__info__box p-homepage__info__box--full--sm">
241             <figure>
242               <img src="{% static '2022/images/kid-3.png' %}" alt="Dorzuć się!">
243             </figure>
244             <div class="p-homepage__info__box__content">
245               <p>
246                 Jak budujemy najpopularniejszą <strong>bibliotekę online</strong> w Polsce
247               </p>
248               <a href="#" class="l-button l-button--default">Dowiedz się więcej</a>
249             </div>
250           </div>
251         </div>
252       </div>
253     </section>
254   </main>
255
256   {% preview_ad_homepage %}
257
258   <section class="l-section">
259     <div class="l-collections js-new-books-slider">
260       <div class="l-collections__header">
261         <h3>Nowości</h3>
262         <div class="l-your-books__header__actions">
263           <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
264           <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
265         </div>
266       </div>
267       <div class="l-books">
268         {% for book in last_published %}
269           {% include 'catalogue/2022/book_box.html' %}
270         {% endfor %}
271       </div>
272     </div>
273   </section>
274
275   <div class="l-container">
276     <section class="l-section">
277       <div class="p-homepage__uptodate">
278         <div class="p-homepage__uptodate__header">
279           <h3>Bądź na bieżąco</h3>
280           <ul>
281             <li>
282               <a href="https://www.facebook.com/wolnelektury/"
283                  title="Facebook" tabindex="-1" target="_blank">
284                 <i class="icon icon-fb" aria-hidden="true"></i>
285               </a>
286             </li>
287             <li>
288               <a href="https://www.youtube.com/c/WolneLekturyYT/"
289                  title="YouTube" tabindex="-1" target="_blank">
290                 <i class="icon icon-yt" aria-hidden="true"></i>
291               </a>
292             </li>
293             <li>
294               <a href="https://www.instagram.com/wolnelektury/"
295                  title="Instagram" tabindex="-1" target="_blank">
296                 <i class="icon icon-ig" aria-hidden="true"></i>
297               </a>
298             </li>
299             <li>
300               <a href="https://twitter.com/wolnelektury"
301                  title="Twitter" tabindex="-1" target="_blank">
302                 <i class="icon icon-tt" aria-hidden="true"></i>
303               </a>
304             </li>
305           </ul>
306         </div>
307
308         {#% sponsor_page 'footer' %#}
309
310       </div>
311     </section>
312   </div>
313
314 {% endblock %}