feat: new cookie dialog

kurozenzen · Feb 18, 2024 · dc01efe · dc01efe
1 parent 5ff5326
commit dc01efe
Show file tree

Hide file tree

Showing 13 changed files with 125 additions and 55 deletions.
diff --git a/src/app.html b/src/app.html
@@ -20,6 +20,6 @@
 	</head>
 
 	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/kurosearch/cookie-message/CookieMessage.svelte b/src/lib/components/kurosearch/cookie-message/CookieMessage.svelte
@@ -1,34 +1,118 @@
-<script>
+<script lang="ts">
 	import TextButton from '$lib/components/pure/text-button/TextButton.svelte';
 	import cookiesAccepted from '$lib/store/cookies-accepted-store';
-	import { fly } from 'svelte/transition';
+	import LynxMain from '../../../../routes/LynxMain.svelte';
+
+	const accept = () => {
+		$cookiesAccepted = true;
+		document.documentElement.dataset.cookies = 'true';
+	};
+
+	const leave = () => {
+		history.back();
+	};
 </script>
 
-<section out:fly={{ y: 200, duration: 200 }}>
-	<div>
-		<span>This website uses cookies.</span>
-		<TextButton title="Accept cookies" on:click={() => cookiesAccepted.set(true)}>Ok</TextButton>
-	</div>
-</section>
+<svelte:head>
+	<script lang="ts">
+		const cookies = localStorage.getItem('kurosearch:cookies-accepted') ?? 'false';
+		document.documentElement.dataset.cookies = cookies;
+	</script>
+</svelte:head>
+
+<div id="cookie-dialog" class="backdrop">
+	<section>
+		<LynxMain />
+		<h1>kurosearch</h1>
+		<h2>Terms of Use</h2>
+		<span />
+		<h3>Mature Content</h3>
+		<p>
+			This website contains mature content. By using this website you confirm that you are at
+			legally allowed to view such content.
+		</p>
+		<span />
+		<h3>Use of Cookies</h3>
+		<p>Additinally, this website uses cookies to provide functionality.</p>
+		<div class="row">
+			<TextButton title="Accept terms of use" on:click={accept}>Accept</TextButton>
+			<TextButton title="Leave website" type="secondary" on:click={leave}>Leave</TextButton>
+		</div>
+	</section>
+</div>
 
 <style>
 	section {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		width: 100vw;
+		display: flex;
+		flex-direction: column;
+		background-color: var(--background-0);
+		gap: var(--grid-gap);
+		padding: var(--grid-gap);
+		max-width: 500px;
+		border-radius: var(--border-radius-large);
+	}
+
+	h1 {
+		font-family: 'Zen Kaku Gothic New', sans-serif;
+		font-size: 72px;
+		color: var(--accent);
+		margin-block: -0.25em;
+	}
+
+	@media (max-width: 600px) {
+		h1 {
+			font-size: 12vw;
+		}
+	}
+
+	span {
 		background-color: var(--background-1);
-		z-index: var(--z-dialog);
+		height: 2px;
 	}
 
-	div {
-		max-width: var(--body-width);
-		margin: auto;
+	h1,
+	h2,
+	h3,
+	p {
+		text-align: center;
+	}
 
+	:global(:root[data-cookies='false'] .backdrop) {
 		display: flex;
+	}
+
+	.backdrop {
+		z-index: var(--z-dialog);
+		position: fixed;
+		display: none;
+		justify-content: center;
 		align-items: center;
-		justify-content: space-between;
+		width: 100vw;
+		height: 100vh;
+		backdrop-filter: blur(10px);
+		overflow: hidden;
+	}
+
+	@media not (min-width: 600px) {
+		.backdrop {
+			background-color: var(--background-0);
+		}
+	}
+
+	@media (min-width: 600px) {
+		section {
+			border: solid 2px crimson;
+			box-shadow: 0 0 100px 100px black;
+		}
+	}
+
+	.row {
+		align-self: center;
+		display: flex;
 		gap: var(--grid-gap);
-		padding: var(--grid-gap);
+	}
+
+	:global(:root[data-cookies='false'] body) {
+		overflow: hidden;
 	}
 </style>
diff --git a/src/lib/components/kurosearch/media-gif/Gif.svelte b/src/lib/components/kurosearch/media-gif/Gif.svelte
@@ -90,8 +90,7 @@
 
 	@container (min-width: 800px) {
 		img {
-			--radius: calc(2 * var(--border-radius));
-			border-radius: var(--radius) var(--radius) 0 0;
+			border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 		}
 	}
 </style>
diff --git a/src/lib/components/kurosearch/media-image/Image.svelte b/src/lib/components/kurosearch/media-image/Image.svelte
@@ -49,8 +49,7 @@
 
 	@container (min-width: 800px) {
 		img {
-			--radius: calc(2 * var(--border-radius));
-			border-radius: var(--radius) var(--radius) 0 0;
+			border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 		}
 	}
 

diff --git a/src/lib/components/kurosearch/media-video/Video.svelte b/src/lib/components/kurosearch/media-video/Video.svelte
@@ -164,8 +164,7 @@
 
 	@container (min-width: 800px) {
 		video {
-			--radius: calc(2 * var(--border-radius));
-			border-radius: var(--radius) var(--radius) 0 0;
+			border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 		}
 	}
 

diff --git a/src/lib/components/kurosearch/post/SingleColumnPost.svelte b/src/lib/components/kurosearch/post/SingleColumnPost.svelte
@@ -104,8 +104,7 @@
 
 	@container (min-width: 800px) {
 		.details {
-			--radius: calc(2 * var(--border-radius));
-			border-radius: 0 0 var(--radius) var(--radius);
+			border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
 		}
 	}
 

diff --git a/src/lib/components/pure/dialog/Dialog.svelte b/src/lib/components/pure/dialog/Dialog.svelte
@@ -25,14 +25,12 @@
 </script>
 
 <dialog bind:this={dialog} on:close use:onpopstate={onPopState}>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<slot />
 </dialog>
 
 <style>
 	dialog {
-		border-radius: calc(2 * var(--border-radius));
+		border-radius: var(--border-radius-large);
 		background-color: var(--background-0);
 		z-index: var(--z-dialog);
 		padding: var(--grid-gap);

diff --git a/src/lib/store/cookies-accepted-store.ts b/src/lib/store/cookies-accepted-store.ts
@@ -1,15 +1,4 @@
-import { boolParser, boolSerializer, persistentWritable } from './persistent-store';
+import { createBoolStore } from './generic/bool-store';
 import { StoreKey } from './store-keys';
 
-const createCookiesAcceptedStore = () => {
-	const initial = false;
-	const { subscribe, set } = persistentWritable(
-		StoreKey.CookiesAccepted,
-		initial,
-		boolSerializer,
-		boolParser
-	);
-	return { subscribe, set, reset: () => set(initial) };
-};
-
-export default createCookiesAcceptedStore();
+export default createBoolStore(StoreKey.CookiesAccepted, false);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
 	import wideLayoutEnabled from '$lib/store/wide-layout-enabled-store';
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
+	import CookieMessage from '$lib/components/kurosearch/cookie-message/CookieMessage.svelte';
 	import './reset.css';
 	import './fonts.css';
 	import './defaults.css';
@@ -36,6 +37,8 @@
 	</script>
 </svelte:head>
 
+<CookieMessage />
+
 <header>
 	<nav>
 		<CodiconLink

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import LynxMain from './LynxMain.svelte';
-
 	import { browser } from '$app/environment';
 	import CreateSupertagDialog from '$lib/components/kurosearch/dialog-create-supertag/CreateSupertagDialog.svelte';
 	import SearchError from '$lib/components/kurosearch/error-search/SearchError.svelte';
@@ -28,10 +27,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import resultColumns from '$lib/store/result-columns-store';
 	import LoadingAnimation from '$lib/components/pure/loading-animation/LoadingAnimation.svelte';
-	import cookiesAccepted from '$lib/store/cookies-accepted-store';
-	import CookieMessage from '$lib/components/kurosearch/cookie-message/CookieMessage.svelte';
 	import { addHistory } from '$lib/logic/use/onpopstate';
-	import { base } from '$app/paths';
 	import ResultHeader from '$lib/components/kurosearch/results/ResultHeader.svelte';
 
 	console.log(
@@ -260,10 +256,6 @@
 	on:submit={(e) => supertags.add(e.detail)}
 />
 
-{#if !$cookiesAccepted}
-	<CookieMessage />
-{/if}
-
 <style>
 	:global(main) {
 		display: flex;
@@ -301,7 +293,7 @@
 	div {
 		contain: strict;
 		height: 100vh;
-		border-radius: calc(2 * var(--border-radius));
+		border-radius: var(--border-radius-large);
 		animation: sweep ease-in-out 3s infinite;
 	}
 </style>
diff --git a/src/routes/LynxMain.svelte b/src/routes/LynxMain.svelte
@@ -3,8 +3,14 @@
 </script>
 
 <div>
-	<a href="https://www.twitch.tv/helheim_lynx">
-		<img id="happy" src="{base}/assets/lynxy-chibi.webp" alt="Helheim Lynx" />
+	<a href="https://www.twitch.tv/helheim_lynx" target="_blank" title="Check out Lynxy!">
+		<img
+			id="happy"
+			src="{base}/assets/lynxy-chibi.webp"
+			alt="Helheim Lynx"
+			width="1231"
+			height="864"
+		/>
 	</a>
 </div>
 

diff --git a/src/routes/theme.css b/src/routes/theme.css
@@ -93,6 +93,7 @@
 
 	/* Rounding */
 	--border-radius: 5px;
+	--border-radius-large: 10px;
 	--border-radius-full: 100px;
 
 	/* Scrollbar */

diff --git a/svelte.config.js b/svelte.config.js
@@ -23,7 +23,8 @@ const config = {
 					'self',
 					'https://apis.google.com',
 					'https://www.googletagmanager.com',
-					'sha256-51fKcXgBxMbTyZzP+VnzmnhFOLZ64S73BpdPcaakIR0='
+					'sha256-51fKcXgBxMbTyZzP+VnzmnhFOLZ64S73BpdPcaakIR0=',
+					'sha256-WzU0zYiNe3qRp3XlJtEt/mWMUNNFRK0WkIy73ZU4dIM='
 				],
 				'connect-src': [
 					'self',