GDPR/cookies popup

_gdpr.liquid

<section class="gdpr">
  <p>
  WE VALUE YOUR PRIVACY KOTV Limited uses cookies to help us deliver our services and improve your user experience. Click “Agree” to accept our use of cookies or you can choose to opt out of our use of cookies by following the instructions in our Privacy Policy and Cookie Notice.
  </p>
  <div class="gdpr--actions">
    <button class="gdpr--button js-gdpr-ok">Agree</button>
    <a href="https://kotvboxing.uscreen.io/pages/privacy-policy" target="_blank" class="gdpr--button">Read More</a>
  </div>
</section>

script.js

(function() {
  var gdprSection = document.querySelector(".gdpr");
  var button = document.querySelector(".js-gdpr-ok"); 
  if (localStorage.getItem('dontLoad') === null) {
    gdprSection.classList.add('active');
    button.addEventListener('click', function(event){
      gdprSection.classList.remove('active')
      localStorage.setItem('dontLoad', 'visited');
    }) 
  } else {
    console.log('visited is in LocalStorage')
  }
})();

style.css

.gdpr {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #d9d4d0;
  color: #000;
  text-align: left;
  z-index: 10;
  padding: 35px;
  font-size: 14px;
  padding-right: 420px;
}
.gdpr a {
  color: #2a234f;
}
.gdpr.active {
  display: block;
}
.gdpr p {
  display: inline-block;
  vertical-align: middle;
  color: #000;
}
.gdpr--actions {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  position: absolute;
  top: 50%;
  right: 35px;
  transform: translate(0, -50%);
}
.gdpr--button {
  display: inline-block;
  vertical-align: middle;
  padding: 8px 15px;
  background: #ff8000;
  color: #fff !important;
  border: none;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  min-width: 150px;
  border-radius: 35px;
  outline: none;
  text-align: center;
}
.gdpr--button:hover {
  background: #ff8000;
}
.gdpr--button + .gdpr--button {
  margin-left: 10px;
}

@media only screen and (max-width:767px) {
  .gdpr {
    padding: 20px;
  }
  .gdpr--actions {
    position: relative;
    top: 0;
    right: 0;
    transform: none;
    display: block;
    margin: 0;
    text-align: center;
  }
}