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>