MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
const AGE_KEY = "ageVerifiedTime"; | const AGE_KEY = "ageVerifiedTime"; | ||
const CONSENT_KEY = "analyticsConsent"; | |||
const MAX_AGE = 30 * 24 * 60 * 60 * 1000; | const MAX_AGE = 30 * 24 * 60 * 60 * 1000; | ||
const | const savedAge = localStorage.getItem(AGE_KEY); | ||
if ( | if (savedAge && (Date.now() - Number(savedAge) < MAX_AGE)) { | ||
const consent = localStorage.getItem(CONSENT_KEY); | |||
if (consent === "granted") { | |||
loadGoogleAnalytics(); | |||
} | |||
return; | return; | ||
} | } | ||
| Line 19: | Line 24: | ||
height:100%; | height:100%; | ||
backdrop-filter:blur(8px); | backdrop-filter:blur(8px); | ||
background:rgba(0,0,0,0. | background:rgba(0,0,0,0.85); | ||
display:flex; | display:flex; | ||
align-items:center; | align-items:center; | ||
| Line 31: | Line 36: | ||
color:white; | color:white; | ||
padding:40px; | padding:40px; | ||
border-radius: | border-radius:12px; | ||
max-width: | max-width:460px; | ||
text-align:center; | text-align:center; | ||
box-shadow:0 0 40px rgba(0,0,0,0.7); | box-shadow:0 0 40px rgba(0,0,0,0.7); | ||
| Line 48: | Line 53: | ||
padding:12px 22px; | padding:12px 22px; | ||
margin:8px; | margin:8px; | ||
font-size: | font-size:15px; | ||
border:none; | border:none; | ||
border-radius:6px; | border-radius:6px; | ||
| Line 54: | Line 59: | ||
} | } | ||
#age- | #age-enter-analytics{ | ||
background:#2ecc71; | background:#2ecc71; | ||
color:white; | |||
} | |||
#age-enter-essential{ | |||
background:#3498db; | |||
color:white; | color:white; | ||
} | } | ||
| Line 65: | Line 75: | ||
#age-links{ | #age-links{ | ||
margin-top: | margin-top:18px; | ||
font-size:12px; | font-size:12px; | ||
opacity:0. | opacity:0.85; | ||
line-height:1.5; | |||
} | } | ||
| Line 73: | Line 84: | ||
color:#aaa; | color:#aaa; | ||
margin:0 8px; | margin:0 8px; | ||
} | |||
#cookie-note{ | |||
margin-top:14px; | |||
font-size:12px; | |||
color:#ccc; | |||
} | } | ||
`; | `; | ||
| Line 86: | Line 103: | ||
<h2>18+ Age Verification</h2> | <h2>18+ Age Verification</h2> | ||
<p>This website contains adult content.</p> | <p>This website contains adult educational content.</p> | ||
<p>You must be at least <b>18 years old</b> to enter.</p> | <p>You must be at least <b>18 years old</b> to enter.</p> | ||
<div id="cookie-note"> | |||
We use essential storage for site functionality. You may optionally allow analytics. | |||
</div> | |||
<div id="age-buttons"> | <div id="age-buttons"> | ||
<button id="age- | <button id="age-enter-analytics">Enter with Analytics</button> | ||
<button id="age-enter-essential">Enter Essential Only</button> | |||
<button id="age-no">Leave</button> | <button id="age-no">Leave</button> | ||
</div> | </div> | ||
| Line 104: | Line 126: | ||
document.body.appendChild(overlay); | document.body.appendChild(overlay); | ||
document.getElementById("age- | function saveAgeVerification() { | ||
localStorage.setItem(AGE_KEY, String(Date.now())); | |||
} | |||
function saveAnalyticsConsent(value) { | |||
localStorage.setItem(CONSENT_KEY, value); | |||
} | |||
function loadGoogleAnalytics() { | |||
if (window.__gaLoaded) return; | |||
window.__gaLoaded = true; | |||
window.dataLayer = window.dataLayer || []; | |||
function gtag(){ | |||
dataLayer.push(arguments); | |||
} | |||
window.gtag = gtag; | |||
gtag('consent', 'default', { | |||
analytics_storage: 'granted' | |||
}); | |||
const script = document.createElement('script'); | |||
script.async = true; | |||
script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'; | |||
document.head.appendChild(script); | |||
gtag('js', new Date()); | |||
gtag('config', 'G-XXXXXXXXXX', { | |||
anonymize_ip: true | |||
}); | |||
} | |||
document.getElementById("age-enter-analytics").onclick = function(){ | |||
saveAgeVerification(); | |||
saveAnalyticsConsent("granted"); | |||
overlay.remove(); | |||
loadGoogleAnalytics(); | |||
}; | |||
document.getElementById("age-enter-essential").onclick = function(){ | |||
saveAgeVerification(); | |||
saveAnalyticsConsent("denied"); | |||
overlay.remove(); | overlay.remove(); | ||
}; | }; | ||
Revision as of 21:02, 15 March 2026
(function () {
const AGE_KEY = "ageVerifiedTime";
const CONSENT_KEY = "analyticsConsent";
const MAX_AGE = 30 * 24 * 60 * 60 * 1000;
const savedAge = localStorage.getItem(AGE_KEY);
if (savedAge && (Date.now() - Number(savedAge) < MAX_AGE)) {
const consent = localStorage.getItem(CONSENT_KEY);
if (consent === "granted") {
loadGoogleAnalytics();
}
return;
}
const style = document.createElement("style");
style.innerHTML = `
#age-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
backdrop-filter:blur(8px);
background:rgba(0,0,0,0.85);
display:flex;
align-items:center;
justify-content:center;
z-index:999999;
font-family:Arial,sans-serif;
}
#age-box{
background:#111;
color:white;
padding:40px;
border-radius:12px;
max-width:460px;
text-align:center;
box-shadow:0 0 40px rgba(0,0,0,0.7);
}
#age-box h2{
margin-top:0;
}
#age-buttons{
margin-top:20px;
}
#age-buttons button{
padding:12px 22px;
margin:8px;
font-size:15px;
border:none;
border-radius:6px;
cursor:pointer;
}
#age-enter-analytics{
background:#2ecc71;
color:white;
}
#age-enter-essential{
background:#3498db;
color:white;
}
#age-no{
background:#e74c3c;
color:white;
}
#age-links{
margin-top:18px;
font-size:12px;
opacity:0.85;
line-height:1.5;
}
#age-links a{
color:#aaa;
margin:0 8px;
}
#cookie-note{
margin-top:14px;
font-size:12px;
color:#ccc;
}
`;
document.head.appendChild(style);
const overlay = document.createElement("div");
overlay.id = "age-overlay";
overlay.innerHTML = `
<div id="age-box">
<h2>18+ Age Verification</h2>
<p>This website contains adult educational content.</p>
<p>You must be at least <b>18 years old</b> to enter.</p>
<div id="cookie-note">
We use essential storage for site functionality. You may optionally allow analytics.
</div>
<div id="age-buttons">
<button id="age-enter-analytics">Enter with Analytics</button>
<button id="age-enter-essential">Enter Essential Only</button>
<button id="age-no">Leave</button>
</div>
<div id="age-links">
<a href="/index.php?title=Impressum">Impressum</a>
<a href="/index.php?title=Datenschutz">Privacy</a>
</div>
</div>
`;
document.body.appendChild(overlay);
function saveAgeVerification() {
localStorage.setItem(AGE_KEY, String(Date.now()));
}
function saveAnalyticsConsent(value) {
localStorage.setItem(CONSENT_KEY, value);
}
function loadGoogleAnalytics() {
if (window.__gaLoaded) return;
window.__gaLoaded = true;
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
window.gtag = gtag;
gtag('consent', 'default', {
analytics_storage: 'granted'
});
const script = document.createElement('script');
script.async = true;
script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
document.head.appendChild(script);
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX', {
anonymize_ip: true
});
}
document.getElementById("age-enter-analytics").onclick = function(){
saveAgeVerification();
saveAnalyticsConsent("granted");
overlay.remove();
loadGoogleAnalytics();
};
document.getElementById("age-enter-essential").onclick = function(){
saveAgeVerification();
saveAnalyticsConsent("denied");
overlay.remove();
};
document.getElementById("age-no").onclick = function(){
window.location.href="https://google.com";
};
})();