diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..fc26d69 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +patreon: axorax diff --git a/.github/workflows/clear_deploys.yml b/.github/workflows/clear_deploys.yml new file mode 100644 index 0000000..3848c16 --- /dev/null +++ b/.github/workflows/clear_deploys.yml @@ -0,0 +1,16 @@ +name: clear_deploys + +on: push + +jobs: + deldep: + runs-on: ubuntu-latest + permissions: write-all + + steps: + - name: Delete deployment + uses: strumwolf/delete-deployment-environment@v2 + with: + token: ${{ secrets.GITHUB_TOKEN }} + environment: github-pages + onlyRemoveDeployments: true diff --git a/404.html b/404.html new file mode 100644 index 0000000..45520af --- /dev/null +++ b/404.html @@ -0,0 +1,34 @@ + + + + + + + + urlmskr + + + + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..d3f4c71 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +

+ +

English — 中文 — বাংলা — عربي — español

+ +# ❓ About + +urlmskr lets you mask links and send encoded messages by changing a link to one that can't be easily read but still redirects to the original. It runs entirely on the frontend, requires no backend server, and stores no data. You can host it anywhere. Support the project on [Patreon!](https://www.patreon.com/axorax) <3 + +# 🤔 Why? + +Using a tool like urlmskr allows you to send a link without revealing the destination site. However, this could lead to receiving links to unwanted sites. To reveal the destination, simply add `+reveal` at the end of the URL. For example: `https://axorax.github.io/urlmskr/hello69+reveal`. + +# 💻 Integrate with your project + +urlmskr includes libraries for various programming languages in the root directory, named `lib` with the respective language extension. You can paste or import the code into your project. Here’s how to use the JavaScript library: + +```html + + + + Example + + + + + + +``` + +--- + +

Support me on Patreon — Check out my socials

diff --git a/README_ar.md b/README_ar.md new file mode 100644 index 0000000..93f1b69 --- /dev/null +++ b/README_ar.md @@ -0,0 +1,39 @@ +

+ +

English — 中文 — বাংলা — عربي — español

+ +> [!IMPORTANT] +> هذه ترجمة تقريبية وقد لا تكون دقيقة. + +# ❓ نبذة عن + +يتيح لك urlmskr إخفاء الروابط وإرسال رسائل مشفرة عن طريق تغيير الرابط إلى رابط لا يمكن قراءته بسهولة ولكن مع ذلك يعيد التوجيه إلى الرابط الأصلي. يعمل بالكامل على الواجهة الأمامية، ولا يتطلب خادمًا خلفيًا، ولا يخزن أي بيانات. يمكنك استضافته في أي مكان. ادعم المشروع على [Patreon!](https://www.patreon.com/axorax) <3 + +# 🤔 لماذا؟ + +يسمح لك استخدام أداة مثل urlmskr بإرسال رابط دون الكشف عن الموقع الوجهة. ومع ذلك، قد يؤدي ذلك إلى تلقي روابط لمواقع غير مرغوب فيها. وللكشف عن الوجهة، ما عليك سوى إضافة `+reveal` في نهاية عنوان URL. على سبيل المثال: `https://axorax.github.io/urlmskr/hello69+reveal`. + +# 💻 التكامل مع مشروعك + +يتضمن urlmskr مكتبات للغات البرمجة المختلفة في الدليل الجذر، باسم `lib` مع امتداد اللغة المعنية. يمكنك لصق أو استيراد التعليمات البرمجية في مشروعك. إليك كيفية استخدام مكتبة JavaScript: + +```html + + + + مثال على ذلك + + + + + + +``` + +--- + +

ادعمني على Patreon — تحقق من حساباتي الاجتماعية

diff --git a/README_bn.md b/README_bn.md new file mode 100644 index 0000000..1df08bd --- /dev/null +++ b/README_bn.md @@ -0,0 +1,39 @@ +

+ +

English — 中文 — বাংলা — عربي — español

+ +> [!IMPORTANT] +> এটি একটি মোটামুটি অনুবাদ এবং সঠিক নাও হতে পারে। আমি বাংলা জানি কিন্তু প্রুফরিড করার সময় পাইনি। + +# ❓ সম্পর্কিত + +urlmskr আপনাকে লিঙ্ক মাস্ক করতে দেয় এবং একটি লিঙ্ক পরিবর্তন করে এনকোড করা বার্তা পাঠাতে দেয় যা সহজে পড়া যায় না, তবুও মূলে পুনঃনির্দেশিত হয়। এটি সম্পূর্ণরূপে ফ্রন্টএন্ডে চলে, কোন ব্যাকএন্ড সার্ভারের প্রয়োজন হয় না এবং কোন ডেটা সঞ্চয় করে না। আপনি যে কোন জায়গায় এটি হোস্ট করতে পারেন. [Patreon!](https://www.patreon.com/axorax) <3 এ প্রকল্পকে সমর্থন করুন + +# 🤔 কেন? + +urlmskr এর মতো একটি টুল ব্যবহার করে আপনি গন্তব্য সাইটটি প্রকাশ না করে একটি লিঙ্ক পাঠাতে পারবেন। যাইহোক, এর ফলে অবাঞ্ছিত সাইটের লিঙ্ক পাওয়া যেতে পারে। গন্তব্য প্রকাশ করতে, URL-এর শেষে শুধু `+reveal` যোগ করুন। যেমন: `https://axorax.github.io/urlmskr/hello69+reveal`। + +# 💻 আপনার প্রকল্পের সাথে সংহত করুন + +urlmskr রুট ডিরেক্টরিতে বিভিন্ন প্রোগ্রামিং ভাষার জন্য লাইব্রেরি অন্তর্ভুক্ত করে, যার নাম `lib` সংশ্লিষ্ট ভাষা এক্সটেনশন সহ। আপনি আপনার প্রকল্পে কোড পেস্ট বা আমদানি করতে পারেন। জাভাস্ক্রিপ্ট লাইব্রেরি কীভাবে ব্যবহার করবেন তা এখানে: + +```html + + + + উদাহরণ + + + + + + +``` + +--- + +

Patreon এ আমাকে সমর্থন করুন — আমার সামাজিক চেক আউট করুন

diff --git a/README_es.md b/README_es.md new file mode 100644 index 0000000..628d684 --- /dev/null +++ b/README_es.md @@ -0,0 +1,39 @@ +

+ +

English — 中文 — বাংলা — عربي — español

+ +> [!IMPORTANT] +> Esta es una traducción aproximada y puede no ser exacta. + +# ❓ Acerca de + +urlmskr permite enmascarar enlaces y enviar mensajes codificados cambiando un enlace por otro que no pueda leerse fácilmente pero que redirija al original. Se ejecuta completamente en el frontend, no requiere servidor backend y no almacena datos. Puedes alojarlo en cualquier sitio. Apoya el proyecto en [Patreon!](https://www.patreon.com/axorax) <3 + +# 🤔 ¿Por qué? + +Utilizar una herramienta como urlmskr permite enviar un enlace sin revelar el sitio de destino. Sin embargo, esto podría llevar a recibir enlaces a sitios no deseados. Para revelar el destino, basta con añadir `+reveal` al final de la URL. Por ejemplo: `https://axorax.github.io/urlmskr/hello69+reveal`. + +# 💻 Integración en su proyecto + +urlmskr incluye librerías para varios lenguajes de programación en el directorio raíz, llamadas `lib` con la extensión del lenguaje respectivo. Puede pegar o importar el código en su proyecto. A continuación se explica cómo utilizar la biblioteca JavaScript: + +```html + + + + Ejemplo + + + + + + +``` + +--- + +

Apóyame en Patreon — Echa un vistazo a mis redes sociales

diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..253e8c6 --- /dev/null +++ b/README_zh.md @@ -0,0 +1,39 @@ +

+ +

English — 中文 — বাংলা — عربي — español

+ +> [!IMPORTANT] +> 这只是一个粗略的翻译，可能并不准确。 + +# ❓ 关于 + +urlmskr 可让你屏蔽链接并发送编码信息，方法是将链接更改为不易被读取但仍可重定向到原始链接的链接。它完全在前端运行，不需要后台服务器，也不存储数据。你可以将它托管到任何地方。在 [Patreon!](https://www.patreon.com/axorax) 上支持该项目 <3 + +# 🤔 为什么？ + +使用 urlmskr 这样的工具可以发送链接而不显示目标网站。不过，这可能会导致接收到不想要的网站链接。要显示目的地，只需在 URL 结尾添加 `+reveal`。例如：`https://axorax.github.io/urlmskr/hello69+reveal`。 + +# 💻 与您的项目相结合 + +urlmskr 的根目录中包含各种编程语言的库，以相应语言的扩展名 `lib` 命名。你可以将代码粘贴或导入到你的项目中。下面介绍如何使用 JavaScript 库： + +```html + + + + 示例 + + + + + + +``` + +--- + +

在 Patreon 上支持我 — 查看我的社交网站

diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..7ace29d --- /dev/null +++ b/_config.yml @@ -0,0 +1,3 @@ +exclude: + - "*.md" + - .github/ diff --git a/create.html b/create.html new file mode 100644 index 0000000..8f9672d --- /dev/null +++ b/create.html @@ -0,0 +1,36 @@ + + + + + + + urlmskr + + + + + +
+ +
+ + +
+ + +
+ + + +
+ Type something to mask. +
+ + +
+ + diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..4fa5be8 --- /dev/null +++ b/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..6fd1dd1 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + urlmskr + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..31d6a57 --- /dev/null +++ b/index.js @@ -0,0 +1,37 @@ +const params = new URLSearchParams(window.location.search); + +if (params.get("r") && params.get("r").toLowerCase().endsWith(" reveal")) { + const url = params.get("r").slice(0, -7); + document.head.innerHTML += ''; + document.body.innerHTML = ` +
+
+
This URL redirects to:
+
${window.atob(url)}
+
+
+ `; +} else if (params.get("r")) { + window.location.replace(window.atob(params.get("r"))); +} else if (params.get("t")) { + const paragraph = document.createElement("p"); + paragraph.innerText = window.atob(params.get("t")); + document.body.append(paragraph); + + document.head.innerHTML += ` + + `; +} else { + window.location.replace("https://axorax.github.io/urlmskr/create"); +} diff --git a/inter.woff2 b/inter.woff2 new file mode 100644 index 0000000..26c3f72 Binary files /dev/null and b/inter.woff2 differ diff --git a/lib.js b/lib.js new file mode 100644 index 0000000..f45f0ec --- /dev/null +++ b/lib.js @@ -0,0 +1,25 @@ +function encode(text) { + return window.btoa(text); +} + +function decode(text) { + return window.atob(text); +} + +function mask(text, type) { + if (type == "text") { + return `https://axorax.github.io/urlmskr/?t=${encode(text)}`; + } else { + return `https://axorax.github.io/urlmskr/${encode(text)}`; + } +} + +const urlmskr = { + encode, + decode, + mask, +}; + +// Usage examples: +// urlmskr.mask('urlmskr', 'text'); +// urlmskr.mask('urlmskr', 'url'); diff --git a/lib.php b/lib.php new file mode 100644 index 0000000..22f044e --- /dev/null +++ b/lib.php @@ -0,0 +1,25 @@ + diff --git a/lib.py b/lib.py new file mode 100644 index 0000000..77b2774 --- /dev/null +++ b/lib.py @@ -0,0 +1,25 @@ +import base64 + +def encode(text): + encoded_bytes = base64.b64encode(text.encode('utf-8')) + return encoded_bytes.decode('utf-8') + +def decode(text): + decoded_bytes = base64.b64decode(text.encode('utf-8')) + return decoded_bytes.decode('utf-8') + +def mask(text, type): + if type == 'text': + return f"https://axorax.github.io/urlmskr/?t={encode(text)}" + else: + return f"https://axorax.github.io/urlmskr/{encode(text)}" + +urlmskr = { + 'encode': encode, + 'decode': decode, + 'mask': mask +} + +# Usage examples: +# urlmskr['mask']('urlmskr', 'text') +# urlmskr['mask']('urlmskr', 'other') diff --git a/lib.rb b/lib.rb new file mode 100644 index 0000000..6e79dcc --- /dev/null +++ b/lib.rb @@ -0,0 +1,24 @@ +require 'base64' + +module Urlmskr + def self.encode(text) + Base64.strict_encode64(text) + end + + def self.decode(text) + Base64.strict_decode64(text) + end + + def self.mask(text, type) + encoded_text = encode(text) + if type == 'text' + "https://axorax.github.io/urlmskr/?t=#{encoded_text}" + else + "https://axorax.github.io/urlmskr/#{encoded_text}" + end + end +end + +# Usage examples: +# puts Urlmskr.mask('urlmskr', 'text') +# puts Urlmskr.mask('urlmskr', 'url') diff --git a/script.js b/script.js new file mode 100644 index 0000000..36d79db --- /dev/null +++ b/script.js @@ -0,0 +1,131 @@ +const input = document.querySelector("#input"); +const maskButton = document.querySelector("#mask-button"); +const copy = document.querySelector("#copy-button"); +const output = document.querySelector(".output"); +const modeText = document.querySelector("#mode-button p"); +let currentMode = "redirect"; + +// Event listeners + +input.addEventListener("keydown", (e) => { + if (e.key == "Enter") { + encode(input.value); + } +}); + +maskButton.addEventListener("click", () => { + encode(input.value); +}); + +copy.addEventListener("click", () => { + navigator.clipboard.writeText(output.innerText); + copy.innerText = `✅ Copied Masked URL`; + setTimeout(() => { + copy.innerText = "🔗 Copy Masked URL"; + }, 2000); +}); + +// Change mode + +function modeChange() { + if (currentMode == "text") { + currentMode = "redirect"; + } else { + currentMode = "text"; + } + modeText.style.transform = "translate(-150%, 0)"; + setTimeout(() => { + modeText.innerText = `Mode: ${currentMode}`; + modeText.style.transform = "translate(0, 0)"; + }, 350); +} + +// Encode + +function encode(value) { + if (value.replaceAll(" ", "") == "") { + output.innerText = `Input cannot be empty. Type something properly.`; + } else { + let encodedValue = window.btoa(value); + if (currentMode == "redirect") { + output.innerText = `https://axorax.github.io/urlmskr/${encodedValue}`; + } else if (currentMode == "text") { + output.innerText = `https://axorax.github.io/urlmskr/?t=${encodedValue}`; + } + } +} + +// Electric Surge + +function createBolt() { + const bolt = document.createElement("div"); + bolt.className = "bolt"; + bolt.style.left = `${Math.random() * 100}%`; + + const electricSurge = document.getElementById("electric-surge"); + const electricSurgeRect = electricSurge.getBoundingClientRect(); + const boltRect = bolt.getBoundingClientRect(); + + if ( + boltRect.left + boltRect.width > + electricSurgeRect.left + electricSurgeRect.width + ) { + const newLeft = + electricSurgeRect.left + electricSurgeRect.width - boltRect.width; + bolt.style.left = `${newLeft}px`; + } + + electricSurge.appendChild(bolt); + setTimeout(() => { + bolt.remove(); + }, 800); +} + +setInterval(createBolt, 600); + +// Stars + +document.addEventListener("DOMContentLoaded", function () { + const numberOfStars = Math.floor( + (window.innerWidth + window.innerHeight) / 16, + ); + const starContainer = document.createElement("div"); + starContainer.style.cssText = ` + position: fixed; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + overflow: hidden; + `; + document.body.appendChild(starContainer); + + function createStar() { + const star = document.createElement("div"); + const starSize = Math.random() * 3 + 1; + const x = Math.random() * window.innerWidth; + const y = Math.random() * window.innerHeight; + + star.classList.add("star"); + star.style.width = `${starSize}px`; + star.style.height = `${starSize}px`; + star.style.left = `${x}px`; + star.style.top = `${y}px`; + starContainer.appendChild(star); + } + + for (let i = 0; i < numberOfStars; i++) { + createStar(); + } + + window.addEventListener("resize", function () { + while (starContainer.firstChild) { + starContainer.removeChild(starContainer.firstChild); + } + + for (let i = 0; i < numberOfStars; i++) { + createStar(); + } + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..150ef2e --- /dev/null +++ b/style.css @@ -0,0 +1,237 @@ +@font-face { + font-family: "default"; + src: url("./inter.woff2"); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "default", sans-serif; +} + +:root { + color-scheme: dark; + --border: #3e3e3e; +} + +body { + scrollbar-width: none; + width: 100%; + height: 100vh; + background: #171515; + background-image: linear-gradient(to top, #171515, #242323); +} + +button { + cursor: pointer; + border-radius: 5px; + font-size: 14px; + border: none; + background: transparent; + backdrop-filter: blur(4px); + padding: 0.8rem; +} + +main { + flex-direction: column; + height: calc(100% - 2rem); + max-width: calc(100% - 2rem); + width: 20rem; +} + +.center { + display: flex; + align-items: center; + justify-content: center; +} + +#input { + border-radius: 5px; + padding: 0.8rem; + outline: none; + color: #fff; + font-size: 16.5px; + background: #282828dc; + border: 1px solid var(--border); + backdrop-filter: blur(2px); + width: 100%; + transition: 200ms; + + &:hover, + &:focus { + border-color: #537fe7; + } +} + +#electric-surge { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -9; + pointer-events: none; + overflow: hidden; +} + +.bolt { + position: absolute; + top: 0; + width: 2px; + height: 100%; + opacity: 0; + background-color: #ffffff; + animation: boltAnimation 0.8s linear infinite; + pointer-events: none; + box-shadow: 0 0 8px 2px #ffffff2f; +} + +.star { + position: absolute; + background: white; + border-radius: 50%; + box-shadow: 0 0 10px white; + z-index: -1; +} + +.group { + margin-top: 1rem; + display: flex; + gap: 1rem; + width: 100%; + flex-wrap: wrap; +} + +#mode-button { + overflow: hidden; + flex: 1; + border: 1px solid var(--border); + transition: background 300ms; + + &:hover, + &:focus { + background: #68686818; + } + + & p { + transition: 300ms; + } +} + +#mask-button { + flex: 1; + background: #537fe7; + transition: background 300ms; + + &:hover, + &:focus { + background: #446ac1; + } +} + +#copy-button { + width: 100%; + margin-top: 1rem; + border: 1px solid var(--border); + + &:hover, + &:focus { + background: #68686818; + } +} + +.output { + width: 100%; + height: 10rem; + padding: 0.8rem; + margin-top: 1rem; + max-height: 10rem; + border-radius: 5px; + overflow-y: scroll; + word-wrap: break-word; + background: #1c1c1c99; + border: 1px solid var(--border); + backdrop-filter: blur(4px); + + &::-webkit-scrollbar { + display: none; + } +} + +footer { + margin-top: 1rem; + background: #537fe73d; + border: 1px dashed #537fe7; + backdrop-filter: blur(4px); + color: #a5beff; + border-radius: 5px; + width: 100%; + padding: 0.8rem; + text-align: center; + + & a { + color: #a5beff; + + &:hover { + color: #fff; + } + } +} + +.reveal { + width: 100%; + height: 100dvh; + + & > div { + border-radius: 5px; + max-width: calc(100% - 2rem); + max-height: calc(100% - 2rem); + overflow-y: scroll; + border: 2px solid var(--border); + color: #fff; + + &::-webkit-scrollbar { + display: none; + } + } + + .top { + text-align: center; + border-bottom: 2px solid var(--border); + padding: 0.7rem 0.9rem; + font-size: 0.9rem; + background: #282525bd; + color: #ffffffcf; + } + + .destination { + padding: 1rem; + word-wrap: break-word; + font-size: 1.3rem; + font-weight: 500; + } +} + +@media (max-width: 343px) { + .group { + flex-direction: column; + } + + h1 { + display: none !important; + } +} + +@keyframes boltAnimation { + 0% { + opacity: 1; + transform: translateY(-100%); + filter: brightness(200%); + } + 100% { + opacity: 0; + transform: translateY(100%); + filter: brightness(100%); + } +} diff --git a/urlmskr.svg b/urlmskr.svg new file mode 100644 index 0000000..4b265c8 --- /dev/null +++ b/urlmskr.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +