{% extends 'FrontBundle/layout.html.twig' %}
{% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
{% block description %}{{ page.metaDescription }}{% endblock %}
{% block extra_class %}stack{% endblock %}
{# {% block menu_min %}200{% endblock %} #}
{% block menu_max %}2636{% endblock %}
{# {% block sub_header %}
<div class="sub-header">
<ul>
<li class="active"><a href="/{{app.request.locale }}/informations-pratiques">Informations</a></li>
<li><a href="/{{app.request.locale }}/mini-suites">Mini-suites</a></li>
<li><a href="/{{app.request.locale }}/nos-partenaires">Partenaires</a></li>
</ul>
</div>
{% endblock %} #}
{% block stylesheets %}
<link href="/front/css/owl.carousel.min.css" rel="stylesheet">
<link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
{% endblock %}
{% block body %}
<section class="espace-content second info-top">
<div class="row fluid-menu mb-5">
<div class="nav-menu">
<div class="nav-list">
<div class="overlay" style="top: 195px; height: 37px; width: 145.922px;"></div>
<ul>
<li class="active hover"><a href="/{{app.request.locale }}/{{ 'informations-pratiques'|getUrl(app.request.locale) }}">{{ 'infos_menu1'|tr(tr)|raw }}</a></li>
<li class=""><a href="/{{app.request.locale }}/{{ 'mini-suites'|getUrl(app.request.locale) }}">{{ 'infos_menu2'|tr(tr)|raw }}</a></li>
<li class=""><a href="/{{app.request.locale }}/{{ 'nos-partenaires'|getUrl(app.request.locale) }}">{{ 'infos_menu3'|tr(tr)|raw }}</a></li>
</ul>
</div>
</div>
</div>
<h1 class="text-center mb-4">{{ 'infos_title'|tr(tr)|raw }}</h1>
{{ 'infos_desc'|tr(tr)|raw }}
<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>
</section>
<section class="espace-content full mt-0 grey-bg infos">
<div class="content mt-5 pt-5">
<h2 class="mb-5 no-bar voiture">{{ 'infos_s1_title'|tr(tr)|raw }}</h2>
<div class="row pb-5">
<div class="col-md-3">
<p>
<strong class="mb-3">{{ 'infos_s1_t1'|tr(tr)|raw }}</strong><br>
– Strasbourg : 30mn<br>
– Baden Baden : 45mn<br>
– Bâle, Mulhouse : 1h30<br>
– Saarbrücken : 1h30
</p>
</div>
<div class="col-md-3">
<p>
<strong class="mb-3">{{ 'infos_s1_t2'|tr(tr)|raw }}</strong><br>
– Paris-Strasbourg : TGV, 2h20<br>
– Strasbourg : 30mn<br>
– Saverne : 20mn<br>
– Obermodern : 5mn
</p>
</div>
<div class="col-md-3">
<p>
<strong class="mb-3">{{ 'infos_s1_t3'|tr(tr)|raw }}</strong><br>
{{ 'infos_s1_t32'|tr(tr)|raw }}
</p>
<p class="mt-3">
<strong class="mb-3">{{ 'infos_s1_t4'|tr(tr)|raw }}</strong><br>
{{ 'infos_s1_t42'|tr(tr)|raw }}
</p>
</div>
<div class="col-md-3">
<p>
</p>
</div>
</div>
</div>
</section>
<section class="espace-content full mt-0 infos">
<div class="content mt-5 pt-4">
<h2 class="mb-5 no-bar heure">{{ 'infos_s2_title'|tr(tr)|raw }}</h2>
<div class="row pb-4">
<div class="col-md-6">
{{ 'infos_s2_1'|tr(tr)|raw }}
</div>
<div class="col-md-6">
{{ 'infos_s2_2'|tr(tr)|raw }}
</div>
<div class="col-md-2">
</div>
<div class="col-md-12">
{{ 'infos_s2_3'|tr(tr)|raw }}
{# <i class="mt-3">
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.
</i> #}
</div>
</div>
</div>
</section>
<section class="espace-content full mt-0 grey-bg infos">
<div class="content mt-5 pt-5">
<h2 class="mb-5 no-bar ticket">{{ 'infos_s3_title'|tr(tr)|raw }}</h2>
<div class="row pb-5">
<div class="col-md-8">
<p>
{{ 'infos_s3_desc'|tr(tr)|raw }}
</p>
</div>
<div class="col-md-4">
<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>
</div>
</div>
</div>
</section>
<section class="espace-content full mt-0 infos">
<div class="content mt-5 pt-4">
<h2 class="mb-5 no-bar banque">{{ 'infos_s4_title'|tr(tr)|raw }}</h2>
<div class="row pb-4">
<div class="col-md-5">
<p>
<strong class="mb-3">STE ADAM MEYER :</strong><br>
BANQUE CCM DE BOUXWILLER ET ENVIRONS<br>
IBAN : FR76 10278 01670 00013429645 56<br>
BIC : CMCIFR2A
</p>
</div>
<div class="col-md-5">
<p>
<strong class="mb-3">ROYAL SHOW PRODUCTIONS :</strong><br>
BANQUE : CCM DE BOUXWILLER ET ENVIRONS<br>
IBAN : FR 76 10278 01670 00014697745 96<br>
BIC : CMCIFR2A
</p>
</div>
</div>
</div>
</section>
<section class="espace-content full mt-0 grey-bg infos">
<div class="content mt-5 pt-5">
<h2 class="mb-5 no-bar other">{{ 'infos_s5_title'|tr(tr)|raw }}</h2>
<div class="row pb-5">
<div class="col-md-4">
{{ 'infos_s5_1'|tr(tr)|raw }}
</div>
<div class="col-md-4">
{{ 'infos_s5_2'|tr(tr)|raw }}
{{ 'infos_s5_3'|tr(tr)|raw }}
</div>
<div class="col-md-4">
{{ 'infos_s5_4'|tr(tr)|raw }}
</div>
</div>
</div>
</section>
<section class="espace-content full mt-0 infos">
<div class="content mt-0 pt-4">
<h2 class="mb-5 no-icon"> </h2>
<div class="row pb-4">
<div class="col-md-12">
<i class="text-italic">{{ 'infos_pmr'|tr(tr)|raw }}</i>
</div>
</div>
</div>
</section>
<section class="espace-content full mt-0 infos contact" id="contact">
<div class="content">
<h2 class="mb-5 mt-4 no-icon">{{ 'infos_contact'|tr(tr)|raw }}</h2>
<div class="row pb-4">
{# <div class="col-md-12 text-center">
<h4 class="mt-3 mb-4">NOUS CONTACTER</h4>
<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>
</div> #}
{#
<form>
<div class="row">
<div class="col-md-6">
<input type="text" placeholder="Nom*" name="lastname" />
<input type="text" placeholder="Prénom*" name="firstname" />
<input type="text" placeholder="Société" name="company" />
<input type="tel" placeholder="Téléphone*" name="phone" />
<input type="email" placeholder="E-mail*" name="email" />
<input type="text" placeholder="Adresse*" name="address" />
</div>
<div class="col-md-6">
<input type="number" placeholder="Code postal*" name="zipcode" />
<input type="text" placeholder="Ville*" name="city" />
<input type="text" placeholder="Pays*" name="country" />
<div class="select-wrapper">
<select name="subject">
<option value="0">SUJET*</option>
</select>
</div>
<textarea placeholder="Message*" name="message"></textarea>
</div>
<button class="send">Envoyer</button>
</div>
</form> #}
<form class="form2" id="contact">
<div class="row">
<div class="col-md-6">
<input type="text" placeholder="{{ 'contact_nom'|tr(tr)|raw }}*" name="lastname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('lastname') }}{% endif %}" />
<input type="text" placeholder="{{ 'contact_prenom'|tr(tr)|raw }}*" name="firstname" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('firstname') }}{% endif %}" />
<input type="text" placeholder="{{ 'contact_societe'|tr(tr)|raw }}" name="company" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('company') }}{% endif %}" />
<input type="tel" placeholder="{{ 'contact_tel'|tr(tr)|raw }}*" name="phone" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('phone') }}{% endif %}" />
<input type="email" placeholder="{{ 'contact_email'|tr(tr)|raw }}*" name="email" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.email }}{% endif %}" />
<input type="text" placeholder="{{ 'contact_adresse'|tr(tr)|raw }}*" name="address" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('address1') }}{% endif %}" />
</div>
<div class="col-md-6">
<input type="text" placeholder="{{ 'contact_code'|tr(tr)|raw }}*" name="zipcode" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('zipcode') }}{% endif %}" />
<input type="text" placeholder="{{ 'contact_ville'|tr(tr)|raw }}*" name="city" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('city') }}{% endif %}" />
<input type="text" placeholder="{{ 'contact_pays'|tr(tr)|raw }}*" name="country" value="{% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}{{ app.user.info('country') }}{% endif %}" />
<input type="text" placeholder="{{ 'contact_sujet'|tr(tr)|raw }}*" name="subject" />
<textarea placeholder="{{ 'contact_message_full'|tr(tr)|raw }}*" name="message"></textarea>
</div>
<div class="row contact-response">
<p class="text-center mt-0 mb-0"></p>
</div>
<button id="sendform" class="send">{{ 'contact_envoyer'|tr(tr)|raw }}</button>
</div>
</form>
</div>
</div>
</section>
<div class="infos-bg2">
<div class="info-footer">
{# <img src="/front/img/grand-amour-w.svg" alt="grand amour" width="180px" />
<a href="/{{app.request.locale }}/spectacle/grand-amour">{{ 'footer_decouvrir'|tr(tr)|raw }}</a>#}
</div>
</div>
{% include 'FrontBundle/Partial/footer.html.twig' %}
{% endblock %}
{% block javascripts %}
<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_public_key }}"></script>
<script type="text/javascript">
$(document).ready(function() {
hoverList(document.querySelector('.nav-list ul li.active'));
$(window).scrollTop(0);
$('#sendform').on('click', function(e){
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('{{ recaptcha_public_key }}', {action: 'submit'}).then(function(token) {
var form = {
token: token,
firstname: $('#contact [name="firstname"').val(),
lastname: $('#contact [name="lastname"').val(),
company: $('#contact [name="company"').val(),
phone: $('#contact [name="phone"').val(),
email: $('#contact [name="email"').val(),
address: $('#contact [name="address"').val(),
zipcode: $('#contact [name="zipcode"').val(),
city: $('#contact [name="city"').val(),
country: $('#contact [name="country"').val(),
subject: $('#contact [name="subject"').val(),
message: $('#contact [name="message"').val(),
};
$.post('/contact/send/{{app.request.locale}}', form, function( data ) {
$('.contact-response').hide();
if(data.success == true){
$('#sendform').hide();
$('.contact-response').show();
$('.contact-response p').html("{{ 'js_contact_merci'|tr(tr)|raw }}");
} else {
$('.contact-response').show();
$('.contact-response p').text(data.error);
}
}, "json");
});
});
});
if( $('.nav-list .overlay').length > 0 ){
const overlay = document.querySelector('.nav-list .overlay');
const nav_list = document.querySelectorAll('.nav-list ul li');
nav_list.forEach((list) => {
list.addEventListener('mouseover', () => {
let position = list.getBoundingClientRect();
overlay.classList.add('active');
overlay.style.left = position.x + 'px';
overlay.style.top = position.y + 'px';
overlay.style.height = position.height + 'px';
overlay.style.width = position.width + 'px';
});
list.addEventListener('mouseout', () => {
overlay.classList.remove('active');
});
});
}
});
function hoverList(list){
if( $('.nav-list .overlay').length > 0 ){
const overlay = document.querySelector('.nav-list .overlay');
let position = list.getBoundingClientRect();
overlay.classList.add('active');
overlay.style.left = position.x + 'px';
// overlay.style.top = position.y + 'px';
overlay.style.top = $('.nav-list').position().top + 20 + 'px';
overlay.style.height = position.height + 'px';
overlay.style.width = position.width + 'px';
}
}
$('.nav-list ul li').on('mouseover', function(){
$('.nav-list ul li').removeClass('hover');
$(this).addClass('hover');
});
hoverList(document.querySelector('.nav-list ul li.active'));
setTimeout( function(){hoverList(document.querySelector('.nav-list ul li.active'));} , 500);
setTimeout( function(){hoverList(document.querySelector('.nav-list ul li.active'));} , 1000);
</script>
{% endblock %}