templates/website/page/attractions-view.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': attraction.title,
  5.         'metaDescription': attraction.metaDescription,
  6.         'metaKeywords': attraction.metaKeywords,
  7.         'image':(attraction.image is defined ? attraction.image : null)
  8.     } %}
  9. {% else %}
  10.     {% set metaParams = {} %}
  11. {% endif %}
  12. {% block content %}
  13.     <section class="section-attraction-single">
  14.         {% block header %}
  15.             {% include '@web/parts/header.html.twig' %}
  16.         {% endblock %}
  17.         <div class="standard-title color-darkblue title-small-media" style="display: none">{{ attraction.title }}</div>
  18.         <div class="attraction-single  my-container-fluid">
  19.             <div class="image-wrapper">
  20.                 <div class="title-wrapper">
  21.                     <span class="standard-title  title-desktop">{{ attraction.title }}</span>
  22.                     <span class="standard-text ">{{ attraction.description|raw }}</span>
  23.                 </div>
  24.                 <div class="image-desktop-wrapper">
  25.                     <img class="image-desktop" src="{{ attraction.image| imagine_filter('thumbnail_view') }}" alt="{{ attraction.title }}">
  26.                 </div>
  27.                 {% if attraction.attractionHeight %}
  28.                     <div class="description-wrapper">
  29.                         <span class="standard-title ">{{'Բարձրություն'|trans}}</span>
  30.                         <span class="standard-text ">{{ attraction.attractionHeight }}</span>
  31.                     </div>
  32.                 {% endif %}
  33.             </div>
  34.         </div>
  35.         {% if attraction.body %}
  36.             <div class="header-wrapper section-fragmented  my-container-fluid">
  37.                 <div class="standard-text">
  38.                     {{ attraction.body|raw }}
  39.                 </div>
  40.             </div>
  41.         {% endif %}
  42.         {% if  attraction.additionalInfo %}
  43.             <div class="description-wrapper">
  44.                 <div class="item w-100">
  45.                     <span>{{ attraction.additionalInfo|raw }}</span>
  46.                 </div>
  47.             </div>
  48.         {% endif %}
  49.         {% if attraction.speed or attraction.power %}
  50.             <div class="description-wrapper">
  51.                 {% if attraction.speed %}
  52.                     <div class="item">
  53.                         <span class="title">{{'Արագություն'|trans}}</span>
  54.                         <span>{{ attraction.speed }}</span>
  55.                     </div>
  56.                 {% endif %}
  57.                 {% if  attraction.power %}
  58.                     <div class="item">
  59.                         <span class="title">{{'Հզորություն'|trans}}</span>
  60.                         <span>{{ attraction.power }}</span>
  61.                     </div>
  62.                 {% endif %}
  63.             </div>
  64.         {% endif %}
  65.         {% if  attraction.images %}
  66.             <div class="attraction-single-slick">
  67.                 {% for item in attraction.images %}
  68.                     <div class="slick-slide">
  69.                         <div class="attraction-item">
  70.                             <div class="img-box"><img src="{{ item }}" width="100%"
  71.                                                       alt="attraction"></div>
  72.                         </div>
  73.                     </div>
  74.                 {% endfor %}
  75.             </div>
  76.         {% endif %}
  77.         {% if attraction.minHeightWithAdult or attraction.minHeightAlone %}
  78.             <div class="description-wrapper second"
  79.                  style="{{ attraction.images|length > 3 ? 'margin: 75px 211px' : '' }}">
  80.                 {% if attraction.minHeightWithAdult %}
  81.                     <div class="item">
  82.                         <span class="title">{{'Մինիմում հասակ մեծահասակի հետ'|trans}}</span>
  83.                         <span>{{ attraction.minHeightWithAdult }}</span>
  84.                     </div>
  85.                 {% endif %}
  86.                 {% if  attraction.minHeightAlone %}
  87.                     <div class="item">
  88.                         <span class="title">{{'Մինիմում հասակ միայնակ'|trans}}</span>
  89.                         <span>{{ attraction.minHeightAlone }}</span>
  90.                     </div>
  91.                 {% endif %}
  92.                 {% if  attraction.maxHeight %}
  93.                     <div class="item">
  94.                         <span class="title">{{'Մաքսիմում հասակ'|trans}}</span>
  95.                         <span>{{ attraction.maxHeight }}</span>
  96.                     </div>
  97.                 {% endif %}
  98.             </div>
  99.         {% endif %}
  100.         {% if  attraction.video %}
  101.             <div class="video-wrapper  my-container-fluid mt-5 mb-5">
  102.                 <video  muted autoplay loop  id="attraction-video">
  103.                     <source src="{{ attraction.video }}">
  104.                 </video>
  105.                  <button class="play-button"  id="playBtn" onclick="toggleVideoPlay()">{{ svg('public/static_images/svg/play.svg')|raw }}</button>
  106.             </div>
  107.         {% endif %}
  108.         {% if attraction.prohibitedCases is not empty %}
  109.             <div class="advice-wrapper my-container-fluid">
  110.                 <div class="standard-title color-darkblue">
  111.                     {{ 'Մի՛ օգտվեք ատրակցիոններից հետևյալ դեպքերում'|trans }}
  112.                 </div>
  113.                 <div class="advices">
  114.                     {% for item in attraction.prohibitedCases %}
  115.                         <div class="advice">
  116.                             <img src="{{ item.image }}" alt="{{ item.title }}">
  117.                             <span>{{ item.title }}</span>
  118.                         </div>
  119.                     {% endfor %}
  120.                 </div>
  121.             </div>
  122.         {% endif %}
  123.         <div class="important-wrapper my-container-fluid">
  124.             <div class="standard-title color-darkblue">
  125.                 {{ 'Կարևոր է իմանալ'|trans }}
  126.             </div>
  127.             <div class="important">
  128.                 <div class="item {% if attraction.maximumSeatWeight is  empty %}isOne{% endif %}">
  129.                     <img src="{{ asset('static_images/smartphone.png') }}" alt="smartphone">
  130.                     <span>{{ attraction.phoneAllowed ? 'Հեռախոս թույլատրվում է'|trans : 'Հեռախոս չի թույլատրվում'|trans }}</span>
  131.                 </div>
  132.                 {% if  attraction.maximumSeatWeight is not empty %}
  133.                     <div class="item">
  134.                         <img src="{{ asset('static_images/kg.png') }}" alt="{{ attraction.title }}">
  135.                         <span>{{ 'Նստատեղի առավելագույն քաշը՝'|trans }} {{ attraction.maximumSeatWeight }}{{ 'կգ'|trans }}</span>
  136.                     </div>
  137.                 {% endif %}
  138.             </div>
  139.         </div>
  140.         {% if attractions %}
  141.             <div class="other-attraction-slick-wrapper my-container-fluid"
  142.                  style=" {{ attractions|length < 3 ?   'margin:75px 0 0' }}">
  143.                 <div class="standard-title color-darkblue">
  144.                     {{ 'ԱՅԼ ԱՏՐԱԿՑԻՈՆՆԵՐ'|trans }}
  145.                 </div>
  146.                 <div class="other-attraction-slick">
  147.                     {% for item in attractions %}
  148.                         <div class="slick-slide">
  149.                             <div class="attraction-item">
  150.                                 <a href="{{ path('page_attractions_view',{'slug':item.slug}) }}">
  151.                                     <div class="img-box">
  152.                                         <img src="{{ item.image| imagine_filter('thumbnail_slide') }}" width="100%"
  153.                                              alt="{{ item.title }}">
  154.                                     </div>
  155.                                     <div class="title color-darkblue">{{ item.title }}</div>
  156.                                     <div class="text color-darkblue">{{ item.description|raw }}</div>
  157.                                 </a>
  158.                             </div>
  159.                         </div>
  160.                     {% endfor %}
  161.                 </div>
  162.             </div>
  163.         {% endif %}
  164.         {% block footer %}
  165.             {% include '@web/parts/footer.html.twig' %}
  166.         {% endblock %}
  167.     </section>
  168. {% endblock %}
  169. {% block javascripts %}
  170.     {{ parent() }}
  171.     <script>
  172.         function toggleVideoPlay() {
  173.             const video = document.getElementById('attraction-video');
  174.             const playBtn = document.getElementById('playBtn');
  175.             if (window.innerWidth < 991 ){
  176.                 if (playBtn.style.opacity === "0") {
  177.                     playBtn.style.opacity = "1";
  178.                 } else {
  179.                     playBtn.style.opacity = "0";
  180.                 }
  181.             }
  182.             if (video.paused) {
  183.                 video.play();
  184.                 playBtn.classList.add('button-opacity')
  185.             } else {
  186.                 playBtn.classList.remove('button-opacity')
  187.                 video.pause();
  188.             }
  189.         }
  190.     </script>
  191. {% endblock %}