feat: add age-gating check

This commit is contained in:
David Bailey 2024-01-11 16:54:37 +01:00
parent 2ea575f229
commit 7f2c7edf76
4 changed files with 69 additions and 1 deletions

View file

@ -107,6 +107,8 @@ function render_twig($template, $args = []) {
$args['site_config'] = $SITE_CONFIG;
$args['age_gate'] = (!isset($_COOKIE['AgeConfirmed'])) && isset($SITE_CONFIG['age_gate']);
echo $twig->render($template, $args);
}

View file

@ -0,0 +1,12 @@
function confirmAge() {
let ageGate = document.getElementById("age_gate_block");
ageGate.style.opacity = 0;
setTimeout(() => {
ageGate.parentElement.removeChild(ageGate);
}, 1000);
document.cookie += "AgeConfirmed=true; path=/; max-age=31536000"
}

View file

@ -52,6 +52,45 @@ a:hover {
color: var(--highlight_2);
}
#age_gate_block {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(20px);
transition: opacity 0.8s linear;
}
#age_gate_block div {
background-color: var(--bg_3);
border-radius: 1em;
padding: 1em;
width: 12em;
margin:0 auto;
display: table;
position: absolute;
left: 0;
right:0;
top: 50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
#age_gate_block p {
min-height: 5em;
}
#main_header {
overflow: hidden;
position: relative;

View file

@ -35,13 +35,28 @@
</script>
</head>
<body>
{%if age_gate %}
<div id="age_gate_block">
<div>
<p>
This website may contain content meant for an 18+ audience.
</p>
<input type="button" onclick="confirmAge()" value="I understand and am over 18.">
</div>
</div>
<script src="/static/age_gate_check.js"></script>
{% endif %}
<header id="main_header">
<img id="main_banner_img"></img>
<a id="main_banner_img_link" href="/gallery"> full picture</a>
<script src="/static/banner.js"></script>
<h1 id="big_title">{% block big_title %}The dergsite{%endblock%}</h1>
<h1 id="big_title">{% block big_title %}{{og.site_name}}{%endblock%}</h1>
{% block second_title %}{% endblock %}
<div id="title_separator"></div>