Biblioteca de Componentes
Explora y reutiliza componentes creados por el equipo
Popups
Cookies PopUp
PopupsPopUp de cookies
Preview:
🍪 Política de Cookies
Utilizamos cookies para mejorar tu experiencia en nuestro sitio web. Estas nos ayudan a entender cómo usas nuestro sitio y a personalizar el contenido.
Cookies esenciales: Necesarias para el funcionamiento básico del sitio.
Cookies analíticas: Nos ayudan a mejorar el rendimiento del sitio.
Cookies de marketing: Permiten personalizar anuncios y contenido.
<div id="popup-root">
<div
id="popup"
class="fixed right-5 bottom-5 z-50 hidden w-[350px] items-center justify-center rounded-2xl bg-linear-to-tr from-zinc-700 via-zinc-800 to-zinc-900 p-2"
>
<button
id="close-btn"
class="absolute -top-2 -right-2 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-zinc-200 bg-zinc-100 shadow-lg transition-colors text-black hover:bg-gray-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
<div class="w-full space-y-3 rounded-xl bg-white p-6">
<h3 class="text-2xl font-bold">🍪 Política de Cookies</h3>
<p class="text-sm text-neutral-600">
Utilizamos cookies para mejorar tu experiencia en nuestro sitio web. Estas nos ayudan a entender cómo
usas nuestro sitio y a personalizar el contenido.
</p>
<div class="space-y-2 text-xs text-neutral-500">
<p>
<strong>Cookies esenciales:</strong> Necesarias para el funcionamiento básico del sitio.
</p>
<p>
<strong>Cookies analíticas:</strong> Nos ayudan a mejorar el rendimiento del sitio.
</p>
<p>
<strong>Cookies de marketing:</strong> Permiten personalizar anuncios y contenido.
</p>
</div>
<button
id="action-btn"
class="min-h-[40px] w-full cursor-pointer rounded-md bg-blue-500 font-medium text-white transition-colors hover:bg-blue-600"
>
Aceptar todas las cookies
</button>
</div>
</div>
</div>
<script is:inline>
const KEY = "cookie_consent_gtm";
const CONSENT_MAX_AGE = 60 * 60 * 24 * 365;
const popup = document.getElementById("popup");
const closeBtn = document.getElementById("close-btn");
const actionBtn = document.getElementById("action-btn");
let showPopUp = false;
function getConsent() {
try {
const cookie = document.cookie.split("; ").find((item) => item.startsWith(KEY + "="));
if (!cookie) return null;
return decodeURIComponent(cookie.slice((KEY + "=").length));
} catch {
return null;
}
}
function setConsentCookie(value) {
try {
document.cookie =
KEY + "=" + encodeURIComponent(value) + "; path=/; max-age=" + CONSENT_MAX_AGE + "; SameSite=Lax";
} catch {}
}
function animateElement(element, keyframes, options) {
if (typeof element.animate !== "function") {
return Promise.resolve();
}
const animation = element.animate(keyframes, options);
return animation.finished.catch(() => {});
}
function showPopup() {
if (!popup) return;
showPopUp = true;
popup.classList.remove("hidden");
animateElement(
popup,
{
opacity: [0, 1],
transform: ["translateY(20px) scale(0.95)", "translateY(0) scale(1)"],
},
{ duration: 500, easing: "cubic-bezier(0.16, 1, 0.3, 1)" },
);
}
if (popup && closeBtn && actionBtn && getConsent() === null) {
setTimeout(() => {
showPopup();
}, 1000);
}
if (popup && closeBtn) {
closeBtn.addEventListener("click", () => {
animateElement(
popup,
{ opacity: 0, transform: "translateY(10px) scale(0.98)" },
{ duration: 200 },
).then(() => {
popup.classList.add("hidden");
showPopUp = false;
});
if (typeof window.cookieConsentReject === "function") {
window.cookieConsentReject();
} else {
setConsentCookie("denied");
}
});
}
if (popup && actionBtn) {
actionBtn.addEventListener("click", () => {
animateElement(popup, { opacity: 0, transform: "scale(0.95)" }, { duration: 200 }).then(() => {
popup.classList.add("hidden");
showPopUp = false;
});
if (typeof window.cookieConsentAccept === "function") {
window.cookieConsentAccept();
} else {
setConsentCookie("granted");
}
});
}
</script>
No se encontraron componentes que coincidan con tu búsqueda.