cookie consent javascript examples

<div class="demo-content">
        <h1>Cookie Consent Demo</h1>
        <p>This is a demonstration of a professional cookie consent banner. Scroll down or wait a moment to see the banner appear.</p>
    </div>

    <div class="cookie-status" id="cookieStatus"></div>

    <div class="cookie-consent" id="cookieConsent">
        <div class="cookie-container">
            <div class="cookie-text">
                <h3>🍪 We value your privacy</h3>
                <p>We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies. <a href="#privacy">Learn more</a></p>
            </div>
            <div class="cookie-buttons">
                <button class="btn btn-accept" id="acceptBtn">Accept All</button>
                <button class="btn btn-settings" id="settingsBtn">Preferences</button>
                <button class="btn btn-decline" id="declineBtn">Decline</button>
            </div>
        </div>
    </div>

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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .demo-content {
            text-align: center;
            color: #fff;
            max-width: 600px;
        }

        .demo-content h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #8B008B, #DA70D6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .demo-content p {
            color: #ccc;
            line-height: 1.6;
        }

        .cookie-consent {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #8B008B 0%, #6B006B 100%);
            padding: 24px;
            box-shadow: 0 -4px 20px rgba(139, 0, 139, 0.3);
            transform: translateY(100%);
            transition: transform 0.4s ease-in-out;
            z-index: 1000;
        }

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

        .cookie-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
        }

        .cookie-text {
            flex: 1;
            min-width: 280px;
        }

        .cookie-text h3 {
            color: #fff;
            font-size: 1.25rem;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .cookie-text p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .cookie-text a {
            color: #DA70D6;
            text-decoration: underline;
        }

        .cookie-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 28px;
            border: none;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .btn-accept {
            background: #fff;
            color: #8B008B;
        }

        .btn-accept:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
        }

        .btn-decline {
            background: transparent;
            color: #fff;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }

        .btn-decline:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: #fff;
        }

        .btn-settings {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .btn-settings:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .cookie-status {
            position: fixed;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #8B008B, #6B006B);
            color: #fff;
            padding: 12px 20px;
            border-radius: 6px;
            font-size: 0.9rem;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
            z-index: 999;
        }

        .cookie-status.show {
            opacity: 1;
            transform: translateY(0);
        }

        @media (max-width: 768px) {
            .cookie-container {
                flex-direction: column;
                align-items: stretch;
            }

            .cookie-buttons {
                justify-content: stretch;
            }

            .btn {
                flex: 1;
            }
        }

       const cookieConsent = document.getElementById('cookieConsent');
        const cookieStatus = document.getElementById('cookieStatus');
        const acceptBtn = document.getElementById('acceptBtn');
        const declineBtn = document.getElementById('declineBtn');
        const settingsBtn = document.getElementById('settingsBtn');

        // Check if user has already made a choice
        function checkCookieConsent() {
            const consent = getCookie('cookieConsent');
            if (!consent) {
                // Show banner after a short delay
                setTimeout(() => {
                    cookieConsent.classList.add('show');
                }, 1000);
            } else {
                showStatus(`Cookie preference: ${consent}`);
            }
        }

        // Set cookie
        function setCookie(name, value, days) {
            const d = new Date();
            d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
            const expires = "expires=" + d.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }

        // Get cookie
        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        // Show status message
        function showStatus(message) {
            cookieStatus.textContent = message;
            cookieStatus.classList.add('show');
            setTimeout(() => {
                cookieStatus.classList.remove('show');
            }, 3000);
        }

        // Hide banner
        function hideBanner() {
            cookieConsent.classList.remove('show');
        }

        // Accept cookies
        acceptBtn.addEventListener('click', () => {
            setCookie('cookieConsent', 'accepted', 365);
            hideBanner();
            showStatus('✓ Cookies accepted');
            // Here you would typically enable analytics, tracking, etc.
            console.log('User accepted cookies - Enable all tracking');
        });

        // Decline cookies
        declineBtn.addEventListener('click', () => {
            setCookie('cookieConsent', 'declined', 365);
            hideBanner();
            showStatus('✓ Cookies declined');
            // Here you would typically disable non-essential cookies
            console.log('User declined cookies - Disable non-essential tracking');
        });

        // Settings button (demonstrate preferences)
        settingsBtn.addEventListener('click', () => {
            alert('This would open a detailed preferences panel where users can select specific cookie categories (necessary, analytics, marketing, etc.)');
        });

        // Initialize on page load
        checkCookieConsent();