Add a Cookie Banner to the antora pages (only pop up when the cookie terms are not accepted)

Question to ChatGPT

can you generate a cookie banner that blocks a list of urls which load javascript files. the banner should contain some info text. it should contain a button that allows the usage of cookies and loads the javascripts after the user accepts it. it should contain a button that denies loading javascripts and writing cookies. if the user accepts writing cookies, the users choice should be saved for 1 month.

Answer from Chat GPT

Certainly! Below is an example of a cookie banner that meets your requirements. Please note that you will need to implement the functionality to save user preferences and handle the loading of JavaScript files accordingly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Banner</title>
    <script src="cookie.js"></script> <!-- Include your JavaScript file to handle cookie preferences here -->
    <style>
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }

        .cookie-banner-buttons {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- Your website content goes here -->

    <div class="cookie-banner" id="cookieBanner">
        <p>This website uses cookies to enhance user experience.</p>
        <div class="cookie-banner-buttons">
            <button onclick="acceptCookies()">Accept Cookies</button>
            <button onclick="denyCookies()">Deny Cookies</button>
        </div>
    </div>

    <script>
        function acceptCookies() {
            // Set a cookie to remember user's choice for 1 month (in seconds)
            setCookie('cookieAccepted', 'true', 30 * 24 * 60 * 60);
            // Load JavaScript files and execute necessary scripts here
            // ...
            // Hide the cookie banner
            document.getElementById('cookieBanner').style.display = 'none';
        }

        function denyCookies() {
            // Remove any existing cookies
            deleteCookie('cookieAccepted');
            // Handle denying cookies (e.g., disable certain features)
            // ...
            // Hide the cookie banner
            document.getElementById('cookieBanner').style.display = 'none';
        }

        // Function to set a cookie with a specified name, value, and expiration time
        function setCookie(name, value, seconds) {
            var expires = '';
            if (seconds) {
                var date = new Date();
                date.setTime(date.getTime() + (seconds * 1000));
                expires = '; expires=' + date.toUTCString();
            }
            document.cookie = name + '=' + (value || '') + expires + '; path=/';
        }

        // Function to delete a cookie by setting its expiration time to the past
        function deleteCookie(name) {
            document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
        }
    </script>
</body>
</html>

In this example, the acceptCookies() function sets a cookie named cookieAccepted with a value of true and an expiration time of 1 month. The denyCookies() function removes the cookieAccepted cookie. You need to implement the logic to load JavaScript files and execute necessary scripts based on the user's choice to accept cookies. The cookie.js file is a placeholder where you can put your logic to handle cookies.

Please make sure to customize and test this code thoroughly to ensure it meets your specific requirements and integrates correctly with your website.

sommerfeld-io / website

Add a Cookie Banner to the antora pages (only pop up when the cookie terms are not accepted) #17

Question to ChatGPT

Answer from Chat GPT