Centro de Fragmentos de Código
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

997

Compatibilidad del Navegador

No

Vista Previa en Vivo

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

400px

Banner de Consentimiento de Cookies con Gradiente Dinámico

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;
        }

        /* Banner de Cookies con Gradiente Dinámico */
        .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;
        }

        /* Botones con Gradiente */
        .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);
        }

        /* Modal de Configuración */
        .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;
        }

        /* Interruptor de Gradiente */
        .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;
        }

        /* Diseño Responsivo */
        @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;
            }
        }

        /* Botón Demo */
        .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);
        }

        /* Partículas Flotantes */
        .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>

    <!-- Banner de Cookies -->
    <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>

    <!-- Modal de Configuración -->
    <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() {
                // Interruptores de alternancia
                document.querySelectorAll('.gradient-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        if (toggle.dataset.category !== 'essential') {
                            toggle.classList.toggle('active');
                            this.animateToggle(toggle);
                        }
                    });
                });

                // Clic en el fondo del modal
                this.modal.addEventListener('click', (e) => {
                    if (e.target === this.modal) {
                        this.closeSettings();
                    }
                });

                // Navegación por teclado
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        this.closeSettings();
                    }
                });

                // Efectos hover de botones
                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());
                }
            }
        }

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

        // Inicializar el banner
        const cookieBanner = new DynamicGradientCookieBanner({
            onAccept: (consent) => {
                console.log('Cookies aceptadas:', consent);
                // Inicializar scripts de análisis, marketing, etc.
            },
            onDecline: (consent) => {
                console.log('Cookies rechazadas:', consent);
                // Cargar solo scripts esenciales
            },
            onSettingsSave: (consent) => {
                console.log('Configuración guardada:', consent);
                // Cargar scripts basados en las preferencias del usuario
            }
        });

        // Funciones globales para la demo
        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

// Inicializar con configuración predeterminada
const cookieBanner = new DynamicGradientCookieBanner();

// Inicializar con opciones personalizadas
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);
        // Cargar scripts de análisis
        if (consent.analytics) {
            loadGoogleAnalytics();
        }
        // Cargar scripts de marketing
        if (consent.marketing) {
            loadMarketingPixels();
        }
    },
    onDecline: (consent) => {
        console.log('Usuario rechazó cookies:', consent);
        // Cargar solo funcionalidad esencial
    },
    onSettingsSave: (consent) => {
        console.log('Usuario guardó configuración personalizada:', consent);
        // Cargar scripts basados en preferencias específicas
    }
});

Configuración Avanzada

// Estilo personalizado y comportamiento
const advancedBanner = new DynamicGradientCookieBanner({
    autoShow: false, // Control manual
    showDelay: 0,
    storageKey: 'consentimiento_avanzado',
    expiryDays: 90,
    enableParticles: true,
    particleCount: 50,
    
    // Callbacks personalizados
    onAccept: (consent) => {
        // Configuración avanzada de análisis
        initializeAdvancedTracking(consent);
    },
    
    onDecline: (consent) => {
        // Configuración mínima de seguimiento
        initializeEssentialOnly();
    },
    
    onSettingsSave: (consent) => {
        // Carga granular de scripts
        loadScriptsBasedOnConsent(consent);
    }
});

// Temas de gradiente personalizados
function setCustomGradient(gradient) {
    advancedBanner.updateGradient(gradient);
}

// Control de partículas
function toggleParticles(enabled) {
    advancedBanner.setParticles(enabled);
}

// Control manual
function showConsentBanner() {
    advancedBanner.show();
}

// Verificar estado actual de consentimiento
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

965

líneas

CSS

1

líneas

JavaScript

31

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;
        }

        /* Banner de Cookies con Gradiente Dinámico */
        .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;
        }

        /* Botones con Gradiente */
        .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);
        }

        /* Modal de Configuración */
        .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;
        }

        /* Interruptor de Gradiente */
        .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;
        }

        /* Diseño Responsivo */
        @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;
            }
        }

        /* Botón Demo */
        .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);
        }

        /* Partículas Flotantes */
        .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>

    <!-- Banner de Cookies -->
    <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>

    <!-- Modal de Configuración -->
    <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() {
                // Interruptores de alternancia
                document.querySelectorAll('.gradient-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        if (toggle.dataset.category !== 'essential') {
                            toggle.classList.toggle('active');
                            this.animateToggle(toggle);
                        }
                    });
                });

                // Clic en el fondo del modal
                this.modal.addEventListener('click', (e) => {
                    if (e.target === this.modal) {
                        this.closeSettings();
                    }
                });

                // Navegación por teclado
                document.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        this.closeSettings();
                    }
                });

                // Efectos hover de botones
                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());
                }
            }
        }

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

        // Inicializar el banner
        const cookieBanner = new DynamicGradientCookieBanner({
            onAccept: (consent) => {
                console.log('Cookies aceptadas:', consent);
                // Inicializar scripts de análisis, marketing, etc.
            },
            onDecline: (consent) => {
                console.log('Cookies rechazadas:', consent);
                // Cargar solo scripts esenciales
            },
            onSettingsSave: (consent) => {
                console.log('Configuración guardada:', consent);
                // Cargar scripts basados en las preferencias del usuario
            }
        });

        // Funciones globales para la demo
        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>
965líneas
31861caracteres
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 →