48 lines
2.0 KiB
HTML
48 lines
2.0 KiB
HTML
<div class="cookie-banner" id="cookieBanner">
|
|
<p class="cookie-banner-text">
|
|
{{ t.cookie_banner_text }}
|
|
<a href="/privacy?lang={{ lang.code() }}">{{ t.cookie_privacy_link }}</a>
|
|
</p>
|
|
<button type="button" class="cookie-banner-accept" id="cookieAccept">{{ t.cookie_banner_accept }}</button>
|
|
</div>
|
|
<style>
|
|
.cookie-banner {
|
|
display: none;
|
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
|
|
flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: center;
|
|
padding: .85rem 1.1rem;
|
|
background: rgba(26, 26, 46, .95); color: #fff;
|
|
box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
.cookie-banner.is-open { display: flex; }
|
|
.cookie-banner-text { margin: 0; font-size: .88rem; line-height: 1.45; max-width: 720px; }
|
|
.cookie-banner-text a { color: #b9b2ff; text-decoration: underline; }
|
|
.cookie-banner-accept {
|
|
flex: 0 0 auto; border: none; cursor: pointer;
|
|
padding: .6rem 1.6rem; border-radius: 10px;
|
|
background: #6c63ff; color: #fff; font-weight: 700; font-size: .9rem;
|
|
transition: background .18s, transform .18s;
|
|
}
|
|
.cookie-banner-accept:hover { background: #5a52d5; transform: translateY(-1px); }
|
|
@media (max-width: 600px) {
|
|
.cookie-banner.is-open { flex-direction: column; text-align: center; padding: 1rem; gap: .7rem; }
|
|
.cookie-banner-accept { width: 100%; }
|
|
}
|
|
</style>
|
|
<script>
|
|
(function () {
|
|
var KEY = 'cookie_consent';
|
|
var banner = document.getElementById('cookieBanner');
|
|
if (!banner) { return; }
|
|
var accepted;
|
|
try { accepted = window.localStorage.getItem(KEY) === '1'; } catch (e) { accepted = false; }
|
|
if (accepted) { return; }
|
|
banner.classList.add('is-open');
|
|
document.getElementById('cookieAccept').addEventListener('click', function () {
|
|
try { window.localStorage.setItem(KEY, '1'); } catch (e) {}
|
|
banner.classList.remove('is-open');
|
|
});
|
|
})();
|
|
</script>
|