templates/partials/cookies-banner.html.twig line 1

Open in your IDE?
  1. <style>
  2.     #cookie-popup {
  3.         font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  4.     }
  6.     .popup {
  7.         position: fixed;
  8.         bottom: 0;
  9.         left: 0;
  10.         right: 0;
  11.         background-color: #0D2051;
  12.         color: white;
  13.         padding: 10px;
  14.         text-align: center;
  15.         display: none;
  16.         opacity: 0.8;
  17.     }
  19.     #accept-cookies, #reject-cookies {
  20.         background-color: #000;
  21.         color: white;
  22.         border: none;
  23.         padding: 10px 20px;
  24.         cursor: pointer;
  25.         border-radius: 20px;
  26.         letter-spacing: 2px;
  27.         font-weight: 300;
  28.     }
  30.     #accept-cookies:hover, #reject-cookies:hover {
  31.         background-color: #0056b3;
  32.     }
  34.     #text-cookies{
  35.         font-weight: 400;
  36.         font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  37.         font-size: 16px;
  39.     }
  41. </style>
  43. <div id="cookie-popup" class="popup">
  44.     <h5>Nota informativa</h5>
  45.     <p id="text-cookies" class="mb-2 text-small">Nosotros y terceros seleccionados utilizamos cookies o tecnologías similares con fines técnicos y,
  46.         con su consentimiento, para las finalidades de funcionalidad, experiencia, medición y marketing (anuncios personalizados)
  47.         según se especifica en la <a href="{{ path('policy') }}" target="_blank">política de cookies</a>. Denegar el consentimiento puede provocar que las características relacionadas no estén disponibles.
  48.     </p>
  49.     <p id="text-cookies" class="mb-4">
  50.         Usted es libre de otorgar, denegar o revocar su consentimiento en cualquier momento.
  52.         Utilice el botón “Aceptar todo” para dar su consentimiento. Utilice el botón “Rechazar todo” para continuar sin aceptar.</p>
  54.     <button id="accept-cookies">Aceptar</button>
  55.     <button id="reject-cookies">Rechazar</button>
  56. </div>
  57. <script>
  58.     // Función para mostrar el popup si el usuario no ha aceptado las cookies
  59.     function showCookiePopup() {
  60.         const popup = document.getElementById('cookie-popup');
  61.         const hasAcceptedCookies = getCookie('sitio_aceptado');
  62.         if (!hasAcceptedCookies) {
  63.             popup.style.display = 'block';
  64.         }
  65.     }
  67.     // Función para aceptar las cookies y configurar una cookie permanente
  68.     function acceptCookies() {
  69.         const popup = document.getElementById('cookie-popup');
  70.         popup.style.display = 'none';
  71.         // Configura una cookie permanente para identificar el sitio
  72.         setCookie('sitio_aceptado', 'true', 365); // La cookie expira en 365 días
  73.     }
  75.     // Función para rechazar las cookies y configurar una cookie
  76.     function rejectCookies() {
  77.         const popup = document.getElementById('cookie-popup');
  78.         popup.style.display = 'none';
  79.         // Configura una cookie para indicar que las cookies han sido rechazadas
  80.         setCookie('sitio_aceptado', 'false', 365); // La cookie expira en 365 días
  81.     }
  83.     // Función para obtener el valor de una cookie
  84.     function getCookie(name) {
  85.         const cookies = document.cookie.split('; ');
  86.         for (const cookie of cookies) {
  87.             const [cookieName, cookieValue] = cookie.split('=');
  88.             if (cookieName === name) {
  89.                 return cookieValue;
  90.             }
  91.         }
  92.         return null;
  93.     }
  95.     // Función para configurar una cookie
  96.     function setCookie(name, value, days) {
  97.         const expirationDate = new Date();
  98.         expirationDate.setDate(expirationDate.getDate() + days);
  99.         const cookieValue = `${name}=${value}; expires=${expirationDate.toUTCString()}; path=/`;
  100.         document.cookie = cookieValue;
  101.     }
  103.     // Evento para mostrar el popup cuando la página se carga
  104.     window.addEventListener('load', showCookiePopup);
  106.     // Evento para aceptar las cookies al hacer clic en "Aceptar"
  107.     document.getElementById('accept-cookies').addEventListener('click', acceptCookies);
  109.     // Evento para rechazar las cookies al hacer clic en "Rechazar"
  110.     document.getElementById('reject-cookies').addEventListener('click', rejectCookies);
  112. </script>