templates/vitrine/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         {% if app.environment == "prod" %}
  5.         <script id="Cookiebot"
  6.                 src="https://consent.cookiebot.com/uc.js"
  7.                 data-cbid="af3fd7ec-069c-4e52-b5a2-27c184e8b4a9"
  8.                 data-blockingmode="manual" 
  9.                 type="text/javascript"></script>
  11.         <script data-cookieconsent="ignore">
  12.             window.dataLayer = window.dataLayer || [];
  13.             function gtag() {
  14.                 dataLayer.push(arguments);
  15.             }
  16.             gtag("consent", "default", {
  17.                 ad_personalization: "denied",
  18.                 ad_storage: "denied",
  19.                 ad_user_data: "denied",
  20.                 analytics_storage: "denied",
  21.                 functionality_storage: "denied",
  22.                 personalization_storage: "denied",
  23.                 security_storage: "granted",
  24.                 wait_for_update: 500,
  25.             });
  26.             gtag("set", "ads_data_redaction", true);
  27.             gtag("set", "url_passthrough", false);
  28.         </script>
  30.         <!-- Google tag (gtag.js) -->
  31.         <script data-cookieconsent="statistics" async src="https://www.googletagmanager.com/gtag/js?id=UA-188652373-1"></script>
  32.         <script data-cookieconsent="statistics">
  33.             window.dataLayer = window.dataLayer || [];
  34.             function gtag() { dataLayer.push(arguments); }
  35.             gtag('js', new Date());
  37.             gtag('config', 'UA-188652373-1');
  38.         </script>
  40.         <!-- Hotjar Tracking Code for https://taakabeerspa.com -->
  41.         <script data-cookieconsent="statistics">
  42.             (function (h, o, t, j, a, r) {
  43.                 h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
  44.                 h._hjSettings = { hjid: 3893655, hjsv: 6 };
  45.                 a = o.getElementsByTagName('head')[0];
  46.                 r = o.createElement('script'); r.async = 1;
  47.                 r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
  48.                 a.appendChild(r);
  49.             })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
  50.         </script>
  51.         {% endif %}
  53.         {# Sentry Integration for Error Monitoring #}
  54.         {% include 'sentry/sentry_js.html.twig' %}
  56.         <meta charset="UTF-8">
  57.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  58.         <meta name="description" content="{% block description '' %}">
  59.         <link rel="icon" type="image/png" sizes="32x32" href="{{asset('images/favicon/favicon-32x32.png')}}">
  60.         <link rel="icon" type="image/png" sizes="16x16" href="{{asset('images/favicon/favicon-16x16.png')}}">
  62.         <title>{% block title '' %} | Taaka Beer Spa</title>
  64.         {% block stylesheets %}
  65.             {{ encore_entry_link_tags('vitrine') }}
  66.             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  67.         {% endblock %}
  69.         {% block javascripts %}
  70.             {{ encore_entry_script_tags('vitrine') }}
  71.             <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  72.         {% endblock %}
  73.     </head>
  75.     <body class="flex flex-col items-center text-white">
  76.         <div id="loading-transition" class="relative opacity-0 pointer-events-none transition-opacity duration-200">
  77.         </div>
  78.         <div id="loading-gif" class="fixed top-0 left-0 w-full h-lvh">
  79.             <img  class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-52 w-auto"
  80.                 src="{{asset('vitrine/logo/loader.gif')}}" alt="Taaka Beer Spa">
  81.         </div>
  82.         <div id="content" class="opacity-0 w-full">
  83.             {% include "vitrine/layout/header.html.twig" %}
  85.             <div id="smooth-wrapper" class="w-full background-parallax">
  86.                 <div id="smooth-content" class="w-full">
  87.                     <main class="w-full relative z-10 flex-col flex items-center overflow-hidden">
  88.                         {% block main %}{% endblock main %}
  89.                     </main>
  90.                 </div>
  91.             </div>
  92.         </div>
  93.         {% for message in app.flashes('success') %}
  94.         <div class="z-50 fixed bottom-4 left-1/2 -translate-x-1/2 rounded-md bg-green-50 p-4">
  95.             <div class="flex">
  96.                 <div class="flex-shrink-0">
  97.                     <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  98.                         <path fill-rule="evenodd"
  99.                             d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
  100.                             clip-rule="evenodd" />
  101.                     </svg>
  102.                 </div>
  103.                 <div class="ml-3 text-sm font-medium text-green-800 opacity-70">
  104.                     {{ message }}
  105.                 </div>
  106.             </div>
  107.         </div>
  108.         {% endfor %}
  110.         {% for message in app.flashes('error') %}
  111.         <div class="z-50 fixed bottom-4 left-1/2 -translate-x-1/2 rounded-md bg-red-50 p-4">
  112.             <div class="flex">
  113.                 <div class="flex-shrink-0">
  114.                     <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  115.                         <path fill-rule="evenodd"
  116.                             d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
  117.                             clip-rule="evenodd" />
  118.                     </svg>
  119.                 </div>
  120.                 <div class="ml-3 text-sm font-medium text-red-800">
  121.                     {{ message }}
  122.                 </div>
  123.             </div>
  124.         </div>
  125.         {% endfor %}
  127.         <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  128.         <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  129.         <script>
  130.             document.addEventListener('DOMContentLoaded', () => {
  131.                 const bubbleAnimationParents = document.querySelectorAll('.animateBubble');
  132.                 const bubbleAnimationBtns = document.querySelectorAll('.btnBubbleAnimation');
  133.                 let animations = [];
  135.                 bubbleAnimationParents.forEach((parent) => {
  136.                     const animation = startAnimationLoop(parent);
  137.                     animations.push(animation);
  138.                 });
  140.                 document.addEventListener('visibilitychange', () => {
  141.                     if (document.visibilityState === 'hidden') {
  142.                         // Arrêter toutes les animations
  143.                         animations.forEach(animation => clearInterval(animation));
  144.                         animations = [];
  145.                     } else if (document.visibilityState === 'visible') {
  146.                         // Redémarrer les animations
  147.                         bubbleAnimationParents.forEach((parent) => {
  148.                             const animation = startAnimationLoop(parent);
  149.                             animations.push(animation);
  150.                         });
  151.                     }
  152.                 });
  154.                 bubbleAnimationBtns.forEach((btn) => {
  155.                     btn.addEventListener('mouseenter', () => {
  156.                         const parent = btn.closest('.btnBubbleAnimation');
  157.                         if (parent) {
  158.                             hoverBtnBubbleAnimation(parent);
  159.                         } else {
  160.                             console.error('Aucun parent trouvé avec la classe .animateBubble pour le bouton', btn);
  161.                         }
  162.                     });
  163.                 });
  165.                 const loadingTransition = document.getElementById('loading-transition');
  166.                 const content = document.getElementById('content');
  167.                 const loadingGif = document.getElementById('loading-gif');
  169.                 // Fonction pour gérer le fade-in
  170.                 const handlePageShow = () => {
  171.                     // Fade-in de la page après le chargement
  172.                     setTimeout(() => {
  173.                         document.body.classList.add('loaded');  // Ajoute la classe 'loaded' pour déclencher le fade-in
  174.                         content.classList.remove('opacity-0');  // Ré-affiche le contenu après le fade-in
  175.                         // Cache le GIF après 200ms suivant le fade-in
  176.                         setTimeout(() => {
  177.                             loadingGif.style.display = 'none';  // Cache le GIF après l'animation de fade-in
  178.                         }, 400);  // Ce délai correspond à la durée du fade-in
  179.                     }, 400);  // Ajuste ce délai en fonction du temps de chargement de ton animation
  180.                 };
  182.                 // Gestion du chargement initial et du retour arrière
  183.                 handlePageShow();
  185.                 window.addEventListener('pageshow', (event) => {
  186.                     if (event.persisted) {
  187.                         // Si la page vient du cache (retour arrière)
  188.                         content.style.display = 'block';
  189.                         loadingGif.style.display = 'block';
  190.                         handlePageShow();
  191.                     }
  192.                 });
  194.                 // Interception du clic sur les liens pour gérer le fade-out et réafficher l'écran de transition
  195.                 document.querySelectorAll('a').forEach(link => {
  196.                     link.addEventListener('click', function (e) {
  197.                         // Ignore les liens internes (#), les liens de la galerie, et les liens qui s'ouvrent dans un nouvel onglet
  198.                         if (this.getAttribute('href').startsWith('#') || 
  199.                             this.closest('#gallery_taaka') ||
  200.                             this.getAttribute('target') === '_blank') {
  201.                             return; // Ne fait rien pour ces liens
  202.                         }
  204.                         if (this.hostname === window.location.hostname) {
  205.                             e.preventDefault();
  206.                             document.body.classList.remove('loaded');
  207.                             content.classList.add('opacity-0');
  208.                             loadingTransition.classList.remove('opacity-0');
  209.                             loadingTransition.classList.add('opacity-100');
  210.                             loadingGif.style.display = 'block';
  212.                             setTimeout(() => {
  213.                                 window.location.href = this.href;
  214.                             }, 350);
  215.                         }
  216.                     });
  217.                 });
  218.             });
  219.         </script>
  220.     </body>
  222. </html>