<div id="ageModal" class="age-overlay">
<div class="age-box">
<h2>Age Verification</h2>
<p>You must be 18 years or older to enter this site.</p>
<div class="actions">
<button class="btn-no" onclick="exitSite()">I am under 18</button>
<button class="btn-yes" onclick="enterSite()">I am 18+</button>
</div>
</div>
</div>
<div class="site-content">
<h1>Welcome to the Site</h1>
<p>Content visible only to verified users.</p>
<button onclick="resetAge()">Reset Verification</button>
</div>
.age-overlay {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.age-box {
background: #fff;
padding: 40px;
border-radius: 16px;
text-align: center;
max-width: 400px;
}
.age-box h2 {
margin-top: 0;
color: #1f2937;
}
.age-box p {
color: #4b5563;
margin-bottom: 30px;
}
.actions {
display: flex;
gap: 15px;
justify-content: center;
}
button {
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
border: none;
}
.btn-yes {
background: #2563eb;
color: white;
}
.btn-no {
background: #f3f4f6;
color: #374151;
}
.site-content {
padding: 50px;
text-align: center;
font-family: sans-serif;
}
const modal = document.getElementById("ageModal");
// Check if already verified
if (localStorage.getItem("ageVerified") === "true") {
modal.style.display = "none";
}
function enterSite() {
localStorage.setItem("ageVerified", "true");
modal.style.display = "none";
}
function exitSite() {
alert("You are not allowed to enter.");
// Redirect logic would go here
// window.location.href = "https://google.com";
}
function resetAge() {
localStorage.removeItem("ageVerified");
location.reload();
}
