src/Frontend/OpenSpaceBundle/Resources/views/Default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'themes/'~ themes ~'/prague.html.twig' %}
  3. {% block page_style %}
  4.    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i&display=swap&subset=latin-ext,vietnamese" rel="stylesheet">
  5.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  6.    <link href="https://fonts.googleapis.com/css?family=Be+Vietnam:100,100i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap&subset=latin-ext,vietnamese" rel="stylesheet">
  7.    <link rel="stylesheet" type="text/css" href="{{ asset(themes) }}/js/vendor/OwlCarousel2-2.3.4/dist/assets/owl.carousel.css"/>
  8.    <link rel="stylesheet" type="text/css" href="{{ asset(themes) }}/js/vendor/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.css"/>
  9.    <link rel="stylesheet" type="text/css" href="{{ asset(themes) }}/js/vendor/animate/animate.css"/>
  10.    <link rel="stylesheet" type="text/css" href="{{ asset(themes) }}/js/vendor/pagePiling.js-master/dist/jquery.pagepiling.min.css"/>
  11. {#   <link rel="stylesheet" type="text/css" href="{{ asset(themes) }}/prague/css/header.css"/>#}
  13.    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  15.    <link rel="stylesheet" type="text/css" href="{{ asset(themes) }}/css/style.css"/>
  16.    <link rel="stylesheet" type="text/css" href="{{ asset(themes) }}/css/loader.css"/>
  17. {% endblock %}
  19. {% block loader %}
  20.    <div id="loader-wrapper">
  21.       <img src="{{ asset(themes) }}/img/logo-square.png" id="loader-logo"/>
  22.       <div id="loader"></div>
  24.       <div class="loader-section section-left"></div>
  25.       <div class="loader-section section-right"></div>
  27.    </div>
  28. {% endblock %}
  30. {% block body %}
  32.    {% set index = 0 %}
  33.    <div id="pagepiling">
  34.       {% for slider in sliders %}
  36.          {% if slider.banners is not empty %}
  37.             {% set index = index + 1 %}
  38.          <div class="section">
  39.             <div class="owl-carousel amz-owl-carousel" id="owl-carousel-{{ index }}">
  40.                {% for banner in slider.banners %}
  41.                   {% if banner.deleted == 0 %}
  43.                <div class="amz-slide">
  44. {#               <div class="amz-slide" data-animate="">#}
  45.                   <img src="{{ banner.image }}" class="img-fluid"   data-animation-in="zoomIn" data-duration-in="1"/>
  46.                   <div class="section-description" data-animation-in="zoomIn" data-delay-in="0.3">
  47.                      <h3 class="section-title">{{ banner.title | raw }}</h3>
  48.                      <p>{{ banner.description | striptags }}</p>
  49.                   </div>
  50.                </div>
  51.                   {% endif %}
  52.                {% endfor %}
  54. {#               <div class="">#}
  55. {#                  <div class="section-description">#}
  56. {#                     <h3 class="section-title">BIỆT THỰ - NHÀ PHỐ</h3>#}
  57. {#                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>#}
  58. {#                  </div>#}
  59. {#                  <img src="{{ asset(themes) }}/img/biet-thu-2.png" class="img-fluid"/>#}
  60. {#               </div>#}
  61.             </div>
  62.          </div>
  64.          {% endif %}
  65.       {% endfor %}
  68. {#      <div class="section">#}
  69. {#         <div class="owl-carousel" id="owl-carousel-2">#}
  70. {#            <div class="">#}
  71. {#               <div class="section-description">#}
  72. {#                  <h3 class="section-title">VĂN PHÒNG - SHOWROOM</h3>#}
  73. {#                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>#}
  74. {#               </div>#}
  76. {#               <img src="{{ asset(themes) }}/img/dich-vu-1.png" class="img-fluid"/>#}
  77. {#            </div>#}
  79. {#            <div class="">#}
  80. {#               <div class="section-description">#}
  81. {#                  <h3 class="section-title">VĂN PHÒNG - SHOWROOM</h3>#}
  82. {#                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>#}
  83. {#               </div>#}
  84. {#               <img src="{{ asset(themes) }}/img/dich-vu-2.png" class="img-fluid"/>#}
  85. {#            </div>#}
  86. {#         </div>#}
  87. {#      </div>#}
  89.       {% for banner in homepageSection %}
  90.          {% set index = index + 1 %}
  91. {#      <div class="section">#}
  92. {#         <div class="owl-carousel amz-owl-carousel" id="owl-carousel-{{ index }}">#}
  93. {#            <div class="">#}
  94. {#               <div class="section-description">#}
  95. {#                  <h3 class="section-title">{{ banner.title | upper }}</h3>#}
  96. {#                  <p>{{ banner.description | striptags }}</p>#}
  97. {#               </div>#}
  98. {#               <img src="{{ banner.image }}" class="img-fluid"/>#}
  99. {#            </div>#}
  100. {#         </div>#}
  101. {#      </div>#}
  102.       {% endfor %}
  104. {#      <div class="section">#}
  105. {#         <div class="owl-carousel amz-owl-carousel" id="owl-carousel-4">#}
  106. {#            <div class="">#}
  107. {#               <div class="section-description">#}
  108. {#                  <h3 class="section-title">{{ aboutUsSlider. }}</h3>#}
  109. {#                  <p>{{ articleSlider.description | striptags }}</p>#}
  110. {#               </div>#}
  111. {#               <img src="{{ articleSlider.image }}" class="img-fluid"/>#}
  112. {#            </div>#}
  113. {#         </div>#}
  114. {#      </div>#}
  116. {#      <div class="section">#}
  117. {#         <div class="owl-carousel" id="owl-carousel-5">#}
  118. {#            <div class="">#}
  119. {#               <div class="section-description">#}
  120. {#                  <h3 class="section-title">ĐỐI TÁC - KHÁCH HÀNG</h3>#}
  121. {#                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>#}
  122. {#               </div>#}
  123. {#               <img src="{{ asset(themes) }}/img/biet-thu-2.png" class="img-fluid"/>#}
  124. {#            </div>#}
  125. {#         </div>#}
  126. {#      </div>#}
  128. {#      <div class="section">#}
  129. {#         <div class="owl-carousel" id="owl-carousel-6">#}
  130. {#            <div class="">#}
  131. {#               <div class="section-description">#}
  132. {#                  <h3 class="section-title">LIÊN HỆ</h3>#}
  133. {#                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>#}
  134. {#               </div>#}
  135. {#               <img src="{{ asset(themes) }}/img/dich-vu-1.png" class="img-fluid"/>#}
  136. {#            </div>#}
  137. {#         </div>#}
  138. {#      </div>#}
  139.    </div>
  140.    <script>
  141.       let maxIndex = {{ index }};
  142.    </script>
  144. {% endblock %}
  146. {% block page_script %}
  148.    <script type="text/javascript" src="{{ asset(themes) }}/js/vendor/jquery-1.12.4.min.js"></script>
  149.    <script type="text/javascript" src="{{ asset(themes) }}/js/bootstrap.min.js"></script>
  150.    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  151.    <script type="text/javascript" src="{{ asset(themes) }}/js/vendor/OwlCarousel2-2.3.4/dist/owl.carousel.js"></script>
  152.    <script type="text/javascript" rel="script" src="{{ asset(themes) }}/js/bower_components/slick-animation/slick-animation.min.js"></script>
  153.    <script type="text/javascript" rel="script" src="{{ asset(themes) }}/js/vendor/pagePiling.js-master/dist/jquery.pagepiling.min.js"></script>
  154.    <script type="text/javascript">
  155.       jQuery(document).ready(function() {
  157.          $('#pagepiling').pagepiling({
  159.             afterRender:function(){
  160.                let firstSlider = '#owl-carousel-1';
  161.                $(firstSlider).owlCarousel({
  162.                   items:1,
  163.                   loop:true,
  164.                   // autoHeight:true,
  165.                   autoWidth:false,
  166.                   autoplay:true,
  167.                   animateOut: 'fadeOut',
  168.                   animateIn: 'rotateInDownLeft',
  169.                   autoplayTimeout: 30000,
  170.                   onTranslated: animateSlide,
  171.                   onTranslate: removeAnimation
  173.                });
  175.                // $(firstSlider).slick({
  176.                //    autoplay:true,
  177.                //    autoplaySpeed: 5000,
  178.                //    prevArrow:"",
  179.                //    nextArrow:"",
  180.                //    // fade:true,
  181.                //    // speed:1000
  182.                // }).slickAnimation();
  185.             },
  186.             afterLoad:function (anchorLink, index) {
  187.                // let banner = "#owl-carousel-"+index;
  188.                // $(banner).owlCarousel({
  189.                //    items:1,
  190.                //    loop:true,
  191.                //    // autoHeight:true,
  192.                //    autoWidth:true,
  193.                //    autoplay:true,
  194.                //    animateOut: 'slideOutDown',
  195.                //    animateIn: 'rotateIn',
  196.                // });
  197.             }
  198.          });
  200.          // Other Slides
  201.          function removeAnimation() {
  202.             var item = $(".owl-item");
  203.             var image = $(".owl-item img");
  204.             image.removeClass(item.children().data('animate'));
  206.          }
  208.          function animateSlide() {
  210.             var item = $(".owl-item.active");
  211.             var image = $(".owl-item.active img");
  212.             image.addClass(item.children().data('animate'));
  215.          }
  217.          function changeSlide(){
  218.             // var item = $(".owl-item.active");
  219.             // item.addClass(item.children().data('animate-out'));
  220.          }
  222.          for(let i = 2; i<=maxIndex; i++){
  223.             let banner = "#owl-carousel-"+i;
  224.             $(banner).owlCarousel({
  225.                items:1,
  226.                loop:true,
  227.                // autoHeight:true,
  228.                autoWidth:false,
  229.                autoplay:true,
  230.                animateOut: 'fadeOut',
  231.                animateIn: 'rotateInDownLeft',
  232.                autoplayTimeout: 10000
  233.             });
  235.             // console.log(banner);
  236.             // $(banner).slick({
  237.             //    prevArrow:"",
  238.             //    nextArrow:"",
  239.             //    variableWidth: true,
  240.             // });
  241.          }
  244.          //set position of loader
  245.          var offset = $('#loader').offset();
  246.          var left = offset.left;
  247.          var top = offset.top;
  249.          $("#loader-logo").css({
  250.             'left': left + 45,
  251.             'top': top + 35
  252.          });
  254.          // $("#owl-carousel-2").owlCarousel({
  255.          //    items:1
  256.          // });
  257.       });
  258.    </script>
  259. {% endblock %}
  261. {% block footer %}
  262.    <footer class="amz-trans">
  263.       <div class="text-center">
  264.          ©{{ 'now' | date("Y") }} | Bản quyền thuộc về công ty openspace.com.vn
  265.       </div>
  266.    </footer>
  267. {% endblock %}