Centro de Fragmentos de Código
interactive
intermediate
cookie-banner
gdpr
privacy
consent
responsive
modern
animated
Categoría · Interactivo Nivel de Dificultad · Intermedio Publicado el · 15 de enero de 2024

Banner de Consentimiento de Cookies con Gradiente Dinámico

Un impresionante banner de consentimiento de cookies con fondos de gradiente dinámicos, animaciones suaves y diseño interactivo moderno

#cookie-banner #gdpr #privacy #consent #responsive #modern #animated

Diseño Responsivo

Sí

Soporte para Modo Oscuro

No

líneas

968

Compatibilidad del Navegador

No

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

400px

Un banner de consentimiento de cookies visualmente impresionante que presenta fondos de gradiente dinámicos, transiciones de color suaves y elementos interactivos modernos. Perfecto para sitios web que quieren hacer una declaración visual audaz mientras mantienen el cumplimiento del RGPD.

Características

  • Gradientes Dinámicos: Fondos de gradiente animados que cambian de color suavemente
  • Diseño Moderno: UI contemporánea con colores vibrantes y transiciones fluidas
  • Elementos Interactivos: Efectos hover y micro-animaciones que mejoran la participación del usuario
  • Diseño Responsivo: Se adapta hermosamente a todos los tamaños y orientaciones de pantalla
  • Cumple RGPD: Gestión completa de consentimiento con controles granulares
  • Accesibilidad Primero: Navegación completa por teclado y soporte para lectores de pantalla
  • Colores Personalizables: Fácil personalización de gradientes y esquemas de color
  • Animaciones Suaves: Transiciones fluidas y animaciones de entrada/salida

Vista Previa

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner de Cookies con Gradiente Dinámico</title>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --text-light: #ffffff;
            --text-dark: #2d3748;
            --text-muted: rgba(255, 255, 255, 0.8);
            --backdrop: rgba(0, 0, 0, 0.3);
            --border-radius: 16px;
            --shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            min-height: 100vh;
            color: var(--text-light);
            line-height: 1.6;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .demo-content {
            padding: 3rem 2rem;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .demo-content h1 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .demo-content p {
            font-size: 1.2rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
        }.gradient-cookie-banner {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            transform: translateY(120%);
            transition: var(--transition);
            z-index: 10000;
            max-width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .gradient-cookie-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .gradient-cookie-banner.show {
            transform: translateY(0);
        }

        .cookie-container {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 2rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .cookie-icon {
            width: 60px;
            height: 60px;
            background: var(--accent-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 8px 16px rgba(79, 172, 254, 0.3);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .cookie-content {
            flex: 1;
        }

        .cookie-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-light);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .cookie-description {
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.6;
        }

        .cookie-link {
            color: #4facfe;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            position: relative;
        }

        .cookie-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-gradient);
            transition: width 0.3s ease;
        }

        .cookie-link:hover::after {
            width: 100%;
        }

        .cookie-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }.gradient-btn {
            padding: 0.875rem 1.75rem;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            min-width: 130px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .gradient-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .gradient-btn:hover::before {
            transform: translateX(100%);
        }

        .btn-accept {
            background: var(--success-gradient);
            box-shadow: 0 8px 16px rgba(67, 233, 123, 0.3);
        }

        .btn-accept:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(67, 233, 123, 0.4);
        }

        .btn-decline {
            background: var(--warning-gradient);
            box-shadow: 0 8px 16px rgba(250, 112, 154, 0.3);
        }

        .btn-decline:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(250, 112, 154, 0.4);
        }

        .btn-settings {
            background: var(--accent-gradient);
            box-shadow: 0 8px 16px rgba(79, 172, 254, 0.3);
        }

        .btn-settings:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(79, 172, 254, 0.4);
        }

        .gradient-btn:active {
            transform: translateY(-1px);
        }.cookie-settings-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--backdrop);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .cookie-settings-modal.show {
            opacity: 1;
            visibility: visible;
        }

        .settings-content {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
            transform: scale(0.9) translateY(20px);
            transition: var(--transition);
            position: relative;
        }

        .cookie-settings-modal.show .settings-content {
            transform: scale(1) translateY(0);
        }

        .settings-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
            border-radius: var(--border-radius);
            pointer-events: none;
        }

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 1;
        }

        .settings-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-light);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .close-btn {
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 50%;
            background: var(--warning-gradient);
            color: var(--text-light);
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(250, 112, 154, 0.3);
        }

        .close-btn:hover {
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 6px 12px rgba(250, 112, 154, 0.4);
        }

        .cookie-category {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1;
        }

        .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .category-title {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--text-light);
        }

        .category-description {
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.6;
        }.gradient-toggle {
            position: relative;
            width: 64px;
            height: 32px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .gradient-toggle.active {
            background: var(--success-gradient);
            box-shadow: 0 4px 8px rgba(67, 233, 123, 0.3);
        }

        .gradient-toggle::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
            border-radius: 50%;
            transition: var(--transition);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .gradient-toggle.active::before {
            transform: translateX(32px);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
        }

        .settings-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 1;
        }@media (max-width: 768px) {
            .gradient-cookie-banner {
                bottom: 1rem;
                left: 1rem;
                right: 1rem;
                padding: 1.5rem;
            }

            .cookie-container {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                text-align: center;
            }

            .cookie-actions {
                justify-content: center;
            }

            .gradient-btn {
                flex: 1;
                min-width: auto;
            }

            .settings-content {
                padding: 2rem;
                margin: 1rem;
            }

            .demo-content h1 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .cookie-actions {
                flex-direction: column;
            }

            .gradient-btn {
                width: 100%;
            }

            .cookie-container {
                grid-template-columns: 1fr;
            }
        }.demo-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 12px;
            background: var(--primary-gradient);
            color: var(--text-light);
            font-family: inherit;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .demo-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);
        }.particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="demo-content">
        <h1>Banner de Gradiente Dinámico</h1>
        <p>Experimenta la belleza de los gradientes dinámicos con animaciones suaves e interacciones modernas</p>
        <button class="demo-btn" onclick="showCookieBanner()">Mostrar Banner de Cookies</button>
    </div>

    
    <div id="gradientCookieBanner" class="gradient-cookie-banner">
        <div class="cookie-container">
            <div class="cookie-icon">🍪</div>
            <div class="cookie-content">
                <div class="cookie-title">Preferencias de Cookies</div>
                <div class="cookie-description">
                    Utilizamos cookies para mejorar tu experiencia de navegación y proporcionar contenido personalizado. 
                    <a href="#" class="cookie-link">Política de Privacidad</a> | 
                    <a href="#" class="cookie-link">Política de Cookies</a>
                </div>
            </div>
            <div class="cookie-actions">
                <button class="gradient-btn btn-accept" onclick="acceptCookies()">Aceptar Todo</button>
                <button class="gradient-btn btn-decline" onclick="declineCookies()">Rechazar</button>
                <button class="gradient-btn btn-settings" onclick="openSettings()">Personalizar</button>
            </div>
        </div>
    </div>

    
    <div id="cookieSettingsModal" class="cookie-settings-modal">
        <div class="settings-content">
            <div class="settings-header">
                <h3 class="settings-title">Configuración de Cookies</h3>
                <button class="close-btn" onclick="closeSettings()">&times;</button>
            </div>
            
            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies Esenciales</span>
                    <div class="gradient-toggle active" data-category="essential">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies son necesarias para que el sitio web funcione y no se pueden desactivar. Generalmente solo se establecen en respuesta a acciones realizadas por ti.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies de Análisis</span>
                    <div class="gradient-toggle" data-category="analytics">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies nos ayudan a entender cómo los visitantes interactúan con nuestro sitio web recopilando y reportando información de forma anónima.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies de Marketing</span>
                    <div class="gradient-toggle" data-category="marketing">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies se utilizan para entregar anuncios más relevantes para ti y tus intereses basados en tu comportamiento de navegación.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies Funcionales</span>
                    <div class="gradient-toggle" data-category="functional">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies habilitan funcionalidad mejorada y personalización, como recordar tus preferencias y configuraciones.
                </div>
            </div>

            <div class="settings-actions">
                <button class="gradient-btn btn-decline" onclick="saveSettings(false)">Guardar Preferencias</button>
                <button class="gradient-btn btn-accept" onclick="saveSettings(true)">Aceptar Todo</button>
            </div>
        </div>
    </div>

    <script>
        class DynamicGradientCookieBanner {
            constructor(options = {}) {
                this.options = {
                    autoShow: true,
                    showDelay: 1000,
                    storageKey: 'gradiente_consentimiento_cookies',
                    expiryDays: 365,
                    enableParticles: true,
                    particleCount: 20,
                    onAccept: null,
                    onDecline: null,
                    onSettingsSave: null,
                    ...options
                };

                this.banner = document.getElementById('gradientCookieBanner');
                this.modal = document.getElementById('cookieSettingsModal');
                this.consent = this.getStoredConsent();

                this.init();
            }

            init() {
                if (this.options.autoShow && !this.consent) {
                    setTimeout(() => this.show(), this.options.showDelay);
                }

                this.setupEventListeners();
                this.loadSettings();
                
                if (this.options.enableParticles) {
                    this.createParticles();
                }
            }

            setupEventListeners() {

                document.querySelectorAll('.gradient-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        if (toggle.dataset.category !== 'essential') {
                            toggle.classList.toggle('active');
                            this.animateToggle(toggle);
                        }
                    });
                });

                this.modal.addEventListener('click', (e) => {
                    if (e.target === this.modal) {
                        this.closeSettings();
                    }
                });

                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        this.closeSettings();
                    }
                });

                document.querySelectorAll('.gradient-btn').forEach(btn => {
                    btn.addEventListener('mouseenter', () => {
                        this.createRipple(btn);
                    });
                });
            }

            animateToggle(toggle) {
                toggle.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    toggle.style.transform = 'scale(1)';
                }, 150);
            }

            createRipple(button) {
                const ripple = document.createElement('span');
                const rect = button.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                
                ripple.style.width = ripple.style.height = size + 'px';
                ripple.style.left = '50%';
                ripple.style.top = '50%';
                ripple.style.transform = 'translate(-50%, -50%) scale(0)';
                ripple.style.position = 'absolute';
                ripple.style.borderRadius = '50%';
                ripple.style.background = 'rgba(255, 255, 255, 0.3)';
                ripple.style.pointerEvents = 'none';
                ripple.style.animation = 'ripple 0.6s ease-out';
                
                button.style.position = 'relative';
                button.style.overflow = 'hidden';
                button.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            }

            createParticles() {
                for (let i = 0; i < this.options.particleCount; i++) {
                    setTimeout(() => {
                        this.createParticle();
                    }, i * 300);
                }
                
                setInterval(() => {
                    this.createParticle();
                }, 2000);
            }

            createParticle() {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 2 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
                
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    particle.remove();
                }, 6000);
            }

            show() {
                this.banner.classList.add('show');
                this.animateEntrance();
            }

            hide() {
                this.banner.classList.remove('show');
            }

            animateEntrance() {
                const elements = this.banner.querySelectorAll('.cookie-icon, .cookie-content, .cookie-actions');
                elements.forEach((el, index) => {
                    el.style.opacity = '0';
                    el.style.transform = 'translateY(20px)';
                    
                    setTimeout(() => {
                        el.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
                        el.style.opacity = '1';
                        el.style.transform = 'translateY(0)';
                    }, index * 150);
                });
            }

            accept() {
                const consent = {
                    essential: true,
                    analytics: true,
                    marketing: true,
                    functional: true,
                    timestamp: Date.now()
                };

                this.saveConsent(consent);
                this.hide();

                if (this.options.onAccept) {
                    this.options.onAccept(consent);
                }
            }

            decline() {
                const consent = {
                    essential: true,
                    analytics: false,
                    marketing: false,
                    functional: false,
                    timestamp: Date.now()
                };

                this.saveConsent(consent);
                this.hide();

                if (this.options.onDecline) {
                    this.options.onDecline(consent);
                }
            }

            openSettings() {
                this.modal.classList.add('show');
                document.body.style.overflow = 'hidden';
                this.animateModalEntrance();
            }

            closeSettings() {
                this.modal.classList.remove('show');
                document.body.style.overflow = '';
            }

            animateModalEntrance() {
                const categories = this.modal.querySelectorAll('.cookie-category');
                categories.forEach((category, index) => {
                    category.style.opacity = '0';
                    category.style.transform = 'translateX(-20px)';
                    
                    setTimeout(() => {
                        category.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
                        category.style.opacity = '1';
                        category.style.transform = 'translateX(0)';
                    }, index * 100);
                });
            }

            saveSettings(acceptAll = false) {
                const toggles = document.querySelectorAll('.gradient-toggle');
                const consent = { timestamp: Date.now() };

                toggles.forEach(toggle => {
                    const category = toggle.dataset.category;
                    if (acceptAll) {
                        consent[category] = true;
                        toggle.classList.add('active');
                    } else {
                        consent[category] = toggle.classList.contains('active');
                    }
                });

                this.saveConsent(consent);
                this.closeSettings();
                this.hide();

                if (this.options.onSettingsSave) {
                    this.options.onSettingsSave(consent);
                }
            }

            loadSettings() {
                if (this.consent) {
                    document.querySelectorAll('.gradient-toggle').forEach(toggle => {
                        const category = toggle.dataset.category;
                        if (this.consent[category]) {
                            toggle.classList.add('active');
                        } else {
                            toggle.classList.remove('active');
                        }
                    });
                }
            }

            saveConsent(consent) {
                const expiryDate = new Date();
                expiryDate.setDate(expiryDate.getDate() + this.options.expiryDays);
                
                const consentData = {
                    ...consent,
                    expiry: expiryDate.getTime()
                };

                localStorage.setItem(this.options.storageKey, JSON.stringify(consentData));
                this.consent = consent;
            }

            getStoredConsent() {
                try {
                    const stored = localStorage.getItem(this.options.storageKey);
                    if (stored) {
                        const data = JSON.parse(stored);
                        if (data.expiry && Date.now() < data.expiry) {
                            return data;
                        } else {
                            localStorage.removeItem(this.options.storageKey);
                        }
                    }
                } catch (e) {
                    console.error('Error al leer el consentimiento de cookies:', e);
                }
                return null;
            }

            reset() {
                localStorage.removeItem(this.options.storageKey);
                this.consent = null;
                this.show();
            }

            getConsent() {
                return this.consent;
            }

            updateGradient(gradient) {
                const root = document.documentElement;
                root.style.setProperty('--primary-gradient', gradient);
            }

            setParticles(enabled) {
                this.options.enableParticles = enabled;
                if (enabled) {
                    this.createParticles();
                } else {
                    document.querySelectorAll('.particle').forEach(p => p.remove());
                }
            }
        }

        const style = document.createElement('style');
        style.textContent = `
            @keyframes ripple {
                to {
                    transform: translate(-50%, -50%) scale(2);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        const cookieBanner = new DynamicGradientCookieBanner({
            onAccept: (consent) => {
                console.log('Cookies aceptadas:', consent);

            },
            onDecline: (consent) => {
                console.log('Cookies rechazadas:', consent);

            },
            onSettingsSave: (consent) => {
                console.log('Configuración guardada:', consent);

            }
        });

        function showCookieBanner() {
            cookieBanner.reset();
        }

        function acceptCookies() {
            cookieBanner.accept();
        }

        function declineCookies() {
            cookieBanner.decline();
        }

        function openSettings() {
            cookieBanner.openSettings();
        }

        function closeSettings() {
            cookieBanner.closeSettings();
        }

        function saveSettings(acceptAll) {
            cookieBanner.saveSettings(acceptAll);
        }
    </script>
</body>
</html>

Uso

Implementación Básica


const cookieBanner = new DynamicGradientCookieBanner();

const cookieBanner = new DynamicGradientCookieBanner({
    autoShow: true,
    showDelay: 2000,
    storageKey: 'mi_consentimiento_cookies',
    expiryDays: 180,
    enableParticles: true,
    particleCount: 30,
    onAccept: (consent) => {
        console.log('Usuario aceptó cookies:', consent);

        if (consent.analytics) {
            loadGoogleAnalytics();
        }

        if (consent.marketing) {
            loadMarketingPixels();
        }
    },
    onDecline: (consent) => {
        console.log('Usuario rechazó cookies:', consent);

    },
    onSettingsSave: (consent) => {
        console.log('Usuario guardó configuración personalizada:', consent);

    }
});

Configuración Avanzada


const advancedBanner = new DynamicGradientCookieBanner({
    autoShow: false, // Control manual
    showDelay: 0,
    storageKey: 'consentimiento_avanzado',
    expiryDays: 90,
    enableParticles: true,
    particleCount: 50,

    onAccept: (consent) => {

        initializeAdvancedTracking(consent);
    },
    
    onDecline: (consent) => {

        initializeEssentialOnly();
    },
    
    onSettingsSave: (consent) => {

        loadScriptsBasedOnConsent(consent);
    }
});

function setCustomGradient(gradient) {
    advancedBanner.updateGradient(gradient);
}

function toggleParticles(enabled) {
    advancedBanner.setParticles(enabled);
}

function showConsentBanner() {
    advancedBanner.show();
}

function checkConsentStatus() {
    const consent = advancedBanner.getConsent();
    if (consent) {
        console.log('Consentimiento actual:', consent);
    } else {
        console.log('Aún no se ha dado consentimiento');
    }
}

Métodos de la API

Métodos Principales

  • show() - Mostrar el banner de cookies
  • hide() - Ocultar el banner de cookies
  • accept() - Aceptar todas las cookies y ocultar banner
  • decline() - Rechazar cookies opcionales y ocultar banner
  • reset() - Limpiar consentimiento almacenado y mostrar banner nuevamente

Gestión de Configuración

  • openSettings() - Abrir el modal de configuración
  • closeSettings() - Cerrar el modal de configuración
  • saveSettings(acceptAll) - Guardar configuración actual
  • loadSettings() - Cargar y aplicar configuración almacenada

Gestión de Datos

  • getConsent() - Obtener objeto de consentimiento actual
  • saveConsent(consent) - Guardar consentimiento en almacenamiento
  • getStoredConsent() - Recuperar consentimiento del almacenamiento

Personalización Visual

  • updateGradient(gradient) - Cambiar el gradiente principal
  • setParticles(enabled) - Habilitar/deshabilitar partículas flotantes
  • animateEntrance() - Activar animaciones de entrada
  • createRipple(button) - Crear efectos ripple en botones

Opciones de Personalización

Personalización Visual

  • Esquemas de Gradiente: Modificar propiedades CSS personalizadas para diferentes temas de color
  • Velocidad de Animación: Ajustar duraciones de transición y tiempos de animación
  • Efectos de Partículas: Controlar cantidad, velocidad y apariencia de partículas
  • Tipografía: Cambiar familias, tamaños y pesos de fuente

Configuración Funcional

  • Visualización Automática: Controlar aparición automática del banner
  • Duración de Almacenamiento: Establecer período de expiración del consentimiento de cookies
  • Configuración de Retraso: Configurar timing de mostrar/ocultar
  • Funciones de Callback: Manejadores personalizados para acciones del usuario

Características de Accesibilidad

  • Navegación por Teclado: Soporte completo de teclado con indicadores de foco
  • Soporte para Lectores de Pantalla: Etiquetas y descripciones ARIA apropiadas
  • Alto Contraste: Visibilidad mejorada para accesibilidad
  • Gestión de Foco: Captura adecuada de foco en modal

Compatibilidad de Navegadores

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+
  • Navegadores móviles (iOS Safari 12+, Chrome Mobile 60+)

Licencia

Licencia MIT - libre para usar en proyectos personales y comerciales.

HTML

938

líneas

JavaScript

30

líneas 


                <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner de Cookies con Gradiente Dinámico</title>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --text-light: #ffffff;
            --text-dark: #2d3748;
            --text-muted: rgba(255, 255, 255, 0.8);
            --backdrop: rgba(0, 0, 0, 0.3);
            --border-radius: 16px;
            --shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            min-height: 100vh;
            color: var(--text-light);
            line-height: 1.6;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .demo-content {
            padding: 3rem 2rem;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .demo-content h1 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .demo-content p {
            font-size: 1.2rem;
            color: var(--text-muted);
            margin-bottom: 2rem;
        }.gradient-cookie-banner {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: var(--shadow);
            transform: translateY(120%);
            transition: var(--transition);
            z-index: 10000;
            max-width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .gradient-cookie-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .gradient-cookie-banner.show {
            transform: translateY(0);
        }

        .cookie-container {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 2rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .cookie-icon {
            width: 60px;
            height: 60px;
            background: var(--accent-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 8px 16px rgba(79, 172, 254, 0.3);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .cookie-content {
            flex: 1;
        }

        .cookie-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-light);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .cookie-description {
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.6;
        }

        .cookie-link {
            color: #4facfe;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            position: relative;
        }

        .cookie-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-gradient);
            transition: width 0.3s ease;
        }

        .cookie-link:hover::after {
            width: 100%;
        }

        .cookie-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }.gradient-btn {
            padding: 0.875rem 1.75rem;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            min-width: 130px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .gradient-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .gradient-btn:hover::before {
            transform: translateX(100%);
        }

        .btn-accept {
            background: var(--success-gradient);
            box-shadow: 0 8px 16px rgba(67, 233, 123, 0.3);
        }

        .btn-accept:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(67, 233, 123, 0.4);
        }

        .btn-decline {
            background: var(--warning-gradient);
            box-shadow: 0 8px 16px rgba(250, 112, 154, 0.3);
        }

        .btn-decline:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(250, 112, 154, 0.4);
        }

        .btn-settings {
            background: var(--accent-gradient);
            box-shadow: 0 8px 16px rgba(79, 172, 254, 0.3);
        }

        .btn-settings:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(79, 172, 254, 0.4);
        }

        .gradient-btn:active {
            transform: translateY(-1px);
        }.cookie-settings-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--backdrop);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .cookie-settings-modal.show {
            opacity: 1;
            visibility: visible;
        }

        .settings-content {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
            transform: scale(0.9) translateY(20px);
            transition: var(--transition);
            position: relative;
        }

        .cookie-settings-modal.show .settings-content {
            transform: scale(1) translateY(0);
        }

        .settings-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
            border-radius: var(--border-radius);
            pointer-events: none;
        }

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 1;
        }

        .settings-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-light);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .close-btn {
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 50%;
            background: var(--warning-gradient);
            color: var(--text-light);
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(250, 112, 154, 0.3);
        }

        .close-btn:hover {
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 6px 12px rgba(250, 112, 154, 0.4);
        }

        .cookie-category {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 1;
        }

        .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .category-title {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--text-light);
        }

        .category-description {
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.6;
        }.gradient-toggle {
            position: relative;
            width: 64px;
            height: 32px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .gradient-toggle.active {
            background: var(--success-gradient);
            box-shadow: 0 4px 8px rgba(67, 233, 123, 0.3);
        }

        .gradient-toggle::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 28px;
            height: 28px;
            background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
            border-radius: 50%;
            transition: var(--transition);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .gradient-toggle.active::before {
            transform: translateX(32px);
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
        }

        .settings-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 1;
        }@media (max-width: 768px) {
            .gradient-cookie-banner {
                bottom: 1rem;
                left: 1rem;
                right: 1rem;
                padding: 1.5rem;
            }

            .cookie-container {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                text-align: center;
            }

            .cookie-actions {
                justify-content: center;
            }

            .gradient-btn {
                flex: 1;
                min-width: auto;
            }

            .settings-content {
                padding: 2rem;
                margin: 1rem;
            }

            .demo-content h1 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .cookie-actions {
                flex-direction: column;
            }

            .gradient-btn {
                width: 100%;
            }

            .cookie-container {
                grid-template-columns: 1fr;
            }
        }.demo-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 12px;
            background: var(--primary-gradient);
            color: var(--text-light);
            font-family: inherit;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .demo-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);
        }.particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="demo-content">
        <h1>Banner de Gradiente Dinámico</h1>
        <p>Experimenta la belleza de los gradientes dinámicos con animaciones suaves e interacciones modernas</p>
        <button class="demo-btn" onclick="showCookieBanner()">Mostrar Banner de Cookies</button>
    </div>

    
    <div id="gradientCookieBanner" class="gradient-cookie-banner">
        <div class="cookie-container">
            <div class="cookie-icon">🍪</div>
            <div class="cookie-content">
                <div class="cookie-title">Preferencias de Cookies</div>
                <div class="cookie-description">
                    Utilizamos cookies para mejorar tu experiencia de navegación y proporcionar contenido personalizado. 
                    <a href="#" class="cookie-link">Política de Privacidad</a> | 
                    <a href="#" class="cookie-link">Política de Cookies</a>
                </div>
            </div>
            <div class="cookie-actions">
                <button class="gradient-btn btn-accept" onclick="acceptCookies()">Aceptar Todo</button>
                <button class="gradient-btn btn-decline" onclick="declineCookies()">Rechazar</button>
                <button class="gradient-btn btn-settings" onclick="openSettings()">Personalizar</button>
            </div>
        </div>
    </div>

    
    <div id="cookieSettingsModal" class="cookie-settings-modal">
        <div class="settings-content">
            <div class="settings-header">
                <h3 class="settings-title">Configuración de Cookies</h3>
                <button class="close-btn" onclick="closeSettings()">&times;</button>
            </div>
            
            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies Esenciales</span>
                    <div class="gradient-toggle active" data-category="essential">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies son necesarias para que el sitio web funcione y no se pueden desactivar. Generalmente solo se establecen en respuesta a acciones realizadas por ti.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies de Análisis</span>
                    <div class="gradient-toggle" data-category="analytics">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies nos ayudan a entender cómo los visitantes interactúan con nuestro sitio web recopilando y reportando información de forma anónima.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies de Marketing</span>
                    <div class="gradient-toggle" data-category="marketing">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies se utilizan para entregar anuncios más relevantes para ti y tus intereses basados en tu comportamiento de navegación.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Cookies Funcionales</span>
                    <div class="gradient-toggle" data-category="functional">
                    </div>
                </div>
                <div class="category-description">
                    Estas cookies habilitan funcionalidad mejorada y personalización, como recordar tus preferencias y configuraciones.
                </div>
            </div>

            <div class="settings-actions">
                <button class="gradient-btn btn-decline" onclick="saveSettings(false)">Guardar Preferencias</button>
                <button class="gradient-btn btn-accept" onclick="saveSettings(true)">Aceptar Todo</button>
            </div>
        </div>
    </div>

    <script>
        class DynamicGradientCookieBanner {
            constructor(options = {}) {
                this.options = {
                    autoShow: true,
                    showDelay: 1000,
                    storageKey: 'gradiente_consentimiento_cookies',
                    expiryDays: 365,
                    enableParticles: true,
                    particleCount: 20,
                    onAccept: null,
                    onDecline: null,
                    onSettingsSave: null,
                    ...options
                };

                this.banner = document.getElementById('gradientCookieBanner');
                this.modal = document.getElementById('cookieSettingsModal');
                this.consent = this.getStoredConsent();

                this.init();
            }

            init() {
                if (this.options.autoShow && !this.consent) {
                    setTimeout(() => this.show(), this.options.showDelay);
                }

                this.setupEventListeners();
                this.loadSettings();
                
                if (this.options.enableParticles) {
                    this.createParticles();
                }
            }

            setupEventListeners() {

                document.querySelectorAll('.gradient-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        if (toggle.dataset.category !== 'essential') {
                            toggle.classList.toggle('active');
                            this.animateToggle(toggle);
                        }
                    });
                });

                this.modal.addEventListener('click', (e) => {
                    if (e.target === this.modal) {
                        this.closeSettings();
                    }
                });

                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        this.closeSettings();
                    }
                });

                document.querySelectorAll('.gradient-btn').forEach(btn => {
                    btn.addEventListener('mouseenter', () => {
                        this.createRipple(btn);
                    });
                });
            }

            animateToggle(toggle) {
                toggle.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    toggle.style.transform = 'scale(1)';
                }, 150);
            }

            createRipple(button) {
                const ripple = document.createElement('span');
                const rect = button.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                
                ripple.style.width = ripple.style.height = size + 'px';
                ripple.style.left = '50%';
                ripple.style.top = '50%';
                ripple.style.transform = 'translate(-50%, -50%) scale(0)';
                ripple.style.position = 'absolute';
                ripple.style.borderRadius = '50%';
                ripple.style.background = 'rgba(255, 255, 255, 0.3)';
                ripple.style.pointerEvents = 'none';
                ripple.style.animation = 'ripple 0.6s ease-out';
                
                button.style.position = 'relative';
                button.style.overflow = 'hidden';
                button.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            }

            createParticles() {
                for (let i = 0; i < this.options.particleCount; i++) {
                    setTimeout(() => {
                        this.createParticle();
                    }, i * 300);
                }
                
                setInterval(() => {
                    this.createParticle();
                }, 2000);
            }

            createParticle() {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 2 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
                
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    particle.remove();
                }, 6000);
            }

            show() {
                this.banner.classList.add('show');
                this.animateEntrance();
            }

            hide() {
                this.banner.classList.remove('show');
            }

            animateEntrance() {
                const elements = this.banner.querySelectorAll('.cookie-icon, .cookie-content, .cookie-actions');
                elements.forEach((el, index) => {
                    el.style.opacity = '0';
                    el.style.transform = 'translateY(20px)';
                    
                    setTimeout(() => {
                        el.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
                        el.style.opacity = '1';
                        el.style.transform = 'translateY(0)';
                    }, index * 150);
                });
            }

            accept() {
                const consent = {
                    essential: true,
                    analytics: true,
                    marketing: true,
                    functional: true,
                    timestamp: Date.now()
                };

                this.saveConsent(consent);
                this.hide();

                if (this.options.onAccept) {
                    this.options.onAccept(consent);
                }
            }

            decline() {
                const consent = {
                    essential: true,
                    analytics: false,
                    marketing: false,
                    functional: false,
                    timestamp: Date.now()
                };

                this.saveConsent(consent);
                this.hide();

                if (this.options.onDecline) {
                    this.options.onDecline(consent);
                }
            }

            openSettings() {
                this.modal.classList.add('show');
                document.body.style.overflow = 'hidden';
                this.animateModalEntrance();
            }

            closeSettings() {
                this.modal.classList.remove('show');
                document.body.style.overflow = '';
            }

            animateModalEntrance() {
                const categories = this.modal.querySelectorAll('.cookie-category');
                categories.forEach((category, index) => {
                    category.style.opacity = '0';
                    category.style.transform = 'translateX(-20px)';
                    
                    setTimeout(() => {
                        category.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
                        category.style.opacity = '1';
                        category.style.transform = 'translateX(0)';
                    }, index * 100);
                });
            }

            saveSettings(acceptAll = false) {
                const toggles = document.querySelectorAll('.gradient-toggle');
                const consent = { timestamp: Date.now() };

                toggles.forEach(toggle => {
                    const category = toggle.dataset.category;
                    if (acceptAll) {
                        consent[category] = true;
                        toggle.classList.add('active');
                    } else {
                        consent[category] = toggle.classList.contains('active');
                    }
                });

                this.saveConsent(consent);
                this.closeSettings();
                this.hide();

                if (this.options.onSettingsSave) {
                    this.options.onSettingsSave(consent);
                }
            }

            loadSettings() {
                if (this.consent) {
                    document.querySelectorAll('.gradient-toggle').forEach(toggle => {
                        const category = toggle.dataset.category;
                        if (this.consent[category]) {
                            toggle.classList.add('active');
                        } else {
                            toggle.classList.remove('active');
                        }
                    });
                }
            }

            saveConsent(consent) {
                const expiryDate = new Date();
                expiryDate.setDate(expiryDate.getDate() + this.options.expiryDays);
                
                const consentData = {
                    ...consent,
                    expiry: expiryDate.getTime()
                };

                localStorage.setItem(this.options.storageKey, JSON.stringify(consentData));
                this.consent = consent;
            }

            getStoredConsent() {
                try {
                    const stored = localStorage.getItem(this.options.storageKey);
                    if (stored) {
                        const data = JSON.parse(stored);
                        if (data.expiry && Date.now() < data.expiry) {
                            return data;
                        } else {
                            localStorage.removeItem(this.options.storageKey);
                        }
                    }
                } catch (e) {
                    console.error('Error al leer el consentimiento de cookies:', e);
                }
                return null;
            }

            reset() {
                localStorage.removeItem(this.options.storageKey);
                this.consent = null;
                this.show();
            }

            getConsent() {
                return this.consent;
            }

            updateGradient(gradient) {
                const root = document.documentElement;
                root.style.setProperty('--primary-gradient', gradient);
            }

            setParticles(enabled) {
                this.options.enableParticles = enabled;
                if (enabled) {
                    this.createParticles();
                } else {
                    document.querySelectorAll('.particle').forEach(p => p.remove());
                }
            }
        }

        const style = document.createElement('style');
        style.textContent = `
            @keyframes ripple {
                to {
                    transform: translate(-50%, -50%) scale(2);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        const cookieBanner = new DynamicGradientCookieBanner({
            onAccept: (consent) => {
                console.log('Cookies aceptadas:', consent);

            },
            onDecline: (consent) => {
                console.log('Cookies rechazadas:', consent);

            },
            onSettingsSave: (consent) => {
                console.log('Configuración guardada:', consent);

            }
        });

        function showCookieBanner() {
            cookieBanner.reset();
        }

        function acceptCookies() {
            cookieBanner.accept();
        }

        function declineCookies() {
            cookieBanner.decline();
        }

        function openSettings() {
            cookieBanner.openSettings();
        }

        function closeSettings() {
            cookieBanner.closeSettings();
        }

        function saveSettings(acceptAll) {
            cookieBanner.saveSettings(acceptAll);
        }
    </script>
</body>
</html>
938líneas
30991caracteres
HTMLIdioma

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas ->