<!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">➡</span>
<span class="arrow arrow-down"> ⬇</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">➡</span>
<span class="arrow arrow-down"> ⬇</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>