<!doctype html>
<html lang="en">
	<head>
		<title>Based</title>


		<link rel="icon" type="image/png" href="./favicon-96x96.png" sizes="96x96" />
		<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
		<link rel="shortcut icon" href="./favicon.ico" />
		<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png" />
		<link rel="manifest" href="./site.webmanifest" />

		<meta name="robots" content="noindex, nofollow" />
		<meta name="apple-mobile-web-app-title" content="Based" />
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=.75,maximum-scale=.75,user-scalable=no,interactive-widget=resizes-content">

		<script src="https://anal.traxxx.me/script.js" data-website-id="a288951d-0a6b-411e-b9a0-1d04109a174c" async></script>

		<style>
			:root {
				--primary: #0ad;
				--shadow: rgba(0, 0, 0, .25);
			}

			html,
			body {
				width: 100%;
				height: 100%:
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 1.25rem;
				font-family: sans-serif;
				background: #fafafa;
				color: #333;
			}

			.header {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: .25rem;
				background: #111;
				color: #fff;
			}

			.title {
				padding: .5rem 1rem;
				margin: 0;
				font-size: 1.75rem;
			}

			.feedback {
				width: 100%;
				height: 1.5rem;
				margin-top: 1rem;
				text-align: center;
				opacity: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.feedback.hidden {
				opacity: 0;
				transition: opacity 1s ease-out;
			}

			.section {
				width: 100%;
				max-width: 1500px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				box-sizing: border-box;
				padding: 1rem;
				margin-bottom: 1rem;
			}

			.section-heading {
				margin: 0 0 1rem 0;
			}

			.row {
				width: 100%;
				display: flex;
				align-items: center;
				gap: 1rem;
			}

			.input {
				font-size: 1.25rem;
				flex-grow: 1;
				box-sizing: border-box;
				padding: .5rem .75rem;
				border: solid 1px var(--shadow);
				border-radius: .25rem;
				outline: none;
			}

			.input:focus {
				border-color: var(--primary);
				box-shadow: 0 0 3px var(--shadow);
			}

			.arrow-down {
				display: none;
			}
			
			@media(max-width: 1000px) {
				body {
					font-size: 1rem;
				}

				.row {
					flex-direction: column;
					gap: .5rem;
				}

				.input {
					width: 100%;
					font-size: 1rem;
				}

				.arrow-right{
					display: none;
				}

				.arrow-down {
					display: inline-block;
				}
			}
		</style>

		<script src="./base32.min.js"></script>
	</head>

	<body>
		<header class="header">
			<h1 class="title">Based</h1>
		</header>

		<span
			id="feedback"
			class="feedback feedback-copy hidden"
		>Copied '<span id="feedbackValue" class="feedback-value"></span>' to clipboard!</span>

		<section class="section">
			<h2 class="section-heading">Encode</h2>

			<div class="row">
				<input
					id="nameInput"
					placeholder="Name"
					class="input"
				>

				<span class="arrow arrow-right">&#x27A1;</span>
				<span class="arrow arrow-down">	&#x2B07;</span>

				<input
					id="codeOutput"
					placeholder="Code"
					class="input"
					readonly
				>
			</div>
		</section>

		<section class="section">
			<h2 class="section-heading">Decode</h2>

			<div class="row">
				<input
					id="codeInput"
					placeholder="Code"
					class="input"
				>

				<span class="arrow arrow-right">&#x27A1;</span>
				<span class="arrow arrow-down">	&#x2B07;</span>

				<input
					id="nameOutput"
					placeholder="Name"
					class="input"
					readonly
				>
			</div>
		</section>
	</body>

	<script>
		const nameInput = document.querySelector('#nameInput');	
		const codeOutput = document.querySelector('#codeOutput');	
		const codeInput = document.querySelector('#codeInput');	
		const nameOutput = document.querySelector('#nameOutput');	

		const feedback = document.querySelector('#feedback');	
		const feedbackValue = document.querySelector('#feedbackValue');	

		function normalize(text) {
			return text
				.normalize("NFD")
				.toLowerCase()
				.replace(/\p{Diacritic}/gu, "")
				.replace(/[^a-z0-9]/g, ' ')
				.replace(/\s+/g, ' ')
				.trim();
				// .padEnd(20, '#');
		}

		function getCode() {
			const normalized = normalize(nameInput.value);
			const encoded = base32.encode(normalized).toUpperCase();

			codeOutput.value = encoded;
		}

		function getName() {
			const decoded = base32.decode(codeInput.value);
			const capitalized = decoded.split(' ').map((word) => `${word.slice(0, 1).toUpperCase()}${word.slice(1)}`).join(' ');

			nameOutput.value = capitalized.replace(/#+$/, '');
		}

		nameInput.addEventListener('input', () => getCode());
		codeInput.addEventListener('input', () => getName());

		function selectCopy(event, type) {
			const text = event.target.value;

			if (!text) {
				return;
			}

			event.target.select();
			navigator.clipboard.writeText(text);

			feedbackValue.textContent = text;
			feedback.classList.remove('hidden');

			setTimeout(() => {
				feedback.classList.add('hidden');
			}, 1000);

			if (typeof umami !== 'undefined') {
				umami.track(type, text);
			}
		}

		codeOutput.addEventListener('focus', (event) => selectCopy(event, 'encode'));
		nameOutput.addEventListener('focus', (event) => selectCopy(event, 'decode'));

		nameInput.addEventListener('focus', (event) => event.target.select());
		codeInput.addEventListener('focus', (event) => event.target.select());

		const query = new URL(window.location);

		const urlName = query.searchParams.get('name');
		const urlCode = query.searchParams.get('code');

		if (urlName) {
			nameInput.value = urlName;
			getCode();
		}

		if (urlCode) {
			codeInput.value = urlCode;
			getName();
		}
	</script>
</html>