lucidergs/dragon_fire
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add age-gating check

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
www/router.php
View file

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

12
www/static/age_gate_check.js Normal file
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"
}

39
www/static/dergstyle.css
View file

@ -52,6 +52,45 @@ a:hover {
color: var(--highlight_2); 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 { #main_header {
overflow: hidden; overflow: hidden;
position: relative; position: relative;

17
www/templates/root.html
View file

@ -35,13 +35,28 @@
</script> </script>
</head> </head>
<body> <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"> <header id="main_header">
<img id="main_banner_img"></img> <img id="main_banner_img"></img>
<a id="main_banner_img_link" href="/gallery"> full picture</a> <a id="main_banner_img_link" href="/gallery"> full picture</a>
<script src="/static/banner.js"></script> <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 %} {% block second_title %}{% endblock %}
<div id="title_separator"></div> <div id="title_separator"></div>