https://noalko-kaliningrad.ru/assets/js/cookie.js

1if (Number(localStorage.getItem('cookie-checker')) != 1) {
2  const infoAlert = document.createElement('div');
3  const okBtn = document.createElement('button');
4  okBtn.innerText = 'Oк';
5  infoAlert.classList.add('cookie-block');
6  infoAlert.innerText = 'Для обеспечения безопасности ваших данных мы используем cookies';
7  infoAlert.appendChild(okBtn);
8
9  okBtn.addEventListener('click', function(e) {
10    e.preventDefault();
11    localStorage.setItem('cookie-checker', '1');
12    infoAlert.classList.add('accepted');
13    setTimeout(function() {
14      document.querySelector('.cookie-block').remove();
15    }, 1000)
16  })
17
18  const cssStyles = document.createElement('style');
19  const settingsBlock = document.querySelector('.cookie-settings');
20  const styleSettings = {
21    color: settingsBlock.getAttribute('data-color') ? settingsBlock.getAttribute('data-color') : 'black',
22    bg: settingsBlock.getAttribute('data-bg') ? settingsBlock.getAttribute('data-bg') : 'white',
23    btnColor: settingsBlock.getAttribute('data-btn-color') ? settingsBlock.getAttribute('data-btn-color') : 'black',
24    btnBg: settingsBlock.getAttribute('data-btn-bg') ? settingsBlock.getAttribute('data-btn-bg') : 'gray'
25  }
26
27  cssStyles.innerHTML = `
28    .cookie-block {
29      position: fixed;
30      bottom: 0;
31      left: 0;
32      width: 100%;
33      display:flex;
34      align-items: center;
35      justify-content: center;
36      transition: 1s;
37      background: ${styleSettings.bg};
38      color: ${styleSettings.color};
39      padding: 10px 14px;
40      font-size: 18px;
41      z-index: 999;
42    }
43    .cookie-block button, .cookie-block button:active, .cookie-block button:focus {
44      border: 0;
45      outline: 0;
46      padding: 4px 12px;
47      margin: 0 8px;
48      border-radius: 5px;
49      cursor: pointer;
50      background: ${styleSettings.btnBg};
51      color: ${styleSettings.btnColor};
52    }
53    .cookie-block.accepted {
54      bottom: -999px;
55      opacity: .2;
56    }
57    `;
58
59  document.body.appendChild(infoAlert);
60  document.body.appendChild(cssStyles);
61}