Add cookie consent banner for Google Analytics

blog/layouts/partials/footer/custom.html

@@ -0,0 +1,223 @@
+{{- /* Cookie Consent Banner for Google Analytics */ -}}
+<div id="cookie-consent-banner" class="cookie-consent-banner" style="display: none;">
+    <div class="cookie-consent-content">
+        <p class="cookie-consent-text">
+            This website uses Google Analytics cookies to analyze traffic and improve your experience. 
+            <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener noreferrer">Learn more</a>
+        </p>
+        <div class="cookie-consent-buttons">
+            <button id="cookie-accept" class="cookie-btn cookie-accept">Accept</button>
+            <button id="cookie-decline" class="cookie-btn cookie-decline">Decline</button>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Cookie Consent Logic
+    (function() {
+        'use strict';
+
+        const CONSENT_COOKIE_NAME = 'cookie-consent';
+        const CONSENT_EXPIRY_DAYS = 365;
+
+        // Check if consent has been given
+        function getConsentStatus() {
+            const consent = localStorage.getItem(CONSENT_COOKIE_NAME);
+            return consent;
+        }
+
+        // Set consent status
+        function setConsentStatus(status) {
+            localStorage.setItem(CONSENT_COOKIE_NAME, status);
+            const expiryDate = new Date();
+            expiryDate.setDate(expiryDate.getDate() + CONSENT_EXPIRY_DAYS);
+            localStorage.setItem(CONSENT_COOKIE_NAME + '-expiry', expiryDate.toISOString());
+        }
+
+        // Check if consent has expired
+        function isConsentExpired() {
+            const expiry = localStorage.getItem(CONSENT_COOKIE_NAME + '-expiry');
+            if (!expiry) return true;
+            return new Date() > new Date(expiry);
+        }
+
+        // Show banner
+        function showBanner() {
+            const banner = document.getElementById('cookie-consent-banner');
+            if (banner) {
+                banner.style.display = 'block';
+                // Add animation
+                setTimeout(function() {
+                    banner.classList.add('show');
+                }, 100);
+            }
+        }
+
+        // Hide banner
+        function hideBanner() {
+            const banner = document.getElementById('cookie-consent-banner');
+            if (banner) {
+                banner.classList.remove('show');
+                setTimeout(function() {
+                    banner.style.display = 'none';
+                }, 300);
+            }
+        }
+
+        // Handle accept
+        function acceptCookies() {
+            setConsentStatus('accepted');
+            hideBanner();
+            // Enable Google Analytics if needed
+            if (window.gtag) {
+                gtag('consent', 'update', {
+                    'analytics_storage': 'granted'
+                });
+            }
+        }
+
+        // Handle decline
+        function declineCookies() {
+            setConsentStatus('declined');
+            hideBanner();
+            // Disable Google Analytics
+            if (window.gtag) {
+                gtag('consent', 'update', {
+                    'analytics_storage': 'denied'
+                });
+            }
+        }
+
+        // Initialize on DOM ready
+        function init() {
+            const consent = getConsentStatus();
+
+            // Show banner if no consent or consent expired
+            if (!consent || isConsentExpired()) {
+                showBanner();
+            } else if (consent === 'accepted') {
+                // Analytics already enabled by Hugo's built-in integration
+                if (window.gtag) {
+                    gtag('consent', 'update', {
+                        'analytics_storage': 'granted'
+                    });
+                }
+            } else if (consent === 'declined') {
+                // Disable analytics
+                if (window.gtag) {
+                    gtag('consent', 'update', {
+                        'analytics_storage': 'denied'
+                    });
+                }
+            }
+
+            // Add event listeners
+            const acceptBtn = document.getElementById('cookie-accept');
+            const declineBtn = document.getElementById('cookie-decline');
+
+            if (acceptBtn) {
+                acceptBtn.addEventListener('click', acceptCookies);
+            }
+
+            if (declineBtn) {
+                declineBtn.addEventListener('click', declineCookies);
+            }
+        }
+
+        // Wait for DOM to be ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', init);
+        } else {
+            init();
+        }
+    })();
+</script>
+
+<style>
+    .cookie-consent-banner {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: var(--card-background);
+        border-top: 1px solid var(--card-separator-color);
+        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+        padding: 1rem;
+        z-index: 9999;
+        transform: translateY(100%);
+        transition: transform 0.3s ease-in-out;
+    }
+
+    .cookie-consent-banner.show {
+        transform: translateY(0);
+    }
+
+    .cookie-consent-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        flex-wrap: wrap;
+    }
+
+    .cookie-consent-text {
+        margin: 0;
+        flex: 1;
+        min-width: 250px;
+        font-size: 0.9rem;
+        color: var(--card-text-color-main);
+    }
+
+    .cookie-consent-text a {
+        color: var(--accent-color);
+        text-decoration: underline;
+    }
+
+    .cookie-consent-buttons {
+        display: flex;
+        gap: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    .cookie-btn {
+        padding: 0.5rem 1.25rem;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.9rem;
+        font-weight: 500;
+        transition: opacity 0.2s ease;
+    }
+
+    .cookie-btn:hover {
+        opacity: 0.8;
+    }
+
+    .cookie-accept {
+        background: var(--accent-color);
+        color: white;
+    }
+
+    .cookie-decline {
+        background: var(--card-separator-color);
+        color: var(--card-text-color-main);
+    }
+
+    @media (max-width: 768px) {
+        .cookie-consent-content {
+            flex-direction: column;
+            align-items: stretch;
+            text-align: center;
+        }
+
+        .cookie-consent-buttons {
+            justify-content: center;
+        }
+
+        .cookie-btn {
+            flex: 1;
+        }
+    }
+</style>