MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

(function () {

const KEY = "alphax_age_terms";
const MAX_AGE = 30 * 24 * 60 * 60 * 1000;

const saved = localStorage.getItem(KEY);

if (saved && (Date.now() - saved < MAX_AGE)) {
    return;
}

const style = document.createElement("style");

style.innerHTML = `
#age-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(8px);
display:flex;
align-items:center;
justify-content:center;
z-index:999999;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
}

#age-box{
background:#0f0f12;
border:1px solid rgba(255,255,255,0.08);
border-radius:20px;
padding:40px 34px;
max-width:520px;
width:90%;
color:white;
box-shadow:0 25px 80px rgba(0,0,0,0.6);
text-align:center;
}

#age-box h2{
margin-top:0;
font-size:32px;
margin-bottom:18px;
}

#age-text{
color:#cfcfd6;
line-height:1.6;
margin-bottom:28px;
}

#checks{
text-align:left;
margin-bottom:28px;
}

#checks label{
display:block;
margin:12px 0;
font-size:15px;
color:#e4e4ea;
cursor:pointer;
}

#checks input{
margin-right:10px;
}

#buttons{
display:flex;
gap:14px;
justify-content:center;
margin-top:10px;
}

#enter{
background:#34d27a;
color:#05110b;
border:none;
padding:14px 26px;
border-radius:10px;
font-size:16px;
font-weight:700;
cursor:pointer;
opacity:0.4;
}

#enter.active{
opacity:1;
}

#exit{
background:#e74c3c;
border:none;
color:white;
padding:14px 22px;
border-radius:10px;
font-size:16px;
cursor:pointer;
}

#links{
margin-top:22px;
font-size:13px;
opacity:0.8;
}

#links a{
color:#bbb;
margin:0 10px;
text-decoration:none;
}

#links a:hover{
color:white;
}
`;

document.head.appendChild(style);

const overlay = document.createElement("div");
overlay.id = "age-overlay";

overlay.innerHTML = `
<div id="age-box">

<h2>18+ Access</h2>

<div id="age-text">
This website contains adult educational content.<br>
You must confirm the following to enter.
</div>

<div id="checks">

<label>
<input type="checkbox" id="c1">
I confirm that I am at least 18 years old
</label>

<label>
<input type="checkbox" id="c2">
I agree to the Terms & Conditions
</label>

<label>
<input type="checkbox" id="c3">
I agree to the Privacy Policy
</label>

</div>

<div id="buttons">

<button id="enter">Enter</button>
<button id="exit">Exit</button>

</div>

<div id="links">
<a href="/index.php?title=Terms_and_Conditions">T&C</a>
<a href="/index.php?title=Datenschutz">Privacy Policy</a>
</div>

</div>
`;

document.body.appendChild(overlay);

const c1 = document.getElementById("c1");
const c2 = document.getElementById("c2");
const c3 = document.getElementById("c3");
const enter = document.getElementById("enter");

function checkAll(){
if(c1.checked && c2.checked && c3.checked){
enter.classList.add("active");
enter.disabled=false;
}else{
enter.classList.remove("active");
enter.disabled=true;
}
}

c1.onchange=checkAll;
c2.onchange=checkAll;
c3.onchange=checkAll;

enter.disabled=true;

enter.onclick=function(){
localStorage.setItem(KEY, Date.now());
overlay.remove();
};

document.getElementById("exit").onclick=function(){
window.location.href="https://google.com";
};

})();