Doginals Recursive Builder

<strong>WELCOME TO THE MATRICES RUNIC CIPHERS</strong>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive 3D Rune Cube with Utilities</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #E64A19; /* Orange background */
            color: #fff;
            font-family: 'Permanent Marker', cursive;
            position: relative;
        }

.scene {
            perspective: 600px;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.cube {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-45deg);
            animation: cube-rotate 20s linear infinite;
        }

.cube__face {
            position: absolute;
            width: 200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            font-weight: bold;
            border: 1px solid rgba(255, 255, 255, 0.8);
            background-color: rgba(255, 255, 255, 0.5);
            color: #E64A19; /* Orange text */
            text-shadow: 0 0 8px #E64A19, 0 0 10px #E64A19, 0 0 20px #E64A19;
        }

.cube__face--front-side { transform: rotateY(0deg) translateZ(100px); }
        .cube__face--back-side  { transform: rotateY(180deg) translateZ(100px); }
        .cube__face--left-side  { transform: rotateY(-90deg) translateZ(100px); }
        .cube__face--right-side { transform: rotateY(90deg) translateZ(100px); }
        .cube__face--top-side   { transform: rotateX(90deg) translateZ(100px); }
        .cube__face--bottom-side{ transform: rotateX(-90deg) translateZ(100px); }

@keyframes cube-rotate {
            from { transform: rotateX(0) rotateY(0) rotateZ(0); }
            to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
        }

.input-field {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
            color: #E64A19; /* Orange text */
            background-color: rgba(255, 255, 255, 0.5);
            padding: 10px;
            border-radius: 10px;
            box-shadow: 8px 8px 16px #d85d35, -8px -8px 16px #ff8e55;
        }

#translationResult {
            position: absolute;
            top: 80px;
            left: 10px;
            z-index: 10;
            color: #E64A19; /* Orange text */
        }

button {
            margin-left: 5px;
            background: #E64A19; /* Orange */
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 5px 10px;
            box-shadow: 4px 4px 8px #d85d35, -4px -4px 8px #ff8e55;
        }
    </style>
</head>
<body>

<div class="input-field">
    <input type="text" id="textInput" placeholder="Enter English or Runes...">
    <button onclick="translateToRunes()">To Runes</button>
    <button onclick="translateToEnglish()">To English</button>
    <button onclick="encode()">Encode Base64</button>
    <button onclick="hash()">SHA-256 Hash</button>
    <button onclick="randomizeString()">Randomize String</button>
</div>
<div id="translationResult"></div>

const runeToEnglish = {
    'ᚨ': 'A', 'ᛒ': 'B', 'ᚲ': 'C', 'ᛞ': 'D', 'ᛖ': 'E', 
    'ᚠ': 'F', 'ᚷ': 'G', 'ᚺ': 'H', 'ᛁ': 'I', 'ᛃ': 'J', 
    'ᚲ': 'K', 'ᛚ': 'L', 'ᛗ': 'M', 'ᚾ': 'N', 'ᛟ': 'O', 
    'ᛈ': 'P', 'ᛩ': 'Q', 'ᚱ': 'R', 'ᛊ': 'S', 'ᛏ': 'T', 
    'ᚢ': 'U', 'ᚹ': 'V', 'ᚹ': 'W', 'ᛉ': 'X', 'ᛃ': 'Y', 
    'ᛉ': 'Z', 'ᚦ': 'TH', ' ': ' ', 'ᛇ': 'AE', 'ᛟ': 'OE'
};

// When the DOM is fully loaded, apply the interactions to the cube
document.addEventListener('DOMContentLoaded', () => {
    const cube = document.getElementById('cube');
    cube.addEventListener('click', function() {
        const randomY = Math.floor(Math.random() * 360);
        const randomX = Math.floor(Math.random() * 360);
        const randomZ = Math.floor(Math.random() * 360);
        cube.style.transition = 'transform 0.6s';
        cube.style.transform = `rotateY(${randomY}deg) rotateX(${randomX}deg) rotateZ(${randomZ}deg)`;
    });
});

// Translation from English to Runes
function translateToRunes() {
    const input = document.getElementById('textInput').value.toUpperCase();
    const specialCases = ['TH', 'AE', 'OE']; // Handle special cases
    let runes = '';
    for (let i = 0; i < input.length; i++) {
        const doubleChar = input.substring(i, i + 2);
        if (specialCases.includes(doubleChar)) {
            runes += englishToRune[doubleChar] || '';
            i++; // Skip the next character as it's a part of the double character
        } else {
            runes += englishToRune[input[i]] || input[i]; // Translate or keep the character as-is
        }
    }
    document.getElementById('translationResult').textContent = runes; // Display the runes
}

// Translation from Runes to English
function translateToEnglish() {
    const input = document.getElementById('textInput').value;
    let english = '';
    for (let i = 0; i < input.length; i++) {
        const rune = input[i];
        english += runeToEnglish[rune] || rune; // Translate or keep the character as-is
    }
    document.getElementById('translationResult').textContent = english; // Display the English translation
}

// Encode a string to Base64
function encodeToBase64(inputStr) {
    return window.btoa(inputStr);
}

// Hash a string with SHA-256
async function hashWithSHA256(inputStr) {
    const encoder = new TextEncoder();
    const data = encoder.encode(inputStr);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
    return hashHex;
}

// Button action to encode a string to Base64 and display the result
function encode() {
    const inputStr = document.getElementById('textInput').value;
    const result = encodeToBase64(inputStr);
    document.getElementById('translationResult').textContent = result;
}

// Button action to hash a string with SHA-256 and display the result
async function hash() {
    const inputStr = document.getElementById('textInput').value;
    const result = await hashWithSHA256(inputStr);
    document.getElementById('translationResult').textContent = result;
}

// Generate and display a random string in the input field
function randomizeString() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let randomStr = '';
    for (let i = 0; i < 16; i++) {
        randomStr += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById('textInput').value = randomStr;
}
</script>

</body>
</html>

GUIDES

3D Recursive HTML:

1. Create a 3D object (glb format) using any program, for example Blender
2. Inscribe glb file in Doge blockchain
3. Use it to create a recursion by simply pasting inscription ID into the model-viewer section.
4. Save the HTML file
5. Inscribe HTML file in Doge blockchain

IMAGE Recursive HTML:

1. Create images (jpg, webp, png format) using any program
2. Inscribe in Doge blockchain
3. Use it to create a recursion by simply pasting inscription ID into the img section.
4. Save the HTML file
5. Inscribe HTML file in Doge blockchain

HTML:

1. Write any code without using third-party scripts, as in the example
2. Save the HTML file
3. Inscribe HTML file in Doge blockchain

Disclaimer! Don't use the example as a finished recursive product! You need to create an object yourself (be it 3D, image or HTML code), inscribe it to Dogecoin blockchain, create a recursion (using the example in the builder) and inscribe it to the blockchain as an HTML file.