Add cookie banner

koldakov · koldakov · commit 77ce29b83739 · 2024-09-24T22:14:41.000+07:00
diff --git a/static/css/cookie-banner.css b/static/css/cookie-banner.css
@@ -0,0 +1,9 @@
+#futurama-api-cookie-banner {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+  border-radius: 0;
+  display: none;
+}
diff --git a/static/js/cookie-banner.js b/static/js/cookie-banner.js
@@ -0,0 +1,23 @@
+var FuturamaAPICookieName = "FuturamaAPI_CookieAccepted";
+var cookieBannerId = "futurama-api-cookie-banner"
+
+function showCookieBanner(){
+    let cookieBanner = document.getElementById(cookieBannerId);
+    cookieBanner.style.display = "block";
+}
+
+function hideCookieBanner(){
+    localStorage.setItem(FuturamaAPICookieName, true);
+
+    let cookieBanner = document.getElementById(cookieBannerId);
+    cookieBanner.style.display = "none";
+}
+
+function initializeCookieBanner(){
+    if(localStorage.getItem(FuturamaAPICookieName) === null) {
+        showCookieBanner();
+    }
+}
+
+window.onload = initializeCookieBanner();
+window.futuramaapi_hideCookieBanner = hideCookieBanner;
diff --git a/templates/base.html b/templates/base.html
@@ -13,6 +13,7 @@
     <title>{% block title %}Welcome{% endblock %} | Futurama API</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="{{ relative_path_for('static', path='/css/base.css') }}" rel="stylesheet">
+    <link href="{{ relative_path_for('static', path='/css/cookie-banner.css') }}" rel="stylesheet">
     {% block extra_styles %}{% endblock %}
   </head>
   <body>
@@ -147,6 +148,20 @@ <h3>Hi, {{ current_user.full_name }}, welcome to</h3>
     </main>
     <footer>
     </footer>
+    <div
+      id="futurama-api-cookie-banner"
+      class="alert alert-dark text-center mb-0"
+      role="alert"
+    >
+      This website uses cookies to ensure you get the best experience on our website.
+      <button
+        type="button"
+        class="btn btn-primary btn-sm ms-3"
+        onclick="window.futuramaapi_hideCookieBanner()"
+      >
+        I Got It
+      </button>
+    </div>
     {% if _project.G_TAG %}
     <script
       async
@@ -164,6 +179,9 @@ <h3>Hi, {{ current_user.full_name }}, welcome to</h3>
       integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
       crossorigin="anonymous"
     ></script>
+    <script
+      src="{{ relative_path_for('static', path='/js/cookie-banner.js') }}"
+    ></script>
     {% block extra_scripts %}{% endblock %}
   </body>
 </html>
