learningboard/cookie-consent.js at main · creatorkithub/learningboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
(function () {
    // Check if consent has already been given or declined
    if (localStorage.getItem('privacyConsentStatus')) {
        return;
    }

    // Include the Outfit font dynamically for the banner if not already present
    // Assuming 'Outfit' is mostly loaded, but we'll use a fallback sans-serif stack as well.

    // Create the CSS styles for the banner
    const style = document.createElement('style');
    style.innerHTML = `
        #cookie-consent-banner {
            position: fixed;
            bottom: 25px;
            left: 20px;
            right: 20px;
            max-width: 600px;
            margin: 0 auto;
            background: rgba(11, 17, 32, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            z-index: 2147483647 !important;
            display: flex;
            flex-direction: column;
            gap: 16px;
            font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            color: #e2e8f0;
            transform: translateY(150%);
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

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

        #cookie-consent-banner p {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.5;
            color: #cbd5e1;
        }

        #cookie-consent-banner a {
            color: #34d399;
            text-decoration: underline;
        }

        #cookie-consent-banner a:hover {
            color: #10b981;
        }

        .cookie-btn-group {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .cookie-btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
        }

        .cookie-btn-accept {
            background: linear-gradient(135deg, #34d399 0%, #3b82f6 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
        }

        .cookie-btn-accept:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4);
        }

        .cookie-btn-decline {
            background: rgba(255, 255, 255, 0.05);
            color: #94a3b8;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

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

        @media (max-width: 500px) {
            #cookie-consent-banner {
                bottom: 15px;
                left: 15px;
                right: 15px;
                padding: 20px;
            }
            .cookie-btn-group {
                flex-direction: column;
            }
            .cookie-btn {
                width: 100%;
                text-align: center;
            }
        }
    `;
    document.head.appendChild(style);

    // Create the banner container
    const banner = document.createElement('div');
    banner.id = 'cookie-consent-banner';
    banner.innerHTML = `
        <p>We use cookies to analyze web traffic, improve your experience, and serve targeted advertisements. By clicking "Accept", you agree to our <a href="/privacy/">Privacy Policy</a> and <a href="/terms/">Terms of Service</a>.</p>
        <div class="cookie-btn-group">
            <button class="cookie-btn cookie-btn-decline" id="cookie-btn-decline">Decline</button>
            <button class="cookie-btn cookie-btn-accept" id="cookie-btn-accept">Accept</button>
        </div>
    `;
    document.body.appendChild(banner);

    // Animate banner in
    setTimeout(() => {
        banner.classList.add('show');
    }, 500);

    // Handle Decline
    document.getElementById('cookie-btn-decline').addEventListener('click', () => {
        localStorage.setItem('privacyConsentStatus', 'declined');
        banner.classList.remove('show');
        setTimeout(() => banner.remove(), 600);
    });

    // Handle Accept
    document.getElementById('cookie-btn-accept').addEventListener('click', () => {
        localStorage.setItem('privacyConsentStatus', 'accepted');
        banner.classList.remove('show');
        setTimeout(() => banner.remove(), 600);
    });
})();