Добавить уведомление cookie внизу сайта с кнопкой

Код для сайта WordPress

Добавить уведомление cookie внизу сайта с кнопкой

<!-- cookie -->

<div id="cookie-banner">
<div class="container clr">
Мы используем файлы cookie, чтобы улучшить ваше взаимодействие с нашим сайтом. Просматривая сайт, вы соглашаетесь на использование файлов cookie.<button id="cookie-accept">Хорошо</button></div>

Скрипт тут же:

  (function() {
    const banner = document.getElementById('cookie-banner');
    const acceptBtn = document.getElementById('cookie-accept');

    // Проверяем, есть ли запись в localStorage о согласии
    const agreed = localStorage.getItem('cookieConsent');
    const now = new Date().getTime();
    const consentTime = localStorage.getItem('cookieConsentTime');

    // Если согласие уже дано и прошло меньше 24 часов — не показываем
    if (agreed && consentTime && (now - consentTime) < 24 * 60 * 60 * 1000) {
      return;
    }

    // Иначе показываем баннер
    banner.style.display = 'flex';

    // При нажатии на "Хорошо" сохраняем согласие и скрываем баннер
    acceptBtn.addEventListener('click', function() {
      localStorage.setItem('cookieConsent', 'true');
      localStorage.setItem('cookieConsentTime', now.toString());
      banner.style.display = 'none';
    });
  })();

Стили:

body #cookie-banner {  background-color: #faf8f5;}
body #cookie-banner .container button{   background-color: #8cbc67; }
body #cookie-banner{position: fixed;  bottom: 0;  left: 0;  width: 100%;  box-sizing: border-box;  z-index: 9999;    display: none;}
body #cookie-banner .container{ padding: 15px 24px;  font-size: 14px;    display: flex;    align-items: center;    justify-content: space-between;}
body #cookie-banner .container button{    color: white;   border: none;    padding: 5px 12px;    border-radius: 4px;    cursor: pointer;    font-size: 14px;}

Код для сайта на HTML или Joomla

      
      
      
      <style>
    /* Стили для баннера */
    #cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      z-index: 9999;
      display: none;
      background-color: #faf8f5;
    }
    
    #cookie-banner .cookie-container {
      padding: 15px 24px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
    }
    
    #cookie-banner .cookie-text {
      flex: 1;
    }
    
    #cookie-banner .cookie-accept {
      background-color: #8cbc67;
      color: white;
      border: none;
      padding: 5px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      white-space: nowrap;
    }
    
    #cookie-banner .cookie-accept:hover {
      background-color: #7aa552;
    }

  
       <div>Ваш контент здесь</div>

  <!-- Cookie Banner -->
  <div id="cookie-banner">
    <div class="cookie-container">
      <span class="cookie-text">Мы используем файлы cookie, чтобы улучшить ваше взаимодействие с нашим сайтом. Просматривая сайт, вы соглашаетесь на использование файлов cookie.</span>
      <button id="cookie-accept" class="cookie-accept">Хорошо</button>
    </div>
  </div>

    (function() {
      const banner = document.getElementById('cookie-banner');
      const acceptBtn = document.getElementById('cookie-accept');
      
      // Проверяем, есть ли запись в localStorage о согласии
      const agreed = localStorage.getItem('cookieConsent');
      const now = new Date().getTime();
      const consentTime = localStorage.getItem('cookieConsentTime');
      
      // Если согласие уже дано и прошло меньше 24 часов — не показываем
      if (agreed && consentTime && (now - consentTime) < 24 * 60 * 60 * 1000) {
        return;
      }
      
      // Иначе показываем баннер
      banner.style.display = 'block';
      
      // При нажатии на "Хорошо" сохраняем согласие и скрываем баннер
      acceptBtn.addEventListener('click', function() {
        localStorage.setItem('cookieConsent', 'true');
        localStorage.setItem('cookieConsentTime', now.toString());
        banner.style.display = 'none';
      });
    })();