Inscription
67,921,251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Courier New';
}
img {
pointer-events: none;
}
p {
font-size: 4vw;
line-height: 0vw;
font-weight: bold;
}
h2 {
font-size: 5vw;
}
p span {
font-weight: normal;
}
#miner-container {
position: relative;
width: 100%;
z-index: 1;
}
#background-image {
width: 100%;
height: auto;
display: block;
mix-blend-mode: difference;
}
#loading-image,
#mana-image,
#season2-image,
#hypno-image,
#color-image,
#color-overlay-image,
#lava-image,
#fire-image,
#pulse-image {
width: 100%;
height: auto;
display: block;
z-index: 3;
}
#loading-container,
#color-overlay-container {
position: absolute;
overflow: hidden;
opacity: 1;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
z-index: 3;
}
#loading-container {
animation: pulseAnimationLoad 1s infinite;
z-index: 3;
}
.runesign {
position: absolute;
width: 7vw;
height: 8vw;
background: rgba(0, 0, 0, 0.9);
text-align: center;
display: table-cell;
vertical-align: middle;
color: white;
font-weight: bold;
font-size: 4.5vw;
z-index: 3;
border-radius: 50%;
mix-blend-mode: multiply;
}
.sign {
padding: 1.1vw;
}
#runesign-container1 {
top: 29%;
left: 16.5%;
}
#runesign-container2 {
top: 28%;
left: 75.5%;
}
#runesign-container3 {
top: 64.8%;
left: 14%;
}
#runesign-container4 {
top: 64%;
left: 77%;
}
#grey-container img {
position: absolute;
width: 100%;
height: auto%;
top: 0px;
left: 0px;
animation: pulseAnimation 1s infinite;
}
#loading-container,
#mania-container,
#season2-container,
#mana-container,
#lava-container,
#fire-container,
#hypno-container,
#color-container,
#color-overlay-container {
position: absolute;
}
canvas {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
}
#info-overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 92%;
height: 92%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 999;
color: #fff;
padding: 4%;
}
#info-button {
position: absolute;
top: 3vw;
right: 3vw;
z-index: 1000;
}
#info {
width: 5vw;
height: 5vw;
background-color: #000;
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3vw;
opacity: 0.9;
border: 1px solid white;
}
.social {
font-size: 3vw;
text-align: center;
font-weight: normal;
margin-top: 5vw;
}
/*fire*/
#fire-container {
position: absolute;
top: 0vw;
left: 7vw;
}
.fire {
font-size: 24px;
filter: blur(0.01em);
margin: 0;
position: relative;
width: 23vw;
height: 43vw;
opacity: 0.65;
}
.particle {
border-radius: 50%;
mix-blend-mode: screen;
position: absolute;
bottom: 0;
width: 4.5vw;
height: 7.5vw;
animation-iteration-count: infinite;
}
.particle_pink {
background-image: radial-gradient(rgb(114, 0, 220) 20%, rgba(10, 49, 118, 0) 70%);
}
.particle_green {
background-image: radial-gradient(rgb(2, 84, 20) 20%, rgba(10, 49, 118, 0) 70%);
}
.particle_blue {
background-image: radial-gradient(rgb(0, 22, 164) 20%, rgba(10, 49, 118, 0) 70%);
}
.particle_red {
background-image: radial-gradient(rgb(176, 0, 18) 20%, rgba(227, 255, 0, 0) 70%);
}
.particle_yellow {
background-image: radial-gradient(rgb(255, 80, 0) 20%, rgba(255, 80, 0, 0) 70%);
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(0) scale(1);
}
25% {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-10vw) scale(0);
}
}
#lava-container {
position: fixed;
z-index: 0;
right: 9.4vw;
top: 53.6vw;
overflow: hidden;
height: 28vw;
width: 21vw;
margin: auto;
border-radius: 50%;
transform: rotate(22deg);
mix-blend-mode: multiply;
}
.lava-wgmi {
background: linear-gradient(25deg, #d4fc79, #96e6a1);
}
.lava-moon {
background: linear-gradient(25deg, #DECBA4, #3E5151);
}
.lava-hodl {
background: linear-gradient(25deg, #8360c3, #2ebf91);
}
.lava-rekt {
background: linear-gradient(25deg, #8e2de2, #4a00e0);
}
.lava-maxi {
background: linear-gradient(25deg, #ff512f, #f09819);
}
.lava-meme {
background: linear-gradient(25deg, #fc5c7d, #6a82fb);
}
.lava-fade {
background: linear-gradient(25deg, #00b09b, #96c93d);
}
.lava-pump {
background: linear-gradient(25deg, #d64c7f, #ee4758);
}
/* spinner */
.spinner-container {
position: relative;
margin: auto;
/* Center the spinner container */
}
.spinner-container img,
.center-spinner,
.overlay-spinner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin-clockwise {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spin-counter {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.outer {
z-index: 99;
width: 27vw;
height: 27vw;
opacity: 0.7;
}
.outer_back {
mix-blend-mode: multiply;
z-index: 90;
}
.middle {
width: 22vw;
height: 22vw;
border-radius: 999px;
border: 10px solid black;
}
.inner {
width: 15vw;
height: 15vw;
}
.center-spinner {
width: 19vw;
/* Adjust size as needed */
height: 3vw;
/* Adjust size as needed */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: grey;
/* First color */
mix-blend-mode: difference;
}
.center-spinner::before,
.center-spinner::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
mix-blend-mode: multiply;
}
.center-spinner::before {
transform: rotate(120deg);
background-color: green;
/* Second color */
}
.center-spinner::after {
transform: rotate(240deg);
background-color: blue;
/* Third color */
}
.overlay-spinner {
width: 22vw;
/* Define the size */
height: 22vw;
/* Ensure it's a square */
mix-blend-mode: overlay;
border-radius: 99999px;
}
#hypno-container {
top: 51.8vw;
left: 32.3vw;
height: 31vw;
width: 31vw;
}
#mana-container {
border-radius: 50%;
animation: pulseAnimationRune ease-in-out 2s infinite;
-webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
mix-blend-mode: multiply;
}
@keyframes pulseAnimation {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
@keyframes pulseAnimationLoad {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
@keyframes pulseAnimationRune {
0%,
100% {
height: 23vw;
width: 14.5vw;
top: 56.6vw;
left: 10.2vw;
}
50% {
top: 56vw;
left: 9.2vw;
height: 25vw;
width: 17vw;
}
}
#info-overlay td {
font-size: 3vw;
border: 0.3vw solid white;
border-radius: 1vw;
height: 7.8vw;
width: 20%;
text-align: center;
}
#info-overlay table {
width: 100%;
}
td#inscription_id {
font-size: 1.6vw;
}
</style>
</head>
<body>
<div id="miner-container">
<audio style="display:none;" controls loop src="/content/b893aca36c1d8c7b803e294e3f465068f52cbdee374b7bb98688bea7fdcc4900i0"></audio>
<div id="background-container"><img id="background-image" src="/content/3e6ec32c25fd3e6b689353edab7270c19b53c7c1bced78917493c1a49a53eb53i0"></div>
<canvas></canvas>
<div id="mania-container"><img id="mania-image" src="/content/641ac9bb815668f12da670e3601cbbfc78315457c0ee2dbeea4d2d1e870c8af1i0"></div>
<div id="season2-container"><img id="season2-image" src="/content/84ec16ef05343e5e93b46fbc0e58ebdc6aca5a42890cd585f193cccb55c8eb8ai0"></div>
<div id="grey-container"><img id="grey-image" src="/content/fa555f31a1e8b79dc832e2d32f4c06bb616581f85537fee515daee3c3a62ab73i0"></div>
<div id="loading-container"><img id="loading-image" src="/content/5e25d859d12c3af2ee29b7c5e22a72f7fc9d09fc6eb9dd8a46caf2171adc98ffi0"></div>
<div id="fire-container">
<div id="fire" class="fire"></div>
</div>
<div id="color-container"><img id="color-image" src="/content/27d7b9eee4fd1b818642bbe4d36666ebc83aaa08152d3b74bca5ffea2995070fi0"></div>
<div id="color-overlay-container"><img id="color-overlay-image" src="/content/27d7b9eee4fd1b818642bbe4d36666ebc83aaa08152d3b74bca5ffea2995070fi0"></div>
<div id="lava-container"><canvas id="liquid"></canvas></div>
<div id="mana-container"></div>
<div id="hypno-container">
<div class="spinner-container">
<img id="spinner_outer_back" src="/content/c8caf1b9bf2bd21e94ebaa18f6f1eb8ee26fc825fc2f517fa1ed4e6d142a9cdei0" class="outer outer_back">
<img id="spinner_outer" src="/content/c8caf1b9bf2bd21e94ebaa18f6f1eb8ee26fc825fc2f517fa1ed4e6d142a9cdei0" class="outer">
<img id="spinner_middle" src="/content/fde2e591972365c181dac0793d48303e2ccc88a0fba4e14baffba47e73d3dd8fi0" class="middle">
<img id="spinner_inner" src="/content/386731712ed7a044920cc208fbadc9e138db1b86c7be8a9121c6d52d58db4f97i0" class="inner">
<div id="spinner_center" class="center-spinner"></div>
<div id="spinner" class="overlay-spinner"></div>
</div>
</div>
<div id="runesign-container1" class="runesign">
<div class="sign" id="runesign1"></div>
</div>
<div id="runesign-container2" class="runesign">
<div class="sign" id="runesign2"></div>
</div>
<div id="runesign-container3" class="runesign">
<div class="sign" id="runesign3"></div>
</div>
<div id="runesign-container4" class="runesign">
<div class="sign" id="runesign4"></div>
</div>
<div id="info-button">
<div id="info">
<span id="button-text">i</span>
</div>
</div>
<div id="info-overlay">
<table class="table">
<tr>
<td>#️⃣ID</td>
<td colspan="4" accesskey="" id="inscription_id"></td>
</tr>
<tr>
<td>🔢Block</td>
<td id="block_number"></td>
</tr>
<tr>
<td>🔥Fire</td>
<td id="fire_power"></td>
<td id="fire_color"></td>
</tr>
<tr>
<td>🗿Stone</td>
<td id="stone_power"></td>
<td id="stone_color"></td>
</tr>
<tr>
<td>🌀Hypno</td>
<td id="hypno_power"></td>
<td id="hypno_color1"></td>
<td id="hypno_color2"></td>
<td id="hypno_color3"></td>
</tr>
<tr>
<td>🧪Mana</td>
<td id="mana_power"></td>
<td id="mana_color"></td>
</tr>
<tr>
<td>🌋Lava</td>
<td id="lava_power"></td>
<td id="lava_color"></td>
</tr>
<tr>
<td>⛏️Mining</td>
<td id="mining_boost"></td>
</tr>
<tr>
<td>▣Runes</td>
<td id="rune1-icon"></td>
<td id="rune2-icon"></td>
<td id="rune3-icon"></td>
<td id="rune4-icon"></td>
</tr>
</table>
<p class="social">@RuneManiaMiner</p>
</div>
<div id="play" style="z-index: 50000; position:absolute; width:6vw; height:6vw; top:3vw; left:3vw; text-align:center; background:none; border:none;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#ffffff">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</div>
</div>
<script>
//Random inscriptionID function for testing purposes
function generateRandomInscriptionID() {
let result = '';
const characters = '0123456789ABCDEF';
const charactersLength = characters.length;
for (let i = 0; i < 64; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
result += 'i0'; // Append 'i0' to the end of the string
return result;
}
//Numbers
function extractNumbers(string) {
const matches = string.match(/\d+/g);
return matches ? matches.join('') : '';
}
//Letters
function extractLetters(string) {
const matches = string.match(/[a-zA-Z]/g);
return matches ? matches.join('') : '';
}
//Get InscriptionID & Block Number
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
let insc = urlParams.get('inscription_id');
if (!insc) {
insc = generateRandomInscriptionID();
}
let blockNumber = urlParams.get('block_number');
if (!blockNumber) {
blockNumber = 840000;
}
//Numbers&Letters
const numbersOnly = extractNumbers(insc);
const lettersOnly = extractLetters(insc);
//Runes
const runes = ['ᚱ', 'ᛞ', 'ᚦ', 'ᚨ', 'ᚠ', 'ᚲ', 'ᚷ', 'ᚹ', 'ᚺ', 'ᚾ', 'ᛁ', 'ᛃ', 'ᛈ', 'ᛇ', 'ᛉ', 'ᛊ', 'ᛏ', 'ᛒ', 'ᛖ', 'ᛗ', 'ᛚ', 'ᛜ', 'ᚢ', 'ᛟ'];
const RuneRarities = [3, 10, 10, 10, 20, 20, 20, 20, 20, 40, 40, 40, 40, 100, 100, 100, 100, 250, 250, 250, 250, 250, 250, 250];
//Colors
const colors = ['rainbow', 'core', 'demonic', 'gold', 'silver', 'blackrock', 'blue', 'moss', 'retro', 'aqua', 'green', 'purple'];
const ColorRarities = [2, 4, 15, 35, 90, 90, 150, 150, 150, 150, 150, 150];
//Lava
const lavaBackground = ['wgmi', 'moon', 'hodl', 'rekt', 'meme', 'maxi', 'fade', 'pump'];
const lavaBackgroundRarities = [1, 2, 5, 5, 10, 10, 10, 10];
const lavaColor = ['black', 'red', 'blue', 'yellow', 'green', 'purple', 'orange'];
const lavaColorRarities = [1, 2, 5, 10, 10, 10, 10];
//Hypno
const hypnoColor = ['red', 'blue', 'yellow', 'green', 'purple', 'orange'];
//Mana
const manaColors = ['red', 'blue', 'yellow', 'green', 'purple'];
//Fire Settings
const firecolors = ['pink', 'blue', 'red', 'green', 'yellow'];
const firecolorRarities = [1, 2, 2, 2, 3];
//Background Settings
const backgrounds = ['none', '#00008B', '#4b2000'];
/////
//Calculate Boosts
/////
//MINING BOOST
let loading = Number(numbersOnly.slice(0, 2)); //First 2 numbers of InscriptionID
if (loading < 15) {
loading = 15;
} //minimum
//RUNES BOOST
var numbers1 = Number(numbersOnly.slice(2, 8)); // Use 6 numbers (3-8) from InscriptionID = RuneSign1
var numbers2 = Number(numbersOnly.slice(3, 9)); // Use 6 numbers (4-9) from InscriptionID = RuneSign2
var numbers3 = Number(numbersOnly.slice(4, 10)); // Use 6 numbers (5-10) from InscriptionID = RuneSign3
var numbers4 = Number(numbersOnly.slice(5, 11)); // Use 6 numbers (6-11) from InscriptionID = RuneSign4
//RUNES BOOST RARITY
const getRuneByNumber = (number) => {
let threshold = 0;
const totalRange = 1000000;
for (let i = 0; i < runes.length; i++) {
threshold += totalRange * (RuneRarities[i] / RuneRarities.reduce((acc, val) => acc + val, 0));
if (number < threshold) return runes[i];
}
return runes[runes.length - 1];
};
rune1 = getRuneByNumber(numbers1);
rune2 = getRuneByNumber(numbers2);
rune3 = getRuneByNumber(numbers3);
rune4 = getRuneByNumber(numbers4);
//STONE BOOST
const colorLetters = lettersOnly.slice(3, 9); //Use 6 letters (4-9) of InscriptionID = color (A-F letters)
const converted = Number(Array.from(colorLetters.toLowerCase(), char => char.charCodeAt(0) - 96).join('')); //alphabetical numerical value (range 111111 & 666666)
const getColorByNumber = (number) => {
//Add Rarity
let threshold = 111111;
const totalRange = 555556;
for (let i = 0; i < colors.length; i++) {
threshold += totalRange * (ColorRarities[i] / ColorRarities.reduce((acc, val) => acc + val, 0));
if (number < threshold) return colors[i];
}
return colors[colors.length - 1];
};
color = getColorByNumber(converted); //Get color from inscriptionID
//STONE POWER
let colorPower = Number(numbersOnly.slice(-3, -1)); //Latest 2 numbers of InscriptionID
if (colorPower < 20) {
colorPower = 20;
} //minimum 20
//FIRE BOOST
var fireNumber = Number(numbersOnly.slice(5, 10)); // Use 5 numbers (6-10) from InscriptionID = FireColor
//FIRE BOOST RARITY
const getFireByNumber = (number) => {
let threshold = 0;
const totalRange = 100000;
for (let i = 0; i < firecolors.length; i++) {
threshold += totalRange * (firecolorRarities[i] / firecolorRarities.reduce((acc, val) => acc + val, 0));
if (number < threshold) return firecolors[i];
}
return runes[runes.length - 1];
};
fireColor = getFireByNumber(fireNumber);
//FIRE POWER
let firePower = Number(numbersOnly.slice(2, 4)); //Fire opacity: Number 3-4 of InscriptionID
//MANA BOOST
let manaColor = 0;
const manaPower = Number(numbersOnly.slice(4, 6)); // Number 5-6 of InscriptionID
if (manaPower >= 0 && manaPower <= 20) {
manaColor = manaColors[0];
} else if (manaPower >= 21 && manaPower <= 40) {
manaColor = manaColors[1];
} else if (manaPower >= 41 && manaPower <= 60) {
manaColor = manaColors[2];
} else if (manaPower >= 61 && manaPower <= 80) {
manaColor = manaColors[3];
} else if (manaPower >= 81 && manaPower <= 99) {
manaColor = manaColors[4];
}
//BACKGROUND
let backgroundStyle = '';
const backgroundNumber = Number(numbersOnly.slice(6, 8)); // Number 7-8 of InscriptionID
if (backgroundNumber >= 0 && backgroundNumber <= 40) {
backgroundStyle = backgrounds[0];
} else if (backgroundNumber >= 41 && backgroundNumber <= 80) {
backgroundStyle = backgrounds[1];
} else if (backgroundNumber >= 81 && backgroundNumber <= 99) {
backgroundStyle = backgrounds[2];
}
//LAVA BOOST
var lava1 = Number(numbersOnly.slice(0, 4)); // Use 4 numbers (1-4) from InscriptionID
var lava2 = Number(numbersOnly.slice(4, 8)); // Use 4 numbers (5-8) from InscriptionID
//LAVA BACKGROUND RARITY
const getLavaBack = (number) => {
let threshold = 0;
const totalRange = 10000;
for (let i = 0; i < lavaBackground.length; i++) {
threshold += totalRange * (lavaBackgroundRarities[i] / lavaBackgroundRarities.reduce((acc, val) => acc + val, 0));
if (number < threshold) return lavaBackground[i];
}
return lavaBackground[lavaBackground.length - 1];
};
lavaBack = getLavaBack(lava1);
//LAVA COLOR RARITY
const getLavaFront = (number) => {
let threshold = 0;
const totalRange = 10000;
for (let i = 0; i < lavaColor.length; i++) {
threshold += totalRange * (lavaColorRarities[i] / lavaColorRarities.reduce((acc, val) => acc + val, 0));
if (number < threshold) return lavaColor[i];
}
return lavaColor[lavaColor.length - 1];
};
lavaFront = getLavaFront(lava2);
//HypnoColors
const hypnoLetters = lettersOnly.slice(-4, -1); //Last 3 letters of the inscription
const hypnoConverted = Number(Array.from(hypnoLetters.toLowerCase(), char => char.charCodeAt(0) - 96).join('')); //alphabetical numerical value (range 111 & 666)
function seedShuffle(array, seed) {
let result = array.slice();
for (let i = result.length - 1; i > 0; i--) {
seed = (seed * 9301 + 49297) % 233280;
const j = Math.floor(seed / 233280 * (i + 1));
[result[i], result[j]] = [result[j], result[i]];
}
return result;
}
const hypnoArray = seedShuffle(hypnoColor, hypnoConverted);
//Hypno Power
const blockLetters = lettersOnly.slice(0, 2); //First 2 letters of InscriptionID
const blockStatic = Number(Array.from(blockLetters.toLowerCase(), char => char.charCodeAt(0) - 96).join('')); //alphabetical numerical value (range = 11 & 66)
const blockdynamic = Math.round((blockNumber - 840000) / 100) //formula for dynamic bonus
let block = blockStatic + blockdynamic;
if (block > 100) {
block = 100;
} //Maximum 100%
if (block < 11) {
block = 11;
} //Minimum 11%
let hypnoPower = block;
//ConsoleLog
console.log('InscriptionID:' + insc);
console.log('Block Number:' + blockNumber);
console.log('Mining Power:' + loading);
console.log('Stone Power:' + colorPower);
console.log('Stone Color:' + color);
console.log('Mana Power:' + manaPower);
console.log('Mana Color:' + manaColor);
console.log('Lava Power:' + lavaBack);
console.log('Lava Color:' + lavaFront);
console.log('Hypno Power:' + hypnoPower);
console.log('Hypno Colors:' + hypnoArray[0] + ', ' + hypnoArray[1] + ', ' + hypnoArray[2]);
console.log('Fire Power:' + firePower);
console.log('Fire Color:' + fireColor);
//Display in info box
document.getElementById('inscription_id').innerHTML = insc;
document.getElementById('block_number').innerHTML = blockNumber.toLocaleString('en-US', {
style: 'decimal',
maximumFractionDigits: 2
});
document.getElementById('hypno_power').innerHTML = hypnoPower;
document.getElementById('hypno_color1').innerHTML = ucfirst(hypnoArray[0]);
document.getElementById('hypno_color2').innerHTML = ucfirst(hypnoArray[1]);
document.getElementById('hypno_color3').innerHTML = ucfirst(hypnoArray[2]);
document.getElementById('stone_power').innerHTML = colorPower + '%';
document.getElementById('stone_color').innerHTML = ucfirst(color);
document.getElementById('lava_power').innerHTML = ucfirst(lavaBack);
document.getElementById('lava_color').innerHTML = ucfirst(lavaFront);
document.getElementById('mana_power').innerHTML = manaPower;
document.getElementById('mana_color').innerHTML = ucfirst(manaColor);
document.getElementById('fire_power').innerHTML = firePower;
document.getElementById('fire_color').innerHTML = ucfirst(fireColor);
document.getElementById('mining_boost').innerHTML = loading + '%';
//Set RuneColor & RuneSign
document.getElementById('runesign1').innerHTML = rune1;
document.getElementById('runesign2').innerHTML = rune2;
document.getElementById('runesign3').innerHTML = rune3;
document.getElementById('runesign4').innerHTML = rune4;
document.getElementById('rune1-icon').innerHTML = rune1;
document.getElementById('rune2-icon').innerHTML = rune2;
document.getElementById('rune3-icon').innerHTML = rune3;
document.getElementById('rune4-icon').innerHTML = rune4;
if (color == 'rainbow') {
colorid = '/content/db43e76b1220abca5a66e65395c65b1889ef497578e4b19b80223bbea2e70f8bi0';
}
if (color == 'core') {
colorid = '/content/cf7332ecda2e6f9aaf0fac52e7991ae6b5f015b416bcb59e53e4961c2d30446ai0';
}
if (color == 'demonic') {
colorid = '/content/5695f16332adf7630ab6d8815a8f0d9ef107f578b12a94090b9af3c3146968bai0';
}
if (color == 'gold') {
colorid = '/content/63fa55d4601d6274f4230639d064222fd649386de014a00060df29fe37447fd2i0';
}
if (color == 'silver') {
colorid = '/content/34e119fcdea877a19de82bada984d55fce508fab17c1d532f6cf799cc26d3e3ei0';
}
if (color == 'blue') {
colorid = '/content/e9ecd01596e1e451bd1ef3bf4a9cfa8c6eb33377e7d5538fee426a3664dda88fi0';
}
if (color == 'moss') {
colorid = '/content/528b098a4ef17a09bcbf92bbfb30cce73dcda470a3c5092af7a312c2b9dd69c6i0';
}
if (color == 'blackrock') {
colorid = '/content/6ecec25ecad63b7b5ac8c13fc21f3c8aa94ce49f8d42fb788cddd83bd762481ai0';
}
if (color == 'retro') {
colorid = '/content/e7be7a6744f5c7bcc8145595c84aa59c1d9ceb4fa834cc032467e2f3843cc7cai0';
}
if (color == 'aqua') {
colorid = '/content/2f24cadc19b226495b6ae8c087483ae62711a637fd05dad5d67275124dc89738i0';
}
if (color == 'green') {
colorid = '/content/40e12f71ce4f12a525e5e94122e4f0bea1817121f6f40b0c998e00e5e8a63566i0';
}
if (color == 'purple') {
colorid = '/content/b09871629aa50fb966a3a41f7b21e2abd4bc600f7552977d77b86a59a28f52f2i0';
}
document.getElementById('color-image').src = colorid;
//Set Mana
var manaCont = document.getElementById('mana-container');
manaCont.style.background = manaColor;
//Set Background
var background = document.getElementById('background-container');
background.style.background = backgroundStyle;
//Set Hypno
var spinner = document.getElementById('spinner');
const color1 = hypnoArray[0];
const color2 = hypnoArray[1];
const color3 = hypnoArray[2];
spinner.style.backgroundImage = `
conic-gradient(
${color1} 0deg, ${color1} 120deg,
${color2} 120deg, ${color2} 240deg,
${color3} 240deg, ${color3} 360deg
)`;
//Minimum value = 11, maximum value = 100
//Set HypnoPower (minimum value 11, max value 100)
const spinner_outer = document.getElementById('spinner_outer');
const spinner_outer_back = document.getElementById('spinner_outer_back');
const spinner_middle = document.getElementById('spinner_middle');
const spinner_inner = document.getElementById('spinner_inner');
const spinner_center = document.getElementById('spinner_center');
const spinner_overlay = document.getElementById('spinner');
//Calculate seconds
hypnoCalc = 100 - hypnoPower + 10;
spinner_outer.style.animation = 'spin-clockwise ' + hypnoCalc + 's linear infinite';
spinner_outer_back.style.animation = 'spin-clockwise ' + hypnoCalc + 's linear infinite';
spinner_middle.style.animation = 'spin-counter ' + hypnoCalc / 2 + 's linear infinite';
spinner_inner.style.animation = 'spin-clockwise ' + hypnoCalc / 4 + 's linear infinite';
spinner_center.style.animation = 'spin-counter ' + hypnoCalc / 8 + 's linear infinite';
spinner_overlay.style.animation = 'spin-clockwise ' + hypnoCalc / 16 + 's linear infinite';
//Fire Opacity
let firePowerDivide = Math.round(firePower / 2);
let firePowerOpacity = firePowerDivide / 100 + 0.2; //opacity minimum = 20%, maximum 70%
firePowerOpacity = Math.round(firePowerOpacity * 100) / 100;
console.log('Fire Opacity:' + firePowerOpacity);
document.getElementById('fire').style.opacity = firePowerOpacity.toString();
//Create Fire
const fireContainer = document.querySelector('.fire');
const parts = 150; // Number of particles
// Function to create a single particle
function createParticle() {
const particle = document.createElement('div');
particle.className = 'particle particle_' + fireColor;
// Randomized animation delay and left positioning
const animationDelay = Math.random() * 2; // Random delay between 0 and 2 seconds
const leftPosition = Math.random() * 100; // Random left position between 0% and 100%
const topPosition = Math.random() * 100; // Random left position between 0% and 100%
if (leftPosition < 30 && topPosition < 25) {
return;
} //topleft
if (leftPosition < 25 && topPosition < 60) {
return;
}
if (leftPosition < 50 && topPosition < 10) {
return;
}
if (leftPosition < 5 && topPosition > 60) {
return;
} //bottomleft
if (leftPosition < 20 && topPosition > 85) {
return;
}
if (leftPosition > 90 && topPosition > 60) {
return;
} //bottomright
if (leftPosition > 70 && topPosition > 90) {
return;
}
// Apply CSS styles for animation
particle.style.left = `${leftPosition}%`;
particle.style.top = `${topPosition}%`;
particle.style.animationName = 'rise';
particle.style.animationDuration = `${2 + Math.random()}s`; // Random duration between 2 and 3 seconds
particle.style.animationTimingFunction = 'ease-in';
particle.style.animationDelay = `${animationDelay}s`;
particle.style.animationFillMode = 'forwards';
fireContainer.appendChild(particle);
// Remove the particle from the DOM after its animation ends
setTimeout(() => {
fireContainer.removeChild(particle);
}, (2 + animationDelay) * 1000); // Match the longest possible duration
}
// Create initial particles
for (let i = 0; i < parts; i++) {
createParticle();
}
// Continuously create particles to keep the animation going
setInterval(createParticle, 5); // Adjust the interval for more/less frequent particles
//Lava
document.getElementById('lava-container').classList.add('lava-' + lavaBack);
! function() {
"use strict";
var t, i = {
screen: {
elem: null,
callback: null,
ctx: null,
width: 0,
height: 0,
left: 0,
top: 0,
init: function(t, i, s) {
return this.elem = document.getElementById(t), this.callback = i || null, "CANVAS" == this.elem.tagName && (this.ctx = this.elem.getContext("2d")), window.addEventListener("resize", function() {
this.resize()
}.bind(this), !1), this.elem.onselectstart = function() {
return !1
}, this.elem.ondrag = function() {
return !1
}, s && this.resize(), this
},
resize: function() {
var t = this.elem;
for (this.width = t.offsetWidth, this.height = t.offsetHeight, this.left = 0, this.top = 0; null != t; t = t.offsetParent) this.left += t.offsetLeft, this.top += t.offsetTop;
this.ctx && (this.elem.width = this.width, this.elem.height = this.height), this.callback && this.callback()
}
}
},
s = function(t, i) {
this.x = t, this.y = i, this.magnitude = t * t + i * i, this.computed = 0, this.force = 0
};
s.prototype.add = function(t) {
return new s(this.x + t.x, this.y + t.y)
};
var h = function(t) {
var i = .1,
h = 1.5;
this.vel = new s((Math.random() > .5 ? 1 : -1) * (.2 + .25 * Math.random()), (Math.random() > .5 ? 1 : -1) * (.2 + Math.random())), this.pos = new s(.2 * t.width + Math.random() * t.width * .6, .2 * t.height + Math.random() * t.height * .6), this.size = t.wh / 15 + (1.4 * Math.random() + .1) * (t.wh / 15), this.width = t.width, this.height = t.height
};
h.prototype.move = function() {
this.pos.x >= this.width - this.size ? (this.vel.x > 0 && (this.vel.x = -this.vel.x), this.pos.x = this.width - this.size) : this.pos.x <= this.size && (this.vel.x < 0 && (this.vel.x = -this.vel.x), this.pos.x = this.size), this.pos.y >= this.height - this.size ? (this.vel.y > 0 && (this.vel.y = -this.vel.y), this.pos.y = this.height - this.size) : this.pos.y <= this.size && (this.vel.y < 0 && (this.vel.y = -this.vel.y), this.pos.y = this.size), this.pos = this.pos.add(this.vel)
};
var e = function(t, i, e, o, n) {
this.step = 5, this.width = t, this.height = i, this.wh = Math.min(t, i), this.sx = Math.floor(this.width / this.step), this.sy = Math.floor(this.height / this.step), this.paint = !1, this.metaFill = r(t, i, t, o, n), this.plx = [0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0], this.ply = [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1], this.mscases = [0, 3, 0, 3, 1, 3, 0, 3, 2, 2, 0, 2, 1, 1, 0], this.ix = [1, 0, -1, 0, 0, 1, 0, -1, -1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1], this.grid = [], this.balls = [], this.iter = 0, this.sign = 1;
for (var a = 0; a < (this.sx + 2) * (this.sy + 2); a++) this.grid[a] = new s(a % (this.sx + 2) * this.step, Math.floor(a / (this.sx + 2)) * this.step);
for (var l = 0; l < e; l++) this.balls[l] = new h(this)
};
e.prototype.computeForce = function(t, i, s) {
var h, e = s || t + i * (this.sx + 2);
if (0 === t || 0 === i || t === this.sx || i === this.sy) h = .6 * this.sign;
else {
h = 0;
for (var r = this.grid[e], o = 0, n; n = this.balls[o++];) h += n.size * n.size / (-2 * r.x * n.pos.x - 2 * r.y * n.pos.y + n.pos.magnitude + r.magnitude);
h *= this.sign
}
return this.grid[e].force = h, h
}, e.prototype.marchingSquares = function(t) {
var i = t[0],
s = t[1],
h = t[2],
e = i + s * (this.sx + 2);
if (this.grid[e].computed === this.iter) return !1;
for (var r, o = 0, n = 0; n < 4; n++) {
var l = i + this.ix[n + 12] + (s + this.ix[n + 16]) * (this.sx + 2),
d = this.grid[l].force;
(d > 0 && this.sign < 0 || d < 0 && this.sign > 0 || !d) && (d = this.computeForce(i + this.ix[n + 12], s + this.ix[n + 16], l)), Math.abs(d) > 1 && (o += Math.pow(2, n))
}
if (15 === o) return [i, s - 1, !1];
5 === o ? r = 2 === h ? 3 : 1 : 10 === o ? r = 3 === h ? 0 : 2 : (r = this.mscases[o], this.grid[e].computed = this.iter);
var p = this.step / (Math.abs(Math.abs(this.grid[i + this.plx[4 * r + 2] + (s + this.ply[4 * r + 2]) * (this.sx + 2)].force) - 1) / Math.abs(Math.abs(this.grid[i + this.plx[4 * r + 3] + (s + this.ply[4 * r + 3]) * (this.sx + 2)].force) - 1) + 1);
return a.lineTo(this.grid[i + this.plx[4 * r] + (s + this.ply[4 * r]) * (this.sx + 2)].x + this.ix[r] * p, this.grid[i + this.plx[4 * r + 1] + (s + this.ply[4 * r + 1]) * (this.sx + 2)].y + this.ix[r + 4] * p), this.paint = !0, [i + this.ix[r + 4], s + this.ix[r + 8], r]
}, e.prototype.renderMetaballs = function() {
for (var t = 0, i; i = this.balls[t++];) i.move();
for (this.iter++, this.sign = -this.sign, this.paint = !1, a.fillStyle = this.metaFill, a.beginPath(), t = 0; i = this.balls[t++];) {
var s = [Math.round(i.pos.x / this.step), Math.round(i.pos.y / this.step), !1];
do {
s = this.marchingSquares(s)
} while (s);
this.paint && (a.fill(), a.closePath(), a.beginPath(), this.paint = !1)
}
};
var r = function(t, i, s, h, e) {
var r = a.createRadialGradient(t / 1, i / 1, 0, t / 1, i / 1, s);
return r.addColorStop(0, h), r.addColorStop(1, e), r
},
o = function() {
requestAnimationFrame(o), a.clearRect(0, 0, n.width, n.height), t.renderMetaballs()
},
n = i.screen.init("liquid", null, !0),
a = n.ctx;
n.resize(), t = new e(n.width, n.height, 6, lavaFront, lavaFront), o()
}();
//Overlays
function adjustOverlay(id, originalWidth, originalHeight, originalLeft, originalBottom, visiblePercentage = 100, isOverlay = false) {
const background = document.getElementById('background-image');
const overlay = document.getElementById(`${id}-image`);
const overlayContainer = document.getElementById(`${id}-container`);
const scale = background.clientWidth / 1024;
const overlayWidth = originalWidth * scale;
const overlayHeight = originalHeight * scale;
const overlayLeft = originalLeft * scale;
const overlayTop = (isOverlay ? (originalBottom * scale) : undefined);
const overlayBottom = (!isOverlay ? (originalBottom * scale) : undefined);
// Set style including z-index
overlay.style.width = `${overlayWidth}px`;
overlay.style.height = `${overlayHeight}px`;
overlayContainer.style.width = isOverlay ? `${overlayWidth}px` : `${overlayWidth * (visiblePercentage / 100)}px`;
overlayContainer.style.height = isOverlay ? `${overlayHeight * ((100 - visiblePercentage) / 100)}px` : `${overlayHeight}px`;
overlayContainer.style.left = `${overlayLeft}px`;
if (overlayTop !== undefined) overlayContainer.style.top = `${overlayTop}px`;
if (overlayBottom !== undefined) overlayContainer.style.bottom = `${overlayBottom}px`;
// Ensure z-index is explicitly set to keep the elements on top of the canvas
overlayContainer.style.zIndex = 3;
}
function adjustAll() {
adjustOverlay('mania', 543, 153, 235, 842); //logo
adjustOverlay('season2', 290, 74, 367, 762); //logo
adjustOverlay('loading', 794, 90, 107, 53, loading); //mining power
adjustOverlay('color', 227, 279, 691, 561); //color boost
adjustOverlay('color-overlay', 227, 279, 691, 183, colorPower, true); //color boost
}
window.addEventListener('resize', () => {
adjustAll();
});
window.addEventListener('load', () => {
adjustAll();
});
// Initialize target percentages and animation direction
var colorAnimate = colorPower - 1;
var colorTarget = colorAnimate;
var colorAnimationDirection = 1;
function animateOverlay() {
// Calculate new percentages
colorAnimate += 0.2 * colorAnimationDirection;
// Animate
if (colorAnimate >= colorTarget + 10 || colorAnimate <= colorTarget - 10) colorAnimationDirection *= -1;
// Apply the new percentage to the overlay
adjustOverlay('color-overlay', 227, 279, 690, 184, colorAnimate, true);
// Continue the animation loop
requestAnimationFrame(animateOverlay);
}
animateOverlay();
//Animate background
window.onload = () => {
const CANVAS = document.getElementsByTagName("canvas")[0];
const CTX = CANVAS.getContext("2d");
const CHARS = [];
const MAX_CHARS = 100;
const SEPARATION = 2;
let camera;
// Change starts here
const backgroundContainer = document.getElementById('miner-container');
class Vector {
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
rotate(dir, ang) {
const X = this.x;
const Y = this.y;
const Z = this.z;
const SIN = Math.sin(ang);
const COS = Math.cos(ang);
if (dir === "x") {
this.y = Y * COS - Z * SIN;
this.z = Y * SIN + Z * COS;
} else if (dir === "y") {
this.x = X * COS - Z * SIN;
this.z = X * SIN + Z * COS;
}
}
project() {
const ZP = this.z + camera.z;
const DIV = ZP / wh;
const XP = (this.x + camera.x) / DIV;
const YP = (this.y + camera.y) / DIV;
const CENTER = getCenter();
return [XP + CENTER[0], YP + CENTER[1], ZP];
}
}
class Char {
constructor(letter, pos) {
this.letter = letter;
this.pos = pos;
}
rotate(dir, ang) {
this.pos.rotate(dir, ang);
}
render() {
const PIXEL = this.pos.project();
const XP = PIXEL[0];
const YP = PIXEL[1];
const MAX_SIZE = 40;
const SIZE = (1 / PIXEL[2] * MAX_SIZE) | 0;
const BRIGHTNESS = SIZE / MAX_SIZE;
const COL = `rgba(255, 255, ${100 * BRIGHTNESS | 0 + 150}, ${0.8 * BRIGHTNESS})`;
CTX.beginPath();
CTX.fillStyle = COL;
CTX.font = SIZE + "px monospace";
CTX.fillText(this.letter, XP, YP);
CTX.fill();
CTX.closePath();
}
}
function getCenter() {
return [ww / 2, wh / 2];
}
function signedRandom() {
return Math.random() - Math.random();
}
function render() {
for (let i = 0; i < CHARS.length; i++) {
CHARS[i].render();
}
}
let time = 0;
function update() {
CTX.clearRect(0, 0, ww, wh);
for (let i = 0; i < CHARS.length; i++) {
const DX = 0.0035 * Math.sin(time * 0.001);
const DY = 0.0035 * Math.cos(time * 0.001);
CHARS[i].rotate("x", DX);
CHARS[i].rotate("y", DY);
}
++time;
}
function loop() {
window.requestAnimationFrame(loop);
update();
render();
}
function createChars() {
for (let i = 0; i < MAX_CHARS; i++) {
const CHARACTER = runes[Math.floor(Math.random() * runes.length)];
const X = signedRandom() * SEPARATION;
const Y = signedRandom() * SEPARATION;
const Z = signedRandom() * SEPARATION;
const POS = new Vector(X, Y, Z);
const CHAR = new Char(CHARACTER, POS);
CHARS.push(CHAR);
}
}
function setDim() {
const rect = backgroundContainer.getBoundingClientRect();
ww = rect.width;
wh = rect.height;
CANVAS.width = ww * window.devicePixelRatio | 0;
CANVAS.height = wh * window.devicePixelRatio | 0;
CTX.scale(window.devicePixelRatio, window.devicePixelRatio);
}
window.onresize = () => {
setDim();
};
function initCamera() {
camera = new Vector(0, 0, SEPARATION + 1);
}
window.onresize = setDim;
(() => {
setDim();
initCamera();
createChars();
loop();
})();
};
document.getElementById('info-button').addEventListener('click', function() {
var infoOverlay = document.getElementById('info-overlay');
var buttonText = document.getElementById('button-text');
if (infoOverlay.style.display === 'none' || infoOverlay.style.display === '') {
infoOverlay.style.display = 'block';
buttonText.textContent = 'x'; // Change button text to 'x'
} else {
infoOverlay.style.display = 'none';
buttonText.textContent = 'i'; // Change button text back to 'i'
}
});
function ucfirst(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//Audio
const playerButton = document.querySelector('#play');
playerButton.addEventListener('click', toggleAudio);
const audio = document.querySelector('audio');
const playIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='#ffffff'><path fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z' clip-rule='evenodd' /></svg>";
const pauseIcon = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='#ffffff'><path fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z' clip-rule='evenodd' /></svg>";
function toggleAudio() {
if (audio.paused) {
audio.play();
playerButton.innerHTML = pauseIcon;
} else {
audio.pause();
playerButton.innerHTML = playIcon;
}
}
function audioEnded() {
playerButton.innerHTML = playIcon;
}
audio.onended = audioEnded;
</script>
</body>
</html>Inscription
67,921,251
- ID
afbbc...a33i0
- Owned By
- File Type
HTMLtext/html;charset=utf-8
- File Size
40.366 KB
- Created
April 8, 2024, 10:31 AM UTC
1 year ago
- Creation Block
- Creation Transaction
- Creation Fee
92,871sats
- Tags
No tags yet
Sat
- Sat Number
- Sat Name
bzmmwcqfogo
- Sat Creation Block
- Sat Creation Year
2017
- Inscriptions
- 1. 67,921,251
- Cursed Inscriptions
No cursed inscriptions yet
- SATRIBUTES
No Satributes