templates/FrontBundle/Page/index.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  2. {% block extra_class %}native{% endblock %}
  3. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  4. {% block description %}{{ page.metaDescription }}{% endblock %}
  5. {% block stylesheets %}
  6.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  7.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  8.     <style type="text/css">
  9.         .order-btn-link, .order-btn2 {
  10.             z-index: 888;
  11.             position: absolute;
  12.             bottom: 44px;
  13.             color: #ffffff;
  14.             text-decoration: none;
  15.             font-weight: 500;
  16.             margin-top: -15px;
  17.             display: flex;
  18.             gap: 1em;
  19.             align-items: center;
  20.             font-size: 16px;
  21.             font-style: normal;
  22.             line-height: normal;
  23.             justify-content: center;
  24.             padding: 15px 1px;
  25.             border: 0;
  26.             border-radius: 30px;
  27.             background-color: rgba(255, 255, 255, 0.1);
  28.             backdrop-filter: blur(5px);
  29.             -webkit-backdrop-filter: blur(24px);
  30.             cursor: pointer;
  31.             right: calc(10% - 38px);
  32.             width: 516px;
  33.             height: 60px;
  34.             text-align: center;
  35.             transition: 0.3s ease;
  36.         }
  37.         .order-btn2:hover{
  38.             text-decoration: none;
  39.             color: #ffffff;
  40.         }
  41.         .order-btn2 p span {
  42.             font-size: 13px;
  43.         }
  44.         .owl-carousel .owl-item img {
  45.             width: 119px !important;
  46.         }
  47.         .pochette-container{
  48.             background-image: url("https://royal-palace.com/front/home/Danseuse-Noel-cabaret-reduit.jpg");
  49.             background-position: center;
  50.             background-repeat: no-repeat;
  51.             background-size: cover;
  52.             width: 453px;
  53.             height: 357px;
  54.             border-radius: 25px;
  55.         }
  56.         .pochette-container::before{
  57.             content: "";
  58.             position: absolute;
  59.             top: 0;
  60.             right: 0;
  61.             bottom: 0;
  62.             left: 0;
  63.             border-radius: 25px;
  64.             background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 6.3%, rgba(0, 0, 0, 0.00) 52.24%);
  65.             z-index: 1;
  66.         }
  67.         .pochette-container > * {
  68.             position: relative;
  69.             z-index: 2;
  70.         }
  71.         .pochette-container title{
  72.             font-size: 30px;
  73.         }
  74.         .pochette-container a {
  75.             border-radius: 100px;
  76.             border: 1px solid rgba(255, 255, 255, 0.01);
  77.             background: rgba(255, 255, 255, 0.14);
  78.             backdrop-filter: blur(9.600000381469727px);
  79.             color: #FFF;
  80.             text-decoration: none;
  81.             justify-content: center;
  82.             align-items: center;
  83.             display: flex;
  84.             width: 320px;
  85.             height: 49px;
  86.         }
  87.         .tickets-list span.title{
  88.             color: #FFF;
  89.             font-family: Montserrat, sans-serif;
  90.             font-size: 25px;
  91.             font-style: normal;
  92.             text-align: center;
  93.             font-weight: 500;
  94.             line-height: normal;
  95.             margin-top: 1.5rem;
  96.             display: flex;
  97.             justify-content: start;
  98.             margin-left: 3.5rem;
  99.         }
  100.         .hr-custom{
  101.             width: 90%;
  102.             height: 1px;
  103.             margin: 1em;
  104.             background: #ffffff;
  105.             display: block;
  106.         }
  107.         .pochette{
  108.             display: grid;
  109.             height: 357px;
  110.             justify-content: center;
  111.             justify-items: center;
  112.             row-gap: 1em;
  113.             grid-template-rows: 30% 10% 30%;
  114.         }
  115.         .grid-end-pochette{
  116.             display: grid;
  117.             justify-items: center;
  118.             justify-content: center;
  119.             margin: auto;
  120.         }
  121.         .grid-end-pochette p{
  122.             margin: 0;
  123.             width: 353px;
  124.         }
  125.         .mobile-spectacle{
  126.             display: none;
  127.         }
  128.         .tickets {
  129.             /*  top: calc(50% + 142px);*/
  130.             top: calc(50% + 70px);
  131.         }
  132.         .tickets2 {
  133.             top: calc(50% + 27px);
  134.         }
  135.         .tickets.double {
  136.             /*  top: calc(50% - 230px);*/
  137.             top: calc(50% - 340px);
  138.         }
  139.         .tickets {
  140.             width: 453px;
  141.         }
  142.         .tickets .close {
  143.             z-index: 99;
  144.         }
  145.         @media screen and (max-width: 452px) {
  146.             .mobile-spectacle{
  147.                 display: flex;
  148.             }
  149.             .pochette{
  150.                 display: none;
  151.             }
  152.             .pochette-container{
  153.                 background: revert;
  154.                 height: revert;
  155.                 width: revert;
  156.             }
  157.             .pochette-container::before{
  158.                 background: revert;
  159.             }
  160.             .pochette-container span.title{
  161.                 font-size: revert;
  162.             }
  163.             .tickets-list span.title{
  164.                 margin: revert;
  165.             }
  166.         }
  167.         @media (max-width: 430px){
  168.             .page_accueil .tickets.double {
  169.                 /*        top: calc(65% - 12px);*/
  170.                 top: calc(65% - 189px); /* pochettes double + event */
  171.             }
  172.         }
  173.         .onlyMobile {
  174.             display: none;
  175.         }
  176.         .tickets.double .close img {
  177.             margin-top: 0px;
  178.         }
  179.         .tickets3 {
  180.             top: calc(50% - 131px);
  181.         }
  182.         .tickets4 {
  183.             top: calc(50% - 104px);
  184.             cursor: pointer;
  185.         }
  186.         .tickets4.onlyMobile {
  187.             /*    top:  calc(65% - 189px);*/
  188.         }
  189.         .pochette-simple {
  190.             height: 148px;
  191.         }
  192.         .pochette-simple a {
  193.             background: rgba(255, 255, 255, 0.14);
  194.             /*    backdrop-filter: blur(9.600000381469727px);*/
  195.         }
  196.         .tickets .arrow {
  197.             width: 34px;
  198.             height: 130px;
  199.             border-radius: 30px;
  200.             position: absolute;
  201.             right: 10px;
  202.             top: -1px;
  203.             text-align: center;
  204.             cursor: pointer;
  205.             border: 1px solid #FFFFFF;
  206.             margin-top: 10px;
  207.             backdrop-filter: blur(2px);
  208.             -webkit-backdrop-filter: blur(2px);
  209.             /*    transition: 0.3s ease;*/
  210.         }
  211.         .tickets .arrow:hover {
  212.             background: rgba(255, 255, 255, 0.3);
  213.             /*    backdrop-filter: blur(4px);*/
  214.         }
  215.         .tickets .arrow::after {
  216.             content: url(/front/img/reviews-arrow.svg);
  217.             line-height: 122px;
  218.         }
  219.         .pochette-simple .item span {
  220.             /*    text-align: center;*/
  221.         }
  222.         /* SLIDER IF RESPONSIVE */
  223.         @media (max-height: 848px){
  224.             .noMobile {
  225.                 display: none;
  226.             }
  227.             .onlyMobile {
  228.                 display: block;
  229.             }
  230.             .tickets.double {
  231.                 top: calc(50% - 240px);
  232.             }
  233.             .tickets {
  234.                 top: calc(50% + 131px);
  235.             }
  236.         }
  237.         .tickets a.link,
  238.         .tickets a.link2 {
  239.             margin: 12px 0 0 0 !important;
  240.         }
  241.         .tickets .missofficielmobil .arrow::after {
  242.             line-height: 120px;
  243.         }
  244.         .video-background {
  245.             position: fixed;
  246.             top: 0;
  247.             left: 0;
  248.             width: 100%;
  249.             height: 100%;
  250.             overflow: hidden;
  251.             z-index: 0; /* Derrière le contenu principal */
  252.             /*      display: flex;
  253.                   justify-content: center;
  254.                   align-items: center;*/
  255.             background-image: url('/front/img/preview.jpg');
  256.             background-size: cover;
  257.             background-repeat: no-repeat;
  258.             background-position: top center;
  259.         }
  260.         .video-background iframe {
  261.             left: 50%;
  262.             position: absolute;
  263.             transform: translateX(-50%);
  264.         }
  265.         /* TOPBANNER */
  266.         .topbanner {
  267.             position: fixed;
  268.             background-color: var(--red);
  269.             /*background-image: url('/front/img/snow.gif');*/
  270.             cursor: pointer;
  271.             top: 0;
  272.             left: 0;
  273.             width: 100%;
  274.             height: 36px;
  275.             z-index: 999;
  276.             display: flex;
  277.             color: #FFFFFF;
  278.             align-items: center;
  279.             justify-content: center;
  280.             font-size: 15px;
  281.             text-align: center;
  282.             padding: 0px 10px;
  283.             font-weight: 600;
  284.             display: none;
  285.         }
  286.         .topbanner-overlay {
  287.             position: absolute;
  288.             top: 0;
  289.             left: 0;
  290.             width: 100%;
  291.             height: 100%;
  292.             background-color: var(--red);
  293.             mix-blend-mode: lighten;
  294.             pointer-events: none; /* Permet de rendre l'overlay non-interactif */
  295.         }
  296.         header {
  297.             margin-top: 0px;
  298.         }
  299.         @media (max-width: 762px) {
  300.             .topbanner {
  301.                 font-size: 12px;
  302.                 display: block;
  303.                 line-height: 36px !important;
  304.             }
  305.             header {
  306.                 margin-top: 36px !important;
  307.             }
  308.         }
  309.         /* END TOPBANNER */
  310.     </style>
  311. {% endblock %}
  312. {% block body %}
  313.     {#<div class="topbanner" onclick="openCalendar();">#}
  314.     <div class="topbanner" onclick=" window.location.href = '/{{app.request.locale }}/spectacle/le-parfum-des-etoiles'  ">
  315.         <div class="topbanner-overlay"></div>
  316.         {{ 'topbanner'|tr(tr)|raw }}
  317.     </div>
  318.     <h1 class="h1top">Royal Palace Music Hall Kirrwiller</h1>
  319.     {% include 'FrontBundle/Partial/calendar.html.twig' %}
  320.     <section class="home">
  321.         {#
  322.         <video data-id="0" class="video-slide active" src="/front/videos/Home-plumes.mp4" autoplay muted loop playsinline></video>
  323.         <video data-id="1" class="video-slide " src="/front/videos/frenesie2.mp4" autoplay muted loop playsinline></video>
  324.         #}
  325.         {# 1 slider vidéo unique : pas de js #}
  326.         {# <video id="video1" data-id="0" class="video-slide active" src="/front/videos/Home-plumes.mp4" autoplay muted loop playsinline></video> #}
  327.         {# END 1 slider vidéo unique : pas de js #}
  328.         <div class="video-background">
  329.             <iframe
  330.                     src="https://player.vimeo.com/video/1030772014?background=1&autoplay=1&loop=1&muted=1"
  331.                     frameborder="0"
  332.                     allow="autoplay; fullscreen;"
  333.                     allowfullscreen
  334.                     id="video-iframe"
  335.                     class="video-iframe">
  336.             </iframe>
  337.         </div>
  338.         <div class="slider-navigation active">
  339.             <div class="nav-btn active" data-sec="11"></div>
  340.             <div class="nav-btn" data-sec="14"></div>
  341.         </div>
  342.     </section>
  343.     <div class="reviews">
  344.         <div class="reviews-content">
  345.     <span><strong>4.7</strong>/5
  346.     <img src="/front/img/star1.svg" alt="star">
  347.     <img src="/front/img/star1.svg" alt="star">
  348.     <img src="/front/img/star1.svg" alt="star">
  349.     <img src="/front/img/star1.svg" alt="star">
  350.     <img src="/front/img/star2.svg" alt="star">
  351.     </span>
  352.             <br>
  353.             <span class="text">{{ 'accueil_avis'|tr(tr)|raw }}</span>
  354.             <a href="https://goo.gl/maps/AY7CjoaW7SsQqxRT9" target="_blank" class="arrow"> </a>
  355.         </div>
  356.     </div>
  357.     {#     {% if is_granted('ROLE_ADMIN') %} #}
  358.     {# BONS CADEAUX DOUBLES #}
  359.     {#
  360.     <div class="tickets double pochette-container">
  361.       <a href="#" class="close"  onclick="$('.tickets').hide();"><img src="/front/img/tarifs-cross.svg" alt="close"></a>
  362.       <div class="tickets-list">
  363.         <div class="item mobile-spectacle">
  364.           <img src="/front/home/Danseuse-Noel-cabaret-reduit.jpg" alt="les bons cadeaux" class="cover" />
  365.           <div class="ps-6 pe-2 mx-auto">
  366.             <span class="title mx-auto">{{ 'bons_cadeaux'|tr(tr)|raw }}</span>
  367.             <a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" class="link">{{ 'visite_shop'|tr(tr)|raw }}</a>
  368.           </div>
  369.         </div>
  370.         <div class="ps-4 pe-2 pochette">
  371.           <div class="w-100 ">
  372.             <span class="title">{{ 'accueil_pochettes_title'|tr(tr)|raw }}</span>
  373.             <div class="hr-custom"></div>
  374.           </div>
  375.           <div></div>
  376.           <div class="grid-end-pochette">
  377.             <p>Il y a toujours une occasion pour faire plaisir.</p>
  378.             <p>Noël, fête des mères, anniversaire, départ en retraite, anniversaire de mariage !</p>
  379.             <a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" class="link2 mt-4">{{ 'bons_buy'|tr(tr)|raw }}</a>
  380.           </div>
  381.         </div>
  382.       </div>
  383.     </div> #}
  384.     {#
  385.     <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/">
  386.       <div class="item" style="display: flex; height: 100%; align-items: center;">
  387.         <div class="ps-2 pe-2" style="max-width: 62%;">
  388.           <span class="title">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
  389.           <span class="date" style="max-width: 200px;">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
  390.           <a href="https://miss-alsace.fr/" target="_blank" class="arrow"> </a>
  391.         </div>
  392.       </div>
  393.     #}{#    <div class="owl-carousel">
  394.       <div class="item" style="display: flex;">
  395.         <img src="/front/img/spectacle-event4.jpg" alt="FLASH2211" class="cover" />
  396.         <div class="ps-4 pe-2">
  397.           <span class="title">{{ 'events_e4_title'|tr(tr)|raw }}</span>
  398.           <span class="date">{{ 'events_e4'|tr(tr)|raw }}</span>
  399.           <a href="/{{app.request.locale }}/miss-alsace" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  400.         </div>
  401.       </div>
  402.       {% if concert.isfull == false %}
  403.         {% if concert.start.timestamp > date().timestamp %}
  404.           <div class="item" style="display: flex;">
  405.             <img src="/front/img/die-paldauer.jpg" alt="Die Paldauer" class="cover" />
  406.             <div class="ps-4 pe-2">
  407.               <span class="title">{{ 'concert_6_title'|tr(tr)|raw }}</span>
  408.               <span class="date" {% if app.request.locale == "de" %} style="font-size: 0.775rem;" {% endif %}>{{ 'concert_6_subtitle'|tr(tr)|raw }}</span>
  409.               <a href="{{app.request.locale }}/reservation/tunnel?show_id={{ concert.id }}" class="link {{ (concert.isfull) ? 'btn-isfull' : '' }}" data-id="{{ concert.id }}">
  410.                 {{ 'ticket_buy'|tr(tr)|raw }}
  411.               </a>
  412.             </div>
  413.           </div>
  414.         {% endif %}
  415.       {% endif %}
  416.     </div>#}{#
  417. </div>
  418. #}
  419.     {# POS 2 #}
  420.     {# OWL CAROUSEL #}
  421.     {#  <div class="tickets tickets2 flash noMobile" style="top: calc(50% - 58px);">
  422.     <div class="owl-carousel">
  423.       <div class="item" style="display: flex;">
  424.         <img src="/front/img/spectacle-event9.jpg" alt="FLASH2211" class="cover" style="width: 136px !important;" />
  425.         <div class="ps-4 pe-2">
  426.           <span class="title">{{ 'ticket_1_title'|tr(tr)|raw }}</span>
  427.           <span class="date">{{ 'ticket_1_subtitle'|tr(tr)|raw }}</span>
  428.           <a href="/{{app.request.locale }}/{{ 'spectacles-speciaux'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  429.         </div>
  430.       </div>
  431.     </div>
  432.   </div>#}
  433.     {# SINGLE FULL CARD #}
  434.     {#    <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) }}">
  435.         <div class="item" style="display: flex; height: 100%; align-items: center;">
  436.             <div class="ps-2 pe-2" style="max-width: 62%;">
  437.                 <span class="title">{{ 'ticket_3_title'|tr(tr)|raw }}</span>
  438.                 <span class="date">{{ 'ticket_3_subtitle'|tr(tr)|raw }}</span>
  439.                 <a href="/{{app.request.locale }}/{{ 'promos'|getUrl(app.request.locale) }}" target="_blank" class="arrow"> </a>
  440.             </div>
  441.         </div>
  442.     </div>#}
  443.     {# END POS 2 #}
  444.     <div class="tickets  flash noMobile " style="top: calc(50% + 10px); ">
  445.         <div class="owl-carousel">
  446.             {#
  447.             <div class="item" style="display: flex;">
  448.                 <img src="/front/img/robin-leon-front.jpg" alt="Robin Leon Show" class="cover" />
  449.                 <div class="ps-4 pe-2">
  450.                     <span class="title">{{ 'ticket_rl_title'|tr(tr)|raw }}</span>
  451.                     <span class="date">{{ 'ticket_rl_subtitle'|tr(tr)|raw }}</span>
  452.                     <a href="/{{app.request.locale }}/{{ 'robin-leon-show'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  453.                 </div>
  454.             </div>
  455.             #}
  456. {#
  457.             <div class="item" style="display: flex;">
  458.                 <img src="/front/img/paques-2025.jpg" alt="elixir-magique" class="cover" style="width: 136px !important;" />
  459.                 <div class="ps-4 pe-2">
  460.                     <span class="title"  style="font-size: 16px">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
  461.                     <span class="date">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
  462.                     <a href="#" class="openPaques link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  463.                 </div>
  464.             </div>
  465. #}
  466.             <div class="item" style="display: flex;">
  467.                 <img src="/front/img/spectacle-event4.jpg" alt="FLASH2211" class="cover" />
  468.                 <div class="ps-4 pe-2">
  469.                     <span class="title">{{ 'events_e4_title'|tr(tr)|raw }}</span>
  470.                     <span class="date">{{ 'events_e4'|tr(tr)|raw }}</span>
  471.                     <a href="/{{app.request.locale }}/miss-alsace" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  472.                 </div>
  473.             </div>
  474.         </div>
  475.     </div>
  476.     <div class="d-none">
  477.         {# <div class="owl-carousel"> #}
  478.         {#     <div class="item" style="display: flex;">
  479.       <img src="/front/img/carnaval-front.png" alt="Carnaval de Venise" class="cover" />
  480.       <div class="ps-4 pe-2">
  481.         <span class="title">{{ 'carnticket_carnaval_title'|tr(tr)|raw }}</span>
  482.         <span class="date">{{ 'carnticket_carnaval_subtitle'|tr(tr)|raw }}</span>
  483.         <a href="/{{app.request.locale }}/{{ 'carnaval-de-venise'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  484.       </div>
  485.     </div> #}
  486.         {# </div> #}
  487.     </div>
  488.     <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">
  489.         <div class="item" style="display: flex; height: 100%; align-items: center;">
  490.             <div class="page_shop" style="position: absolute; top: -5px; left: 0px;"><div class="favoris saved"><i style="margin-left: 0px;"></i></div></div>
  491.             <div class="ps-2 pe-2" style="max-width: 62%;">
  492.                 <span class="title">{{ 'ticket_4_title'|tr(tr)|raw }}</span>
  493.                 <span class="date">{{ 'ticket_4_subtitle'|tr(tr)|raw }}</span>
  494.                 <a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" target="_blank" class="arrow"> </a>
  495.             </div>
  496.         </div>
  497.     </div>
  498.     <div class="tickets onlyMobile">
  499.         <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">
  500.             <div class="item" style="display: flex; height: 100%; align-items: center;">
  501.                 <div class="page_shop" style="position: absolute; top: -5px; left: 0px;"><div class="favoris saved"><i style="margin-left: 0px;"></i></div></div>
  502.                 <div class="ps-2 pe-2" style="max-width: 62%;">
  503.                     <span class="title">{{ 'ticket_4_title'|tr(tr)|raw }}</span>
  504.                     <span class="date">{{ 'ticket_4_subtitle'|tr(tr)|raw }}</span>
  505.                     <a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}/articles" target="_blank" class="arrow"> </a>
  506.                 </div>
  507.             </div>
  508.         </div>
  509.         <a href="#" class="close"  onclick="$('.tickets').hide();"><img src="/front/img/tarifs-cross.svg" alt="close"></a>
  510.         <div class="owl-carousel">
  511.             {# <div class="item" style="display: flex;">
  512.       <img src="/front/img/carnaval-front.png" alt="Carnaval de Venise" class="cover" />
  513.       <div class="ps-4 pe-2">
  514.         <span class="title">{{ 'carnticket_carnaval_title'|tr(tr)|raw }}</span>
  515.         <span class="date">{{ 'carnticket_carnaval_subtitle'|tr(tr)|raw }}</span>
  516.         <a href="/{{app.request.locale }}/{{ 'carnaval-de-venise'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  517.       </div>
  518.     </div> #}
  519.             {#     <div class="item" style="display: flex;">
  520.       <img src="/front/img/robin-leon-front.jpg" alt="Robin Leon Show" class="cover" />
  521.       <div class="ps-4 pe-2">
  522.         <span class="title">{{ 'ticket_rl_title'|tr(tr)|raw }}</span>
  523.         <span class="date">{{ 'ticket_rl_subtitle'|tr(tr)|raw }}</span>
  524.         <a href="/{{app.request.locale }}/{{ 'robin-leon-show'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  525.       </div>
  526.     </div> #}
  527.             {#
  528.             <div class="item missofficielmobil" style="display: flex; height: 136px; align-items: center; background-image: url('/front/img/miss-alsace-siteofficiel.jpg');     border-radius: 24px;
  529.           padding: 3px;">
  530.               <div class="ps-2 pe-2" style="max-width: 62%;">
  531.                 <span class="title">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
  532.                 <span class="date" style="max-width: 200px;">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
  533.                 <a href="https://miss-alsace.fr/" target="_blank" class="arrow" style="    height: 120px;"> </a>
  534.               </div>
  535.             </div>
  536.             #}
  537.                    <div class="item" style="display: flex;">
  538.         <img src="/front/img/spectacle-event4.jpg" alt="FLASH2211" class="cover" />
  539.         <div class="ps-4 pe-2">
  540.           <span class="title">{{ 'events_e4_title'|tr(tr)|raw }}</span>
  541.           <span class="date">{{ 'events_e4'|tr(tr)|raw }}</span>
  542.           <a href="/{{app.request.locale }}/miss-alsace" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  543.         </div>
  544.       </div>
  545.             {# SINGLE FULL CARD #}
  546.             {#            <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) }}">
  547.                 <div class="" style="display: flex; height: 100%; align-items: center;">
  548.                     <div class="ps-2 pe-2" style="max-width: 62%;">
  549.                         <span class="title">{{ 'ticket_3_title'|tr(tr)|raw }}</span>
  550.                         <span class="date">{{ 'ticket_3_subtitle'|tr(tr)|raw }}</span>
  551.                         <a href="/{{app.request.locale }}/{{ 'promos'|getUrl(app.request.locale) }}" target="_blank" class="arrow" style="transform: scale(0.9) translate(6px, -8px);"> </a>
  552.                     </div>
  553.                 </div>
  554.             </div>#}
  555.             {#            <div class="item" style="display: flex;">
  556.                 <img src="/front/img/robin-leon-front.jpg" alt="Robin Leon Show" class="cover" />
  557.                 <div class="ps-4 pe-2">
  558.                     <span class="title">{{ 'ticket_rl_title'|tr(tr)|raw }}</span>
  559.                     <span class="date">{{ 'ticket_rl_subtitle'|tr(tr)|raw }}</span>
  560.                     <a href="/{{app.request.locale }}/{{ 'robin-leon-show'|getUrl(app.request.locale) }}" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  561.                 </div>
  562.             </div>#}
  563. {#            <div class="item" style="display: flex;">
  564.                 <img src="/front/img/paques-2025.jpg" alt="elixir-magique" class="cover" style="width: 136px !important;" />
  565.                 <div class="ps-4 pe-2">
  566.                     <span class="title"  style="font-size: 16px">{{ 'ticket_2_title'|tr(tr)|raw }}</span>
  567.                     <span class="date">{{ 'ticket_2_subtitle'|tr(tr)|raw }}</span>
  568.                     <a href="#" class="openPaques link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  569.                 </div>
  570.             </div>#}
  571.             {% if concert.isfull == false %}
  572.                 {% if concert.start.timestamp > date().timestamp %}
  573.                     <div class="item" style="display: flex;">
  574.                         <img src="/front/img/die-paldauer.jpg" alt="Die Paldauer" class="cover" />
  575.                         <div class="ps-4 pe-2">
  576.                             <span class="title">{{ 'concert_6_title'|tr(tr)|raw }}</span>
  577.                             <span class="date" style="font-size: 0.675rem;">{{ 'concert_6_subtitle'|tr(tr)|raw }}</span>
  578.                             <a href="{{app.request.locale }}/reservation/tunnel?show_id={{ concert.id }}" class="link {{ (concert.isfull) ? 'btn-isfull' : '' }}" data-id="{{ concert.id }}">
  579.                                 {{ 'ticket_buy'|tr(tr)|raw }}
  580.                             </a>
  581.                         </div>
  582.                     </div>
  583.                 {% endif %}
  584.             {% endif %}
  585.         </div>
  586.     </div>
  587.     {# VENTE FLASH 22/11/2023 #}
  588.     {#
  589.     <div class="tickets flash">
  590.       <div class="item" style="display: flex;">
  591.         <img src="/front/img/spectacle-event8.jpg" alt="FLASH2211" class="cover" />
  592.         <div class="ps-4 pe-2">
  593.           <span class="title">{{ 'ticket_fl_title'|tr(tr)|raw }}</span>
  594.           <span class="date">{{ 'ticket_fl_date'|tr(tr)|raw }}</span>
  595.           <a href="/{{app.request.locale }}/flash" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  596.         </div>
  597.       </div>
  598.     </div>
  599.     #}
  600.     {# VENTE FLASH 22/11/2023 #}
  601.     {#     {% else %}
  602. <div class="tickets">
  603.   <a href="#" class="close"  onclick="$('.tickets').hide();"><img src="/front/img/tarifs-cross.svg" alt="close"></a>
  604.   <div class="owl-carousel">
  605.     <div class="item" style="display: flex;">
  606.       <img src="/front/img/spectacle-event5.jpg" alt="Afterworks 2023" class="cover" />
  607.       <div class="ps-4 pe-2">
  608.         <span class="title">{{ 'ticket_aw_title'|tr(tr)|raw }}</span>
  609.         <span class="date">{{ 'ticket_aw_date'|tr(tr)|raw }}</span>
  610.         <a href="/{{app.request.locale }}/afterwork" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  611.       </div>
  612.     </div>
  613.     <div class="item" style="display: flex;">
  614.       <img src="/front/img/spectacle-event6.jpg" alt="Oktoberfest 2023" class="cover" />
  615.       <div class="ps-4 pe-2">
  616.         <span class="title">{{ 'ticket_ok_title'|tr(tr)|raw }}</span>
  617.         <span class="date">{{ 'ticket_ok_date'|tr(tr)|raw }}</span>
  618.         <a href="/{{app.request.locale }}/oktoberfest" class="link">{{ 'ticket_buy'|tr(tr)|raw }}</a>
  619.       </div>
  620.     </div>
  621.   </div>
  622. </div>
  623. {% endif %} #}
  624.     <div class="home-message d-none">
  625.         <div class="home-message-content">
  626.             <a href="#" class="close"><img alt="fermer" src="/front/img/home-plus.svg" /></a>
  627.             <p class="title">{{ 'accueil_pochettes_title'|tr(tr)|raw }}</p>
  628.             <p class="content">{{ 'accueil_pochettes_desc'|tr(tr)|raw }}</p>
  629.             <a href="/{{app.request.locale }}/{{ 'boutique'|getUrl(app.request.locale) }}" class="button">{{ 'accueil_pochettes_btn'|tr(tr)|raw }}</a>
  630.         </div>
  631.     </div>
  632.     <ul class="bottom-menu">
  633.         <li><a href="https://www.facebook.com/royalpalacekirrwilleroff" target="_blank">facebook</a></li>
  634.         <li><a href="https://www.instagram.com/royalpalacekirrwiller/" target="_blank">instagram</a></li>
  635.         <li><a href="https://www.linkedin.com/company/le-royal-palace-kirrwiller/about/" target="_blank">linkedin</a></li>
  636.         <li><a href="/{{app.request.locale }}/{{ 'actualites'|getUrl(app.request.locale) }}">{{ 'menu_actu'|tr(tr)|raw }}</a></li>
  637.         <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>
  638.         <li><a href="#" class="email">email</a><input type="hidden" id="email" value="pmeyer@royal-palace.com" /></li>
  639.         <li></li>
  640.     </ul>
  641.     <button class="order-btn">{{ 'general_reserver'|tr(tr)|raw }}</button>
  642.     <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>
  643.         <img src="/front/img/2025/parfum-title.png" width="auto" height="50px" alt="logo parfum d'étoiles 2025" style="margin-top:1px;">
  644.     </a>
  645. {% endblock %}
  646. {% block javascripts %}
  647.     <script src="/front/js/owl.carousel.min.js"></script>
  648.     <script type="text/javascript">
  649.         function orderBtnPosition(mode){
  650.             var bottomMenuWidth = $('.bottom-menu').position().left + $('.bottom-menu').innerWidth();
  651.             if(mode != true){
  652.                 $('.order-btn').css('left', 'calc(50%)');
  653.                 $('.order-btn').css('transform', 'translateX(-50%)');
  654.             }
  655.             setTimeout(
  656.                 function()
  657.                 {
  658.                     if( bottomMenuWidth > $('.order-btn').position().left ) {
  659.                         $('.order-btn').css('left', bottomMenuWidth  + 'px' );
  660.                         $('.order-btn').css('transform', 'none' );
  661.                     }
  662.                 },
  663.                 400);
  664.         }
  665.         function videoBackground(){
  666.             const iframe = document.querySelector('.video-background iframe');
  667.             const windowWidth = window.innerWidth;
  668.             const windowHeight = window.innerHeight;
  669.             const aspectRatio = 16 / 9;
  670.             const currentRatio = windowWidth / windowHeight;
  671.             if (windowWidth > windowHeight) {  // Orientation paysage
  672.                 // Fixe la largeur au maximum de la fenêtre
  673.                 const width = windowWidth;
  674.                 const height = width / aspectRatio; // Hauteur basée sur le ratio 16:9
  675.                 iframe.style.width = `${width}px`;
  676.                 iframe.style.height = `${height}px`;
  677.             } else {  // Orientation portrait
  678.                 // Fixe la hauteur au maximum de la fenêtre
  679.                 const height = windowHeight;
  680.                 const width = height * aspectRatio; // Largeur basée sur le ratio 16:9
  681.                 iframe.style.width = `${width}px`;
  682.                 iframe.style.height = `${height}px`;
  683.             }
  684.             if(currentRatio < aspectRatio) {
  685.                 const height = windowHeight;
  686.                 const width = height * aspectRatio; // Largeur basée sur le ratio 16:9
  687.                 iframe.style.width = `${width}px`;
  688.                 iframe.style.height = `${height}px`;
  689.             }
  690.         }
  691.         $( document ).ready(function() {
  692.             // // ACTIVE VIDEO SLIDER
  693.             // if(window.innerWidth > 1047 ) {
  694.             //   $('.slider-navigation').before('<video data-id="0" class="video-slide active" src="/front/videos/Teaser-Grand-Amour.mp4" autoplay muted loop playsinline ></video>');
  695.             //   slideNavLoop(0);
  696.             // }
  697.             // // END ACTIVE VIDEO SLIDER
  698.             //SINGLE SLIDER NO MOBIL
  699.             if(window.innerWidth < 1048 ) {
  700.                 $('#video1').remove();
  701.             }
  702.             //SINGLE SLIDER NO MOBIL END
  703.             orderBtnPosition();
  704.             videoBackground();
  705.             setTimeout(function(){ $('.home-message').addClass('open'); $('.home-message .home-message-content .close img').attr('src', '/front/img/home-minus.svg'); }, 1200);
  706.             setTimeout(function(){ $('.reviews').css('left', 0); }, 1500);
  707.             $( window ).resize(function() {
  708.                 orderBtnPosition();
  709.                 videoBackground();
  710.             });
  711.             $('.page_accueil .phone').on('click', function(e){
  712.                 if( $(this).attr('href') == '#' ){
  713.                     e.preventDefault();
  714.                     $(this).text( $('#phone').val() );
  715.                     $(this).attr('href', 'tel:'+$('#phone').val() );
  716.                     orderBtnPosition(true);
  717.                 }
  718.             });
  719.             $('.page_accueil .email').on('click', function(e){
  720.                 if( $(this).attr('href') == '#' ){
  721.                     e.preventDefault();
  722.                     $(this).text( $('#email').val() );
  723.                     $(this).attr('href', 'mailto:'+$('#email').val() );
  724.                     orderBtnPosition(true);
  725.                 }
  726.             });
  727.             $('.tickets4').on('click', function(e){
  728.                 e.preventDefault();
  729.                 window.location.href = $(this).attr('href');
  730.             });
  731.             $('.tickets .owl-carousel').owlCarousel({
  732.                 loop:true,
  733.                 autoplay:true,
  734.                 autoplayTimeout:1500,
  735.                 autoplayHoverPause:true,
  736.                 nav:false,
  737.                 dots:false,
  738.                 responsive:{
  739.                     0:{
  740.                         items:1
  741.                     },
  742.                     600:{
  743.                         items:1
  744.                     },
  745.                     1920:{
  746.                         items:1
  747.                     }
  748.                 }
  749.             });
  750.             $('.openNoel').on('click', function(e){
  751.                 e.preventDefault();
  752.                 openCalendar(); calendar.gotoDate('2024-11-01');
  753.             });
  754.             $('.openPaques').on('click', function(e){
  755.                 e.preventDefault();
  756.                 openCalendar(); calendar.gotoDate('2025-04-01');
  757.             });
  758.         });
  759.     </script>
  760. {% endblock %}