Revert "Datenschutz-Hinweis beim laden der Seite anzeigen."

This reverts commit 2aa52d8662.

rechtlicheHinweise.html

@@ -81,11 +81,13 @@
         <br>Die Plattform dient ausschließlich als Hosting-Anbieter für den Quellcode und dessen Bereitstellung. Bei einem Besuch der Domain können technische Daten (z.B. IP-Adresse, Zugriffszeitpunkt) von Codeberg erhoben und verarbeitet werden. Diese Daten werden entsprechend der Datenschutzerklärung von Codeberg behandelt.
         <br>Weitere Informationen zur Datenverarbeitung durch Codeberg e.V. finden Sie unter: <a href="https://codeberg.org/Codeberg/org/src/branch/main/PrivacyPolicy.md" target="_blank">https://codeberg.org/Codeberg/org/src/branch/main/PrivacyPolicy.md</a>.</p>
         <h3>Einbindung von Mastodon-Server-Daten (JavaScript-Abrufe)</h3>
-            <p>Unsere Website bietet Ihnen die Möglichkeit, Profile und Informationen von Mastodon-Servern anzuzeigen. Um diese Inhalte bereitzustellen, werden Daten von den jeweiligen Servern über JavaScript abgerufen. Dabei können technische Daten wie Ihre IP-Adresse, Browserinformationen und Zugriffszeitpunkte verarbeitet werden.</p>
-            <ul>
-                <li><strong>Rechtsgrundlage</strong> — Die Verarbeitung erfolgt auf Grundlage unseres berechtigten Interesses gemäß Art. 6 Abs. 1 lit. f DSGVO. Das berechtigte Interesse besteht darin, die Funktionalität der Website sicherzustellen und die angeforderten Inhalte bereitzustellen.</li>
-                <li><strong>Transparenz über die Datenverarbeitung</strong> — Im Rahmen der Bereitstellung von Mastodon-Daten können technische Daten (z. B. IP-Adresse) an die jeweiligen Mastodon-Server übermittelt werden. Bitte beachten Sie, dass die Datenverarbeitung auf den Servern nicht in unserem Einflussbereich liegt. Weitere Informationen hierzu finden Sie in den Datenschutzerklärungen der jeweiligen Mastodon-Server.</li>
-                <li><strong>Datenquellen</strong> — Die dargestellten Inhalte stammen von Mastodon-Servern. Die Verarbeitung Ihrer Daten auf diesen Servern erfolgt gemäß den dort geltenden Datenschutzbestimmungen. Weitere Informationen entnehmen Sie bitte den Datenschutzerklärungen der jeweiligen Anbieter.</li>           
+        <p>Unsere Website bietet Ihnen die Möglichkeit, Profile und Informationen von Mastodon-Servern anzuzeigen. Um diese Inhalte bereitzustellen, werden Daten von den jeweiligen Servern über JavaScript abgerufen. Dabei können technische Daten wie Ihre IP-Adresse, Browserinformationen und Zugriffszeitpunkte verarbeitet werden.</p>
+        <ul>
+            <li><strong>Rechtsgrundlage</strong> — Die Verarbeitung erfolgt ausschließlich auf Grundlage Ihrer Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO. Ohne Ihre aktive Zustimmung werden keine Daten von externen Mastodon-Servern geladen.</li>
+            <li><strong>Vorgehensweise bei der Einwilligung</strong> — Nach dem Laden der Website werden Sie gefragt, ob Sie die Mastodon-Daten abrufen möchten. Diese Einwilligung gilt nur für die aktuelle Sitzung und verfällt, sobald Sie die Seite neu laden. Bei einem erneuten Besuch oder Neuladen der Seite wird die Einwilligung erneut eingeholt.</li>
+            <li><strong>Transparenz über die Datenverarbeitung</strong> — Mit Ihrer Einwilligung werden technische Daten (z. B. IP-Adresse) an die jeweiligen Mastodon-Server übermittelt. Bitte beachten Sie, dass die Datenverarbeitung auf den Servern nicht in unserem Einflussbereich liegt. Weitere Informationen hierzu finden Sie in den Datenschutzerklärungen der jeweiligen Mastodon-Server.</li>
+            <li><strong>Widerruf der Einwilligung</strong> — Da Ihre Einwilligung nur für die aktuelle Sitzung gilt, können Sie diese jederzeit durch das Verlassen oder Neuladen der Seite widerrufen.</li>
+            <li><strong>Datenquellen</strong> — Die dargestellten Inhalte stammen von Mastodon-Servern. Die Verarbeitung Ihrer Daten auf diesen Servern erfolgt gemäß den dort geltenden Datenschutzbestimmungen. Weitere Informationen entnehmen Sie bitte den Datenschutzerklärungen der jeweiligen Anbieter.</li>
     </div>
 </section>
 

src/main.js

@@ -2,7 +2,6 @@ import { createStarterKitElement, enhanceStarterKits } from './utils/starterkit-
 import { seededShuffleChildren } from './utils/shuffle-utils.js';
 import { initializeCreateStarterKitPopup } from './utils/create-starterkit.js';
 import { loadPostwall } from './components/postwall.js';
-import { checkUserNotice } from './utils/notice-utils.js';
 
 
 let userConsent = null;
@@ -18,9 +17,6 @@ async function loadTemplates() {
 }
 
 document.addEventListener('DOMContentLoaded', async function () {
-    // Datenschutz-Hinweis anzeigen oder nicht
-    checkUserNotice();
-    
     await loadTemplates();
 
     initializeCreateStarterKitPopup();

src/utils/consent-utils.js

@@ -0,0 +1,63 @@
+import { createPopup } from '../components/popupManager.js';
+
+export function setUserConsent(consent) {
+    localStorage.setItem('userConsent', JSON.stringify(consent));
+}
+
+export function getUserConsent() {
+    const consent = localStorage.getItem('userConsent');
+    return consent !== null ? JSON.parse(consent) : null;
+}
+
+export function showConsentPopup(onAccept, onDecline) {
+    const title = 'Zustimmung zur Datenabfrage';
+    const body = `
+        <p>
+            Mit dem Klicken auf "Bestätigen" erlaubst du, dass Profilinformationen von unterschiedlichen Mastodon-Instanzen
+            abgefragt werden. Deine Entscheidung wird im lokalen Speicher deines Browsers gespeichert.
+        </p>
+        <p>
+            Weitere Informationen findest du in unseren 
+            <a href="/rechtlicheHinweise.html" target="_blank">🛡️&nbsp;Datenschutzhinweisen</a>.
+        </p>
+        <div class="consent-popup-buttons">
+            <button id="consent-decline">Ablehnen</button>    
+            <button id="consent-accept">Bestätigen</button>
+        </div>
+    `;
+
+    const popup = createPopup({
+        title,
+        body,
+        customClass: 'consent-popup',
+        closeCallback: () => {
+            document.body.classList.remove('body-no-scroll');
+            window.removeEventListener('popstate', onPopState);
+        }
+    });
+
+    // Klasse hinzufügen, um das Scrollen des Hintergrunds zu verhindern
+    document.body.classList.add('body-no-scroll');
+
+    // Füge einen neuen Eintrag zur Browser-Historie hinzu
+    history.pushState({ popupOpen: true }, null, '');
+
+    const onPopState = () => {
+        popup.remove();
+        document.body.classList.remove('body-no-scroll');
+        window.removeEventListener('popstate', onPopState);
+        history.back();
+    };
+    window.addEventListener('popstate', onPopState);
+
+    // Event-Listener für die Buttons
+    popup.querySelector('#consent-accept').addEventListener('click', () => {
+        popup.remove();
+        onAccept(); // Zustimmung
+    });
+
+    popup.querySelector('#consent-decline').addEventListener('click', () => {
+        popup.remove();
+        onDecline(); // Ablehnung
+    });
+}

src/utils/notice-utils.js

@@ -1,48 +0,0 @@
-export function setUserNotice() {
-    localStorage.setItem('userNotice', 'true');
-    removeNoticePopup();
-}
-
-export function removeNoticePopup() {
-    const popup = document.getElementById('notice-popup');
-    if (popup) {
-        popup.remove(); // Entfernt das Popup aus dem DOM
-    }
-}
-
-export function checkUserNotice() {
-    const noticeRead = localStorage.getItem('userNotice');
-    if (!noticeRead) {
-        // Popup erstellen
-        const popup = document.createElement('div');
-        popup.id = 'notice-popup';
-        popup.className = 'notice-popup';
-
-        const title = 'Hinweis zur Datenabfrage';
-        const body = `
-            <p>
-                Diese Seite ruft Inhalte von unterschiedlichen Servern im Fediverse — in der Regel von unseren Mastodon-Instanzen — ab. Dabei werden technische Daten wie Deine IP-Adresse übertragen.
-            </p>
-            <p>
-                Mehr Informationen findest du in unseren 
-                <a href="/rechtlicheHinweise.html" target="_blank">🛡️&nbsp;Datenschutzhinweisen</a>.
-            </p>
-            <div class="notice-popup-buttons">
-                <button id="notice-btn" class="btn">Verstanden</button>
-            </div>
-        `;
-
-        const header = document.createElement('h3');
-        header.textContent = title;
-
-        const content = document.createElement('div');
-        content.innerHTML = body;
-
-        popup.appendChild(header);
-        popup.appendChild(content);
-        document.body.appendChild(popup);
-
-        // Event-Listener für den Button
-        document.getElementById('notice-btn').addEventListener('click', setUserNotice);
-    }
-}

src/utils/starterkit-utils.js

@@ -1,4 +1,5 @@
 import { createRecommendationPopup, populateAuthorsContainer } from './recommendations-utils.js';
+import { showConsentPopup, getUserConsent, setUserConsent } from './consent-utils.js';
 
 export function createStarterKitElement(kit) {
     const template = document.getElementById('starterkit-template').content.cloneNode(true);
@@ -31,8 +32,40 @@ export function enhanceStarterKits() {
 
     starterkits.forEach(kit => {
         kit.addEventListener('click', function () {
-            // Direkt die Profile laden, ohne Consent-Überprüfung
-            loadStarterKitProfiles(kit);
+            const userConsent = getUserConsent(); // Hole den aktuellen Zustimmungsstatus
+
+            if (userConsent === null) {
+                // Zeige das Popup, da der Nutzer noch nicht zugestimmt oder abgelehnt hat
+                showConsentPopup(
+                    () => {
+                        // Bestätigen-Callback: Zustimmung speichern und Profile laden
+                        setUserConsent(true);
+                        loadStarterKitProfiles(kit);
+                    },
+                    () => {
+                        // Ablehnen-Callback: Ablehnung speichern
+                        setUserConsent(false);
+                        console.log('Nutzer hat die Datenabfrage abgelehnt.');
+                    }
+                );
+            } else if (userConsent === true) {
+                // Nutzer hat zugestimmt: Lade die StarterKit-Profile
+                loadStarterKitProfiles(kit);
+            } else {
+                // Nutzer hat abgelehnt: Popup erneut anzeigen
+                showConsentPopup(
+                    () => {
+                        // Bestätigen-Callback: Zustimmung speichern und Profile laden
+                        setUserConsent(true);
+                        loadStarterKitProfiles(kit);
+                    },
+                    () => {
+                        // Ablehnen-Callback: Ablehnung speichern und nichts tun
+                        setUserConsent(false);
+                        console.log('Nutzer hat die Datenabfrage erneut abgelehnt.');
+                    }
+                );
+            }
         });
     });
 }

style/consentPopup.css

@@ -0,0 +1,63 @@
+.consent-popup-content {
+    background-color: var(--background-color);
+    padding: 20px;
+    border-radius: 15px;
+    text-align: center;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.consent-popup-content h3 {
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+    color: #fff;
+}
+
+.consent-popup-content p {
+    margin-bottom: 20px;
+    font-size: 1rem;
+    color: #fff;
+    line-height: 1.5;
+}
+
+.consent-popup-content a {
+    color: #007BFF;
+    text-decoration: none;
+}
+
+.consent-popup-content a:hover {
+    text-decoration: underline;
+}
+
+.consent-popup-buttons {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.consent-popup-buttons button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+#consent-accept {
+    background: #28a745;
+    color: white;
+}
+
+#consent-accept:hover {
+    background: #218838;
+}
+
+#consent-decline {
+    background: #dc3545;
+    color: white;
+}
+
+#consent-decline:hover {
+    background: #c82333;
+}

style/elements.css

@@ -1,21 +1,3 @@
-.btn {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    margin: 0;
-    font-size: 1rem;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-}
-
-.btn:hover {
-    background-color: var(--primary-color-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
 button.close-popup {
     background-color: transparent;
     padding: 0;

style/index.css

@@ -1,6 +1,6 @@
 @import "./base.css";
 @import "./site.css";
-@import "./noticePopup.css";
+@import "./consentPopup.css";
 @import "./starterkit.css";
 @import "./recommendationPopup.css";
 @import "./profile.css";

style/media-query.css

@@ -47,13 +47,6 @@
         max-width: 98%;
     }
 
-    .notice-popup {
-        bottom: 5px;
-        left: 50%;
-        transform: translateX(-50%);
-        max-width: 98%;
-    }
-
 }
 
 @media (max-width: 450px) {

style/noticePopup.css

@@ -1,45 +0,0 @@
-.notice-popup {
-    position: fixed;
-    bottom: 50px;
-    right: 50px;
-    width: 100%;
-    max-width: 400px;
-    background-color: var(--background-color);
-    padding: 20px;
-    border-radius: 15px;
-    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-    text-align:center;
-}
-
-/* Titel-Styling */
-.notice-popup h3 {
-    margin-bottom: 10px;
-    font-size: 1.25rem;
-    color: #fff;
-}
-
-/* Text-Styling */
-.notice-popup p {
-    margin-bottom: 15px;
-    font-size: 1rem;
-    color: #fff;
-    line-height: 1.5;
-}
-
-/* Link-Styling */
-.notice-popu a {
-    color: #007BFF;
-    text-decoration: none;
-}
-
-.notice-popup a:hover {
-    text-decoration: underline;
-}
-
-/* Button-Container */
-.notice-popup-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-}