Banners

HTML del banner completo:

<div class="cookie-banner" id="cookieBanner">
  <div class="cookie-content">
    <div class="cookie-text">
      <div class="cookie-title">Uso de Cookies</div>
      <div class="cookie-description">
        Utilizamos cookies propias y de terceros para mejorar tu experiencia...
        <a href="/cookies">Más información</a> |
        <a href="/privacidad">Política de Privacidad</a>
      </div>
    </div>
    <div class="cookie-actions">
      <button class="btn btn-ghost-white btn-sm">Configurar</button>
      <button class="btn btn-secondary btn-sm">Solo necesarias</button>
      <button class="btn btn-success">Aceptar todas</button>
    </div>
  </div>
</div>

<div class="cookie-banner-top" id="cookieBannerTop">
  🍪 Este sitio utiliza cookies para mejorar tu experiencia.
  <div class="cookie-actions">
    <button class="btn btn-ghost-white btn-xs">Configurar</button>
    <button class="btn btn-primary btn-xs">Aceptar</button>
  </div>
</div>

<div class="cookie-banner-float" id="cookieFloat">
  <div class="cookie-title">Cookies</div>
  <div class="cookie-text">
    Usamos cookies para personalizar contenido...
    <a href="/cookies">Leer más</a>
  </div>
  <div class="cookie-actions">
    <button class="btn btn-ghost btn-xs">Rechazar</button>
    <button class="btn btn-primary btn-xs">Aceptar</button>
  </div>
</div>

Script de control (ejemplo):

// Control de banner de cookies RGPD compliant
class CookieBanner {
    constructor(bannerId) {
        this.banner = document.getElementById(bannerId);
        this.init();
    }

    init() {
        // Mostrar banner si no hay consentimiento
        if (!this.hasConsent()) {
            this.show();
        }

        this.bindEvents();
    }

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

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

    hasConsent() {
        return localStorage.getItem('cookieConsent') !== null;
    }

    acceptAll() {
        this.setConsent({
            necessary: true,
            analytics: true,
            marketing: true,
            preferences: true
        });
        this.hide();
    }

    acceptNecessary() {
        this.setConsent({
            necessary: true,
            analytics: false,
            marketing: false,
            preferences: false
        });
        this.hide();
    }

    setConsent(preferences) {
        localStorage.setItem('cookieConsent', JSON.stringify({
            preferences: preferences,
            timestamp: new Date().toISOString()
        }));
    }

    bindEvents() {
        // Eventos de botones
        const acceptAllBtn = this.banner.querySelector('[data-action="accept-all"]');
        const acceptNecessaryBtn = this.banner.querySelector('[data-action="necessary"]');
        const configureBtn = this.banner.querySelector('[data-action="configure"]');

        if (acceptAllBtn) {
            acceptAllBtn.addEventListener('click', () => this.acceptAll());
        }

        if (acceptNecessaryBtn) {
            acceptNecessaryBtn.addEventListener('click', () => this.acceptNecessary());
        }

        if (configureBtn) {
            configureBtn.addEventListener('click', () => this.openConfiguration());
        }
    }

    openConfiguration() {
        // Abrir modal de configuración de cookies
        // Implementar según tu sistema de modales
        console.log('Abrir configuración de cookies');
    }
}

// Inicializar al cargar la página
document.addEventListener('DOMContentLoaded', () => {
    new CookieBanner('cookieBanner');
});

<div class="notification-banner" id="notification1">
  <div class="banner banner-success banner-sm">
    <div class="banner-icon">
      <i class="fas fa-check"></i>
    </div>
    <div class="banner-content">
      <div class="banner-title">¡Guardado!</div>
      <div class="banner-text">Los cambios se guardaron correctamente.</div>
    </div>
    <button class="banner-close">
      <i class="fas fa-times"></i>
    </button>
  </div>
</div>

<div class="notification-banner auto-dismiss">
  <div class="banner banner-info banner-sm">
    <div class="banner-icon">
      <i class="fas fa-info-circle"></i>
    </div>
    <div class="banner-content">
      <div class="banner-title">Información</div>
      <div class="banner-text">Se cierra automáticamente en 5s.</div>
    </div>
  </div>
</div>

// Sistema de notificaciones
class NotificationSystem {
    constructor() {
        this.container = this.createContainer();
        this.notifications = [];
    }

    createContainer() {
        const container = document.createElement('div');
        container.className = 'notification-container';
        container.style.cssText = `
            position: fixed;
            top: 2rem;
            right: 2rem;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        `;
        document.body.appendChild(container);
        return container;
    }

    show(type, title, message, duration = 5000) {
        const notification = this.createNotification(type, title, message);
        this.container.appendChild(notification);

        // Animación de entrada
        setTimeout(() => notification.classList.add('show'), 100);

        // Auto-dismiss
        if (duration > 0) {
            setTimeout(() => this.hide(notification), duration);
        }

        return notification;
    }

    createNotification(type, title, message) {
        const notification = document.createElement('div');
        notification.className = 'notification-banner';

        notification.innerHTML = `
            <div class="banner banner-${type} banner-sm">
                <div class="banner-icon">
                    <i class="fas fa-${this.getIcon(type)}"></i>
                </div>
                <div class="banner-content">
                    <div class="banner-title">${title}</div>
                    <div class="banner-text">${message}</div>
                </div>
                <button class="banner-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;

        // Event listener para cerrar
        notification.querySelector('.banner-close').addEventListener('click', () => {
            this.hide(notification);
        });

        return notification;
    }

    hide(notification) {
        notification.classList.add('notification-slide-out');
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 400);
    }

    getIcon(type) {
        const icons = {
            success: 'check',
            danger: 'exclamation-circle',
            warning: 'exclamation-triangle',
            info: 'info-circle'
        };
        return icons[type] || 'info-circle';
    }
}

// Instancia global
const notifications = new NotificationSystem();

// Funciones de ayuda
function showSuccess(title, message) {
    notifications.show('success', title, message);
}

function showError(title, message) {
    notifications.show('danger', title, message);
}

function showWarning(title, message) {
    notifications.show('warning', title, message);
}

function showInfo(title, message) {
    notifications.show('info', title, message);
}

<div class="promo-banner">
  <div class="promo-content">
    <div class="promo-title">🎉 ¡Oferta Especial!</div>
    <div class="promo-subtitle">50% de descuento en todos los planes Premium</div>
    <button class="btn btn-ghost-white">Aprovechar Oferta</button>
  </div>
</div>

<div class="maintenance-banner">
  <span class="maintenance-icon">🔧</span>
  <span class="maintenance-text">
    Mantenimiento programado: Domingo 15 de Octubre, 02:00 - 04:00 GMT
  </span>
</div>

Ejemplos de uso:

<!-- Banner fijo superior -->
<div class="banner banner-warning banner-fixed-top banner-dismissible">
  <div class="banner-content">
    <div class="banner-text">Mensaje importante en la parte superior</div>
  </div>
  <button class="banner-close"><i class="fas fa-times"></i></button>
</div>

<!-- Banner sticky -->
<div class="banner banner-info banner-sticky">
  <div class="banner-content">
    <div class="banner-text">Este banner se mantiene visible al hacer scroll</div>
  </div>
</div>