401 lines
8.4 KiB
HTML
401 lines
8.4 KiB
HTML
<!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;
|
|
}
|
|
|
|
@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>
|
|
</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 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 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>
|