urlmskr

Axorax · May 8, 2024 · b65bad2 · b65bad2
commit b65bad2
Show file tree

Hide file tree

Showing 14 changed files with 549 additions and 0 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+patreon: axorax
diff --git a/.github/workflows/clear_deploys.yml 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
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="./urlmskr.svg" type="image/x-icon" />
+    <title>urlmskr</title>
+  </head>
+  <body>
+    <script>
+      const decoded = window.location.href.replace("https://axorax.github.io/urlmskr/", "");
+
+      if (decoded.toLowerCase().endsWith('+reveal')) {
+        document.head.innerHTML += '<link rel="stylesheet" href="./style.css">';
+        document.body.innerHTML = `
+          <div class="reveal center">
+              <div>
+                  <div class="top">This URL redirects to:</div>
+                  <div class="destination">${window.atob(decoded.slice(0, -7))}</div>
+              </div>
+          </div>  
+        `
+      } else {
+        window.location.replace(window.atob(decoded));
+      }
+    </script>
+  </body>
+</html>
diff --git a/README.md b/README.md
@@ -0,0 +1,40 @@
+<img src="./urlmskr.svg" width="80" height="80" align="right">
+
+<p align="left"><strong>urlmskr</strong></p>
+
+<p align="left">Simple and fast URL masker</p>
+
+---
+
+# ❓ About
+
+urlmskr is a small project that allows you to mask your links and also send encoded messages. URL masking means to change the original URL to another one that cannot be easily read or understood but clicking on it will redirect you to the original link. urlmskr does not need any backend server or anything, all of it is in the frontend and can be hosted anywhere easily. It does not store any data in a database or anything. Thank you for reading! Support the project or me on [Patreon!](https://www.patreon.com/axorax) <3
+
+# 🤔 Why
+
+A simple and obvious answer to why you would want to use something like urlmskr would be to send links to your friends or someone without letting them know what site the link leads to. The problem with this is that people may send you links to sites that you may not want to visit. You can add `+reveal` at the end of the URL to see the destination. Example: `https://axorax.github.io/urlmskr/awdawd+reveal`. And the answer to why I made urlmskr is that my friend had made something similar but the URLs were way too big and so I wanted to make a better app than him.
+
+# 💻 Integrate it into your project
+
+urlmskr has a library or module in some programming languages. They are in the root directory with the name of `lib` followed by the extension of the programming language. You can paste the code into your project and use it or import it. I'll show you how to use the JavaScript library below:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Example</title>
+  </head>
+  <body>
+    <script src="https://axorax.github.io/urlmskr/lib.js"></script>
+    <script>
+      document.write(urlmskr.mask('https://axorax.github.io')) // Mask URL
+      document.write('<br>')                                   // Add empty line
+      document.write(urlmskr.mask('Hello', 'text'))            // Mask text
+    </script>
+  </body>
+</html>
+```
+
+---
+
+<p align="center"><a href="https://www.patreon.com/axorax">Support me on Patreon</a> — <a href="https://github.com/axorax/socials">Check out my socials</a></p>
diff --git a/create.html b/create.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>urlmskr</title>
+    <link rel="shortcut icon" href="./urlmskr.svg" type="image/x-icon" />
+    <link rel="stylesheet" href="./style.css" />
+    <script src="./script.js" defer></script>
+  </head>
+  <body class="center">
+
+    <div id="electric-surge"></div>
+
+    <main class="center">
+
+      <input id="input" type="text" placeholder="Type here..." />
+
+      <div class="group">
+        <button id="mode-button" onclick="modeChange()"><p>Mode: <span>Redirect</span></p></button>    
+        <button id="mask-button">Mask</button>
+      </div>
+
+      <button id="copy-button">🔗 Copy Masked URL</button>
+
+      <div class="output">Type something to mask.</div>
+
+      <footer>Support me on <a href="https://patreon.com/axorax">Patreon!</a></footer>
+
+    </main>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>urlmskr</title>
+    <link rel="shortcut icon" href="./urlmskr.svg" type="image/x-icon" />
+  </head>
+  <body>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/index.js 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 += '<link rel="stylesheet" href="./style.css">';
+  document.body.innerHTML = `
+    <div class="reveal center">
+        <div>
+            <div class="top">This URL redirects to:</div>
+            <div class="destination">${window.atob(url)}</div>
+        </div>
+    </div>  
+  `
+} 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 += `
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
+      p {
+        padding: .9rem 1.2rem;
+        font-size: 2rem;
+        font-family: Arial, Helvetica, sans-serif;
+      }
+    </style>
+  `
+} else {
+  window.location.replace("https://axorax.github.io/urlmskr/create");
+}
diff --git a/inter.woff2 b/inter.woff2
diff --git a/lib.js b/lib.js
@@ -0,0 +1,21 @@
+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
+}
diff --git a/lib.php b/lib.php
@@ -0,0 +1,21 @@
+<?php
+
+class urlmskr {
+    public static function encode($text) {
+        return base64_encode($text);
+    }
+
+    public static function decode($text) {
+        return base64_decode($text);
+    }
+
+    public static function mask($text, $type) {
+        if ($type == 'text') {
+            return "https://axorax.github.io/urlmskr/?t=" . self::encode($text);
+        } else {
+            return "https://axorax.github.io/urlmskr/" . self::encode($text);
+        }
+    }
+}
+
+?>
diff --git a/lib.py b/lib.py
@@ -0,0 +1,21 @@
+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
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,84 @@
+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);