diff --git a/css/cookiealert.css b/css/cookiealert.css new file mode 100644 index 0000000..e5d07c9 --- /dev/null +++ b/css/cookiealert.css @@ -0,0 +1,38 @@ +/* + * Bootstrap Cookie Alert by Wruczek + * https://github.com/Wruczek/Bootstrap-Cookie-Alert + * Released under MIT license + */ +.cookiealert { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + margin: 0 !important; + padding: 0.75rem 1.25rem; + z-index: 999; + opacity: 0; + visibility: hidden; + border-radius: 0; + transform: translateY(100%); + transition: all 500ms ease-out; + color: #ecf0f1; + background: #303030; +} + +.cookiealert.show { + opacity: 1; + visibility: visible; + transform: translateY(0%); + transition-delay: 1000ms; +} + +.cookiealert a { + text-decoration: underline +} + +.cookiealert .acceptcookies { + margin-left: 10px; + vertical-align: baseline; +} + diff --git a/index.html b/index.html index 1f83293..42595a0 100644 --- a/index.html +++ b/index.html @@ -2,86 +2,68 @@ --- - - - - + + + - Coming soon: The House of Basu-Howard - - - - - + - - - - - -
- - - -
- - - -
-

- -

- - + + + +
+
+
+

-

Coming soon!

- -
- - - - + + + + + + + + + + + +dd diff --git a/js/cookiealert.js b/js/cookiealert.js new file mode 100644 index 0000000..cdc0191 --- /dev/null +++ b/js/cookiealert.js @@ -0,0 +1,56 @@ +/* + * Bootstrap Cookie Alert by Wruczek + * https://github.com/Wruczek/Bootstrap-Cookie-Alert + * Released under MIT license + */ +(function () { + "use strict"; + + var cookieAlert = document.querySelector(".cookiealert"); + var acceptCookies = document.querySelector(".acceptcookies"); + + if (!cookieAlert) { + return; + } + + cookieAlert.offsetHeight; // Force browser to trigger reflow (https://stackoverflow.com/a/39451131) + + // Show the alert if we cant find the "acceptCookies" cookie + if (!getCookie("acceptCookies")) { + cookieAlert.classList.add("show"); + } + + // When clicking on the agree button, create a 1 year + // cookie to remember user's choice and close the banner + acceptCookies.addEventListener("click", function () { + setCookie("acceptCookies", true, 365); + cookieAlert.classList.remove("show"); + + // dispatch the accept event + window.dispatchEvent(new Event("cookieAlertAccept")) + }); + + // Cookie functions from w3schools + function setCookie(cname, cvalue, exdays) { + var d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + var expires = "expires=" + d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/" + "; SameSite=Strict"; + } + + function getCookie(cname) { + var name = cname + "="; + var decodedCookie = decodeURIComponent(document.cookie); + var ca = decodedCookie.split(';'); + for (var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) === ' ') { + c = c.substring(1); + } + if (c.indexOf(name) === 0) { + return c.substring(name.length, c.length); + } + } + return ""; + } +})();