templates/page/faq.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Zatoka Kodu - FAQ{% endblock %}
  4. {% set id = 1 %}
  5. {% block body %}
  6.     <main>
  7.         <!-- =======================
  8.         Page Banner START -->
  9.         <section class="bg-light py-5">
  10.             <div class="container">
  11.                 <div class="row g-4 g-md-5 position-relative">
  12.                     <!-- SVG decoration -->
  13.                     <figure class="position-absolute top-0 start-0 d-none d-sm-block">
  14.                         <svg width="22px" height="22px" viewBox="0 0 22 22">
  15.                             <polygon class="fill-purple" points="22,8.3 13.7,8.3 13.7,0 8.3,0 8.3,8.3 0,8.3 0,13.7 8.3,13.7 8.3,22 13.7,22 13.7,13.7 22,13.7 "></polygon>
  16.                         </svg>
  17.                     </figure>
  19.                     <!-- Title and Search -->
  20.                     <div class="col-lg-10 mx-auto text-center position-relative">
  21.                         <!-- SVG decoration -->
  22.                         <figure class="position-absolute top-50 end-0 translate-middle-y">
  23.                             <svg width="27px" height="27px">
  24.                                 <path class="fill-orange" d="M13.122,5.946 L17.679,-0.001 L17.404,7.528 L24.661,5.946 L19.683,11.533 L26.244,15.056 L18.891,16.089 L21.686,23.068 L15.400,19.062 L13.122,26.232 L10.843,19.062 L4.557,23.068 L7.352,16.089 L-0.000,15.056 L6.561,11.533 L1.582,5.946 L8.839,7.528 L8.565,-0.001 L13.122,5.946 Z"></path>
  25.                             </svg>
  26.                         </figure>
  27.                         <!-- Title -->
  28.                         <h1 class="display-6">Witaj, jak możemy Ci pomóc?</h1>
  29.                     </div>
  31.                     <!-- Category START -->
  32.                     <div class="row justify-content-md-center">
  33.                         <div class="col-sm-6 col-md-3">
  34.                             <img src="assets/images/element/kids.png">
  35.                         </div> <!-- Row END -->
  36.                     </div>
  37.                     <!-- Category END -->
  38.                 </div>
  39.             </div>
  40.         </section>
  41.         <!-- =======================
  42.         Page Banner END -->
  44.         <!-- =======================
  45.         Page content START -->
  46.         <section class="pt-5 pb-0 pb-lg-5">
  47.             <div class="container">
  49.                 <div class="row g-4 g-md-5">
  51.                     <!-- Right sidebar START -->
  52.                     <div class="col-lg-4" id="faqlist">
  53.                         <div class="row mb-5 mb-lg-0">
  54.                             <div class="col-12 col-sm-6 col-lg-12">
  55.                                 <!-- Related Topic START -->
  56.                                 <div class="card card-body shadow p-4 mb-4">
  57.                                     <!-- Title -->
  58.                                     <h4 class="mb-3">Kategorie</h4>
  59.                                     <!-- Item -->
  60.                                     <div class="d-flex justify-content-between align-items-center mb-2">
  61.                                         <a href="#faqlist" class="h6" data-show-type="popular"><i class="fas fa-caret-right text-orange me-2"></i>Najczęstsze pytania</a>
  62.                                         <span class="small">({{ category.popular }})</span>
  63.                                     </div>
  64.                                     <!-- Item -->
  65.                                     <div class="d-flex justify-content-between align-items-center mb-2">
  66.                                         <a href="#faqlist" class="h6" data-show-type="course"><i class="fas fa-caret-right text-orange me-2"></i>Pytania odnośnie zajęć</a>
  67.                                         <span class="small">({{ category.course }})</span>
  68.                                     </div>
  69.                                     <!-- Item -->
  70.                                     <div class="d-flex justify-content-between align-items-center mb-2">
  71.                                         <a href="#faqlist" class="h6" data-show-type="finance"><i class="fas fa-caret-right text-orange me-2"></i>Finanse</a>
  72.                                         <span class="small">({{ category.finance }})</span>
  73.                                     </div>
  74.                                 </div>
  75.                                 <!-- Related Topic END -->
  76.                             </div>
  78.                             <div class="col-12 col-sm-6 col-lg-12">
  79.                                 <!-- Tags START -->
  80.                                 <div class="card card-body shadow p-4">
  81.                                     <a href="/darmowe-zajecia" class="btn btn-lg btn-gold mx-auto mt-3">Darmowa lekcja próbna</a>
  82.                                 </div>
  83.                                 <!-- Tags END -->
  84.                             </div>
  85.                         </div><!-- Row End -->
  86.                     </div>
  87.                     <!-- Right sidebar END -->
  88.                     <!-- Main content START -->
  89.                     <div class="col-lg-8">
  90.                         <!-- Title -->
  91.                         <h3 class="mb-4">Najczęściej Zadawane Pytania</h3>
  93.                         <!-- FAQ START -->
  94.                         <div class="accordion accordion-icon accordion-bg-light" id="accordionExample2">
  95.                             {% for ask in faq %}
  96.                                 <!-- Item -->
  97.                                 <div class="accordion-item mb-3" data-type="{{ ask.category }}">
  98.                                     <h6 class="accordion-header font-base" id="heading-{{ id }}">
  99.                                         <button class="accordion-button fw-bold rounded d-inline-block collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ id }}" aria-expanded="true" aria-controls="collapse-{{ id }}">
  100.                                             {{ ask.question }}
  101.                                         </button>
  102.                                     </h6>
  103.                                     <!-- Body -->
  104.                                     <div id="collapse-{{ id }}" class="accordion-collapse collapse" aria-labelledby="heading-{{ id }}" data-bs-parent="#accordionExample2">
  105.                                         <div class="accordion-body mt-3">
  106.                                             {{ ask.answer|raw }}
  107.                                         </div>
  108.                                     </div>
  109.                                 </div>
  110.                                 {% set id = id + 1 %}
  111.                             {% endfor %}
  112.                         </div>
  113.                         <!-- FAQ END -->
  114.                     </div>
  115.                     <!-- Main content END -->
  117.                 </div><!-- Row END -->
  118.             </div>
  119.         </section>
  120.         <!-- =======================
  121.         Page content END -->
  123.     </main>
  124. {% endblock %}
  126. {%  block js %}
  127.     {{ parent() }}
  128.     <script type="application/javascript">
  129.         document.querySelectorAll("[data-show-type]").forEach(element => {
  130.             element.addEventListener("click", function() {
  131.                 const faqList = document.querySelectorAll('[data-show-type]');
  132.                 for (const element of faqList) {
  133.                     element.classList.remove("text-gold");
  134.                 }
  135.                 this.classList.add("text-gold");
  136.                 const showType = this.getAttribute("data-show-type");
  137.                 const elements = document.querySelectorAll('[data-type]');
  138.                 for (const element of elements) {
  139.                     if (element.getAttribute('data-type') == showType) {
  140.                         element.style.display = 'block';
  141.                     } else {
  142.                         element.style.display = 'none';
  143.                     }
  144.                 }
  145.             });
  146.         });
  147.     </script>
  148. {% endblock %}