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/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>