<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
<link rel="manifest" href="/img/favicon/site.webmanifest">
<link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/img/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#b91d47">
<meta name="msapplication-config" content="/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#f65596">
<meta property="og:title" content="traxxx" />
<meta property="og:image" content="https://traxxx.me/img/og_logo.png" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,interactive-widget=resizes-content" />
<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) {
.heading {
font-size: 1.25rem;
}
.logo {
height: 1rem;
}
.actions {
flex-direction: column-reverse;
gap: 1.5rem;
}
.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>