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