feat: privacy policy, cookie policy and cookie consent banner

2026-05-08 01:27:24 +02:00
parent 58eb6dc952
commit 34386daca6
5 changed files with 370 additions and 1 deletions
@@ -0,0 +1,89 @@
+<div class="cookie-banner" id="cookieBanner" aria-live="polite">
+  <div class="cookie-banner-inner">
+    <p class="cookie-text">
+      Usamos cookies técnicas necesarias para el funcionamiento del sitio.
+      Consulte nuestra <a href="/cookies">Política de Cookies</a> y <a href="/privacidad">Privacidad</a>.
+    </p>
+    <div class="cookie-actions">
+      <a href="/cookies" class="btn-underline cookie-more" style="font-size:0.65rem;">Más info</a>
+      <button id="cookieAccept" class="btn btn-primary cookie-accept">Aceptar</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  const banner = document.getElementById('cookieBanner')!;
+  const accept = document.getElementById('cookieAccept')!;
+
+  if (localStorage.getItem('mnq_cookie_consent') === 'accepted') {
+    banner.style.display = 'none';
+  }
+
+  accept.addEventListener('click', () => {
+    localStorage.setItem('mnq_cookie_consent', 'accepted');
+    banner.classList.add('cookie-hide');
+    setTimeout(() => banner.style.display = 'none', 400);
+  });
+</script>
+
+<style>
+  .cookie-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 80;
+    background: var(--color-inverse-surface);
+    color: var(--color-inverse-on-surface);
+    padding: var(--space-4) var(--space-page);
+    transition: transform 400ms ease, opacity 400ms ease;
+  }
+
+  .cookie-banner.cookie-hide {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  .cookie-banner-inner {
+    max-width: var(--max-w-content);
+    margin-inline: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-6);
+    flex-wrap: wrap;
+  }
+
+  .cookie-text {
+    font-size: var(--text-sm);
+    color: rgb(248 240 226 / 85%);
+    line-height: 1.5;
+    flex: 1;
+    min-width: 16rem;
+  }
+
+  .cookie-text a {
+    color: var(--color-primary-container);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  .cookie-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    flex-shrink: 0;
+  }
+
+  .cookie-more {
+    color: rgb(248 240 226 / 70%);
+    border-color: rgb(248 240 226 / 40%);
+    font-size: 0.65rem;
+  }
+
+  .cookie-accept {
+    font-size: 0.7rem;
+    padding: 0.5rem 1.25rem;
+    min-height: 36px;
+  }
+</style>
@@ -30,7 +30,8 @@
            target="_blank"
            rel="noreferrer"
          >WhatsApp</a>
-          <a href="#" class="footer-link">Aviso Legal</a>
+          <a href="/privacidad" class="footer-link">Privacidad</a>
+          <a href="/cookies" class="footer-link">Cookies</a>
        </div>
      </div>