Модальные окна legalverificationoverlay

Age Gate Modal

Окно подтверждения возраста с кнопками согласия и перенаправления.

Age Verification

Please confirm you are 18 or older to view this site.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { AgeGateModal } from 'astro-component-kit';
---

<AgeVerificationOverlay>Content</AgeVerificationOverlay>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/AgeGateModal.astro:

---
---
<div class="age-gate">
  <div class="age-card">
    <h2>Age Verification</h2>
    <p>Please confirm you are 18 or older to view this site.</p>
    <div class="acts-row"><button class="no">Exit</button><button class="yes">I am 18+</button></div>
  </div>
</div>
<style>
  .age-gate { position: fixed; inset: 0; background: #000; z-index: 9999; display: grid; place-items: center; }
  .age-card { text-align: center; color: #fff; max-width: 350px; padding: 2rem; }
  h2 { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; }
  p { color: #94a3b8; line-height: 1.6; margin-bottom: 2.5rem; }
  .acts-row { display: flex; gap: 1rem; }
  button { flex: 1; padding: 1rem; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; }
  .no { background: #1e293b; color: #fff; }
  .yes { background: #6366f1; color: #fff; }
  button:hover { transform: translateY(-2px); }
</style>

Краткая информация

Категория: Модальные окна
Имя файла: AgeGateModal.astro
Зависимости: Нет — чистый Astro + CSS
Теги: legalverificationoverlay