src/wolnelektury/templates/main_page.html

   1 {% extends "base.html" %}
   2 {% load i18n %}
   3 {% load static %}
   4 {% load thumbnail %}
   5 {% load catalogue_tags %}
   6 {% load social_tags %}
   7 {% load sponsors %}
   8
   9 {% block under-menu %}
  10   {% comment %}
  11     <div class="l-your-books">
  12       <div class="l-container">
  13         <div class="l-your-books__continue">
  14           <div class="l-your-books__header">
  15             <h3>Czytaj dalej</h3>
  16           </div>
  17           <div class="l-books">
  18             <article class="l-books__item">
  19               <figure class="l-books__item__img">
  20                 <a href="#">
  21                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
  22                 </a>
  23               </figure>
  24               <div class="l-books__item__actions">
  25                 <a href="#"><i class="icon icon-book"></i></a>
  26                 <a href="#"><i class="icon icon-audio"></i></a>
  27                 <a href="#"><i class="icon icon-picture"></i></a>
  28                 <a href="#"><i class="icon icon-like"></i></a>
  29               </div>
  30               <h3><a href="#">Stanisław Brzozowski</a></h3>
  31               <h2><a href="#">Wstęp do filozofii</a></h2>
  32             </article>
  33           </div>
  34         </div>
  35         <div class="l-your-books__shelf">
  36           <div class="l-your-books__header">
  37             <h3>Moja półka</h3>
  38             <div class="l-your-books__header__actions">
  39               <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
  40               <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
  41             </div>
  42           </div>
  43           <div class="l-books">
  44             <article class="l-books__item">
  45               <figure class="l-books__item__img">
  46                 <a href="#">
  47                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
  48                 </a>
  49               </figure>
  50               <div class="l-books__item__actions">
  51                 <a href="#"><i class="icon icon-book"></i></a>
  52                 <a href="#"><i class="icon icon-audio"></i></a>
  53                 <a href="#"><i class="icon icon-picture"></i></a>
  54                 <a href="#"><i class="icon icon-like"></i></a>
  55               </div>
  56               <h3><a href="#">Stanisław Brzozowski</a></h3>
  57               <h2><a href="#">Wstęp do filozofii</a></h2>
  58             </article>
  59             <article class="l-books__item">
  60               <figure class="l-books__item__img">
  61                 <a href="#">
  62                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
  63                 </a>
  64               </figure>
  65               <div class="l-books__item__actions">
  66                 <a href="#"><i class="icon icon-book"></i></a>
  67                 <a href="#"><i class="icon icon-audio"></i></a>
  68                 <a href="#"><i class="icon icon-picture"></i></a>
  69                 <a href="#"><i class="icon icon-like"></i></a>
  70               </div>
  71               <h3><a href="#">Stanisław Brzozowski</a></h3>
  72               <h2><a href="#">Wstęp do filozofii</a></h2>
  73             </article>
  74             <article class="l-books__item">
  75               <figure class="l-books__item__img">
  76                 <a href="#">
  77                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
  78                 </a>
  79               </figure>
  80               <div class="l-books__item__actions">
  81                 <a href="#"><i class="icon icon-book"></i></a>
  82                 <a href="#"><i class="icon icon-audio"></i></a>
  83                 <a href="#"><i class="icon icon-picture"></i></a>
  84                 <a href="#"><i class="icon icon-like"></i></a>
  85               </div>
  86               <h3><a href="#">Stanisław Brzozowski</a></h3>
  87               <h2><a href="#">Wstęp do filozofii</a></h2>
  88             </article>
  89             <article class="l-books__item">
  90               <figure class="l-books__item__img">
  91                 <a href="#">
  92                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
  93                 </a>
  94               </figure>
  95               <div class="l-books__item__actions">
  96                 <a href="#"><i class="icon icon-book"></i></a>
  97                 <a href="#"><i class="icon icon-audio"></i></a>
  98                 <a href="#"><i class="icon icon-picture"></i></a>
  99                 <a href="#"><i class="icon icon-like"></i></a>
 100               </div>
 101               <h3><a href="#">Stanisław Brzozowski</a></h3>
 102               <h2><a href="#">Wstęp do filozofii</a></h2>
 103             </article>
 104             <article class="l-books__item">
 105               <figure class="l-books__item__img">
 106                 <a href="#">
 107                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
 108                 </a>
 109               </figure>
 110               <div class="l-books__item__actions">
 111                 <a href="#"><i class="icon icon-book"></i></a>
 112                 <a href="#"><i class="icon icon-audio"></i></a>
 113                 <a href="#"><i class="icon icon-picture"></i></a>
 114                 <a href="#"><i class="icon icon-like"></i></a>
 115               </div>
 116               <h3><a href="#">Stanisław Brzozowski</a></h3>
 117               <h2><a href="#">Wstęp do filozofii</a></h2>
 118             </article>
 119             <article class="l-books__item l-books__item--placeholder">
 120               <figure class="l-books__item__img">
 121                 <a href="#">
 122                   <img src="images/book-2.jpg" alt="Wstęp do filozofii">
 123                 </a>
 124               </figure>
 125               <div class="l-books__item__actions">
 126                 <a href="#"><i class="icon icon-book"></i></a>
 127                 <a href="#"><i class="icon icon-audio"></i></a>
 128                 <a href="#"><i class="icon icon-picture"></i></a>
 129                 <a href="#"><i class="icon icon-like"></i></a>
 130               </div>
 131               <h3><a href="#">Stanisław Brzozowski</a></h3>
 132               <h2><a href="#">Wstęp do filozofii</a></h2>
 133             </article>
 134           </div>
 135         </div>
 136       </div>
 137     </div>
 138   {% endcomment %}
 139 {% endblock %}
 140
 141 {% block global-content %}
 142   <main class="l-main">
 143
 144     {% if widget %}
 145       <div class="l-change-pop show"><p>{{ widget.description }}</p></div>
 146       <section class="l-section">
 147         <iframe src="{{ widget.url }}" style="width: 100%; height: 600px; border: none;"></iframe>
 148       </section>
 149     {% endif %}
 150
 151     {% if recommended_collection %}
 152       <section class="l-section">
 153         <div class="l-collections js-collections">
 154           <div class="l-collections__header">
 155             <h3><a href="{{ recommended_collection.get_absolute_url }}">{{ recommended_collection.title }}</a></h3>
 156             <div class="l-your-books__header__actions">
 157               <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
 158               <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
 159             </div>
 160           </div>
 161           <div class="l-books">
 162             {% for book in recommended_collection.get_books %}
 163               {% include 'catalogue/book_box.html' %}
 164             {% endfor %}
 165           </div>
 166           <div class="c-read_more">
 167             <a href="/katalog/kolekcje/">{% trans "zobacz wszystkie kolekcje" %}</a>
 168           </div>
 169         </div>
 170
 171       </section>
 172     {% endif %}
 173
 174     <section class="l-section">
 175       <div class="p-homepage__info">
 176         <div class="p-homepage__info__box p-homepage__info__box--carousel">
 177           {% carousel 'main_2022' %}
 178         </div>
 179         <div class="p-homepage__info__box p-homepage__info__box--donate">
 180           <figure>
 181             <img src="{% static '2022/images/book-donate.svg' %}" alt="{% trans 'Dorzuć się!' %}">
 182           </figure>
 183           <div class="p-homepage__info__box__content">
 184             <p>
 185               {% blocktrans trimmed %}
 186                 Nasze książki są dostępne dla tysięcy
 187                 dzieciaków dzięki <strong>darowiznom</strong> od
 188                 osób takich jak <strong>Ty</strong>!
 189               {% endblocktrans %}
 190             </p>
 191             <a href="{% url 'club_join' %}?pk_campaign=home" class="l-button l-button--default l-button--default--dark">{% trans "Dorzuć się!" %}</a>
 192           </div>
 193         </div>
 194         <div class="p-homepage__info__box p-homepage__info__box--newsletter">
 195           <figure>
 196             <img src="{% static '2022/images/book-newsletter.svg' %}" alt="{% trans 'Zapisz się na nasz Newsletter!' %}">
 197           </figure>
 198           <div class="p-homepage__info__box__content">
 199             <h3>
 200               {% trans "Informacja o&nbsp;nowościach" %} <strong>{% trans "Newsletter!" %}</strong>
 201             </h3>
 202             <a href="{% url 'subscribe' %}?pk_campaign=home" class="l-button l-button--default">{% trans "Zapisz się" context "Newsletter" %}</a>
 203           </div>
 204         </div>
 205       </div>
 206     </section>
 207
 208     <section class="l-section l-section--row">
 209       <div class="l-quotes" style="">
 210         {% for ambassador in ambassadors %}
 211           <div class="l-quotes__item">
 212             {% thumbnail ambassador.photo '100x100' crop="center" as ambphoto %}
 213             <img src="{{ ambphoto.url  }}" alt="{{ ambassador.name }}">
 214               {% endthumbnail %}
 215               <h4>{{ ambassador.name }}</h4>
 216               <p>
 217                 {{ ambassador.text }}
 218               </p>
 219           </div>
 220         {% endfor %}
 221       </div>
 222
 223       <div class="l-quotes-ad" style="">
 224         {% preview_ad_homepage %}
 225       </div>
 226
 227     </section>
 228
 229     <section class="l-section">
 230       <div class="p-homepage__info p-homepage__info--second">
 231         <div class="p-homepage__info__box p-homepage__info__box--full">
 232           <figure>
 233             <img src="{% static '2022/images/kid.png' %}" alt="{% trans 'Dorzuć się!' %}">
 234           </figure>
 235           <div class="p-homepage__info__box__content">
 236             <p>
 237               {% blocktrans trimmed %}
 238                 <strong>Wolne Lektury</strong> to lektury szkolne
 239                 i tysiące innych książek – za <strong>darmo</strong>
 240                 i <strong>bez rejestracji</strong>.
 241               {% endblocktrans %}
 242             </p>
 243             <p>{% trans "Czytaj i słuchaj online, ściągaj na swój telefon lub komputer, dziel się z innymi." %}</p>
 244             <p>{% trans "Dla uczennic i uczniów dodajemy przypisy, motywy literackie, biogramy i geotagowanie." %}</p>
 245             <a href="{% url 'infopage' 'o-projekcie' %}?pk_campaign=wl-infobox" class="l-button l-button--default l-button--default--dark">{% trans "Dowiedz się więcej" %}</a>
 246           </div>
 247         </div>
 248         <div class="p-homepage__info__box__rows">
 249           <div class="p-homepage__info__box p-homepage__info__box--full--sm">
 250             <figure>
 251               <img src="{% static '2022/images/kid-2.png' %}" alt="{% trans 'Dorzuć się!' %}">
 252             </figure>
 253             <div class="p-homepage__info__box__content">
 254               <p>
 255                 {% blocktrans trimmed %}
 256                   Jesteśmy częścią ruchu <strong>wolnej kultury</strong>!
 257                 {% endblocktrans %}
 258               </p>
 259               <a href="https://fundacja.wolnelektury.pl/o-fundacji/?pk_campaign=wl-infobox" class="l-button l-button--default">{% trans "Dowiedz się więcej" %}</a>
 260             </div>
 261           </div>
 262           <div class="p-homepage__info__box p-homepage__info__box--full--sm">
 263             <figure>
 264               <img src="{% static '2022/images/kid-3.png' %}" alt="{% trans 'Dorzuć się!' %}">
 265             </figure>
 266             <div class="p-homepage__info__box__content">
 267               <p>
 268                 {% blocktrans trimmed %}
 269                   Jak budujemy najpopularniejszą <strong>bibliotekę online</strong> w Polsce
 270                 {% endblocktrans %}
 271               </p>
 272               <a href="/info/jak-powstaja-wolne-lektury/" class="l-button l-button--default">{% trans "Dowiedz się więcej" %}</a>
 273             </div>
 274           </div>
 275         </div>
 276       </div>
 277     </section>
 278   </main>
 279
 280
 281   <section class="l-section">
 282     <div class="l-collections js-collections">
 283       <div class="l-collections__header">
 284         <h3><a href="/katalog/nowe/">{% trans "Nowości" %}</a></h3>
 285         <div class="l-your-books__header__actions">
 286           <button class="js-prev-slide"><i class="icon icon-arrow-left"></i></button>
 287           <button class="js-next-slide"><i class="icon icon-arrow-right"></i></button>
 288         </div>
 289       </div>
 290       <div class="l-books" style="display:block;">
 291         {% for book in last_published %}
 292           {% include 'catalogue/book_box.html' %}
 293         {% endfor %}
 294       </div>
 295     </div>
 296   </section>
 297
 298   <div class="l-container">
 299     <section class="l-section">
 300       <div class="p-homepage__uptodate">
 301         <div class="p-homepage__uptodate__header">
 302           <h3>{% trans "Bądź na bieżąco" %}</h3>
 303           <ul>
 304             <li>
 305               <a href="https://www.facebook.com/wolnelektury/"
 306                  title="Facebook" tabindex="-1" target="_blank">
 307                 <i class="icon icon-fb" aria-hidden="true"></i>
 308               </a>
 309             </li>
 310             <li>
 311               <a href="https://www.youtube.com/c/WolneLekturyYT/"
 312                  title="YouTube" tabindex="-1" target="_blank">
 313                 <i class="icon icon-yt" aria-hidden="true"></i>
 314               </a>
 315             </li>
 316             <li>
 317               <a href="https://www.instagram.com/wolnelektury/"
 318                  title="Instagram" tabindex="-1" target="_blank">
 319                 <i class="icon icon-ig" aria-hidden="true"></i>
 320               </a>
 321             </li>
 322             <li>
 323               <a href="https://twitter.com/wolnelektury"
 324                  title="Twitter" tabindex="-1" target="_blank">
 325                 <i class="icon icon-tt" aria-hidden="true"></i>
 326               </a>
 327             </li>
 328           </ul>
 329         </div>
 330
 331         {% sponsor_page 'footer' %}
 332
 333       </div>
 334     </section>
 335   </div>
 336
 337 {% endblock %}