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

OOOO · updated 48 seconds ago
<BODY STYLE=--O:27PX;FONT-SIZE:VAR(--O);LINE-HEIGHT:VAR(--O);MARGIN:0;TEXT-ALIGN:CENTER;FONT-WEIGHT:BOLD><!--
--!><A HREF="HTTP0://HTTPBIN.ORG/status/101"><IMG SRC=HTTP://[Log in to view URL] STYLE=WIDTH:VAR(--O);HEIGHT:VAR(--O);VERTICAL-ALIGN:MIDDLE>🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄<IMG SRC=HTTP://[Log in to view URL] STYLE=WIDTH:VAR(--O);HEIGHT:VAR(--O);VERTICAL-ALIGN:MIDDLE></A><BR><!--
--!><A HREF="HTTP://[Log in to view URL]">   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   </A><BR><!--
--!><A HREF="HTTP://[Log in to view URL]">   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   </A><BR><!--
--!><A HREF="HTTP://[Log in to view URL]">   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   </A><BR><!--
--!><A HREF="HTTP://[Log in to view URL]">   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   </A><BR><!--
--!><A HREF="HTTP://[Log in to view URL]">   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   </A><BR><!--
--!><A HREF="HTTP://[Log in to view URL]">   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄   🟪🟥🟧🟨🟩🟦🟩🟨🟧🟥🟪   </A><BR>
<A HREF="HTTP://[Log in to view URL]"><IMG SRC=HTTP://[Log in to view URL] STYLE=WIDTH:VAR(--O);HEIGHT:VAR(--O);VERTICAL-ALIGN:MIDDLE>🞄⏺🞄⬤🞄⏺🞄⠀       ⠀🞄⏺🞄⬤🞄⏺🞄<IMG SRC=HTTP://[Log in to view URL] STYLE=WIDTH:VAR(--O);HEIGHT:VAR(--O);VERTICAL-ALIGN:MIDDLE></A><BR>
<SCRIPT>
document.addEventListener("DOMContentLoaded", function () {

document.querySelectorAll("a[href]").forEach(link => {

if (link.parentElement.classList.contains("outer-wrap")) return;

const url = link.href;
if (!url.startsWith("http") && !url.startsWith("HTTP") && !url.startsWith("https") && !url.startsWith("HTTPS") ) return;


const outer = document.createElement("span");
const inner = document.createElement("span");
outer.className = "outer-wrap";

outer.style.display = "inline-block";
outer.style.position = "relative";

inner.style.display = "inline-block";
inner.style.position = "relative";

link.parentNode.insertBefore(outer, link);
outer.appendChild(inner);
inner.appendChild(link);


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";
});


overlayOuter.style.width = "CALC(100%/9*9)";
overlayOuter.style.height = "CALC(100%/9*9 - 1.5PX)";
overlayOuter.style.top = "CALC(50% + 0PX)";
overlayOuter.style.left = "50%";
overlayOuter.style.padding = "0px 0px 0px 0px";

overlayOuter.style.margin = "0px 0px 0px 0px";

overlayOuter.style.transform = "translate(-50%, -50%)";

overlayOuter.style.border = "1px solid TRANSPARENT";
overlayOuter.style.borderStyle = "solid";
overlayOuter.style.borderWidth = "1px";
overlayOuter.style.zIndex = "65535";

overlayInner.style.width = "CALC(100%/9*9)";
overlayInner.style.height = "CALC(100%/9*9 - 1PX)";
overlayInner.style.margin = "0px 0px 0px 2px";
overlayInner.style.top = "50%";
overlayInner.style.left = "50%";
overlayInner.style.transform = "translate(-50%, -50%)";
overlayInner.style.zIndex = "65536";


const shieldURL =
"HTTP://[Log in to view URL]" + encodeURIComponent(url);

overlayOuter.style.borderImage = "url(" + shieldURL + ") 1";
overlayOuter.style.mixBlendMode="NORMAL";
overlayOuter.style.opacity="CALC(44.41111111111/27)";


fetch(url, { 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 = "0px 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==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%);filter: drop-shadow(0 0 CALC(1EM/9/1) HSL(${angleHSL},100%,47.9%));background:url(${"HTTP://[Log in to view URL]" + encodeURIComponent(url)})`;


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


})


.catch(() => {
overlayInner.style.border = "0px SOLID #CECECEFF";
overlayOuter.style.filter = "SATURATE(0)";
link.title = "◌";
link.text==link.title+link.text+link.title;
link.style.cssText= `
COLOR:#CECECEFF;
border-Radius:1EM;
BACKGROUND:LINEAR-GRADIENT(TO TOP,#CECECE01,#CECECE01);
FILTER:drop-shadow(0 0 calc(1em/9/1) #000000FF)SATURATE(0);

})
`;

});

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

});

});
</SCRIPT>




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

document.querySelectorAll("a[href]").forEach(link => {

if (link.parentElement.classList.contains("outer-wrap")) return;

const url = link.href;
if (!url.startsWith("http") && !url.startsWith("HTTP") && !url.startsWith("https") && !url.startsWith("HTTPS") ) return;


const outer = document.createElement("span");
const inner = document.createElement("span");
outer.className = "outer-wrap";

outer.style.display = "inline-block";
outer.style.position = "relative";

inner.style.display = "inline-block";
inner.style.position = "relative";

link.parentNode.insertBefore(outer, link);
outer.appendChild(inner);
inner.appendChild(link);


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";
});


overlayOuter.style.width = "CALC(100%/9*3)";
overlayOuter.style.height = "CALC(100%/9*3)";
overlayOuter.style.padding = "0px";
overlayOuter.style.margin = "0px";
overlayOuter.style.top = "50%";
overlayOuter.style.left = "50%";
overlayOuter.style.transform = "translate(-50%, -50%)";
overlayOuter.style.border = "1px solid TRANSPARENT";
overlayOuter.style.borderStyle = "solid";
overlayOuter.style.borderWidth = "1px";
overlayOuter.style.zIndex = "65535";

overlayInner.style.width = "CALC(100%/9*1)";
overlayInner.style.height = "CALC(100%/9*1)";
overlayInner.style.top = "50%";
overlayInner.style.left = "50%";
overlayInner.style.transform = "translate(-50%, -50%)";
overlayInner.style.zIndex = "65536";


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

overlayOuter.style.borderImage = "url(" + shieldURL + ") 1";
overlayOuter.style.mixBlendMode="NORMAL";
overlayOuter.style.opacity="CALC(4.41111111111/27)";


fetch(url, { method: "HEAD" })
.then(response => {
const code = response.status;
const angle = -(code - 200) * 0.6;
overlayInner.style.border = "1px SOLID #00F47CFF";
overlayInner.style.filter = `hue-rotate(${angle}deg)`;
overlayInner.style.mixBlendMode="NORMAL";
overlayInner.style.opacity="CALC(4.41111111111/27)";


link.title = ((O => [...O].slice(1).reverse().join`` + O)([...code + ''].map(O=> '᮰·꞉⋮⁘⸭⠿፨❋𐧾'[O]).join``));

Output
(Run the program to view its output)

Comments

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