templates/FrontBundle/Page/espace-entreprises.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  3. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  4. {% block description %}{{ page.metaDescription }}{% endblock %}
  8. {% block extra_class %}native{% endblock %}
  9. {% block menu_min %}700{% endblock %}
  10. {% block menu_max %}4127{% endblock %}
  12. {% block sub_header %}
  14.     <div class="sub-header anchor">
  15.     <ul>
  16.         <li><a href="#menu_min">{{ 'espaces_salle'|tr(tr)|upper|raw }}</a></li>
  17.           <li><a href="#restauration">{{ 'menu_restauration'|tr(tr)|upper|raw }}</a></li>
  18.           <li><a href="#lounge-club">Lounge club</a></li>
  19.           <li ><a href="#contact">{{ 'menu_contact'|tr(tr)|upper|raw }}</a></li>
  20.     </ul>
  21.   </div>
  23. {% endblock %}
  28. {% block stylesheets %}
  29.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  30.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  31. {% endblock %}
  33. {% block body %}
  36.     <section class="espace-header" style="background-image: url('/front/img/entreprise-slider0.jpg');">
  37.       <div class="shadow-60"></div>
  38.         <div class="container">
  39.           <h1>{{ 'entreprise_title'|tr(tr)|upper|raw }}</h1>
  40.           <p>{{ 'entreprise_subtitle'|tr(tr)|raw }}</p>
  41.         </div>
  43.       <ul class="anchor">
  44.           <li><a href="#salle">{{ 'espaces_salle'|tr(tr)|upper|raw }}</a></li>
  45.           <li><a href="#restauration">{{ 'menu_restauration'|tr(tr)|upper|raw }}</a></li>
  46.           <li><a href="#lounge-club">Lounge club</a></li>
  47.           <li ><a href="#contact">{{ 'menu_contact'|tr(tr)|upper|raw }}</a></li>
  48.       </ul>
  49.     </section>
  51.     <section class="espace-content" id="salle">
  53.             <div class="owl-carousel esp lounge">
  54.         {% for i in 0..8 %}
  55.                 <div class="item"><img src="/front/img/entreprise-slider{{i}}.jpg" alt="entreprise {{i}}" /></div>
  56.               {% endfor %}
  57.             </div>
  59.       <div class="horizontal-bar-container">
  60.         <div class="horizontal-bar"></div>
  61.         <div class="horizontal-bar-ctrl purple"></div>
  62.       </div>
  64.             <a href="#next" class="next-arrow"><img src="/front/img/espaces-arrow-b-l.svg" alt="suivant" /></a>
  66.             <h2 id="next" class="no-bar">{{ 'entreprise_s1_title'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  68.             <p class="text-dark pl-0 pr-0">{{ 'entreprise_s1'|tr(tr)|raw }}</p>
  69.         </section>
  71.         <section class="espace-content mt-5 no-mobile">
  72.       <div class=" entreprise-mod">
  73.               <div class="mod" id="mod1">
  74.                   <div class="ctr">
  75.                       <p class="info"><a href="#" class="close"><img src="/front/img/entreprise-cross.svg" alt="close" /></a><span class="label">{{ 'entreprise_mod1_title'|tr(tr)|upper|raw }}</span> {{ 'entreprise_mod1'|tr(tr)|raw }} </p>
  76.                       <span class="title">{{ 'entreprise_mod1_title'|tr(tr)|upper|raw }}</span>
  77.                   </div>
  78.               </div>
  79.               <div class="mod" id="mod2">
  80.                   <div class="ctr">
  81.                       <p class="info"><a href="#" class="close"><img src="/front/img/entreprise-cross.svg" alt="close" /></a><span class="label">{{ 'entreprise_mod2_title'|tr(tr)|upper|raw }}</span>  {{ 'entreprise_mod2'|tr(tr)|raw }}</p>
  82.                       <span class="title">{{ 'entreprise_mod2_title'|tr(tr)|upper|raw }}</span>
  83.                   </div>
  84.               </div>
  85.               <div class="mod" id="mod3">
  86.                   <div class="ctr">
  87.                       <p class="info"><a href="#" class="close"><img src="/front/img/entreprise-cross.svg" alt="close" /></a><span class="label">{{ 'entreprise_mod3_title'|tr(tr)|upper|raw }}</span> {{ 'entreprise_mod3'|tr(tr)|raw }}</p>
  88.                       <span class="title">{{ 'entreprise_mod3_title'|tr(tr)|upper|raw }}</span>
  89.                   </div>
  90.               </div>
  91.               <div class="mod" id="mod4">
  92.                   <div class="ctr">
  93.                       <p class="info"><a href="#" class="close"><img src="/front/img/entreprise-cross.svg" alt="close" /></a><span class="label">{{ 'entreprise_mod4_title'|tr(tr)|upper|raw }}</span> {{ 'entreprise_mod4'|tr(tr)|raw }}</p>
  94.                       <span class="title">{{ 'entreprise_mod4_title'|tr(tr)|upper|raw }}</span>
  95.                   </div>
  96.               </div>
  97.               <div class="mod" id="mod5">
  98.                   <div class="ctr">
  99.                       <p class="info"><a href="#" class="close"><img src="/front/img/entreprise-cross.svg" alt="close" /></a><span class="label">{{ 'entreprise_mod5_title'|tr(tr)|upper|raw }}</span> {{ 'entreprise_mod5'|tr(tr)|raw }}</p>
  100.                       <span class="title">{{ 'entreprise_mod5_title'|tr(tr)|upper|raw }}</span>
  101.                   </div>
  102.               </div>
  103.       </div>
  104.         </section>
  108.     <section class="espace-content second entreprise-restauration" id="restauration">
  109.             <h2 id="" class="no-bar">{{ 'entreprise_s2_title'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  111.             <p class="text-black">{{ 'entreprise_s2'|tr(tr)|raw }}</p>
  112.         </section>
  116.     <div class="row histoire-restauration-links">
  117.       <div class="col">
  118.         <div class="bg">
  119.           <a href="/{{app.request.locale }}/le-majestic" class="link">LE MAJESTIC <img src="/front/img/message-arrow-single.svg" alt="majestic"></a>
  120.         </div>
  121.         <p class="desc">{{ 'entreprise_mj'|tr(tr)|raw }}</p>
  122.       </div>
  123.       <div class="col">
  124.         <div class="bg">
  125.           <a href="/{{app.request.locale }}/le-versailles" class="link">LE VERSAILLES <img src="/front/img/message-arrow-single.svg" alt="majestic"></a>
  126.         </div>
  127.         <p class="desc">{{ 'entreprise_ve'|tr(tr)|raw }}</p>
  128.       </div>
  129.     </div>
  132. {#         <div class="row entreprise-restauration-links">
  133.             <div class="col">
  134.                 <div class="bg">
  135.                     
  136.                 </div>
  137.                 <a href="/{{app.request.locale }}/le-majestic" class="link">DÉCOUVRIR L'ESPACE <img src="/front/img/message-arrow.svg" alt="majestic"></a>
  138.             </div>
  139.             <div class="col">
  140.                 <div class="bg">
  141.                     
  142.                 </div>
  143.                 <a href="/{{app.request.locale }}/le-versailles" class="link">DÉCOUVRIR L'ESPACE <img src="/front/img/message-arrow.svg" alt="majestic"></a>
  144.             </div>
  145.         </div> #}
  147. {#         <div class="row entreprise-restauration-desc">
  148.             <div class="col">
  149.                 <p class="title">LE MAJESTIC</p>
  150.                 <p class="desc">Ambiance plus cosy, menu gastronomique et repas<br>dansant animé par un orchestre.<br> Capable d'accueillir 800 couverts.</p>
  151.             </div>
  152.             <div class="col">
  153.                 <p class="title">LE VERSAILLES</p>
  154.                 <p class="desc">Ambiance plus intimiste, menu gastronomique<br> sans orchestre.<br> Capable d'accueillir 150 couverts.</p>
  155.             </div>
  156.         </div>
  157.  #}
  159.     <section class="espace-content second entreprise-lounge mt-5 pt-5" id="lounge-club">
  160.             <h2 id="" class="no-bar">{{ 'entreprise_s3_title'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  162.             <p class="text-black">{{ 'entreprise_s3'|tr(tr)|raw }}</p>
  163.         </section>
  165.         <section class="entreprise-lounge-bg" style="background-image: url('/front/img/espaces-lounge-club.jpg');">
  166.             <div class="container">
  168.             </div>
  169.         </section>
  171.     <section class="espace-content" style="margin: -66px auto 0 auto;">
  173.             <div class="owl-carousel lounge esp2">
  174.           <div class="item"><img src="/front/img/lounge-slider0.jpg" alt="lounge" /></div>
  175.           <div class="item"><img src="/front/img/lounge-slider1.jpg" alt="lounge" /></div>
  176.           <div class="item"><img src="/front/img/lounge-slider2.jpg" alt="lounge" /></div>
  177.           <div class="item"><img src="/front/img/lounge-slider4.jpg" alt="lounge" /></div>
  178.             </div>
  180.         </section>
  182.     <section class="espace-content entreprise-contact second" id="contact">
  183.             <h2 id="" class="no-bar">{{ 'entreprise_s4_title'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  185.             <p class="text-black">{{ 'entreprise_s4'|tr(tr)|raw }}</p>
  187.             <form class="form2">
  188.           <div class="row">
  189.               <div class="col-md-6">
  190.                   <input type="text" placeholder="{{ 'contact_nom'|tr(tr)|raw  }}*" name="lastname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('lastname') }}{% endif %}" />
  191.             <input type="text" placeholder="{{ 'contact_prenom'|tr(tr)|raw  }}*" name="firstname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('firstname') }}{% endif %}"  />
  192.             <input type="text" placeholder="{{ 'contact_societe'|tr(tr)|raw  }}" name="company" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('company') }}{% endif %}"  />
  193.             <input type="tel" placeholder="{{ 'contact_tel'|tr(tr)|raw  }}*" name="phone" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('phone') }}{% endif %}"  />
  194.             <input type="email" placeholder="{{ 'contact_email'|tr(tr)|raw  }}*" name="email" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.email }}{% endif %}"  />
  195.             <input type="text" placeholder="{{ 'contact_adresse'|tr(tr)|raw  }}*" name="address" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('address1') }}{% endif %}"  />
  196.               </div>
  197.               <div class="col-md-6">
  198.                   <input type="text" placeholder="{{ 'contact_code'|tr(tr)|raw  }}*" name="zipcode" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('zipcode') }}{% endif %}"  />
  199.             <input type="text" placeholder="{{ 'contact_ville'|tr(tr)|raw  }}*" name="city" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('city') }}{% endif %}"  />
  200.             <input type="text" placeholder="{{ 'contact_pays'|tr(tr)|raw  }}*" name="country" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('country') }}{% endif %}"  />
  201.             <input type="text" placeholder="{{ 'contact_sujet'|tr(tr)|raw  }}*" name="subject" />
  202.             <textarea placeholder="{{ 'contact_message'|tr(tr)|raw  }}*" name="message"></textarea>
  203.               </div>
  206.           <div class="col-md-12 contact-response">
  207.             <p class="text-center mt-0 p-0 mb-2"></p>
  208.           </div>
  211.               <button id="sendform" class="send">{{ 'contact_envoyer'|tr(tr)|raw }}</button>
  212.           </div>
  213.       </form>
  216.         </section>
  218.         <div class="entreprise-bg2">
  219.             <p class="title">ROYAL PALACE</p>
  220.             <p class="address">20 Rue de Hochfelden, 67330 KIRRWILLER - FRANCE</p>
  221.             <a href="tel:+33 (0)3 88 70 71 8" class="phone">+33 (0)3 88 70 71 81</a>
  222.         </div>
  225.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  227. {% endblock %}
  229. {% block javascripts %}
  232.   <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_public_key }}"></script>
  234.   <script src="/front/js/owl.carousel.min.js"></script>
  236.   <script type="text/javascript">
  238.     $( document ).ready(function() {
  240.       $('.entreprise-mod .mod .title').on('click', function(e){
  241.           e.preventDefault();
  242.         var id = $(this).parents('.mod').attr('id');
  243.         $('.title').show();
  244.         $(this).hide();
  245.         $('.info').hide();
  246.         $('#'+id+' .info').fadeIn();
  247.       });
  249.       $('.entreprise-mod .mod .close').on('click', function(e){
  250.           e.preventDefault();
  251.         var id = $(this).parents('.mod').attr('id');
  252.         $('#'+id+' .info').hide();
  253.         $('#'+id+' .title').fadeIn();
  254.       });
  256.     });
  258.     var owl = $('.owl-carousel.esp');
  259.     owl.owlCarousel({
  260.       loop:false,
  261.       margin:30,
  262.       nav:true,
  263.       responsive:{
  264.           0:{
  265.               items:1
  266.           },
  267.           600:{
  268.               items:3
  269.           },
  270.           1920:{
  271.               items:3
  272.           }
  273.       }
  274.     });
  276.     var owl2 = $('.owl-carousel.esp2');
  277.     owl2.owlCarousel({
  278.       loop:false,
  279.       margin:30,
  280.       nav:true,
  281.       responsive:{
  282.           0:{
  283.               items:1
  284.           },
  285.           600:{
  286.               items:4
  287.           },
  288.           1920:{
  289.               items:4
  290.           }
  291.       }
  292.     });
  294.     // HEADER IMAGE SWITCH
  295.     carouselIndex = 0;
  296.     $('.owl-carousel.esp img').mousedown(function() {
  297.       setTimeout(function() { carouselIndex = owl.data()['owl.carousel']._current }, 220);
  298.     });
  300.     $('.owl-carousel.esp img').on('click', function(e){
  301.       e.preventDefault();
  302.       if( carouselIndex == owl.data()['owl.carousel']._current ){
  303.         $('.espace-header').attr('style', 'background-image: url("'+$(this).attr('src')+'");') ;
  304.       }
  305.     });
  306.     // END HEADER IMAGE SWITCH
  308.     // // HEADER IMAGE SWITCH LOUNGE
  309.     // carouselIndex = 0;
  310.     // $('.owl-carousel.esp2 img').mousedown(function() {
  311.     //   setTimeout(function() { carouselIndex = owl2.data()['owl.carousel']._current }, 220);
  312.     // });
  314.     // $('.owl-carousel.esp2 img').on('click', function(e){
  315.     //   e.preventDefault();
  316.     //   if( carouselIndex == owl.data()['owl.carousel']._current ){
  317.     //     $('.entreprise-lounge-bg').attr('style', 'background-image: url("'+$(this).attr('src')+'");') ;
  318.     //   }
  319.     // });
  320.     // // END HEADER IMAGE SWITCH LOUNGE
  322.     if( $('.project-bar-ctrl').length >0 ) {
  324.       offset = $('.project-bar-ctrl').offset().top;
  325.       $('.gallery-container').scroll(function(){
  326.         var pos = $('.gallery-container').scrollTop();
  327.         var top = pos * 706 / 1790;
  329.         $('.project-bar-ctrl').css('top', top+'px');
  330.       });
  332.     }
  334.     owl.on('changed.owl.carousel', function(event) {
  336.       var itemsNbr = owl.data()['owl.carousel'].settings.items;
  337.       var itemsTotal = event.item.count;
  339.       var itemsIndex = event.item.index;
  341.       var pagesNbr = itemsTotal - itemsNbr;
  343.       var horizontalBar = $('.horizontal-bar').outerWidth();
  344.       var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
  346.       var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
  348.       var left = itemsIndex * 100 / pagesNbr; // percent
  350.       left = left * courseLength / 100;
  352.       $('.horizontal-bar-ctrl').css('left', left+'px');
  353.       
  354.     });
  356.     </script>
  360.   <script type="text/javascript">
  362.     $(document).ready(function() {
  364.       $('#sendform').on('click', function(e){
  365.         e.preventDefault();
  367.           grecaptcha.ready(function() {
  368.             grecaptcha.execute('{{ recaptcha_public_key }}', {action: 'submit'}).then(function(token) {
  370.           var form = {
  371.             token: token,
  372.             firstname: $('#contact [name="firstname"').val(),
  373.             lastname: $('#contact [name="lastname"').val(),
  374.             company: $('#contact [name="company"').val(),
  375.             phone: $('#contact [name="phone"').val(),
  376.             email: $('#contact [name="email"').val(),
  377.             address: $('#contact [name="address"').val(),
  378.             zipcode: $('#contact [name="zipcode"').val(),
  379.             city: $('#contact [name="city"').val(),
  380.             country: $('#contact [name="country"').val(),
  381.             subject: $('#contact [name="subject"').val(),
  382.             message: $('#contact [name="message"').val(),
  383.           };
  385.           $.post('/contact/send/{{app.request.locale}}', form, function( data ) {
  386.             $('.contact-response').hide();
  387.             if(data.success == true){
  388.               $('#sendform').hide();
  389.               $('.contact-response').show();
  390.               $('.contact-response p').html('Merci pour votre message. <br> Nous vous répondrons dans les plus brefs délais.');
  391.             } else {
  392.               $('.contact-response').show();
  393.               $('.contact-response p').text(data.error);
  394.             }
  395.           }, "json");
  398.             });
  399.           });
  401.       });
  403.     });
  405.   </script>
  407. {% endblock %}