feat: ✨ add age-gating check
This commit is contained in:
parent
2ea575f229
commit
7f2c7edf76
4 changed files with 69 additions and 1 deletions
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
12
www/static/age_gate_check.js
Normal file
12
www/static/age_gate_check.js
Normal 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"
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue