templates/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block canonical %}
  3.     <link rel="canonical" href="https://www.kultura-sport.cz">
  4. {% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7. {% endblock %}
  8. {% block body %}
  9.     <div id="rev_slider_1014_1_wrapper" class="rev_slider_wrapper ms-hero-rev fullscreen-container" data-alias="typewriter-effect" data-source="gallery" style="background-color:transparent;padding:0px;">
  10.         <div class="news"><h3>NEWS</h3></div>
  11.         <div class="newspad"></div>
  12.         <div class="container" style="position: relative;">
  13.             <div id="id-header-btn-news" style="display: none">
  14.                 <i class="fa fa-question-circle"></i>
  15.                 <h3 class="ff-rc">NEWS FEED</h3>
  16.             </div>
  17.             {% if pageinfo.info != '' %}
  18.                 <div class="container">
  19.                     <div id="id-header-news" class="header-news-homepage">
  20.                         <i class="fa fa-info-circle"></i>
  21.                         <div class="marquee">
  22.                             <div class="marquee-content">{{ pageinfo.info|raw }}</div>
  23.                         </div>
  24.                     </div>
  25.                 </div>
  26.             {% endif %}
  27.         </div>
  28.         <!-- START REVOLUTION SLIDER 5.3.0.2 fullscreen mode -->
  29.         <div id="rev_slider_1014_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.3.0.2">
  30.             <ul>    <!-- SLIDE  -->
  31.                 <li data-index="rs-2800" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-thumb="assets/img/demo/back_video_100x50.jpg"  data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
  32.                     <!-- MAIN IMAGE -->
  33.                     <img src="/assets/custom/img/kas_dron_bg.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" class="rev-slidebg" data-no-retina>
  34.                     <!-- LAYERS -->
  35.                     <!-- BACKGROUND VIDEO LAYER -->
  36.                     <div class="rs-background-video-layer"
  37.                          data-forcerewind="on"
  38.                          data-volume="mute"
  39.                          data-videowidth="100%"
  40.                          data-videoheight="100%"
  41.                          data-videomp4="assets/media/kas_dron_web.mp4"
  42.                          data-videopreload="auto"
  43.                          data-videoloop="loop"
  44.                          data-forceCover="1"
  45.                          data-aspectratio="16:9"
  46.                          data-autoplay="true"
  47.                          data-autoplayonlyfirsttime="false"
  48.                     ></div>
  49.                     <!-- LAYER NR. 1 -->
  50.                     <div class="tp-caption tp-shape tp-shapewrapper "
  51.                          id="slide-2800-layer-7"
  52.                          data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
  53.                          data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
  54.                          data-width="full"
  55.                          data-height="full"
  56.                          data-whitespace="nowrap"
  57.                          data-type="shape"
  58.                          data-basealign="slide"
  59.                          data-responsive_offset="off"
  60.                          data-responsive="off"
  61.                          data-frames='[{"from":"opacity:0;","speed":500,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"speed":5000,"to":"opacity:0;","ease":"Power4.easeInOut"}]'
  62.                          data-textAlign="['left','left','left','left']"
  63.                          data-paddingtop="[0,0,0,0]"
  64.                          data-paddingright="[0,0,0,0]"
  65.                          data-paddingbottom="[0,0,0,0]"
  66.                          data-paddingleft="[0,0,0,0]"
  67.                          style="z-index: 5; background-color:rgba(0, 0, 0, 0.50);border-color:rgba(0, 0, 0, 0);border-width:0px;"> </div>
  68.                     <!-- LAYER NR. 2 -->
  69.                     <div class="tp-caption tp-resizeme"
  70.                          id="slide-2800-layer-1"
  71.                          data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
  72.                          data-y="['middle','middle','middle','middle']" data-voffset="['-80','-80','-130','-157']"
  73.                          data-fontsize="['130','130','100','80']"
  74.                          data-lineheight="['130','130','100','80']"
  75.                          data-width="none"
  76.                          data-height="none"
  77.                          data-whitespace="nowrap"
  78.                          data-type="text"
  79.                          data-responsive_offset="on"
  80.                          data-frames='[{"from":"y:50px;sX:1;sY:1;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
  81.                          data-textAlign="['center','center','center','center']"
  82.                          data-paddingtop="[0,0,0,0]"
  83.                          data-paddingright="[0,0,0,0]"
  84.                          data-paddingbottom="[0,0,0,0]"
  85.                          data-paddingleft="[0,0,0,0]"
  86.                          style="z-index: 6; white-space: nowrap; font-size: 130px; line-height: 130px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Arial, Helvetica, sans-serif;border-width:0px;letter-spacing:-7px;">
  87.                         <img src="/assets/custom/img/logo_kas_w.png" class="kas-logo" alt="Kultura a Sport Chomutov" >
  88.                     </div>
  89.                     <!-- LAYER NR. 5 -->
  90.                     <div class="tp-caption rev-btn tp-resizeme header-btn"
  91.                          data-x="['right','right','center','center']" data-hoffset="['660','550','0','0']"
  92.                          data-y="['middle','middle','middle','middle']" data-voffset="['240','240','100','83']"
  93.                          data-width="none"
  94.                          data-height="none"
  95.                          data-whitespace="nowrap"
  96.                          data-link="/program"
  97.                          data-type="button"
  98.                          data-actions=''
  99.                          data-responsive_offset="on"
  100.                          data-frames='[{"from":"x:-50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 0);bw:2px 2px 2px 2px;"}]'
  101.                          data-textAlign="['left','left','left','left']"
  102.                          data-paddingtop="[0,0,0,0]"
  103.                          data-paddingright="[50,50,50,50]"
  104.                          data-paddingbottom="[0,0,0,0]"
  105.                          data-paddingleft="[50,50,50,50]"
  106.                          style="z-index: 7;">PROGRAM</div>
  107.                     <!-- LAYER NR. 6 -->
  108.                     <div class="tp-caption   tp-resizeme"
  109.                          data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
  110.                          data-y="['middle','middle','middle','middle']" data-voffset="['237','237','158','141']"
  111.                          data-width="none"
  112.                          data-height="none"
  113.                          data-whitespace="nowrap"
  114.                          data-type="text"
  115.                          data-responsive_offset="on"
  116.                          data-frames='[{"from":"y:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
  117.                          data-textAlign="['left','left','left','left']"
  118.                          data-paddingtop="[0,0,0,0]"
  119.                          data-paddingright="[0,0,0,0]"
  120.                          data-paddingbottom="[0,0,0,0]"
  121.                          data-paddingleft="[0,0,0,0]"
  122.                          style="z-index: 10; white-space: nowrap; font-size: 25px; line-height: 25px; font-weight: 300; color: rgba(255, 255, 255, 1.00);font-family:Roboto, sans-serif;border-width:0px;"> <img src="/assets/custom/img/kascv_logo_white_50_notext.png" > </div>
  123.                     <!-- LAYER NR. 7 -->
  124.                     <div class="tp-caption rev-btn tp-resizeme header-btn"
  125.                          data-x="['left','left','center','center']" data-hoffset="['660','550','0','0']"
  126.                          data-y="['middle','middle','middle','middle']" data-voffset="['240','240','224','207']"
  127.                          data-width="none"
  128.                          data-height="none"
  129.                          data-whitespace="nowrap"
  130.                          data-link="/kontakty"
  131.                          data-type="button"
  132.                          data-actions=''
  133.                          data-responsive_offset="on"
  134.                          data-frames='[{"from":"x:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 0);bw:2px 2px 2px 2px;"}]'
  135.                          data-textAlign="['left','left','left','left']"
  136.                          data-paddingtop="[0,0,0,0]"
  137.                          data-paddingright="[50,50,50,50]"
  138.                          data-paddingbottom="[0,0,0,0]"
  139.                          data-paddingleft="[50,50,50,50]"
  140.                          style="z-index: 11;">KONTAKTY </div>
  141.                 </li>
  142.                 {% include 'partials/slides.html.twig' %}
  143.             </ul>
  144.             <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
  145.         </div>
  146.     </div><!-- END REVOLUTION SLIDER -->
  147.     <div class="container" style="margin-bottom: 100px">
  148.         <h1 class="right-line right-line">Nepřehlédněte</h1>
  149.         {%  if top_events|length >0 %}
  150.         <div class="owl-dots"></div>
  151.         <div class="owl-carousel owl-theme">
  152.             {% set i = 1  %}
  153.             {% for event in top_events %}
  154.                 {# @var event \App\Controller\Objects\HomeCarouselItem #}
  155.                 <div class="card {% if not event.past %}card-primary{% endif %} animation-delay-5 pointer-event" title="{{ event.title }}">
  156.                     <div class="card-header">
  157.                         <h3 class="card-title"><i class="zmdi zmdi-calendar"></i> {{ event.date }}</h3>
  158.                     </div>
  159.                     <div class="withripple zoom-img">
  160.                         <a href="{{ event.link }}">
  161.                             <img src="{{ event.picture.small }}" alt="" class="img-fluid {% if event.past %}grayscale{% endif %}">
  162.                         </a>
  163.                         <span class="badge badge-primary pull-right badge-custom uppercase">{{ event.object }}</span>
  164.                         <div class="ripple-container"></div></div>
  165.                     <div class="card-body overflow-hidden text-center">
  166.                         <h4 class="color-black uppercase inline-text">{{ event.title }}</h4>
  167.                        <!-- <p>{{ event.text }}</p> -->
  168.                     </div>
  169.                 </div>
  170.             {% endfor %}
  171.         </div>
  172.         {% endif %}
  173.         {%  if facebook_feed|length >0 %}
  174.             <div class="row">
  175.                 {% for event in facebook_feed %}
  176.                 {# @var event \App\Controller\Objects\HomeFacebookItem #}
  177.                 <div class="col-lg-3 col-md-3 col-sm-6">
  178.                     <div class="card">
  179.                         <figure class="ms-thumbnail ms-thumbnail-horizontal">
  180.                             <img class="img-fluid facebook-img" src="{{ event.picture }}" alt="">
  181.                         </figure>
  182.                         <div class="card-body overflow-hidden card-facebook-stream">
  183.                             <a href="{{ event.link }}" class="btn-circle btn-circle btn-facebook btn-circle-raised btn-card-float right wow zoomInDown index-2" style="visibility: visible; animation-name: zoomInDown;"><i class="zmdi zmdi-facebook"></i></a>
  184.                             <h4 class="no-margin facebook-stream" title="{{ event.title }}" >{{ event.title }}</h4>
  185.                         </div>
  186.                     </div>
  187.                 </div>
  188.                 {% endfor %}
  189.             </div>
  190.         {% endif %}
  191.     </div>
  192.     <div class="ms-hero-page-override ms-chomutov-img" style="margin-bottom: 130px; display: none" >
  193.         <div class="container">
  194.             <div class="row">
  195.                 <div class="col-lg-6 col-md-12" >
  196.                 </div>
  197.                 <div class="col-lg-6 col-md-12">
  198.                     <h2 style="font-size: 70px; font-weight: 900; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; margin-top: 270px">CELOROČNÍ VYŽITÍ V CHOMUTOVĚ</h2>
  199.                     <p class="lead lead-lg color-light mt-2 mw-800 fw-300 animated fadeInUp animation-delay-7" style="font-size: 20px">Spravujeme pro vás celoročně objekty určené ke společenskému a sportovnímu vyžití v Chomutově. Lorem ipsum dolor sit amet, consectetur alter adipisicing elit.</p>
  200.                 </div>
  201.             </div>
  202.             <div class="text-center" style="display: none">
  203.                 <h1 class="no-m ms-site-title color-white center-block ms-site-title-lg mt-2 animated zoomInDown animation-delay-5">Spravujeme</h1>
  204.                 <p class="lead lead-lg color-light text-center center-block mt-2 mw-800 text-uppercase fw-300 animated fadeInUp animation-delay-7">objekty určené ke společenskému a sportovnímu vyžití v Chomutově</p>
  205.             </div>
  206.         </div>
  207.     </div>
  208.     <div class="kasepar">
  209.         <img src="/assets/custom/img/logo_kas.png">
  210.     </div>
  211.     <div class="container">
  212.         <div class="row d-flex justify-content-center card-top">
  213.             <h1 class="right-line">Spravujeme</h1>
  214.             {% for object in objects %}
  215.                 {# @var object \App\Controller\Objects\HomeObjectItem #}
  216.                     <div class="col-lg-4 col-md-6">
  217.                         <div class="card card-{{ object.colorClass }} wow zoomInUp mb-4 animation-delay-5" style="visibility: visible; animation-name: zoomInUp;">
  218.                             <div class="withripple zoom-img">
  219.                                 <a href="{{ object.link }}" class=""><img src="{{ object.picture.small }}" alt="..." class="img-fluid"></a>
  220.                                 <div class="ripple-container"></div></div>
  221.                             <div class="card-body">
  222.                                 <span class="badge badge-{{ object.colorClass }} pull-right">{{ object.category }}</span>
  223.                                 <h3 class="ff-rc">{{ object.title }}</h3>
  224.                                 <div style="height: 50px">
  225.                                 <p>{{ object.text }}</p>
  226.                                 </div>
  227.                                 <div class="row">
  228.                                     <div class="col">
  229.                                         <a href="{{ object.link }}/fotogalerie" class="btn-circle btn-circle-raised btn-circle-xs mt-1 mr-1 no-mr-md btn-kas"><i class="zmdi zmdi-collection-image-o"></i></a>
  230.                                     </div>
  231.                                     <div class="col text-right">
  232.                                         <a href="{{ object.link }}" class="btn btn-raised btn-sm btn-{{ object.colorClass  }}"><i class="zmdi zmdi-arrow-right"></i> Více informací</a>
  233.                                     </div>
  234.                                 </div>
  235.                             </div>
  236.                         </div>
  237.                     </div>
  238.             {% endfor %}
  239.         </div>
  240.     </div>
  241. {% endblock %}
  242. {% block javascripts %}
  243.     {{ parent() }}
  244.     <!-- REVOLUTION JS FILES -->
  245.     <script type="text/javascript" src="/assets/plugins/revolution/revolution/js/jquery.themepunch.tools.min.js"></script>
  246.     <script type="text/javascript" src="/assets/plugins/revolution/revolution/js/jquery.themepunch.revolution.min.js"></script>
  247.     <script type="text/javascript" src="/assets/plugins/revolution/revolution/js/extensions/revolution.extension.video.min.js"></script>
  248.     <script type="text/javascript" src="/assets/plugins/revolution/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
  249.     <script type="text/javascript" src="/assets/plugins/revolution/revolution/js/extensions/revolution.extension.actions.min.js"></script>
  250.     <script type="text/javascript" src="/assets/plugins/revolution/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
  251.     <script type="text/javascript" src="/assets/plugins/revolution/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
  252.     <script type="text/javascript">
  253.         $(function(){
  254.             $('#Container').mixItUp();
  255.             $('.header-btn').on('click', function () {
  256.                 let link = $(this).data('link');
  257.                 goTo(link);
  258.             });
  259.             $('#id-header-btn-contacts').on('click', function () {
  260.                goTo('/kontakty');
  261.             });
  262.             $('.news').on('click', function () {
  263.                 goTo('/news');
  264.             });
  265.         });
  266.         var tpj=jQuery;
  267.         var revapi1014;
  268.         tpj(document).ready(function() {
  269.             if(tpj("#rev_slider_1014_1").revolution == undefined){
  270.                 revslider_showDoubleJqueryError("#rev_slider_1014_1");
  271.             }else{
  272.                 revapi1014 = tpj("#rev_slider_1014_1").show().revolution({
  273.                     sliderType:"standard",
  274.                     jsFileLocation:"assets/plugins/revolution/revolution/js/",
  275.                     sliderLayout:"fullscreen",
  276.                     dottedOverlay:"none",
  277.                     delay:9000,
  278.                     navigation: {
  279.                         keyboardNavigation:"off",
  280.                         keyboard_direction: "horizontal",
  281.                         mouseScrollNavigation:"off",
  282.                         mouseScrollReverse:"default",
  283.                         onHoverStop:"off",
  284.                         touch:{
  285.                             touchenabled:"on",
  286.                             swipe_threshold: 75,
  287.                             swipe_min_touches: 1,
  288.                             swipe_direction: "horizontal",
  289.                             drag_block_vertical: false
  290.                         }
  291.                         ,
  292.                         arrows: {
  293.                             style:"uranus",
  294.                             enable:true,
  295.                             hide_onmobile:true,
  296.                             hide_under:768,
  297.                             hide_onleave:false,
  298.                             tmp:'',
  299.                             left: {
  300.                                 h_align:"left",
  301.                                 v_align:"center",
  302.                                 h_offset:20,
  303.                                 v_offset:0
  304.                             },
  305.                             right: {
  306.                                 h_align:"right",
  307.                                 v_align:"center",
  308.                                 h_offset:20,
  309.                                 v_offset:0
  310.                             }
  311.                         }
  312.                     },
  313.                     responsiveLevels:[1240,1024,778,480],
  314.                     visibilityLevels:[1240,1024,778,480],
  315.                     gridwidth:[1240,1024,778,480],
  316.                     gridheight:[868,768,960,600],
  317.                     lazyType:"none",
  318.                     shadow:0,
  319.                     spinner:"off",
  320.                     stopLoop:"on",
  321.                     stopAfterLoops:0,
  322.                     stopAtSlide:1,
  323.                     shuffle:"off",
  324.                     autoHeight:"off",
  325.                     fullScreenAutoWidth:"off",
  326.                     fullScreenAlignForce:"off",
  327.                     fullScreenOffsetContainer: "",
  328.                     fullScreenOffset: "60px",
  329.                     disableProgressBar:"on",
  330.                     hideThumbsOnMobile:"off",
  331.                     hideSliderAtLimit:0,
  332.                     hideCaptionAtLimit:0,
  333.                     hideAllCaptionAtLilmit:0,
  334.                     debugMode:false,
  335.                     fallbacks: {
  336.                         simplifyAll:"off",
  337.                         nextSlideOnWindowFocus:"off",
  338.                         disableFocusListener:false,
  339.                     }
  340.                 });
  341.             }
  342.         });    /*ready*/
  343.     </script>
  344.     <script src="/assets/js/component-carousels.js"></script>
  345. {% endblock %}