added cookie-consent + privacy policy + fixed #32

src/components/CookieConsentBtn.vue

@@ -0,0 +1,72 @@
+<template>
+  <div v-if="!consent" class="card text-end bg-secondary text-white border border-1">
+    <div class="card-body">
+      <form class="mb-1">
+        <div class="form-check">
+          <input id="essential-cookies" checked class="form-check-input" disabled type="checkbox" value="">
+          <label class="form-check-label" for="essential-cookies">
+            Essential
+          </label>
+        </div>
+        <div class="form-check">
+          <input id="tracking" v-model="tracking" class="form-check-input" type="checkbox">
+          <label class="form-check-label" for="tracking">
+            Matomo
+          </label>
+        </div>
+      </form>
+
+      <a href="/privacy-policy" class="text-muted">Privacy Policy</a>
+
+      <div class="d-flex justify-content-between mt-2">
+        <button class="btn btn-outline-primary" type="button" @click="handleConsentForget">Decline</button>
+        <button class="btn btn-info" type="button" @click="handleConsent">Accept</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {onMounted, ref} from "vue";
+import {useCookies} from 'vue3-cookies'
+
+export default {
+  name: "CookieConsentBtn",
+  setup() {
+    const tracking = ref(true)
+    const {cookies} = useCookies()
+    const consent = ref(false)
+
+    const handleConsent = () => {
+      window._paq.push(['rememberCookieConsentGiven'])
+      cookies.set('consent', 'given')
+
+      if (tracking.value){
+        window._paq.push(['rememberConsentGiven'])
+      }
+      consent.value = true
+    }
+    const handleConsentForget = () => {
+      consent.value = true
+    }
+
+    const hasConsentGiven = () => {
+      if (cookies.get('consent').toString() === 'given')
+        consent.value = true
+    }
+
+    onMounted(() => {
+      hasConsentGiven()
+    })
+
+    return {handleConsent, handleConsentForget, tracking, consent}
+  }
+}
+</script>
+
+<style scoped>
+form {
+  display: flex;
+  gap: 1rem;
+}
+</style>

src/components/Footer.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="footer bg-secondary text-center pt-4 pb-4">
+  <div class="footer bg-secondary text-center pt-4 pb-5">
     <div class="icons pb-4">
       <a aria-label="Git Link" class="gitea text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
-        <i class="fa fa-gitea fa-2x" aria-hidden="true"></i>
+        <i aria-hidden="true" class="fa fa-gitea fa-2x"></i>
       </a>
     </div>
     <div class="text">
       <p>This site is an open source project, originally created and maintained by the <span class="text-warning">CSGOWTF</span>
         team.</p>
-      <p class="text-muted">For feedback open an <a class="text-decoration-none text-warning"
-                                                    href="https://git.harting.dev/CSGOWTF/csgowtf/issues"
-                                                    target="_blank">issue</a>.</p>
-      <p class="text-muted mb-0">Build-Version: <span class="text-white">{{ version }}</span></p>
+
+      <div class="d-flex justify-content-center align-items-center gap-4">
+        <p class="text-muted">For feedback open an <a class="text-decoration-none text-warning"
+                                                      href="https://git.harting.dev/CSGOWTF/csgowtf/issues"
+                                                      target="_blank">issue</a></p>
+        <p>
+          <a class="text-decoration-none text-warning" href="/privacy-policy">Privacy Policy</a>
+        </p>
+        <p class="text-muted">Build-Version: <span class="text-white">{{ version }}</span></p>
+      </div>
     </div>
   </div>
 </template>
@@ -28,11 +34,12 @@ export default {
 
 <style lang="scss" scoped>
 .footer {
-  height: 200px;
+  height: 220px;
 
   .fa:hover {
     color: #609926;
   }
+
   p {
     font-size: .85rem;
   }

src/components/Nav.vue

@@ -29,8 +29,8 @@
           <input id="search" v-model="data.searchInput" aria-label="Search"
                  autocomplete="off"
                  class="form-control bg-transparent border-0"
-                 placeholder="Profile Link or ShareCode"
-                 title="SteamID64, Profile Link, Custom URL, ShareCode"
+                 placeholder="SteamID64, Profile Link or Custom URL"
+                 title="SteamID64, Profile Link or Custom URL"
                  type="search">
           <button
               id="search-button"