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