Script for LGPD in need of adjustments

Webdesign Help
1

I got a LGPD script that worked perfectly in an html template in VS Code, but I can’t get it to work using Bootstrap Studio.

As I don’t have advanced knowledge in scripting, I’m going to paste all the code and see if any friend finds the problem and helps me with it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LGPD Cookie Consent</title>
    <script>
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=/";
}

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 "";
}

function acceptLGPD() {
  setCookie("lgpd_accepted", "true", 365);
  document.getElementById("lgpd-banner").style.display = "none";
}

function checkLGPD() {
  var lgpd_accepted = getCookie("lgpd_accepted");
  if (lgpd_accepted != "") {
    document.getElementById("lgpd-banner").style.display = "none";
  } else {
    document.getElementById("lgpd-banner").style.display = "block";
  }
}
</script>
  </head>
  <body>
    <div id="lgpd-banner" style="display:none;">
      <p>Este site usa cookies e outras tecnologias semelhantes para melhorar a
        sua experiência de navegação. Ao continuar navegando, você concorda com
        nossa Política de Privacidade e nossos Termos de Uso.</p>
      <button onclick="acceptLGPD()">Aceitar</button>
    </div>
    <script>
  // seu código aqui...
  checkLGPD();
</script>

  </body>
</html>
2

create a javascript file and paste the following:

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=/";
  }
  
  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 "";
  }
  
  function acceptLGPD() {
    setCookie("lgpd_accepted", "true", 365);// for development change 365 to 0.00005787   (approx 5 seconds) 

    document.getElementById("lgpd-banner").style.display = "none";
  }
  
  function checkLGPD() {
    var lgpd_accepted = getCookie("lgpd_accepted");
    if (lgpd_accepted != "") {
      document.getElementById("lgpd-banner").style.display = "none";
    } else {
      document.getElementById("lgpd-banner").style.display = "block";
    }
  }

  checkLGPD();

Example:

https://still-moon-7842.bss.design/

These are the styles used:

#lgpd-banner {
  position: fixed;
  z-index: 99999;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  background: var(--bs-light);
  text-align: center;
  padding: 1rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
3

Thank you very much, it worked perfectly.
I made some changes to the css to adapt to the mobile version.
Below is the code I used and some screenshots.

image
image943×597 37 KB

<div class="container" id="lgpd-banner">
<strong><span>Lei Geral de Proteção de Dados</span></strong><br><br>
<span>Este site usa cookies para melhor experiência de navegação.</span><br>
<span>Política de Privacidade.</span><br>

CSS

#lgpd-banner {
  position: fixed;
  z-index: 3;
  bottom: 2rem;
  left: 1rem;
  right: 1rem;
  background: #ffffff;
  padding: 1rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.7)!important;
  text-align: left;
  border: 1rem;
}

@media (max-width: 576px) {
  #lgpd-banner {
    bottom: 1rem;
    left: 5%;
    right: 5%;
    width: 90%!important;
    padding: 1rem!important;
    text-align: left;
    display: none;
    border-radius: 1rem;
  }
}

@media (max-width: 576px) {
  p {
    margin-bottom: 0.6em!important;
    margin-top: 0.9em!important;
    letter-spacing: 0.017em;
    line-height: 27px;
    font-size: 1.19rem;
  }
}

p {
  display: block;
  margin-block-start: 0.4em;
  margin-block-end: 0.3em;
  text-align: left;
  text-indent: initial;
  font-weight: 400;
  color: #000;
  padding: 0px;
  font-size: 1.4rem;
}

javascript

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=/";
  }
  
  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 "";
  }
  
  function acceptLGPD() {
    setCookie("lgpd_accepted", "true", 365);// for development change 365 to 0.00005787   (approx 5 seconds) 

    document.getElementById("lgpd-banner").style.display = "none";
  }
  
  function checkLGPD() {
    var lgpd_accepted = getCookie("lgpd_accepted");
    if (lgpd_accepted != "") {
      document.getElementById("lgpd-banner").style.display = "none";
    } else {
      document.getElementById("lgpd-banner").style.display = "block";
    }
  }

  checkLGPD();

Image from the website.

image
image720×1551 105 KB

Potestade - Website link