diff --git a/ddlh/static/application.js b/ddlh/static/application.js index 3a34768..88aa2ad 100644 --- a/ddlh/static/application.js +++ b/ddlh/static/application.js @@ -205,6 +205,31 @@ const setupSearchHint = () => { } }; +const setupCookieBanner = () => { + if (localStorage.getItem("cookie_consent") === null) { + const banner = document.querySelector(".cookie-banner"); + banner.style.display = "flex"; + accept = banner.querySelector(".accept"); + accept.addEventListener("click", (event) => { + event.preventDefault(); + localStorage.setItem("cookie_consent", "granted"); + gtag("consent", "update", { + ad_user_data: "granted", + ad_personalization: "granted", + ad_storage: "granted", + analytics_storage: "granted", + }); + banner.style.display = "none"; + }); + reject = banner.querySelector(".reject"); + reject.addEventListener("click", (event) => { + event.preventDefault(); + localStorage.setItem("cookie_consent", "refused"); + banner.style.display = "none"; + }); + } +}; + document.addEventListener("DOMContentLoaded", (event) => { setupCarousels(); setupStats(); @@ -213,4 +238,5 @@ document.addEventListener("DOMContentLoaded", (event) => { setupDocumentLinkHighlight(); setupFormClickHandler(); setupSearchHint(); + setupCookieBanner(); }); diff --git a/ddlh/static/styles.css b/ddlh/static/styles.css index 42f0a30..f627adf 100644 --- a/ddlh/static/styles.css +++ b/ddlh/static/styles.css @@ -415,6 +415,31 @@ p { color: var(--light-blue-saturated); } +.cookie-banner { + display: none; /* flex, when visible, but hidden by default. this is set in JS */ + pointer-events: auto; + position: fixed; + bottom: 0; + width: 100%; + box-sizing: border-box; + flex-direction: column; + background-color: var(--main-bg-color); + padding: var(--spacer-unit) calc(2 * var(--spacer-unit)); + border-top: 1px solid var(--main-fg-color); + z-index: 500; + gap: var(--spacer-unit); + + & .cookie-buttons { + display: flex; + gap: calc(0.5 * var(--spacer-unit)); + + & a { + width: 50%; + padding: calc(0.5 * var(--spacer-unit)); + } + } +} + .index-hero { background-color: var(--main-bg-color); display: flex; @@ -1400,6 +1425,15 @@ p { padding-right: calc(2 * var(--spacer-unit)); } + .cookie-banner { + flex-direction: row; + + & .cookie-buttons { + width: 33%; + flex-shrink: 0; + } + } + .related-resources-container { & h2 { margin-left: 0; diff --git a/ddlh/templates/layouts/main.j2 b/ddlh/templates/layouts/main.j2 index f02ca96..16c8cc9 100644 --- a/ddlh/templates/layouts/main.j2 +++ b/ddlh/templates/layouts/main.j2 @@ -22,6 +22,23 @@ {% endblock main %} {% include "partials/footer.j2" %} + {% include "partials/cookie_banner.j2" %} + + + diff --git a/ddlh/templates/partials/cookie_banner.j2 b/ddlh/templates/partials/cookie_banner.j2 new file mode 100644 index 0000000..d89f421 --- /dev/null +++ b/ddlh/templates/partials/cookie_banner.j2 @@ -0,0 +1,11 @@ +