Cookie-Einstellungen angepasst.
Majd Ibrahim
parent
787e7b61a6
commit
4d95aeb772
|
|
@ -62,7 +62,7 @@
|
||||||
<a href="https://tri-hub.de/widerruf">Widerrufsbelehrung</a>
|
<a href="https://tri-hub.de/widerruf">Widerrufsbelehrung</a>
|
||||||
<a href="https://tri-hub.de/datenschutz">Datenschutz</a>
|
<a href="https://tri-hub.de/datenschutz">Datenschutz</a>
|
||||||
<a href="https://tri-hub.de/impressum">Impressum</a>
|
<a href="https://tri-hub.de/impressum">Impressum</a>
|
||||||
<a class="trihub-cookie-link" href="https://tri-hub.de/">Cookie-Einstellungen öffnen</a>
|
<a class="trihub-cookie-link" href="#cookie-einstellungen" aria-haspopup="dialog">Cookie-Einstellungen öffnen</a>
|
||||||
</nav>
|
</nav>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,84 @@ export function initFooter(placeholderSelector = "#footer-placeholder") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
placeholder.outerHTML = footerHtml;
|
placeholder.outerHTML = `${footerHtml}
|
||||||
|
<dialog class="cookie-settings-dialog" aria-labelledby="cookie-settings-title">
|
||||||
|
<div class="cookie-settings-heading">
|
||||||
|
<div>
|
||||||
|
<p class="cookie-settings-eyebrow">DATENSCHUTZ & REICHWEITENMESSUNG</p>
|
||||||
|
<h2 id="cookie-settings-title">Cookie-Einstellungen</h2>
|
||||||
|
</div>
|
||||||
|
<button class="cookie-settings-close" type="button" aria-label="Cookie-Einstellungen schließen">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-settings-options">
|
||||||
|
<label class="cookie-option">
|
||||||
|
<span class="cookie-option-copy"><strong>Notwendig</strong><span>Halten den Laden am Laufen und sind notwendig für den Betrieb.</span></span>
|
||||||
|
<input type="checkbox" name="necessary" checked disabled aria-label="Notwendige Cookies immer aktiv">
|
||||||
|
<span class="cookie-toggle" aria-hidden="true"></span>
|
||||||
|
</label>
|
||||||
|
<label class="cookie-option">
|
||||||
|
<span class="cookie-option-copy"><strong>Komfort</strong><span>Machen dein Erlebnis angenehmer, zum Beispiel durch Terminbuchung, Kundenbewertungen oder externe Videoinhalte.</span></span>
|
||||||
|
<input type="checkbox" name="comfort">
|
||||||
|
<span class="cookie-toggle" aria-hidden="true"></span>
|
||||||
|
</label>
|
||||||
|
<label class="cookie-option">
|
||||||
|
<span class="cookie-option-copy"><strong>Analyse</strong><span>Helfen uns, die Nutzung der Website auszuwerten und Inhalte zu verbessern.</span></span>
|
||||||
|
<input type="checkbox" name="analysis">
|
||||||
|
<span class="cookie-toggle" aria-hidden="true"></span>
|
||||||
|
</label>
|
||||||
|
<label class="cookie-option">
|
||||||
|
<span class="cookie-option-copy"><strong>Marketing</strong><span>Helfen uns, Angebote zu verbessern und relevante Inhalte zu zeigen.</span></span>
|
||||||
|
<input type="checkbox" name="marketing">
|
||||||
|
<span class="cookie-toggle" aria-hidden="true"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="cookie-settings-actions">
|
||||||
|
<button class="cookie-settings-back" type="button">Zurück</button>
|
||||||
|
<button class="cookie-settings-save" type="button">Einstellungen speichern</button>
|
||||||
|
</div>
|
||||||
|
</dialog>`;
|
||||||
|
|
||||||
|
const dialog = document.querySelector(".cookie-settings-dialog");
|
||||||
|
const cookieLink = document.querySelector(".trihub-cookie-link");
|
||||||
|
const preferenceKey = "triHubCookiePreferences";
|
||||||
|
|
||||||
|
const loadPreferences = () => {
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem(preferenceKey) || "{}");
|
||||||
|
} catch {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
cookieLink?.addEventListener("click", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const preferences = loadPreferences();
|
||||||
|
for (const category of ["comfort", "analysis", "marketing"]) {
|
||||||
|
const input = dialog.querySelector(`input[name="${category}"]`);
|
||||||
|
input.checked = preferences[category] === true;
|
||||||
|
}
|
||||||
|
dialog.showModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
const closeDialog = () => dialog.close();
|
||||||
|
dialog.querySelector(".cookie-settings-close").addEventListener("click", closeDialog);
|
||||||
|
dialog.querySelector(".cookie-settings-back").addEventListener("click", closeDialog);
|
||||||
|
dialog.querySelector(".cookie-settings-save").addEventListener("click", () => {
|
||||||
|
const preferences = { necessary: true };
|
||||||
|
for (const category of ["comfort", "analysis", "marketing"]) {
|
||||||
|
preferences[category] = dialog.querySelector(`input[name="${category}"]`).checked;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
localStorage.setItem(preferenceKey, JSON.stringify(preferences));
|
||||||
|
} catch {
|
||||||
|
// Der Dialog bleibt auch ohne verfügbaren Speicher bedienbar.
|
||||||
|
}
|
||||||
|
closeDialog();
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.addEventListener("click", (event) => {
|
||||||
|
if (event.target === dialog) closeDialog();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => initFooter());
|
document.addEventListener("DOMContentLoaded", () => initFooter());
|
||||||
|
|
|
||||||
|
|
@ -227,3 +227,206 @@
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cookie-settings-dialog,
|
||||||
|
.cookie-settings-dialog * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-dialog {
|
||||||
|
width: min(58rem, calc(100% - 2rem));
|
||||||
|
max-width: none;
|
||||||
|
max-height: calc(100% - 2rem);
|
||||||
|
margin: auto;
|
||||||
|
padding: clamp(1.25rem, 3vw, 2.1rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||||
|
border-radius: 1.4rem;
|
||||||
|
background: #071217;
|
||||||
|
color: #f8fafc;
|
||||||
|
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
|
||||||
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-dialog::backdrop {
|
||||||
|
background: rgba(0, 0, 0, 0.72);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-heading {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-eyebrow {
|
||||||
|
margin: 0 0 0.45rem;
|
||||||
|
color: rgba(255, 255, 255, 0.52);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-heading h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
color: #fff;
|
||||||
|
font-size: clamp(1.6rem, 4vw, 2.15rem);
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-close {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 2.1rem;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-options {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
min-height: 5.25rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 3.5rem;
|
||||||
|
padding: 1.1rem 1.25rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.11);
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
background: rgba(255, 255, 255, 0.065);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option-copy {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option-copy strong {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option-copy > span {
|
||||||
|
color: rgba(255, 255, 255, 0.66);
|
||||||
|
font-size: 0.94rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option input {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.15rem;
|
||||||
|
right: 1.25rem;
|
||||||
|
z-index: 1;
|
||||||
|
width: 3.25rem;
|
||||||
|
height: 1.75rem;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.1rem;
|
||||||
|
right: 1.15rem;
|
||||||
|
width: 3.25rem;
|
||||||
|
height: 1.75rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #465057;
|
||||||
|
transition: background-color 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-toggle::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0.2rem;
|
||||||
|
left: 0.2rem;
|
||||||
|
width: 1.35rem;
|
||||||
|
height: 1.35rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
transition: transform 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option input:checked + .cookie-toggle {
|
||||||
|
background: #00bfd2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option input:checked + .cookie-toggle::before {
|
||||||
|
transform: translateX(1.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option input:focus-visible + .cookie-toggle,
|
||||||
|
.cookie-settings-dialog button:focus-visible {
|
||||||
|
outline: 3px solid #4edbdc;
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option input:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions button {
|
||||||
|
min-height: 3rem;
|
||||||
|
padding: 0.7rem 1.2rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: transparent;
|
||||||
|
color: #f8fafc;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions .cookie-settings-save {
|
||||||
|
border-color: #fff;
|
||||||
|
background: #fff;
|
||||||
|
color: #102027;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.cookie-settings-dialog {
|
||||||
|
width: calc(100% - 1.25rem);
|
||||||
|
padding: 1.2rem;
|
||||||
|
border-radius: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option {
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 1rem 4rem 1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-option input,
|
||||||
|
.cookie-toggle {
|
||||||
|
top: 1rem;
|
||||||
|
right: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cookie-settings-actions button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue