#cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding: 20px;
border-top: 1px solid #ccc;
text-align: center;
z-index: 9999;
font-family: Arial, sans-serif;
}
#cookie-banner button {
margin: 5px;
padding: 8px 16px;
cursor: pointer;
}
#cookie-settings {
margin-top: 15px;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.cookie-toggle {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.cookie-toggle span {
margin-left: 10px;
}
/* Toggle switch */
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: “”;
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #4caf50;
}
input:checked + .slider:before {
transform: translateX(20px);
}
document.addEventListener(“DOMContentLoaded”, function() {
const banner = document.getElementById(“cookie-banner”);
const customize = document.getElementById(“customize”);
const settings = document.getElementById(“cookie-settings”);
const save = document.getElementById(“save-preferences”);
const acceptAll = document.getElementById(“accept-all”);
const rejectAll = document.getElementById(“reject-all”);
const analytics = document.getElementById(“analytics-cookies”);
const marketing = document.getElementById(“marketing-cookies”);
// Show banner only if consent not already given
const storedConsent = localStorage.getItem(‘cookieConsent’);
if(!storedConsent) {
banner.style.display = ‘block’;
} else {
const consent = JSON.parse(storedConsent);
console.log(“Cookie consent loaded:”, consent);
// TODO: Add code here to block scripts if not consented
}
// Toggle customize settings
customize.addEventListener(“click”, () => {
settings.style.display = settings.style.display === ‘none’ ? ‘block’ : ‘none’;
});
// Save customized preferences
save.addEventListener(“click”, () => {
const consent = {
essential: true,
analytics: analytics.checked,
marketing: marketing.checked
};
localStorage.setItem(‘cookieConsent’, JSON.stringify(consent));
banner.style.display = ‘none’;
console.log(“Consent saved:”, consent);
});
// Accept all cookies
acceptAll.addEventListener(“click”, () => {
const consent = {essential:true, analytics:true, marketing:true};
localStorage.setItem(‘cookieConsent’, JSON.stringify(consent));
banner.style.display = ‘none’;
console.log(“All cookies accepted”);
});
// Reject all non-essential cookies
rejectAll.addEventListener(“click”, () => {
const consent = {essential:true, analytics:false, marketing:false};
localStorage.setItem(‘cookieConsent’, JSON.stringify(consent));
banner.style.display = ‘none’;
console.log(“Non-essential cookies rejected”);
});
});
diana grigorescu 