templates/website/page/playground.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  2. {% if page is defined and page is not empty %}
  3.     {% set metaParams = {
  4.         'title': page.metaTitle ? page.metaTitle : page.title,
  5.         'metaDescription': page.metaDescription,
  6.         'metaKeywords': page.metaKeywords,
  7.         'image':(page.metaImage is defined ? page.metaImage : page.image is defined ? page.image : null)
  8.     } %}
  10. {% else %}
  11.     {% set metaParams = {} %}
  12. {% endif %}
  13.     {% block meta %}
  14.         {% include '@web/parts/meta.html.twig' with metaParams %}
  15.     {% endblock meta %}
  16. {% block content %}
  17.     <section class="section-playground">
  18.         {% block header %}
  19.             {% include '@web/parts/header.html.twig' %}
  20.         {% endblock %}
  23.         <div class="playground  my-container-fluid">
  24.             <div class="image-wrapper">
  25.                 <div class="title-wrapper">
  26.                     <span class="standard-title  title-desktop">{{ playground.title }}</span>
  27.                     <span class="standard-text ">{{ playground.description|raw }}</span>
  28.                 </div>
  29.                 <div class="image-desktop-wrapper">
  30.                     <img class="image-desktop" src="{{ playground.image| imagine_filter('thumbnail_view') }}" alt="{{ playground.title }}">
  31.                 </div>
  32.             </div>
  33.         </div>
  35.         {% if playground.body %}
  36.             <div class="header-wrapper section-fragmented full  my-container-fluid">
  37.                 <div class="standard-text">
  38.                     {{ playground.body|raw }}
  39.                 </div>
  40.             </div>
  41.         {% endif %}
  43.         {% if  playground.additionalInfo %}
  44.             <div class="description-wrapper">
  45.                 <div class="item w-100">
  46.                     <span>{{ playground.additionalInfo|raw }}</span>
  47.                 </div>
  48.             </div>
  49.         {% endif %}
  51.         {% if  playground.images %}
  52.             <div class="playground-slick">
  53.                 {% for item in playground.images %}
  54.                     <div class="slick-slide">
  55.                         <div class="playground-item">
  56.                             <div class="img-box"><img src="{{ item }}" width="100%"
  57.                                                       alt="playground"></div>
  58.                         </div>
  59.                     </div>
  60.                 {% endfor %}
  62.             </div>
  63.         {% endif %}
  66.         {% if  playground.video %}
  67.             <div class="video-wrapper  my-container-fluid mt-5 mb-5">
  68.                 <video  muted autoplay loop  id="playground-video">
  69.                     <source src="{{ playground.video }}">
  70.                 </video>
  71.                  <button class="play-button"  id="playBtn" onclick="toggleVideoPlay()">{{ svg('public/static_images/svg/play.svg')|raw }}</button>
  72.             </div>
  73.         {% endif %}
  75.         {% if prohibitedCases is not empty %}
  76.             <div class="advice-wrapper my-container-fluid">
  77.                 <div class="standard-title color-darkblue">
  78.                     {{ 'Մի՛ օգտվեք ատրակցիոններից հետևյալ դեպքերում'|trans }}
  79.                 </div>
  80.                 <div class="advices">
  81.                     {% for item in prohibitedCases %}
  82.                         <div class="advice">
  83.                             <img src="{{ item.image }}" alt="{{ item.title }}">
  84.                             <span>{{ item.title }}</span>
  85.                         </div>
  86.                     {% endfor %}
  88.                 </div>
  89.             </div>
  90.         {% endif %}
  93.         {% block footer %}
  94.             {% include '@web/parts/footer.html.twig' %}
  96.         {% endblock %}
  97.     </section>
  99. {% endblock %}
  100. {% block javascripts %}
  101.     {{ parent() }}
  102.     <script>
  103.         function toggleVideoPlay() {
  104.             const video = document.getElementById('playground-video');
  105.             const playBtn = document.getElementById('playBtn');
  106.             if (window.innerWidth < 991 ){
  107.                 if (playBtn.style.opacity === "0") {
  108.                     playBtn.style.opacity = "1";
  109.                 } else {
  110.                     playBtn.style.opacity = "0";
  111.                 }
  112.             }
  113.             if (video.paused) {
  114.                 video.play();
  115.                 playBtn.classList.add('button-opacity')
  116.             } else {
  117.                 playBtn.classList.remove('button-opacity')
  118.                 video.pause();
  119.             }
  120.         }
  121.     </script>
  123. {% endblock %}