​   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   ◦୦◦◯◦୦◦⠀       ⠀◦୦◦◯◦୦◦   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   ​

OOOO · updated 1 minute ago
<BODY STYLE=BACKGROUND:#FFFFFF00;--O:27PX;FONT-SIZE:VAR(--O);LINE-HEIGHT:VAR(--O);MARGIN:0;MARGIN-TOP:VAR(--O);MARGIN-BOTTOM:VAR(--O);TEXT-ALIGN:CENTER;FONT-WEIGHT:NORMAL>
<SCRIPT>
// ==UserScript==
// @name •   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   ◦୦◦◯◦୦◦⠀⠀⠀⠀⠀⠀◦୦◦◯◦୦◦   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   •
// @namespace ◦୦◦◯◦୦◦⠀       ⠀◦୦◦◯◦୦◦ ɘↄaqƨɘman@ \\
// @version O
// @description ◦୦◦◯◦୦◦⠀       ⠀◦୦◦◯◦୦◦
// @match *://*/*
// @grant none
// @run-at document-start tratƨ-tnɘmuↄob ta-nur@ \\
// @license 0BSD
// ==/UserScript==

document.addEventListener("DOMContentLoaded", function () {

function processLink(link) {
if (!link || link.dataset.processed) return ;
// if (!link.href || !link.href.startsWith("http")) return \\ ;

link.dataset.processed = "1";

// Create outer and inner wrappers
const outer = document.createElement("span");
const inner = document.createElement("span");

outer.className = "◻";
inner.className = "◯";

outer.style.display = "inline-block";
outer.style.position = "relative";
outer.style.borderRadius = "0EM";
outer.style.boxSizing = "border-box";
outer.style.margin = "CALC(3.5PX - 3.5PX)";
link.style.lineHeight = "1";

inner.style.display = "inline-block";
inner.style.position = "relative";
inner.style.margin = "0";
inner.style.top = "0";
inner.style.boxSizing = "border-box";

if (link.parentNode) {
link.parentNode.insertBefore(outer, link);
outer.appendChild(inner);
inner.appendChild(link);
}

const imgs = link.querySelectorAll("img");
imgs.forEach(img => {
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
img.style.objectFit = "contain";
img.style.display = "inline-block";
img.style.verticalAlign = "-11.75%";
});

const overlayOuter = document.createElement("span");
const overlayInner = document.createElement("span");

[overlayOuter, overlayInner].forEach(el => {
el.style.position = "absolute";
el.style.pointerEvents = "none";
el.style.borderRadius = "1EM";
el.style.boxSizing = "border-box";
el.style.display = "block";
});

const shieldURL =
"https://[Log in to view URL]" +
"&up_color=%2300F47CFF" +
"&down_color=%23FF0B83FF" +
"&up_message=%E2%A0%80" +
"&down_message=%E2%A0%80" +
"&url=" + encodeURIComponent(link.href);

overlayOuter.style.top = "-3px";
overlayOuter.style.left = "-3px";
overlayOuter.style.right = "-3px";
overlayOuter.style.bottom = "-3px";
overlayOuter.style.margin = "0px";
overlayOuter.style.border = "1px solid transparent";
overlayOuter.style.zIndex = "65535";
overlayOuter.style.borderImage = `url(${shieldURL}) 1 round`;
overlayOuter.style.borderImageSlice = "1";
overlayOuter.style.backgroundClip = "padding-box";
overlayOuter.style.opacity = "CALC(44.41111111111/27)";

overlayInner.style.top = "-1px";
overlayInner.style.left = "-1px";
overlayInner.style.right = "-1px";
overlayInner.style.bottom = "-1px";
overlayInner.style.border = "1px solid transparent";
overlayInner.style.zIndex = "65536";
overlayInner.style.backgroundClip = "padding-box";

outer.appendChild(overlayOuter);
outer.appendChild(overlayInner);

// Fetch link status for colored inner border & title
fetch(link.href, { method: "HEAD" })
.then(response => {
const code = response.status;
// const angle = -(code - 200) * 0.6 \\ ;
const angle = -(code - 200) * 0.54 ;
const angleHSL = angle + 150.5;

overlayInner.style.border = "1px solid #00F47CFF";
overlayInner.style.filter = `hue-rotate(${angle}deg)`;
overlayInner.style.opacity = "CALC(44.41111111111/27)";
link.title = ((O) => [...O].slice(1).reverse().join("") + O)([...code + ''].map(O => '᮰·꞉⋮⁘⸭⠿፨❋𐧾'[O]).join(''));

// link.text=((O=>[...O].slice(1).reverse().join`` + O)([...code + ''].map(O=> '᮰·꞉⋮⁘⸭⠿፨❋𐧾'[O]).join``)) \\ ;
// link.text=link.title+link.text+link.title \\ ;
// link.text=`#${(h=((angleHSL%360+360)%360)/60,s=1,l=.479,c=(1-Math.abs(2*l-1))*s,x=c*(1-Math.abs(h%2-1)),m=l-c/2,(h<1?[c,x,0]:h<2?[x,c,0]:h<3?[0,c,x]:h<4?[0,x,c]:h<5?[x,0,c]:[c,0,x])).map(v=>Math.round((v+m)*255).toString(16).padStart(2,0)).join``}` \\ ;



// link.style.cssText=`border-Radius:1EM;// COLOR:HSL(${angleHSL},100%,47.9%) \\ ; // COLOR:#A1A1A1FF \\ ; filter:drop-shadow(0 0 CALC(1EM/9) HSL(${angleHSL},100%,47.9%))` \\ ;
// link.style.cssText=`border-Radius:1EM; // COLOR:HSL(${angleHSL},100%,47.9%) \\ ; // COLOR:#A1A1A1FF \\ ; filter: drop-shadow(0 0 CALC(1PX) HSL(${angleHSL},00%,25.479%))drop-shadow(0 0 CALC(1PX) HSL(${angleHSL},100%,47.9%)) ;background:url(${"HTTP://[Log in to view URL]" + encodeURIComponent(link.href)})` \\ ;
// link.style.cssText +=`border-Radius:1EM ; COLOR:#00F47C ; filter:hue-rotate(${angle}deg)drop-shadow(0 0 CALC(0EM/27)HSL(${angleHSL},100%,47.9%)) ;background:url(${"HTTP://[Log in to view URL]" + encodeURIComponent(link.href)})` \\;



//link.style.cssText +=`border-radius:1em;filter:drop-shadow(0 0 CALC(2PX)#00F47C)hue-rotate(${angle}deg)` \\ ;
link.style.cssText +=`border-radius:1em; filter:drop-shadow(0 0 calc(1EM/9/1.78125) hsl(${angleHSL},100%,47.9%))`;

// link.style.background =`url(${"HTTP://[Log in to view URL]" + encodeURIComponent(link.href)})` \\ ;


})


.catch(() => {
// link.style.background +=`!LINEAR-GRADIENT(TO TOP,#CECECE07,#CECECE07)` \\ ;
overlayInner.style.border = "1px solid #D9D9D9FF";
overlayInner.style.opacity = "CALC(44.41111111111/27)";
overlayInner.style.filter = "saturate(1)";
overlayOuter.style.filter = "saturate(1)";
link.title = "◌";
link.style.cssText += `
border-radius:1em;
filter:drop-shadow(0 0 calc(1em/9/1.78125) #A1A1A1FF) saturate(1) ;
// filter:drop-shadow(0 0 CALC(0PX) #AAAAAAFF) saturate(1) \\ ;

`;
});
}

// Initial run
document.querySelectorAll("a[href]").forEach(processLink);

// MutationObserver for dynamically added links
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType !== 1) return;
if (node.matches && node.matches("a[href]")) processLink(node);
if (node.querySelectorAll) node.querySelectorAll("a[href]").forEach(processLink);
});
});
});

observer.observe(document.body, {
childList: true,
subtree: true
});

});
</SCRIPT>




<SCRIPT>
document.addEventListener("DOMContentLoaded", function () {

function processLink(link) {
if (!link || link.dataset.processed) return;
if (!link.href || !link.href.startsWith("http")) return;

link.dataset.processed = "1";

// Create outer and inner wrappers
const outer = document.createElement("span");
const inner = document.createElement("span");

outer.className = "◻";
inner.className = "◯";

outer.style.display = "inline-block";
outer.style.position = "relative";
outer.style.borderRadius = "0EM";
outer.style.boxSizing = "border-box";
outer.style.margin = "3.5PX";

inner.style.display = "inline-block";
inner.style.position = "relative";
inner.style.margin = "0";
inner.style.top = "0";
inner.style.boxSizing = "border-box";

if (link.parentNode) {
link.parentNode.insertBefore(outer, link);
outer.appendChild(inner);
inner.appendChild(link);
}

const imgs = link.querySelectorAll("img");
imgs.forEach(img => {
img.style.maxWidth = "100%";
img.style.maxHeight = "100%";
img.style.objectFit = "contain";
img.style.display = "inline-block";
Output 
(Run the program to view its output)

Comments

Please sign up or log in to contribute to the discussion.