Модальные окна cookielegaloverlay
Cookie Consent
Плавающий баннер файлов cookie в стеклянном стиле с кнопками согласия.
Живое превью
We use cookies to improve your experience. Learn more
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { CookieConsent } from 'astro-component-kit';
---
<CookieBannerGlass>Content</CookieBannerGlass>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/CookieConsent.astro:
astro
---
---
<div class="cookie-bar">
<div class="text">We use cookies to improve your experience. <a href="#">Learn more</a></div>
<div class="acts"><button class="opt">Options</button><button class="acc">Accept All</button></div>
</div>
<style>
.cookie-bar { position: fixed; bottom: 2rem; left: 2rem; right: 2rem; max-width: 600px; margin: 0 auto; background: rgba(15,23,42,0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 1.25rem; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.text { color: #e2e8f0; font-size: 0.85rem; }
.acts { display: flex; gap: 0.75rem; }
button { padding: 0.5rem 1rem; border-radius: 8px; border: none; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.opt { background: transparent; color: #fff; border: 1px solid #334155; }
.acc { background: #6366f1; color: #fff; }
</style>Краткая информация
- Категория
- Модальные окна
- Имя файла
CookieConsent.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- cookielegaloverlay