GDPR Cookie Banner Generator

<!-- GDPR Cookie Consent Banner -->
<div id="gdpr-banner" style="position: fixed; bottom: 0; left: 0; right: 0; padding: 20px; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 9999; display: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
  <div style="max-width: 1200px; margin: 0 auto;">
    <h3 style="margin: 0 0 10px 0; font-size: 18px; font-weight: 600; color: #1f2937;">
      🍪 Cookie Consent
    </h3>
    <p style="margin: 0 0 15px 0; font-size: 14px; color: #4b5563; line-height: 1.5;">
      We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. 
      By clicking "Accept All", you consent to our use of cookies. 
      <a href="/privacy-policy" style="color: #3B82F6; text-decoration: underline;">Learn more</a>
    </p>
    
    
    <div id="cookie-preferences" style="display: none; margin: 15px 0; padding: 15px; background: #f9fafb; border-radius: 8px;">
      <h4 style="margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #1f2937;">Cookie Preferences</h4>
      <div style="display: flex; flex-direction: column; gap: 10px;">
        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4b5563;">
          <input type="checkbox" checked disabled style="width: 16px; height: 16px;">
          <span><strong>Necessary</strong> - Required for basic site functionality</span>
        </label>
        
        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4b5563;">
          <input type="checkbox" id="analytics-cookie" checked style="width: 16px; height: 16px;">
          <span><strong>Analytics</strong> - Help us understand how visitors use our site</span>
        </label>
        
        
        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4b5563;">
          <input type="checkbox" id="marketing-cookie" checked style="width: 16px; height: 16px;">
          <span><strong>Marketing</strong> - Used to track visitors across websites</span>
        </label>
        
        
        <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4b5563;">
          <input type="checkbox" id="preferences-cookie" checked style="width: 16px; height: 16px;">
          <span><strong>Preferences</strong> - Remember your settings and preferences</span>
        </label>
        
      </div>
    </div>
    
    
    <div style="display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap;">
      <button id="accept-all-btn" style="padding: 10px 20px; background: #3B82F6; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; flex: 1; min-width: 120px;">
        Accept All
      </button>
      
      <button id="customize-btn" style="padding: 10px 20px; background: white; color: #374151; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; flex: 1; min-width: 120px;">
        Customize
      </button>
      <button id="save-preferences-btn" style="display: none; padding: 10px 20px; background: #3B82F6; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; flex: 1; min-width: 120px;">
        Save Preferences
      </button>
      
      <button id="reject-all-btn" style="padding: 10px 20px; background: white; color: #374151; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; flex: 1; min-width: 120px;">
        Reject All
      </button>
    </div>
  </div>
</div>

<script>
  (function() {
    const banner = document.getElementById('gdpr-banner');
    const acceptBtn = document.getElementById('accept-all-btn');
    const rejectBtn = document.getElementById('reject-all-btn');
    const customizeBtn = document.getElementById('customize-btn');
    const savePreferencesBtn = document.getElementById('save-preferences-btn');
    const preferences = document.getElementById('cookie-preferences');
    
    // Check if user has already made a choice
    if (!localStorage.getItem('gdpr-consent')) {
      banner.style.display = 'block';
    }
    
    acceptBtn?.addEventListener('click', function() {
      localStorage.setItem('gdpr-consent', JSON.stringify({
        necessary: true,
        analytics: true,
        marketing: true,
        preferences: true,
        timestamp: new Date().toISOString()
      }));
      banner.style.display = 'none';
      // Initialize your analytics/marketing scripts here
    });
    
    rejectBtn?.addEventListener('click', function() {
      localStorage.setItem('gdpr-consent', JSON.stringify({
        necessary: true,
        analytics: false,
        marketing: false,
        preferences: false,
        timestamp: new Date().toISOString()
      }));
      banner.style.display = 'none';
    });
    
    customizeBtn?.addEventListener('click', function() {
      preferences.style.display = 'block';
      customizeBtn.style.display = 'none';
      savePreferencesBtn.style.display = 'block';
    });
    
    savePreferencesBtn?.addEventListener('click', function() {
      const consent = {
        necessary: true,
        analytics: document.getElementById('analytics-cookie')?.checked || false,
        marketing: document.getElementById('marketing-cookie')?.checked || false,
        preferences: document.getElementById('preferences-cookie')?.checked || false,
        timestamp: new Date().toISOString()
      };
      localStorage.setItem('gdpr-consent', JSON.stringify(consent));
      banner.style.display = 'none';
      // Initialize scripts based on consent
    });
  })();
</script>