114 lines
3.9 KiB
Plaintext
114 lines
3.9 KiB
Plaintext
#load "../../lib/app.uce"
|
|
|
|
COMPONENT(Request& context)
|
|
{
|
|
|
|
<>
|
|
<div id="cookie-consent" style="
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border);
|
|
box-shadow: var(--shadow-xl);
|
|
z-index: 9998;
|
|
padding: 1.5rem;
|
|
transform: translateY(100%);
|
|
transition: transform 0.3s ease;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
" aria-live="polite">
|
|
<div style="
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
">
|
|
<div style="flex: 1; min-width: 300px;">
|
|
<div style="
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke='var(--primary)' stroke-width="2" style="flex-shrink: 0;">
|
|
<path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2M21 9V7L15 1L13 3L15 5H3V21A2 2 0 0 0 5 23H19A2 2 0 0 0 21 21V11L19 13V20H5V7H21M9 11V13H7V11H9M13 11V13H11V11H13M17 11V13H15V11H17M9 15V17H7V15H9M13 15V17H11V15H13M17 15V17H15V15H17Z"/>
|
|
</svg>
|
|
<h3 style="margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-primary);">Cookie Notice</h3>
|
|
</div>
|
|
<p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5;">
|
|
We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic.
|
|
<a href="#" id="cookie-policy-link" style="color: var(--primary); text-decoration: none;">Learn more</a>
|
|
</p>
|
|
</div>
|
|
<div style="display: flex; gap: 0.75rem; flex-shrink: 0; align-items: center;">
|
|
<button id="cookie-reject" style="padding: 0.75rem 1.5rem; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); border-radius: 0.5rem; cursor: pointer;">Reject All</button>
|
|
<button id="cookie-accept" style="padding: 0.75rem 1.5rem; border: 1px solid var(--primary); background: var(--primary); color: white; border-radius: 0.5rem; cursor: pointer;">Accept All</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
let cookieConsent = document.getElementById('cookie-consent');
|
|
let acceptButton = document.getElementById('cookie-accept');
|
|
let rejectButton = document.getElementById('cookie-reject');
|
|
let policyLink = document.getElementById('cookie-policy-link');
|
|
if (!cookieConsent) return;
|
|
|
|
let COOKIE_NAME = 'cookie_consent';
|
|
let COOKIE_EXPIRY_DAYS = 365;
|
|
|
|
function setCookie(name, value, days) {
|
|
let expires = new Date();
|
|
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
|
|
document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/;SameSite=Lax';
|
|
}
|
|
|
|
function getCookie(name) {
|
|
let nameEQ = name + '=';
|
|
let ca = document.cookie.split(';');
|
|
for (let i = 0; i < ca.length; i++) {
|
|
let c = ca[i];
|
|
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
|
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function hideBanner() {
|
|
cookieConsent.style.transform = 'translateY(100%)';
|
|
setTimeout(() => {
|
|
cookieConsent.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
|
|
let existingConsent = getCookie(COOKIE_NAME);
|
|
if (!existingConsent) {
|
|
setTimeout(() => {
|
|
cookieConsent.style.transform = 'translateY(0)';
|
|
}, 1);
|
|
}
|
|
|
|
acceptButton.addEventListener('click', function() {
|
|
setCookie(COOKIE_NAME, 'accepted', COOKIE_EXPIRY_DAYS);
|
|
hideBanner();
|
|
});
|
|
|
|
rejectButton.addEventListener('click', function() {
|
|
setCookie(COOKIE_NAME, 'rejected', COOKIE_EXPIRY_DAYS);
|
|
hideBanner();
|
|
});
|
|
|
|
policyLink.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
window.open('https://example.com/privacy-policy', '_blank');
|
|
});
|
|
}());
|
|
</script>
|
|
</>
|
|
}
|