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

  1. {% extends '@web/base.html.twig' %}
  3. {% if page is defined and page is not empty %}
  4.     {% set metaParams = {
  5.         'title': page.metaTitle ? page.metaTitle : page.title,
  6.         'metaDescription': page.metaDescription,
  7.         'metaKeywords': page.metaKeywords,
  8.         'image':(page.metaImage is defined ? page.metaImage : page.image is defined ? page.image : null)
  9.     } %}
  10. {% else %}
  11.     {% set metaParams = {} %}
  12. {% endif %}
  14. {% block meta %}
  15.     {% include '@web/parts/meta.html.twig' with metaParams %}
  16. {% endblock meta %}
  18. {% block content %}
  19.     <section class="section-food"
  20.             {% if page and page.backgroundImage is not null %}
  21.         style="background-image: url('{{ page.backgroundImage }}');"
  22.             {% endif %}>
  23.         {% block header %}
  24.             {% include '@web/parts/header.html.twig' %}
  25.         {% endblock %}
  26.         <div class="my-container-fluid">
  28.             <div class="food-wrapper">
  29.                 {% if foodSlider is not empty %}
  30.                     <div class="slider slider-banner menuCourt-slick">
  31.                         {% for item in foodSlider %}
  32.                             <div class="slick-slide">
  33.                                 <div class="item">
  34.                                     <img src="{{ item.image|imagine_filter('thumbnail_view') }}" width="100%"
  35.                                          alt="{{ item.id }}">
  37.                                 </div>
  38.                             </div>
  39.                         {% endfor %}
  40.                     </div>
  42.                 {% endif %}
  44.                 <div class="info-content">
  45.                     <div class="standard-text">{{ 'Ծանոթացի՛ր Food Court -ի ճաշացանկին այստեղ'|trans }}</div>
  46.                     <a target="_blank" href="{{ page and page.file ? page.file : '#' }}"
  47.                        class="btn-red menu-btn">{{ 'ՃԱՇԱՑԱՆԿ'|trans }}</a>
  48.                     <div class="title">{{ 'ԱՄԵՆԱՇԱՏ ՊԱՏՎԻՐՎՈՂ'|trans }} <span>5</span> {{ 'ՈՒՏԵՍՏՆԵՐԸ'|trans }}</div>
  49.                 </div>
  50.                 {% if foodCourtMenu is not empty %}
  51.                     <div class="menu-slick">
  52.                         {% for item in foodCourtMenu %}
  53.                             <div class="slick-slide">
  54.                                 <div class="item">
  55.                                     <div class="img-box">
  56.                                         <div class="number">{{ loop.index }}</div>
  58.                                         <img src="{{ item.image|imagine_filter('thumbnail_view') }}" width="100%"
  59.                                              alt="{{ item.id }}">
  61.                                     </div>
  62.                                     <div class="title color-darkblue">{{ item.title }}</div>
  64.                                 </div>
  65.                             </div>
  66.                         {% endfor %}
  67.                     </div>
  68.                 {% endif %}
  70.                 {% if childrensComboSlider is not empty %}
  71.                     <div class="childrens-menu-slick-wrapper">
  72.                         <div class="title">{{ 'Մանկական կոմբո'|trans }}</div>
  73.                         <div class="childrens-menu-slick">
  75.                             {% for item in childrensComboSlider %}
  76.                                 <div class="slick-slide">
  77.                                     <div class="menu-item ">
  78.                                         <div class="img-box">
  79.                                             <img class="mb-sm-3" src="{{ item.image|imagine_filter('thumbnail_view') }}" width="100%"
  80.                                                  alt="{{ item.title }}">
  81.                                             <div class="title color-darkblue ">{{ item.title }}</div>
  83.                                         </div>
  84.                                         <div class="box-info">{{ item.body|raw }} </div>
  86.                                     </div>
  87.                                 </div>
  88.                             {% endfor %}
  89.                         </div>
  91.                     </div>
  92.                 {% endif %}
  94.             </div>
  95.             {% if page and page.video is not empty %}
  96.             <div class="pt-4">
  97.                 <div class="video-wrapper">
  98.                     <video  muted autoplay loop  id="food-video">
  99.                         <source src="{{ page.video }}">
  100.                     </video>
  101.                      <button class="play-button"  id="playBtn" onclick="toggleVideoPlay()">{{ svg('public/static_images/svg/play.svg')|raw }}</button>
  102.                 </div>
  103.             </div>
  104.             {% endif %}
  105.         </div>
  107. {#        <div class="mt-5 my-container-fluid" style="min-height: 1000px;position: relative;top: 220px">#}
  108. {#            <div class="ice-creams" style="display: flex;#}
  109. {#                    width: 88%;#}
  110. {#                    justify-content: flex-end;#}
  111. {#                    position: absolute;#}
  112. {#                    gap:20px;#}
  113. {#                    #}{#padding-right: {{ iceCreams|length }}vw;#}
  114. {#                    ">#}
  115. {#                {% for item in iceCreams %}#}
  116. {#                    <img style="    position: relative; top: {{ -190 + (loop.index == iceCreams|length ? 20 * loop.index : 15 * loop.index) }}px;#}
  117. {#                            z-index: 1;" src="{{ item.image }}" alt="" width="150px">#}
  119. {#                {% endfor %}#}
  120. {#            </div>#}
  121. {#            <div class="text-center">#}
  122. {#                <img style="z-index: 2;position: relative" src="{{ asset('static_images/ice-cream-bus.png') }}" width="80%" alt="">#}
  124. {#            </div>#}
  125. {#        </div>#}
  126.         <div class="ice-cream-wrapper mt-5 my-container-fluid" id="ice-cream-wrapper">
  127.             <img id="ice-cream-logo" class="ice-cream-logo vert-move"
  128.                  src="{{ asset('static_images/ice-cream-logo.png') }}" alt="ice-cream">
  129.             <img class="banner-image" src="{{ page.image }}" width="100%" alt="ice-cream">
  130.             <div class="ice-cream-area">
  131.             {% for item in iceCreams %}
  132.                 <div class=" ice-cream " style="background: linear-gradient(180deg, {{ item.color }} 0%, rgba(255, 255, 255, 1) 80%);">
  133.             <img src="{{ item.image|imagine_filter('thumbnail_slide') }}" alt="{{ item.title }}" width="100%">
  134.             <div class="title  mb-0 text-uppercase" style="color: {{ item.color }}">{{ item.title }}</div>
  135.         </div>
  137.         {% endfor %}
  139.         </div>
  140.             <div class="videos-wrapper">
  141.             {% if  iceCreamVideos is not empty %}
  142.                 {% for item in iceCreamVideos %}
  143.                     <div class="pt-4">
  144.                         <div class="video-wrapper">
  145.                             <video  loop autoplay muted id="food-video{{ item.id }}">
  146.                                 <source src="{{ item.video }}">
  147.                             </video>
  148. {#                             <button class="play-button"  id="playBtn{{ item.id }}" onclick="toggleVideoPlay('{{ item.id }}')">{{ svg('public/static_images/svg/play.svg')|raw }}</button>#}
  149.                         </div>
  150.                     </div>
  152.                 {% endfor %}
  153.             {% endif %}
  154.             </div>
  155.         </div>
  158. {#        background: linear-gradient(180deg, rgb(0 0 114) 0%, rgba(255, 255, 255, 1) 100%);#}
  159.         {% block footer %}
  160.             {% include '@web/parts/footer.html.twig' %}
  161.         {% endblock %}
  162.         <script>
  163.             document.getElementById('ice-cream-logo').addEventListener('click', function (e) {
  164.                 document.getElementById("ice-cream-wrapper").scrollIntoView()
  166.             });
  168.             window.addEventListener('scroll', () => {
  169.                 if (window.scrollY < 400) {
  170.                     document.getElementById('ice-cream-logo').style.display = "flex";
  171.                 } else {
  172.                     document.getElementById('ice-cream-logo').style.display = "none";
  173.                 }
  174.             });
  175.             function toggleVideoPlay(itemId = '') {
  176.                 const video = document.getElementById('food-video'+itemId);
  177.                 const playBtn = document.getElementById('playBtn'+itemId);
  178.                 if (window.innerWidth < 991 ){
  179.                     if (playBtn.style.opacity === "0") {
  180.                         playBtn.style.opacity = "1";
  181.                     } else {
  182.                         playBtn.style.opacity = "0";
  183.                     }
  184.                 }
  185.                 if (video.paused) {
  186.                     video.play();
  187.                     playBtn.classList.add('button-opacity')
  188.                 } else {
  189.                     playBtn.classList.remove('button-opacity')
  190.                     video.pause();
  191.                 }
  192.             }
  193.         </script>
  195.     </section>
  196. {% endblock %}