templates/website/page/game-zone.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-game-zone">
  18.         {% block header %}
  19.             {% include '@web/parts/header.html.twig' %}
  20.         {% endblock %}
  22.         {% if gameZoneSlider is not empty %}
  24.             <div class="playground game-zone-slick slider-banner  my-container-fluid">
  25.                 {% for item in gameZoneSlider %}
  26.                     <div class="image-wrapper">
  27.                         <div class="title-wrapper">
  28.                             <span class="standard-title  title-desktop">{{ gameZone.title }}</span>
  29.                             <span class="standard-text ">{{ gameZone.description|raw }}</span>
  30.                         </div>
  31.                         <div class="image-desktop-wrapper">
  32.                             <img class="image-desktop" src="{{ item.image }}" alt="image">
  33.                         </div>
  34.                     </div>
  35.                 {% endfor %}
  37.             </div>
  38.         {% endif %}
  40.         {% if gameZone.body %}
  41.             <div class="header-wrapper section-fragmented full my-container-fluid">
  42.                 <div class="standard-text">
  43.                     {{ gameZone.body|raw }}
  44.                 </div>
  45.             </div>
  46.         {% endif %}
  48.         {% if  gameZone.additionalInfo %}
  49.             <div class="description-wrapper">
  50.                 <div class="item w-100">
  51.                     <span>{{ gameZone.additionalInfo|raw }}</span>
  52.                 </div>
  53.             </div>
  54.         {% endif %}
  56.         <div class="my-container-fluid">
  57.             <div class=" game-zone-images-wrapper">
  58.                 {% if  gameZone.images %}
  59.                     {% for item in gameZone.images %}
  60.                         <div class="game-zone-image">
  61.                             <img src="{{ item }}" width="100%" alt="gameZone">
  62.                         </div>
  63.                     {% endfor %}
  64.                 {% endif %}
  65.             </div>
  66.         </div>
  67.         <div class="my-container-fluid">
  70.         {% if  gameZone.video %}
  71.             <div class="video-wrapper  mt-5 mb-5">
  72.                 <video  muted autoplay loop  id="game-zone-video" >
  73.                     <source src="{{ gameZone.video }}">
  74.                 </video>
  75.                  <button class="play-button"  id="playBtn"
  76.                         onclick="toggleVideoPlay()">{{ svg('public/static_images/svg/play.svg')|raw }}</button>
  77.             </div>
  78.         {% endif %}
  80.         </div>
  83.         {% block footer %}
  84.             {% include '@web/parts/footer.html.twig' %}
  86.         {% endblock %}
  87.     </section>
  89. {% endblock %}
  90. {% block javascripts %}
  91.     {{ parent() }}
  92.     <script>
  93.         function toggleVideoPlay() {
  94.             const video = document.getElementById('game-zone-video');
  95.             const playBtn = document.getElementById('playBtn');
  96.             if (window.innerWidth < 991) {
  97.                 if (playBtn.style.opacity === "0") {
  98.                     playBtn.style.opacity = "1";
  99.                 } else {
  100.                     playBtn.style.opacity = "0";
  101.                 }
  102.             }
  103.             if (video.paused) {
  104.                 video.play();
  105.                 playBtn.classList.add('button-opacity')
  106.             } else {
  107.                 playBtn.classList.remove('button-opacity')
  108.                 video.pause();
  109.             }
  110.         }
  111.     </script>
  113. {% endblock %}