1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas legalverificationoverlay

Age Gate Modal

Modal de verificación de mayoría de edad con botones de confirmación y rechazo.

Age Verification

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

Uso

Copia y pega este código directamente en tu página de Astro:

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

<AgeVerificationOverlay>Content</AgeVerificationOverlay>
--- import { AgeGateModal } from 'astro-component-kit'; --- <AgeVerificationOverlay>Content</AgeVerificationOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/AgeGateModal.astro:

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>
--- --- <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>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
AgeGateModal.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
legalverificationoverlay