|
<div id="cookie-banner" class="cookie-banner" style="display: none;">
|
|
<div class="cookie-banner-content">
|
|
<div class="cookie-banner-text">
|
|
<h3>Cookie Settings</h3>
|
|
<p>We use cookies to provide essential website functionality and improve your experience. For more information, please read our <a href="/cookies">Cookie Policy</a>.</p>
|
|
</div>
|
|
<div class="cookie-banner-actions">
|
|
<button id="cookie-reject" class="btn-outline">Reject All</button>
|
|
<button id="cookie-customize" class="btn-outline">Customize</button>
|
|
<button id="cookie-accept" class="btn-primary">Accept All</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cookie-preferences-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close" id="close-cookie-modal">×</span>
|
|
<h3>Cookie Preferences</h3>
|
|
<p>Manage your cookie preferences below. Some cookies are essential for the website to function and cannot be disabled.</p>
|
|
|
|
<div class="cookie-category">
|
|
<div class="cookie-category-header">
|
|
<label>
|
|
<input type="checkbox" id="cookie-necessary" checked disabled>
|
|
<strong>Strictly Necessary Cookies</strong>
|
|
</label>
|
|
</div>
|
|
<p>These cookies are essential for the website to function properly. They enable core functionality such as security and session management.</p>
|
|
</div>
|
|
|
|
<div class="cookie-category">
|
|
<div class="cookie-category-header">
|
|
<label>
|
|
<input type="checkbox" id="cookie-functional">
|
|
<strong>Functional Cookies</strong>
|
|
</label>
|
|
</div>
|
|
<p>These cookies allow the website to remember your preferences and provide enhanced features.</p>
|
|
</div>
|
|
|
|
<div class="cookie-category">
|
|
<div class="cookie-category-header">
|
|
<label>
|
|
<input type="checkbox" id="cookie-analytics">
|
|
<strong>Analytics Cookies</strong>
|
|
</label>
|
|
</div>
|
|
<p>These cookies help us understand how visitors interact with our website by collecting and reporting information anonymously.</p>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button id="save-cookie-preferences" class="btn-primary">Save Preferences</button>
|
|
<button id="cancel-cookie-preferences" class="btn-outline">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.cookie-banner {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--card-background);
|
|
border-top: 2px solid var(--border-color);
|
|
padding: 20px;
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.cookie-banner-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.cookie-banner-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.cookie-banner-text h3 {
|
|
margin: 0 0 10px 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.cookie-banner-text p {
|
|
margin: 0;
|
|
color: var(--light-text-color);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.cookie-banner-text a {
|
|
color: var(--accent-color);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cookie-banner-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.cookie-category {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background-color: var(--background-color);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.cookie-category-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.cookie-category-header label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cookie-category-header input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cookie-category p {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--light-text-color);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cookie-banner-content {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.cookie-banner-actions {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cookie-banner-actions button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const banner = document.getElementById('cookie-banner');
|
|
const acceptBtn = document.getElementById('cookie-accept');
|
|
const rejectBtn = document.getElementById('cookie-reject');
|
|
const customizeBtn = document.getElementById('cookie-customize');
|
|
const modal = document.getElementById('cookie-preferences-modal');
|
|
const closeModal = document.getElementById('close-cookie-modal');
|
|
const savePreferences = document.getElementById('save-cookie-preferences');
|
|
const cancelPreferences = document.getElementById('cancel-cookie-preferences');
|
|
|
|
function getCookieConsent() {
|
|
return localStorage.getItem('cookie-consent');
|
|
}
|
|
|
|
function setCookieConsent(value) {
|
|
localStorage.setItem('cookie-consent', value);
|
|
}
|
|
|
|
function getCookiePreferences() {
|
|
const prefs = localStorage.getItem('cookie-preferences');
|
|
return prefs ? JSON.parse(prefs) : { necessary: true, functional: false, analytics: false };
|
|
}
|
|
|
|
function setCookiePreferences(prefs) {
|
|
localStorage.setItem('cookie-preferences', JSON.stringify(prefs));
|
|
}
|
|
|
|
if (!getCookieConsent()) {
|
|
banner.style.display = 'block';
|
|
}
|
|
|
|
acceptBtn.addEventListener('click', function() {
|
|
setCookieConsent('accepted');
|
|
setCookiePreferences({ necessary: true, functional: true, analytics: true });
|
|
banner.style.display = 'none';
|
|
});
|
|
|
|
rejectBtn.addEventListener('click', function() {
|
|
setCookieConsent('rejected');
|
|
setCookiePreferences({ necessary: true, functional: false, analytics: false });
|
|
banner.style.display = 'none';
|
|
});
|
|
|
|
customizeBtn.addEventListener('click', function() {
|
|
const prefs = getCookiePreferences();
|
|
document.getElementById('cookie-functional').checked = prefs.functional;
|
|
document.getElementById('cookie-analytics').checked = prefs.analytics;
|
|
modal.style.display = 'block';
|
|
});
|
|
|
|
closeModal.addEventListener('click', function() {
|
|
modal.style.display = 'none';
|
|
});
|
|
|
|
cancelPreferences.addEventListener('click', function() {
|
|
modal.style.display = 'none';
|
|
});
|
|
|
|
savePreferences.addEventListener('click', function() {
|
|
const prefs = {
|
|
necessary: true,
|
|
functional: document.getElementById('cookie-functional').checked,
|
|
analytics: document.getElementById('cookie-analytics').checked
|
|
};
|
|
setCookieConsent('customized');
|
|
setCookiePreferences(prefs);
|
|
modal.style.display = 'none';
|
|
banner.style.display = 'none';
|
|
});
|
|
|
|
window.addEventListener('click', function(event) {
|
|
if (event.target === modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|