Added consent page.

2024-06-02 02:50:54 +02:00
parent 87dad222a1
commit 828f009696
6 changed files with 256 additions and 2 deletions
--- a/assets/consent.html
+++ b/assets/consent.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>traxxx - consent</title>
+
+		<style>
+			:root {
+				--primary: #f65596;
+				--background: #fff;
+				--text: #222;
+				--text-light: #fff;
+				--text-shadow: rgba(0, 0, 0, .7);
+				--highlight: rgba(255, 255, 255, .75);
+				--shadow: rgba(0, 0, 0, .25);
+			}
+
+			html,
+			body {
+				height: 100%;
+				margin: 0;
+				color: var(--text);
+				font-family: sans-serif;
+			}
+
+			body {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+				padding: 1rem;
+			}
+
+			.content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.heading {
+				font-size: 1.5rem;
+				text-align: center;
+			}
+
+			.consent {
+				text-align: center;
+			}
+
+			.points {
+				margin: 0;
+			}
+
+			.points li {
+				margin-bottom: .5rem;
+			}
+
+			.logo {
+				fill: var(--primary);
+				height: 1.2rem;
+			}
+
+			.disclaimer {
+				color: var(--text-shadow);
+				margin: 0;
+				text-align: center;
+				font-size: .9rem;
+			}
+
+			.actions {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 1rem;
+				margin-top: 1rem;
+			}
+
+			.button {
+				width: 15rem;
+				position: relative;
+				padding: 1rem 2rem;
+				border: none;
+				background: none;
+				text-decoration: none;
+				border-radius: .5rem;
+				background: var(--background);
+				text-align: center;
+				transition: box-shadow .1s ease-in-out;
+				box-shadow: 0 0 3px var(--shadow);
+			}
+
+			.button.straight:hover {
+				box-shadow: 0 0 5px var(--primary);
+			}
+
+			.button.lgbt:before {
+				content: '';
+				width: calc(100% - 10px);
+				height: calc(100% - 10px);
+				border-radius: .5rem;
+				position: absolute;
+				top: 5px;
+				left: 5px;
+				z-index: -1;
+				filter: blur(3px);
+				background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff);
+				transition: all .1s ease;
+			}
+
+			.button.lgbt:hover {
+				box-shadow: 0;
+			}
+
+			.button.lgbt:hover:before {
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+			}
+
+			.button-label {
+				margin-bottom: .25rem;
+				font-size: 1.5rem;
+				font-weight: bold;
+				color: var(--primary);
+			}
+
+			.button-prefer {
+				color: var(--text-shadow);
+				font-size: .9rem;
+			}
+
+			.leave {
+				color: inherit;
+				text-decoration: none;
+				font-size: 1.25rem;
+				margin-right: 2rem;
+			}
+
+			.leave:hover {
+				color: var(--primary);
+				text-decoration: underline;
+			}
+
+			@media(max-width: 800px) {
+				.actions {
+					flex-direction: column-reverse;
+				}
+
+				.leave {
+					margin: 0;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<div class="content">
+			<h2 class="heading">
+				<img
+					src="/img/logo.svg"
+					class="logo"
+				> contains sexually explicit content
+			</h2>
+
+			<p class="consent">
+				By entering this website, you agree that
+
+				<ul class="points">
+					<li>You are at least 18 years old, and legally permitted to view adult material in your jurisdiction.</li>
+					<li>You do not regard erotic and pornographic media as obscene or offensive.</li>
+					<li>You understand that most sexual scenarios depicted on this website are not representative of real-life interactions.</li>
+				</ul>
+			</p>
+
+			<div class="actions">
+				<a
+					href="https://google.com/"
+					class="leave"
+				>Leave</a>
+
+				<a
+					href="/?consent&straight"
+					class="button enter straight"
+				>
+					<div class="button-label">Enter</div>
+					<div class="button-prefer">I prefer straight content</div>
+				</a>
+
+				<a
+					href="/?consent&lgbt"
+					class="button enter lgbt"
+				>
+					<div class="button-label">Enter</div>
+					<div class="button-prefer">Include gay, bi and trans content</div>
+				</a>
+			</div>
+		</div>
+	</body>
+</html>