<!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>