webfarben/physiotherapie-adolphsen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX/DSGVO: Consent-Optionen und Top-Link ergänzt

Browse Source
This commit is contained in:
webfarben
2026-03-17 15:51:01 +01:00
parent bf6d9e7106
commit 6e7ca9538b
5 changed files with 262 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
assets/css/styles.css
View File

@@ -303,7 +303,7 @@ a {
}
.site-footer {
padding: 1.4rem 0 2.4rem;
padding: 1.4rem 0 6rem;
background: #f4eee5;
}
@@ -324,6 +324,100 @@ a {
gap: 1rem;
}
.consent-panel {
position: fixed;
right: 1rem;
bottom: 1rem;
width: min(28rem, calc(100vw - 2rem));
z-index: 2000;
padding: 1.2rem;
border-radius: 1rem;
background: rgba(36, 52, 45, 0.96);
color: #fff;
box-shadow: var(--shadow-soft);
transform: translateY(120%);
transition: transform 0.25s ease;
}
.consent-panel.is-visible {
transform: translateY(0);
}
.consent-panel h2 {
margin: 0 0 0.75rem;
font-size: 1.2rem;
}
.consent-panel p {
margin: 0 0 0.9rem;
font-size: 0.95rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
.consent-options {
margin-bottom: 1rem;
}
.consent-option {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
}
.consent-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.consent-open-button {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: 1990;
border: 0;
border-radius: 999px;
padding: 0.55rem 0.95rem;
background: rgba(116, 89, 72, 0.95);
color: #fff;
font-size: 0.85rem;
}
.consent-open-button:hover,
.consent-open-button:focus {
background: #5f4739;
}
.top-link-button {
position: fixed;
right: 1.5rem;
bottom: 1rem;
z-index: 1985;
border: 0;
border-radius: 999px;
padding: 0.5rem 0.9rem;
background: rgba(49, 69, 59, 0.92);
color: #fff;
font-size: 0.82rem;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.top-link-button.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.top-link-button:hover,
.top-link-button:focus {
background: #24342d;
}
@media (max-width: 991.98px) {
.navbar-collapse {
margin-top: 1rem;
@@ -368,4 +462,12 @@ a {
.hero-section {
padding-bottom: 4rem;
}
.consent-actions {
flex-direction: column;
}
.top-link-button {
bottom: 1rem;
}
}

154
assets/js/main.js
View File

@@ -5,10 +5,7 @@ document.addEventListener("DOMContentLoaded", () => {
}
const navbar = document.getElementById("mainNav");
if (!navbar) {
return;
}
if (navbar) {
const collapseElement = navbar.querySelector(".navbar-collapse");
const navLinks = navbar.querySelectorAll(".nav-link");
const collapse = collapseElement ? bootstrap.Collapse.getOrCreateInstance(collapseElement, { toggle: false }) : null;
@@ -20,4 +17,153 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
});
}
setupConsentManager();
setupTopLink();
});
const consentStorageKey = "paConsentPreferencesV1";
function getStoredConsent() {
try {
const raw = localStorage.getItem(consentStorageKey);
return raw ? JSON.parse(raw) : null;
} catch {
return null;
}
}
function storeConsent(consent) {
localStorage.setItem(consentStorageKey, JSON.stringify(consent));
}
function loadMatomo() {
if (window.__matomoLoaded) {
return;
}
window.__matomoLoaded = true;
const _paq = (window._paq = window._paq || []);
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
const u = "https://piwik.webfarben.net/";
_paq.push(["setTrackerUrl", u + "matomo.php"]);
_paq.push(["setSiteId", "5"]);
const d = document;
const g = d.createElement("script");
const s = d.getElementsByTagName("script")[0];
g.async = true;
g.src = u + "matomo.js";
s.parentNode.insertBefore(g, s);
}
function setupConsentManager() {
const existingConsent = getStoredConsent();
if (existingConsent?.analytics) {
loadMatomo();
}
injectConsentUi();
if (!existingConsent) {
openConsentBanner();
}
}
function injectConsentUi() {
const panel = document.createElement("aside");
panel.id = "consentPanel";
panel.className = "consent-panel";
panel.innerHTML =
'<h2>Datenschutz-Einstellungen</h2>' +
'<p>Wir verwenden Matomo zur anonymisierten Reichweitenmessung. Sie entscheiden, ob Statistik-Cookies gesetzt werden.</p>' +
'<div class="consent-options">' +
'<label class="consent-option">' +
'<input id="consentAnalytics" type="checkbox" />' +
'<span>Statistik (Matomo) erlauben</span>' +
"</label>" +
"</div>" +
'<div class="consent-actions">' +
'<button type="button" id="consentAcceptAll" class="btn btn-brand btn-sm">Alle akzeptieren</button>' +
'<button type="button" id="consentEssential" class="btn btn-outline-secondary btn-sm">Nur notwendig</button>' +
'<button type="button" id="consentSave" class="btn btn-outline-light btn-sm">Auswahl speichern</button>' +
"</div>";
const trigger = document.createElement("button");
trigger.type = "button";
trigger.id = "consentOpenButton";
trigger.className = "consent-open-button";
trigger.textContent = "Cookie-Einstellungen";
document.body.append(panel, trigger);
const analyticsInput = document.getElementById("consentAnalytics");
const consent = getStoredConsent();
if (consent?.analytics && analyticsInput) {
analyticsInput.checked = true;
}
trigger.addEventListener("click", openConsentBanner);
document.getElementById("consentAcceptAll")?.addEventListener("click", () => {
saveConsent({ analytics: true });
if (analyticsInput) {
analyticsInput.checked = true;
}
});
document.getElementById("consentEssential")?.addEventListener("click", () => {
saveConsent({ analytics: false });
if (analyticsInput) {
analyticsInput.checked = false;
}
});
document.getElementById("consentSave")?.addEventListener("click", () => {
saveConsent({ analytics: Boolean(analyticsInput?.checked) });
});
}
function openConsentBanner() {
document.getElementById("consentPanel")?.classList.add("is-visible");
}
function closeConsentBanner() {
document.getElementById("consentPanel")?.classList.remove("is-visible");
}
function saveConsent(consent) {
storeConsent(consent);
if (consent.analytics) {
loadMatomo();
}
closeConsentBanner();
}
function setupTopLink() {
const topLink = document.createElement("button");
topLink.type = "button";
topLink.className = "top-link-button";
topLink.setAttribute("aria-label", "Nach oben");
topLink.textContent = "Nach oben";
topLink.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
document.body.append(topLink);
const toggleTopLink = () => {
if (window.scrollY > 320) {
topLink.classList.add("is-visible");
} else {
topLink.classList.remove("is-visible");
}
};
toggleTopLink();
window.addEventListener("scroll", toggleTopLink, { passive: true });
}

23
datenschutz.html
View File

@@ -170,27 +170,6 @@
</footer>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("currentYear").textContent = String(new Date().getFullYear());
</script>
<!-- Matomo -->
<script>
var _paq = (window._paq = window._paq || []);
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function () {
var u = "https://piwik.webfarben.net/";
_paq.push(["setTrackerUrl", u + "matomo.php"]);
_paq.push(["setSiteId", "5"]);
var d = document,
g = d.createElement("script"),
s = d.getElementsByTagName("script")[0];
g.async = true;
g.src = u + "matomo.js";
s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo Code -->
<script src="assets/js/main.js"></script>
</body>
</html>

23
impressum.html
View File

@@ -148,27 +148,6 @@
</footer>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById("currentYear").textContent = String(new Date().getFullYear());
</script>
<!-- Matomo -->
<script>
var _paq = (window._paq = window._paq || []);
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function () {
var u = "https://piwik.webfarben.net/";
_paq.push(["setTrackerUrl", u + "matomo.php"]);
_paq.push(["setSiteId", "5"]);
var d = document,
g = d.createElement("script"),
s = d.getElementsByTagName("script")[0];
g.async = true;
g.src = u + "matomo.js";
s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo Code -->
<script src="assets/js/main.js"></script>
</body>
</html>

19
index.html
View File

@@ -279,24 +279,5 @@
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/main.js"></script>
<!-- Matomo -->
<script>
var _paq = (window._paq = window._paq || []);
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);
(function () {
var u = "https://piwik.webfarben.net/";
_paq.push(["setTrackerUrl", u + "matomo.php"]);
_paq.push(["setSiteId", "5"]);
var d = document,
g = d.createElement("script"),
s = d.getElementsByTagName("script")[0];
g.async = true;
g.src = u + "matomo.js";
s.parentNode.insertBefore(g, s);
})();
</script>
<!-- End Matomo Code -->
</body>
</html>