Cookie banner (#3302)

# Description of Changes

Please provide a summary of the changes, including:
- Added cookie banner using [Cookie
consent](https://github.com/orestbida/cookieconsent)#
- Posthog now is disabled using posthogs consent API by default
- Posthog will have consent enabled based on events "cc:onConsent" and
"cc:onChange" from cookieConsent.

Closes #(3298)

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

src/main/resources/messages_en_GB.properties

@@ -90,6 +90,7 @@ legal.terms=Terms and Conditions
 legal.accessibility=Accessibility
 legal.cookie=Cookie Policy
 legal.impressum=Impressum
+legal.showCookieBanner=Cookie Preferences
 
 ###############
 #   Pipeline  #
@@ -135,6 +136,7 @@ analytics.enable=Enable analytics
 analytics.disable=Disable analytics
 analytics.settings=You can change the settings for analytics in the config/settings.yml file
 
+
 #############
 #  NAVBAR   #
 #############
@@ -1399,3 +1401,25 @@ validateSignature.cert.version=Version
 validateSignature.cert.keyUsage=Key Usage
 validateSignature.cert.selfSigned=Self-Signed
 validateSignature.cert.bits=bits
+
+####################
+#  Cookie banner   #
+####################
+cookieBanner.popUp.title=How we use Cookies
+cookieBanner.popUp.description=We use cookies and other technologies to make Stirling PDF work better for you—helping us improve our tools and keep building features you'll love. <br>If you’d rather not, clicking 'No Thanks' will only enable the essential cookies needed to keep things running smoothly.
+cookieBanner.popUp.acceptAllBtn=Okay
+cookieBanner.popUp.acceptNecessaryBtn=No Thanks
+cookieBanner.popUp.showPreferencesBtn=Manage preferences
+cookieBanner.preferencesModal.title=Consent Preferences Center
+cookieBanner.preferencesModal.acceptAllBtn=Accept all
+cookieBanner.preferencesModal.acceptNecessaryBtn=Reject all
+cookieBanner.preferencesModal.savePreferencesBtn=Save preferences
+cookieBanner.preferencesModal.closeIconLabel=Close modal
+cookieBanner.preferencesModal.serviceCounterLabel=Service|Services
+cookieBanner.preferencesModal.subtitle=Cookie Usage
+cookieBanner.preferencesModal.description=Stirling PDF uses cookies and similar technologies to enhance your experience and understand how our tools are used. This helps us improve performance, develop the features you care about, and provide ongoing support to our users. <br><br>Stirling PDF cannot—and will never—track or access the content of the documents you use. <b>Your privacy and trust are at the core of what we do<b>.
+cookieBanner.preferencesModal.necessary.title=Strictly Necessary Cookies <span class=\"pm__badge\">Always Enabled</span>
+cookieBanner.preferencesModal.necessary.description=These cookies are essential for the website to function properly. They enable core features like setting your privacy preferences, logging in, and filling out forms—which is why they can’t be turned off. 
+cookieBanner.preferencesModal.analytics.title=Analytics
+cookieBanner.preferencesModal.analytics.description=These cookies help us understand how our tools are being used, so we can focus on building the features our community values most. Rest assured—Stirling PDF cannot and will never track the content of the documents you work with.
+

src/main/resources/static/css/cookieconsentCustomisation.css

@@ -0,0 +1,79 @@
+.cc--darkmode{
+    --cc-bg: var(--md-sys-color-inverse-on-surface);
+    --cc-primary-color: var(--md-sys-color-on-surface);
+    --cc-secondary-color: var(--md-sys-color-on-surface);
+
+    --cc-btn-primary-bg: var(--md-sys-color-secondary);
+    --cc-btn-primary-color: var(--cc-bg);
+    --cc-btn-primary-border-color: var(--cc-btn-primary-bg);
+    --cc-btn-primary-hover-bg: var(--md-sys-color-surface-3);
+    --cc-btn-primary-hover-color: var(--md-sys-color-on-secondary-container);
+    --cc-btn-primary-hover-border-color: var(--md-sys-color-surface-3);
+
+    --cc-btn-secondary-bg: var(--md-sys-color-surface-3);
+    --cc-btn-secondary-color: var(--md-sys-color-on-secondary-container);
+    --cc-btn-secondary-border-color: var(--md-sys-color-surface-3);
+    --cc-btn-secondary-hover-bg:var(--md-sys-color-secondary);
+    --cc-btn-secondary-hover-color: var(--cc-bg);
+    --cc-btn-secondary-hover-border-color: var(--md-sys-color-secondary);
+
+    --cc-separator-border-color: var(--md-sys-color-outline);
+
+    --cc-toggle-on-bg: var(--cc-btn-primary-bg);
+    --cc-toggle-off-bg: var(--md-sys-color-outline);
+    --cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
+    --cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
+
+    --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);   
+    --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);  
+
+    --cc-toggle-readonly-bg: var(--md-sys-color-surface);
+    --cc-toggle-readonly-knob-bg: var(--md-sys-color-outline);
+    --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
+
+    --cc-section-category-border: var(--md-sys-color-outline);
+
+    --cc-cookie-category-block-bg: var(--cc-btn-secondary-bg);
+    --cc-cookie-category-block-border: var(--cc-btn-secondary-bg); 
+    --cc-cookie-category-block-hover-bg: var(--cc-btn-secondary-bg);
+    --cc-cookie-category-block-hover-border: var(--cc-btn-secondary-bg);
+    
+    --cc-cookie-category-expanded-block-bg: var(--cc-btn-secondary-bg);
+    --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
+
+  /*  --cc-overlay-bg: rgba(0, 0, 0, 0.65);
+    --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
+    --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
+*/
+    --cc-footer-bg: var(--cc-bg);
+    --cc-footer-color: var(--cc-primary-color);
+    --cc-footer-border-color: var(--cc-bg); 
+}
+.cm__body{
+    max-width: 90% !important;
+    flex-direction: row !important;
+    align-items: center !important;
+
+}
+
+.cm__desc{
+    max-width: 70rem !important;
+}
+
+.cm__btns{
+    flex-direction: row-reverse !important;
+    gap:10px !important;
+    padding-top: 3.4rem !important;
+}
+
+@media only screen and (max-width: 1400px) {
+    .cm__body{
+        max-width: 90% !important;
+        flex-direction: column !important;
+        align-items: normal !important;
+    }
+
+    .cm__btns{
+        padding-top: 1rem !important;
+    }
+}

src/main/resources/static/css/footer.css

@@ -35,4 +35,5 @@
 
 .footer-link {
   text-decoration: none;
+  cursor: pointer;
 }

src/main/resources/static/js/thirdParty/cookieconsent-config.js

@@ -0,0 +1,66 @@
+import './cookieconsent.umd.js';
+import 'https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.umd.js';
+
+// Enable dark mode
+document.documentElement.classList.add('cc--darkmode');
+
+CookieConsent.run({
+    guiOptions: {
+        consentModal: {
+            layout: "bar",
+            position: "bottom",
+            equalWeightButtons: true,
+            flipButtons: true
+        },
+        preferencesModal: {
+            layout: "box",
+            position: "right",
+            equalWeightButtons: true,
+            flipButtons: true
+        }
+    },
+    categories: {
+        necessary: {
+            readOnly: true
+        },
+        analytics: {}
+    },
+    language: {
+        default: "en",
+        translations: {
+            en: {
+                consentModal: {
+                    title: cookieBannerPopUpTitle,
+                    description: cookieBannerPopUpDescription,
+                    acceptAllBtn: cookieBannerPopUpAcceptAllBtn,
+                    acceptNecessaryBtn: cookieBannerPopUpAcceptNecessaryBtn,
+                    showPreferencesBtn: cookieBannerPopUpShowPreferencesBtn,
+                },
+                preferencesModal: {
+                    title: cookieBannerPreferencesModalTitle,
+                    acceptAllBtn: cookieBannerPreferencesModalAcceptAllBtn,
+                    acceptNecessaryBtn: cookieBannerPreferencesModalAcceptNecessaryBtn,
+                    savePreferencesBtn: cookieBannerPreferencesModalSavePreferencesBtn,
+                    closeIconLabel: cookieBannerPreferencesModalCloseIconLabel,
+                    serviceCounterLabel: cookieBannerPreferencesModalServiceCounterLabel,
+                    sections: [
+                        {
+                            title: cookieBannerPreferencesModalSubtitle,
+                            description: cookieBannerPreferencesModalDescription
+                        },
+                        {
+                            title:cookieBannerPreferencesModalNecessaryTitle,
+                            description: cookieBannerPreferencesModalNecessaryDescription,
+                            linkedCategory: "necessary"
+                        },
+                        {
+                            title: cookieBannerPreferencesModalAnalyticsTitle,
+                            description: cookieBannerPreferencesModalAnalyticsDescription,
+                            linkedCategory: "analytics"
+                        }
+                    ]
+                }
+            }
+        }
+    }
+});

src/main/resources/templates/fragments/common.html

@@ -66,7 +66,8 @@
   <link rel="stylesheet" th:href="@{'/css/footer.css'}">
 
   <link rel="preload" th:href="@{'/fonts/google-symbol.woff2'}" as="font" type="font/woff2" crossorigin="anonymous">
-
+  <link rel="stylesheet" th:href="@{'/css/cookieconsent.css'}">
+  <link rel="stylesheet" th:href="@{'/css/cookieconsentCustomisation.css'}">
   <script th:src="@{'/js/thirdParty/fontfaceobserver.standalone.js'}"></script>
 
   <!-- Google MD Icons -->
@@ -80,9 +81,33 @@
   <script th:src="@{'/js/darkmode.js'}"></script>
   <script th:src="@{'/js/csrf.js'}"></script>
   <script th:inline="javascript">
+
+    function UpdatePosthogConsent(){
+      window.CookieConsent.acceptedCategory('analytics')?
+        posthog.opt_in_capturing() : posthog.opt_out_capturing();
+      console.log("Posthog: Opted " + (posthog.has_opted_out_capturing()? "out" : "in"));
+    }
     const stirlingPDFLabel = /*[[${@StirlingPDFLabel}]]*/ '';
     const analyticsEnabled = /*[[${@analyticsEnabled}]]*/ false;
 
+    const cookieBannerPopUpTitle = /*[[#{cookieBanner.popUp.title}]]*/ "How we use Cookies";
+    const cookieBannerPopUpDescription = /*[[#{cookieBanner.popUp.description}]]*/ "";
+    const cookieBannerPopUpAcceptAllBtn = /*[[#{cookieBanner.popUp.acceptAllBtn}]]*/ "";
+    const cookieBannerPopUpAcceptNecessaryBtn = /*[[#{cookieBanner.popUp.acceptNecessaryBtn}]]*/ "";
+    const cookieBannerPopUpShowPreferencesBtn = /*[[#{cookieBanner.popUp.showPreferencesBtn}]]*/ "";
+    const cookieBannerPreferencesModalTitle = /*[[#{cookieBanner.preferencesModal.title}]]*/ "";
+    const cookieBannerPreferencesModalAcceptAllBtn = /*[[#{cookieBanner.preferencesModal.acceptAllBtn}]]*/ "";
+    const cookieBannerPreferencesModalAcceptNecessaryBtn = /*[[#{cookieBanner.preferencesModal.acceptNecessaryBtn}]]*/ "";
+    const cookieBannerPreferencesModalSavePreferencesBtn = /*[[#{cookieBanner.preferencesModal.savePreferencesBtn}]]*/ "";
+    const cookieBannerPreferencesModalCloseIconLabel = /*[[#{cookieBanner.preferencesModal.closeIconLabel}]]*/ "";
+    const cookieBannerPreferencesModalServiceCounterLabel = /*[[#{cookieBanner.preferencesModal.serviceCounterLabel}]]*/ "";
+    const cookieBannerPreferencesModalSubtitle = /*[[#{cookieBanner.preferencesModal.subtitle}]]*/ "";
+    const cookieBannerPreferencesModalDescription = /*[[#{cookieBanner.preferencesModal.description}]]*/ "";
+    const cookieBannerPreferencesModalNecessaryTitle = /*[[#{cookieBanner.preferencesModal.necessary.title}]]*/ "";
+    const cookieBannerPreferencesModalNecessaryDescription = /*[[#{cookieBanner.preferencesModal.necessary.description}]]*/ "";
+    const cookieBannerPreferencesModalAnalyticsTitle = /*[[#{cookieBanner.preferencesModal.analytics.title}]]*/ "";
+    const cookieBannerPreferencesModalAnalyticsDescription = /*[[#{cookieBanner.preferencesModal.analytics.description}]]*/ "";
+
     if (analyticsEnabled) {
       !function (t, e) {
         var o, n, p, r;
@@ -110,7 +135,8 @@
         persistence: 'localStorage',
         person_profiles: 'always',
         mask_all_text: true,
-        mask_all_element_attributes: true
+        mask_all_element_attributes: true,
+        opt_out_capturing_by_default: true
       })
       const baseUrl = window.location.hostname;
       posthog.register_once({
@@ -118,10 +144,10 @@
         'UUID': /*[[${@UUID}]]*/ ''
       })
     }
+
+    window.addEventListener("cc:onConsent", UpdatePosthogConsent);
+    window.addEventListener("cc:onChange", UpdatePosthogConsent);
   </script>
-
-
-
 </th:block>
 
 <th:block th:fragment="game">

src/main/resources/templates/fragments/footer.html

@@ -1,4 +1,6 @@
 <footer th:fragment="footer" id="footer" class="text-center pt-5">
+  
+  <script type="module" th:src="@{'/js/thirdParty/cookieconsent-config.js'}"></script>
   <div class="footer-center pb-4">
     <!-- Links section -->
     <div class="d-flex justify-content-center">
@@ -11,6 +13,7 @@
         <li th:if="${@accessibilityStatement != ''}"><a class="footer-link px-2" target="_blank" th:href="${@accessibilityStatement}" th:text="#{legal.accessibility}">accessibilityStatement</a></li>
         <li th:if="${@cookiePolicy != ''}"><a class="footer-link px-2" target="_blank" th:href="${@cookiePolicy}" th:text="#{legal.cookie}">cookiePolicy</a></li>
         <li th:if="${@impressum != ''}"><a class="footer-link px-2" target="_blank" th:href="${@impressum}" th:text="#{legal.impressum}">impressum</a></li>
+        <li><a class="footer-link px-2" id="cookieBanner" target="_blank"  th:text="#{legal.showCookieBanner}" onClick="CookieConsent.show(true)">Cookie Preferences</a></li>
       </ul>
     </div>