Code Snippets Hub
interactive
intermediate
cookie-banner
gdpr
privacy
consent
responsive
modern
animated
Category · Interactive Difficulty Level · Intermediate Published on · January 15, 2024

Sidebar Cookie Consent Banner with Blur Background

An elegant sidebar-style cookie consent banner featuring sophisticated blur background effects, smooth slide-in animations, and modern glassmorphism design for enhanced user experience

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

Responsive Design

Yes

Dark Mode Support

No

lines

1451

Browser Compatibility

No

Live Preview

Interact with the component without leaving the page.

400px

A sophisticated sidebar-style cookie consent banner that combines modern glassmorphism design with elegant blur background effects. This banner slides in smoothly from the side, creating an immersive and non-intrusive user experience while maintaining full GDPR compliance and accessibility standards.

Features

  • Glassmorphism Design: Modern frosted glass effect with backdrop blur
  • Sidebar Layout: Space-efficient side panel that doesn’t obstruct main content
  • Blur Background: Dynamic background blur effect for enhanced focus
  • Smooth Animations: Fluid slide-in transitions and micro-interactions
  • Progressive Disclosure: Expandable sections for detailed cookie information
  • GDPR Compliant: Complete consent management with granular controls
  • Accessibility First: Full keyboard navigation and screen reader support
  • Responsive Design: Adapts seamlessly to all screen sizes and orientations
  • Modern UI: Clean, professional interface with subtle animations
  • Performance Optimized: Lightweight implementation with fast loading

Preview

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Blur Cookie Banner</title>
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-hover: #4f46e5;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --success-hover: #059669;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --background: #ffffff;
            --surface: rgba(255, 255, 255, 0.9);
            --surface-hover: rgba(255, 255, 255, 0.95);
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-color: rgba(255, 255, 255, 0.2);
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --border-radius: 12px;
            --border-radius-lg: 16px;
            --border-radius-xl: 20px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --blur-amount: 20px;
        }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--text-primary);
            line-height: 1.6;
            padding: 2rem;
            overflow-x: hidden;
            position: relative;
        }

        .demo-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            color: white;
            position: relative;
            z-index: 1;
        }

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

        .demo-container p {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .demo-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            font-family: inherit;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .demo-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }.blur-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(var(--blur-amount));
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 9998;
        }

        .blur-overlay.active {
            opacity: 1;
            visibility: visible;
        }.sidebar-blur-cookie-banner {
            position: fixed;
            top: 0;
            right: 0;
            width: 420px;
            max-width: 90vw;
            height: 100vh;
            background: var(--surface);
            backdrop-filter: blur(var(--blur-amount));
            border-left: 1px solid var(--border-color);
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-xl);
            overflow: hidden;
        }

        .sidebar-blur-cookie-banner.show {
            transform: translateX(0);
        }

        .banner-header {
            padding: 2rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        .close-button {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 40px;
            height: 40px;
            border: none;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: var(--transition-fast);
            font-size: 1.5rem;
            border: 1px solid var(--border-color);
        }

        .close-button:hover {
            background: rgba(255, 255, 255, 1);
            color: var(--text-primary);
            transform: scale(1.1);
            box-shadow: var(--shadow-md);
        }

        .banner-title {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .banner-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            animation: float 3s ease-in-out infinite;
            box-shadow: var(--shadow-md);
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-5px);
            }
        }

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

        .banner-description {
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.6;
        }.banner-content {
            flex: 1;
            overflow-y: auto;
            padding: 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
        }

        .banner-content::-webkit-scrollbar {
            width: 6px;
        }

        .banner-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .banner-content::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.3);
            border-radius: 3px;
        }

        .banner-content::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.5);
        }.cookie-section {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid var(--border-color);
        }

        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .section-icon {
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
        }

        .cookie-category {
            margin-bottom: 1rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            transition: var(--transition-fast);
        }

        .cookie-category:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

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

        .category-info {
            flex: 1;
        }

        .category-title {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .category-count {
            font-size: 0.8rem;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.8);
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            display: inline-block;
        }

        .category-description {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }.toggle-switch {
            position: relative;
            width: 56px;
            height: 32px;
            background: rgba(107, 114, 128, 0.3);
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
        }

        .toggle-switch.active {
            background: linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%);
        }

        .toggle-switch.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .toggle-switch::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 26px;
            height: 26px;
            background: white;
            border-radius: 50%;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
        }

        .toggle-switch.active::before {
            transform: translateX(24px);
        }

        .toggle-switch:hover:not(.disabled) {
            transform: scale(1.05);
        }.expandable-section {
            margin-top: 0.75rem;
        }

        .expand-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: none;
            border: none;
            color: var(--primary-color);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition-fast);
            padding: 0.5rem;
            border-radius: var(--border-radius);
            width: 100%;
            justify-content: flex-start;
        }

        .expand-toggle:hover {
            background: rgba(99, 102, 241, 0.1);
        }

        .expand-icon {
            transition: transform 0.3s ease;
        }

        .expand-toggle.expanded .expand-icon {
            transform: rotate(180deg);
        }

        .expandable-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .expandable-content.expanded {
            max-height: 300px;
        }

        .cookie-details {
            padding: 1rem 0;
        }

        .cookie-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.5);
            border-radius: var(--border-radius);
            margin-bottom: 0.5rem;
            border: 1px solid var(--border-color);
            transition: var(--transition-fast);
        }

        .cookie-item:hover {
            background: rgba(255, 255, 255, 0.8);
        }

        .cookie-info {
            flex: 1;
        }

        .cookie-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .cookie-purpose {
            font-size: 0.8rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .cookie-toggle {
            width: 44px;
            height: 24px;
            background: rgba(107, 114, 128, 0.3);
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid var(--border-color);
        }

        .cookie-toggle.active {
            background: var(--primary-color);
        }

        .cookie-toggle::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            transition: var(--transition);
        }

        .cookie-toggle.active::before {
            transform: translateX(20px);
        }.banner-actions {
            padding: 2rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
            border-top: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .action-button {
            width: 100%;
            padding: 1rem;
            border: none;
            border-radius: var(--border-radius);
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
        }

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

        .action-button:hover::before {
            left: 100%;
        }

        .btn-accept {
            background: linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-accept:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-customize {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-customize:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-reject {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .btn-reject:hover {
            background: rgba(239, 68, 68, 0.2);
            transform: translateY(-2px);
        }.stats-panel {
            padding: 1.5rem 2rem;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
            border-bottom: 1px solid var(--border-color);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .stat-item {
            text-align: center;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 0.25rem;
        }

        .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }.loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: currentColor;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }.success-checkmark {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            stroke-width: 2;
            stroke: currentColor;
            stroke-miterlimit: 10;
            box-shadow: inset 0px 0px 0px currentColor;
            animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
        }

        .checkmark-circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: currentColor;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }

        .checkmark-check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }

        @keyframes stroke {
            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes scale {
            0%, 100% {
                transform: none;
            }
            50% {
                transform: scale3d(1.1, 1.1, 1);
            }
        }

        @keyframes fill {
            100% {
                box-shadow: inset 0px 0px 0px 30px currentColor;
            }
        }@media (max-width: 768px) {
            .sidebar-blur-cookie-banner {
                width: 100%;
                max-width: none;
                border-left: none;
                border-top: 1px solid var(--border-color);
            }

            .banner-header {
                padding: 1.5rem;
            }

            .cookie-section {
                padding: 1rem 1.5rem;
            }

            .banner-actions {
                padding: 1.5rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 1rem;
            }

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

            .banner-header {
                padding: 1rem;
            }

            .cookie-section {
                padding: 1rem;
            }

            .banner-actions {
                padding: 1rem;
            }
        }.slide-in-right {
            animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes fadeInUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }.glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .glass-effect-strong {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h1>Sidebar Blur Design</h1>
        <p>Experience the elegance of glassmorphism with sophisticated blur effects and smooth sidebar animations</p>
        <button class="demo-btn" onclick="showCookieBanner()">Show Cookie Banner</button>
    </div>

    
    <div id="blurOverlay" class="blur-overlay"></div>

    
    <div id="sidebarBlurCookieBanner" class="sidebar-blur-cookie-banner">
        <button class="close-button" onclick="closeBanner()" aria-label="Close banner">×</button>
        
        <div class="banner-header">
            <div class="banner-title">
                <div class="banner-icon">🍪</div>
                <div class="title-text">Cookie Preferences</div>
            </div>
            <div class="banner-description">
                We use cookies to enhance your browsing experience and provide personalized content. Choose your preferences below.
            </div>
        </div>

        <div class="stats-panel">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number">4</div>
                    <div class="stat-label">Categories</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">12</div>
                    <div class="stat-label">Cookie Types</div>
                </div>
            </div>
        </div>

        <div class="banner-content">
            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">🔒</div>
                    Essential Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Strictly Necessary <span class="category-count">Always Active</span></div>
                        </div>
                        <div class="toggle-switch active disabled"></div>
                    </div>
                    <div class="category-description">
                        These cookies are essential for the website to function and cannot be switched off.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="essential-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="essential-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Session Cookie</div>
                                        <div class="cookie-purpose">Maintains your session while browsing</div>
                                    </div>
                                    <div class="cookie-toggle active"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Security Token</div>
                                        <div class="cookie-purpose">Protects against cross-site request forgery</div>
                                    </div>
                                    <div class="cookie-toggle active"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">📊</div>
                    Analytics Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Performance Analytics <span class="category-count">3 cookies</span></div>
                        </div>
                        <div class="toggle-switch" data-category="analytics"></div>
                    </div>
                    <div class="category-description">
                        Help us understand how visitors interact with our website by collecting information anonymously.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="analytics-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="analytics-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Google Analytics</div>
                                        <div class="cookie-purpose">Tracks website usage and performance metrics</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="ga"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Hotjar</div>
                                        <div class="cookie-purpose">Records user interactions for UX improvements</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="hotjar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">🎯</div>
                    Marketing Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Advertising & Marketing <span class="category-count">5 cookies</span></div>
                        </div>
                        <div class="toggle-switch" data-category="marketing"></div>
                    </div>
                    <div class="category-description">
                        Used to deliver more relevant advertisements based on your browsing behavior.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="marketing-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="marketing-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Facebook Pixel</div>
                                        <div class="cookie-purpose">Tracks conversions and builds audiences</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="facebook"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Google Ads</div>
                                        <div class="cookie-purpose">Enables remarketing and ad personalization</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="google-ads"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">⚙️</div>
                    Functional Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Enhanced Functionality <span class="category-count">2 cookies</span></div>
                        </div>
                        <div class="toggle-switch" data-category="functional"></div>
                    </div>
                    <div class="category-description">
                        Enable enhanced functionality and personalization, such as videos and live chats.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="functional-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="functional-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Language Preference</div>
                                        <div class="cookie-purpose">Remembers your selected language</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="language"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Theme Preference</div>
                                        <div class="cookie-purpose">Saves your dark/light mode preference</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="theme"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="banner-actions">
            <button class="action-button btn-accept" onclick="acceptAllCookies()">Accept All Cookies</button>
            <button class="action-button btn-customize" onclick="saveCustomSettings()">Save My Preferences</button>
            <button class="action-button btn-reject" onclick="rejectOptionalCookies()">Reject Optional</button>
        </div>
    </div>

    <script>
        class SidebarBlurCookieBanner {
            constructor(options = {}) {
                this.options = {
                    autoShow: true,
                    showDelay: 1500,
                    storageKey: 'sidebar_blur_cookie_consent',
                    expirationDays: 365,
                    enableAnimations: true,
                    blurAmount: '20px',
                    onAccept: null,
                    onReject: null,
                    onSave: null,
                    onClose: null,
                    ...options
                };

                this.banner = document.getElementById('sidebarBlurCookieBanner');
                this.overlay = document.getElementById('blurOverlay');
                this.consent = this.getStoredConsent();
                this.isVisible = false;

                this.initialize();
            }

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

                this.setupEventListeners();
                this.loadSettings();
                this.setupBlurAmount();
            }

            setupEventListeners() {

                document.querySelectorAll('.toggle-switch:not(.disabled)').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        this.toggleSwitch(toggle);
                    });
                });

                document.querySelectorAll('.cookie-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        this.toggleCookieSwitch(toggle);
                    });
                });

                document.querySelectorAll('.expand-toggle').forEach(button => {
                    button.addEventListener('click', () => {
                        this.toggleExpandableSection(button);
                    });
                });

                document.addEventListener('keydown', (e) => {
                    if (this.isVisible) {
                        this.handleKeyboardNavigation(e);
                    }
                });

                this.overlay.addEventListener('click', () => {
                    this.close();
                });

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

            setupBlurAmount() {
                document.documentElement.style.setProperty('--blur-amount', this.options.blurAmount);
            }

            toggleSwitch(toggle) {
                if (toggle.classList.contains('disabled')) return;
                
                toggle.classList.toggle('active');
                
                if (this.options.enableAnimations) {
                    this.animateToggle(toggle);
                }

                const category = toggle.dataset.category;
                if (category) {
                    this.updateCategoryToggles(category, toggle.classList.contains('active'));
                }
            }

            toggleCookieSwitch(toggle) {
                toggle.classList.toggle('active');
                
                if (this.options.enableAnimations) {
                    this.animateToggle(toggle);
                }

                this.updateParentCategoryState();
            }

            updateCategoryToggles(category, enabled) {
                const cookieToggles = document.querySelectorAll(`[data-cookie*="${category}"]`);
                cookieToggles.forEach(toggle => {
                    if (enabled) {
                        toggle.classList.add('active');
                    } else {
                        toggle.classList.remove('active');
                    }
                });
            }

            updateParentCategoryState() {
                const categories = ['analytics', 'marketing', 'functional'];
                
                categories.forEach(category => {
                    const categoryToggle = document.querySelector(`[data-category="${category}"]`);
                    const cookieToggles = document.querySelectorAll(`[data-cookie*="${category}"]`);
                    
                    if (categoryToggle && cookieToggles.length > 0) {
                        const allEnabled = Array.from(cookieToggles).every(toggle => 
                            toggle.classList.contains('active'));
                        
                        if (allEnabled) {
                            categoryToggle.classList.add('active');
                        } else {
                            categoryToggle.classList.remove('active');
                        }
                    }
                });
            }

            toggleExpandableSection(button) {
                const targetId = button.dataset.target;
                const content = document.getElementById(targetId);
                
                if (content) {
                    const isExpanded = content.classList.contains('expanded');
                    
                    if (isExpanded) {
                        content.classList.remove('expanded');
                        button.classList.remove('expanded');
                    } else {
                        content.classList.add('expanded');
                        button.classList.add('expanded');
                        
                        if (this.options.enableAnimations) {
                            this.animateExpandableContent(content);
                        }
                    }
                }
            }

            animateExpandableContent(content) {
                const items = content.querySelectorAll('.cookie-item');
                items.forEach((item, index) => {
                    item.style.opacity = '0';
                    item.style.transform = 'translateY(10px)';
                    
                    setTimeout(() => {
                        item.style.transition = 'all 0.3s ease';
                        item.style.opacity = '1';
                        item.style.transform = 'translateY(0)';
                    }, index * 50);
                });
            }

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

                const color = toggle.classList.contains('active') ? 
                    'rgba(16, 185, 129, 0.3)' : 'rgba(107, 114, 128, 0.3)';
                toggle.style.boxShadow = `0 0 0 8px ${color}`;
                setTimeout(() => {
                    toggle.style.boxShadow = '';
                }, 300);
            }

            handleKeyboardNavigation(e) {
                switch (e.key) {
                    case 'Escape':
                        this.close();
                        break;
                    case 'Tab':

                        break;
                }
            }

            createRipple(button) {
                if (!this.options.enableAnimations) return;

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

            show() {
                this.banner.classList.add('show');
                this.overlay.classList.add('active');
                this.isVisible = true;
                
                if (this.options.enableAnimations) {
                    this.animateEntrance();
                }
            }

            hide() {
                this.banner.classList.remove('show');
                this.overlay.classList.remove('active');
                this.isVisible = false;
            }

            close() {
                this.hide();
                
                if (this.options.onClose) {
                    this.options.onClose();
                }
            }

            animateEntrance() {
                const sections = this.banner.querySelectorAll('.cookie-section');
                sections.forEach((section, index) => {
                    section.style.opacity = '0';
                    section.style.transform = 'translateX(30px)';
                    
                    setTimeout(() => {
                        section.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
                        section.style.opacity = '1';
                        section.style.transform = 'translateX(0)';
                    }, index * 100);
                });
            }

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

                this.saveConsent(consent);
                this.showSuccessAnimation();
                
                setTimeout(() => {
                    this.hide();
                }, 1500);

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

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

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

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

            saveCustomSettings() {
                const consent = { timestamp: Date.now() };

                consent.essential = true; // Always true
                consent.analytics = document.querySelector('[data-category="analytics"]')?.classList.contains('active') || false;
                consent.marketing = document.querySelector('[data-category="marketing"]')?.classList.contains('active') || false;
                consent.functional = document.querySelector('[data-category="functional"]')?.classList.contains('active') || false;

                const cookieStates = {};
                document.querySelectorAll('[data-cookie]').forEach(toggle => {
                    const cookie = toggle.dataset.cookie;
                    cookieStates[cookie] = toggle.classList.contains('active');
                });
                consent.cookies = cookieStates;

                this.saveConsent(consent);
                this.showSuccessAnimation();
                
                setTimeout(() => {
                    this.hide();
                }, 1500);

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

            showSuccessAnimation() {
                if (!this.options.enableAnimations) return;

                const customizeBtn = this.banner.querySelector('.btn-customize');
                if (customizeBtn) {
                    customizeBtn.innerHTML = `
                        <svg class="success-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                            <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
                            <path class="checkmark-check" fill="none" d="m14.1 27.2l7.1 7.2 16.7-16.8"/>
                        </svg>
                        Preferences Saved
                    `;
                    customizeBtn.style.background = 'linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%)';
                }
            }

            loadSettings() {
                if (this.consent) {

                    Object.entries(this.consent).forEach(([key, value]) => {
                        if (typeof value === 'boolean') {
                            const toggle = document.querySelector(`[data-category="${key}"]`);
                            if (toggle && !toggle.classList.contains('disabled')) {
                                if (value) {
                                    toggle.classList.add('active');
                                } else {
                                    toggle.classList.remove('active');
                                }
                            }
                        }
                    });

                    if (this.consent.cookies) {
                        Object.entries(this.consent.cookies).forEach(([cookie, enabled]) => {
                            const toggle = document.querySelector(`[data-cookie="${cookie}"]`);
                            if (toggle) {
                                if (enabled) {
                                    toggle.classList.add('active');
                                } else {
                                    toggle.classList.remove('active');
                                }
                            }
                        });
                    }
                }
            }

            saveConsent(consent) {
                const expirationDate = new Date();
                expirationDate.setDate(expirationDate.getDate() + this.options.expirationDays);
                
                const consentData = {
                    ...consent,
                    expiration: expirationDate.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.expiration && Date.now() < data.expiration) {
                            return data;
                        } else {
                            localStorage.removeItem(this.options.storageKey);
                        }
                    }
                } catch (e) {
                    console.error('Error reading cookie consent:', e);
                }
                return null;
            }

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

            getConsent() {
                return this.consent;
            }

            setBlurAmount(amount) {
                this.options.blurAmount = amount;
                this.setupBlurAmount();
            }

            enableAnimations(enabled) {
                this.options.enableAnimations = enabled;
            }

            updateTheme(theme) {
                const themes = {
                    light: {
                        '--background': '#ffffff',
                        '--surface': 'rgba(255, 255, 255, 0.9)',
                        '--text-primary': '#1f2937',
                        '--text-secondary': '#6b7280'
                    },
                    dark: {
                        '--background': '#1f2937',
                        '--surface': 'rgba(31, 41, 55, 0.9)',
                        '--text-primary': '#f9fafb',
                        '--text-secondary': '#d1d5db'
                    }
                };

                if (themes[theme]) {
                    Object.entries(themes[theme]).forEach(([property, value]) => {
                        document.documentElement.style.setProperty(property, value);
                    });
                }
            }
        }

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

        const cookieBanner = new SidebarBlurCookieBanner({
            blurAmount: '20px',
            enableAnimations: true,
            onAccept: (consent) => {
                console.log('Cookies accepted:', consent);

            },
            onReject: (consent) => {
                console.log('Optional cookies rejected:', consent);

            },
            onSave: (consent) => {
                console.log('Custom settings saved:', consent);

            },
            onClose: () => {
                console.log('Banner closed without action');
            }
        });

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

        function closeBanner() {
            cookieBanner.close();
        }

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

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

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

How to Use

Basic Installation


<link rel="stylesheet" href="path/to/sidebar-blur-cookie-banner.css">


<div id="blurOverlay" class="blur-overlay"></div>
<div id="sidebarBlurCookieBanner" class="sidebar-blur-cookie-banner">
    
</div>


<script src="path/to/sidebar-blur-cookie-banner.js"></script>

Initialization


const cookieBanner = new SidebarBlurCookieBanner();

const cookieBanner = new SidebarBlurCookieBanner({
    autoShow: true,
    showDelay: 2000,
    blurAmount: '25px',
    enableAnimations: true,
    onAccept: (consent) => {
        console.log('Consent accepted:', consent);

        initializeAnalytics();
        initializeMarketing();
    },
    onReject: (consent) => {
        console.log('Optional cookies rejected:', consent);

    },
    onSave: (consent) => {
        console.log('Settings saved:', consent);

        loadConsentBasedScripts(consent);
    }
});

Theme Customization


cookieBanner.updateTheme('dark');

cookieBanner.setBlurAmount('30px');

document.documentElement.style.setProperty('--primary-color', '#8b5cf6');
document.documentElement.style.setProperty('--surface', 'rgba(139, 92, 246, 0.1)');

API Methods

show()

Displays the cookie banner.

cookieBanner.show();

hide()

Hides the cookie banner.

cookieBanner.hide();

reset()

Resets consent and shows the banner again.

cookieBanner.reset();

getConsent()

Returns the current consent state.

const consent = cookieBanner.getConsent();
console.log(consent);

setBlurAmount(amount)

Changes the blur effect intensity.

cookieBanner.setBlurAmount('15px'); // Light blur
cookieBanner.setBlurAmount('30px'); // Heavy blur

enableAnimations(enabled)

Enables or disables animations.

cookieBanner.enableAnimations(false);

updateTheme(theme)

Updates the banner theme.

cookieBanner.updateTheme('dark'); // 'light', 'dark'

Customization Options

OptionTypeDefaultDescription
autoShowBooleantrueAutomatically show the banner
showDelayNumber1500Delay before showing (ms)
storageKeyString'sidebar_blur_cookie_consent'Local storage key
expirationDaysNumber365Days until consent expires
enableAnimationsBooleantrueEnable animations
blurAmountString'20px'Background blur intensity
onAcceptFunctionnullCallback when all cookies accepted
onRejectFunctionnullCallback when optional cookies rejected
onSaveFunctionnullCallback when custom settings saved
onCloseFunctionnullCallback when banner closed

Browser Support

  • Chrome 61+
  • Firefox 55+
  • Safari 11+
  • Edge 79+
  • iOS Safari 11+
  • Android Chrome 61+

Accessibility Features

  • Keyboard Navigation: Full keyboard support with Tab, Enter, and Escape keys
  • Screen Reader Support: ARIA labels and semantic HTML structure
  • Focus Management: Proper focus trapping within the banner
  • High Contrast: Supports high contrast mode and custom themes
  • Reduced Motion: Respects user’s motion preferences

GDPR Compliance

  • Granular Consent: Individual control over cookie categories
  • Clear Information: Detailed descriptions of each cookie type
  • Easy Withdrawal: Simple way to change or withdraw consent
  • Consent Records: Timestamped consent storage
  • Data Minimization: Only essential cookies enabled by default

Performance

  • Lightweight: ~15KB minified and gzipped
  • Fast Loading: Optimized CSS and JavaScript
  • Smooth Animations: Hardware-accelerated transitions
  • Memory Efficient: Proper cleanup and event management
  • Mobile Optimized: Touch-friendly interface

License

MIT License - feel free to use in personal and commercial projects.

This component provides a sophisticated sidebar-style cookie consent solution with modern glassmorphism design, comprehensive GDPR compliance, and excellent user experience across all devices.

HTML

1427

lines

JavaScript

24

lines 


                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Blur Cookie Banner</title>
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-hover: #4f46e5;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --success-hover: #059669;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --background: #ffffff;
            --surface: rgba(255, 255, 255, 0.9);
            --surface-hover: rgba(255, 255, 255, 0.95);
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-color: rgba(255, 255, 255, 0.2);
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            --border-radius: 12px;
            --border-radius-lg: 16px;
            --border-radius-xl: 20px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --blur-amount: 20px;
        }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--text-primary);
            line-height: 1.6;
            padding: 2rem;
            overflow-x: hidden;
            position: relative;
        }

        .demo-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            color: white;
            position: relative;
            z-index: 1;
        }

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

        .demo-container p {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .demo-btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: white;
            font-family: inherit;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .demo-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }.blur-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(var(--blur-amount));
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 9998;
        }

        .blur-overlay.active {
            opacity: 1;
            visibility: visible;
        }.sidebar-blur-cookie-banner {
            position: fixed;
            top: 0;
            right: 0;
            width: 420px;
            max-width: 90vw;
            height: 100vh;
            background: var(--surface);
            backdrop-filter: blur(var(--blur-amount));
            border-left: 1px solid var(--border-color);
            transform: translateX(100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-xl);
            overflow: hidden;
        }

        .sidebar-blur-cookie-banner.show {
            transform: translateX(0);
        }

        .banner-header {
            padding: 2rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
            border-bottom: 1px solid var(--border-color);
            position: relative;
        }

        .close-button {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 40px;
            height: 40px;
            border: none;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: var(--transition-fast);
            font-size: 1.5rem;
            border: 1px solid var(--border-color);
        }

        .close-button:hover {
            background: rgba(255, 255, 255, 1);
            color: var(--text-primary);
            transform: scale(1.1);
            box-shadow: var(--shadow-md);
        }

        .banner-title {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .banner-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            animation: float 3s ease-in-out infinite;
            box-shadow: var(--shadow-md);
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-5px);
            }
        }

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

        .banner-description {
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.6;
        }.banner-content {
            flex: 1;
            overflow-y: auto;
            padding: 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
        }

        .banner-content::-webkit-scrollbar {
            width: 6px;
        }

        .banner-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .banner-content::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.3);
            border-radius: 3px;
        }

        .banner-content::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.5);
        }.cookie-section {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid var(--border-color);
        }

        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .section-icon {
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
        }

        .cookie-category {
            margin-bottom: 1rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            transition: var(--transition-fast);
        }

        .cookie-category:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

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

        .category-info {
            flex: 1;
        }

        .category-title {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .category-count {
            font-size: 0.8rem;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.8);
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            display: inline-block;
        }

        .category-description {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }.toggle-switch {
            position: relative;
            width: 56px;
            height: 32px;
            background: rgba(107, 114, 128, 0.3);
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
        }

        .toggle-switch.active {
            background: linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%);
        }

        .toggle-switch.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .toggle-switch::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 26px;
            height: 26px;
            background: white;
            border-radius: 50%;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
        }

        .toggle-switch.active::before {
            transform: translateX(24px);
        }

        .toggle-switch:hover:not(.disabled) {
            transform: scale(1.05);
        }.expandable-section {
            margin-top: 0.75rem;
        }

        .expand-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: none;
            border: none;
            color: var(--primary-color);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition-fast);
            padding: 0.5rem;
            border-radius: var(--border-radius);
            width: 100%;
            justify-content: flex-start;
        }

        .expand-toggle:hover {
            background: rgba(99, 102, 241, 0.1);
        }

        .expand-icon {
            transition: transform 0.3s ease;
        }

        .expand-toggle.expanded .expand-icon {
            transform: rotate(180deg);
        }

        .expandable-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .expandable-content.expanded {
            max-height: 300px;
        }

        .cookie-details {
            padding: 1rem 0;
        }

        .cookie-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.5);
            border-radius: var(--border-radius);
            margin-bottom: 0.5rem;
            border: 1px solid var(--border-color);
            transition: var(--transition-fast);
        }

        .cookie-item:hover {
            background: rgba(255, 255, 255, 0.8);
        }

        .cookie-info {
            flex: 1;
        }

        .cookie-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .cookie-purpose {
            font-size: 0.8rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .cookie-toggle {
            width: 44px;
            height: 24px;
            background: rgba(107, 114, 128, 0.3);
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid var(--border-color);
        }

        .cookie-toggle.active {
            background: var(--primary-color);
        }

        .cookie-toggle::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            transition: var(--transition);
        }

        .cookie-toggle.active::before {
            transform: translateX(20px);
        }.banner-actions {
            padding: 2rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
            border-top: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .action-button {
            width: 100%;
            padding: 1rem;
            border: none;
            border-radius: var(--border-radius);
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
        }

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

        .action-button:hover::before {
            left: 100%;
        }

        .btn-accept {
            background: linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-accept:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-customize {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            box-shadow: var(--shadow-md);
        }

        .btn-customize:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-reject {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .btn-reject:hover {
            background: rgba(239, 68, 68, 0.2);
            transform: translateY(-2px);
        }.stats-panel {
            padding: 1.5rem 2rem;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
            border-bottom: 1px solid var(--border-color);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .stat-item {
            text-align: center;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 0.25rem;
        }

        .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }.loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: currentColor;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }.success-checkmark {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
            stroke-width: 2;
            stroke: currentColor;
            stroke-miterlimit: 10;
            box-shadow: inset 0px 0px 0px currentColor;
            animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
        }

        .checkmark-circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: currentColor;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }

        .checkmark-check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }

        @keyframes stroke {
            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes scale {
            0%, 100% {
                transform: none;
            }
            50% {
                transform: scale3d(1.1, 1.1, 1);
            }
        }

        @keyframes fill {
            100% {
                box-shadow: inset 0px 0px 0px 30px currentColor;
            }
        }@media (max-width: 768px) {
            .sidebar-blur-cookie-banner {
                width: 100%;
                max-width: none;
                border-left: none;
                border-top: 1px solid var(--border-color);
            }

            .banner-header {
                padding: 1.5rem;
            }

            .cookie-section {
                padding: 1rem 1.5rem;
            }

            .banner-actions {
                padding: 1.5rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 1rem;
            }

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

            .banner-header {
                padding: 1rem;
            }

            .cookie-section {
                padding: 1rem;
            }

            .banner-actions {
                padding: 1rem;
            }
        }.slide-in-right {
            animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes fadeInUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }.glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .glass-effect-strong {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h1>Sidebar Blur Design</h1>
        <p>Experience the elegance of glassmorphism with sophisticated blur effects and smooth sidebar animations</p>
        <button class="demo-btn" onclick="showCookieBanner()">Show Cookie Banner</button>
    </div>

    
    <div id="blurOverlay" class="blur-overlay"></div>

    
    <div id="sidebarBlurCookieBanner" class="sidebar-blur-cookie-banner">
        <button class="close-button" onclick="closeBanner()" aria-label="Close banner">×</button>
        
        <div class="banner-header">
            <div class="banner-title">
                <div class="banner-icon">🍪</div>
                <div class="title-text">Cookie Preferences</div>
            </div>
            <div class="banner-description">
                We use cookies to enhance your browsing experience and provide personalized content. Choose your preferences below.
            </div>
        </div>

        <div class="stats-panel">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-number">4</div>
                    <div class="stat-label">Categories</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">12</div>
                    <div class="stat-label">Cookie Types</div>
                </div>
            </div>
        </div>

        <div class="banner-content">
            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">🔒</div>
                    Essential Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Strictly Necessary <span class="category-count">Always Active</span></div>
                        </div>
                        <div class="toggle-switch active disabled"></div>
                    </div>
                    <div class="category-description">
                        These cookies are essential for the website to function and cannot be switched off.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="essential-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="essential-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Session Cookie</div>
                                        <div class="cookie-purpose">Maintains your session while browsing</div>
                                    </div>
                                    <div class="cookie-toggle active"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Security Token</div>
                                        <div class="cookie-purpose">Protects against cross-site request forgery</div>
                                    </div>
                                    <div class="cookie-toggle active"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">📊</div>
                    Analytics Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Performance Analytics <span class="category-count">3 cookies</span></div>
                        </div>
                        <div class="toggle-switch" data-category="analytics"></div>
                    </div>
                    <div class="category-description">
                        Help us understand how visitors interact with our website by collecting information anonymously.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="analytics-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="analytics-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Google Analytics</div>
                                        <div class="cookie-purpose">Tracks website usage and performance metrics</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="ga"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Hotjar</div>
                                        <div class="cookie-purpose">Records user interactions for UX improvements</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="hotjar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">🎯</div>
                    Marketing Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Advertising & Marketing <span class="category-count">5 cookies</span></div>
                        </div>
                        <div class="toggle-switch" data-category="marketing"></div>
                    </div>
                    <div class="category-description">
                        Used to deliver more relevant advertisements based on your browsing behavior.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="marketing-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="marketing-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Facebook Pixel</div>
                                        <div class="cookie-purpose">Tracks conversions and builds audiences</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="facebook"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Google Ads</div>
                                        <div class="cookie-purpose">Enables remarketing and ad personalization</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="google-ads"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cookie-section">
                <div class="section-title">
                    <div class="section-icon">⚙️</div>
                    Functional Cookies
                </div>
                
                <div class="cookie-category">
                    <div class="category-header">
                        <div class="category-info">
                            <div class="category-title">Enhanced Functionality <span class="category-count">2 cookies</span></div>
                        </div>
                        <div class="toggle-switch" data-category="functional"></div>
                    </div>
                    <div class="category-description">
                        Enable enhanced functionality and personalization, such as videos and live chats.
                    </div>
                    
                    <div class="expandable-section">
                        <button class="expand-toggle" data-target="functional-details">
                            <span>View Details</span>
                            <span class="expand-icon">▼</span>
                        </button>
                        <div id="functional-details" class="expandable-content">
                            <div class="cookie-details">
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Language Preference</div>
                                        <div class="cookie-purpose">Remembers your selected language</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="language"></div>
                                </div>
                                <div class="cookie-item">
                                    <div class="cookie-info">
                                        <div class="cookie-name">Theme Preference</div>
                                        <div class="cookie-purpose">Saves your dark/light mode preference</div>
                                    </div>
                                    <div class="cookie-toggle" data-cookie="theme"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="banner-actions">
            <button class="action-button btn-accept" onclick="acceptAllCookies()">Accept All Cookies</button>
            <button class="action-button btn-customize" onclick="saveCustomSettings()">Save My Preferences</button>
            <button class="action-button btn-reject" onclick="rejectOptionalCookies()">Reject Optional</button>
        </div>
    </div>

    <script>
        class SidebarBlurCookieBanner {
            constructor(options = {}) {
                this.options = {
                    autoShow: true,
                    showDelay: 1500,
                    storageKey: 'sidebar_blur_cookie_consent',
                    expirationDays: 365,
                    enableAnimations: true,
                    blurAmount: '20px',
                    onAccept: null,
                    onReject: null,
                    onSave: null,
                    onClose: null,
                    ...options
                };

                this.banner = document.getElementById('sidebarBlurCookieBanner');
                this.overlay = document.getElementById('blurOverlay');
                this.consent = this.getStoredConsent();
                this.isVisible = false;

                this.initialize();
            }

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

                this.setupEventListeners();
                this.loadSettings();
                this.setupBlurAmount();
            }

            setupEventListeners() {

                document.querySelectorAll('.toggle-switch:not(.disabled)').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        this.toggleSwitch(toggle);
                    });
                });

                document.querySelectorAll('.cookie-toggle').forEach(toggle => {
                    toggle.addEventListener('click', () => {
                        this.toggleCookieSwitch(toggle);
                    });
                });

                document.querySelectorAll('.expand-toggle').forEach(button => {
                    button.addEventListener('click', () => {
                        this.toggleExpandableSection(button);
                    });
                });

                document.addEventListener('keydown', (e) => {
                    if (this.isVisible) {
                        this.handleKeyboardNavigation(e);
                    }
                });

                this.overlay.addEventListener('click', () => {
                    this.close();
                });

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

            setupBlurAmount() {
                document.documentElement.style.setProperty('--blur-amount', this.options.blurAmount);
            }

            toggleSwitch(toggle) {
                if (toggle.classList.contains('disabled')) return;
                
                toggle.classList.toggle('active');
                
                if (this.options.enableAnimations) {
                    this.animateToggle(toggle);
                }

                const category = toggle.dataset.category;
                if (category) {
                    this.updateCategoryToggles(category, toggle.classList.contains('active'));
                }
            }

            toggleCookieSwitch(toggle) {
                toggle.classList.toggle('active');
                
                if (this.options.enableAnimations) {
                    this.animateToggle(toggle);
                }

                this.updateParentCategoryState();
            }

            updateCategoryToggles(category, enabled) {
                const cookieToggles = document.querySelectorAll(`[data-cookie*="\${category}"]`);
                cookieToggles.forEach(toggle => {
                    if (enabled) {
                        toggle.classList.add('active');
                    } else {
                        toggle.classList.remove('active');
                    }
                });
            }

            updateParentCategoryState() {
                const categories = ['analytics', 'marketing', 'functional'];
                
                categories.forEach(category => {
                    const categoryToggle = document.querySelector(`[data-category="\${category}"]`);
                    const cookieToggles = document.querySelectorAll(`[data-cookie*="\${category}"]`);
                    
                    if (categoryToggle && cookieToggles.length > 0) {
                        const allEnabled = Array.from(cookieToggles).every(toggle => 
                            toggle.classList.contains('active'));
                        
                        if (allEnabled) {
                            categoryToggle.classList.add('active');
                        } else {
                            categoryToggle.classList.remove('active');
                        }
                    }
                });
            }

            toggleExpandableSection(button) {
                const targetId = button.dataset.target;
                const content = document.getElementById(targetId);
                
                if (content) {
                    const isExpanded = content.classList.contains('expanded');
                    
                    if (isExpanded) {
                        content.classList.remove('expanded');
                        button.classList.remove('expanded');
                    } else {
                        content.classList.add('expanded');
                        button.classList.add('expanded');
                        
                        if (this.options.enableAnimations) {
                            this.animateExpandableContent(content);
                        }
                    }
                }
            }

            animateExpandableContent(content) {
                const items = content.querySelectorAll('.cookie-item');
                items.forEach((item, index) => {
                    item.style.opacity = '0';
                    item.style.transform = 'translateY(10px)';
                    
                    setTimeout(() => {
                        item.style.transition = 'all 0.3s ease';
                        item.style.opacity = '1';
                        item.style.transform = 'translateY(0)';
                    }, index * 50);
                });
            }

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

                const color = toggle.classList.contains('active') ? 
                    'rgba(16, 185, 129, 0.3)' : 'rgba(107, 114, 128, 0.3)';
                toggle.style.boxShadow = `0 0 0 8px \${color}`;
                setTimeout(() => {
                    toggle.style.boxShadow = '';
                }, 300);
            }

            handleKeyboardNavigation(e) {
                switch (e.key) {
                    case 'Escape':
                        this.close();
                        break;
                    case 'Tab':

                        break;
                }
            }

            createRipple(button) {
                if (!this.options.enableAnimations) return;

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

            show() {
                this.banner.classList.add('show');
                this.overlay.classList.add('active');
                this.isVisible = true;
                
                if (this.options.enableAnimations) {
                    this.animateEntrance();
                }
            }

            hide() {
                this.banner.classList.remove('show');
                this.overlay.classList.remove('active');
                this.isVisible = false;
            }

            close() {
                this.hide();
                
                if (this.options.onClose) {
                    this.options.onClose();
                }
            }

            animateEntrance() {
                const sections = this.banner.querySelectorAll('.cookie-section');
                sections.forEach((section, index) => {
                    section.style.opacity = '0';
                    section.style.transform = 'translateX(30px)';
                    
                    setTimeout(() => {
                        section.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
                        section.style.opacity = '1';
                        section.style.transform = 'translateX(0)';
                    }, index * 100);
                });
            }

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

                this.saveConsent(consent);
                this.showSuccessAnimation();
                
                setTimeout(() => {
                    this.hide();
                }, 1500);

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

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

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

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

            saveCustomSettings() {
                const consent = { timestamp: Date.now() };

                consent.essential = true; // Always true
                consent.analytics = document.querySelector('[data-category="analytics"]')?.classList.contains('active') || false;
                consent.marketing = document.querySelector('[data-category="marketing"]')?.classList.contains('active') || false;
                consent.functional = document.querySelector('[data-category="functional"]')?.classList.contains('active') || false;

                const cookieStates = {};
                document.querySelectorAll('[data-cookie]').forEach(toggle => {
                    const cookie = toggle.dataset.cookie;
                    cookieStates[cookie] = toggle.classList.contains('active');
                });
                consent.cookies = cookieStates;

                this.saveConsent(consent);
                this.showSuccessAnimation();
                
                setTimeout(() => {
                    this.hide();
                }, 1500);

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

            showSuccessAnimation() {
                if (!this.options.enableAnimations) return;

                const customizeBtn = this.banner.querySelector('.btn-customize');
                if (customizeBtn) {
                    customizeBtn.innerHTML = `
                        <svg class="success-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                            <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
                            <path class="checkmark-check" fill="none" d="m14.1 27.2l7.1 7.2 16.7-16.8"/>
                        </svg>
                        Preferences Saved
                    `;
                    customizeBtn.style.background = 'linear-gradient(135deg, var(--success-color) 0%, #06d6a0 100%)';
                }
            }

            loadSettings() {
                if (this.consent) {

                    Object.entries(this.consent).forEach(([key, value]) => {
                        if (typeof value === 'boolean') {
                            const toggle = document.querySelector(`[data-category="\${key}"]`);
                            if (toggle && !toggle.classList.contains('disabled')) {
                                if (value) {
                                    toggle.classList.add('active');
                                } else {
                                    toggle.classList.remove('active');
                                }
                            }
                        }
                    });

                    if (this.consent.cookies) {
                        Object.entries(this.consent.cookies).forEach(([cookie, enabled]) => {
                            const toggle = document.querySelector(`[data-cookie="\${cookie}"]`);
                            if (toggle) {
                                if (enabled) {
                                    toggle.classList.add('active');
                                } else {
                                    toggle.classList.remove('active');
                                }
                            }
                        });
                    }
                }
            }

            saveConsent(consent) {
                const expirationDate = new Date();
                expirationDate.setDate(expirationDate.getDate() + this.options.expirationDays);
                
                const consentData = {
                    ...consent,
                    expiration: expirationDate.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.expiration && Date.now() < data.expiration) {
                            return data;
                        } else {
                            localStorage.removeItem(this.options.storageKey);
                        }
                    }
                } catch (e) {
                    console.error('Error reading cookie consent:', e);
                }
                return null;
            }

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

            getConsent() {
                return this.consent;
            }

            setBlurAmount(amount) {
                this.options.blurAmount = amount;
                this.setupBlurAmount();
            }

            enableAnimations(enabled) {
                this.options.enableAnimations = enabled;
            }

            updateTheme(theme) {
                const themes = {
                    light: {
                        '--background': '#ffffff',
                        '--surface': 'rgba(255, 255, 255, 0.9)',
                        '--text-primary': '#1f2937',
                        '--text-secondary': '#6b7280'
                    },
                    dark: {
                        '--background': '#1f2937',
                        '--surface': 'rgba(31, 41, 55, 0.9)',
                        '--text-primary': '#f9fafb',
                        '--text-secondary': '#d1d5db'
                    }
                };

                if (themes[theme]) {
                    Object.entries(themes[theme]).forEach(([property, value]) => {
                        document.documentElement.style.setProperty(property, value);
                    });
                }
            }
        }

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

        const cookieBanner = new SidebarBlurCookieBanner({
            blurAmount: '20px',
            enableAnimations: true,
            onAccept: (consent) => {
                console.log('Cookies accepted:', consent);

            },
            onReject: (consent) => {
                console.log('Optional cookies rejected:', consent);

            },
            onSave: (consent) => {
                console.log('Custom settings saved:', consent);

            },
            onClose: () => {
                console.log('Banner closed without action');
            }
        });

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

        function closeBanner() {
            cookieBanner.close();
        }

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

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

        function saveCustomSettings() {
            cookieBanner.saveCustomSettings();
        }
    </script>
</body>
</html>
1427lines
49912characters
HTMLLanguage

Related Code Snippets

Explore template packs

Need larger building blocks? Browse responsive landing pages and component bundles.

Open HTML Template Library ->