templates/FrontBundle/Page/lounge-club.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  2. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  3. {% block description %}{{ page.metaDescription }}{% endblock %}
  4. {% block extra_class %}native{% endblock %}
  5. {# {% block menu_min %}200{% endblock %} #}
  6. {% block menu_max %}2252{% endblock %}
  7. {% block sub_header %}
  8.     <div class="sub-header">
  9.     <ul>
  10.         <li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  11.         <li class="versailles"><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  12.         <li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  13.         <li class="lounge active"><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  14.     </ul>
  15.   </div>
  16. {% endblock %}
  17. {% block stylesheets %}
  18.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  19.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  20. {% endblock %}
  21. {% block body %}
  22.     <section class="info-header">
  23.       <ul>
  24.           <li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  25.           <li><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
  26.           <li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  27.           <li class="active purple"><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  28.       </ul>
  29.     </section>
  30.     <section class="espace-header" style="background-image: url('/front/img/lounge-slider0.jpg');">
  31.         <div class="shadow-60"></div>
  32.         <div class="container">
  33.           <h1>Lounge club</h1>
  34.           <p>{{ 'lounge_desc'|tr(tr)|raw }}</p>
  35.         </div>
  36.       <a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}" class="order-btn-link">{{ 'general_reserver'|tr(tr)|raw }}</a>
  37.       <ul>
  38.           <li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
  39.           <li><a href="/{{app.request.locale }}/le-versailles">Le versailles</a></li>
  40.           <li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
  41.           <li class="active"><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
  42.       </ul>
  43.     </section>
  44.     <section class="espace-content">
  45.             <div class="owl-carousel lounge esp">
  46.                 <div class="item"><img src="/front/img/lounge-slider0.jpg" alt="lounge" /></div>
  47.           <div class="item"><img src="/front/img/lounge-slider1.jpg" alt="lounge" /></div>
  48.                 <div class="item"><img src="/front/img/lounge-slider2.jpg" alt="lounge" /></div>
  49.                 <div class="item"><img src="/front/img/lounge-slider4.jpg" alt="lounge" /></div>
  50.             </div>
  51.             <div class="horizontal-bar-container">
  52.                 <div class="horizontal-bar"></div>
  53.                 <div class="horizontal-bar-ctrl purple"></div>
  54.             </div>
  55.             <a href="#next" class="next-arrow"><img src="/front/img/espaces-arrow-b-l.svg" alt="suivant" /></a>
  56.             <h2 id="next" class="no-bar" style="padding-top: 160px;">{{ 'lounge_s1_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  57.             <p class="quote pt-0 mt-5">{{ 'lounge_s1'|tr(tr)|raw }}</p>
  58.         </section>
  59.         <section class="espace-tarifs salle" style="background-image: url('/front/img/espaces-lounge-club.jpg');">
  60.             <div class="container">
  61.             </div>
  62.         </section>
  63.     <section class="espace-content second">
  64.             <h2 id="" class="no-bar">{{ 'lounge_s2_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
  65.             <p class="pt-0 mt-5">{{ 'lounge_s2'|tr(tr)|raw }}</p>
  66.             <div class="owl-carousel lounge-icons">
  67.                 <div class="item"><div class="icon"><img src="/front/img/lounge-icon1.svg" alt="lounge" /></div><span>{{ 'lounge_s2_1'|tr(tr)|raw }}</span></div>
  68.                 <div class="item"><div class="icon"><img src="/front/img/lounge-icon2.svg" alt="lounge" /></div><span>{{ 'lounge_s2_2'|tr(tr)|raw }}</span></div>
  69.                 <div class="item"><div class="icon"><img src="/front/img/lounge-icon3.svg" alt="lounge" /></div><span>{{ 'lounge_s2_3'|tr(tr)|raw }}</span></div>
  70.                 <div class="item"><div class="icon"><img src="/front/img/lounge-icon4.svg" alt="lounge" /></div><span>{{ 'lounge_s2_4'|tr(tr)|raw }}</span></div>
  71.                 <div class="item"><div class="icon"><img src="/front/img/lounge-icon5.svg" alt="lounge" /></div><span>{{ 'lounge_s2_5'|tr(tr)|raw }}</span></div>
  72.             </div>
  73.         </section>
  74.     <section class="espace-content second" style="margin-bottom: 2px;">
  75.             <h2 id="">{{ 'lounge_s3_title'|tr(tr)|raw }}</h2>
  76.             <p class="text-black text-center">{{ 'lounge_s3'|tr(tr)|raw }}</p>
  77.       <form class="form2" id="contact">
  78.           <div class="row">
  79.               <div class="col-md-6">
  80.             <input type="text" placeholder="{{ 'contact_nom'|tr(tr)|raw  }}*" name="lastname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('lastname') }}{% endif %}" />
  81.             <input type="text" placeholder="{{ 'contact_prenom'|tr(tr)|raw  }}*" name="firstname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('firstname') }}{% endif %}"  />
  82.             <input type="text" placeholder="{{ 'contact_societe'|tr(tr)|raw  }}" name="company" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('company') }}{% endif %}"  />
  83.             <input type="tel" placeholder="{{ 'contact_tel'|tr(tr)|raw  }}*" name="phone" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('phone') }}{% endif %}"  />
  84.             <input type="email" placeholder="{{ 'contact_email'|tr(tr)|raw  }}*" name="email" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.email }}{% endif %}"  />
  85.             <input type="text" placeholder="{{ 'contact_adresse'|tr(tr)|raw  }}*" name="address" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('address1') }}{% endif %}"  />
  86.           </div>
  87.           <div class="col-md-6">
  88.             <input type="text" placeholder="{{ 'contact_code'|tr(tr)|raw  }}*" name="zipcode" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('zipcode') }}{% endif %}"  />
  89.             <input type="text" placeholder="{{ 'contact_ville'|tr(tr)|raw  }}*" name="city" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('city') }}{% endif %}"  />
  90.             <input type="text" placeholder="{{ 'contact_pays'|tr(tr)|raw  }}*" name="country" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('country') }}{% endif %}"  />
  91.                   <input type="text" placeholder="Sujet*" name="subject" />
  92.                   <textarea placeholder="Message*" name="message"></textarea>
  93.               </div>
  94.           <div class="contact-response">
  95.             <p class="text-center p-0 mt-0 mb-2"></p>
  96.           </div>
  97.               <button id="sendform" class="send">{{ 'contact_envoyer'|tr(tr)|raw  }}</button>
  98.           </div>
  99.           <div class="lounge-info">
  100.               <p class="title">{{ 'general_royal_palace'|tr(tr)|raw  }}</p>
  101.               <p class="address">20 Rue de Hochfelden,<br>67330 KIRRWILLER<br>FRANCE</p>
  102.               <a href="tel:+33 (0)3 88 70 71 81" class="phone">+33 (0)3 88 70 71 81</a>
  103.               <a href="mailto:pmeyer@royal-palace.com" class="email">pmeyer@royal-palace.com</a>
  104.           </div>
  105.       </form>
  106.         </section>
  107.         <div class="lounge-bg3"></div>
  108.     
  109.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  110. {% endblock %}
  111. {% block javascripts %}
  112.   <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_public_key }}"></script>
  113.   <script src="/front/js/owl.carousel.min.js"></script>
  114.   <script type="text/javascript">
  115.     $(document).ready(function() {
  116.       $('#sendform').on('click', function(e){
  117.         e.preventDefault();
  118.           grecaptcha.ready(function() {
  119.             grecaptcha.execute('{{ recaptcha_public_key }}', {action: 'submit'}).then(function(token) {
  120.           var form = {
  121.             token: token,
  122.             firstname: $('#contact [name="firstname"').val(),
  123.             lastname: $('#contact [name="lastname"').val(),
  124.             company: $('#contact [name="company"').val(),
  125.             phone: $('#contact [name="phone"').val(),
  126.             email: $('#contact [name="email"').val(),
  127.             address: $('#contact [name="address"').val(),
  128.             zipcode: $('#contact [name="zipcode"').val(),
  129.             city: $('#contact [name="city"').val(),
  130.             country: $('#contact [name="country"').val(),
  131.             subject: $('#contact [name="subject"').val(),
  132.             message: $('#contact [name="message"').val(),
  133.           };
  134.           $.post('/contact/send/{{app.request.locale}}', form, function( data ) {
  135.             $('.contact-response').hide();
  136.             if(data.success == true){
  137.               $('#sendform').hide();
  138.               $('.contact-response').show();
  139.               $('.contact-response p').html("{{ 'js_contact_merci'|tr(tr)|raw }}");
  140.             } else {
  141.               $('.contact-response').show();
  142.               $('.contact-response p').text(data.error);
  143.             }
  144.           }, "json");
  145.             });
  146.           });
  147.       });
  148.     });
  149.       var owl = $('.owl-carousel.lounge');
  150.     owl.owlCarousel({
  151.         loop:false,
  152.         margin:30,
  153.         nav:true,
  154.         responsive:{
  155.             0:{
  156.                 items:1
  157.             },
  158.             600:{
  159.                 items:3
  160.             },
  161.             1920:{
  162.                 items:3
  163.             }
  164.         }
  165.         });
  166.     var owl2 = $('.owl-carousel.lounge-icons');
  167.     owl2.owlCarousel({
  168.       loop:false,
  169.       margin:30,
  170.       nav:true,
  171.       responsive:{
  172.           0:{
  173.               items:1
  174.           },
  175.           600:{
  176.               items:5
  177.           },
  178.           1920:{
  179.               items:5
  180.           }
  181.       }
  182.     });
  183.         // HEADER IMAGE SWITCH
  184.     carouselIndex = 0;
  185.     $('.owl-carousel.esp img').mousedown(function() {
  186.         setTimeout(function() { carouselIndex = owl.data()['owl.carousel']._current }, 220);
  187.     });
  188.     $('.owl-carousel.esp img').on('click', function(e){
  189.       e.preventDefault();
  190.       if( carouselIndex == owl.data()['owl.carousel']._current ){
  191.           $('.espace-header').attr('style', 'background-image: url("'+$(this).attr('src')+'");') ;
  192.       }
  193.     });
  194.     // END HEADER IMAGE SWITCH
  195.     if( $('.project-bar-ctrl').length >0 ) {
  196.       offset = $('.project-bar-ctrl').offset().top;
  197.       $('.gallery-container').scroll(function(){
  198.         var pos = $('.gallery-container').scrollTop();
  199.         var top = pos * 706 / 1823;
  200.         $('.project-bar-ctrl').css('top', top+'px');
  201.       });
  202.     }
  203.     owl.on('changed.owl.carousel', function(event) {
  204.       var itemsNbr = owl.data()['owl.carousel'].settings.items;
  205.       var itemsTotal = event.item.count;
  206.       var itemsIndex = event.item.index;
  207.       var pagesNbr = itemsTotal - itemsNbr;
  208.             var horizontalBar = $('.horizontal-bar').outerWidth();
  209.             var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  210.             var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  211.             var left = itemsIndex * 100 / pagesNbr; // percent
  212.             left = left * courseLength / 100;
  213.       $('.horizontal-bar-ctrl').css('left', left+'px');
  214.       
  215.     });
  216.     </script>
  217. {% endblock %}