{% extends 'FrontBundle/layout.html.twig' %}
{% block extra_class %}native{% endblock %}
{% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
{% block description %}{{ page.metaDescription }}{% endblock %}
{% block stylesheets %}
<link href="/front/css/owl.carousel.min.css" rel="stylesheet">
<link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
<style type="text/css">
.order-btn-link, .order-btn2 {
z-index: 888;
position: absolute;
bottom: 44px;
color: #ffffff;
text-decoration: none;
font-weight: 500;
margin-top: -15px;
display: flex;
gap: 1em;
align-items: center;
font-size: 16px;
font-style: normal;
line-height: normal;
justify-content: center;
padding: 15px 1px;
border: 0;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(24px);
cursor: pointer;
right: calc(10% - 38px);
width: 516px;
height: 60px;
text-align: center;
transition: 0.3s ease;
}
.order-btn2:hover{
text-decoration: none;
color: #ffffff;
}
.order-btn2 p span {
font-size: 13px;
}
.owl-carousel .owl-item img {
width: 119px !important;
}
.pochette-container{
background-image: url("https://royal-palace.com/front/home/Danseuse-Noel-cabaret-reduit.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 453px;
height: 357px;
border-radius: 25px;
}
.pochette-container::before{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 25px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 6.3%, rgba(0, 0, 0, 0.00) 52.24%);
z-index: 1;
}
.pochette-container > * {
position: relative;
z-index: 2;
}
.pochette-container title{
font-size: 30px;
}
.pochette-container a {
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.01);
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(9.600000381469727px);
color: #FFF;
text-decoration: none;
justify-content: center;
align-items: center;
display: flex;
width: 320px;
height: 49px;
}
.tickets-list span.title{
color: #FFF;
font-family: Montserrat, sans-serif;
font-size: 25px;
font-style: normal;
text-align: center;
font-weight: 500;
line-height: normal;
margin-top: 1.5rem;
display: flex;
justify-content: start;
margin-left: 3.5rem;
}
.hr-custom{
width: 90%;
height: 1px;
margin: 1em;
background: #ffffff;
display: block;
}
.pochette{
display: grid;
height: 357px;
justify-content: center;
justify-items: center;
row-gap: 1em;
grid-template-rows: 30% 10% 30%;
}
.grid-end-pochette{
display: grid;
justify-items: center;
justify-content: center;
margin: auto;
}
.grid-end-pochette p{
margin: 0;
width: 353px;
}
.mobile-spectacle{
display: none;
}
.tickets {
/* top: calc(50% + 142px);*/
top: calc(50% + 70px);
}
.tickets2 {
top: calc(50% + 27px);
}
.tickets.double {
/* top: calc(50% - 230px);*/
top: calc(50% - 340px);
}
.tickets {
width: 453px;
}
.tickets .close {
z-index: 99;
}
@media screen and (max-width: 452px) {
.mobile-spectacle{
display: flex;
}
.pochette{
display: none;
}
.pochette-container{
background: revert;
height: revert;
width: revert;
}
.pochette-container::before{
background: revert;
}
.pochette-container span.title{
font-size: revert;
}
.tickets-list span.title{
margin: revert;
}
}
@media (max-width: 430px){
.page_accueil .tickets.double {
/* top: calc(65% - 12px);*/
top: calc(65% - 189px); /* pochettes double + event */
}
}
.onlyMobile {
display: none;
}
.tickets.double .close img {
margin-top: 0px;
}
.tickets3 {
top: calc(50% - 131px);
}
.tickets4 {
top: calc(50% - 104px);
cursor: pointer;
}
.tickets4.onlyMobile {
/* top: calc(65% - 189px);*/
}
.pochette-simple {
height: 148px;
}
.pochette-simple a {
background: rgba(255, 255, 255, 0.14);
/* backdrop-filter: blur(9.600000381469727px);*/
}
.tickets .arrow {
width: 34px;
height: 130px;
border-radius: 30px;
position: absolute;
right: 10px;
top: -1px;
text-align: center;
cursor: pointer;
border: 1px solid #FFFFFF;
margin-top: 10px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
/* transition: 0.3s ease;*/
}
.tickets .arrow:hover {
background: rgba(255, 255, 255, 0.3);
/* backdrop-filter: blur(4px);*/
}
.tickets .arrow::after {
content: url(/front/img/reviews-arrow.svg);
line-height: 122px;
}
.pochette-simple .item span {
/* text-align: center;*/
}
/* SLIDER IF RESPONSIVE */
@media (max-height: 848px){
.noMobile {
display: none;
}
.onlyMobile {
display: block;
}
.tickets.double {
top: calc(50% - 240px);
}
.tickets {
top: calc(50% + 131px);
}
}
.tickets a.link,
.tickets a.link2 {
margin: 12px 0 0 0 !important;
}
.tickets .missofficielmobil .arrow::after {
line-height: 120px;
}
.video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0; /* Derrière le contenu principal */
/* display: flex;
justify-content: center;
align-items: center;*/
background-image: url('/front/img/preview.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.video-background iframe {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
/* TOPBANNER */
.topbanner {
position: fixed;
background-color: var(--red);
/*background-image: url('/front/img/snow.gif');*/
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 36px;
z-index: 999;
display: flex;
color: #FFFFFF;
align-items: center;
justify-content: center;
font-size: 15px;
text-align: center;
padding: 0px 10px;
font-weight: 600;
display: none;
}
.topbanner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--red);
mix-blend-mode: lighten;
pointer-events: none; /* Permet de rendre l'overlay non-interactif */
}
header {
margin-top: 0px;
}
@media (max-width: 762px) {
.topbanner {
font-size: 12px;
display: block;
line-height: 36px !important;
}
header {
margin-top: 36px !important;
}
}
/* END TOPBANNER */
</style>
{% endblock %}
{% block body %}
{#<div class="topbanner" onclick="openCalendar();">#}
<div class="topbanner" onclick=" window.location.href = '/{{app.request.locale }}/spectacle/le-parfum-des-etoiles' ">
<div class="topbanner-overlay"></div>
{{ 'topbanner'|tr(tr)|raw }}
</div>
<h1 class="h1top">Royal Palace Music Hall Kirrwiller</h1>
{% include 'FrontBundle/Partial/calendar.html.twig' %}
<section class="home">
{#
<video data-id="0" class="video-slide active" src="/front/videos/Home-plumes.mp4" autoplay muted loop playsinline></video>
<video data-id="1" class="video-slide " src="/front/videos/frenesie2.mp4" autoplay muted loop playsinline></video>
#}
{# 1 slider vidéo unique : pas de js #}
{# <video id="video1" data-id="0" class="video-slide active" src="/front/videos/Home-plumes.mp4" autoplay muted loop playsinline></video> #}
{# END 1 slider vidéo unique : pas de js #}
<div class="video-background">
<iframe
src="https://player.vimeo.com/video/1030772014?background=1&autoplay=1&loop=1&muted=1"
frameborder="0"
allow="autoplay; fullscreen;"
allowfullscreen
id="video-iframe"
class="video-iframe">
</iframe>
</div>
<div class="slider-navigation active">
<div class="nav-btn active" data-sec="11"></div>
<div class="nav-btn" data-sec="14"></div>
</div>
</section>
<div class="reviews">
<div class="reviews-content">
<span><strong>4.7</strong>/5
<img src="/front/img/star1.svg" alt="star">
<img src="/front/img/star1.svg" alt="star">
<img src="/front/img/star1.svg" alt="star">
<img src="/front/img/star1.svg" alt="star">
<img src="/front/img/star2.svg" alt="star">
</span>
<br>
<span class="text">{{ 'accueil_avis'|tr(tr)|raw }}</span>
<a href="https://goo.gl/maps/AY7CjoaW7SsQqxRT9" target="_blank" class="arrow"> </a>
</div>
</div>
{# {% if is_granted('ROLE_ADMIN') %} #}
{# BONS CADEAUX DOUBLES #}
{#
<div class="tickets double pochette-container">
<a href="#" class="close" onclick="$('.tickets').hide();"><img src="/front/img/tarifs-cross.svg" alt="close"></a>
<div class="tickets-list">
<div class="item mobile-spectacle">
<img src="/front/home/Danseuse-Noel-cabaret-reduit.jpg" alt="les bons cadeaux" class="cover" />
<div class="ps-6 pe-2 mx-auto">
<span class="title mx-auto">{{ 'bons_cadeaux'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" class="link">{{ 'visite_shop'|tr(tr)|raw }}</a>
</div>
</div>
<div class="ps-4 pe-2 pochette">
<div class="w-100 ">
<span class="title">{{ 'accueil_pochettes_title'|tr(tr)|raw }}</span>
<div class="hr-custom"></div>
</div>
<div></div>
<div class="grid-end-pochette">
<p>Il y a toujours une occasion pour faire plaisir.</p>
<p>Noël, fête des mères, anniversaire, départ en retraite, anniversaire de mariage !</p>
<a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" class="link2 mt-4">{{ 'bons_buy'|tr(tr)|raw }}</a>
</div>
</div>
</div>
</div> #}
{#
<div class="tickets tickets4 pochette-simple noMobile" style="top: calc(50% + -58px); background-image: url('/front/img/miss-alsace-siteofficiel.jpg');" href="https://miss-alsace.fr/">
<div class="item" style="display: flex; height: 100%; align-items: center;">
<div class="ps-2 pe-2" style="max-width: 62%;">
<span class="title">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
<span class="date" style="max-width: 200px;">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
<a href="https://miss-alsace.fr/" target="_blank" class="arrow"> </a>
</div>
</div>
#}{# <div class="owl-carousel">
<div class="item" style="display: flex;">
<img src="/front/img/spectacle-event4.jpg" alt="FLASH2211" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'events_e4_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'events_e4'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/miss-alsace" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
{% if concert.isfull == false %}
{% if concert.start.timestamp > date().timestamp %}
<div class="item" style="display: flex;">
<img src="/front/img/die-paldauer.jpg" alt="Die Paldauer" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'concert_6_title'|tr(tr)|raw }}</span>
<span class="date" {% if app.request.locale == "de" %} style="font-size: 0.775rem;" {% endif %}>{{ 'concert_6_subtitle'|tr(tr)|raw }}</span>
<a href="{{app.request.locale }}/reservation/tunnel?show_id={{ concert.id }}" class="link {{ (concert.isfull) ? 'btn-isfull' : '' }}" data-id="{{ concert.id }}">
{{ 'ticket_buy'|tr(tr)|raw }}
</a>
</div>
</div>
{% endif %}
{% endif %}
</div>#}{#
</div>
#}
{# POS 2 #}
{# OWL CAROUSEL #}
{# <div class="tickets tickets2 flash noMobile" style="top: calc(50% - 58px);">
<div class="owl-carousel">
<div class="item" style="display: flex;">
<img src="/front/img/spectacle-event9.jpg" alt="FLASH2211" class="cover" style="width: 136px !important;" />
<div class="ps-4 pe-2">
<span class="title">{{ 'ticket_1_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_1_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'spectacles-speciaux'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
</div>
</div>#}
{# SINGLE FULL CARD #}
{# <div class="tickets tickets4 pochette-simple flash noMobile" style="top: calc(50% - 58px); background-image: url('/front/img/noel-homepage.jpg');" href="/{{app.request.locale }}/{{ 'promos'|getUrl(app.request.locale) }}">
<div class="item" style="display: flex; height: 100%; align-items: center;">
<div class="ps-2 pe-2" style="max-width: 62%;">
<span class="title">{{ 'ticket_3_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_3_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'promos'|getUrl(app.request.locale) }}" target="_blank" class="arrow"> </a>
</div>
</div>
</div>#}
{# END POS 2 #}
<div class="tickets flash noMobile " style="top: calc(50% + 10px); ">
<div class="owl-carousel">
{#
<div class="item" style="display: flex;">
<img src="/front/img/robin-leon-front.jpg" alt="Robin Leon Show" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'ticket_rl_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_rl_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'robin-leon-show'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
#}
{#
<div class="item" style="display: flex;">
<img src="/front/img/paques-2025.jpg" alt="elixir-magique" class="cover" style="width: 136px !important;" />
<div class="ps-4 pe-2">
<span class="title" style="font-size: 16px">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
<a href="#" class="openPaques link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
#}
<div class="item" style="display: flex;">
<img src="/front/img/spectacle-event4.jpg" alt="FLASH2211" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'events_e4_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'events_e4'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/miss-alsace" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
</div>
</div>
<div class="d-none">
{# <div class="owl-carousel"> #}
{# <div class="item" style="display: flex;">
<img src="/front/img/carnaval-front.png" alt="Carnaval de Venise" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'carnticket_carnaval_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'carnticket_carnaval_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'carnaval-de-venise'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div> #}
{# </div> #}
</div>
<div class="tickets tickets4 pochette-simple flash noMobile" style="top: calc(50% - 158px); background-image: url('/front/img/bons-cadeaux-deesses.jpg');" href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles">
<div class="item" style="display: flex; height: 100%; align-items: center;">
<div class="page_shop" style="position: absolute; top: -5px; left: 0px;"><div class="favoris saved"><i style="margin-left: 0px;"></i></div></div>
<div class="ps-2 pe-2" style="max-width: 62%;">
<span class="title">{{ 'ticket_4_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_4_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" target="_blank" class="arrow"> </a>
</div>
</div>
</div>
<div class="tickets onlyMobile">
<div class="tickets tickets4 pochette-simple flash" style="background-image: url('/front/img/bons-cadeaux-deesses.jpg'); top: -157px;transform: scale(1); right: 0px;" href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles">
<div class="item" style="display: flex; height: 100%; align-items: center;">
<div class="page_shop" style="position: absolute; top: -5px; left: 0px;"><div class="favoris saved"><i style="margin-left: 0px;"></i></div></div>
<div class="ps-2 pe-2" style="max-width: 62%;">
<span class="title">{{ 'ticket_4_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_4_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" target="_blank" class="arrow"> </a>
</div>
</div>
</div>
<a href="#" class="close" onclick="$('.tickets').hide();"><img src="/front/img/tarifs-cross.svg" alt="close"></a>
<div class="owl-carousel">
{# <div class="item" style="display: flex;">
<img src="/front/img/carnaval-front.png" alt="Carnaval de Venise" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'carnticket_carnaval_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'carnticket_carnaval_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'carnaval-de-venise'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div> #}
{# <div class="item" style="display: flex;">
<img src="/front/img/robin-leon-front.jpg" alt="Robin Leon Show" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'ticket_rl_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_rl_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'robin-leon-show'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div> #}
{#
<div class="item missofficielmobil" style="display: flex; height: 136px; align-items: center; background-image: url('/front/img/miss-alsace-siteofficiel.jpg'); border-radius: 24px;
padding: 3px;">
<div class="ps-2 pe-2" style="max-width: 62%;">
<span class="title">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
<span class="date" style="max-width: 200px;">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
<a href="https://miss-alsace.fr/" target="_blank" class="arrow" style=" height: 120px;"> </a>
</div>
</div>
#}
<div class="item" style="display: flex;">
<img src="/front/img/spectacle-event4.jpg" alt="FLASH2211" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'events_e4_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'events_e4'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/miss-alsace" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
{# SINGLE FULL CARD #}
{# <div class="item tickets4" style="padding: 0; height: 133px; top: calc(50% - 58px); border-radius: 18px; background-image: url('/front/img/noel-homepage.jpg');" href="/{{app.request.locale }}/{{ 'promos'|getUrl(app.request.locale) }}">
<div class="" style="display: flex; height: 100%; align-items: center;">
<div class="ps-2 pe-2" style="max-width: 62%;">
<span class="title">{{ 'ticket_3_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_3_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'promos'|getUrl(app.request.locale) }}" target="_blank" class="arrow" style="transform: scale(0.9) translate(6px, -8px);"> </a>
</div>
</div>
</div>#}
{# <div class="item" style="display: flex;">
<img src="/front/img/robin-leon-front.jpg" alt="Robin Leon Show" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'ticket_rl_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_rl_subtitle'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/{{ 'robin-leon-show'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>#}
{# <div class="item" style="display: flex;">
<img src="/front/img/paques-2025.jpg" alt="elixir-magique" class="cover" style="width: 136px !important;" />
<div class="ps-4 pe-2">
<span class="title" style="font-size: 16px">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
<a href="#" class="openPaques link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>#}
{% if concert.isfull == false %}
{% if concert.start.timestamp > date().timestamp %}
<div class="item" style="display: flex;">
<img src="/front/img/die-paldauer.jpg" alt="Die Paldauer" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'concert_6_title'|tr(tr)|raw }}</span>
<span class="date" style="font-size: 0.675rem;">{{ 'concert_6_subtitle'|tr(tr)|raw }}</span>
<a href="{{app.request.locale }}/reservation/tunnel?show_id={{ concert.id }}" class="link {{ (concert.isfull) ? 'btn-isfull' : '' }}" data-id="{{ concert.id }}">
{{ 'ticket_buy'|tr(tr)|raw }}
</a>
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
{# VENTE FLASH 22/11/2023 #}
{#
<div class="tickets flash">
<div class="item" style="display: flex;">
<img src="/front/img/spectacle-event8.jpg" alt="FLASH2211" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'ticket_fl_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_fl_date'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/flash" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
</div>
#}
{# VENTE FLASH 22/11/2023 #}
{# {% else %}
<div class="tickets">
<a href="#" class="close" onclick="$('.tickets').hide();"><img src="/front/img/tarifs-cross.svg" alt="close"></a>
<div class="owl-carousel">
<div class="item" style="display: flex;">
<img src="/front/img/spectacle-event5.jpg" alt="Afterworks 2023" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'ticket_aw_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_aw_date'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/afterwork" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
<div class="item" style="display: flex;">
<img src="/front/img/spectacle-event6.jpg" alt="Oktoberfest 2023" class="cover" />
<div class="ps-4 pe-2">
<span class="title">{{ 'ticket_ok_title'|tr(tr)|raw }}</span>
<span class="date">{{ 'ticket_ok_date'|tr(tr)|raw }}</span>
<a href="/{{app.request.locale }}/oktoberfest" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
</div>
</div>
</div>
</div>
{% endif %} #}
<div class="home-message d-none">
<div class="home-message-content">
<a href="#" class="close"><img alt="fermer" src="/front/img/home-plus.svg" /></a>
<p class="title">{{ 'accueil_pochettes_title'|tr(tr)|raw }}</p>
<p class="content">{{ 'accueil_pochettes_desc'|tr(tr)|raw }}</p>
<a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}" class="button">{{ 'accueil_pochettes_btn'|tr(tr)|raw }}</a>
</div>
</div>
<ul class="bottom-menu">
<li><a href="https://www.facebook.com/royalpalacekirrwilleroff" target="_blank">facebook</a></li>
<li><a href="https://www.instagram.com/royalpalacekirrwiller/" target="_blank">instagram</a></li>
<li><a href="https://www.linkedin.com/company/le-royal-palace-kirrwiller/about/" target="_blank">linkedin</a></li>
<li><a href="/{{app.request.locale }}/{{ 'actualites'|getUrl(app.request.locale) }}">{{ 'menu_actu'|tr(tr)|raw }}</a></li>
<li><a href="#" class="phone">{{ 'contact_tel'|tr(tr)|raw }}</a><input type="hidden" id="phone" value="+33 (0)3 88 70 71 81" /></li>
<li><a href="#" class="email">email</a><input type="hidden" id="email" value="pmeyer@royal-palace.com" /></li>
<li></li>
</ul>
<button class="order-btn">{{ 'general_reserver'|tr(tr)|raw }}</button>
<a href="/{{app.request.locale }}/spectacle/le-parfum-des-etoiles" class="order-btn2 d-none d-xl-flex"><p class="mb-0">{{ 'discover_event'|tr(tr)|raw }}</p>
<img src="/front/img/2025/parfum-title.png" width="auto" height="50px" alt="logo parfum d'étoiles 2025" style="margin-top:1px;">
</a>
{% endblock %}
{% block javascripts %}
<script src="/front/js/owl.carousel.min.js"></script>
<script type="text/javascript">
function orderBtnPosition(mode){
var bottomMenuWidth = $('.bottom-menu').position().left + $('.bottom-menu').innerWidth();
if(mode != true){
$('.order-btn').css('left', 'calc(50%)');
$('.order-btn').css('transform', 'translateX(-50%)');
}
setTimeout(
function()
{
if( bottomMenuWidth > $('.order-btn').position().left ) {
$('.order-btn').css('left', bottomMenuWidth + 'px' );
$('.order-btn').css('transform', 'none' );
}
},
400);
}
function videoBackground(){
const iframe = document.querySelector('.video-background iframe');
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const aspectRatio = 16 / 9;
const currentRatio = windowWidth / windowHeight;
if (windowWidth > windowHeight) { // Orientation paysage
// Fixe la largeur au maximum de la fenêtre
const width = windowWidth;
const height = width / aspectRatio; // Hauteur basée sur le ratio 16:9
iframe.style.width = `${width}px`;
iframe.style.height = `${height}px`;
} else { // Orientation portrait
// Fixe la hauteur au maximum de la fenêtre
const height = windowHeight;
const width = height * aspectRatio; // Largeur basée sur le ratio 16:9
iframe.style.width = `${width}px`;
iframe.style.height = `${height}px`;
}
if(currentRatio < aspectRatio) {
const height = windowHeight;
const width = height * aspectRatio; // Largeur basée sur le ratio 16:9
iframe.style.width = `${width}px`;
iframe.style.height = `${height}px`;
}
}
$( document ).ready(function() {
// // ACTIVE VIDEO SLIDER
// if(window.innerWidth > 1047 ) {
// $('.slider-navigation').before('<video data-id="0" class="video-slide active" src="/front/videos/Teaser-Grand-Amour.mp4" autoplay muted loop playsinline ></video>');
// slideNavLoop(0);
// }
// // END ACTIVE VIDEO SLIDER
//SINGLE SLIDER NO MOBIL
if(window.innerWidth < 1048 ) {
$('#video1').remove();
}
//SINGLE SLIDER NO MOBIL END
orderBtnPosition();
videoBackground();
setTimeout(function(){ $('.home-message').addClass('open'); $('.home-message .home-message-content .close img').attr('src', '/front/img/home-minus.svg'); }, 1200);
setTimeout(function(){ $('.reviews').css('left', 0); }, 1500);
$( window ).resize(function() {
orderBtnPosition();
videoBackground();
});
$('.page_accueil .phone').on('click', function(e){
if( $(this).attr('href') == '#' ){
e.preventDefault();
$(this).text( $('#phone').val() );
$(this).attr('href', 'tel:'+$('#phone').val() );
orderBtnPosition(true);
}
});
$('.page_accueil .email').on('click', function(e){
if( $(this).attr('href') == '#' ){
e.preventDefault();
$(this).text( $('#email').val() );
$(this).attr('href', 'mailto:'+$('#email').val() );
orderBtnPosition(true);
}
});
$('.tickets4').on('click', function(e){
e.preventDefault();
window.location.href = $(this).attr('href');
});
$('.tickets .owl-carousel').owlCarousel({
loop:true,
autoplay:true,
autoplayTimeout:1500,
autoplayHoverPause:true,
nav:false,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:1
},
1920:{
items:1
}
}
});
$('.openNoel').on('click', function(e){
e.preventDefault();
openCalendar(); calendar.gotoDate('2024-11-01');
});
$('.openPaques').on('click', function(e){
e.preventDefault();
openCalendar(); calendar.gotoDate('2025-04-01');
});
});
</script>
{% endblock %}