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 Neón Oscuro

Un banner de consentimiento de cookies con tema oscuro futurista con efectos de neón y estética cyberpunk

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

Diseño Responsivo

Sí

Soporte para Modo Oscuro

No

líneas

741

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 Neón Oscuro

Un impresionante banner de consentimiento de cookies con tema oscuro que presenta efectos de neón y estética cyberpunk. Perfecto para sitios web modernos con temas oscuros o diseños futuristas.

Características

  • Diseño Cyberpunk: Tema oscuro futurista con acentos de neón
  • Efectos de Brillo: Hermosas animaciones de neón y efectos hover
  • Colores Personalizables: Fácil modificación de colores neón y temas
  • Animaciones Suaves: Transiciones fluidas y retroalimentación interactiva
  • Cumple RGPD: Gestión adecuada de consentimiento y categorización de cookies
  • Diseño Responsivo: Funciona perfectamente en todos los dispositivos
  • Accesibilidad: Navegación completa por teclado y soporte para lectores de pantalla
  • Almacenamiento Local: Recuerda las 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 Neón Oscuro</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            min-height: 100vh;
            color: #ffffff;
            overflow-x: hidden;
        }

        .demo-content {
            padding: 2rem;
            text-align: center;
            margin-top: 5rem;
        }

        .demo-content h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, #00ffff, #ff00ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Estilos del Banner de Cookies */
        .neon-cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            border-top: 2px solid #00ffff;
            box-shadow: 
                0 -10px 30px rgba(0, 255, 255, 0.3),
                0 0 50px rgba(0, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            padding: 1.5rem;
            transform: translateY(100%);
            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 10000;
            font-family: 'Courier New', monospace;
        }

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

        .neon-cookie-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                #00ffff 20%, 
                #ff00ff 50%, 
                #00ffff 80%, 
                transparent 100%);
            animation: neonPulse 3s ease-in-out infinite;
        }

        .cookie-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2rem;
            align-items: center;
        }

        .cookie-text {
            color: #e0e0e0;
            line-height: 1.6;
        }

        .cookie-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #00ffff;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }

        .cookie-description {
            font-size: 0.95rem;
            opacity: 0.9;
        }

        .cookie-link {
            color: #ff00ff;
            text-decoration: none;
            transition: all 0.3s ease;
            text-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
        }

        .cookie-link:hover {
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
        }

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

        .neon-btn {
            padding: 0.8rem 1.5rem;
            border: 2px solid;
            background: transparent;
            color: #ffffff;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            font-weight: bold;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            min-width: 120px;
        }

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

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

        .btn-accept {
            border-color: #00ff00;
            color: #00ff00;
            box-shadow: 
                0 0 20px rgba(0, 255, 0, 0.3),
                inset 0 0 20px rgba(0, 255, 0, 0.1);
        }

        .btn-accept:hover {
            background: rgba(0, 255, 0, 0.1);
            box-shadow: 
                0 0 30px rgba(0, 255, 0, 0.6),
                inset 0 0 30px rgba(0, 255, 0, 0.2);
            transform: translateY(-2px);
        }

        .btn-decline {
            border-color: #ff0040;
            color: #ff0040;
            box-shadow: 
                0 0 20px rgba(255, 0, 64, 0.3),
                inset 0 0 20px rgba(255, 0, 64, 0.1);
        }

        .btn-decline:hover {
            background: rgba(255, 0, 64, 0.1);
            box-shadow: 
                0 0 30px rgba(255, 0, 64, 0.6),
                inset 0 0 30px rgba(255, 0, 64, 0.2);
            transform: translateY(-2px);
        }

        .btn-settings {
            border-color: #ffff00;
            color: #ffff00;
            box-shadow: 
                0 0 20px rgba(255, 255, 0, 0.3),
                inset 0 0 20px rgba(255, 255, 0, 0.1);
        }

        .btn-settings:hover {
            background: rgba(255, 255, 0, 0.1);
            box-shadow: 
                0 0 30px rgba(255, 255, 0, 0.6),
                inset 0 0 30px rgba(255, 255, 0, 0.2);
            transform: translateY(-2px);
        }

        /* Modal de Configuración */
        .cookie-settings-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

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

        .settings-content {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #00ffff;
            border-radius: 10px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 
                0 0 50px rgba(0, 255, 255, 0.3),
                inset 0 0 50px rgba(0, 255, 255, 0.1);
        }

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
        }

        .settings-title {
            font-size: 1.3rem;
            color: #00ffff;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }

        .close-btn {
            background: none;
            border: none;
            color: #ff0040;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .close-btn:hover {
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255, 0, 64, 0.8);
            transform: scale(1.2);
        }

        .cookie-category {
            margin-bottom: 1.5rem;
            padding: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.05);
        }

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

        .category-title {
            font-weight: bold;
            color: #ffffff;
        }

        .category-description {
            font-size: 0.9rem;
            color: #cccccc;
            line-height: 1.4;
        }

        /* Interruptor de Alternancia */
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 25px;
            background: #333;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #555;
        }

        .toggle-switch.active {
            background: linear-gradient(45deg, #00ffff, #ff00ff);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
        }

        .toggle-switch::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 19px;
            height: 19px;
            background: #ffffff;
            border-radius: 50%;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        .toggle-switch.active::before {
            transform: translateX(25px);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        .settings-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(0, 255, 255, 0.3);
        }

        /* Animaciones */
        @keyframes neonPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes glitch {
            0% { transform: translateX(0); }
            20% { transform: translateX(-2px); }
            40% { transform: translateX(2px); }
            60% { transform: translateX(-1px); }
            80% { transform: translateX(1px); }
            100% { transform: translateX(0); }
        }

        .glitch-effect:hover {
            animation: glitch 0.3s ease-in-out;
        }

        /* Diseño Responsivo */
        @media (max-width: 768px) {
            .cookie-content {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                text-align: center;
            }

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

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

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

        @media (max-width: 480px) {
            .neon-cookie-banner {
                padding: 1rem;
            }

            .cookie-actions {
                flex-direction: column;
            }

            .neon-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="demo-content">
        <h1>Demo Banner de Cookies Neón Oscuro</h1>
        <p>Desplázate hacia abajo para ver el banner de consentimiento de cookies futurista</p>
        <button onclick="showCookieBanner()" style="margin-top: 2rem; padding: 1rem 2rem; background: linear-gradient(45deg, #00ffff, #ff00ff); border: none; color: white; cursor: pointer; border-radius: 5px;">Mostrar Banner de Cookies</button>
    </div>

    <!-- Banner de Cookies -->
    <div id="neonCookieBanner" class="neon-cookie-banner">
        <div class="cookie-content">
            <div class="cookie-text">
                <div class="cookie-title glitch-effect">🍪 PROTOCOLO DE COOKIES INICIADO</div>
                <div class="cookie-description">
                    Utilizamos algoritmos de seguimiento avanzados para mejorar tu experiencia digital. 
                    <a href="#" class="cookie-link">Matriz de Privacidad</a> | 
                    <a href="#" class="cookie-link">Protocolos de Datos</a>
                </div>
            </div>
            <div class="cookie-actions">
                <button class="neon-btn btn-accept" onclick="acceptCookies()">ACEPTAR</button>
                <button class="neon-btn btn-decline" onclick="declineCookies()">RECHAZAR</button>
                <button class="neon-btn btn-settings" onclick="openSettings()">CONFIGURAR</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">Protocolos Esenciales</span>
                    <div class="toggle-switch active" data-category="essential">
                    </div>
                </div>
                <div class="category-description">
                    Funciones básicas del sistema requeridas para las operaciones básicas del sitio web. No se pueden desactivar.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Matriz de Análisis</span>
                    <div class="toggle-switch" data-category="analytics">
                    </div>
                </div>
                <div class="category-description">
                    Algoritmos de recopilación de datos para optimización del rendimiento y análisis del comportamiento del usuario.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Algoritmos de Marketing</span>
                    <div class="toggle-switch" data-category="marketing">
                    </div>
                </div>
                <div class="category-description">
                    Protocolos de publicidad dirigida y sistemas de entrega de contenido personalizado.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Redes Sociales</span>
                    <div class="toggle-switch" data-category="social">
                    </div>
                </div>
                <div class="category-description">
                    Integración de redes sociales de terceros y capacidades de compartir.
                </div>
            </div>

            <div class="settings-actions">
                <button class="neon-btn btn-decline" onclick="saveSettings(false)">GUARDAR Y RECHAZAR</button>
                <button class="neon-btn btn-accept" onclick="saveSettings(true)">GUARDAR Y ACEPTAR</button>
            </div>
        </div>
    </div>

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

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

            show() {
                this.banner.classList.add('show');
                // Agregar efecto glitch al mostrar
                setTimeout(() => {
                    this.banner.querySelector('.cookie-title').classList.add('glitch-effect');
                }, 300);
            }

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

            accept() {
                const consent = {
                    essential: true,
                    analytics: true,
                    marketing: true,
                    social: 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,
                    social: 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('.toggle-switch');
                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('.toggle-switch').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;
            }
        }

        // Inicializar el banner
        const cookieBanner = new NeonCookieBanner({
            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 NeonCookieBanner();

// Inicializar con opciones personalizadas
const cookieBanner = new NeonCookieBanner({
    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 NeonCookieBanner({
    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);
    }
});

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

Opciones de Personalización

Personalización Visual

  • Colores Neón: Modificar propiedades CSS personalizadas para diferentes esquemas de color
  • Efectos de Brillo: Ajustar valores de box-shadow para intensidad
  • Animaciones: Personalizar timing y efectos de transición
  • 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

711

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 Neón Oscuro</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            min-height: 100vh;
            color: #ffffff;
            overflow-x: hidden;
        }

        .demo-content {
            padding: 2rem;
            text-align: center;
            margin-top: 5rem;
        }

        .demo-content h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, #00ffff, #ff00ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Estilos del Banner de Cookies */
        .neon-cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            border-top: 2px solid #00ffff;
            box-shadow: 
                0 -10px 30px rgba(0, 255, 255, 0.3),
                0 0 50px rgba(0, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            padding: 1.5rem;
            transform: translateY(100%);
            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 10000;
            font-family: 'Courier New', monospace;
        }

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

        .neon-cookie-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                #00ffff 20%, 
                #ff00ff 50%, 
                #00ffff 80%, 
                transparent 100%);
            animation: neonPulse 3s ease-in-out infinite;
        }

        .cookie-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2rem;
            align-items: center;
        }

        .cookie-text {
            color: #e0e0e0;
            line-height: 1.6;
        }

        .cookie-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #00ffff;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }

        .cookie-description {
            font-size: 0.95rem;
            opacity: 0.9;
        }

        .cookie-link {
            color: #ff00ff;
            text-decoration: none;
            transition: all 0.3s ease;
            text-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
        }

        .cookie-link:hover {
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
        }

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

        .neon-btn {
            padding: 0.8rem 1.5rem;
            border: 2px solid;
            background: transparent;
            color: #ffffff;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            font-weight: bold;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            min-width: 120px;
        }

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

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

        .btn-accept {
            border-color: #00ff00;
            color: #00ff00;
            box-shadow: 
                0 0 20px rgba(0, 255, 0, 0.3),
                inset 0 0 20px rgba(0, 255, 0, 0.1);
        }

        .btn-accept:hover {
            background: rgba(0, 255, 0, 0.1);
            box-shadow: 
                0 0 30px rgba(0, 255, 0, 0.6),
                inset 0 0 30px rgba(0, 255, 0, 0.2);
            transform: translateY(-2px);
        }

        .btn-decline {
            border-color: #ff0040;
            color: #ff0040;
            box-shadow: 
                0 0 20px rgba(255, 0, 64, 0.3),
                inset 0 0 20px rgba(255, 0, 64, 0.1);
        }

        .btn-decline:hover {
            background: rgba(255, 0, 64, 0.1);
            box-shadow: 
                0 0 30px rgba(255, 0, 64, 0.6),
                inset 0 0 30px rgba(255, 0, 64, 0.2);
            transform: translateY(-2px);
        }

        .btn-settings {
            border-color: #ffff00;
            color: #ffff00;
            box-shadow: 
                0 0 20px rgba(255, 255, 0, 0.3),
                inset 0 0 20px rgba(255, 255, 0, 0.1);
        }

        .btn-settings:hover {
            background: rgba(255, 255, 0, 0.1);
            box-shadow: 
                0 0 30px rgba(255, 255, 0, 0.6),
                inset 0 0 30px rgba(255, 255, 0, 0.2);
            transform: translateY(-2px);
        }

        /* Modal de Configuración */
        .cookie-settings-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

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

        .settings-content {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #00ffff;
            border-radius: 10px;
            padding: 2rem;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 
                0 0 50px rgba(0, 255, 255, 0.3),
                inset 0 0 50px rgba(0, 255, 255, 0.1);
        }

        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(0, 255, 255, 0.3);
        }

        .settings-title {
            font-size: 1.3rem;
            color: #00ffff;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }

        .close-btn {
            background: none;
            border: none;
            color: #ff0040;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .close-btn:hover {
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255, 0, 64, 0.8);
            transform: scale(1.2);
        }

        .cookie-category {
            margin-bottom: 1.5rem;
            padding: 1rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.05);
        }

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

        .category-title {
            font-weight: bold;
            color: #ffffff;
        }

        .category-description {
            font-size: 0.9rem;
            color: #cccccc;
            line-height: 1.4;
        }

        /* Interruptor de Alternancia */
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 25px;
            background: #333;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #555;
        }

        .toggle-switch.active {
            background: linear-gradient(45deg, #00ffff, #ff00ff);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
        }

        .toggle-switch::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 19px;
            height: 19px;
            background: #ffffff;
            border-radius: 50%;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        .toggle-switch.active::before {
            transform: translateX(25px);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        .settings-actions {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(0, 255, 255, 0.3);
        }

        /* Animaciones */
        @keyframes neonPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes glitch {
            0% { transform: translateX(0); }
            20% { transform: translateX(-2px); }
            40% { transform: translateX(2px); }
            60% { transform: translateX(-1px); }
            80% { transform: translateX(1px); }
            100% { transform: translateX(0); }
        }

        .glitch-effect:hover {
            animation: glitch 0.3s ease-in-out;
        }

        /* Diseño Responsivo */
        @media (max-width: 768px) {
            .cookie-content {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                text-align: center;
            }

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

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

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

        @media (max-width: 480px) {
            .neon-cookie-banner {
                padding: 1rem;
            }

            .cookie-actions {
                flex-direction: column;
            }

            .neon-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="demo-content">
        <h1>Demo Banner de Cookies Neón Oscuro</h1>
        <p>Desplázate hacia abajo para ver el banner de consentimiento de cookies futurista</p>
        <button onclick="showCookieBanner()" style="margin-top: 2rem; padding: 1rem 2rem; background: linear-gradient(45deg, #00ffff, #ff00ff); border: none; color: white; cursor: pointer; border-radius: 5px;">Mostrar Banner de Cookies</button>
    </div>

    <!-- Banner de Cookies -->
    <div id="neonCookieBanner" class="neon-cookie-banner">
        <div class="cookie-content">
            <div class="cookie-text">
                <div class="cookie-title glitch-effect">🍪 PROTOCOLO DE COOKIES INICIADO</div>
                <div class="cookie-description">
                    Utilizamos algoritmos de seguimiento avanzados para mejorar tu experiencia digital. 
                    <a href="#" class="cookie-link">Matriz de Privacidad</a> | 
                    <a href="#" class="cookie-link">Protocolos de Datos</a>
                </div>
            </div>
            <div class="cookie-actions">
                <button class="neon-btn btn-accept" onclick="acceptCookies()">ACEPTAR</button>
                <button class="neon-btn btn-decline" onclick="declineCookies()">RECHAZAR</button>
                <button class="neon-btn btn-settings" onclick="openSettings()">CONFIGURAR</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">Protocolos Esenciales</span>
                    <div class="toggle-switch active" data-category="essential">
                    </div>
                </div>
                <div class="category-description">
                    Funciones básicas del sistema requeridas para las operaciones básicas del sitio web. No se pueden desactivar.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Matriz de Análisis</span>
                    <div class="toggle-switch" data-category="analytics">
                    </div>
                </div>
                <div class="category-description">
                    Algoritmos de recopilación de datos para optimización del rendimiento y análisis del comportamiento del usuario.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Algoritmos de Marketing</span>
                    <div class="toggle-switch" data-category="marketing">
                    </div>
                </div>
                <div class="category-description">
                    Protocolos de publicidad dirigida y sistemas de entrega de contenido personalizado.
                </div>
            </div>

            <div class="cookie-category">
                <div class="category-header">
                    <span class="category-title">Redes Sociales</span>
                    <div class="toggle-switch" data-category="social">
                    </div>
                </div>
                <div class="category-description">
                    Integración de redes sociales de terceros y capacidades de compartir.
                </div>
            </div>

            <div class="settings-actions">
                <button class="neon-btn btn-decline" onclick="saveSettings(false)">GUARDAR Y RECHAZAR</button>
                <button class="neon-btn btn-accept" onclick="saveSettings(true)">GUARDAR Y ACEPTAR</button>
            </div>
        </div>
    </div>

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

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

            show() {
                this.banner.classList.add('show');
                // Agregar efecto glitch al mostrar
                setTimeout(() => {
                    this.banner.querySelector('.cookie-title').classList.add('glitch-effect');
                }, 300);
            }

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

            accept() {
                const consent = {
                    essential: true,
                    analytics: true,
                    marketing: true,
                    social: 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,
                    social: 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('.toggle-switch');
                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('.toggle-switch').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;
            }
        }

        // Inicializar el banner
        const cookieBanner = new NeonCookieBanner({
            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>
711líneas
22435caracteres
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 →