149be1263c65f55b8204c886fd8458e87f4589a5
[wolnelektury.git] / src / catalogue / templates / catalogue / 2022 / book_detail.html
1 <!doctype html>
2 {% load pipeline %}
3 {% load static %}
4 {% load choose_cites from social_tags %}
5 {% load choose_fragment license_icon from catalogue_tags %}
6 {% load catalogue_tags %}
7
8
9 <html class="no-js">
10   <head>
11     <meta charset="utf-8">
12     <meta name="description" content="">
13     <meta name="viewport" content="width=device-width,initial-scale=1">
14     <title>WolneLektury.pl</title>
15     <link rel="apple-touch-icon" href="apple-touch-icon.png">
16
17     {% stylesheet '2022' %}
18       <script src="scripts/modernizr.js"></script>
19
20       <link rel="preconnect" href="https://fonts.googleapis.com">
21       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22       <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap" rel="stylesheet">
23   </head>
24   <body>
25
26     <nav class="l-navigation">
27       <div class="l-change-pop">
28         <h3>Zmieniamy się!</h3>
29         <p>
30           Jeżeli to czytasz jesteś jedną z osób, której prezentujemy nowy wygląd strony książki.
31           Będziemy bardzo! wdzięczni za Twoją opinię – w prawym dolnym rogu znajdziesz przycisk oceny.
32           Jeżeli wolisz klasyczny wygląd - wystarczy, że <a class="quit-experiment" href="#">klikniesz tutaj</a>
33         </p>
34         <button class="l-change-pop__close">
35           <i class="icon icon-close"></i>
36         </button>
37       </div>
38       <div class="l-container">
39         <a href="/" class="l-navigation__logo">
40           <img src="{% static "2022/images/logo.png" %}" alt="WolneLektury.pl">
41         </a>
42         <div class="l-naviagion__search">
43           <form action="/szukaj/">
44             <input id="search" name="q" type="text" placeholder="szukaj tytułu, autora, motywów…" autocomplete="off" data-source="/szukaj/hint/?max=10">
45           </form>
46         </div>
47         <div class="l-navigation__actions">
48           <a href="/ludzie/polka/"><i class="icon icon-liked"></i></a>
49           <button class="l-navigation__button js-menu" aria-label="Menu">
50             <span class="c-hamburger">
51               <span class="bar"></span>
52             </span>
53           </button>
54         </div>
55       </div>
56     </nav>
57
58
59     {# TODO: BREADCRUMBS #}
60     <div class="l-container">
61       <div class="l-breadcrumb">
62         <a href="/"><span>Strona główna</span></a>
63         <a href="/katalog/lektury/"><span>Literatura</span></a>
64         {% for ancestor in book.ancestors %}
65           <a href="{{ ancestor.get_absolute_url }}">{{ ancestor.title }}</a>
66         {% endfor %}
67       </div>
68     </div>
69
70
71     <main class="l-main">
72       <section class="l-section">
73         <aside class="l-aside">
74           <figure>
75             <img src="{% if book.cover_clean %}{{ book.cover_clean.url }}{% endif %}" alt="{{ book.pretty_title }}" width="240">
76           </figure>
77           <ul class="l-aside__info">
78             <li><span>Epoka:</span> {% for tag in book.epochs %}<a href="{{ tag.get_absolute_url }}">{{ tag.name|lower }}</a> {% endfor %}</li>
79             <li><span>Rodzaj:</span> {% for tag in book.kinds %}<a href="{{ tag.get_absolute_url }}">{{ tag.name|lower }}</a> {% endfor %}</li>
80             <li><span>Gatunek:</span> {% for tag in book.genres %}<a href="{{ tag.get_absolute_url }}">{{ tag.name|lower }}</a> {% endfor %}</li>
81           </ul>
82           {% if book.parent or book.get_children %}
83             <ul class="l-aside__zbiory">
84               {% if book.parent %}
85                 {% for b in book.ancestors %}
86                   <li>
87                     <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
88                     <ul>
89                 {% endfor %}
90                 {% for b in book.get_siblings %}
91                   <li>
92                     {% if b == book %}
93                       <strong>{{ b.title }}</strong>
94                       <ul>
95                         {% for c in book.get_children %}
96                           <li>
97                             <a href="{{ c.get_absolute_url }}">{{ c.title }}</a>
98                           </li>
99                         {% endfor %}
100                       </ul>
101                     {% else %}
102                       <a href="{{ b.get_absolute_url }}">{{ b.title }}</a>
103                     {% endif %}
104                   </li>
105                 {% endfor %}
106
107                 {% for b in book.ancestor.all %}
108                     </ul>
109                   </li>
110                 {% endfor %}
111               {% else %}
112                 <li>
113                   <strong>{{ book.title }}</strong>
114                   <ul>
115                     {% for c in book.get_children %}
116                       <li>
117                         <a href="{{ c.get_absolute_url }}">{{ c.title }}</a>
118                       </li>
119                     {% endfor %}
120                   </ul>
121                 </li>
122               {% endif %}
123             </ul>
124           {% endif  %}
125         </aside>
126         <div class="l-content">
127           <header class="l-header">
128             <div class="l-header__content">
129               <p>{% for author in book.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
130                 {% if book.translators %}
131                   (tłum. {% for translator in book.translators %}{{ translator }}{% endfor %})
132                 {% endif %}
133               </p>
134               <h1>{{ book.title }}</h1>
135             </div>
136             <!-- div class="l-header__actions">
137               <button class="l-button l-button--fav">
138                 <img src="{% static '2022/images/fav.svg' %}" alt="Dodaj do ulubionych">
139               </button>
140             </div-->
141           </header>
142           <article class="l-article">
143             <div class="c-media">
144               <div class="c-media__actions">
145                 <div class="c-media__btn">
146                   {% if book.has_mp3_file %}
147                     <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
148                   {% endif %}
149                 </div>
150                 <div class="c-media__btn">
151                   <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> pobierz książkę</button>
152                 </div>
153                 <div class="c-media__btn">
154                   {% with t=book.get_first_text %}
155                     {% if t %}
156                       <a href="{% url 'book_text' t.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</a>
157                     {% endif %}
158                   {% endwith %}
159                 </div>
160               </div>
161
162
163
164               {% if book.has_mp3_file %}
165                 {% include 'catalogue/snippets/2022_jplayer.html' %}
166               {% else %}
167                 {% with ch=book.get_child_audiobook %}
168                   {% if ch %}
169                     {% include 'catalogue/snippets/2022_jplayer_link.html' with book=ch %}
170                   {% endif %}
171                 {% endwith %}
172
173               {% endif %}
174
175
176
177
178               <div class="c-media__popup" data-popup="ebook">
179                 <div class="c-media__popup__box">
180                   <div class="c-media__popup__box__lead">
181                     <h2>Pobieranie e-booka</h2>
182                     <p>Wybierz wersję dla siebie:</p>
183                   </div>
184                   <div class="c-media__popup__box__items">
185                     {% if book.pdf_file %}
186                       <div class="c-media__popup__box__item">
187                         <div>
188                           <h3>.pdf</h3>
189                           <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
190                         </div>
191                         <div>
192                           <a href="{{ book.pdf_url }}" class="l-button l-button--media l-button--media--full">.pdf</a>
193                         </div>
194                       </div>
195                     {% endif %}
196                     {% if book.epub_file %}
197                       <div class="c-media__popup__box__item">
198                         <div>
199                           <h3>.epub</h3>
200                           <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
201                         </div>
202                         <div>
203                           <a href="{{ book.epub_url }}" class="l-button l-button--media l-button--media--full">.epub</a>
204                         </div>
205                       </div>
206                     {% endif %}
207                     {% if book.mobi_file %}
208                       <div class="c-media__popup__box__item">
209                         <div>
210                           <h3>.mobi</h3>
211                           <p>Natywny format dla czytnika Amazon Kindle.</p>
212                         </div>
213                         <div>
214                           <a href="{{ book.mobi_url }}" class="l-button l-button--media l-button--media--full">.mobi</a>
215                         </div>
216                       </div>
217                     {% endif %}
218                     {% if book.synchro_file %}
219                       <div class="c-media__popup__box__item">
220                         <div>
221                           <h3>synchrobook (epub3)</h3>
222                           <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
223                         </div>
224                         <div>
225                           <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
226                         </div>
227                       </div>
228                     {% endif %}
229                     {% if book.txt_file or book.fb2_file %}
230                       <div class="c-media__popup__box__item">
231                         <div>
232                           <h3>inne formaty</h3>
233                           <ul>
234                             {% if book.txt_file %}<li><a href="{{ book.txt_url }}">plik tekstowy (.txt)</a></li>{% endif %}
235                             {% if book.fb2_file %}<li><a href="{{ book.fb2_url }}">FictionBook</a></li>{% endif %}
236                           </ul>
237                         </div>
238                       </div>
239                     {% endif %}
240                   </div>
241                   <button class="c-media__popup__close">
242                     <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
243                   </button>
244                 </div>
245               </div>
246               {% if book.has_mp3_file %}
247                 <div class="c-media__popup" data-popup="audiobook">
248                   <div class="c-media__popup__box">
249                     <div class="c-media__popup__box__lead">
250                       <h2>Pobieranie audiobooka</h2>
251                       <p>Wybierz wersję dla siebie:</p>
252                     </div>
253                     <div class="c-media__popup__box__items">
254                       <div class="c-media__popup__box__item">
255                         <div>
256                           <h3>.mp3</h3>
257                           <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
258                         </div>
259                         <div>
260                           <a href="{% url 'download_zip_mp3' book.slug %}" class="l-button l-button--media l-button--media--full">.mp3</a>
261                         </div>
262                       </div>
263                       {% if book.has_ogg_file %}
264                         <div class="c-media__popup__box__item">
265                           <div>
266                             <h3>OggVorbis</h3>
267                             <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
268                           </div>
269                           <div>
270                             <a href="{% url 'download_zip_ogg' book.slug %}" class="l-button l-button--media l-button--media--full">.ogg</a>
271                           </div>
272                         </div>
273                       {% endif %}
274                       {% if book.has_daisy_file %}
275                         <div class="c-media__popup__box__item">
276                           <div>
277                             <h3>DAISY</h3>
278                             <p>Format dla osób z dysfunkcjami czytania.</p>
279                           </div>
280                           <div>
281                             {% for dsy in book.media_daisy %}
282                               <a href="{{ dsy.file.url }}" class="l-button l-button--media l-button--media--full">DAISY</a>
283                             {% endfor %}
284                           </div>
285                         </div>
286                       {% endif %}
287                       {% if book.has_synchro_file %}
288                         <div class="c-media__popup__box__item">
289                           <div>
290                             <h3>synchrobook</h3>
291                             <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
292                           </div>
293                           <div>
294                             <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
295                           </div>
296                         </div>
297                       {% endif %}
298                     </div>
299                     <button class="c-media__popup__close">
300                       <img src="{% static '2022/images/close.svg' %}" alt="Zamknij">
301                     </button>
302                   </div>
303                 </div>
304               {% endif %}
305             </div>
306
307             <div class="l-article__overlay" data-max-height="327">
308               <h3>Opis</h3>
309               {{ book.abstract|safe }}
310
311               {% if book.toc %}
312                 <h4>Spis treści:</h4>
313                 {{ book.toc|safe }}
314               {% endif %}
315             </div>
316             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
317           </article>
318           <div class="c-support">
319             <div>
320               <h2>Ta książka jest dostępna dla tysięcy dzieciaków dzięki <span>darowiznom</span> od osób takich jak <span>Ty</span>!</h2>
321               <a href="/towarzystwo/">Dorzuć się!</a>
322             </div>
323             <figure>
324               <img src="{% static '2022/images/img-1.jpg' %}" alt="Dorzuć się!">
325             </figure>
326           </div>
327         </div>
328       </section>
329
330       {% for author in book.authors %}
331         <section class="l-section">
332           <div class="l-author">
333             <div class="row">
334               <h2>O autorze</h2>
335               <div>
336                 {% if author.photo %}
337                   <figure class="l-author__photo">
338                     <img src="{{ author.photo.url }}" alt="{{ author.name }}" style="width: 238px;">
339                     <figcaption>
340                       {{ author.photo_attribution|safe }}
341                     </figcaption>
342                   </figure>
343                 {% endif %}
344                 <article class="l-author__info">
345                   <h3>{{ author.name }}</h3>
346                   <div class="l-article__overlay" data-max-height="327">
347                     {{ author.description|safe }}
348                   </div>
349                   <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
350                 </article>
351               </div>
352             </div>
353
354             {% choose_cites book 3 as cites %}
355             {% if cites %}
356               <div class="row">
357                 <div class="l-author__quotes">
358                   <div class="l-author__quotes__slider">
359                     {% for fragment in cites %}
360                       <div class="l-author__quotes__slider__item">
361                         <em>
362                           {{ fragment.short_text|safe }}
363                         </em>
364                         <p>{{ fragment.book.pretty_title }}</p>
365                       </div>
366                     {% endfor %}
367                   </div>
368                 </div>
369               </div>
370             {% endif %}
371           </div>
372       </section>
373       {% endfor %}
374
375       <section class="l-section">
376         <div class="l-themes__wrapper">
377           {% with book.related_themes as themes %}
378             {% if themes %}
379               <h2>Motywy występujące w tym utworze <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
380               <div class="l-themes">
381                 <ul>
382                   {% for item in themes %}
383                     <li><a href="{% url 'book_fragments' book.slug item.slug %}">{{ item|lower }}&nbsp;({{ item.count}})</a></li>
384                   {% endfor %}
385                 </ul>
386               </div>
387             {% endif %}
388           {% endwith %}
389           <ul class="links">
390             <li>
391               <a href="{{ book.xml_url }}">źródłowy plik XML</a>
392             </li>
393             <li>
394               <a target="_blank" href="{% url 'poem_from_book' book.slug %}">miksuj treść utworu</a>
395             </li>
396             <li>
397               <a target="_blank" href="{{ book.get_extra_info_json.about }}">utwór na Platformie Redakcyjnej</a>
398             </li>
399           </ul>
400         </div>
401       </section>
402     </main>
403
404
405
406
407
408     <section class="l-section">
409       <div class="l-books__wrapper">
410         <div class="l-container">
411           <h2>Tytuły powiązane</h2>
412           <div class="l-books">
413             {% if book.other_versions %}
414               {% for rel in book.other_versions %}
415                 <article class="l-books__item">
416                   <figure class="l-books__item__img">
417                     <a href="{{ rel.get_absolute_url }}">
418                       <img src="{% if rel.cover %}{{ rel.cover.url }}{% endif %}" alt="{{ rel.pretty_title }}">
419                     </a>
420                   </figure>
421                   <h3>
422                     {% for author in rel.authors %}
423                       <a href="{{ author.get_absolute_url }}">{{ author }}</a>
424                     {% endfor %}
425                   </h3>
426                   <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
427                 </article>
428               {% endfor %}
429             {% endif %}
430
431
432             {% related_books_2022 book taken=book.other_versions|length as related_books %}
433             {% for rel in related_books %}
434               <article class="l-books__item">
435                 <figure class="l-books__item__img">
436                   <a href="{{ rel.get_absolute_url }}">
437                     <img src="{% if rel.cover %}{{ rel.cover.url }}{% endif %}" alt="{{ rel.pretty_title }}">
438                   </a>
439                 </figure>
440                 <h3>
441                   {% for author in rel.authors %}
442                     <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
443                   {% endfor %}
444                 </h3>
445                 <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
446               </article>
447             {% endfor %}
448
449             <article class="l-books__item l-books__item--link">
450               <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
451               <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
452             </article>
453
454           </div>
455         </div>
456       </div>
457     </section>
458
459     <div class="l-footer">
460       <div class="l-container">
461         <div class="l-footer__row">
462           <a href="#"><img src="{% static '2022/images/FNP-logo.png' %}" alt="FUNDACJA Nowoczesna Polska"></a>
463           <ul>
464             <li>ul. Marszałkowska 84/92 lok. 125</li>
465             <li>00-514 Warszawa</li>
466           </ul>
467           <ul class="teal">
468             <li>tel. <a href="#">(22) 621 30 17</a></li>
469             <li>email <a href="#">fundacja@nowoczesnapolska.org.pl</a></li>
470           </ul>
471         </div>
472         <div class="l-footer__row">
473           <div>
474             Wolne Lektury to projekt prowadzony przez fundację <a href="#">Nowoczesna Polska</a>. <br>
475             Hosting: <a href="#">ICM</a>.
476           </div>
477           <div>
478             <a href="#"><img src="{% static '2022/images/MKiDN.png' %}" alt="MKiDN"></a>
479           </div>
480           <div>
481             Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra <a href="#">Kultury i Dziedzictwa Narodowego</a>
482             pochodzących z <a href="#">Funduszu Promocji Kultury</a> – państwowego funduszu celowego.
483           </div>
484         </div>
485       </div>
486     </div>
487
488     <script src="{% static '2022/scripts/vendor.js' %}"></script>
489     <script src="{% static '2022/scripts/main.js' %}"></script>
490
491     {% javascript '2022' %}
492     {% javascript '2022_player' %}
493   </body>
494 </html>