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/datenschutz">Datenschutz</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>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,84 @@ export function initFooter(placeholderSelector = "#footer-placeholder") {
|
|||
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());
|
||||
|
|
|
|||
|
|
@ -227,3 +227,206 @@
|
|||
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