edit buttons
[wolnelektury.git] / src / wolnelektury / static / 2022 / index.html
1 <!doctype html>
2 <html class="no-js">
3 <head>
4   <meta charset="utf-8">
5   <meta name="description" content="">
6   <meta name="viewport" content="width=device-width,initial-scale=1">
7   <title>WolneLektury.pl</title>
8   <link rel="apple-touch-icon" href="apple-touch-icon.png">
9
10   <link rel="stylesheet" href="styles/main.css">
11   <script src="scripts/modernizr.js"></script>
12
13   <link rel="preconnect" href="https://fonts.googleapis.com">
14   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15   <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">
16 </head>
17 <body>
18
19 <nav class="l-navigation">
20   <div class="l-change-pop">
21     <h3>Zmieniamy się!</h3>
22     <p>
23       Jeżeli to czytasz jesteś jedną z osób, której prezentujemy nowy wygląd strony książki.
24       Będziemy bardzo! wdzięczni za Twoją opinię – w prawym dolnym rogu znajdziesz przycisk oceny.
25       Jeżeli wolisz klasyczny wygląd - wystarczy, że <a href="#">klikniesz tutaj</a>
26     </p>
27     <button class="l-change-pop__close">
28       <i class="icon icon-close"></i>
29     </button>
30   </div>
31   <div class="l-container">
32     <a href="/" class="l-navigation__logo">
33       <img src="images/logo.svg" alt="WolneLektury.pl">
34     </a>
35     <div class="l-naviagion__search">
36       <input type="text" placeholder="szukaj tytułu, autora, motywów…">
37     </div>
38     <div class="l-navigation__actions">
39       <a href="#"><i class="icon icon-liked"></i></a>
40       <button class="l-navigation__button js-menu" aria-label="Menu">
41             <span class="c-hamburger">
42                 <span class="bar"></span>
43             </span>
44       </button>
45     </div>
46   </div>
47 </nav>
48
49 <div class="l-container">
50   <div class="l-breadcrumb">
51     <a href="#"><span>Strona główna</span></a>
52     <a href="#"><span>Literatura</span></a>
53     <a href="#"><span>romantyzm</span></a>
54   </div>
55 </div>
56
57 <main class="l-main">
58   <section class="l-section">
59     <aside class="l-aside">
60       <figure>
61         <img src="images/header.jpg" alt="">
62       </figure>
63       <ul class="l-aside__info">
64         <li><span>Epoka:</span> romantyzm</li>
65         <li><span>Rodzaj:</span> dramat</li>
66         <li><span>Gatunek:</span> dramat romantyczny</li>
67       </ul>
68       <ul class="l-aside__zbiory">
69         <li>
70           <a href="#">Dziady</a>
71           <ul>
72             <li><a href="#">Upiór</a></li>
73             <li><a href="#">Dziady, część II</a></li>
74             <li><a href="#">Dziady, część IV</a></li>
75             <li><a href="#">Dziady, część III</a></li>
76           </ul>
77         </li>
78       </ul>
79     </aside>
80     <div class="l-content">
81       <header class="l-header">
82         <div class="l-header__content">
83           <p>Adam Mickiewicz (tłum. Janina Kowalska-Nowak)</p>
84           <h1>Dziady, część IV</h1>
85         </div>
86         <div class="l-header__actions">
87           <button class="l-button l-button--fav">
88             <img src="images/fav.svg" alt="Dodaj do ulubionych">
89           </button>
90         </div>
91       </header>
92       <article class="l-article">
93         <div class="c-media">
94           <div class="c-media__actions">
95             <div class="c-media__btn">
96               <button class="l-button l-button--media" id="audiobook"><i class="icon icon-audio"></i> pobierz audiobook</button>
97             </div>
98             <div class="c-media__btn">
99               <button class="l-button l-button--media" id="ebook"><i class="icon icon-book"></i> pobierz książkę</button>
100             </div>
101             <div class="c-media__btn">
102               <button class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> czytaj online</button>
103             </div>
104           </div>
105           <div class="c-media__player">
106             <div class="c-player__head">
107               <span>Henryk Sienkiewicz, Potop, Potop, tom pierwszy, tom 1, rozdział 1. Czyta Jasiek Staszczyk, reż. Jasiek Staszczyk</span>
108             </div>
109             <div class="c-player">
110               <div class="c-player__btns">
111                 <button><i class="icon icon-prev"></i></button>
112                 <button class="c-player__btn--md"><i class="icon icon-play"></i></button>
113                 <button><i class="icon icon-next"></i></button>
114                 <div class="c-select">
115                   <ul>
116                     <li>2×</li>
117                     <li>1.75×</li>
118                     <li>1.5×</li>
119                     <li>1.25×</li>
120                     <li class="is-active">1×</li>
121                     <li>0.75×</li>
122                     <li>0.5×</li>
123                     <li>0.25×</li>
124                   </ul>
125                 </div>
126               </div>
127               <div class="c-player__timeline">
128                 <div class="c-player__info">1. <strong>Godzina pierwsza</strong> – godzina miłości</div>
129                 <div class="c-player__chapters">
130                   <span>Rozdziały</span>
131                   <ul>
132                     <li>Godzina pierwsza – godzina miłości</li>
133                     <li>Druga godzina – godzina rozpaczy</li>
134                     <li>Trzecia godzina – godzina przestrogi</li>
135                   </ul>
136                 </div>
137                 <span>
138                       <span></span>
139                     </span>
140                 <time class="c-player__length">
141                   <span>2:35</span>
142                   <span>60:20</span>
143                 </time>
144               </div>
145               <div class="c-player__volume">
146                 <i class="icon icon-volume"></i>
147                 <input type="range" value="60" min="0" max="100" id="range" oninput="rangenumber.value=value">
148               </div>
149             </div>
150             <div class="c-media__caption">
151               <div class="icons">
152                 <i class="icon icon-acc-1"></i>
153                 <i class="icon icon-acc-2"></i>
154                 <i class="icon icon-acc-3"></i>
155               </div>
156               <div class="content">
157                 <p>Dofinansowano ze środków: Priorytet 4 Udostępnienie publikacji w formatach cyfrowych w ramach Narodowego Programu Rozwoju Czytelnictwa.</p>
158               </div>
159             </div>
160           </div>
161           <div class="c-media__popup" data-popup="ebook">
162             <div class="c-media__popup__box">
163               <div class="c-media__popup__box__lead">
164                 <h2>Pobieranie e-booka</h2>
165                 <p>Wybierz wersję dla siebie:</p>
166               </div>
167               <div class="c-media__popup__box__items">
168                 <div class="c-media__popup__box__item">
169                   <div>
170                     <h3>.pdf</h3>
171                     <p>Jeśli planujesz wydruk albo lekturę na urządzeniu mobilnym bez dodatkowych aplikacji.</p>
172                   </div>
173                   <div>
174                     <a href="#" class="l-button l-button--media l-button--media--full">.pdf</a>
175                   </div>
176                 </div>
177                 <div class="c-media__popup__box__item">
178                   <div>
179                     <h3>.epub</h3>
180                     <p>Uniwersalny format e-booków, obsługiwany przez większość czytników sprzętowych i aplikacji na urządzenia mobilne.</p>
181                   </div>
182                   <div>
183                     <a href="#" class="l-button l-button--media l-button--media--full">.epub</a>
184                   </div>
185                 </div>
186                 <div class="c-media__popup__box__item">
187                   <div>
188                     <h3>.mobi</h3>
189                     <p>Natywny format dla czytnika Amazon Kindle.</p>
190                   </div>
191                   <div>
192                     <a href="#" class="l-button l-button--media l-button--media--full">.mobi</a>
193                   </div>
194                 </div>
195                 <div class="c-media__popup__box__item">
196                   <div>
197                     <h3>synchrobook (epub3)</h3>
198                     <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format (np. ..., ..., ...).</p>
199                   </div>
200                   <div>
201                     <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
202                   </div>
203                 </div>
204                 <div class="c-media__popup__box__item">
205                   <div>
206                     <h3>inne formaty</h3>
207                     <ul>
208                       <li><a href="#">plik tekstowy (.txt)</a></li>
209                       <li><a href="#">FictionBook</a></li>
210                     </ul>
211                   </div>
212                 </div>
213               </div>
214               <button class="c-media__popup__close">
215                 <img src="images/close.svg" alt="Zamknij">
216               </button>
217             </div>
218           </div>
219           <div class="c-media__popup" data-popup="audiobook">
220             <div class="c-media__popup__box">
221               <div class="c-media__popup__box__lead">
222                 <h2>Pobieranie audiobooka</h2>
223                 <p>Wybierz wersję dla siebie:</p>
224               </div>
225               <div class="c-media__popup__box__items">
226                 <div class="c-media__popup__box__item">
227                   <div>
228                     <h3>.mp3</h3>
229                     <p>Uniwersalny format, obsługiwany przez wszystkie urządzenia.</p>
230                   </div>
231                   <div>
232                     <a href="#" class="l-button l-button--media l-button--media--full">.mp3</a>
233                   </div>
234                 </div>
235                 <div class="c-media__popup__box__item">
236                   <div>
237                     <h3>OggVorbis</h3>
238                     <p>Otwarty format plików audio, oferujący nagranie w najwyższej jakości dźwiękowej.</p>
239                   </div>
240                   <div>
241                     <a href="#" class="l-button l-button--media l-button--media--full">.ogg</a>
242                   </div>
243                 </div>
244                 <div class="c-media__popup__box__item">
245                   <div>
246                     <h3>DAISY</h3>
247                     <p>Format dla osób z dysfunkcjami czytania.</p>
248                   </div>
249                   <div>
250                     <a href="#" class="l-button l-button--media l-button--media--full">DAISY</a>
251                   </div>
252                 </div>
253                 <div class="c-media__popup__box__item">
254                   <div>
255                     <h3>synchrobook</h3>
256                     <p>Książka elektroniczna i audiobook w jednym. Wymaga aplikacji obsługującej format.</p>
257                   </div>
258                   <div>
259                     <a href="#" class="l-button l-button--media l-button--media--full">synchrobook</a>
260                   </div>
261                 </div>
262               </div>
263               <button class="c-media__popup__close">
264                 <img src="images/close.svg" alt="Zamknij">
265               </button>
266             </div>
267           </div>
268         </div>
269
270         <div class="l-article__overlay" data-max-height="327">
271           <h3>Opis</h3>
272           <p>
273             Pericord i Brown dokonali wspólnie wielu wynalazków. Ich umiejętności doskonale się uzupełniają:
274             pierwszy to geniusz twórczy, a drugi — umysł praktyczny, doskonale rozumie projekty współpracownika
275             i wciela je w życie.
276           </p>
277           <p>
278             Wspólnicy pracują nad kolejnym pomysłem — maszyną latającą. Prototyp jest już prawie gotów i niebawem
279             można będzie go przetestować. Na ostatnich etapach pracy między wspólnikami pojawia się kwestia sporna:
280             komu należy się patent? Wynalazcy — autorowi projektu czy mechanikowi — temu, który skonstruował maszynę?
281           </p>
282           <p>
283             Trup w obłokach czyli historia maszyny latającej w powietrzu (oryg. The Great Brown-Pericord Motor)
284             to opowiadanie z dreszczykiem, pióra Arthura Conana Doyle'a, autora Przygód Sherlocka Holmesa.
285           </p>
286           <h4>Spis treści:</h4>
287           <ul>
288             <li>Dziady. Poema</li>
289             <li>Przedmowa</li>
290             <li>Upiór</li>
291             <li>Dziady, część II</li>
292             <li>Dziady, część IV</li>
293             <li>Dziady, część III</li>
294             <li>Dziady. Widowisko, część I</li>
295           </ul>
296         </div>
297         <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
298       </article>
299       <div class="c-support">
300         <div class="c-support__content">
301           <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>
302           <a href="#">Dorzuć się!</a>
303         </div>
304         <figure>
305           <img src="images/img-1.jpg" alt="Dorzuć się!">
306         </figure>
307       </div>
308     </div>
309   </section>
310   <section class="l-section">
311     <div class="l-author">
312       <div class="row">
313         <h2>O autorze</h2>
314         <div>
315           <figure class="l-author__photo">
316             <img src="images/author.jpg" alt="Adam Mickiewicz">
317             <figcaption>
318               Źródło: Wikipedia
319             </figcaption>
320           </figure>
321           <article class="l-author__info">
322             <h3>Adam Mickiewicz</h3>
323             <div class="l-article__overlay" data-max-height="327">
324               <p>
325                 Ur. 24 grudnia 1798 r. w Zaosiu koło Nowogródka <br>
326                 Zm. 26 listopada 1855 r. w Konstantynopolu (dziś: Stambuł)
327               </p>
328             </div>
329             <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
330           </article>
331         </div>
332       </div>
333       <div class="row">
334         <div class="l-author__quotes">
335           <div class="l-author__quotes__slider">
336             <div class="l-author__quotes__slider__item">
337               <em>
338                 Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
339                 nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
340               </em>
341               <p>Adam Mickiewicz – Dziady, część I</p>
342             </div>
343             <div class="l-author__quotes__slider__item">
344               <em>
345                 Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
346                 nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
347               </em>
348               <p>Adam Mickiewicz – Dziady, część II</p>
349             </div>
350             <div class="l-author__quotes__slider__item">
351               <em>
352                 Cicho wszędzie, głucho wszędzie, co to będzie co to będzie? Kto nie doznał goryczy ni razu ten
353                 nie dozna słodyczy w niebie. Bo kto nie był człowiekiem ni razu temu człowiek nie pomoże.
354               </em>
355               <p>Adam Mickiewicz – Dziady, część III</p>
356             </div>
357           </div>
358         </div>
359       </div>
360     </div>
361   </section>
362   <section class="l-section">
363     <div class="l-themes__wrapper">
364       <h2>Motywy występujące w tym utworze <a href="#"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
365       <div class="l-themes">
366         <ul>
367           <li><a href="#">alkohol <span>(9)</span></a></li>
368           <li><a href="#">bitwa <span>(9)</span></a></li>
369           <li><a href="#">alkohol <span>(9)</span></a></li>
370           <li><a href="#">antysemityzm <span>(9)</span></a></li>
371           <li><a href="#">bijatyka <span>(9)</span></a></li>
372           <li><a href="#">błądzenie <span>(9)</span></a></li>
373           <li><a href="#">alkohol <span>(9)</span></a></li>
374           <li><a href="#">bitwa <span>(9)</span></a></li>
375           <li><a href="#">alkohol <span>(9)</span></a></li>
376           <li><a href="#">antysemityzm <span>(9)</span></a></li>
377           <li><a href="#">bijatyka <span>(9)</span></a></li>
378           <li><a href="#">błądzenie <span>(9)</span></a></li>
379           <li><a href="#">alkohol <span>(9)</span></a></li>
380           <li><a href="#">bitwa <span>(9)</span></a></li>
381           <li><a href="#">alkohol <span>(9)</span></a></li>
382           <li><a href="#">antysemityzm <span>(9)</span></a></li>
383           <li><a href="#">bijatyka <span>(9)</span></a></li>
384           <li><a href="#">błądzenie <span>(9)</span></a></li>
385           <li><a href="#">bitwa <span>(9)</span></a></li>
386           <li><a href="#">alkohol <span>(9)</span></a></li>
387           <li><a href="#">błądzenie <span>(9)</span></a></li>
388           <li><a href="#">bijatyka <span>(9)</span></a></li>
389           <li><a href="#">błądzenie <span>(9)</span></a></li>
390           <li><a href="#">bijatyka <span>(9)</span></a></li>
391           <li><a href="#">alkohol <span>(9)</span></a></li>
392           <li><a href="#">bitwa <span>(9)</span></a></li>
393           <li><a href="#">alkohol <span>(9)</span></a></li>
394           <li><a href="#">antysemityzm <span>(9)</span></a></li>
395           <li><a href="#">bijatyka <span>(9)</span></a></li>
396           <li><a href="#">błądzenie <span>(9)</span></a></li>
397         </ul>
398       </div>
399       <ul class="links">
400         <li>
401           <a href="#">źródłowy plik XML</a>
402         </li>
403         <li>
404           <a href="#">miksuj treść utworu</a>
405         </li>
406         <li>
407           <a href="#">utwór na Platformie Redakcyjnej</a>
408         </li>
409       </ul>
410     </div>
411   </section>
412 </main>
413
414 <section class="l-section">
415   <div class="l-books__wrapper">
416     <div class="l-container">
417       <h2>Tytuły powiązane</h2>
418       <div class="l-books">
419         <article class="l-books__item">
420           <figure class="l-books__item__img">
421             <a href="#">
422               <img src="images/book-1.jpg" alt="Poetyka">
423             </a>
424           </figure>
425           <h3><a href="#">Arystoteles</a></h3>
426           <h2><a href="#">Poetyka</a></h2>
427         </article>
428         <article class="l-books__item">
429           <figure class="l-books__item__img">
430             <a href="#">
431               <img src="images/book-2.jpg" alt="Wstęp do filozofii">
432             </a>
433           </figure>
434           <h3><a href="#">Stanisław Brzozowski</a></h3>
435           <h2><a href="#">Wstęp do filozofii</a></h2>
436         </article>
437         <article class="l-books__item">
438           <figure class="l-books__item__img">
439             <a href="#">
440               <img src="images/book-3.jpg" alt="Etyka">
441             </a>
442           </figure>
443           <h3><a href="#">Benedykt de Spinoza</a></h3>
444           <h2><a href="#">Etyka</a></h2>
445         </article>
446         <article class="l-books__item">
447           <figure class="l-books__item__img">
448             <a href="#">
449               <img src="images/book-3.jpg" alt="Wstęp do filozofii">
450             </a>
451           </figure>
452           <h3><a href="#">Stanisław Brzozowski</a></h3>
453           <h2><a href="#">Wstęp do filozofii</a></h2>
454         </article>
455         <article class="l-books__item l-books__item--link">
456           <a href="#">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
457           <a href="#" class="icon-link"><i class="icon icon-all"></i></a>
458         </article>
459       </div>
460     </div>
461   </div>
462 </section>
463
464 <div class="l-footer">
465   <div class="l-container">
466     <div class="l-footer__row">
467       <a href="#"><img src="images/FNP-logo.png" alt="FUNDACJA Nowoczesna Polska"></a>
468       <ul>
469         <li>ul. Marszałkowska 84/92 lok. 125</li>
470         <li>00-514 Warszawa</li>
471       </ul>
472       <ul class="teal">
473         <li>tel. <a href="#">(22) 621 30 17</a></li>
474         <li>email <a href="#">fundacja@nowoczesnapolska.org.pl</a></li>
475       </ul>
476     </div>
477     <div class="l-footer__row">
478       <div>
479         Wolne Lektury to projekt prowadzony przez fundację <a href="#">Nowoczesna Polska</a>. <br>
480         Hosting: <a href="#">ICM</a>.
481       </div>
482       <div>
483         <a href="#"><img src="images/MKiDN.png" alt="MKiDN"></a>
484       </div>
485       <div>
486         Strona biblioteki Wolne Lektury powstała dzięki dofinansowaniu ze środków Ministra <a href="#">Kultury i Dziedzictwa Narodowego</a>
487         pochodzących z <a href="#">Funduszu Promocji Kultury</a> – państwowego funduszu celowego.
488       </div>
489     </div>
490   </div>
491 </div>
492
493 <script src="scripts/vendor.js"></script>
494 <script src="scripts/main.js"></script>
495 </body>
496 </html>