commit e749a9eaededcf385e081a397dc55e321c62ab29 Author: Aadi Desai <21363892+supleed2@users.noreply.github.com> Date: Sun Nov 12 19:39:31 2023 +0000 Backup state of remake diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..fb1620d --- /dev/null +++ b/LICENSE @@ -0,0 +1,15 @@ +ISC License + +Copyright (c) 2023 Aadi Desai + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted, provided that the above +copyright notice and this permission notice appear in all copies. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..5ec25d3 Binary files /dev/null and b/favicon.ico differ diff --git a/img/4el.svg b/img/4el.svg new file mode 100644 index 0000000..8af5cd2 --- /dev/null +++ b/img/4el.svg @@ -0,0 +1,231 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/cf.svg b/img/cf.svg new file mode 100644 index 0000000..5dcc927 --- /dev/null +++ b/img/cf.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/default.svg b/img/default.svg new file mode 100644 index 0000000..5509b05 --- /dev/null +++ b/img/default.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/dweb.svg b/img/dweb.svg new file mode 100644 index 0000000..6183574 --- /dev/null +++ b/img/dweb.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/img/me.svg b/img/me.svg new file mode 100644 index 0000000..31deb48 --- /dev/null +++ b/img/me.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/img/nfts.svg b/img/nfts.svg new file mode 100644 index 0000000..d3bd525 --- /dev/null +++ b/img/nfts.svg @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/os.svg b/img/os.svg new file mode 100644 index 0000000..435b0d0 --- /dev/null +++ b/img/os.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/scan.svg b/img/scan.svg new file mode 100644 index 0000000..0679fa7 --- /dev/null +++ b/img/scan.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/img/udl.ink.svg b/img/udl.ink.svg new file mode 100644 index 0000000..dc88eee --- /dev/null +++ b/img/udl.ink.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/img/udlinklogo.png b/img/udlinklogo.png new file mode 100644 index 0000000..f020373 Binary files /dev/null and b/img/udlinklogo.png differ diff --git a/img/w3s.svg b/img/w3s.svg new file mode 100644 index 0000000..06485c3 --- /dev/null +++ b/img/w3s.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8f2b553 --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + + UDlink Docs + + + + + + + + + + + + + + + + + + + + + +
+ udl.ink/ + + + +
+
+ Options + +
+ +
+
+
+ Default +

Default

+
+
+ Cloudflare +

Cloudflare

+
+
+ UD.me Page +

UD.me Page

+
+
+ Block Explorer +

Block Explorer

+
+
+ OpenSea +

OpenSea

+
+
+ Dweb (ipfs.io) +

Dweb (ipfs.io)

+
+
+ NFTstorage +

NFTstorage

+
+
+ Web3storage +

Web3storage

+
+
+ 4everland.io +

4everland.io

+
+ +
+
+ +
+
+
+

Use the default gateway (checked and updated if the current default gateway stops working in the future), + select a specific gateway, or use one of the extra features like Opensea or Block Explorer linking

+
+

Note: the formatting of this page is currently very broken on mobile, and is being actively + worked on.

+
+
+ + + + Alchemy Supercharged + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..25becd8 --- /dev/null +++ b/script.js @@ -0,0 +1,133 @@ +const prefix = document.getElementById("input-prefix"); +const userInput = document.getElementById("user-input"); +const exampleTexts = [ + "8bitsquid.x", + "3blocks.x", + "kooheji.crypto", + "charlielowndes.nft", + "bro.nft", + "virtualjester.x", + "sandy.nft", + "0xcryptopapi.x", +]; +const carousel = document.querySelector(".carousel"); +const scrollLeftButton = document.querySelector(".scroll-left"); +const scrollRightButton = document.querySelector(".scroll-right"); +let currentIndex = 0; +let typing = true; +let typingIndex = 0; +let userInputClear = true; +let flashCount = 0; + +scrollLeftButton.addEventListener("click", () => { + carousel.scrollBy({ + left: -480, // Scroll 3 options to the left + behavior: 'smooth' // Use smooth scrolling + }); +}); + +scrollRightButton.addEventListener("click", () => { + carousel.scrollBy({ + left: 480, // Scroll 3 options to the right + behavior: 'smooth' // Use smooth scrolling + }); +}); + +function animateGhostText() { + if (userInput.value === "") { + if (typing) { + userInput.placeholder = exampleTexts[currentIndex].substring(0, typingIndex++) + "|"; + if (typingIndex > exampleTexts[currentIndex].length) { + typing = false; + setTimeout(() => { if (userInputClear) animateGhostText() }, 200); + } else { + setTimeout(() => { if (userInputClear) animateGhostText() }, 200); + } + } else { + if (flashCount < 5) { + userInput.placeholder = exampleTexts[currentIndex].substring(0, typingIndex) + ((flashCount % 2) ? "" : "|"); + flashCount++; + setTimeout(() => { if (userInputClear) animateGhostText() }, 500); + return; + } + userInput.placeholder = exampleTexts[currentIndex].substring(0, typingIndex--) + "|"; + if (typingIndex === 0) { + typing = true; + flashCount = 0; + currentIndex = (currentIndex + 1) % exampleTexts.length; + setTimeout(() => { if (userInputClear) animateGhostText() }, 200); + } else { + setTimeout(() => { if (userInputClear) animateGhostText() }, 100); + } + } + } else { + userInput.placeholder = ""; + } +} + +userInput.addEventListener("input", () => { + if (userInput.value === "") { + typingIndex = 0; + typing = true; + flashCount = 0; + userInputClear = true; + animateGhostText(); + } else { + userInput.placeholder = ""; + userInputClear = false; + } +}); + +animateGhostText(); + +document.querySelector(".collapsible").addEventListener("click", function () { + this.classList.toggle("active"); + carousel.style.maxHeight = carousel.style.maxHeight ? null : carousel.scrollHeight + "px"; +}); + +Array.from(document.getElementsByClassName("option")).forEach(option => { + option.addEventListener("click", () => { + document.documentElement.style.setProperty("--input-prefix-width", option.getAttribute("data-prefix").length + "0px"); + prefix.textContent = option.getAttribute("data-prefix"); + }); +}); + +async function copyToClipboard(text) { + try { + await navigator.clipboard.writeText(text); + return true; + } catch (err) { + console.error("Failed to copy text: ", err); + return false; + } +} + +const inputButton = document.getElementById("copy-button"); +const copyIcon = inputButton.innerHTML; +const copiedIcon = document.getElementById("copied-tick").cloneNode(true); +copiedIcon.style.display = ""; +inputButton.addEventListener("click", async () => { + if (userInput.value !== "") { + if (await copyToClipboard(`${prefix.textContent}${userInput.value}`)) { + // Change button content to a checkmark + inputButton.innerHTML = copiedIcon.outerHTML; + + // Revert button content back after 1 second + setTimeout(() => { + inputButton.innerHTML = copyIcon; + }, 1000); + } else { + alert(`Your browser does not support copying to clipboard, please copy the link below manually:\nhttps://${prefix.textContent}${userInput.value}`); + } + } else { + alert("Please enter an Unstoppable Domain to link to"); + } +}); + +document.getElementById("go-now").addEventListener("click", () => { + if (userInput.value !== "") { + window.open(`https://${prefix.textContent}${userInput.value}`, "_blank"); + } else { + alert("Please enter an Unstoppable Domain to go to"); + } +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4e7f7cb --- /dev/null +++ b/styles.css @@ -0,0 +1,289 @@ +/* latin */ +@font-face { + font-family: 'JetBrains Mono'; + font-style: italic; + font-weight: 200; + font-stretch: 100%; + src: url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-200-italic.woff2) format('woff2'), url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-200-italic.woff) format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin */ +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 200; + font-stretch: 100%; + src: url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-200-normal.woff2) format('woff2'), url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-200-normal.woff) format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* latin-ext */ +@font-face { + font-family: 'JetBrains Mono'; + font-style: italic; + font-weight: 200; + font-stretch: 100%; + src: url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-ext-200-italic.woff2) format('woff2'), url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-ext-200-italic.woff) format('woff'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin-ext */ +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 200; + font-stretch: 100%; + src: url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-ext-200-normal.woff2) format('woff2'), url(https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-ext-200-normal.woff) format('woff'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +:root { + --bg-colour: #122654; + --accent-colour: #2be9ff; + --accent-colour-2: #9976f3; + --input-box-bg-colour: #1a2a5a; + --input-box-bg-colour-2: #122654; + --input-box-border-thickness: 2px; + --input-box-border-colour: #2be9ff; + --input-box-border: var(--input-box-border-thickness) solid var(--input-box-border-colour); + --input-box-text-colour: #2be9ff; + --input-box-placeholder-colour: #2be9ff; + --input-box-button-colour: #2be9ff; + --input-box-border-radius: 20px; + --input-buttons-bg-colour: #122654; + --collapsible-expand-time: 0.25s; + --collapsible-bg-colour: #1a2a5a; +} + +html { + --input-prefix-width: 80px; +} + +body { + font-family: 'JetBrains Mono', monospace; + margin: 0; + min-height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + overflow-x: hidden; + overflow-y: scroll; + scrollbar-width: none; + background-image: linear-gradient(to top, transparent, transparent), linear-gradient(to bottom, var(--bg-colour), var(--accent-colour-2)); + background-repeat: no-repeat; + background-size: 100% auto, 100% 100%; + background-attachment: fixed; + background-position: 0 100%, 0 0; +} + +body::-webkit-scrollbar { + display: none; +} + +.banner-image { + display: flex; + justify-content: center; + min-height: 150px; + margin: 20px 10%; +} + +.banner-image img { + max-height: 150px; + max-width: 80%; +} + +.input-container { + display: flex; + border: var(--input-box-border); + border-radius: var(--input-box-border-radius); + margin-bottom: 10px; +} + +.input-prefix { + background-color: var(--input-box-bg-colour-2); + color: var(--accent-colour); + padding: 8px; + font-size: 16px; + border-right: var(--input-box-border); + display: flex; + align-items: center; + width: var(--input-prefix-width); + border-radius: var(--input-box-border-radius) 0 0 var(--input-box-border-radius); + justify-content: flex-end; +} + +.user-input { + font-family: 'JetBrains Mono', monospace; + background-color: var(--input-box-bg-colour); + color: var(--accent-colour); + width: calc(300px - var(--input-prefix-width)); + /* TODO: make dynamic */ + padding: 8px; + font-size: 16px; + border: none; + outline: none; +} + +.user-input::placeholder { + color: var(--accent-colour); +} + +.input-button { + background-color: var(--input-buttons-bg-colour); + border: none; + padding: 8px; + cursor: pointer; + outline: none; + border-left: var(--input-box-border); + display: flex; + justify-content: center; + align-items: center; +} + +.last-button { + border-radius: 0 var(--input-box-border-radius) var(--input-box-border-radius) 0; +} + +.input-button svg { + fill: var(--accent-colour); + width: 20px; + height: 15px; +} + +.collapsible-container { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + margin-top: 10px; +} + +.collapsible { + background-color: transparent; + cursor: pointer; + padding: 10px; + border: none; + transition: var(--collapsible-expand-time); +} + +.collapsible-text { + color: var(--accent-colour); +} + +.collapsible svg { + height: 10px; + fill: var(--accent-colour); +} + +.collapsible.active { + transform: scaleY(-1); +} + +.carousel-wrapper { + position: relative; + width: 100%; + overflow-y: hidden; + display: inline-flex; + align-items: center; + pointer-events: none; +} + +.carousel { + max-height: 0; + width: 100%; + overflow-x: scroll; + white-space: nowrap; + transition: max-height var(--collapsible-expand-time) ease-in-out; + display: inline-flex; + justify-content: flex-start; + background-color: var(--collapsible-bg-colour); + scrollbar-width: none; + -ms-overflow-style: none; + pointer-events: auto; +} + +.carousel::-webkit-scrollbar { + display: none; +} + +.carousel:after { + content: ""; + position: absolute; + width: 100%; + height: 100%; + box-shadow: inset 0px 20px 15px -15px #000, inset 0px -15px 15px -15px #000; + pointer-events: none; +} + +.scroll-button { + border: none; + padding: 10px; + cursor: pointer; + z-index: 1; + background-color: transparent; + position: absolute; +} + +.scroll-button svg { + fill: var(--accent-colour); + height: 20px; +} + +.scroll-left { + margin-left: 60px; + left: 0px; + pointer-events: auto; +} + +.scroll-right { + margin-right: 60px; + right: 0px; + pointer-events: auto; +} + +.carousel-inner-wrapper { + display: flex; + padding: 0px calc(50% - 60px); + scroll-snap-type: y mandatory; +} + +.carousel-inner-wrapper>div { + scroll-snap-align: center; +} + +.option { + width: 100px; + height: 100px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 10px; + cursor: pointer; + border: none; +} + +.option img { + width: 100px; + height: 50px; + object-fit: contain; +} + +.option p { + margin: 10px; + font-size: 12px; + color: var(--accent-colour); +} + +.options-description { + display: flex; + max-width: 800px; + color: var(--accent-colour); + flex-direction: column; + justify-content: flex-start; + margin: 0px 10%; +} + +/* TODO: @media (width < 600px) { stuff to change format of input box } */ \ No newline at end of file