{% extends 'FrontBundle/layout.html.twig' %}
{% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
{% block description %}{{ page.metaDescription }}{% endblock %}
{% block extra_class %}native{% endblock %}
{# {% block menu_min %}200{% endblock %} #}
{% block menu_max %}2252{% endblock %}
{% block sub_header %}
<div class="sub-header">
<ul>
<li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
<li class="versailles"><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
<li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
<li class="lounge active"><a href="/{{app.request.locale }}/lounge-club">Lounge club</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="info-header">
<ul>
<li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
<li><a href="/{{app.request.locale }}/le-versailles">Le Versailles</a></li>
<li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
<li class="active purple"><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
</ul>
</section>
<section class="espace-header" style="background-image: url('/front/img/lounge-slider0.jpg');">
<div class="shadow-60"></div>
<div class="container">
<h1>Lounge club</h1>
<p>{{ 'lounge_desc'|tr(tr)|raw }}</p>
</div>
<a href="/{{app.request.locale }}/{{ 'reservation'|getUrl(app.request.locale) }}" class="order-btn-link">{{ 'general_reserver'|tr(tr)|raw }}</a>
<ul>
<li><a href="/{{app.request.locale }}/le-majestic">Le Majestic</a></li>
<li><a href="/{{app.request.locale }}/le-versailles">Le versailles</a></li>
<li><a href="/{{app.request.locale }}/la-salle">{{ 'espaces_salle'|tr(tr)|raw }}</a></li>
<li class="active"><a href="/{{app.request.locale }}/lounge-club">Lounge club</a></li>
</ul>
</section>
<section class="espace-content">
<div class="owl-carousel lounge esp">
<div class="item"><img src="/front/img/lounge-slider0.jpg" alt="lounge" /></div>
<div class="item"><img src="/front/img/lounge-slider1.jpg" alt="lounge" /></div>
<div class="item"><img src="/front/img/lounge-slider2.jpg" alt="lounge" /></div>
<div class="item"><img src="/front/img/lounge-slider4.jpg" alt="lounge" /></div>
</div>
<div class="horizontal-bar-container">
<div class="horizontal-bar"></div>
<div class="horizontal-bar-ctrl purple"></div>
</div>
<a href="#next" class="next-arrow"><img src="/front/img/espaces-arrow-b-l.svg" alt="suivant" /></a>
<h2 id="next" class="no-bar" style="padding-top: 160px;">{{ 'lounge_s1_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
<p class="quote pt-0 mt-5">{{ 'lounge_s1'|tr(tr)|raw }}</p>
</section>
<section class="espace-tarifs salle" style="background-image: url('/front/img/espaces-lounge-club.jpg');">
<div class="container">
</div>
</section>
<section class="espace-content second">
<h2 id="" class="no-bar">{{ 'lounge_s2_title'|tr(tr)|raw }}<span class="full-bar"></span></h2>
<p class="pt-0 mt-5">{{ 'lounge_s2'|tr(tr)|raw }}</p>
<div class="owl-carousel lounge-icons">
<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>
<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>
<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>
<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>
<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>
</div>
</section>
<section class="espace-content second" style="margin-bottom: 2px;">
<h2 id="">{{ 'lounge_s3_title'|tr(tr)|raw }}</h2>
<p class="text-black text-center">{{ 'lounge_s3'|tr(tr)|raw }}</p>
<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="Sujet*" name="subject" />
<textarea placeholder="Message*" name="message"></textarea>
</div>
<div class="contact-response">
<p class="text-center p-0 mt-0 mb-2"></p>
</div>
<button id="sendform" class="send">{{ 'contact_envoyer'|tr(tr)|raw }}</button>
</div>
<div class="lounge-info">
<p class="title">{{ 'general_royal_palace'|tr(tr)|raw }}</p>
<p class="address">20 Rue de Hochfelden,<br>67330 KIRRWILLER<br>FRANCE</p>
<a href="tel:+33 (0)3 88 70 71 81" class="phone">+33 (0)3 88 70 71 81</a>
<a href="mailto:pmeyer@royal-palace.com" class="email">pmeyer@royal-palace.com</a>
</div>
</form>
</section>
<div class="lounge-bg3"></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 src="/front/js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#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");
});
});
});
});
var owl = $('.owl-carousel.lounge');
owl.owlCarousel({
loop:false,
margin:30,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1920:{
items:3
}
}
});
var owl2 = $('.owl-carousel.lounge-icons');
owl2.owlCarousel({
loop:false,
margin:30,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:5
},
1920:{
items:5
}
}
});
// HEADER IMAGE SWITCH
carouselIndex = 0;
$('.owl-carousel.esp img').mousedown(function() {
setTimeout(function() { carouselIndex = owl.data()['owl.carousel']._current }, 220);
});
$('.owl-carousel.esp img').on('click', function(e){
e.preventDefault();
if( carouselIndex == owl.data()['owl.carousel']._current ){
$('.espace-header').attr('style', 'background-image: url("'+$(this).attr('src')+'");') ;
}
});
// END HEADER IMAGE SWITCH
if( $('.project-bar-ctrl').length >0 ) {
offset = $('.project-bar-ctrl').offset().top;
$('.gallery-container').scroll(function(){
var pos = $('.gallery-container').scrollTop();
var top = pos * 706 / 1823;
$('.project-bar-ctrl').css('top', top+'px');
});
}
owl.on('changed.owl.carousel', function(event) {
var itemsNbr = owl.data()['owl.carousel'].settings.items;
var itemsTotal = event.item.count;
var itemsIndex = event.item.index;
var pagesNbr = itemsTotal - itemsNbr;
var horizontalBar = $('.horizontal-bar').outerWidth();
var horizontalBarCtrl = $('.horizontal-bar-ctrl').outerWidth();
var courseLength = $('.horizontal-bar').outerWidth() - $('.horizontal-bar-ctrl').outerWidth();
var left = itemsIndex * 100 / pagesNbr; // percent
left = left * courseLength / 100;
$('.horizontal-bar-ctrl').css('left', left+'px');
});
</script>
{% endblock %}