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