diff --git a/index.html b/index.html index 51d151e..3e1892d 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,11 @@ color: #fff; } + .title-link { + color: inherit; + text-decoration: none; + } + .title { padding: .5rem 1rem; margin: 0; @@ -78,7 +83,6 @@ justify-content: center; box-sizing: border-box; padding: 1rem; - margin-bottom: 1rem; } .section-heading { @@ -88,13 +92,16 @@ .row { width: 100%; display: flex; - align-items: center; gap: 1rem; } - .input { - font-size: 1.25rem; + .row-segment { flex-grow: 1; + } + + .input { + width: 100%; + font-size: 1.25rem; box-sizing: border-box; padding: .5rem .75rem; border: solid 1px var(--shadow); @@ -107,6 +114,37 @@ 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 { display: none; } @@ -126,6 +164,12 @@ font-size: 1rem; } + .arrow { + display: block; + text-align: center; + margin-top: .25rem; + } + .arrow-right{ display: none; } @@ -133,6 +177,11 @@ .arrow-down { display: inline-block; } + + .copy { + justify-content: center; + margin-top: .75rem; + } } @@ -141,33 +190,56 @@
-

Based

+ +

Based

+
+ >Copied to clipboard!

Encode

- +
+ +
➡ ⬇ - +
+ + +
+ + + +
+
@@ -175,21 +247,25 @@

Decode

- +
+ +
➡ ⬇ - +
+ +
@@ -203,6 +279,9 @@ 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") @@ -219,6 +298,15 @@ 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() { @@ -231,6 +319,15 @@ 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; @@ -241,12 +338,7 @@ event.target.select(); navigator.clipboard.writeText(text); - feedbackValue.textContent = text; - feedback.classList.remove('hidden'); - - setTimeout(() => { - feedback.classList.add('hidden'); - }, 1000); + showCopyFeedback(`'${text}'`); if (typeof umami !== 'undefined') { umami.track(type, text); @@ -259,6 +351,37 @@ 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: ${code}`); + + 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');