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.
-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.
++ 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. +
++ Weitere Informationen findest du in unseren + 🛡️ Datenschutzhinweisen. +
+ + `; + + 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 + }); +} diff --git a/src/utils/notice-utils.js b/src/utils/notice-utils.js deleted file mode 100644 index 934620f..0000000 --- a/src/utils/notice-utils.js +++ /dev/null @@ -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 = ` -- 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. -
-- Mehr Informationen findest du in unseren - 🛡️ Datenschutzhinweisen. -
- - `; - - 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); - } -} diff --git a/src/utils/starterkit-utils.js b/src/utils/starterkit-utils.js index b3e540c..b7a1333 100644 --- a/src/utils/starterkit-utils.js +++ b/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.'); + } + ); + } }); }); } diff --git a/style/consentPopup.css b/style/consentPopup.css new file mode 100644 index 0000000..bd98344 --- /dev/null +++ b/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; +} diff --git a/style/elements.css b/style/elements.css index ac91054..0dabf96 100644 --- a/style/elements.css +++ b/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; diff --git a/style/index.css b/style/index.css index bdc3045..eb8a7a2 100644 --- a/style/index.css +++ b/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"; diff --git a/style/media-query.css b/style/media-query.css index 654d426..3ecda5f 100644 --- a/style/media-query.css +++ b/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) { diff --git a/style/noticePopup.css b/style/noticePopup.css deleted file mode 100644 index 4795673..0000000 --- a/style/noticePopup.css +++ /dev/null @@ -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; -}