<!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-link {
				color: inherit;
				text-decoration: none;
			}

			.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;
			}

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

			.row {
				width: 100%;
				display: flex;
				gap: 1rem;
			}

			.row-segment {
				flex-grow: 1;
			}

			.input {
				width: 100%;
				font-size: 1.25rem;
				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);
			}

			.copy {
				display: flex;
				justify-content: center;
				gap: .25rem;
				margin-top: .5rem;
			}

			.copy-button {
				padding: .25rem .5rem;
				background: rgba(0, 0, 0, .1);
				color: #555;
				font-weight: bold;
				font-size: .8rem;
				border: none;
				border-radius: .25rem;
			}

			.copy-button:not(:disabled):hover {
				cursor: pointer;
				background: var(--primary);
				color: #fff;
			}

			.copy-button:disabled {
				color: #999;
			}

			.arrow {
				margin-top: .5rem;
			}

			.arrow-down {
				display: none;
			}

			.psa {
				text-align: center;
				font-size: 1rem;
				color: #666;
			}
			
			@media(max-width: 1000px) {
				body {
					font-size: 1rem;
				}

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

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

				.arrow {
					display: block;
					text-align: center;
					margin-top: .25rem;
				}

				.arrow-right{
					display: none;
				}

				.arrow-down {
					display: inline-block;
				}

				.copy {
					justify-content: center;
					margin-top: .75rem;
				}
			}
		</style>

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

	<body>
		<header class="header">
			<a
				href="./"
				class="title-link"
			>
				<h1 class="title">Based</h1>
			</a>
		</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">Decode</h2>

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

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

				<div class="row-segment">
					<input
						id="nameOutput"
						placeholder="Name"
						class="input"
						readonly
					>
				</div>
			</div>
		</section>

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

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

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

				<div class="row-segment">
					<input
						id="codeOutput"
						placeholder="Code"
						class="input"
						readonly
					>

					<div class="copy">
						<button
							id="copyReddit"
							class="copy-button"
							disabled
						>Copy for Reddit</button>

						<button
							id="copyMarkdown"
							class="copy-button"
							disabled
						>Copy Markdown</button>
					</div>
				</div>
			</div>
		</section>

		<section class="section psa">Please encode each name separately to ensure consistency</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');	

		const copyReddit = document.querySelector('#copyReddit');	
		const copyMarkdown = document.querySelector('#copyMarkdown');	

		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;

			const url = new URL(window.location);

			url.searchParams.set('code', encoded);

			history.replaceState(null, '', url);

			copyReddit.disabled = encoded.length === 0;
			copyMarkdown.disabled = encoded.length === 0;
		}

		function getName() {
			const input = codeInput.value.trim();

			if (/^([01]{8}(\s|$))+/.test(input)) {
				// decode binary
				nameOutput.value = new TextDecoder().decode(new Int8Array(input.split(/\s+/).map((binaryLetter) => parseInt(binaryLetter, 2))));
				return;
			}

			const decoded = base32.decode(input);
			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 showCopyFeedback(text) {
			feedbackValue.textContent = text;
			feedback.classList.remove('hidden');

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

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

			if (!text) {
				return;
			}

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

			showCopyFeedback(`'${text}'`);

			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());

		copyReddit.addEventListener('click', async (event) => {
			const code = codeOutput.value;

			const span = document.createElement('span');
			const text = document.createTextNode('Code: ');
			const link = document.createElement('a');

			link.href = `${window.location.origin}${window.location.pathname}?code=${code}>`;
			link.textContent = code;

			span.appendChild(text);
			span.appendChild(link);

			const blob = new Blob([span.innerHTML], { type: 'text/html' });
			const data = [new ClipboardItem({ 'text/html': blob })];

			await navigator.clipboard.write(data);

			// navigator.clipboard.writeText(`Code: <a href="${window.location.origin}${window.location.pathname}?code=${code}">${code}</a>`);

			showCopyFeedback('linked code for Reddit');
		});

		copyMarkdown.addEventListener('click', (event) => {
			const code = codeOutput.value;

			navigator.clipboard.writeText(`Code: [${code}](${window.location.origin}${window.location.pathname}?code=${code})`);

			showCopyFeedback('linked code for Markdown');
		});

		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>