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 Neumorfismo

Un banner de consentimiento de cookies moderno con diseño neumorfismo suave, con sombras sutiles y elegantes efectos de profundidad

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

Diseño Responsivo

Sí

Soporte para Modo Oscuro

No

líneas

847

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 Neumorfismo

Un banner de consentimiento de cookies bellamente diseñado con principios de diseño neumorfismo que presenta sombras suaves, profundidad sutil e interacciones elegantes. Perfecto para sitios web modernos que buscan una apariencia limpia y sofisticada.

Características

  • Diseño Neumorfismo: UI suave con sombras sutiles y efectos de profundidad
  • Interacciones Elegantes: Efectos hover suaves y animaciones gentiles
  • Tema Personalizable: Fácil personalización de colores y sombras
  • Diseño Responsivo: Se adapta hermosamente a todos los tamaños 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
  • Animaciones Suaves: Transiciones gentiles que mejoran la experiencia del usuario
  • Almacenamiento Local: Gestión persistente de preferencias del usuario

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 Neumorfismo</title>
    <style>
        :root {
            --primary-bg: #e6e7ee;
            --secondary-bg: #f0f0f3;
            --text-primary: #4a4a4a;
            --text-secondary: #6c6c6c;
            --accent-color: #667eea;
            --success-color: #48bb78;
            --danger-color: #f56565;
            --warning-color: #ed8936;
            --shadow-light: #ffffff;
            --shadow-dark: #d1d9e6;
            --border-radius: 20px;
            --transition: all 0.3s 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, #e6e7ee 0%, #f0f0f3 100%);
            min-height: 100vh;
            color: var(--text-primary);
            line-height: 1.6;
        }

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

        .demo-content h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--accent-color), #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .demo-content p {
            font-size: 1.1rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        /* Banner de Cookies Neumorfismo */
        .neuro-cookie-banner {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            background: var(--primary-bg);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: 
                20px 20px 60px var(--shadow-dark),
                -20px -20px 60px var(--shadow-light),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
            transform: translateY(120%);
            transition: var(--transition);
            z-index: 10000;
            max-width: 1200px;
            margin: 0 auto;
        }

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

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

        .cookie-info {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .cookie-icon {
            width: 48px;
            height: 48px;
            background: var(--secondary-bg);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 
                8px 8px 16px var(--shadow-dark),
                -8px -8px 16px var(--shadow-light);
            flex-shrink: 0;
        }

        .cookie-text {
            flex: 1;
        }

        .cookie-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .cookie-description {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .cookie-link {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
        }

        .cookie-link:hover {
            color: #5a67d8;
            text-decoration: underline;
        }

        .cookie-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        /* Botones Neumorfismo */
        .neuro-btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            min-width: 120px;
            background: var(--secondary-bg);
            color: var(--text-primary);
        }

        .neuro-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s ease;
        }

        .neuro-btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: var(--accent-color);
            color: white;
            box-shadow: 
                8px 8px 16px rgba(102, 126, 234, 0.3),
                -8px -8px 16px rgba(255, 255, 255, 0.8),
                inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 
                12px 12px 24px rgba(102, 126, 234, 0.4),
                -12px -12px 24px rgba(255, 255, 255, 0.9),
                inset 0 0 0 1px rgba(255, 255, 255, 0.3);
        }

        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 
                4px 4px 8px rgba(102, 126, 234, 0.3),
                -4px -4px 8px rgba(255, 255, 255, 0.8),
                inset 2px 2px 4px rgba(102, 126, 234, 0.2);
        }

        .btn-secondary {
            box-shadow: 
                8px 8px 16px var(--shadow-dark),
                -8px -8px 16px var(--shadow-light);
        }

        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 
                12px 12px 24px var(--shadow-dark),
                -12px -12px 24px var(--shadow-light);
        }

        .btn-secondary:active {
            transform: translateY(0);
            box-shadow: 
                inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--accent-color);
            color: var(--accent-color);
            box-shadow: 
                4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
        }

        .btn-outline:hover {
            background: var(--accent-color);
            color: white;
            transform: translateY(-2px);
        }

        /* Modal de Configuración */
        .cookie-settings-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(230, 231, 238, 0.8);
            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: var(--primary-bg);
            border-radius: var(--border-radius);
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 
                20px 20px 60px var(--shadow-dark),
                -20px -20px 60px var(--shadow-light);
            transform: scale(0.9);
            transition: var(--transition);
        }

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

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--shadow-dark);
        }

        .settings-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .close-btn {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 10px;
            background: var(--secondary-bg);
            color: var(--text-secondary);
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 
                6px 6px 12px var(--shadow-dark),
                -6px -6px 12px var(--shadow-light);
        }

        .close-btn:hover {
            color: var(--danger-color);
            transform: scale(1.1);
        }

        .close-btn:active {
            box-shadow: 
                inset 3px 3px 6px var(--shadow-dark),
                inset -3px -3px 6px var(--shadow-light);
        }

        .cookie-category {
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            background: var(--secondary-bg);
            border-radius: 16px;
            box-shadow: 
                inset 8px 8px 16px var(--shadow-dark),
                inset -8px -8px 16px var(--shadow-light);
        }

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

        .category-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .category-description {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* Interruptor Neumorfismo */
        .neuro-toggle {
            position: relative;
            width: 60px;
            height: 30px;
            background: var(--secondary-bg);
            border-radius: 15px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 
                inset 6px 6px 12px var(--shadow-dark),
                inset -6px -6px 12px var(--shadow-light);
        }

        .neuro-toggle.active {
            background: linear-gradient(135deg, var(--success-color), #38a169);
            box-shadow: 
                inset 6px 6px 12px rgba(72, 187, 120, 0.3),
                inset -6px -6px 12px rgba(255, 255, 255, 0.8);
        }

        .neuro-toggle::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 24px;
            height: 24px;
            background: var(--primary-bg);
            border-radius: 50%;
            transition: var(--transition);
            box-shadow: 
                4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
        }

        .neuro-toggle.active::before {
            transform: translateX(30px);
            background: white;
            box-shadow: 
                4px 4px 8px rgba(72, 187, 120, 0.3),
                -4px -4px 8px rgba(255, 255, 255, 0.9);
        }

        .settings-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid var(--shadow-dark);
        }

        /* Diseño Responsivo */
        @media (max-width: 768px) {
            .neuro-cookie-banner {
                bottom: 1rem;
                left: 1rem;
                right: 1rem;
                padding: 1.5rem;
            }

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

            .cookie-info {
                flex-direction: column;
                text-align: center;
            }

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

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

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

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

            .neuro-btn {
                width: 100%;
            }
        }

        /* Botón Demo */
        .demo-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 12px;
            background: var(--accent-color);
            color: white;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 
                8px 8px 16px rgba(102, 126, 234, 0.3),
                -8px -8px 16px rgba(255, 255, 255, 0.8);
        }

        .demo-btn:hover {
            transform: translateY(-2px);
            box-shadow: 
                12px 12px 24px rgba(102, 126, 234, 0.4),
                -12px -12px 24px rgba(255, 255, 255, 0.9);
        }
    </style>
</head>
<body>
    <div class="demo-content">
        <h1>Banner de Cookies Neumorfismo</h1>
        <p>Experimenta el elegante diseño de UI suave con sombras sutiles e interacciones fluidas</p>
        <button class="demo-btn" onclick="showCookieBanner()">Mostrar Banner de Cookies</button>
    </div>

    <!-- Banner de Cookies -->
    <div id="neuroCookieBanner" class="neuro-cookie-banner">
        <div class="cookie-container">
            <div class="cookie-info">
                <div class="cookie-icon">🍪</div>
                <div class="cookie-text">
                    <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>
            <div class="cookie-actions">
                <button class="neuro-btn btn-primary" onclick="acceptCookies()">Aceptar Todo</button>
                <button class="neuro-btn btn-secondary" onclick="declineCookies()">Rechazar</button>
                <button class="neuro-btn btn-outline" 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="neuro-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="neuro-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="neuro-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="neuro-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="neuro-btn btn-secondary" onclick="saveSettings(false)">Guardar Preferencias</button>
                <button class="neuro-btn btn-primary" onclick="saveSettings(true)">Aceptar Todo</button>
            </div>
        </div>
    </div>

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

                this.banner = document.getElementById('neuroCookieBanner');
                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();
            }

            setupEventListeners() {
                // Interruptores de alternancia
                document.querySelectorAll('.neuro-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        if (toggle.dataset.category !== 'essential') {
                            toggle.classList.toggle('active');
                        }
                    });
                });

                // 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('.neuro-btn').forEach(btn => {
                    btn.addEventListener('mouseenter', () => {
                        btn.style.transform = 'translateY(-2px)';
                    });
                    btn.addEventListener('mouseleave', () => {
                        btn.style.transform = 'translateY(0)';
                    });
                });
            }

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

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

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

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

            saveSettings(acceptAll = false) {
                const toggles = document.querySelectorAll('.neuro-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('.neuro-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;
            }

            updateTheme(theme) {
                const root = document.documentElement;
                if (theme === 'dark') {
                    root.style.setProperty('--primary-bg', '#2d3748');
                    root.style.setProperty('--secondary-bg', '#4a5568');
                    root.style.setProperty('--text-primary', '#f7fafc');
                    root.style.setProperty('--text-secondary', '#e2e8f0');
                    root.style.setProperty('--shadow-light', '#4a5568');
                    root.style.setProperty('--shadow-dark', '#1a202c');
                } else {
                    root.style.setProperty('--primary-bg', '#e6e7ee');
                    root.style.setProperty('--secondary-bg', '#f0f0f3');
                    root.style.setProperty('--text-primary', '#4a4a4a');
                    root.style.setProperty('--text-secondary', '#6c6c6c');
                    root.style.setProperty('--shadow-light', '#ffffff');
                    root.style.setProperty('--shadow-dark', '#d1d9e6');
                }
            }
        }

        // Inicializar el banner
        const cookieBanner = new NeumorphismCookieBanner({
            onAccept: (consent) => {
                console.log('Cookies aceptadas:', consent);
                // Inicializar scripts de análisis, marketing, etc.
            },
            onDecline: (consent) => {
                console.log('Cookies rechazadas:', consent);
                // Solo cargar 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 NeumorphismCookieBanner();

// Inicializar con opciones personalizadas
const cookieBanner = new NeumorphismCookieBanner({
    autoShow: true,
    showDelay: 2000,
    storageKey: 'mi_consentimiento_cookies',
    expiryDays: 180,
    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);
        // Solo cargar 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 NeumorphismCookieBanner({
    autoShow: false, // Control manual
    showDelay: 0,
    storageKey: 'consentimiento_avanzado',
    expiryDays: 90,
    
    // 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);
    }
});

// Cambio de tema
function switchTheme(theme) {
    advancedBanner.updateTheme(theme);
}

// 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

Gestión de Temas

  • updateTheme(theme) - Cambiar entre temas claro y oscuro

Opciones de Personalización

Personalización Visual

  • Esquema de Colores: Modificar propiedades CSS personalizadas para diferentes temas
  • Intensidad de Sombra: Ajustar valores de sombra para efecto de profundidad
  • Radio de Borde: Personalizar redondez de elementos
  • Tipografía: Cambiar familias y tamaños 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

817

líneas

CSS

1

líneas

JavaScript

29

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 Neumorfismo</title>
    <style>
        :root {
            --primary-bg: #e6e7ee;
            --secondary-bg: #f0f0f3;
            --text-primary: #4a4a4a;
            --text-secondary: #6c6c6c;
            --accent-color: #667eea;
            --success-color: #48bb78;
            --danger-color: #f56565;
            --warning-color: #ed8936;
            --shadow-light: #ffffff;
            --shadow-dark: #d1d9e6;
            --border-radius: 20px;
            --transition: all 0.3s 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, #e6e7ee 0%, #f0f0f3 100%);
            min-height: 100vh;
            color: var(--text-primary);
            line-height: 1.6;
        }

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

        .demo-content h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--accent-color), #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .demo-content p {
            font-size: 1.1rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        /* Banner de Cookies Neumorfismo */
        .neuro-cookie-banner {
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            background: var(--primary-bg);
            border-radius: var(--border-radius);
            padding: 2rem;
            box-shadow: 
                20px 20px 60px var(--shadow-dark),
                -20px -20px 60px var(--shadow-light),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
            transform: translateY(120%);
            transition: var(--transition);
            z-index: 10000;
            max-width: 1200px;
            margin: 0 auto;
        }

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

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

        .cookie-info {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .cookie-icon {
            width: 48px;
            height: 48px;
            background: var(--secondary-bg);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 
                8px 8px 16px var(--shadow-dark),
                -8px -8px 16px var(--shadow-light);
            flex-shrink: 0;
        }

        .cookie-text {
            flex: 1;
        }

        .cookie-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .cookie-description {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .cookie-link {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
        }

        .cookie-link:hover {
            color: #5a67d8;
            text-decoration: underline;
        }

        .cookie-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        /* Botones Neumorfismo */
        .neuro-btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            min-width: 120px;
            background: var(--secondary-bg);
            color: var(--text-primary);
        }

        .neuro-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s ease;
        }

        .neuro-btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: var(--accent-color);
            color: white;
            box-shadow: 
                8px 8px 16px rgba(102, 126, 234, 0.3),
                -8px -8px 16px rgba(255, 255, 255, 0.8),
                inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 
                12px 12px 24px rgba(102, 126, 234, 0.4),
                -12px -12px 24px rgba(255, 255, 255, 0.9),
                inset 0 0 0 1px rgba(255, 255, 255, 0.3);
        }

        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 
                4px 4px 8px rgba(102, 126, 234, 0.3),
                -4px -4px 8px rgba(255, 255, 255, 0.8),
                inset 2px 2px 4px rgba(102, 126, 234, 0.2);
        }

        .btn-secondary {
            box-shadow: 
                8px 8px 16px var(--shadow-dark),
                -8px -8px 16px var(--shadow-light);
        }

        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 
                12px 12px 24px var(--shadow-dark),
                -12px -12px 24px var(--shadow-light);
        }

        .btn-secondary:active {
            transform: translateY(0);
            box-shadow: 
                inset 4px 4px 8px var(--shadow-dark),
                inset -4px -4px 8px var(--shadow-light);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--accent-color);
            color: var(--accent-color);
            box-shadow: 
                4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
        }

        .btn-outline:hover {
            background: var(--accent-color);
            color: white;
            transform: translateY(-2px);
        }

        /* Modal de Configuración */
        .cookie-settings-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(230, 231, 238, 0.8);
            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: var(--primary-bg);
            border-radius: var(--border-radius);
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 
                20px 20px 60px var(--shadow-dark),
                -20px -20px 60px var(--shadow-light);
            transform: scale(0.9);
            transition: var(--transition);
        }

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

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--shadow-dark);
        }

        .settings-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .close-btn {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 10px;
            background: var(--secondary-bg);
            color: var(--text-secondary);
            font-size: 1.2rem;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 
                6px 6px 12px var(--shadow-dark),
                -6px -6px 12px var(--shadow-light);
        }

        .close-btn:hover {
            color: var(--danger-color);
            transform: scale(1.1);
        }

        .close-btn:active {
            box-shadow: 
                inset 3px 3px 6px var(--shadow-dark),
                inset -3px -3px 6px var(--shadow-light);
        }

        .cookie-category {
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            background: var(--secondary-bg);
            border-radius: 16px;
            box-shadow: 
                inset 8px 8px 16px var(--shadow-dark),
                inset -8px -8px 16px var(--shadow-light);
        }

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

        .category-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .category-description {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* Interruptor Neumorfismo */
        .neuro-toggle {
            position: relative;
            width: 60px;
            height: 30px;
            background: var(--secondary-bg);
            border-radius: 15px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 
                inset 6px 6px 12px var(--shadow-dark),
                inset -6px -6px 12px var(--shadow-light);
        }

        .neuro-toggle.active {
            background: linear-gradient(135deg, var(--success-color), #38a169);
            box-shadow: 
                inset 6px 6px 12px rgba(72, 187, 120, 0.3),
                inset -6px -6px 12px rgba(255, 255, 255, 0.8);
        }

        .neuro-toggle::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 24px;
            height: 24px;
            background: var(--primary-bg);
            border-radius: 50%;
            transition: var(--transition);
            box-shadow: 
                4px 4px 8px var(--shadow-dark),
                -4px -4px 8px var(--shadow-light);
        }

        .neuro-toggle.active::before {
            transform: translateX(30px);
            background: white;
            box-shadow: 
                4px 4px 8px rgba(72, 187, 120, 0.3),
                -4px -4px 8px rgba(255, 255, 255, 0.9);
        }

        .settings-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid var(--shadow-dark);
        }

        /* Diseño Responsivo */
        @media (max-width: 768px) {
            .neuro-cookie-banner {
                bottom: 1rem;
                left: 1rem;
                right: 1rem;
                padding: 1.5rem;
            }

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

            .cookie-info {
                flex-direction: column;
                text-align: center;
            }

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

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

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

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

            .neuro-btn {
                width: 100%;
            }
        }

        /* Botón Demo */
        .demo-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 12px;
            background: var(--accent-color);
            color: white;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 
                8px 8px 16px rgba(102, 126, 234, 0.3),
                -8px -8px 16px rgba(255, 255, 255, 0.8);
        }

        .demo-btn:hover {
            transform: translateY(-2px);
            box-shadow: 
                12px 12px 24px rgba(102, 126, 234, 0.4),
                -12px -12px 24px rgba(255, 255, 255, 0.9);
        }
    </style>
</head>
<body>
    <div class="demo-content">
        <h1>Banner de Cookies Neumorfismo</h1>
        <p>Experimenta el elegante diseño de UI suave con sombras sutiles e interacciones fluidas</p>
        <button class="demo-btn" onclick="showCookieBanner()">Mostrar Banner de Cookies</button>
    </div>

    <!-- Banner de Cookies -->
    <div id="neuroCookieBanner" class="neuro-cookie-banner">
        <div class="cookie-container">
            <div class="cookie-info">
                <div class="cookie-icon">🍪</div>
                <div class="cookie-text">
                    <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>
            <div class="cookie-actions">
                <button class="neuro-btn btn-primary" onclick="acceptCookies()">Aceptar Todo</button>
                <button class="neuro-btn btn-secondary" onclick="declineCookies()">Rechazar</button>
                <button class="neuro-btn btn-outline" 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="neuro-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="neuro-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="neuro-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="neuro-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="neuro-btn btn-secondary" onclick="saveSettings(false)">Guardar Preferencias</button>
                <button class="neuro-btn btn-primary" onclick="saveSettings(true)">Aceptar Todo</button>
            </div>
        </div>
    </div>

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

                this.banner = document.getElementById('neuroCookieBanner');
                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();
            }

            setupEventListeners() {
                // Interruptores de alternancia
                document.querySelectorAll('.neuro-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        if (toggle.dataset.category !== 'essential') {
                            toggle.classList.toggle('active');
                        }
                    });
                });

                // 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('.neuro-btn').forEach(btn => {
                    btn.addEventListener('mouseenter', () => {
                        btn.style.transform = 'translateY(-2px)';
                    });
                    btn.addEventListener('mouseleave', () => {
                        btn.style.transform = 'translateY(0)';
                    });
                });
            }

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

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

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

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

            saveSettings(acceptAll = false) {
                const toggles = document.querySelectorAll('.neuro-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('.neuro-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;
            }

            updateTheme(theme) {
                const root = document.documentElement;
                if (theme === 'dark') {
                    root.style.setProperty('--primary-bg', '#2d3748');
                    root.style.setProperty('--secondary-bg', '#4a5568');
                    root.style.setProperty('--text-primary', '#f7fafc');
                    root.style.setProperty('--text-secondary', '#e2e8f0');
                    root.style.setProperty('--shadow-light', '#4a5568');
                    root.style.setProperty('--shadow-dark', '#1a202c');
                } else {
                    root.style.setProperty('--primary-bg', '#e6e7ee');
                    root.style.setProperty('--secondary-bg', '#f0f0f3');
                    root.style.setProperty('--text-primary', '#4a4a4a');
                    root.style.setProperty('--text-secondary', '#6c6c6c');
                    root.style.setProperty('--shadow-light', '#ffffff');
                    root.style.setProperty('--shadow-dark', '#d1d9e6');
                }
            }
        }

        // Inicializar el banner
        const cookieBanner = new NeumorphismCookieBanner({
            onAccept: (consent) => {
                console.log('Cookies aceptadas:', consent);
                // Inicializar scripts de análisis, marketing, etc.
            },
            onDecline: (consent) => {
                console.log('Cookies rechazadas:', consent);
                // Solo cargar 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>
817líneas
26479caracteres
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 →