<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>RSIC BOOST</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background-color: #000;
overflow: hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55vmin;
height: 55vmin;
border: 5px solid #666;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
animation: pulse 1s infinite ease-in-out;
}
.particle-ring,
.rune-ring {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rune {
position: absolute;
color: #fff;
font-size: 1vmin;
user-select: none;
transform-origin: center;
font-weight: 700;
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
50% {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}
}
.rsic-boost-text {
position: absolute;
top: calc(50% + 56vmin / 2 + 16px);
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 1.5em;
text-align: center;
font-family: "Courier New", Courier, monospace;
font-weight: 700;
}
body>doge {
display: none !important;
}
</style>
</head>
<body>
<doge><img /></doge>
<div class="container" id="container"></div>
<div class="rsic-boost-text">RSIC BOOST</div>
<script>
const t = document.getElementById("container"),
e = "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛈᛇᛉᛊᛏᛒᛖᛗᛚᛜᛞᛟ".repeat(5).split("");
for (let n = 0; n < 8; n++) {
const o = document.createElement("div");
o.classList.add("rune-ring");
const s = 3 + 3 * n + "vmin",
r = e.slice(0, Math.min(24, e.length));
for (let t = 0; t < r.length; t++) {
const e = document.createElement("span");
(e.textContent = r[t]), e.classList.add("rune");
const n = (360 / r.length) * t;
(e.style.transform = `rotate(${n}deg) translate(${s}) rotate(-${n}deg)`),
o.appendChild(e);
}
t.appendChild(o);
const i = `rotate-rune-ring-${n}`,
c = `@keyframes ${i} {\n from {transform: rotate(0deg);}\n to {transform: rotate(${
n % 2 == 0 ? "360deg" : "-360deg"
});}\n }`;
document.styleSheets[0].insertRule(c, 0),
(o.style.animation = `${i} ${7 + 3 * n}s linear infinite`);
}
let n = -1;
async function o() {
const t = await fetch("/r/blockheight")
.then((t) => {
if (!t.ok) throw new Error("Invalid response");
return t.json();
})
.catch((t) => {
console.error("Error fetching block height:", t);
});
t != n &&
(-1 != n &&
(function() {
const t = document.querySelector(".rsic-boost-text");
(t.style.color = "#FF9900"),
setTimeout(() => {
t.style.color = "white";
}, 3e4);
})(),
(n = t));
}
function s() {
const t = document.getElementById("container"),
e = document.querySelector(".rsic-boost-text");
(e.textContent = "RSIC BOOST"),
t.offsetWidth < 80 || t.offsetHeight < 80 ?
(e.textContent = "") :
t.offsetWidth < 128 || t.offsetHeight < 128 ?
(e.style.fontSize = ".3em") :
t.offsetWidth < 256 || t.offsetHeight < 256 ?
(e.style.fontSize = ".8em") :
t.offsetWidth > 512 && t.offsetHeight > 512 ?
(e.style.fontSize = "2em") :
(e.style.fontSize = "1.5em");
}
s(),
window.addEventListener("resize", s),
(function t() {
setTimeout(() => {
t(), o();
}, 1e3);
})();
</script>
</body>
</html>
No replies yet