DebaucheryLibrarian
/
based
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added copy buttons. Linked header (resets page).

This commit is contained in:
DebaucheryLibrarian 2025-02-20 22:42:43 +00:00
parent 1b9d25b37d
commit 38ac7c1deb
1 changed files with 157 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
index.html
View File

@ -48,6 +48,11 @@
color: #fff; color: #fff;
} }
.title-link {
color: inherit;
text-decoration: none;
}
.title { .title {
padding: .5rem 1rem; padding: .5rem 1rem;
margin: 0; margin: 0;
@ -78,7 +83,6 @@
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
margin-bottom: 1rem;
} }
.section-heading { .section-heading {
@ -88,13 +92,16 @@
.row { .row {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center;
gap: 1rem; gap: 1rem;
} }
.input { .row-segment {
font-size: 1.25rem;
flex-grow: 1; flex-grow: 1;
}
.input {
width: 100%;
font-size: 1.25rem;
box-sizing: border-box; box-sizing: border-box;
padding: .5rem .75rem; padding: .5rem .75rem;
border: solid 1px var(--shadow); border: solid 1px var(--shadow);
@ -107,6 +114,37 @@
box-shadow: 0 0 3px var(--shadow); box-shadow: 0 0 3px var(--shadow);
} }
.copy {
display: flex;
justify-content: flex-end;
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 { .arrow-down {
display: none; display: none;
} }
@ -126,6 +164,12 @@
font-size: 1rem; font-size: 1rem;
} }
.arrow {
display: block;
text-align: center;
margin-top: .25rem;
}
.arrow-right{ .arrow-right{
display: none; display: none;
} }
@ -133,6 +177,11 @@
.arrow-down { .arrow-down {
display: inline-block; display: inline-block;
} }
.copy {
justify-content: center;
margin-top: .75rem;
}
} }
</style> </style>
@ -141,33 +190,56 @@
<body> <body>
<header class="header"> <header class="header">
<h1 class="title">Based</h1> <a
href="./"
class="title-link"
>
<h1 class="title">Based</h1>
</a>
</header> </header>
<span <span
id="feedback" id="feedback"
class="feedback feedback-copy hidden" class="feedback feedback-copy hidden"
>Copied '<span id="feedbackValue" class="feedback-value"></span>' to clipboard!</span> >Copied <span id="feedbackValue" class="feedback-value"></span> to clipboard!</span>
<section class="section"> <section class="section">
<h2 class="section-heading">Encode</h2> <h2 class="section-heading">Encode</h2>
<div class="row"> <div class="row">
<input <div class="row-segment">
id="nameInput" <input
placeholder="Name" id="nameInput"
class="input" placeholder="Name"
> class="input"
>
</div>
<span class="arrow arrow-right">&#x27A1;</span> <span class="arrow arrow-right">&#x27A1;</span>
<span class="arrow arrow-down"> &#x2B07;</span> <span class="arrow arrow-down"> &#x2B07;</span>
<input <div class="row-segment">
id="codeOutput" <input
placeholder="Code" id="codeOutput"
class="input" placeholder="Code"
readonly 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> </div>
</section> </section>
@ -175,21 +247,25 @@
<h2 class="section-heading">Decode</h2> <h2 class="section-heading">Decode</h2>
<div class="row"> <div class="row">
<input <div class="row-segment">
id="codeInput" <input
placeholder="Code" id="codeInput"
class="input" placeholder="Code"
> class="input"
>
</div>
<span class="arrow arrow-right">&#x27A1;</span> <span class="arrow arrow-right">&#x27A1;</span>
<span class="arrow arrow-down"> &#x2B07;</span> <span class="arrow arrow-down"> &#x2B07;</span>
<input <div class="row-segment">
id="nameOutput" <input
placeholder="Name" id="nameOutput"
class="input" placeholder="Name"
readonly class="input"
> readonly
>
</div>
</div> </div>
</section> </section>
</body> </body>
@ -203,6 +279,9 @@
const feedback = document.querySelector('#feedback'); const feedback = document.querySelector('#feedback');
const feedbackValue = document.querySelector('#feedbackValue'); const feedbackValue = document.querySelector('#feedbackValue');
const copyReddit = document.querySelector('#copyReddit');
const copyMarkdown = document.querySelector('#copyMarkdown');
function normalize(text) { function normalize(text) {
return text return text
.normalize("NFD") .normalize("NFD")
@ -219,6 +298,15 @@
const encoded = base32.encode(normalized).toUpperCase(); const encoded = base32.encode(normalized).toUpperCase();
codeOutput.value = encoded; 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() { function getName() {
@ -231,6 +319,15 @@
nameInput.addEventListener('input', () => getCode()); nameInput.addEventListener('input', () => getCode());
codeInput.addEventListener('input', () => getName()); codeInput.addEventListener('input', () => getName());
function showCopyFeedback(text) {
feedbackValue.textContent = text;
feedback.classList.remove('hidden');
setTimeout(() => {
feedback.classList.add('hidden');
}, 1000);
}
function selectCopy(event, type) { function selectCopy(event, type) {
const text = event.target.value; const text = event.target.value;
@ -241,12 +338,7 @@
event.target.select(); event.target.select();
navigator.clipboard.writeText(text); navigator.clipboard.writeText(text);
feedbackValue.textContent = text; showCopyFeedback(`'${text}'`);
feedback.classList.remove('hidden');
setTimeout(() => {
feedback.classList.add('hidden');
}, 1000);
if (typeof umami !== 'undefined') { if (typeof umami !== 'undefined') {
umami.track(type, text); umami.track(type, text);
@ -259,6 +351,37 @@
nameInput.addEventListener('focus', (event) => event.target.select()); nameInput.addEventListener('focus', (event) => event.target.select());
codeInput.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 query = new URL(window.location);
const urlName = query.searchParams.get('name'); const urlName = query.searchParams.get('name');