Shopify - This site use cookies

cookies.liquid

{% comment %}
    @rotcl
{% endcomment %}

<div class="cook container">
  <div class="row">
    <div style="text-align:center;" class="col-sm text-center mt-3">
      <h2>This Site Uses Cookies</h2>
      <button class="but btn btn-dark btn-sm" id="stop">Stop The Madness</button>
    </div>
  </div>
</div>
<div id="dynamicContent">
</div>

<style>

.cook {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: repeating-linear-gradient(112.5deg,rgba(0.76,0.76,0.76,0.01) 0px 53px, rgba(0.11,0.11,0.11,0.03) 53px 106px, rgba(0.21,0.21,0.21,0.03) 106px 159px, rgba(0.66,0.66,0.66,0.02) 159px 212px, rgba(0.79,0.79,0.79,0.01) 212px 265px),repeating-linear-gradient(0deg,rgba(0.33,0.33,0.33,0.02) 0px 53px, rgba(0.44,0.44,0.44,0.01) 53px 106px, rgba(0.83,0.83,0.83,0.02) 106px 159px, rgba(0.90,0.90,0.90,0.03) 159px 212px, rgba(0.35,0.35,0.35,0.01) 212px 265px, rgba(0.21,0.21,0.21,0.03) 265px 318px, rgba(0.89,0.89,0.89,0.01) 318px 371px, rgba(0.26,0.26,0.26,0.00) 371px 424px),repeating-linear-gradient(67.5deg,rgba(0.29,0.29,0.29,0.01) 0px 63px, rgba(0.16,0.16,0.16,0.01) 63px 126px, rgba(0.01,0.01,0.01,0.02) 126px 189px, rgba(0.86,0.86,0.86,0.02) 189px 252px, rgba(0.08,0.08,0.08,0.00) 252px 315px, rgba(0.67,0.67,0.67,0.02) 315px 378px, rgba(0.36,0.36,0.36,0.03) 378px 441px, rgba(0.45,0.45,0.45,0.03) 441px 504px, rgba(0.54,0.54,0.54,0.02) 504px 567px, rgba(0.50,0.50,0.50,0.00) 567px 630px),repeating-linear-gradient(22.5deg,rgba(0.75,0.75,0.75,0.02) 0px 61px, rgba(0.03,0.03,0.03,0.00) 61px 122px, rgba(0.58,0.58,0.58,0.00) 122px 183px, rgba(0.36,0.36,0.36,0.02) 183px 244px, rgba(0.14,0.14,0.14,0.03) 244px 305px, rgba(0.26,0.26,0.26,0.02) 305px 366px, rgba(0.85,0.85,0.85,0.00) 366px 427px, rgba(0.98,0.98,0.98,0.00) 427px 488px, rgba(0.34,0.34,0.34,0.01) 488px 549px, rgba(0.34,0.34,0.34,0.01) 549px 610px, rgba(0.41,0.41,0.41,0.02) 610px 671px),repeating-linear-gradient(135deg,white 0px 3px, transparent 3px 81px),repeating-linear-gradient(0deg,white 0px 2px, transparent 2px 43px),repeating-linear-gradient(90deg,white 0px 1px, transparent 1px 73px),repeating-linear-gradient(135deg,white 0px 2px, transparent 2px 73px),repeating-linear-gradient(0deg,white 0px 1px, transparent 1px 91px),repeating-linear-gradient(90deg,white 0px 2px, transparent 2px 47px),repeating-linear-gradient(135deg,white 0px 1px, transparent 1px 73px),repeating-linear-gradient(0deg,white 0px 2px, transparent 2px 95px),repeating-linear-gradient(90deg,white 0px 1px, transparent 1px 89px),repeating-linear-gradient(0deg,white 0px 1px, transparent 1px 43px),repeating-linear-gradient(0deg,white 0px 2px, transparent 2px 56px),repeating-linear-gradient(90deg,white 0px 1px, transparent 1px 19px),repeating-linear-gradient(45deg,white 0px 2px, transparent 2px 34px),repeating-linear-gradient(0deg,white 0px 2px, transparent 2px 71px),repeating-linear-gradient(90deg,white 0px 3px, transparent 3px 56px),linear-gradient(135deg, white, white);
}

.but {
  margin-right: 10px;
  text-transform: uppercase;
}

.custom-modal {
  padding: 15px;
  position: fixed;
  border: 1px solid #aaa;
  background-color: #efefef;
  border-radius: 4px;
}

@keyframes bottom-up {
  0% {
    transform: translateY(200px);
  }
  
  100% {
    transform: translateY(0px);
  } 
}

.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  animation: bottom-up 2s;
}

@keyframes right-in {
  0% {
    transform: translateX(250px);
  }
  
  100% {
    transform: translateX(0px);
  }
}
.right {
  bottom: 0;
  top: 0;
  right: 0;
  width: 250px;
  animation: right-in 2s;
}

@keyframes left-in {
  0% {
    transform: translateX(-250px);
  }
  
  100% {
    transform: translateX(0px);
  }
}

.left {
  bottom: 0;
  top: 0;
  left: 0;
  width: 250px;
  animation: left-in 2s;
}

@keyframes top-down {
  0% {
    transform: translateY(-200px);
  }
  
  100% {
    transform: translateY(0px);
  } 
}

.top {
  top: 0;
  right: 0;
  left: 0;
  animation: top-down 2s;
  .contents {
    transform: rotate(180deg);
  }
}

@keyframes spin-out {
  0% {
    transform: translate(0) rotate(0deg);
  }
  
  100% {
   transform: translate(150%, -150%) rotate(2000deg);
  }
}

.stop {
  animation: spin-out 4s;
  transform: translate(200%,200%);
}
  
</style>

<script>
let modalContent = "<div class='contents'><h4>This Site Uses Cookies</h4><p>This site uses cookies. Some of them are essentials while other help us track everything you do and sell it to a third party.</p><button class='btn btn-link btn-sm'>Decline</button><button class='btn btn-primary btn-sm'>Accept</button></div>"
let content = document.querySelector('#dynamicContent');
let sides = ['right', 'left', 'top', 'bottom']
let heights = {
  left : 0,
  right: 0,
  top: 0,
  bottom: 0
}
let zCounter = 1;
let interval = 900;
let continueCreating = true;
let currentTimeout = 0;

function createCookieDisclaimer(side = sample(sides)){
  let newDiv = document.createElement('div');
  newDiv.innerHTML = modalContent;
  newDiv.classList.add('custom-modal', side);
  
  newDiv.style["z-index"] = zCounter;
  newDiv.style[side] = heights[side] + 'px';
  zCounter+=1;
  heights[side] += randomIntRange(25, 75);
  content.appendChild(newDiv);
}

createCookieDisclaimer('bottom');


function timer(){
  createCookieDisclaimer();
  if(continueCreating) currentTimeout = window.setTimeout(timer, interval)
}

function endTheMadness(){
  let modals = document.getElementsByClassName('custom-modal');
  for(let i=0;i<modals.length;i++){
    modals[i].classList.add('stop');
  }
  continueCreating = false;
  window.clearTimeout(currentTimeout);
}

document.querySelector('#stop').addEventListener('click', function(){
  interval = 200;
  window.setTimeout(endTheMadness, 3800);
  createCookieDisclaimer('bottom');
  createCookieDisclaimer('top');
  createCookieDisclaimer('left');
  createCookieDisclaimer('right');
});

window.setTimeout(timer, interval)

document.addEventListener('click', function(event){
  if(event.target.nodeName == 'BUTTON') event.target.closest('.custom-modal').remove();
})

function sample(arr){
  return arr[Math.floor(Math.random()*arr.length)];
}

function randomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function randomIntRange(min, max) {
  return Math.floor(Math.random() * Math.floor(max-min)) + min;
}
</script>
{% schema %}
{
  "name": "Cookies",
  "class": "blnk",
  "settings": [
	{	
		"type": "header",
		"content": "Static"
	}
  ],
  "presets": [{
    "name": "Cookies",
    "category": "Custom"
  }]

}
{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.

Este sitio usa cookies.