diff --git a/css/dark.css b/css/dark.css index 9f37ef6..218fe90 100644 --- a/css/dark.css +++ b/css/dark.css @@ -14,6 +14,8 @@ --secondary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 30%)); --sidenav-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 5%)); + --border-color: var(--default-text); + --default-text: hsl(var(--base-hue), var(--base-saturation), 100%); --default-text-inv: hsl(var(--base-hue), var(--base-saturation), 0%); } diff --git a/css/light.css b/css/light.css index a0763db..cebaa7c 100644 --- a/css/light.css +++ b/css/light.css @@ -13,7 +13,7 @@ --secondary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) - 30%)); --sidenav-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) - 5%)); - --border-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%)); + --border-color: var(--default-text); --default-text: hsl(var(--base-hue), var(--base-saturation), 0%); --default-text-inv: hsl(var(--base-hue), var(--base-saturation), 100%); diff --git a/index.html b/index.html index fec70a5..8c75a71 100644 --- a/index.html +++ b/index.html @@ -56,6 +56,10 @@ 🧬 Multiple instances + + 🍪 + Cookie popup + diff --git a/js/routes/cookies.js b/js/routes/cookies.js new file mode 100644 index 0000000..5a78da0 --- /dev/null +++ b/js/routes/cookies.js @@ -0,0 +1,140 @@ +// Stored in /js/routes/cookies.js + +export default (hostComponent) => { + // Clear any existing content in the hostComponent + hostComponent.innerHTML = ''; + + const analyticsPreference = localStorage.getItem('analytics-cookies') === 'true'; + const personalizationPreference = localStorage.getItem('personalization-cookies') === 'true'; + const advertisementPreference = localStorage.getItem('advertisement-cookies') === 'true'; + + // Cookie Modal Styles & HTML + const cookieModalStyles = ` + +`; + + // Insert this style string in the component logic where the styles are concatenated. + + const cookieModalHTML = ` + + + We use cookies to enhance your experience. Choose the cookies you allow: + + Analytics + + + + + + + Personalization + + + + + + + Advertisement + + + + + + Save Preferences + + + `; + + hostComponent.innerHTML += cookieModalStyles + cookieModalHTML; + handleCookieChoice(hostComponent); + + function handleCookieChoice(hostComponent) { + const modalBackground = hostComponent.querySelector('#cookie-modal-background'); + + hostComponent.querySelector('#save-preferences').addEventListener('click', () => { + localStorage.setItem('analytics-cookies', hostComponent.querySelector('#analytics-cookies').checked); + localStorage.setItem( + 'personalization-cookies', + hostComponent.querySelector('#personalization-cookies').checked + ); + localStorage.setItem( + 'advertisement-cookies', + hostComponent.querySelector('#advertisement-cookies').checked + ); + + modalBackground.remove(); + }); + } +};
We use cookies to enhance your experience. Choose the cookies you allow: