在网站上实现一个符合规范的 Cookies 条款弹窗代码，让用户选择同意或拒绝

想要在网站上实现一个符合欧美规范的 Cookies 条款弹窗，让用户选择同意或拒绝，以符合合规要求。

将以下代码直接添加到网站模板的末尾（</body>标签前）即可：

<div id="cookie-consent-banner" class="cookie-banner">
  <div class="cookie-content">
    <p>我们使用Cookies来提升您的浏览体验。By continuing to use our website, you agree to our <a href="/privacy-policy" target="_blank">Cookie Policy</a>.</p>
    <div class="cookie-buttons">
      <button id="cookie-accept" class="cookie-btn accept">同意</button>
      <button id="cookie-decline" class="cookie-btn decline">拒绝</button>
      <button id="cookie-close" class="cookie-btn close">×</button>
    </div>
  </div>
</div>

<style>
.cookie-banner {position: fixed;bottom: 0;left: 0;width: 100%;background-color: #2c3e50;color: #fff;padding: 15px 0;z-index: 9999;box-shadow: 0 -2px 10px rgba(0,0,0,0.1);transform: translateY(100%);transition: transform 0.3s ease;}
.cookie-banner.show {transform: translateY(0);}
.cookie-content {max-width: 1200px;margin: 0 auto;padding: 0 20px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 15px;}
.cookie-content p {margin: 0;font-size: 14px;line-height: 1.5;}
.cookie-content a {color: #3498db;text-decoration: underline;}
.cookie-buttons {display: flex;gap: 10px;}
.cookie-btn {padding: 8px 20px;border: none;border-radius: 4px;cursor: pointer;font-size: 14px;transition: background-color 0.2s;}
.cookie-btn.accept {background-color: #27ae60;color: #fff;}
.cookie-btn.accept:hover {background-color: #219653;}
.cookie-btn.decline {background-color: #e74c3c;color: #fff;}
.cookie-btn.decline:hover {background-color: #c0392b;}
.cookie-btn.close {padding: 8px 12px;background-color: #7f8c8d;color: #fff;font-size: 16px;line-height: 1;}
.cookie-btn.close:hover {background-color: #6c7a7b;}
@media (max-width: 768px) {
  .cookie-content {flex-direction: column;text-align: center;}
}
</style>

<script>
// Cookies 弹窗核心逻辑
document.addEventListener('DOMContentLoaded', function() {
  const banner = document.getElementById('cookie-consent-banner');
  const acceptBtn = document.getElementById('cookie-accept');
  const declineBtn = document.getElementById('cookie-decline');
  const closeBtn = document.getElementById('cookie-close'); 

  // 检查用户是否已选择过
  const cookieConsent = localStorage.getItem('cookieConsent');
  if (!cookieConsent) {
    // 未选择过，显示弹窗
    setTimeout(() => {
      banner.classList.add('show');
    }, 500);
  }

  // 同意按钮逻辑
  acceptBtn.addEventListener('click', function() {
    localStorage.setItem('cookieConsent', 'accepted');
    banner.classList.remove('show');
    // 这里可以添加同意后执行的代码（如加载统计脚本）
    console.log('用户同意了Cookies条款');
  });

  // 拒绝按钮逻辑
  declineBtn.addEventListener('click', function() {
    localStorage.setItem('cookieConsent', 'declined');
    banner.classList.remove('show');
    console.log('用户拒绝了Cookies条款');
  });

  // 关闭按钮逻辑（仅关闭弹窗，不记录同意/拒绝）
  closeBtn.addEventListener('click', function() {
    banner.classList.remove('show');
    console.log('用户关闭了Cookies弹窗');
    // 注意：关闭按钮未记录localStorage，刷新页面后弹窗会重新显示
    // 如果需要关闭后不再显示，可取消下面这行注释：
    // localStorage.setItem('cookieConsent', 'closed');
  });
});
</script>

使用注意事项：

• 替换 <a href="/privacy-policy"> 中的链接为你网站实际的 Cookie 政策 / 隐私政策页面
• 可根据网站风格修改 CSS 中的颜色、字体、间距等样式
• 如果需要多语言，可将弹窗内的文字替换为英文（如 "We use cookies to enhance your browsing experience..."）