# Szablon: katalog nagród koszyk

# W katalogu

|--src/                           →  Pliki źródłowe
|  |--templates/                  →  Szablony: katalog główny
|  |  |--pages/                   →  Szablony: podstrony
|  |  |  |--katalog-nagrod-koszyk.twig       

# HTML

{% extends '../layouts/default.twig' %}
{% set head_title = 'Katalog nagród' %}
{% set body_class = '' %}
{% block pagecss %}
{% endblock %}
{% block page %}
{% include '../../modules/top/top.twig' %}
<div class="container">
  <div class="row">
    <div class="col-12 col-lg-3 col-hd-2">
      {% include '../../modules/sidebar/sidebar.twig' %}
    </div>
    <div class="col-12 col-lg-9 col-hd-10">
      <div class="titleBar titleBar__button">
        <div>
          <div class="titleBar__title">Katalog nagród</div>
        </div>
        <div class="button-sets button-sets__np">
          <a href="" class="btn btn-shopping btn-shopping__basket is-active">
            <div class="btn-shopping__basketCount">2</div>
            <div>
              <img src="./img/icon__shopping-cart.svg" alt="">
              <span class="btn-shopping__title">Koszyk</span>
            </div>
            <div>
              <span class="btn-shopping__subtitle">2 produkty</span>
              <div class="points">1200 <sup>pkt</sup></div>
            </div>
          </a>
          <a href="" class="btn btn-shopping btn-shopping__history">
            <div>
              <img src="./img/icon__clock.svg" alt="">
              <span class="btn-shopping__title">Historia</span>
            </div>
            <div>
              <span class="btn-shopping__subtitle">3 produkty</span>
            </div>
          </a>
        </div>
      </div>
      <div class="page-container">
        <div class="contentBar">
          <div class="contentBar__content">
            <div>
              <div class="contentBar__cat text-secondary">Koszyk</div>
              <div class="contentBar__title contentBar__title__nmb">Twoje zamówienie</div>
            </div>
            <div></div>
          </div>          
        </div>
        <div class="page-columns">
          <div class="page-column__main">
            <div class="cartProductHeader">
              <div class="cartProductTitle">
                <div class="text-secondary">Twoje produkty</div>
              </div>
              <div class="cartProductAmountTitle">
                <div class="text-secondary">Koszt szt.</div>
                <div class="text-secondary">Ilość</div>
                <div class="text-secondary">Suma</div>
              </div>
            </div>
            <div class="cartProductItem">
              <div class="cartProductNameWrap">
                <div class="cartProductImage"><img src="http://box.youngme1.pro-linuxpl.com/storage/catalogue/catalogue_5_gvgs.png" alt=""></div>
                <div class="cartProductName text-primary">Słuchawki bezprzewodowe JBL T450BT, biały</div>
              </div>
              <div class="cartProductAmountTitle">
                <div class="text-secondary">Koszt szt.</div>
                <div class="text-secondary">Ilość</div>
                <div class="text-secondary">Suma</div>
              </div>              
              <div class="cartProductAmountPoints">
                <div>
                  <div class="text-primary">2200 pkt</div>
                </div>
                <div>
                  <div class="amount" data-js="amount">
                    <button class="amount__minus"></button>
                    <input type="text" name="product_amount" id="product_amount" class="amount__input" value="1" />
                    <button class="amount__plus"></button>
                  </div>                  
                </div>
                <div>
                  <div class="text-primary">2200 pkt</div>
                </div>
              </div>
            </div>
            <div class="cartProductItem">
              <div class="cartProductNameWrap">
                <div class="cartProductImage"><img src="http://box.youngme1.pro-linuxpl.com/storage/catalogue/catalogue_5_gvgs.png" alt=""></div>
                <div class="cartProductName text-primary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt aliquid </div>
              </div>
              <div class="cartProductAmountTitle">
                <div class="text-secondary">Koszt szt.</div>
                <div class="text-secondary">Ilość</div>
                <div class="text-secondary">Suma</div>
              </div>              
              <div class="cartProductAmountPoints">
                <div>
                  <div class="text-primary">2200 pkt</div>
                </div>
                <div>
                  <div class="amount" data-js="amount">
                    <button class="amount__minus"></button>
                    <input type="text" name="product_amount" id="product_amount" class="amount__input" value="1" />
                    <button class="amount__plus"></button>
                  </div>                  
                </div>
                <div>
                  <div class="text-primary">2200 pkt</div>
                </div>
              </div>
            </div>
          </div>      
          <div class="page-column__sidebar">
            <div class="shoppingCard">
              <div class="text-secondary">Suma koszyka</div>
              <div class="points">1200<sup>pkt</sup></div>
              <progress max="100" value="60">
                <div class="progress-bar" data-percent="60">
                    <span style="width: 60%;">Progress: 60%</span>
                </div>
              </progress>
              <div class="shoppingCardRow">
                <div class="nmb">
                  <div class="text-secondary">Twoje punkty</div>
                </div>
                <div class="nmb">
                  <div class="points">1200<sup>pkt</sup></div>
                </div>
              </div> 
              <div class="shoppingCardRow">
                <div class="nmb">
                  <div class="text-secondary">Pozostałe punkty</div>
                </div>
                <div class="nmb">
                  <div class="points">2200<sup>pkt</sup></div>
                </div>
              </div> 
              <button type="submit" class="btn btn-secondary btn-block">DALEJ</button>  
              <a href="" class="btn">ZOBACZ WIĘCEJ NAGRÓD</a>                       
            </div>
          </div>
        </div>      
      </div>      
      {% include '../components/footer.twig' with { 'container': false } %}
    </div>
  </div>
</div>

{% endblock %}

{% block pagejs %}

{% endblock %}

# Korzysta z: