templates/FrontBundle/Page/informations-pratiques.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 %}stack{% endblock %}
  5. {# {% block menu_min %}200{% endblock %} #}
  6. {% block menu_max %}2636{% endblock %}
  7. {# {% block sub_header %}
  8.   <div class="sub-header">
  9.     <ul>
  10.       <li class="active"><a href="/{{app.request.locale }}/informations-pratiques">Informations</a></li>
  11.       <li><a href="/{{app.request.locale }}/mini-suites">Mini-suites</a></li>
  12.       <li><a href="/{{app.request.locale }}/nos-partenaires">Partenaires</a></li>
  13.     </ul>
  14.   </div>
  15. {% endblock %} #}
  16. {% block stylesheets %}
  17.   <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  18.   <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  19. {% endblock %}
  20. {% block body %}
  21.     <section class="espace-content second info-top">
  22.       <div class="row fluid-menu mb-5">
  23.         <div class="nav-menu">
  24.           <div class="nav-list">
  25.             <div class="overlay" style="top: 195px; height: 37px; width: 145.922px;"></div>
  26.             <ul>
  27.               <li class="active hover"><a href="/{{app.request.locale }}/{{ 'informations-pratiques'|getUrl(app.request.locale) }}">{{ 'infos_menu1'|tr(tr)|raw }}</a></li>
  28.               <li class=""><a href="/{{app.request.locale }}/{{ 'mini-suites'|getUrl(app.request.locale) }}">{{ 'infos_menu2'|tr(tr)|raw }}</a></li>
  29.               <li class=""><a href="/{{app.request.locale }}/{{ 'nos-partenaires'|getUrl(app.request.locale) }}">{{ 'infos_menu3'|tr(tr)|raw }}</a></li>
  30.             </ul>
  31.           </div>
  32.         </div>
  33.       </div>
  34.       <h1 class="text-center mb-4">{{ 'infos_title'|tr(tr)|raw }}</h1>
  35.       {{ 'infos_desc'|tr(tr)|raw }}
  36.       <a href="#contact" class="btn-primary btn-sm text mb-5 mt-4">{{ 'contact_title2'|tr(tr)|raw }} <img src="/front/img/btn-primary-arrow-r.svg" class="arrow" alt="arrow"></a>
  37.     </section>
  38.     <section class="espace-content full mt-0 grey-bg infos">
  39.       <div class="content mt-5 pt-5">
  40.         <h2 class="mb-5 no-bar voiture">{{ 'infos_s1_title'|tr(tr)|raw }}</h2>
  41.         <div class="row pb-5">
  42.           <div class="col-md-3">
  43.             <p>
  44.               <strong class="mb-3">{{ 'infos_s1_t1'|tr(tr)|raw }}</strong><br>
  45.               – Strasbourg : 30mn<br>
  46.               – Baden Baden : 45mn<br>
  47.               – Bâle, Mulhouse : 1h30<br>
  48.               – Saarbrücken : 1h30
  49.             </p>
  50.           </div>
  51.           <div class="col-md-3">
  52.             <p>
  53.               <strong class="mb-3">{{ 'infos_s1_t2'|tr(tr)|raw }}</strong><br>
  54.               – Paris-Strasbourg : TGV, 2h20<br>
  55.               – Strasbourg : 30mn<br>
  56.               – Saverne : 20mn<br>
  57.               – Obermodern : 5mn
  58.             </p>
  59.           </div>
  60.           <div class="col-md-3">
  61.             <p>
  62.               <strong class="mb-3">{{ 'infos_s1_t3'|tr(tr)|raw }}</strong><br>
  63.                {{ 'infos_s1_t32'|tr(tr)|raw }}
  64.             </p>
  65.             <p class="mt-3">
  66.               <strong class="mb-3">{{ 'infos_s1_t4'|tr(tr)|raw }}</strong><br>
  67.               {{ 'infos_s1_t42'|tr(tr)|raw }}
  68.             </p>
  69.           </div>
  70.           <div class="col-md-3">
  71.             <p>
  72.             </p>
  73.           </div>
  74.         </div>
  75.       </div>
  76.     </section>
  77.     <section class="espace-content full mt-0 infos">
  78.       <div class="content mt-5 pt-4">
  79.         <h2 class="mb-5 no-bar heure">{{ 'infos_s2_title'|tr(tr)|raw }}</h2>
  80.         <div class="row pb-4">
  81.           <div class="col-md-6">
  82.             {{ 'infos_s2_1'|tr(tr)|raw }}
  83.           </div>
  84.           <div class="col-md-6">
  85.             {{ 'infos_s2_2'|tr(tr)|raw }}
  86.           </div>
  87.           <div class="col-md-2">
  88.           </div>
  89.           <div class="col-md-12">
  90.             {{ 'infos_s2_3'|tr(tr)|raw }}
  91.             {# <i class="mt-3">
  92.               Nous conseillons à notre aimable clientèle de se présenter environ 20 minutes avant le début du dîner, du déjeuner ou du spectacle seul.
  93.             </i> #}
  94.           </div>
  95.         </div>
  96.       </div>
  97.     </section>
  98.     <section class="espace-content full mt-0 grey-bg infos">
  99.       <div class="content mt-5 pt-5">
  100.         <h2 class="mb-5 no-bar ticket">{{ 'infos_s3_title'|tr(tr)|raw }}</h2>
  101.         <div class="row pb-5">
  102.           <div class="col-md-8">
  103.             <p>
  104.               {{ 'infos_s3_desc'|tr(tr)|raw }}
  105.             </p>
  106.           </div>
  107.           <div class="col-md-4">
  108.             <a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}" class="btn-primary btn-sm text">{{ 'general_reserver'|tr(tr)|upper|raw }} <img src="/front/img/btn-primary-arrow-r.svg" class="arrow" alt="arrow"></a>
  109.           </div>
  110.         </div>
  111.       </div>
  112.     </section>
  113.     <section class="espace-content full mt-0 infos">
  114.       <div class="content mt-5 pt-4">
  115.         <h2 class="mb-5 no-bar banque">{{ 'infos_s4_title'|tr(tr)|raw }}</h2>
  116.         <div class="row pb-4">
  117.           <div class="col-md-5">
  118.             <p>
  119.               <strong class="mb-3">STE ADAM MEYER :</strong><br>
  120.               BANQUE CCM DE BOUXWILLER ET ENVIRONS<br>
  121.               IBAN : FR76 10278 01670 00013429645 56<br>
  122.               BIC : CMCIFR2A
  123.             </p>
  124.           </div>
  125.           <div class="col-md-5">
  126.             <p>
  127.               <strong class="mb-3">ROYAL SHOW PRODUCTIONS :</strong><br>
  128.               BANQUE : CCM DE BOUXWILLER ET ENVIRONS<br>
  129.               IBAN : FR 76 10278 01670 00014697745 96<br>
  130.               BIC : CMCIFR2A
  131.             </p>
  132.           </div>
  133.         </div>
  134.       </div>
  135.     </section>
  136.     <section class="espace-content full mt-0 grey-bg infos">
  137.       <div class="content mt-5 pt-5">
  138.         <h2 class="mb-5 no-bar other">{{ 'infos_s5_title'|tr(tr)|raw }}</h2>
  139.         <div class="row pb-5">
  140.           <div class="col-md-4">
  141.             {{ 'infos_s5_1'|tr(tr)|raw }}
  142.           </div>
  143.           <div class="col-md-4">
  144.             {{ 'infos_s5_2'|tr(tr)|raw }}
  145.             {{ 'infos_s5_3'|tr(tr)|raw }}
  146.           </div>
  147.           <div class="col-md-4">
  148.             {{ 'infos_s5_4'|tr(tr)|raw }}
  149.           </div>
  150.         </div>
  151.       </div>
  152.     </section>
  153.     <section class="espace-content full mt-0 infos">
  154.       <div class="content mt-0 pt-4">
  155.         <h2 class="mb-5 no-icon">&nbsp;</h2>
  156.         <div class="row pb-4">
  157.           <div class="col-md-12">
  158.             <i class="text-italic">{{ 'infos_pmr'|tr(tr)|raw }}</i>
  159.           </div>
  160.         </div>
  161.       </div>
  162.     </section>
  163.     <section class="espace-content full mt-0 infos contact" id="contact">
  164.       <div class="content">
  165.         <h2 class="mb-5 mt-4 no-icon">{{ 'infos_contact'|tr(tr)|raw }}</h2>
  166.         <div class="row pb-4">
  167. {#          <div class="col-md-12 text-center">
  168.             <h4 class="mt-3 mb-4">NOUS CONTACTER</h4>
  169.             <p class="text-center mb-5" style="font-size: 20px;">Vous avez besoin de renseignements, une question, ou toute autre demande ?<br>Alors n'hésitez pas à nous écrire.</p>
  170.           </div> #}
  171. {#
  172.           <form>
  173.             <div class="row">
  174.               <div class="col-md-6">
  175.                 <input type="text" placeholder="Nom*" name="lastname" />
  176.                 <input type="text" placeholder="Prénom*" name="firstname" />
  177.                 <input type="text" placeholder="Société" name="company" />
  178.                 <input type="tel" placeholder="Téléphone*" name="phone" />
  179.                 <input type="email" placeholder="E-mail*" name="email" />
  180.                 <input type="text" placeholder="Adresse*" name="address" />
  181.               </div>
  182.               <div class="col-md-6">
  183.                 <input type="number" placeholder="Code postal*" name="zipcode" />
  184.                 <input type="text" placeholder="Ville*" name="city" />
  185.                 <input type="text" placeholder="Pays*" name="country" />
  186.                 <div class="select-wrapper">
  187.                   <select name="subject">
  188.                     <option value="0">SUJET*</option>
  189.                   </select>
  190.                 </div>
  191.                 <textarea placeholder="Message*" name="message"></textarea>
  192.               </div>
  193.               <button class="send">Envoyer</button>
  194.             </div>
  195.           </form> #}
  196.           <form class="form2" id="contact">
  197.             <div class="row">
  198.               <div class="col-md-6">
  199.                 <input type="text" placeholder="{{ 'contact_nom'|tr(tr)|raw  }}*" name="lastname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('lastname') }}{% endif %}" />
  200.                 <input type="text" placeholder="{{ 'contact_prenom'|tr(tr)|raw  }}*" name="firstname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('firstname') }}{% endif %}"  />
  201.                 <input type="text" placeholder="{{ 'contact_societe'|tr(tr)|raw  }}" name="company" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('company') }}{% endif %}"  />
  202.                 <input type="tel" placeholder="{{ 'contact_tel'|tr(tr)|raw  }}*" name="phone" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('phone') }}{% endif %}"  />
  203.                 <input type="email" placeholder="{{ 'contact_email'|tr(tr)|raw  }}*" name="email" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.email }}{% endif %}"  />
  204.                 <input type="text" placeholder="{{ 'contact_adresse'|tr(tr)|raw  }}*" name="address" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('address1') }}{% endif %}"  />
  205.               </div>
  206.               <div class="col-md-6">
  207.                 <input type="text" placeholder="{{ 'contact_code'|tr(tr)|raw  }}*" name="zipcode" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('zipcode') }}{% endif %}"  />
  208.                 <input type="text" placeholder="{{ 'contact_ville'|tr(tr)|raw  }}*" name="city" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('city') }}{% endif %}"  />
  209.                 <input type="text" placeholder="{{ 'contact_pays'|tr(tr)|raw  }}*" name="country" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('country') }}{% endif %}"  />
  210.                 <input type="text" placeholder="{{ 'contact_sujet'|tr(tr)|raw  }}*" name="subject" />
  211.                 <textarea placeholder="{{ 'contact_message_full'|tr(tr)|raw  }}*" name="message"></textarea>
  212.               </div>
  213.               <div class="row contact-response">
  214.                 <p class="text-center mt-0 mb-0"></p>
  215.               </div>
  216.               <button id="sendform" class="send">{{ 'contact_envoyer'|tr(tr)|raw }}</button>
  217.             </div>
  218.           </form>
  219.         </div>
  220.       </div>
  221.     </section>
  222.     <div class="infos-bg2">
  223.       <div class="info-footer">
  224. {#        <img src="/front/img/grand-amour-w.svg" alt="grand amour" width="180px" />
  225.         <a href="/{{app.request.locale }}/spectacle/grand-amour">{{ 'footer_decouvrir'|tr(tr)|raw }}</a>#}
  226.       </div>
  227.     </div>
  228.     {% include 'FrontBundle/Partial/footer.html.twig' %}
  229. {% endblock %}
  230. {% block javascripts %}
  231.   <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_public_key }}"></script>
  232.   <script type="text/javascript">
  233.     $(document).ready(function() {
  234.       hoverList(document.querySelector('.nav-list ul li.active'));
  235.       $(window).scrollTop(0);
  236.       $('#sendform').on('click', function(e){
  237.         e.preventDefault();
  238.           grecaptcha.ready(function() {
  239.             grecaptcha.execute('{{ recaptcha_public_key }}', {action: 'submit'}).then(function(token) {
  240.           var form = {
  241.             token: token,
  242.             firstname: $('#contact [name="firstname"').val(),
  243.             lastname: $('#contact [name="lastname"').val(),
  244.             company: $('#contact [name="company"').val(),
  245.             phone: $('#contact [name="phone"').val(),
  246.             email: $('#contact [name="email"').val(),
  247.             address: $('#contact [name="address"').val(),
  248.             zipcode: $('#contact [name="zipcode"').val(),
  249.             city: $('#contact [name="city"').val(),
  250.             country: $('#contact [name="country"').val(),
  251.             subject: $('#contact [name="subject"').val(),
  252.             message: $('#contact [name="message"').val(),
  253.           };
  254.           $.post('/contact/send/{{app.request.locale}}', form, function( data ) {
  255.             $('.contact-response').hide();
  256.             if(data.success == true){
  257.               $('#sendform').hide();
  258.               $('.contact-response').show();
  259.               $('.contact-response p').html("{{ 'js_contact_merci'|tr(tr)|raw }}");
  260.             } else {
  261.               $('.contact-response').show();
  262.               $('.contact-response p').text(data.error);
  263.             }
  264.           }, "json");
  265.             });
  266.           });
  267.       });
  268.       if( $('.nav-list .overlay').length > 0 ){
  269.         const overlay = document.querySelector('.nav-list .overlay');
  270.         const nav_list = document.querySelectorAll('.nav-list ul li');
  271.         nav_list.forEach((list) => {
  272.           list.addEventListener('mouseover', () => {
  273.             let position = list.getBoundingClientRect();
  274.             overlay.classList.add('active');
  275.             overlay.style.left = position.x + 'px';
  276.             overlay.style.top = position.y + 'px';
  277.             overlay.style.height = position.height + 'px';
  278.             overlay.style.width = position.width + 'px';
  279.           });
  280.           list.addEventListener('mouseout', () => {
  281.             overlay.classList.remove('active');
  282.           });
  283.         });
  284.       }
  285.     });
  286.     function hoverList(list){
  287.       if( $('.nav-list .overlay').length > 0 ){
  288.         const overlay = document.querySelector('.nav-list .overlay');
  289.         let position = list.getBoundingClientRect();
  290.         overlay.classList.add('active');
  291.         overlay.style.left = position.x + 'px';
  292.         // overlay.style.top = position.y + 'px';
  293.         overlay.style.top = $('.nav-list').position().top + 20 + 'px';
  294.         overlay.style.height = position.height + 'px';
  295.         overlay.style.width = position.width + 'px';
  296.       }
  297.     }
  298.     $('.nav-list ul li').on('mouseover', function(){
  299.       $('.nav-list ul li').removeClass('hover');
  300.       $(this).addClass('hover');
  301.     });
  302.     hoverList(document.querySelector('.nav-list ul li.active'));
  303.     setTimeout( function(){hoverList(document.querySelector('.nav-list ul li.active'));}  , 500);
  304.     setTimeout( function(){hoverList(document.querySelector('.nav-list ul li.active'));}  , 1000);
  305.   </script>
  306. {% endblock %}