Added content warning dialog.
This commit is contained in:
DebaucheryLibrarian
parent
5e7741afe8
commit
5b16941ec5
|
|
@ -3,6 +3,12 @@
|
|||
class="container"
|
||||
:class="theme"
|
||||
>
|
||||
<Warning
|
||||
v-if="showWarning"
|
||||
class="warning-container"
|
||||
@enter="closeWarning"
|
||||
/>
|
||||
|
||||
<transition name="slide">
|
||||
<Sidebar
|
||||
v-if="showSidebar"
|
||||
|
|
@ -23,6 +29,7 @@ import { mapState } from 'vuex';
|
|||
|
||||
import EventBus from '../../js/event-bus';
|
||||
|
||||
import Warning from './warning.vue';
|
||||
import Header from '../header/header.vue';
|
||||
import Sidebar from '../sidebar/sidebar.vue';
|
||||
|
||||
|
|
@ -34,6 +41,11 @@ function toggleSidebar(state) {
|
|||
this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
|
||||
}
|
||||
|
||||
function closeWarning() {
|
||||
this.showWarning = false;
|
||||
sessionStorage.setItem('warning', 'warned');
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
document.addEventListener('click', () => {
|
||||
EventBus.$emit('blur');
|
||||
|
|
@ -44,10 +56,12 @@ export default {
|
|||
components: {
|
||||
Header,
|
||||
Sidebar,
|
||||
Warning,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSidebar: false,
|
||||
showWarning: sessionStorage.getItem('warning') !== 'warned',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -58,6 +72,7 @@ export default {
|
|||
mounted,
|
||||
methods: {
|
||||
toggleSidebar,
|
||||
closeWarning,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<div class="warning-container">
|
||||
<div class="warning">
|
||||
<strong class="title">This website contains sexually explicit content</strong>
|
||||
|
||||
<span class="copy">By entering, you agree to the following</span>
|
||||
|
||||
<ul class="rules">
|
||||
<li class="rule">You are at least 18 years old, and a legal adult in your jurisdiction.</li>
|
||||
<li class="rule">You are prepared see, hear and read erotic and sexual material, some of which could be considered obscene or offensive by some.</li>
|
||||
<li class="rule">You understand that the majority of sexual acts on this website are fictional, performed by professional actors for entertainment purposes, and not representative of real-life interactions.</li>
|
||||
<li class="rule">Respect your sexual partners, communicate about each other's fantasies and limits, and take precautions to prevent sexually transmitted infections and unintended pregnancies.</li>
|
||||
</ul>
|
||||
|
||||
<div class="actions">
|
||||
<a
|
||||
href="https://www.google.com"
|
||||
class="button leave"
|
||||
>Leave</a>
|
||||
|
||||
<button
|
||||
class="button enter"
|
||||
@click="$emit('enter')"
|
||||
>Enter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'breakpoints';
|
||||
|
||||
.warning-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: var(--darken-extreme);
|
||||
backdrop-filter: blur(.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--text-light);
|
||||
width: 50rem;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.copy,
|
||||
.rules {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.copy {
|
||||
display: block;
|
||||
padding: 0 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rules {
|
||||
margin: 0 0 0 1rem;
|
||||
text-align: left;
|
||||
text-shadow: 0 0 3px var(--darken-extreme);
|
||||
}
|
||||
|
||||
.rule {
|
||||
padding: .5rem 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: var(--lighten-strong);
|
||||
|
||||
&.leave {
|
||||
background: var(--darken-strong);
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
|
||||
&.enter {
|
||||
background: var(--primary);
|
||||
font-weight: bold;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-micro) {
|
||||
.button.leave {
|
||||
padding: 1rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,6 +7,7 @@ $breakpoint4: 1500px;
|
|||
:root {
|
||||
/* --primary: #ff886c; */
|
||||
--primary: #ff6c88;
|
||||
--primary-strong: #ff4166;
|
||||
|
||||
--text-dark: #222;
|
||||
--text-light: #fff;
|
||||
|
|
|
|||
Loading…
Reference in New Issue