src/wolnelektury/templates/main_page.html

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