make the warning dialog a <dialog>
This commit is contained in:
parent
5e64e9ea1b
commit
43af72aa4d
3 changed files with 97 additions and 122 deletions
|
|
@ -17,27 +17,15 @@ script (Just _) = [b|<script src=/script/nsfw-warning.js type=module></script>|]
|
|||
dialog :: Maybe What -> Builder
|
||||
dialog Nothing = ""
|
||||
dialog (Just what) = [b|@0
|
||||
<div class=dialog id=nsfw-dialog>
|
||||
<div class=dialog-inner>
|
||||
<h1>cw: lewd art</h1>
|
||||
|
||||
<img class=dialog-icon src=/style/stop_hand.svg>
|
||||
|
||||
<div class=dialog-message>
|
||||
<p>
|
||||
$what contains pornographic content that is
|
||||
<strong>not suitable for minors</strong>.
|
||||
<p>
|
||||
by continuing, you are confirming that you are at least
|
||||
<strong>eighteen years old</strong>.
|
||||
</div>
|
||||
|
||||
<div class=dialog-buttons>
|
||||
<button id=nsfw-yes class=yes>i am an adult</button>
|
||||
<a href=//crouton.net referrerpolicy=no-referrer>
|
||||
<button id=nsfw-no class=no>i am not</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dialog id=nsfw-dialog>
|
||||
<h1>cw: lewd art</h1>
|
||||
<img src=/style/stop_hand.svg>
|
||||
<div> you must be an adult to view $what. no minors! </div>
|
||||
<form>
|
||||
<button id=nsfw-yes class=yes>i am an adult</button>
|
||||
<a href=//crouton.net referrerpolicy=no-referrer>
|
||||
<button id=nsfw-no class=no>i am not</button>
|
||||
</a>
|
||||
</form>
|
||||
</dialog>
|
||||
|]
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
const nsfwOk = 'nsfw-ok';
|
||||
|
||||
function dismiss() {
|
||||
const dialog = document.getElementById('nsfw-dialog')!;
|
||||
dialog.parentElement!.removeChild(dialog);
|
||||
}
|
||||
const dialog = document.getElementById('nsfw-dialog')! as HTMLDialogElement;
|
||||
|
||||
function yes() {
|
||||
localStorage.setItem(nsfwOk, '1');
|
||||
dismiss();
|
||||
dialog.close();
|
||||
}
|
||||
|
||||
function setup() {
|
||||
if (localStorage.getItem(nsfwOk)) {
|
||||
dismiss();
|
||||
} else {
|
||||
document.getElementById('nsfw-yes')!.onclick = yes;
|
||||
if (!localStorage.getItem(nsfwOk)) {
|
||||
(dialog.querySelector('#nsfw-yes') as HTMLElement).onclick = yes;
|
||||
// nsfw-no is a normal link
|
||||
|
||||
dialog.showModal();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,110 +1,101 @@
|
|||
.dialog {
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100vw; height: 100vh;
|
||||
margin: 0;
|
||||
z-index: 1000;
|
||||
dialog {
|
||||
&[open] {
|
||||
&::backdrop {
|
||||
background: hsl(340deg, 35%, 15%, 90%);
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
~ .page { filter: blur(15px); }
|
||||
|
||||
place-self: center;
|
||||
|
||||
display: grid;
|
||||
grid-template:
|
||||
"icon header"
|
||||
"icon text"
|
||||
"icon buttons"
|
||||
/ 1fr 3fr;
|
||||
gap: 0.5em 1.5em;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
|
||||
min-height: 20vh;
|
||||
max-width: 30em;
|
||||
padding: 1.5em 3em 2em;
|
||||
|
||||
background: var(--background);
|
||||
border: var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 0 50px #fff6;
|
||||
}
|
||||
|
||||
background: hsl(340deg, 35%, 15%, 90%);
|
||||
color: var(--text-col);
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.dialog ~ .page {
|
||||
filter: blur(15px);
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.dialog-inner {
|
||||
place-self: center;
|
||||
img {
|
||||
grid-area: icon;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template:
|
||||
"header header"
|
||||
"icon text"
|
||||
"buttons buttons"
|
||||
/ 1fr 3fr;
|
||||
grid-gap: 0.5em;
|
||||
align-items: center;
|
||||
div {
|
||||
grid-area: text;
|
||||
text-align: center;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
min-height: 20vh;
|
||||
max-width: 30em;
|
||||
padding: 1.5em 3em 2em;
|
||||
form {
|
||||
grid-area: buttons;
|
||||
|
||||
background: var(--background);
|
||||
border: var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.dialog h1 {
|
||||
margin: 0;
|
||||
grid-area: header;
|
||||
justify-self: center;
|
||||
}
|
||||
margin-top: 1em;
|
||||
|
||||
.dialog-icon {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
grid-area: icon;
|
||||
justify-self: center;
|
||||
}
|
||||
> * {
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-message {
|
||||
grid-area: text;
|
||||
justify-self: start;
|
||||
font-size: 125%;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 0.75em;
|
||||
padding: 0.5em 1em;
|
||||
|
||||
.dialog-buttons {
|
||||
grid-area: buttons;
|
||||
justify-self: center;
|
||||
font-family: Muller;
|
||||
font-weight: 600;
|
||||
font-size: inherit;
|
||||
color: black;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
margin-top: 1em;
|
||||
}
|
||||
cursor: pointer;
|
||||
|
||||
.dialog-buttons > * {
|
||||
margin: 0 1em;
|
||||
}
|
||||
a {
|
||||
inset: 0;
|
||||
width: max-content;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog button {
|
||||
border: none;
|
||||
border-radius: 0.75em;
|
||||
padding: 0.5em 1em;
|
||||
.yes {
|
||||
background: hsl(100deg, 70%, 80%);
|
||||
}
|
||||
|
||||
font-family: Muller;
|
||||
font-weight: 600;
|
||||
font-size: inherit;
|
||||
color: black;
|
||||
.no {
|
||||
background: hsl(5deg, 70%, 80%);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
p {
|
||||
text-align: left;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dialog button a {
|
||||
inset: 0;
|
||||
width: max-content;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.dialog .yes {
|
||||
background: hsl(100deg, 70%, 80%);
|
||||
}
|
||||
|
||||
.dialog .no {
|
||||
background: hsl(5deg, 70%, 80%);
|
||||
}
|
||||
|
||||
.dialog p {
|
||||
text-align: left;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.dialog strong {
|
||||
font-weight: 800;
|
||||
strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue