Cookie Consent Generator

<!-- Cookie Consent Banner -->
<div id="cookie-banner" class="cookie-banner bottom elevated">
  <div class="cookie-content">
      <div class="cookie-icon">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-.728-.076-1.438-.222-2.123-.146.017-.294.033-.445.033-2.206 0-4-1.794-4-4 0-.15.016-.298.033-.444A10.013 10.013 0 0012 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8c.34 0 .672.026 1 .074-.024.308-.05.619-.05.926 0 3.314 2.686 6 6 6 .307 0 .618-.026.926-.05.048.328.074.66.074 1 0 4.411-3.589 8-8 8zM8.5 9a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm7 2a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-5 4a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/></svg>
      </div>
    <div class="cookie-text">
        <h3 class="cookie-title">Cookie Consent</h3>
      <p class="cookie-message">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" class="cookie-link">Privacy Policy</a></p>
    </div>
    <div class="cookie-buttons row">
        <button class="cookie-btn decline" onclick="declineCookies()">Decline</button>
      <button class="cookie-btn accept" onclick="acceptCookies()">Accept All</button>
    </div>
  </div>
</div>



<script>
// Check if consent was already given
if (!localStorage.getItem('cookieConsent')) {
  document.getElementById('cookie-banner').style.display = 'block';
  
}

function acceptCookies() {
  

  localStorage.setItem('cookieConsent', 'accepted');
  hideCookieBanner();
  // Initialize your analytics and tracking here
}

function declineCookies() {
  localStorage.setItem('cookieConsent', 'declined');
  hideCookieBanner();
}

function hideCookieBanner() {
  document.getElementById('cookie-banner').style.display = 'none';
  
}

function openCookieSettings() {
  // Open your cookie settings modal here
}
</script>

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding: 20px;
  z-index: 9999;
  display: none;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  
}

.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  display: none;
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.cookie-icon {
  width: 40px;
  height: 40px;
  color: #3b82f6;
  flex-shrink: 0;
}

.cookie-icon svg {
  width: 100%;
  height: 100%;
}

.cookie-close {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-text {
  flex: 1;
  min-width: 200px;
}

.cookie-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px 0;
}

.cookie-message {
  font-size: 14px;
  color: #374151;
  margin: 0;
  line-height: 1.5;
}

.cookie-link {
  color: #3b82f6;
  text-decoration: underline;
}

.cookie-link:hover {
  text-decoration: none;
}

.cookie-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  
}

.cookie-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cookie-btn.accept {
  background: #3b82f6;
  color: #ffffff;
  border: none;
}

.cookie-btn.accept:hover {
  opacity: 0.9;
}

.cookie-btn.decline,
.cookie-btn.settings {
  background: transparent;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.cookie-btn.decline:hover,
.cookie-btn.settings:hover {
  background: #e5e7eb;
}

@media (max-width: 768px) {
  .cookie-content {
    flex-direction: column;
    text-align: center;
  }

  .cookie-buttons {
    width: 100%;
    flex-direction: column;
  }

  .cookie-btn {
    width: 100%;
  }
}

import React, { useState, useEffect } from 'react';

const CookieConsent = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem('cookieConsent');
    if (!consent) {
      setIsVisible(true);
    }
  }, []);

  const acceptCookies = () => {
    localStorage.setItem('cookieConsent', 'accepted');
    setIsVisible(false);
    // Initialize analytics here
  };

  const declineCookies = () => {
    localStorage.setItem('cookieConsent', 'declined');
    setIsVisible(false);
  };

  if (!isVisible) return null;

  const bannerStyle = {
    position: 'fixed',
    bottom: 0,
    left: 0,
    right: 0,
    
    
    
    background: '#ffffff',
    padding: '20px',
    zIndex: 9999,
    boxShadow: '0 -4px 20px rgba(0,0,0,0.1)',
    borderRadius: '0',
  };

  return (
    <>
      
      <div style={bannerStyle}>
        <div style={{
          maxWidth: '1200px',
          margin: '0 auto',
          display: 'flex',
          alignItems: 'center',
          gap: '20px',
          flexWrap: 'wrap',
          justifyContent: 'center',
        }}>
          {/* Icon */}
          <div style={{ width: '40px', height: '40px', color: '#3b82f6' }}>
            <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '100%', height: '100%' }}>
              <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-.728-.076-1.438-.222-2.123-.146.017-.294.033-.445.033-2.206 0-4-1.794-4-4 0-.15.016-.298.033-.444A10.013 10.013 0 0012 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8c.34 0 .672.026 1 .074-.024.308-.05.619-.05.926 0 3.314 2.686 6 6 6 .307 0 .618-.026.926-.05.048.328.074.66.074 1 0 4.411-3.589 8-8 8zM8.5 9a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm7 2a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm-5 4a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/>
            </svg>
          </div>

          <div style={{ flex: 1, minWidth: '200px' }}>
            <h3 style={{
              fontSize: '18px',
              fontWeight: 600,
              color: '#111827',
              margin: '0 0 8px'
            }}>
              Cookie Consent
            </h3>
            <p style={{
              fontSize: '14px',
              color: '#374151',
              margin: 0,
              lineHeight: 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" style={{ color: '#3b82f6' }}>Privacy Policy</a>
            </p>
          </div>

          <div style={{
            display: 'flex',
            gap: '12px',
            flexShrink: 0,
            
          }}>
            <button
              onClick={declineCookies}
              style={{
                padding: '12px 24px',
                fontSize: '14px',
                fontWeight: 500,
                borderRadius: '8px',
                cursor: 'pointer',
                background: 'transparent',
                color: '#6b7280',
                border: '1px solid #e5e7eb',
              }}
            >
              Decline
            </button>
            <button
              onClick={acceptCookies}
              style={{
                padding: '12px 24px',
                fontSize: '14px',
                fontWeight: 500,
                borderRadius: '8px',
                cursor: 'pointer',
                background: '#3b82f6',
                color: '#ffffff',
                border: 'none',
              }}
            >
              Accept All
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default CookieConsent;