Add cookie disclaimer

6 files changed, 68 insertions, 0 deletions

diff --git a/layouts/index.html b/layouts/index.html
index bf46c18..cf0e1fa 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -45,6 +45,7 @@
             {{ partial "footer.html" . }}
         </div>
         {{ partial "banner.html" . }}
+		{{- partial "cookie.html" . -}}
     </div>
 
 
diff --git a/layouts/partials/cookie.html b/layouts/partials/cookie.html
new file mode 100644
index 0000000..78a3f6a
--- /dev/null
+++ b/layouts/partials/cookie.html
@@ -0,0 +1,11 @@
+<div class="cookie-container">
+  <p>
+    We use cookies on this website to give you the best experience on our
+    site and show you relevant ads. To find out more, read our
+    <a href="/privacy/">privacy policy</a> and <a href="/cookies/">cookie policy</a>.
+  </p>
+  <button class="cookie-btn">
+    Okay
+  </button>
+</div>
+<script src="{{.Site.BaseURL | relLangURL}}js/cookie.js"></script>
diff --git a/layouts/partials/foot.html b/layouts/partials/foot.html
index 51430f0..8712e74 100644
--- a/layouts/partials/foot.html
+++ b/layouts/partials/foot.html
@@ -14,3 +14,5 @@ ga('create', '{{- .Site.Params.ga -}}', 'auto'); ga('send', 'pageview')
 </script>                                            
 <script src="//www.google-analytics.com/analytics.js" async defer></script>
 {{ end }}
+
+<script src="{{.Site.BaseURL | relLangURL}}js/cookie.js"></script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index eadf45b..b835883 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/normalize.css">
     <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/niello.css">
     <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/main.css">
+    <link rel="stylesheet" href="{{.Site.BaseURL | relLangURL}}css/cookie.css">
     {{ if .Site.Params.google_ad_client }}
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <script>
diff --git a/static/css/cookie.css b/static/css/cookie.css
new file mode 100644
index 0000000..ea7e9bd
--- /dev/null
+++ b/static/css/cookie.css
@@ -0,0 +1,40 @@
+p {
+  margin: 24px 0;
+  line-height: 2;
+}
+
+.wrapper {
+  padding: 32px;
+}
+
+.cookie-container {
+  position: fixed;
+  bottom: -100%;
+  left: 0;
+  right: 0;
+  background: #2f3640;
+  color: #f5f6fa;
+  padding: 0 32px;
+  box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.38);
+
+  transition: 400ms;
+}
+
+.cookie-container.active {
+  bottom: 0;
+}
+
+.cookie-container a {
+  color: #f5f6fa;
+}
+
+.cookie-btn {
+  background: #ff0000;
+  border: 0;
+  color: #f5f6fa;
+  padding: 12px 48px;
+  font-size: 18px;
+  margin-bottom: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
diff --git a/static/js/cookie.js b/static/js/cookie.js
new file mode 100644
index 0000000..ef0fdf8
--- /dev/null
+++ b/static/js/cookie.js
@@ -0,0 +1,13 @@
+const cookieContainer = document.querySelector(".cookie-container");
+const cookieButton = document.querySelector(".cookie-btn");
+
+cookieButton.addEventListener("click", () => {
+  cookieContainer.classList.remove("active");
+  localStorage.setItem("cookieBannerDisplayed", "true");
+});
+
+setTimeout(() => {
+  if (!localStorage.getItem("cookieBannerDisplayed")) {
+    cookieContainer.classList.add("active");
+  }
+}, 2000);