Author page.

diff --git a/src/catalogue/models/book.py b/src/catalogue/models/book.py
index 6b9fd72..b624abc 100644 (file)
--- a/src/catalogue/models/book.py
+++ b/src/catalogue/models/book.py
@@ -139,6 +139,8 @@ class Book(models.Model):
 
     SORT_KEY_SEP = '$'
 
 
     SORT_KEY_SEP = '$'
 

+    is_book = True
+

     class AlreadyExists(Exception):
         pass
 
     class AlreadyExists(Exception):
         pass
 

diff --git a/src/catalogue/static/2022/book/filter.js b/src/catalogue/static/2022/book/filter.js
new file mode 100644 (file)
index 0000000..e4538ce
--- /dev/null
+++ b/src/catalogue/static/2022/book/filter.js
@@ -0,0 +1,48 @@
+(function($) {
+
+    $(".quick-filter").each(function() {
+        let bookList = $('#' + $(this).data('for'));
+        $(this).on('input propertychange', function() {
+            let search = $(this).val().toLowerCase();
+            bookList.children().each(function() {
+                found = !search || $("h2", this).text().toLowerCase().search(search) != -1;
+                if (found) 
+                    $(this).fadeIn();
+                else
+                    $(this).fadeOut();
+            });
+        });
+    });
+
+    $(".l-books__sorting button").on('click', function() {
+        if ($(this).hasClass('is-active')) return;
+        $(".is-active", $(this).parent()).removeClass("is-active");
+        $(this).addClass("is-active");
+        let prop = $(this).attr('data-order');
+        $(".l-books__item").css('opacity', '0');
+        setTimeout(function() {
+            if (prop) {
+                $(".l-books__item").each(function() {
+                    $(this).css('order', $(this).attr(prop));
+                });
+            } else {
+                $(".l-books__item").css('order', '');
+            }
+            setTimeout(function() {
+                $(".l-books__item").css('opacity', '100%');
+            }, 200);
+        }, 200);
+    });
+    $("#sort-popular").on('click', function() {
+        $(".l-books__item").each(function() {
+            $(this).css('order', $(this).attr('data-pop'));
+        });
+    });
+    $("#sort-popular").on('click', function() {
+        $(".l-books__item").each(function() {
+            $(this).css('order', $(this).attr('data-pop'));
+        });
+    });
+    
+    
+})(jQuery);

diff --git a/src/catalogue/templates/catalogue/2022/author_box.html b/src/catalogue/templates/catalogue/2022/author_box.html
new file mode 100644 (file)
index 0000000..499a2a0
--- /dev/null
+++ b/src/catalogue/templates/catalogue/2022/author_box.html
@@ -0,0 +1,20 @@
+<div class="row">
+  <h2>O autorze</h2>
+  <div>
+    {% if author.photo %}
+      <figure class="l-author__photo">
+        <img src="{{ author.photo.url }}" alt="{{ author.name }}" style="width: 238px;">
+        <figcaption>
+          {{ author.photo_attribution|safe }}
+        </figcaption>
+      </figure>
+    {% endif %}
+    <article class="l-author__info">
+      <h3><a href="{{ author.get_absolute_url }}">{{ author.name }}</a></h3>
+      <div class="l-article__overlay" data-max-height="327">
+        {{ author.description|safe }}
+      </div>
+      <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
+    </article>
+  </div>
+</div>

diff --git a/src/catalogue/templates/catalogue/2022/author_detail.html b/src/catalogue/templates/catalogue/2022/author_detail.html
new file mode 100644 (file)
index 0000000..39b2d11
--- /dev/null
+++ b/src/catalogue/templates/catalogue/2022/author_detail.html
@@ -0,0 +1,76 @@
+{% extends '2022/base_real.html' %}
+
+{% load choose_cites from social_tags %}
+
+{% block content %}
+  <div class="l-container">
+    <div class="l-breadcrumb">
+      <a href="/"><span>Strona główna</span></a>
+      <a href="/katalog/"><span>Katalog</span></a>
+      <a href="/katalog/autor/"><span>Autor</span></a>
+    </div>
+  </div>
+
+  <main class="l-main">
+
+    <div class="l-section">
+      <div class="l-author__header">
+        {% if tags.0.photo %}
+          <figure>
+            <img src="{{ tags.0.photo.url }}" alt="{{ tags.0.name }}">
+          </figure>
+        {% endif %}
+        <h1>{{ tags.0.name }}</h1>
+      </div>
+    </div>
+
+    <div class="l-section">
+      <div class="l-books__header">
+        <div class="l-books__input">
+          <i class="icon icon-filter"></i>
+          <input type="text" placeholder="filtry, tytuł" class="quick-filter" data-for="book-list">
+        </div>
+        <div class="l-books__sorting">
+             <span>Sortuj:</span>
+             <div>
+             <button data-order="data-pop">najpopularniejsze</button>
+             <button class="is-active">alfabetycznie</button>
+             <!--button>chronologicznie</button-->
+             </div>
+             </div>
+      </div>
+    </div>
+
+    <div class="l-section l-section--col">
+      <div class="l-books__grid" id="book-list">
+        {% for book in object_list %}
+          {% include "catalogue/2022/book_box.html" %}
+        {% endfor %}
+      </div>
+    </div>
+
+    <section class="l-section">
+      <div class="l-author">
+        {% with author=tags.0 %}
+          {% include 'catalogue/2022/author_box.html' %}
+        {% endwith %}
+        {% choose_cites 3 author=tags.0 as cites %}
+        {% if cites %}
+        <div class="row">
+          <div class="l-author__quotes">
+            <div class="l-author__quotes__slider">
+
+              {% for fragment in cites %}
+                <div class="l-author__quotes__slider__item">
+                  {% include "catalogue/2022/fragment_box.html" %}
+                </div>
+              {% endfor %}
+
+            </div>
+          </div>
+        </div>
+        {% endif %}
+      </div>
+    </section>
+  </main>
+{% endblock %}

diff --git a/src/catalogue/templates/catalogue/2022/book_box.html b/src/catalogue/templates/catalogue/2022/book_box.html
new file mode 100644 (file)
index 0000000..83b4157
--- /dev/null
+++ b/src/catalogue/templates/catalogue/2022/book_box.html
@@ -0,0 +1,37 @@
+{% load sorl_thumbnail %}
+
+<article class="l-books__item" data-pop="{{ book.popularity.count }}">
+  <figure class="l-books__item__img">
+    <a href="{{ book.get_absolute_url }}">
+      {% if book.is_picture %}
+        {% if book.image_file %}
+          {% thumbnail book.image_file "170x170" as im %}
+          <img style="float: left; margin:{{ im|margin:"170x170" }}" src="{{ im.url }}" width="{{ im.x }}" height="{{ im.y }}" />
+          {% endthumbnail %}
+        {% endif %}
+      {% else %}
+        {% if book.cover_clean %}
+          <img src="{{ book.cover_clean.url }}" alt="{{ book.title }}">
+        {% endif %}
+      {% endif %}
+    </a>
+  </figure>
+  <div class="l-books__item__actions">
+    {% if book.is_book %}
+      <span class="icon icon-book-alt" title="książka"></span>
+    {% endif %}
+    {% if book.has_mp3 %}
+      <span class="icon icon-audio" title="audiobook"></span>
+    {% endif %}
+    {% if book.is_picture %}
+      <span class="icon icon-picture" title="obraz"></span>
+    {% endif %}
+    <!-- a href="#" class="icon icon-like"></a -->
+  </div>
+  <h3>
+    {% for author in book.authors %}
+      <a href="{{ author.get_absolute_url }}">{{ author }}</a>{% if not forloop.last %}, {% endif %}
+    {% endfor %}
+  </h3>
+  <h2><a href="{{ book.get_absolute_url }}">{{ book.title }}</a></h2>
+</article>

diff --git a/src/catalogue/templates/catalogue/2022/book_detail.html b/src/catalogue/templates/catalogue/2022/book_detail.html
index 0527823..ea967be 100644 (file)
--- a/src/catalogue/templates/catalogue/2022/book_detail.html
+++ b/src/catalogue/templates/catalogue/2022/book_detail.html
@@ -309,40 +309,15 @@
       {% for author in book.authors %}
         <section class="l-section">
           <div class="l-author">
       {% for author in book.authors %}
         <section class="l-section">
           <div class="l-author">

-            <div class="row">
-              <h2>O autorze</h2>
-              <div>
-                {% if author.photo %}
-                  <figure class="l-author__photo">
-                    <img src="{{ author.photo.url }}" alt="{{ author.name }}" style="width: 238px;">
-                    <figcaption>
-                      {{ author.photo_attribution|safe }}
-                    </figcaption>
-                  </figure>
-                {% endif %}
-                <article class="l-author__info">
-                  <h3><a href="{{ author.get_absolute_url }}">{{ author.name }}</a></h3>
-                  <div class="l-article__overlay" data-max-height="327">
-                    {{ author.description|safe }}
-                  </div>
-                  <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Czytaj więcej</button>
-                </article>
-              </div>
-            </div>
+              {% include 'catalogue/2022/author_box.html' %}

 
 

-            {% choose_cites book 3 as cites %}
+            {% choose_cites 3 book=book as cites %}

             {% if cites %}
               <div class="row">
                 <div class="l-author__quotes">
                   <div class="l-author__quotes__slider">
                     {% for fragment in cites %}
             {% if cites %}
               <div class="row">
                 <div class="l-author__quotes">
                   <div class="l-author__quotes__slider">
                     {% for fragment in cites %}

-                      <a class="l-author__quotes__slider__item" href="{{ fragment.get_absolute_url }}">
-
-                        <em>
-                          {{ fragment.short_text|safe }}
-                        </em>
-                        <p>{{ fragment.book.pretty_title }}</p>
-                      </a>
+                      {% include "catalogue/2022/fragment_box.html" %}

                     {% endfor %}
                   </div>
                 </div>
                     {% endfor %}
                   </div>
                 </div>

diff --git a/src/catalogue/templates/catalogue/2022/fragment_box.html b/src/catalogue/templates/catalogue/2022/fragment_box.html
new file mode 100644 (file)
index 0000000..f98d0b5
--- /dev/null
+++ b/src/catalogue/templates/catalogue/2022/fragment_box.html
@@ -0,0 +1,6 @@
+<a class="l-author__quotes__slider__item" href="{{ fragment.get_absolute_url }}">
+  <em>
+    {{ fragment.short_text|safe }}
+  </em>
+  <p>{{ fragment.book.pretty_title }}</p>
+</a>

diff --git a/src/catalogue/views.py b/src/catalogue/views.py
index 037345b..6edbbd6 100644 (file)
--- a/src/catalogue/views.py
+++ b/src/catalogue/views.py
@@ -142,9 +142,16 @@ def object_list(request, objects, fragments=None, related_tags=None, tags=None,
     }
     if extra:
         result.update(extra)
     }
     if extra:
         result.update(extra)

+
+    is_author = len(tags) == 1 and tags[0].category == 'author'
+    new_layout = request.EXPERIMENTS['layout']
+    if is_author and new_layout.value:
+        template = 'catalogue/2022/author_detail.html'
+    else:
+        template = 'catalogue/tagged_object_list.html'
+        

     return render(
     return render(

-        request,
-        'catalogue/tagged_object_list.html', result,
+        request, template, result,

     )
 
 
     )
 
 

diff --git a/src/newtagging/locale/jp/LC_MESSAGES/django.po b/src/newtagging/locale/jp/LC_MESSAGES/django.po
index 7ea9649..bced7a5 100644 (file)
--- a/src/newtagging/locale/jp/LC_MESSAGES/django.po
+++ b/src/newtagging/locale/jp/LC_MESSAGES/django.po
@@ -8,7 +8,6 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"

-"POT-Creation-Date: 2013-12-16 09:20+0100\n"

 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"

diff --git a/src/picture/models.py b/src/picture/models.py
index 3a05ad8..7ccd97c 100644 (file)
--- a/src/picture/models.py
+++ b/src/picture/models.py
@@ -101,6 +101,8 @@ class Picture(models.Model):
 
     short_html_url_name = 'picture_short'
 
 
     short_html_url_name = 'picture_short'
 

+    is_picture = True
+

     class AlreadyExists(Exception):
         pass
 
     class AlreadyExists(Exception):
         pass
 

diff --git a/src/picture/views.py b/src/picture/views.py
index f42b0bb..e40e0ab 100644 (file)
--- a/src/picture/views.py
+++ b/src/picture/views.py
@@ -95,7 +95,7 @@ def import_picture(request):
             exception = pprint.pformat(info[1])
             tb = '\n'.join(traceback.format_tb(info[2]))
             return HttpResponse(_("An error occurred: %(exception)s\n\n%(tb)s") %
             exception = pprint.pformat(info[1])
             tb = '\n'.join(traceback.format_tb(info[2]))
             return HttpResponse(_("An error occurred: %(exception)s\n\n%(tb)s") %

-                                {'exception': exception, 'tb': tb}, mimetype='text/plain')
+                                {'exception': exception, 'tb': tb}, content_type='text/plain')

         return HttpResponse(_("Picture imported successfully"))
     else:
         return HttpResponse(_("Error importing file: %r") % import_form.errors)
         return HttpResponse(_("Picture imported successfully"))
     else:
         return HttpResponse(_("Error importing file: %r") % import_form.errors)

diff --git a/src/social/templatetags/social_tags.py b/src/social/templatetags/social_tags.py
index 0135792..88d6771 100644 (file)
--- a/src/social/templatetags/social_tags.py
+++ b/src/social/templatetags/social_tags.py
@@ -5,7 +5,7 @@ import re
 from django import template
 from django.utils.functional import lazy
 from django.utils.cache import add_never_cache_headers
 from django import template
 from django.utils.functional import lazy
 from django.utils.cache import add_never_cache_headers

-from catalogue.models import Book
+from catalogue.models import Book, Fragment

 from social.utils import likes, get_or_choose_cite, choose_cite as cs
 from ..models import Carousel, Cite
 
 from social.utils import likes, get_or_choose_cite, choose_cite as cs
 from ..models import Carousel, Cite
 


@@ -25,8 +25,11 @@ def choose_cite(context, book_id=None, tag_ids=None):
 
 
 @register.simple_tag
 
 
 @register.simple_tag

-def choose_cites(book, number):
-    return  book.choose_fragments(number) # todo: cites?
+def choose_cites(number, book=None, author=None):
+    if book is not None:
+        return book.choose_fragments(number) # todo: cites?
+    elif author is not None:
+        return Fragment.tagged.with_all([author]).order_by('?')[:number]

 
 
 @register.simple_tag(takes_context=True)
 
 
 @register.simple_tag(takes_context=True)

diff --git a/src/wolnelektury/settings/static.py b/src/wolnelektury/settings/static.py
index 7dded3e..2469532 100644 (file)
--- a/src/wolnelektury/settings/static.py
+++ b/src/wolnelektury/settings/static.py
@@ -26,7 +26,7 @@ PIPELINE = {
             'source_filenames': [
                 'contrib/jquery-ui-1.13.1.custom/jquery-ui.css',
                 '2022/styles/main.scss',
             'source_filenames': [
                 'contrib/jquery-ui-1.13.1.custom/jquery-ui.css',
                 '2022/styles/main.scss',

-                '2022/more.scss', 
+                '2022/more.scss',

             ],
             'output_filename': 'css/compressed/2022.css',
         },
             ],
             'output_filename': 'css/compressed/2022.css',
         },


@@ -140,6 +140,7 @@ PIPELINE = {
                 'contrib/jquery-ui-1.13.1.custom/jquery-ui.js',
                 'js/search.js',
                 'js/2022.js',
                 'contrib/jquery-ui-1.13.1.custom/jquery-ui.js',
                 'js/search.js',
                 'js/2022.js',

+                '2022/book/filter.js',

             ],
             'output_filename': 'js/2022.min.js'
         },
             ],
             'output_filename': 'js/2022.min.js'
         },

diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js
index 4d17771..99a7fc7 100644 (file)
--- a/src/wolnelektury/static/2021/scripts/main.js
+++ b/src/wolnelektury/static/2021/scripts/main.js
@@ -1,7 +1,7 @@
 // JS Menu
 (function () {
   let button = $('.js-menu');
 // JS Menu
 (function () {
   let button = $('.js-menu');

-  let menu = $('.l-navigation__menu');
+  let menu = $('.l-navigation');

   let menuLinks = menu.find('a');
 
   button.on('click', function() {
   let menuLinks = menu.find('a');
 
   button.on('click', function() {


@@ -154,14 +154,31 @@
   let $switchMonthly = $('#switch-monthly');
 
   $switchMonthly.on('click', function() {
   let $switchMonthly = $('#switch-monthly');
 
   $switchMonthly.on('click', function() {

-    $('.l-checkout__payments__box').removeClass('once');
+      $('.payments-once').hide();
+      $('.payments-recurring').show();

   });
 
   $switchOnce.on('click', function() {
   });
 
   $switchOnce.on('click', function() {

-    $('.l-checkout__payments__box').addClass('once');
+      $('.payments-recurring').hide();
+      $('.payments-once').show();

   });
 })();
 
   });
 })();
 

+
+(function() {
+
+    $('.l-checkout__payments__box button').on('click', function() {
+        let container = $(this).closest('.l-checkout__payments');
+        $('input', container).val($(this).attr('data-amount'));
+        $('.is-active', container).removeClass('is-active');
+        $(this).closest('.l-checkout__payments__box').addClass('is-active');
+        $('#kwota').val('');
+        return false;
+    });
+    
+})();
+
+

 //Copy function
 (function() {
   let $copy = $('.js-copy');
 //Copy function
 (function() {
   let $copy = $('.js-copy');

diff --git a/src/wolnelektury/static/2022/fonts/wl.svg b/src/wolnelektury/static/2022/fonts/wl.svg
index 284c0f8..fd9687e 100644 (file)
--- a/src/wolnelektury/static/2022/fonts/wl.svg
+++ b/src/wolnelektury/static/2022/fonts/wl.svg
@@ -6,10 +6,10 @@
 <![CDATA[
 {
        "fontFamily": "wl",
 <![CDATA[
 {
        "fontFamily": "wl",

-       "fontURL": "https://intui.eu/",
-       "description": "pomorskie.travel\nFont generated by IcoMoon.",

        "majorVersion": 1,
        "minorVersion": 0,
        "majorVersion": 1,
        "minorVersion": 0,

+       "fontURL": "https://intui.eu/",
+       "description": "pomorskie.travel\nFont generated by IcoMoon.",

        "version": "Version 1.0",
        "fontId": "wl",
        "psName": "wl",
        "version": "Version 1.0",
        "fontId": "wl",
        "psName": "wl",


@@ -24,24 +24,34 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />

-<glyph unicode="&#xe900;" glyph-name="liked" data-tags="liked" d="M943.879 799.839c106.828-106.827 106.828-280.029 0-386.854l-45.025-45.025 0.476-0.476-326.405-326.405c-33.386-33.386-87.515-33.386-120.9 0l-119.795 119.795c-4.826 4.196-9.54 8.592-14.132 13.183s-8.988 9.307-13.186 14.135l-224.792 224.794c-106.827 106.825-106.827 280.027 0 386.854s280.026 106.827 386.854 0l45.025-45.025 45.025 45.025c106.828 106.827 280.027 106.827 386.855 0z" />
-<glyph unicode="&#xe901;" glyph-name="prev" data-tags="prev" d="M211.532 486.924c-25.572-19.179-25.572-63.929 0-83.108l671.258-460.291c31.965-19.179 76.715 0 76.715 38.358v926.975c0 38.358-44.751 63.929-76.715 38.358l-671.258-460.291zM128.424 960v0c-38.358 0-63.929-25.572-63.929-63.929v-895.010c0-38.358 25.572-63.929 63.929-63.929v0c38.358 0 63.929 25.572 63.929 63.929v895.010c0 38.358-25.572 63.929-63.929 63.929z" />
-<glyph unicode="&#xe902;" glyph-name="next" data-tags="next" d="M812.468 486.923c25.572-19.179 25.572-63.929 0-83.108l-671.258-460.291c-31.965-19.179-76.715 0-76.715 38.358v926.975c0 38.358 44.751 63.929 76.715 38.358l671.258-460.291zM895.576 960v0c38.358 0 63.929-25.572 63.929-63.929v-895.010c0-38.358-25.572-63.929-63.929-63.929v0c-38.358 0-63.929 25.572-63.929 63.929v895.010c0 38.358 25.572 63.929 63.929 63.929z" />
-<glyph unicode="&#xe903;" glyph-name="audio" data-tags="audio" d="M52.349 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM971.651 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM869.506-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM869.506 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM154.494-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM154.494 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM1022.724 446.723h-102.145c0 56.179-10.214 107.252-30.643 158.324s-51.072 91.93-86.823 132.788c-35.75 35.75-81.716 66.394-132.788 86.823-102.145 40.858-214.504 40.858-311.542 0-51.072-20.429-91.93-51.072-132.788-86.823-40.858-40.858-71.502-86.823-91.93-132.788-20.429-51.072-30.643-102.145-30.643-158.324h-102.145c0 66.394 15.322 132.788 40.858 194.075s61.287 117.466 107.252 168.538c45.965 45.965 102.145 86.823 163.431 112.359 122.574 51.072 265.576 51.072 393.257 0 61.287-25.536 117.466-61.287 163.431-112.359s86.823-102.145 112.359-163.431c25.536-66.394 40.858-132.788 40.858-199.182z" />
-<glyph unicode="&#xe904;" glyph-name="book" data-tags="book" d="M934.956-64h-712.348c-75.687 0-133.565 57.878-133.565 133.565s57.878 133.565 133.565 133.565h712.348v-267.13zM222.608 114.087c-26.713 0-44.522-17.809-44.522-44.522s17.809-44.522 44.522-44.522h623.304v89.043h-623.304zM178.086 69.565h-89.043v756.87c0 75.687 57.878 133.565 133.565 133.565h712.348v-801.391h-89.043v712.348h-623.304c-26.713 0-44.522-17.809-44.522-44.522v-756.87zM756.869 425.739h-445.217v311.652h445.217v-311.652zM400.695 514.783h267.13v133.565h-267.13v-133.565z" />
-<glyph unicode="&#xe905;" glyph-name="eye" data-tags="eye" d="M65.422 442.311l-48.356 28.444-17.067-28.444 17.067-28.444 48.356 28.444zM958.578 442.311l48.356-28.444 17.067 28.444-17.067 28.444-48.356-28.444zM116.622 416.711c76.8 136.533 224.711 230.4 395.378 230.4v113.778c-213.333 0-398.222-116.622-494.933-290.133l99.556-54.044zM512 647.111c170.667 0 318.578-93.867 395.378-230.4l99.556 56.889c-96.711 170.667-281.6 287.289-494.933 287.289v-113.778zM910.222 470.756c-79.644-130.844-227.556-221.867-398.222-221.867v-113.778c210.489 0 398.222 110.933 494.933 278.756l-96.711 56.889zM512 248.889c-170.667 0-318.578 91.022-398.222 221.867l-99.556-56.889c99.556-167.822 287.289-278.756 497.778-278.756v113.778zM520.533 192c-142.222 0-256 113.778-256 256s113.778 256 256 256c142.222 0 256-113.778 256-256s-113.778-256-256-256zM520.533 647.111c-110.933 0-199.111-88.178-199.111-199.111s88.178-199.111 199.111-199.111c110.933 0 199.111 88.178 199.111 199.111s-88.178 199.111-199.111 199.111zM577.422 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889z" />
-<glyph unicode="&#xe906;" glyph-name="play" data-tags="play" d="M901.518 489.138c30.853-20.569 30.853-61.706 0-82.274l-719.901-462.794c-35.995-20.569-82.274 0-82.274 41.137v925.587c0 41.137 46.279 61.706 82.274 41.137l719.901-462.794z" />
-<glyph unicode="&#xe907;" glyph-name="pause" data-tags="pause" d="M155.826 960h222.609v-1024h-222.609v1024zM645.565 960h222.609v-1024h-222.609v1024z" />
-<glyph unicode="&#xe908;" glyph-name="volume" data-tags="volume" d="M714.418 281.676v47.628c33.34 0 61.916 14.288 85.73 33.34 23.814 23.814 33.34 52.391 33.34 85.73s-14.288 61.916-33.34 85.73c-23.814 23.814-52.391 33.34-85.73 33.34v47.628c42.865 0 85.73-19.051 119.070-47.628 33.34-33.34 47.628-76.205 47.628-119.070s-19.051-85.73-47.628-119.070c-33.34-28.577-76.205-47.628-119.070-47.628zM714.418 138.792v47.628c71.442 0 138.121 28.577 185.749 76.205s76.205 114.307 76.205 185.749c0 71.442-28.577 138.121-76.205 185.749s-114.307 76.205-185.749 76.205v47.628c80.967 0 161.935-33.34 219.088-90.493s90.493-138.121 90.493-219.088-33.34-161.935-90.493-219.088c-57.153-57.153-138.121-90.493-219.088-90.493zM500.093 824.634l-309.581-185.749h-95.256c-52.391 0-95.256-42.865-95.256-95.256v-190.512c0-52.391 42.865-95.256 95.256-95.256h95.256l309.581-185.749c28.577-14.288 71.442 0 71.442 28.577v690.605c0 28.577-42.865 47.628-71.442 33.34z" />
-<glyph unicode="&#xe909;" glyph-name="mute" data-tags="mute" d="M461.2 795.344l-285.504-171.303h-87.848c-48.316 0-87.848-39.531-87.848-87.848v-175.695c0-48.316 39.531-87.848 87.848-87.848h87.848l285.504-171.303c26.354-13.177 65.886 0 65.886 26.354v636.894c0 26.354-39.531 43.924-65.886 30.747zM641.982 609.845l31.058 31.058 350.961-350.961-31.058-31.058-350.961 350.961zM641.982 286.838l350.961 350.961 31.058-31.058-350.961-350.961-31.058 31.058z" />
-<glyph unicode="&#xe90a;" glyph-name="quote" data-tags="quote" d="M1024 613.025c0 62.061-22.053 114.718-66.157 157.972-44.106 43.254-97.798 64.882-161.078 64.882-63.283 0-117.934-21.627-163.955-64.882-44.106-43.254-66.16-95.912-66.16-157.972 0-60.18 16.3-112.838 48.901-157.972 32.597-43.256 79.58-64.881 140.943-64.881-19.177-69.585-62.321-157.032-129.437-262.349-3.835-3.761-5.753-8.462-5.753-14.103s5.753-14.106 17.259-25.389c13.421-13.163 28.762-19.748 46.021-19.748h2.877c19.177 0 37.395 8.465 54.651 25.389 61.366 56.419 136.152 152.331 224.362 287.735 36.433 58.3 55.609 133.526 57.527 225.676v5.642zM457.349 604.563c0 62.061-22.053 114.718-66.16 157.972-44.103 43.254-97.796 64.882-161.077 64.882s-117.933-21.627-163.955-64.882c-44.105-43.254-66.157-94.971-66.157-155.152 0-62.061 16.3-114.718 48.899-157.971 32.599-45.137 79.581-67.705 140.944-67.705-19.176-69.582-62.322-157.032-129.438-262.346-3.835-3.761-5.753-8.462-5.753-14.103 0-5.644 5.753-15.047 17.258-28.21 13.423-11.286 28.764-16.927 46.022-16.927h2.877c19.176 0 37.393 8.462 54.652 25.389 61.363 56.419 136.149 152.331 224.359 287.735 36.436 58.3 55.613 133.523 57.53 225.675v5.642z" />
-<glyph unicode="&#xe90b;" glyph-name="search" data-tags="search" d="M447.767 66.327c-245.76 0-446.836 201.077-446.836 446.836s201.077 446.836 446.836 446.836c245.76 0 446.836-201.077 446.836-446.836s-201.077-446.836-446.836-446.836zM447.767 848.291c-186.182 0-335.128-148.946-335.128-335.128s148.946-335.128 335.128-335.128c186.182 0 335.128 148.946 335.128 335.128s-148.946 335.128-335.128 335.128zM969.076-64c-14.895 0-29.789 3.723-40.96 14.895l-223.419 223.419c-22.342 22.342-22.342 55.854 0 78.196s55.854 22.342 78.196 0l223.419-223.419c22.342-22.342 22.342-55.854 0-78.196-7.447-11.17-22.342-14.895-37.236-14.895z" />
-<glyph unicode="&#xe90c;" glyph-name="acc-1" data-tags="acc-1" d="M511.063 959.999c143.218 0 265.157-50.001 365.718-149.954 48.132-48.145 84.724-103.17 109.714-165.027 24.978-61.873 37.506-127.537 37.506-197.027 0-70.097-12.367-135.778-37.025-197.010-24.686-61.251-61.121-115.361-109.249-162.292-49.967-49.361-106.657-87.17-170.067-113.376-63.378-26.21-128.914-39.314-196.565-39.314-67.647 0-132.416 12.93-194.289 38.865-61.857 25.888-117.33 63.378-166.403 112.435-49.073 49.054-86.401 104.385-112.002 165.955-25.6 61.566-38.401 126.464-38.401 194.737 0 67.667 12.944 132.722 38.849 195.203s63.553 118.402 112.914 167.779c97.521 99.33 217.283 149.026 359.3 149.026zM512.922 867.647c-117.027 0-215.477-40.849-295.334-122.514-40.24-40.849-71.169-86.705-92.802-137.602-21.664-50.896-32.464-104.081-32.464-159.554 0-54.867 10.8-107.744 32.464-158.61 21.649-50.928 52.561-96.339 92.802-136.259 40.225-39.936 85.617-70.384 136.242-91.443 50.576-21.024 103.619-31.535 159.092-31.535 54.847 0 108 10.642 159.571 31.984 51.503 21.362 97.934 52.114 139.41 92.337 79.84 78.017 119.745 175.844 119.745 293.51 0 56.69-10.37 110.32-31.090 160.914-20.689 50.593-50.881 95.682-90.463 135.33-82.337 82.289-181.366 123.442-297.173 123.442zM506.502 533l-68.592-35.663c-7.326 15.214-16.301 25.903-26.959 32-10.673 6.081-20.577 9.137-29.729 9.137-45.696 0-68.577-30.161-68.577-90.514 0-27.424 5.792-49.345 17.36-65.808 11.584-16.467 28.656-24.706 51.217-24.706 29.871 0 50.898 14.639 63.104 43.89l63.074-32.004c-13.407-25.005-32-44.654-55.776-58.975-23.745-14.336-49.967-21.488-78.625-21.488-45.713 0-82.609 14.001-110.642 42.063-28.033 28.034-42.049 67.040-42.049 117.012 0 48.766 14.176 87.457 42.513 116.114 28.336 28.64 64.145 42.976 107.442 42.976 63.41 0.032 108.801-24.656 136.24-74.034zM801.819 533l-67.663-35.663c-7.314 15.214-16.321 25.903-26.978 32-10.689 6.081-20.913 9.137-30.625 9.137-45.71 0-68.592-30.161-68.592-90.514 0-27.424 5.809-49.345 17.376-65.808 11.567-16.467 28.625-24.706 51.216-24.706 29.842 0 50.881 14.639 63.059 43.89l64-32.004c-14.001-25.005-32.91-44.654-56.655-58.975-23.776-14.336-49.684-21.488-77.714-21.488-46.336 0-83.346 14.001-111.057 42.063-27.778 28.034-41.633 67.040-41.633 117.012 0 48.766 14.159 87.457 42.528 116.114 28.321 28.64 64.13 42.976 107.41 42.976 63.393 0.032 108.528-24.656 135.329-74.034z" />
-<glyph unicode="&#xe90d;" glyph-name="acc-2" data-tags="acc-2" d="M511.121 960c138.279 0 254.925-49.36 349.877-148.112 95.508-99.36 143.309-220.656 143.309-363.888 0-143.856-46.907-263.617-140.694-359.298-99.631-101.805-217.123-152.702-352.492-152.702-133.060 0-248.506 50.306-346.368 150.879-96.692 100.576-145.061 220.928-145.061 361.121 0 140.176 48.369 261.472 145.061 363.872 94.954 98.768 210.385 148.128 346.368 148.128zM512.877 867.648c-111.94 0-206.586-40.848-283.955-122.512-80.308-85.344-120.446-184.402-120.446-297.152 0-113.376 39.846-211.519 119.538-294.368 79.708-82.912 174.646-124.337 284.832-124.337 109.584 0 205.139 41.712 286.598 125.251 77.371 77.407 116.047 175.23 116.047 293.486 0 116.417-39.274 215.44-117.784 297.136-78.525 81.664-173.477 122.496-284.83 122.496zM644.753 575.088v-209.358h-56.245v-248.674h-152.986v248.659h-56.246v209.374c0 9.152 3.077 16.912 9.215 23.312 6.169 6.384 13.646 9.6 22.415 9.6h202.216c8.2 0 15.537-3.2 21.969-9.6 6.416-6.4 9.661-14.176 9.661-23.312zM443.415 706.736c0 48.128 22.847 72.224 68.584 72.224s68.569-24.064 68.569-72.224c0-47.536-22.863-71.312-68.569-71.312s-68.584 23.776-68.584 71.312z" />
-<glyph unicode="&#xe90e;" glyph-name="acc-3" data-tags="acc-3" d="M511.087 960c143.218 0 264.499-49.68 363.874-149.040 99.328-98.752 149.039-219.728 149.039-362.96 0-143.265-48.786-263.314-146.322-360.224-102.991-101.183-225.213-151.776-366.592-151.776-138.382 0-258.446 50.286-360.222 150.863-100.56 100.561-150.864 220.912-150.864 361.121 0 139.568 50.304 260.56 150.864 362.96 99.344 99.376 219.424 149.056 360.222 149.056zM512.915 867.648c-116.417 0-214.85-41.152-295.314-123.44-83.52-84.736-125.264-183.474-125.264-296.208 0-113.999 41.44-212.114 124.32-294.4 82.896-82.912 181.633-124.337 296.222-124.337 113.971 0 213.346 41.744 298.067 125.251 80.463 78.013 120.686 175.837 120.686 293.486 0 117.008-40.846 215.76-122.494 296.208-81.073 82.32-179.826 123.44-296.224 123.44zM284.337 520.239c9.744 62.785 35.024 111.393 75.872 145.825 40.834 34.432 90.498 51.648 149.023 51.648 80.431 0 144.463-25.92 192-77.696 47.537-51.808 71.314-118.257 71.314-199.314 0-78.639-24.69-143.998-74.031-196.096-49.408-52.094-113.376-78.175-192.035-78.175-57.903 0-107.886 17.361-149.934 52.114-42.064 34.749-67.344 84.11-75.888 148.11h128.944c3.040-62.176 40.527-93.263 112.463-93.263 35.938 0 64.914 15.553 86.851 46.624 21.965 31.071 32.941 72.543 32.941 124.337 0 54.256-10.063 95.535-30.161 123.887-20.126 28.336-49.054 42.512-86.879 42.512-68.289 0-106.673-30.16-115.2-90.497h37.49l-101.474-101.486-101.488 101.486 40.192-0.016z" />
-<glyph unicode="&#xe90f;" glyph-name="all" data-tags="all" d="M512.001-60.661c-17.809 0-35.617 4.452-48.974 17.809-26.713 26.713-26.713 66.783 0 93.496l396.243 396.243-396.243 396.243c-26.713 26.713-26.713 66.783 0 93.496s66.783 26.713 93.496 0l445.217-445.217c26.713-26.713 26.713-66.783 0-93.496l-445.217-445.217c-8.904-8.904-26.713-13.357-44.522-13.357zM957.218 384.557h-890.435c-35.617 0-66.783 31.165-66.783 66.783s31.165 66.783 66.783 66.783h890.435c35.617 0 66.783-31.165 66.783-66.783s-31.165-66.783-66.783-66.783z" />
-<glyph unicode="&#xe910;" glyph-name="arrow-right" data-tags="arrow-right" d="M286.416-64c-34.306 0-68.613 11.436-91.483 34.306-45.742 45.742-34.306 114.354 11.436 160.096l354.498 308.756-354.498 320.192c-45.742 45.742-57.177 114.354-11.436 160.096s114.354 57.177 160.096 11.436l457.416-400.239c34.306-11.436 45.742-45.742 45.742-80.047s-11.436-68.613-34.306-91.483l-457.416-400.239c-22.871-11.436-57.177-22.871-80.047-22.871z" />
-<glyph unicode="&#xe911;" glyph-name="arrow-up" data-tags="arrow-up" d="M943.944 170.652c-15.792 0-39.481 7.896-55.272 23.688l-379.010 339.531-379.010-339.531c-31.585-31.585-78.96-23.688-110.545 7.896s-23.688 78.96 7.896 110.545l434.283 394.803c31.585 23.688 78.96 23.688 102.649 0l434.283-394.803c31.585-31.585 31.585-78.96 7.896-110.545-23.688-23.688-39.481-31.585-63.168-31.585z" />
-<glyph unicode="&#xe912;" glyph-name="arrow-down" data-tags="arrow-down" d="M518.334 167.316c-15.915 0-39.788 7.958-55.702 23.873l-437.659 397.871c-31.83 31.83-31.83 79.574-7.958 111.404 31.83 31.83 79.574 31.83 111.404 7.958l381.956-350.127 381.956 350.127c31.83 31.83 79.574 23.873 111.404-7.958s23.873-79.574-7.958-111.404l-437.659-397.871c0-15.915-23.873-23.873-39.788-23.873z" />
-<glyph unicode="&#xe913;" glyph-name="close" data-tags="close" d="M1003.243 55.93l-392.071 392.071 392.071 392.071c27.676 27.676 27.676 69.189 0 96.865s-69.189 27.676-96.865 0l-396.685-392.071-387.459 392.071c-27.676 23.063-73.802 23.063-101.478 0-23.063-27.676-23.063-73.802 0-101.478l392.071-387.459-392.071-392.071c-27.676-27.676-27.676-69.189 0-96.865s69.189-27.676 96.865 0l392.071 392.071 392.071-392.071c27.676-27.676 69.189-27.676 96.865 0 27.676 23.063 27.676 69.189 4.612 96.865z" />
+<glyph unicode="&#xe900;" glyph-name="lang" data-tags="lang" d="M236.313 782.763c15.899 0 30.239-9.56 36.354-24.236l196.918-472.607c8.369-20.078-1.126-43.137-21.204-51.503s-43.137 1.131-51.503 21.208l-160.566 385.355-160.564-385.355c-8.366-20.078-31.424-29.573-51.502-21.208s-29.573 31.425-21.206 51.503l196.919 472.607c6.115 14.676 20.455 24.236 36.354 24.236zM78.787 428.308c0 21.751 17.633 39.384 39.384 39.384h236.303c21.751 0 39.384-17.633 39.384-39.384s-17.633-39.384-39.384-39.384h-236.303c-21.751 0-39.384 17.632-39.384 39.384zM472.626 507.076c0 21.751 17.632 39.384 39.384 39.384h472.606c21.752 0 39.384-17.633 39.384-39.384s-17.632-39.384-39.384-39.384h-472.606c-21.752 0-39.384 17.633-39.384 39.384zM748.312 664.611c21.752 0 39.384-17.633 39.384-39.384v-118.152c0-21.751-17.632-39.384-39.384-39.384s-39.384 17.633-39.384 39.384v118.152c0 21.751 17.632 39.384 39.384 39.384zM866.464 546.459c21.752 0 39.384-17.633 39.384-39.384 0-51.72-10.188-102.934-29.979-150.714-19.794-47.784-48.805-91.201-85.372-127.773-36.572-36.572-79.988-65.578-127.773-85.372-47.781-19.791-98.995-29.979-150.714-29.979-21.752 0-39.384 17.632-39.384 39.384s17.632 39.384 39.384 39.384c41.376 0 82.348 8.148 120.573 23.985 38.226 15.832 72.959 39.041 102.213 68.295 29.258 29.258 52.467 63.991 68.3 102.217 15.836 38.228 23.985 79.198 23.985 120.573 0 21.751 17.632 39.384 39.384 39.384zM605.723 397.892c-19.845-8.908-28.715-32.212-19.81-52.058 31.085-69.272 81.532-128.084 145.268-169.35s138.037-63.231 213.965-63.247c21.752-0.004 39.388 17.624 39.392 39.376 0.008 21.752-17.624 39.388-39.372 39.392-60.742 0.016-120.188 17.585-171.174 50.6-50.986 33.011-91.343 80.060-116.214 135.476-8.905 19.845-32.208 28.715-52.054 19.81z" />
+<glyph unicode="&#xe901;" glyph-name="tt" data-tags="tt" d="M916.076 628.804c-0.106-96.757-24.042-191.989-69.686-277.212-45.251-92.161-114.563-170.279-200.547-226.032-96.445-61.82-208.488-94.672-322.919-94.672s-226.482 32.852-322.924 94.672c16.698-0.96 33.44-0.96 50.14 0 94.73-0.854 186.86 31.077 260.886 90.415-44.262-0.854-87.469 13.6-122.37 40.94-34.531 25.867-60.093 61.971-73.081 103.207h38.242c18.555 0.302 37.040 2.297 55.233 5.968-46.874 10.525-88.809 36.687-118.968 74.212-31.618 36.694-48.837 83.692-48.439 132.206 28.763-16.783 61.1-26.432 94.325-28.146-27.995 20.275-51.203 46.483-67.981 76.765-17.309 30.698-26.385 65.377-26.344 100.648 0.135 37.168 10.74 73.539 30.592 104.915 51.126-65.225 115.791-118.491 189.501-156.093 74.775-38.1 156.731-59.901 240.493-63.972-1.224 15.898-1.224 31.867 0 47.766 0.193 36.804 9.83 72.936 27.99 104.909s44.227 58.71 75.681 77.625c28.36 16.717 60.328 26.3 93.181 27.933 32.848 1.633 65.606-4.732 95.473-18.552 25.436-11.523 48.493-27.724 67.982-47.765 46.981 9.115 92.088 26.129 133.418 50.325-14.88-48.672-47.303-90.028-90.928-116.001 41.103 5.485 81.19 16.979 118.975 34.118-28.821-42.273-64.431-79.456-105.375-110.033 0.408-9.454-0.45-18.921-2.55-28.146z" />
+<glyph unicode="&#xe902;" glyph-name="yt" data-tags="yt" d="M1005.524 700.242c10.734-51.581 16.922-104.033 18.476-156.732v-191.019c-1.478-53.515-7.662-106.789-18.476-159.181-6.481-21.566-18.063-41.187-33.73-57.146-16.465-16.161-36.605-27.937-58.628-34.282-75.875-13.191-152.719-19.745-229.694-19.595h-342.943c-76.976-0.15-153.821 6.404-229.696 19.595-21.859 6.177-41.78 17.986-57.829 34.282-16.225 15.514-27.9 35.295-33.731 57.146-11.165 52.356-17.617 105.633-19.274 159.181v95.51c0 27.754 0 59.591 0 95.51 1.737 52.73 8.188 105.189 19.274 156.732 5.196 22.819 16.934 43.558 33.731 59.592 16.049 16.3 35.97 28.109 57.829 34.284 75.875 13.19 152.72 19.746 229.696 19.593h342.943c76.976 0.153 153.82-6.404 229.694-19.593 22.023-6.345 42.164-18.122 58.628-34.284 16.216-16.494 27.853-37.053 33.73-59.592zM406.389 292.082l269.849 156.734-269.849 155.101v-311.835z" />
+<glyph unicode="&#xe903;" glyph-name="ig" data-tags="ig" d="M853.332 722.432c0 16.384-8.126 32.768-16.254 40.96-16.254 8.192-24.38 16.384-40.634 16.384s-32.507-8.192-40.634-16.384c-24.38-8.192-24.38-24.576-24.38-40.96s0-32.768 16.254-40.96c8.126-8.192 24.38-16.384 40.634-16.384s32.507 8.192 40.634 16.384c16.254 8.192 24.38 24.576 24.38 40.96zM512 271.873c48.761 0 89.395 16.384 121.902 49.152 32.512 32.768 48.765 73.728 48.765 122.88s-16.254 90.111-48.765 122.879c-32.507 32.768-73.141 49.152-121.902 49.152s-89.397-16.384-121.905-49.152c-32.507-32.768-48.762-73.727-48.762-122.879s16.254-90.112 48.762-122.88c32.507-24.576 73.143-49.152 121.905-49.152zM512 714.24c48.761 0 89.395-8.192 130.029-32.768 40.639-24.576 73.146-57.344 97.526-98.304s32.507-81.92 32.507-131.071c0-49.152-8.126-90.112-32.507-131.072-24.38-49.152-56.887-81.92-97.526-98.304-40.634-24.576-81.268-32.768-130.029-32.768-48.762-8.192-89.397 8.192-130.032 32.768-40.635 16.384-73.143 49.152-97.524 90.112s-32.507 81.92-32.507 131.072c0 49.152 8.126 90.111 32.507 131.071s56.888 73.728 97.524 98.304c40.635 24.576 81.269 40.96 130.032 40.96zM918.352 148.993c8.126 24.576 16.254 65.536 16.254 122.88 0 32.768 0 81.92 0 139.264v73.728c0 65.534 0 106.494 0 139.263 0 57.344-8.126 98.304-16.254 122.88-16.254 49.152-48.765 81.92-97.526 98.304-24.38 8.192-73.141 16.384-130.029 24.576-32.507 0-81.273 0-146.287 0h-65.015c-65.017 0-105.652 0-146.286 0-56.888 0-97.524-8.192-121.905-16.384-48.762-24.576-81.269-57.344-97.524-106.496-8.126-24.576-16.254-65.536-16.254-122.88 0-32.768 0-81.92 0-139.263v-73.728c0-57.344 0-106.496 0-139.264 0-57.344 8.126-98.304 16.254-122.88 16.254-49.152 48.762-81.92 97.524-98.304 24.381-8.192 65.016-16.384 121.905-16.384 32.507 0 81.269 0 146.286 0h73.141c65.015 0 113.78 0 146.287 0 56.887 0 97.522 8.192 121.902 16.384 40.634 16.384 73.141 49.152 97.526 98.304zM1024 656.895c0-40.96 0-114.688 0-212.99 0-98.304 0-172.032 0-212.992s-8.126-81.92-16.254-114.688c-16.254-40.96-32.507-73.728-65.015-98.304-24.38-24.576-65.019-49.152-97.526-65.536-32.507-8.192-73.141-8.192-113.776-16.384-40.634 0-113.78 0-211.302 0-97.524 0-170.666 0-211.301 0s-81.269 8.192-113.778 24.576c-40.635 8.192-73.143 32.768-97.524 57.344s-48.762 65.536-65.016 98.304c-16.254 32.768-24.381 73.728-32.508 114.688 0 40.96 0 114.688 0 212.992 0 106.494 0 172.031 0 221.183 0 40.96 8.127 81.92 16.254 114.688 24.381 32.768 40.635 65.536 73.143 98.304 24.381 24.576 65.016 49.152 97.524 65.536 32.508 8.192 65.016 8.192 113.778 16.384 40.635 0 113.778 0 211.301 0s170.668 0 219.429 0c40.634 0 81.268-8.192 113.776-16.384 40.634-16.384 73.146-32.768 97.526-65.536 24.38-24.576 48.761-65.536 65.015-98.304 8.126-40.96 16.254-73.728 16.254-122.88z" />
+<glyph unicode="&#xe904;" glyph-name="fb" data-tags="fb" d="M0.001 960v-1024h1024v1024h-1024zM744.727 676.073h-83.782c-65.164 0-79.127-32.581-79.127-74.473v-102.4h158.254l-18.618-158.254h-134.982v-404.945h-167.563v404.945h-139.637v158.254h139.637v116.363c0 134.982 83.782 204.8 204.8 204.8 55.855 0 107.054-4.654 121.019-4.654v-139.637z" />
+<glyph unicode="&#xe905;" glyph-name="filter" data-tags="filter" d="M484.602-64h-95.528v516.631l-344.193 426.669v80.7h934.238v-80.239l-327.801-426.664v-343.501l-166.716-173.596zM454.634 4.268h2.813l128.31 133.604v339.167l318.604 414.693h-783.882l334.154-414.233v-473.232z" />
+<glyph unicode="&#xe906;" glyph-name="like" data-tags="like" d="M747.434 765.695c42.548 0 82.261-17.019 113.462-45.385 31.202-31.202 45.385-70.914 45.385-113.462s-17.019-82.261-45.385-113.462l-348.897-348.897-104.953 104.953c-2.836 2.836-5.673 5.673-8.51 5.673-2.836 2.836-5.673 5.673-8.51 8.51l-229.761 229.761c-31.202 31.202-45.385 70.914-45.385 113.462s17.019 82.261 45.385 113.462c31.202 28.365 70.914 45.385 113.462 45.385s82.261-17.019 113.462-45.385l124.809-124.809 124.809 124.809c28.365 28.365 68.077 45.385 110.626 45.385zM747.434 879.157c-70.914 0-138.992-25.529-192.886-79.423l-45.385-45.385-45.385 45.385c-51.058 53.894-119.135 79.423-190.050 79.423s-138.992-25.529-192.886-79.423c-107.79-107.79-107.79-277.983 0-385.773l224.089-224.089c2.836-5.673 8.51-8.51 14.183-14.183s8.51-8.51 14.183-14.183l119.135-119.135c17.019-17.019 39.712-25.529 59.568-25.529 22.693 0 42.548 8.51 59.568 25.529l371.59 371.59c107.79 107.79 107.79 277.983 0 385.773-53.894 53.894-124.809 79.423-195.723 79.423v0z" />
+<glyph unicode="&#xe907;" glyph-name="liked" data-tags="liked" d="M943.879 799.839c106.828-106.827 106.828-280.029 0-386.854l-45.025-45.025 0.476-0.476-326.405-326.405c-33.386-33.386-87.515-33.386-120.9 0l-119.795 119.795c-4.826 4.196-9.54 8.592-14.132 13.183s-8.988 9.307-13.186 14.135l-224.792 224.794c-106.827 106.825-106.827 280.027 0 386.854s280.026 106.827 386.854 0l45.025-45.025 45.025 45.025c106.828 106.827 280.027 106.827 386.855 0z" />
+<glyph unicode="&#xe908;" glyph-name="prev" data-tags="prev" d="M211.532 486.924c-25.572-19.179-25.572-63.929 0-83.108l671.258-460.291c31.965-19.179 76.715 0 76.715 38.358v926.975c0 38.358-44.751 63.929-76.715 38.358l-671.258-460.291zM128.424 960v0c-38.358 0-63.929-25.572-63.929-63.929v-895.010c0-38.358 25.572-63.929 63.929-63.929v0c38.358 0 63.929 25.572 63.929 63.929v895.010c0 38.358-25.572 63.929-63.929 63.929z" />
+<glyph unicode="&#xe909;" glyph-name="next" data-tags="next" d="M812.468 486.923c25.572-19.179 25.572-63.929 0-83.108l-671.258-460.291c-31.965-19.179-76.715 0-76.715 38.358v926.975c0 38.358 44.751 63.929 76.715 38.358l671.258-460.291zM895.576 960v0c38.358 0 63.929-25.572 63.929-63.929v-895.010c0-38.358-25.572-63.929-63.929-63.929v0c-38.358 0-63.929 25.572-63.929 63.929v895.010c0 38.358 25.572 63.929 63.929 63.929z" />
+<glyph unicode="&#xe90a;" glyph-name="audio" data-tags="audio" d="M52.349 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM971.651 89.217c-30.643 0-51.072 20.429-51.072 51.072v306.434c0 30.643 20.429 51.072 51.072 51.072s51.072-20.429 51.072-51.072v-306.434c0-30.643-20.429-51.072-51.072-51.072zM869.506-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM869.506 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM154.494-64c-86.823 0-153.217 66.394-153.217 153.217v255.362c0 86.823 66.394 153.217 153.217 153.217s153.217-66.394 153.217-153.217v-255.362c0-86.823-66.394-153.217-153.217-153.217zM154.494 395.651c-30.643 0-51.072-20.429-51.072-51.072v-255.362c0-30.643 20.429-51.072 51.072-51.072s51.072 20.429 51.072 51.072v255.362c0 30.643-20.429 51.072-51.072 51.072zM1022.724 446.723h-102.145c0 56.179-10.214 107.252-30.643 158.324s-51.072 91.93-86.823 132.788c-35.75 35.75-81.716 66.394-132.788 86.823-102.145 40.858-214.504 40.858-311.542 0-51.072-20.429-91.93-51.072-132.788-86.823-40.858-40.858-71.502-86.823-91.93-132.788-20.429-51.072-30.643-102.145-30.643-158.324h-102.145c0 66.394 15.322 132.788 40.858 194.075s61.287 117.466 107.252 168.538c45.965 45.965 102.145 86.823 163.431 112.359 122.574 51.072 265.576 51.072 393.257 0 61.287-25.536 117.466-61.287 163.431-112.359s86.823-102.145 112.359-163.431c25.536-66.394 40.858-132.788 40.858-199.182z" />
+<glyph unicode="&#xe90b;" glyph-name="picture" data-tags="picture" d="M80.842 906.105h107.789v-808.421h-107.789v808.421zM80.842 960h862.316v-107.789h-862.316v107.789zM80.842 205.474h808.421v-107.789h-808.421v107.789zM835.368 906.105h107.789v-808.421h-107.789v808.421zM727.579 421.053h-161.684c-91.621 0-161.684 70.063-161.684 161.684v53.895c0 91.621 70.063 161.684 161.684 161.684s161.684-70.063 161.684-161.684v-215.579zM565.895 690.526c-32.337 0-53.895-21.558-53.895-53.895v-53.895c0-32.337 21.558-53.895 53.895-53.895h53.895v107.789c0 32.337-21.558 53.895-53.895 53.895zM619.789 97.684h-215.579c-59.284 0-107.789 48.505-107.789 107.789v91.621c0 129.347 102.4 231.747 231.747 231.747h199.411v-323.368c0-59.284-48.505-107.789-107.789-107.789zM441.937 243.2h145.516v145.516h-53.895c-48.505 0-91.621-37.726-91.621-91.621v-53.895zM458.105 97.684h107.789v-161.684h-107.789v161.684zM242.526 97.684h107.789l-107.789-161.684h-107.789l107.789 161.684zM781.474 97.684h-107.789l107.789-161.684h107.789l-107.789 161.684z" />
+<glyph unicode="&#xe90c;" glyph-name="book" data-tags="book" d="M934.956-64h-712.348c-75.687 0-133.565 57.878-133.565 133.565s57.878 133.565 133.565 133.565h712.348v-267.13zM222.608 114.087c-26.713 0-44.522-17.809-44.522-44.522s17.809-44.522 44.522-44.522h623.304v89.043h-623.304zM178.086 69.565h-89.043v756.87c0 75.687 57.878 133.565 133.565 133.565h712.348v-801.391h-89.043v712.348h-623.304c-26.713 0-44.522-17.809-44.522-44.522v-756.87zM756.869 425.739h-445.217v311.652h445.217v-311.652zM400.695 514.783h267.13v133.565h-267.13v-133.565z" />
+<glyph unicode="&#xe90d;" glyph-name="book-alt" data-tags="book-alt" d="M938.666 960.001h-659.911c-108.089 0-193.422-85.333-193.422-193.422v-659.911c0 0 0 0 0 0 0-91.023 79.645-170.666 170.666-170.666h682.667v1024zM278.755 846.222h546.133v-568.889h-568.889c-22.756 0-39.822-5.688-56.889-11.378v500.623c0 45.511 34.134 79.645 79.645 79.645zM824.889 49.778h-568.889c-28.444 0-56.889 22.756-56.889 56.889 0 17.066 5.688 28.444 17.066 39.822s22.756 17.066 39.822 17.066h568.889v-113.777zM312.888 732.445h398.222v-56.889h-398.222v56.889zM312.888 618.666h284.445v-56.889h-284.445v56.889z" />
+<glyph unicode="&#xe90e;" glyph-name="eye" data-tags="eye" d="M65.422 442.311l-48.356 28.444-17.067-28.444 17.067-28.444 48.356 28.444zM958.578 442.311l48.356-28.444 17.067 28.444-17.067 28.444-48.356-28.444zM116.622 416.711c76.8 136.533 224.711 230.4 395.378 230.4v113.778c-213.333 0-398.222-116.622-494.933-290.133l99.556-54.044zM512 647.111c170.667 0 318.578-93.867 395.378-230.4l99.556 56.889c-96.711 170.667-281.6 287.289-494.933 287.289v-113.778zM910.222 470.756c-79.644-130.844-227.556-221.867-398.222-221.867v-113.778c210.489 0 398.222 110.933 494.933 278.756l-96.711 56.889zM512 248.889c-170.667 0-318.578 91.022-398.222 221.867l-99.556-56.889c99.556-167.822 287.289-278.756 497.778-278.756v113.778zM520.533 192c-142.222 0-256 113.778-256 256s113.778 256 256 256c142.222 0 256-113.778 256-256s-113.778-256-256-256zM520.533 647.111c-110.933 0-199.111-88.178-199.111-199.111s88.178-199.111 199.111-199.111c110.933 0 199.111 88.178 199.111 199.111s-88.178 199.111-199.111 199.111zM577.422 448c0-31.419-25.47-56.889-56.889-56.889s-56.889 25.47-56.889 56.889c0 31.419 25.47 56.889 56.889 56.889s56.889-25.47 56.889-56.889z" />
+<glyph unicode="&#xe90f;" glyph-name="play" data-tags="play" d="M901.518 489.138c30.853-20.569 30.853-61.706 0-82.274l-719.901-462.794c-35.995-20.569-82.274 0-82.274 41.137v925.587c0 41.137 46.279 61.706 82.274 41.137l719.901-462.794z" />
+<glyph unicode="&#xe910;" glyph-name="pause" data-tags="pause" d="M155.826 960h222.609v-1024h-222.609v1024zM645.565 960h222.609v-1024h-222.609v1024z" />
+<glyph unicode="&#xe911;" glyph-name="volume" data-tags="volume" d="M714.418 281.676v47.628c33.34 0 61.916 14.288 85.73 33.34 23.814 23.814 33.34 52.391 33.34 85.73s-14.288 61.916-33.34 85.73c-23.814 23.814-52.391 33.34-85.73 33.34v47.628c42.865 0 85.73-19.051 119.070-47.628 33.34-33.34 47.628-76.205 47.628-119.070s-19.051-85.73-47.628-119.070c-33.34-28.577-76.205-47.628-119.070-47.628zM714.418 138.792v47.628c71.442 0 138.121 28.577 185.749 76.205s76.205 114.307 76.205 185.749c0 71.442-28.577 138.121-76.205 185.749s-114.307 76.205-185.749 76.205v47.628c80.967 0 161.935-33.34 219.088-90.493s90.493-138.121 90.493-219.088-33.34-161.935-90.493-219.088c-57.153-57.153-138.121-90.493-219.088-90.493zM500.093 824.634l-309.581-185.749h-95.256c-52.391 0-95.256-42.865-95.256-95.256v-190.512c0-52.391 42.865-95.256 95.256-95.256h95.256l309.581-185.749c28.577-14.288 71.442 0 71.442 28.577v690.605c0 28.577-42.865 47.628-71.442 33.34z" />
+<glyph unicode="&#xe912;" glyph-name="mute" data-tags="mute" d="M461.2 795.344l-285.504-171.303h-87.848c-48.316 0-87.848-39.531-87.848-87.848v-175.695c0-48.316 39.531-87.848 87.848-87.848h87.848l285.504-171.303c26.354-13.177 65.886 0 65.886 26.354v636.894c0 26.354-39.531 43.924-65.886 30.747zM641.982 609.845l31.058 31.058 350.961-350.961-31.058-31.058-350.961 350.961zM641.982 286.838l350.961 350.961 31.058-31.058-350.961-350.961-31.058 31.058z" />
+<glyph unicode="&#xe913;" glyph-name="quote" data-tags="quote" d="M1024 613.025c0 62.061-22.053 114.718-66.157 157.972-44.106 43.254-97.798 64.882-161.078 64.882-63.283 0-117.934-21.627-163.955-64.882-44.106-43.254-66.16-95.912-66.16-157.972 0-60.18 16.3-112.838 48.901-157.972 32.597-43.256 79.58-64.881 140.943-64.881-19.177-69.585-62.321-157.032-129.437-262.349-3.835-3.761-5.753-8.462-5.753-14.103s5.753-14.106 17.259-25.389c13.421-13.163 28.762-19.748 46.021-19.748h2.877c19.177 0 37.395 8.465 54.651 25.389 61.366 56.419 136.152 152.331 224.362 287.735 36.433 58.3 55.609 133.526 57.527 225.676v5.642zM457.349 604.563c0 62.061-22.053 114.718-66.16 157.972-44.103 43.254-97.796 64.882-161.077 64.882s-117.933-21.627-163.955-64.882c-44.105-43.254-66.157-94.971-66.157-155.152 0-62.061 16.3-114.718 48.899-157.971 32.599-45.137 79.581-67.705 140.944-67.705-19.176-69.582-62.322-157.032-129.438-262.346-3.835-3.761-5.753-8.462-5.753-14.103 0-5.644 5.753-15.047 17.258-28.21 13.423-11.286 28.764-16.927 46.022-16.927h2.877c19.176 0 37.393 8.462 54.652 25.389 61.363 56.419 136.149 152.331 224.359 287.735 36.436 58.3 55.613 133.523 57.53 225.675v5.642z" />
+<glyph unicode="&#xe914;" glyph-name="search" data-tags="search" d="M447.767 66.327c-245.76 0-446.836 201.077-446.836 446.836s201.077 446.836 446.836 446.836c245.76 0 446.836-201.077 446.836-446.836s-201.077-446.836-446.836-446.836zM447.767 848.291c-186.182 0-335.128-148.946-335.128-335.128s148.946-335.128 335.128-335.128c186.182 0 335.128 148.946 335.128 335.128s-148.946 335.128-335.128 335.128zM969.076-64c-14.895 0-29.789 3.723-40.96 14.895l-223.419 223.419c-22.342 22.342-22.342 55.854 0 78.196s55.854 22.342 78.196 0l223.419-223.419c22.342-22.342 22.342-55.854 0-78.196-7.447-11.17-22.342-14.895-37.236-14.895z" />
+<glyph unicode="&#xe915;" glyph-name="acc-1" data-tags="acc-1" d="M511.063 959.999c143.218 0 265.157-50.001 365.718-149.954 48.132-48.145 84.724-103.17 109.714-165.027 24.978-61.873 37.506-127.537 37.506-197.027 0-70.097-12.367-135.778-37.025-197.010-24.686-61.251-61.121-115.361-109.249-162.292-49.967-49.361-106.657-87.17-170.067-113.376-63.378-26.21-128.914-39.314-196.565-39.314-67.647 0-132.416 12.93-194.289 38.865-61.857 25.888-117.33 63.378-166.403 112.435-49.073 49.054-86.401 104.385-112.002 165.955-25.6 61.566-38.401 126.464-38.401 194.737 0 67.667 12.944 132.722 38.849 195.203s63.553 118.402 112.914 167.779c97.521 99.33 217.283 149.026 359.3 149.026zM512.922 867.647c-117.027 0-215.477-40.849-295.334-122.514-40.24-40.849-71.169-86.705-92.802-137.602-21.664-50.896-32.464-104.081-32.464-159.554 0-54.867 10.8-107.744 32.464-158.61 21.649-50.928 52.561-96.339 92.802-136.259 40.225-39.936 85.617-70.384 136.242-91.443 50.576-21.024 103.619-31.535 159.092-31.535 54.847 0 108 10.642 159.571 31.984 51.503 21.362 97.934 52.114 139.41 92.337 79.84 78.017 119.745 175.844 119.745 293.51 0 56.69-10.37 110.32-31.090 160.914-20.689 50.593-50.881 95.682-90.463 135.33-82.337 82.289-181.366 123.442-297.173 123.442zM506.502 533l-68.592-35.663c-7.326 15.214-16.301 25.903-26.959 32-10.673 6.081-20.577 9.137-29.729 9.137-45.696 0-68.577-30.161-68.577-90.514 0-27.424 5.792-49.345 17.36-65.808 11.584-16.467 28.656-24.706 51.217-24.706 29.871 0 50.898 14.639 63.104 43.89l63.074-32.004c-13.407-25.005-32-44.654-55.776-58.975-23.745-14.336-49.967-21.488-78.625-21.488-45.713 0-82.609 14.001-110.642 42.063-28.033 28.034-42.049 67.040-42.049 117.012 0 48.766 14.176 87.457 42.513 116.114 28.336 28.64 64.145 42.976 107.442 42.976 63.41 0.032 108.801-24.656 136.24-74.034zM801.819 533l-67.663-35.663c-7.314 15.214-16.321 25.903-26.978 32-10.689 6.081-20.913 9.137-30.625 9.137-45.71 0-68.592-30.161-68.592-90.514 0-27.424 5.809-49.345 17.376-65.808 11.567-16.467 28.625-24.706 51.216-24.706 29.842 0 50.881 14.639 63.059 43.89l64-32.004c-14.001-25.005-32.91-44.654-56.655-58.975-23.776-14.336-49.684-21.488-77.714-21.488-46.336 0-83.346 14.001-111.057 42.063-27.778 28.034-41.633 67.040-41.633 117.012 0 48.766 14.159 87.457 42.528 116.114 28.321 28.64 64.13 42.976 107.41 42.976 63.393 0.032 108.528-24.656 135.329-74.034z" />
+<glyph unicode="&#xe916;" glyph-name="acc-2" data-tags="acc-2" d="M511.121 960c138.279 0 254.925-49.36 349.877-148.112 95.508-99.36 143.309-220.656 143.309-363.888 0-143.856-46.907-263.617-140.694-359.298-99.631-101.805-217.123-152.702-352.492-152.702-133.060 0-248.506 50.306-346.368 150.879-96.692 100.576-145.061 220.928-145.061 361.121 0 140.176 48.369 261.472 145.061 363.872 94.954 98.768 210.385 148.128 346.368 148.128zM512.877 867.648c-111.94 0-206.586-40.848-283.955-122.512-80.308-85.344-120.446-184.402-120.446-297.152 0-113.376 39.846-211.519 119.538-294.368 79.708-82.912 174.646-124.337 284.832-124.337 109.584 0 205.139 41.712 286.598 125.251 77.371 77.407 116.047 175.23 116.047 293.486 0 116.417-39.274 215.44-117.784 297.136-78.525 81.664-173.477 122.496-284.83 122.496zM644.753 575.088v-209.358h-56.245v-248.674h-152.986v248.659h-56.246v209.374c0 9.152 3.077 16.912 9.215 23.312 6.169 6.384 13.646 9.6 22.415 9.6h202.216c8.2 0 15.537-3.2 21.969-9.6 6.416-6.4 9.661-14.176 9.661-23.312zM443.415 706.736c0 48.128 22.847 72.224 68.584 72.224s68.569-24.064 68.569-72.224c0-47.536-22.863-71.312-68.569-71.312s-68.584 23.776-68.584 71.312z" />
+<glyph unicode="&#xe917;" glyph-name="acc-3" data-tags="acc-3" d="M511.087 960c143.218 0 264.499-49.68 363.874-149.040 99.328-98.752 149.039-219.728 149.039-362.96 0-143.265-48.786-263.314-146.322-360.224-102.991-101.183-225.213-151.776-366.592-151.776-138.382 0-258.446 50.286-360.222 150.863-100.56 100.561-150.864 220.912-150.864 361.121 0 139.568 50.304 260.56 150.864 362.96 99.344 99.376 219.424 149.056 360.222 149.056zM512.915 867.648c-116.417 0-214.85-41.152-295.314-123.44-83.52-84.736-125.264-183.474-125.264-296.208 0-113.999 41.44-212.114 124.32-294.4 82.896-82.912 181.633-124.337 296.222-124.337 113.971 0 213.346 41.744 298.067 125.251 80.463 78.013 120.686 175.837 120.686 293.486 0 117.008-40.846 215.76-122.494 296.208-81.073 82.32-179.826 123.44-296.224 123.44zM284.337 520.239c9.744 62.785 35.024 111.393 75.872 145.825 40.834 34.432 90.498 51.648 149.023 51.648 80.431 0 144.463-25.92 192-77.696 47.537-51.808 71.314-118.257 71.314-199.314 0-78.639-24.69-143.998-74.031-196.096-49.408-52.094-113.376-78.175-192.035-78.175-57.903 0-107.886 17.361-149.934 52.114-42.064 34.749-67.344 84.11-75.888 148.11h128.944c3.040-62.176 40.527-93.263 112.463-93.263 35.938 0 64.914 15.553 86.851 46.624 21.965 31.071 32.941 72.543 32.941 124.337 0 54.256-10.063 95.535-30.161 123.887-20.126 28.336-49.054 42.512-86.879 42.512-68.289 0-106.673-30.16-115.2-90.497h37.49l-101.474-101.486-101.488 101.486 40.192-0.016z" />
+<glyph unicode="&#xe918;" glyph-name="all" data-tags="all" d="M512.001-60.661c-17.809 0-35.617 4.452-48.974 17.809-26.713 26.713-26.713 66.783 0 93.496l396.243 396.243-396.243 396.243c-26.713 26.713-26.713 66.783 0 93.496s66.783 26.713 93.496 0l445.217-445.217c26.713-26.713 26.713-66.783 0-93.496l-445.217-445.217c-8.904-8.904-26.713-13.357-44.522-13.357zM957.218 384.557h-890.435c-35.617 0-66.783 31.165-66.783 66.783s31.165 66.783 66.783 66.783h890.435c35.617 0 66.783-31.165 66.783-66.783s-31.165-66.783-66.783-66.783z" />
+<glyph unicode="&#xe919;" glyph-name="arrow-left" data-tags="arrow-left" d="M707.048-64l-503.873 512 503.873 512 113.778-113.778-390.095-398.222 390.095-398.222z" />
+<glyph unicode="&#xe91a;" glyph-name="arrow-right" data-tags="arrow-right" d="M316.953-64l-113.778 113.778 390.095 398.222-390.095 398.222 113.778 113.778 503.873-512z" />
+<glyph unicode="&#xe91b;" glyph-name="arrow-up" data-tags="arrow-up" d="M943.944 170.652c-15.792 0-39.481 7.896-55.272 23.688l-379.010 339.531-379.010-339.531c-31.585-31.585-78.96-23.688-110.545 7.896s-23.688 78.96 7.896 110.545l434.283 394.803c31.585 23.688 78.96 23.688 102.649 0l434.283-394.803c31.585-31.585 31.585-78.96 7.896-110.545-23.688-23.688-39.481-31.585-63.168-31.585z" />
+<glyph unicode="&#xe91c;" glyph-name="arrow-down" data-tags="arrow-down" d="M518.334 167.316c-15.915 0-39.788 7.958-55.702 23.873l-437.659 397.871c-31.83 31.83-31.83 79.574-7.958 111.404 31.83 31.83 79.574 31.83 111.404 7.958l381.956-350.127 381.956 350.127c31.83 31.83 79.574 23.873 111.404-7.958s23.873-79.574-7.958-111.404l-437.659-397.871c0-15.915-23.873-23.873-39.788-23.873z" />
+<glyph unicode="&#xe91d;" glyph-name="close" data-tags="close" d="M1003.243 55.93l-392.071 392.071 392.071 392.071c27.676 27.676 27.676 69.189 0 96.865s-69.189 27.676-96.865 0l-396.685-392.071-387.459 392.071c-27.676 23.063-73.802 23.063-101.478 0-23.063-27.676-23.063-73.802 0-101.478l392.071-387.459-392.071-392.071c-27.676-27.676-27.676-69.189 0-96.865s69.189-27.676 96.865 0l392.071 392.071 392.071-392.071c27.676-27.676 69.189-27.676 96.865 0 27.676 23.063 27.676 69.189 4.612 96.865z" />

 </font></defs></svg>
\ No newline at end of file
 </font></defs></svg>
\ No newline at end of file

diff --git a/src/wolnelektury/static/2022/fonts/wl.ttf b/src/wolnelektury/static/2022/fonts/wl.ttf
index afc7806..b527ae5 100644 (file)
Binary files a/src/wolnelektury/static/2022/fonts/wl.ttf and b/src/wolnelektury/static/2022/fonts/wl.ttf differ

diff --git a/src/wolnelektury/static/2022/fonts/wl.woff b/src/wolnelektury/static/2022/fonts/wl.woff
index ec958c5..23c0a99 100644 (file)
Binary files a/src/wolnelektury/static/2022/fonts/wl.woff and b/src/wolnelektury/static/2022/fonts/wl.woff differ

diff --git a/src/wolnelektury/static/2022/images/approval.svg b/src/wolnelektury/static/2022/images/approval.svg
new file mode 100644 (file)
index 0000000..1f27888
--- /dev/null
+++ b/src/wolnelektury/static/2022/images/approval.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L9.11761 1.30434L9.99996 9.99996L0.882349 8.69562L0 0Z" fill="#92BD39"/>
+<path d="M20 0L10.8824 1.30434L10 9.99996L19.1177 8.69562L20 0Z" fill="#FBC40F"/>
+<path d="M0 19.999L9.11761 18.6947L9.99996 9.99906L0.882349 11.3034L0 19.999Z" fill="#E61E26"/>
+<path d="M20 19.999L10.8824 18.6947L10 9.99906L19.1177 11.3034L20 19.999Z" fill="#007880"/>
+</svg>

diff --git a/src/wolnelektury/static/2022/images/check.svg b/src/wolnelektury/static/2022/images/check.svg
new file mode 100644 (file)
index 0000000..7c9cb2a
--- /dev/null
+++ b/src/wolnelektury/static/2022/images/check.svg
@@ -0,0 +1 @@
+<svg width="21" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 7.5L7.667 13 19 2" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file

diff --git a/src/wolnelektury/static/2022/images/checkout-footer.png b/src/wolnelektury/static/2022/images/checkout-footer.png
new file mode 100644 (file)
index 0000000..6a9ce69
Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-footer.png differ

diff --git a/src/wolnelektury/static/2022/images/checkout-img-1.jpg b/src/wolnelektury/static/2022/images/checkout-img-1.jpg
new file mode 100644 (file)
index 0000000..06b120b
Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-img-1.jpg differ

diff --git a/src/wolnelektury/static/2022/images/checkout-img-2.jpg b/src/wolnelektury/static/2022/images/checkout-img-2.jpg
new file mode 100644 (file)
index 0000000..5ad3ae7
Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-img-2.jpg differ

diff --git a/src/wolnelektury/static/2022/images/checkout-img-3.jpg b/src/wolnelektury/static/2022/images/checkout-img-3.jpg
new file mode 100644 (file)
index 0000000..d3bac01
Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-img-3.jpg differ

diff --git a/src/wolnelektury/static/2022/images/copy.svg b/src/wolnelektury/static/2022/images/copy.svg
new file mode 100644 (file)
index 0000000..42a5a58
--- /dev/null
+++ b/src/wolnelektury/static/2022/images/copy.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z" fill="#E1F1F2"/>
+<rect x="15.5" y="10.5" width="12" height="17" rx="1.5" fill="#E1F1F2" stroke="#007880"/>
+<rect x="12.5" y="13.5" width="12" height="17" rx="1.5" fill="#E1F1F2" stroke="#007880"/>
+</svg>

diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss
index 604c24d..fcde582 100644 (file)
--- a/src/wolnelektury/static/2022/more.scss
+++ b/src/wolnelektury/static/2022/more.scss
@@ -1,3 +1,21 @@
+.l-books {
+    margin-right: -17px;
+}
+.l-books__grid {
+    margin-right: -17px;
+}
+

 .l-books__item {
     width: 212px;
 .l-books__item {
     width: 212px;

+
+    margin-right: 17px !important; // reverse the 5n+5 rule.
+
+    transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms;
+}
+
+
+.by-popularity {
+    .l-books__item {
+        order: attr(data-pop);
+    }

 }
 }

diff --git a/src/wolnelektury/static/2022/styles/base/_icons.scss b/src/wolnelektury/static/2022/styles/base/_icons.scss
index 4ba1924..924484f 100644 (file)
--- a/src/wolnelektury/static/2022/styles/base/_icons.scss
+++ b/src/wolnelektury/static/2022/styles/base/_icons.scss
@@ -5,26 +5,36 @@
 $icomoon-font-family: "wl" !default;
 $icomoon-font-path:   "../fonts" !default;
 
 $icomoon-font-family: "wl" !default;
 $icomoon-font-path:   "../fonts" !default;
 

-$icon-liked: "\e900";
-$icon-audio: "\e903";
-$icon-book: "\e904";
-$icon-eye: "\e905";
-$icon-prev: "\e901";
-$icon-next: "\e902";
-$icon-play: "\e906";
-$icon-pause: "\e907";
-$icon-volume: "\e908";
-$icon-mute: "\e909";
-$icon-quote: "\e90a";
-$icon-search: "\e90b";
-$icon-acc-1: "\e90c";
-$icon-acc-2: "\e90d";
-$icon-acc-3: "\e90e";
-$icon-all: "\e90f";
-$icon-arrow-right: "\e910";
-$icon-arrow-up: "\e911";
-$icon-arrow-down: "\e912";
-$icon-close: "\e913";
+$icon-lang: "\e900";
+$icon-tt: "\e901";
+$icon-yt: "\e902";
+$icon-ig: "\e903";
+$icon-fb: "\e904";
+$icon-filter: "\e905";
+$icon-like: "\e906";
+$icon-liked: "\e907";
+$icon-prev: "\e908";
+$icon-next: "\e909";
+$icon-audio: "\e90a";
+$icon-picture: "\e90b";
+$icon-book: "\e90c";
+$icon-book-alt: "\e90d";
+$icon-eye: "\e90e";
+$icon-play: "\e90f";
+$icon-pause: "\e910";
+$icon-volume: "\e911";
+$icon-mute: "\e912";
+$icon-quote: "\e913";
+$icon-search: "\e914";
+$icon-acc-1: "\e915";
+$icon-acc-2: "\e916";
+$icon-acc-3: "\e917";
+$icon-all: "\e918";
+$icon-arrow-left: "\e919";
+$icon-arrow-right: "\e91a";
+$icon-arrow-up: "\e91b";
+$icon-arrow-down: "\e91c";
+$icon-close: "\e91d";

 
 @font-face {
   font-family: '#{$icomoon-font-family}';
 
 @font-face {
   font-family: '#{$icomoon-font-family}';


@@ -52,24 +62,44 @@ $icon-close: "\e913";
   -moz-osx-font-smoothing: grayscale;
 }
 
   -moz-osx-font-smoothing: grayscale;
 }
 

-.icon-liked {
+.icon-lang {

   &:before {
   &:before {

-    content: $icon-liked;
+    content: $icon-lang;

   }
 }
   }
 }

-.icon-audio {
+.icon-tt {

   &:before {
   &:before {

-    content: $icon-audio;
+    content: $icon-tt;

   }
 }
   }
 }

-.icon-book {
+.icon-yt {

   &:before {
   &:before {

-    content: $icon-book;
+    content: $icon-yt;

   }
 }
   }
 }

-.icon-eye {
+.icon-ig {

   &:before {
   &:before {

-    content: $icon-eye;
+    content: $icon-ig;
+  }
+}
+.icon-fb {
+  &:before {
+    content: $icon-fb;
+  }
+}
+.icon-filter {
+  &:before {
+    content: $icon-filter;
+  }
+}
+.icon-like {
+  &:before {
+    content: $icon-like;
+  }
+}
+.icon-liked {
+  &:before {
+    content: $icon-liked;

   }
 }
 .icon-prev {
   }
 }
 .icon-prev {


@@ -82,12 +112,36 @@ $icon-close: "\e913";
     content: $icon-next;
   }
 }
     content: $icon-next;
   }
 }

+.icon-audio {
+  &:before {
+    content: $icon-audio;
+  }
+}
+.icon-picture {
+  &:before {
+    content: $icon-picture;
+  }
+}
+.icon-book {
+  &:before {
+    content: $icon-book;
+  }
+}
+.icon-book-alt {
+  &:before {
+    content: $icon-book-alt;
+  }
+}
+.icon-eye {
+  &:before {
+    content: $icon-eye;
+  }
+}

 .icon-play {
   &:before {
     content: $icon-play;
   }
 }
 .icon-play {
   &:before {
     content: $icon-play;
   }
 }

-.jp-state-playing .icon-play,

 .icon-pause {
   &:before {
     content: $icon-pause;
 .icon-pause {
   &:before {
     content: $icon-pause;


@@ -98,7 +152,6 @@ $icon-close: "\e913";
     content: $icon-volume;
   }
 }
     content: $icon-volume;
   }
 }

-.jp-state-muted .icon-volume,

 .icon-mute {
   &:before {
     content: $icon-mute;
 .icon-mute {
   &:before {
     content: $icon-mute;


@@ -134,6 +187,11 @@ $icon-close: "\e913";
     content: $icon-all;
   }
 }
     content: $icon-all;
   }
 }

+.icon-arrow-left {
+  &:before {
+    content: $icon-arrow-left;
+  }
+}

 .icon-arrow-right {
   &:before {
     content: $icon-arrow-right;
 .icon-arrow-right {
   &:before {
     content: $icon-arrow-right;

diff --git a/src/wolnelektury/static/2022/styles/components/_checkbox.scss b/src/wolnelektury/static/2022/styles/components/_checkbox.scss
new file mode 100644 (file)
index 0000000..ad093a6
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/components/_checkbox.scss
@@ -0,0 +1,54 @@
+/* ------------------------------
+    Component: Checkbox
+------------------------------ */
+
+.c-checkbox {
+    display: flex;
+    margin-bottom: 14px;
+
+    input {
+       opacity: 0;
+       width: 0; height: 0;
+       position: absolute;
+       visibility: hidden;
+    }
+
+    input + label {
+       &:before {
+               content: '';
+               margin-top: 2px;
+               vertical-align: middle;
+               width: 20px;
+               min-width: 20px;
+               height: 20px;
+               margin-right: 20px;
+               text-align: center;
+               display: block;
+        background: #E1F1F2;
+        border: 2px solid #083F4D;
+        box-sizing: border-box;
+        border-radius: 3px;
+       }
+    }
+
+    input:checked + label {
+       &:before {
+        background: #083F4D url(../images/check.svg) center no-repeat;
+        background-size: 12px;
+       }
+    }
+
+    label {
+       display: flex;
+       cursor: pointer;
+
+       p {
+               margin-top: 0;
+        color: #083F4D;
+               @include font-size(15px);
+        line-height: 150%;
+        span {color: #FF4C54; margin-left: -10px;}
+       }
+    }
+}
+

diff --git a/src/wolnelektury/static/2022/styles/components/_lang.scss b/src/wolnelektury/static/2022/styles/components/_lang.scss
new file mode 100644 (file)
index 0000000..7ca9114
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/components/_lang.scss
@@ -0,0 +1,65 @@
+.c-lang {
+  position: absolute;
+  top: 23px;
+  margin-right: 217px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 350ms $ease-out;
+  z-index: $master-layer + 1;
+
+  &.is-open {
+    .c-lang__button {
+      .icon-arrow-down {
+        transform: rotate(-180deg);
+      }
+    }
+    .c-lang__list {
+      transform: none;
+      opacity: 1;
+      pointer-events: all;
+    }
+  }
+}
+
+.c-lang__button {
+  display: flex;
+  align-items: center;
+  color: $color-white;
+  cursor: pointer;
+
+  .icon-lang {
+    color: #92BD39;
+    @include font-size(26px);
+    margin-right: 8px;
+  }
+
+  .icon-arrow-down {
+    margin-left: 8px;
+    transition: transform 350ms $ease-out;
+  }
+}
+
+.c-lang__list {
+  margin-top: 10px;
+  border-radius: 10px;
+  background-color: #F7BA00;
+  overflow: hidden;
+  transform: translateY(-10px);
+  opacity: 0;
+  transition: all 350ms $ease-out;
+  pointer-events: none;
+  a {
+    display: block;
+    padding: 9px 20px;
+    color: #474747;
+
+    &:hover {
+      background-color: #EDAA00;
+    }
+
+    &.is-active {
+      font-weight: $semibold;
+      background-color: #EDAA00;
+    }
+  }
+}
\ No newline at end of file

diff --git a/src/wolnelektury/static/2022/styles/components/_module.scss b/src/wolnelektury/static/2022/styles/components/_module.scss
index dfbb209..d0ce78b 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_module.scss
+++ b/src/wolnelektury/static/2022/styles/components/_module.scss
@@ -8,5 +8,6 @@
 @import "media";
 @import "player";
 @import "support";
 @import "media";
 @import "player";
 @import "support";

-//@import "checkbox";
+@import "checkbox";

 @import "select";
 @import "select";

+@import "lang";

diff --git a/src/wolnelektury/static/2022/styles/layout/_author.scss b/src/wolnelektury/static/2022/styles/layout/_author.scss
index 55483bf..1156cdd 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_author.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_author.scss
@@ -180,3 +180,42 @@
   max-width: 336px;
   outline: 0;
 }
   max-width: 336px;
   outline: 0;
 }

+
+
+.l-author__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid #D9D9D9;
+  padding-bottom: 22px;
+
+  figure {
+    padding: 0;
+    font-size: 0;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin: 0 12px 0 0;
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  h1 {
+    font-weight: $bold;
+    font-size: 37px;
+    line-height: 130%;
+    letter-spacing: -0.01em;
+    color: #083F4D;
+    margin: 0;
+
+    span {
+      font-weight: $regular;
+    }
+  }
+}

diff --git a/src/wolnelektury/static/2022/styles/layout/_books.scss b/src/wolnelektury/static/2022/styles/layout/_books.scss
index ba191a8..70a6e31 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_books.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_books.scss
@@ -26,16 +26,16 @@
   background: #FFFFFF;
   border-radius: 9px;
   padding: 21px;
   background: #FFFFFF;
   border-radius: 9px;
   padding: 21px;

-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0);

 
   transition: all $ease-dynamic 350ms;
 
   &:not(:last-child) {
 
   transition: all $ease-dynamic 350ms;
 
   &:not(:last-child) {

-    margin-right: 20px;
+    margin-right: 17px;

   }
 
   &:hover {
   }
 
   &:hover {

-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);

   }
 
   &.l-books__item--link {
   }
 
   &.l-books__item--link {


@@ -92,12 +92,183 @@
 }
 
 .l-books__item__img {
 }
 
 .l-books__item__img {

-  margin: 0;

   font-size: 0;
   font-size: 0;

-  margin-bottom: 11px;
+  margin: 0 0 11px;

 
 

-  a {}

   img {
     max-width: 170px;
   }
 }
   img {
     max-width: 170px;
   }
 }

+
+.l-books__item__actions {
+  display: flex;
+  align-content: center;
+  justify-content: flex-start;
+  margin-bottom: 5px;
+
+  .icon {
+    color: #083F4D;
+    margin-right: 10px;
+    @include font-size(16px);
+
+    &.icon-like,
+    &.icon-liked {
+      color: #FF4C54;
+      @include font-size(19px);
+      margin-right: 0;
+      margin-left: auto;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.l-books__header {
+  width: 100%;
+  display: flex;
+  margin-top: 34px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.l-books__input {
+  position: relative;
+  display: flex;
+  align-content: center;
+  width: 560px;
+
+  .icon {
+    @include font-size(22px);
+    color: #083F4D;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    left: 19px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  input {
+    font-family: $base-font;
+    font-size: 18px;
+    font-style: italic;
+    padding: 10px 20px 10px 50px;
+    border-radius: 52px;
+    border: 1px solid #D9D9D9;
+    width: 100%;
+    max-width: 580px;
+    outline: 0;
+    transition: border $ease-out 350ms;
+
+    &:focus {
+      border-color: #007880;
+    }
+  }
+}
+
+.l-books__sorting {
+  display: flex;
+  align-content: center;
+
+  span {
+    font-weight: $bold;
+    @include font-size(18px);
+    line-height: 150%;
+    color: #083F4D;
+  }
+
+  div {
+    display: flex;
+    align-content: center;
+
+    button {
+      border: 0;
+      padding: 0;
+      margin: 0 0 0 30px;
+      background-color: transparent;
+      outline: 0;
+      font-weight: $regular;
+      @include font-size(18px);
+      line-height: 150%;
+      color: #808080;
+      cursor: pointer;
+
+      &.is-active {
+        color: #083F4D;
+        font-weight: $semibold;
+      }
+    }
+  }
+}
+
+.l-books__grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 34px;
+
+  .l-books__item {
+    border: 1px solid #D9D9D9;
+    margin-bottom: 17px;
+
+    &:nth-child(5n + 5) {
+      margin-right: 0;
+    }
+  }
+}
+
+.l-books__col {
+  display: flex;
+  flex-direction: column;
+  margin-top: 34px;
+
+  .l-books__item {
+    width: 705px;
+    border: 1px solid #D9D9D9;
+    margin-bottom: 17px;
+    display: flex;
+
+    .l-books__item__img {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.l-books__item__content {
+  padding-left: 40px;
+  position: relative;
+
+  .l-books__item__actions {
+    position: absolute;
+    right: 0;
+  }
+
+  h2 {
+    font-weight: $semibold;
+    @include font-size(21px);
+    line-height: 140%;
+    letter-spacing: -0.01em;
+  }
+
+  p {
+    max-width: 390px;
+    margin-top: 20px;
+    font-weight: $regular;
+    @include font-size(18px);
+    line-height: 150%;
+    color: #474747;
+  }
+
+  & > a {
+    display: block;
+    margin-top: 20px;
+    font-weight: $regular;
+    @include font-size(18px);
+    line-height: 150%;
+    color: #007880;
+  }
+}
\ No newline at end of file

diff --git a/src/wolnelektury/static/2022/styles/layout/_checkout.scss b/src/wolnelektury/static/2022/styles/layout/_checkout.scss
new file mode 100644 (file)
index 0000000..5266a72
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/layout/_checkout.scss
@@ -0,0 +1,793 @@
+//Support bar
+.l-checkout__support {
+  margin-bottom: 22px;
+}
+
+.l-checkout__support__bar {
+  background: #E6F0F1 url(../images/approval.svg) center right 5px no-repeat;
+  border-radius: 10px;
+  width: 100%; height: 34px;
+  position: relative;
+  span {
+    position: absolute;
+    top: 0; left: 0;
+    height: 100%;
+    background: #92BD39;
+    border-radius: 10px;
+    &:after {
+      margin: auto;
+      position: absolute;
+      top: 0; right: 13px; bottom: 2px;
+      content: attr(data-label);
+      font-weight: bold;
+      font-size: 15px;
+      color: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.l-checkout__support__footer {
+  display: flex;
+  margin-top: 7px;
+  justify-content: space-between;
+  align-items: center;
+  p {
+    margin: 0;
+    font-weight: normal;
+    font-size: 15px;
+    line-height: 150%;
+    color: #083F4D;
+  }
+}
+
+//Box
+.l-checkout__box {
+  background: #E1F1F2;
+  border-radius: 10px;
+  padding-bottom: 30px;
+  overflow: hidden;
+}
+
+.l-checkout__box__header {
+  display: flex;
+  background: #083F4D;
+}
+
+.l-checkout__box__header__content h1 {
+  font-style: italic;
+  font-weight: 300;
+  font-size: 48px;
+  line-height: 55px;
+  letter-spacing: -0.02em;
+  color: #92BD39;
+  margin: 0;
+}
+
+.l-checkout__box__header__content p:first-of-type {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 21.5px;
+  line-height: 140%;
+  letter-spacing: -0.01em;
+  color: #FFFFFF;
+  margin-top: 23px;
+}
+
+.l-checkout__box__header__content p {
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 150%;
+  color: #FFFFFF;
+  margin-top: 8px;
+  max-width: 410px;
+}
+
+.l-checkout__box__header__content {
+  padding: 32px 45px;
+}
+
+//Steps
+.l-checkout__steps {
+  display: flex;
+  padding: 0 125px;
+  justify-content: space-between;
+  margin-top: -24px;
+
+  div {
+    width: 145px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      width: 46px;
+      height: 46px;
+      background: #86AD34;
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 21px;
+      line-height: 140%;
+      letter-spacing: -0.01em;
+    }
+
+    p {
+      margin-top: 4px;
+      font-weight: 600;
+      font-size: 21px;
+      line-height: 140%;
+      text-align: center;
+      letter-spacing: -0.01em;
+      color: #083F4D;
+    }
+
+    &.is-completed {
+      span {
+        overflow: hidden;
+        text-indent: -999px;
+        background: #86AD34 url(../images/check.svg) center no-repeat;
+      }
+    }
+
+    &.is-inactive {
+      span {
+        background: #ffffff;
+        color: #003C3C;
+      }
+      p {
+        color: #74BDC2;
+        font-weight: normal;
+      }
+    }
+  }
+}
+
+//Switch
+.l-switch__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 35px;
+}
+
+.l-switch {
+  background: #fff;
+  display: block;
+  position: relative;
+  height: 26px;
+  width: 77px;
+  border-radius: 4px;
+}
+
+.l-switch label {
+  color: #fff;
+  font-weight: 600;
+  font-size: 21.5px;
+  line-height: 26px;
+  transition: color .2s ease;
+  width: 122px;
+  cursor: pointer;
+}
+
+.l-switch label:nth-of-type(1) {
+  left: -175%;
+  position: absolute;
+  text-align: right;
+}
+
+.l-switch label:nth-of-type(2) {
+  position: absolute;
+  right: -175%;
+  text-align: left;
+}
+
+.l-switch input {
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  height: 26px;
+  width: 77px;
+  z-index: 2;
+}
+
+.l-switch input:checked~label:nth-of-type(1) { color: #003C3C; }
+.l-switch input:checked~label:nth-of-type(2) { color: #74BDC2; }
+
+.l-switch input~:checked~label:nth-of-type(1) { color: #74BDC2; }
+.l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; }
+
+.l-switch input:checked~.toggle {
+  left: 5px;
+}
+
+.l-switch input~:checked~.toggle {
+  left: 39px;
+}
+
+.l-switch input:checked {
+  z-index: 0;
+}
+
+.toggle {
+  background: #003C3C;
+  left: 0;
+  position: absolute;
+  top: 5px;
+  transition: left .2s ease;
+  height: 16px;
+  width: 33px;
+  z-index: 1;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+//Payments
+.l-checkout__payments {
+  display: flex;
+  padding: 0 30px;
+  margin-top: 34px;
+  margin-bottom: 0;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.l-checkout__payments__box {
+  display: flex;
+  flex-direction: column;
+  width: calc(33.333% - 20px);
+  background: #FFFFFF;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: box-shadow $ease-out 250ms;
+  box-shadow: 0px 0px 0px rgba(55, 170, 156, 0);
+  margin-bottom: 30px;
+  margin-right: 30px;
+
+  &:nth-child(3) {
+    margin-right: 0;
+  }
+
+  &:nth-child(5) {
+    margin-right: 0;
+    width: calc(67.4% - 20px);
+  }
+
+  h3 {
+    margin: 0;
+    font-weight: bold;
+    font-size: 44px;
+    line-height: 130%;
+    letter-spacing: -0.01em;
+    color: #083F4D;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all $ease-out 250ms;
+
+    span {
+      font-weight: 600;
+      font-size: 25px;
+      line-height: 140%;
+      letter-spacing: -0.01em;
+      color: #92BD39;
+      margin-left: 10px;
+      transition: opacity $ease-out 250ms;
+    }
+  }
+  .l-checkout__payments__box__btn-wrp {
+    padding: 20px;
+    margin-bottom: 0;
+    margin-top: auto;
+  }
+  p {
+    margin-top: 0;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 150%;
+    color: #474747;
+    padding: 20px;
+    strong {
+      font-weight: 600;
+    }
+  }
+  button {
+    height: 56px;
+    background: #FFFFFF;
+    border: 1px solid #92BD39;
+    border-radius: 3px;
+    width: 100%;
+    outline: 0;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #083F4D;
+    transition: background $ease-out 250ms;
+
+    &:hover {
+      background: rgba(#92BD39, 0.75);
+    }
+  }
+
+  &.is-active {
+    box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35);
+
+    h3 {
+      color: white;
+      background: #083F4D;
+    }
+
+    button {
+      background: #92BD39;
+      &:hover {
+        background: #83AD2B;
+      }
+    }
+  }
+
+  &.l-checkout__payments__box--xl {
+  flex-direction: row;
+    & > div {
+      display: flex;
+      &:first-child {
+        width: 50%;
+        flex-wrap: wrap;
+        max-width: 340px;
+        margin-right: 20px;
+      }
+
+      &:last-child {
+        width: 49%;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    h3 {
+      width: 100%;
+    }
+
+    .l-checkout__payments__box__btn-wrp {
+      width: 100%;
+    }
+
+    button {
+      border-color: #FFA500;
+      background-color: #FFA500;
+      &:hover {
+        background: darken(#FFA500, 5%);
+      }
+    }
+
+    &.once {
+      h3 {
+        text-indent: 0;
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+//Amount
+.l-checkout__amount {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding-right: 30px;
+
+  button {
+      border: none;
+    height: 56px;
+    background: #083F4D;
+    border-radius: 3px;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-left: 32px;
+    color: #FFFFFF;
+    width: 340px;
+  }
+
+  .l-checkout__input {
+    width: 340px;
+  }
+}
+
+//Input
+.l-checkout__input {
+  display: flex;
+  flex-direction: column;
+
+  label {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 160%;
+    color: #083F4D;
+    span { color: #FF4C54; }
+  }
+  input, select, textarea {
+    height: 56px;
+    background: #FFFFFF;
+    border: 1px solid #D5ECED;
+    border-radius: 3px;
+    transition: all $ease-out 250ms;
+    padding: 10px;
+    outline: 0;
+
+    &:focus {
+      border: 1px solid #007880;
+    }
+  }
+
+  button {
+    height: 56px;
+    background: #083F4D;
+    border-radius: 3px;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-left: 32px;
+    color: #FFFFFF;
+    width: 340px;
+  }
+}
+
+//Cols
+.l-checkout__cols {
+  display: flex;
+  padding: 0 30px;
+  margin-top: 50px;
+
+  &.bt-w {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid white;
+  }
+}
+
+.l-checkout__col {
+  &:nth-child(1) {
+    width: 402px;
+    padding-right: 62px;
+    .l-checkout__payments__box {
+      width: 100%;
+    }
+  }
+  &:nth-child(2) {
+    width: calc(100% - 340px);
+  }
+  &.full {
+    width: 100%;
+    padding-right: 0;
+
+    .l-checkout__form__row.full {
+      flex-direction: row;
+
+      & > h3 {
+        margin-top: 22px;
+      }
+
+      .l-checkout__info {
+        width: 100%;
+        padding-left: 100px;
+      }
+    }
+  }
+}
+
+.l-checkout__footer__img {
+  display: flex;
+  margin-right: 30px;
+  margin-left: auto;
+  margin-top: 30px;
+}
+
+//Form
+.l-checkout__form {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.l-checkout__form__row {
+  display: flex;
+  margin-bottom: 24px;
+
+  &:nth-child(4) {
+    .l-checkout__input {
+      &:nth-child(1) { width: 172px; }
+      &:nth-child(2) { width: calc(100% - 172px); }
+    }
+  }
+
+  &.full {
+    flex-direction: column;
+
+    .l-checkout__input {
+      &:nth-child(1) {
+        padding-right: 0;
+      }
+      &:nth-child(2) {
+        padding-left: 0;
+      }
+    }
+  }
+
+  h3 {
+    margin-top: 0;
+    font-weight: 600;
+    font-size: 21.5px;
+    line-height: 140%;
+    letter-spacing: -0.01em;
+    color: #083F4D;
+  }
+
+  .iframe {
+    margin-top: 16px;
+  }
+
+  .l-checkout__input {
+    width: 100%;
+    &:nth-child(1) {
+      padding-right: 10px;
+    }
+    &:nth-child(2) {
+      padding-left: 10px;
+    }
+  }
+
+  & > a {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 25px;
+    color: #74BDC2;
+    transition: all $ease-out 250ms;
+
+    &:hover {
+      color: #007880;
+    }
+  }
+
+  &.confirm {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .l-checkout__input {
+      width: auto;
+    }
+  }
+  .errorlist {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      color: #FF4C54;
+      li:before {
+          content: '⚠ ';
+      }
+  }
+}
+
+//Info
+.l-checkout__info__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all $ease-out 250ms;
+  width: 100%;
+  overflow: hidden;
+  margin-top: 15px;
+
+  &:hover {
+    background-color: darken(#E1F1F2, 2%);
+  }
+
+  div {
+    font-weight: normal;
+    font-size: 15px;
+    line-height: 150%;
+    color: #083F4D;
+    width: 100px;
+  }
+
+  h3 {
+    width: 426px;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 150%;
+    color: #083F4D;
+    padding-left: 30px;
+  }
+
+  button {
+    outline: 0;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0;
+    margin-left: auto;
+    &:hover {
+      opacity: 0.75;
+    }
+  }
+  input {
+    top: 0;
+    left: 0;
+    position: absolute;
+    transform: translate(-100%,-100%);
+  }
+}
+
+//Completed
+.l-checkout__completed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: auto;
+  padding: 140px 0;
+  background: url(../images/checkout-bg.png) no-repeat center;
+
+  .l-checkout__completed__wrapper {
+    max-width: 580px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  h1 {
+    margin-top: 0;
+    font-style: italic;
+    font-weight: 300;
+    font-size: 58px;
+    line-height: 55px;
+    letter-spacing: -0.02em;
+    color: #083F4D;
+  }
+  p {
+    margin-top: 30px;
+    font-weight: normal;
+    font-size: 21.5px;
+    line-height: 140%;
+    text-align: center;
+    letter-spacing: -0.01em;
+    color: #007880;
+  }
+  a {
+    margin-top: 50px;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #083F4D;
+    border-radius: 3px;
+    height: 56px;
+    text-align: center;
+    color: #FFFFFF;
+    width: 340px;
+  }
+}
+
+//Footer
+.l-checkout__footer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 12px;
+  margin-bottom: 52px;
+}
+
+.l-checkout__footer > img {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+.l-checkout__footer__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.l-checkout__footer__content__item {
+  display: flex;
+
+  &:not(:last-child) {
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid #E1F1F2;
+  }
+}
+
+.l-checkout__footer__content h3 {
+  font-weight: 600;
+  font-size: 21.5px;
+  line-height: 140%;
+  letter-spacing: -0.01em;
+  color: #083F4D;
+  width: 318px;
+}
+
+.l-checkout__footer__content__item > div {
+  width: 100%;
+  padding-left: 120px;
+}
+
+.l-checkout__footer__content__item > div p {
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 150%;
+  color: #808080;
+}
+
+.l-checkout__footer__content__item > div p a {
+  color: #007880;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.l-checkout__footer__content {
+  .l-article__read-more {
+    margin-top: 20px;
+    font-size: 15px;
+    &:after {
+      margin-left: 5px;
+      display: inline-block;
+      transform: rotate(180deg);
+      content: $icon-arrow-up;
+      font-family: '#{$icomoon-font-family}' !important;
+      font-size: 12px;
+      speak: never;
+      font-style: normal;
+      font-weight: normal;
+      font-variant: normal;
+      text-transform: none;
+      line-height: 1;
+
+      /* Better Font Rendering =========== */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+
+  .l-article__overlay {
+    &:after {
+      display: none;
+    }
+    &.is-clicked {
+      & + .l-article__read-more {
+        &:after {
+          transform: none;
+        }
+      }
+    }
+  }
+}

diff --git a/src/wolnelektury/static/2022/styles/layout/_module.scss b/src/wolnelektury/static/2022/styles/layout/_module.scss
index 84cf532..df14741 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_module.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_module.scss
@@ -18,3 +18,4 @@
 @import "container";
 @import "breadcrumb";
 @import "content";
 @import "container";
 @import "breadcrumb";
 @import "content";

+@import "checkout";

diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
index 51a9420..a61b7ae 100644 (file)
--- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss
+++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss
@@ -1,6 +1,3 @@
-$teal: #007880;
-
-

 .l-navigation {
   max-width: 100%;
   margin: 0 auto;
 .l-navigation {
   max-width: 100%;
   margin: 0 auto;


@@ -16,6 +13,29 @@ $teal: #007880;
     align-items: center;
     justify-content: space-between;
   }
     align-items: center;
     justify-content: space-between;
   }

+
+  &.is-open {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%;
+    z-index: $master-layer;
+    .l-navigation__menu {
+      opacity: 1;
+      pointer-events: all;
+    }
+
+    .c-lang {
+      opacity: 1;
+      .c-lang__button {
+        pointer-events: all;
+      }
+    }
+  }
+}
+
+.l-navigation__logo {
+  position: relative;
+  z-index: $master-layer + 1;

 }
 
 .l-navigation__button {
 }
 
 .l-navigation__button {


@@ -25,6 +45,8 @@ $teal: #007880;
   padding: 0;
   margin: 0;
   outline: 0;
   padding: 0;
   margin: 0;
   outline: 0;

+  position: relative;
+  z-index: $master-layer + 1;

 }
 
 .l-naviagion__search {
 }
 
 .l-naviagion__search {


@@ -38,7 +60,7 @@ $teal: #007880;
     font-size: 18px;
     font-style: italic;
     border: 0;
     font-size: 18px;
     font-style: italic;
     border: 0;

-    padding: 10px;
+    padding: 10px 20px;

     border-radius: 52px;
     width: 100%;
     max-width: 580px;
     border-radius: 52px;
     width: 100%;
     max-width: 580px;


@@ -92,10 +114,6 @@ $teal: #007880;
     color: #333333;
     margin: 0;
     max-width: 590px;
     color: #333333;
     margin: 0;
     max-width: 590px;

-
-    a {
-        color: $teal;
-    }

   }
 }
 
   }
 }
 


@@ -112,9 +130,143 @@ $teal: #007880;
   cursor: pointer;
 }
 
   cursor: pointer;
 }
 

+.l-navigation__menu {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background-color: #083F4D;
+  z-index: $master-layer;
+  padding-top: 93px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 350ms $ease-out;
+
+  .l-container {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.l-navigation__menu__links {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    max-width: 212px;
+
+    li {
+      font-weight: $regular;
+      @include font-size(18px);
+      line-height: 100%;
+      padding-top: 16px;

 
 

+      strong {
+        color: #92BD39;
+        font-weight: $semibold;
+        @include font-size(21px);
+        line-height: 140%;
+        letter-spacing: -0.01em;
+      }

 
 

-.ui-autocomplete a {
-    display: block;
-    transition: none;
+      a {
+        color: $color-white;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      hr {
+        width: 34px;
+        height: 1px;
+        background: #007880;
+        margin-left: 0;
+        border: 0;
+      }
+    }
+  }

 }
 }

+
+.l-navigation__menu__info {
+  display: flex;
+  width: 100%;
+  padding-top: 58px;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.l-navigation__menu__book {
+  p {
+    color: $color-white;
+    @include font-size(21px);
+    line-height: 140%;
+    strong {
+      color: #92BD39;
+      letter-spacing: -0.01em;
+      font-weight: $semibold;
+    }
+  }
+}
+
+.l-navigation__menu__book__info {
+  display: flex;
+  margin-top: 20px;
+  align-items: flex-start;
+  padding: 12px;
+  background-color: $color-white;
+  border-radius: 6px;
+  color: #808080;
+
+  img {
+    margin-right: 10px;
+  }
+
+  h3 {
+    margin: 0;
+    font-weight: $regular;
+    @include font-size(15px);
+    line-height: 120%;
+    width: 150px;
+    strong {
+      display: block;
+      font-weight: $semibold;
+      @include font-size(18px);
+      line-height: 130%;
+    }
+  }
+
+  p {
+    margin: 0;
+    width: 427px;
+    font-weight: $regular;
+    @include font-size(15px);
+    line-height: 130%;
+    color: #808080;
+  }
+}
+
+.l-navigation__menu__social {
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+      &:not(:last-child) {
+        margin-right: 36px;
+      }
+      a {
+        color: $color-white;
+        &:hover {
+          color: #92BD39;
+        }
+      }
+      .icon {
+        @include font-size(28px);
+      }
+    }
+  }
+}
\ No newline at end of file

diff --git a/src/wolnelektury/static/2022/styles/local.scss b/src/wolnelektury/static/2022/styles/local.scss
new file mode 100644 (file)
index 0000000..a8185cd
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/local.scss
@@ -0,0 +1,39 @@
+$teal: #007880;
+
+
+.l-change-pop {
+    transition: 350ms all;
+    
+    p {
+        a {
+            color: $teal;
+        }
+    }
+}
+
+
+.is-open .l-change-pop {
+    height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+
+.ui-autocomplete a {
+    display: block;
+    transition: none;
+}
+
+
+.jp-state-playing .icon-play {
+  &:before {
+    content: $icon-pause;
+  }
+}
+.jp-state-muted .icon-volume {
+  &:before {
+    content: $icon-mute;
+  }
+}

diff --git a/src/wolnelektury/static/2022/styles/main.scss b/src/wolnelektury/static/2022/styles/main.scss
index d800a3a..182dc38 100644 (file)
--- a/src/wolnelektury/static/2022/styles/main.scss
+++ b/src/wolnelektury/static/2022/styles/main.scss
@@ -28,3 +28,4 @@
 @import "layout/module";
 @import "components/module";
 @import "pages/module";
 @import "layout/module";
 @import "components/module";
 @import "pages/module";

+@import "local";