<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LMNx9 Encoder/Decoder</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.11/pako.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    <style>
        body {
            background-color: black;
            color: red;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container {
            padding: 7px;
        }
        .circle-img {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            margin: 0px;
            display: block;
            border: 2px black;
        }
        h1, h2 {
            text-align: center;
            background-color: black;
            animation: colorChangedev 15s infinite;
            font-family: 'Courier New', Courier, monospace;
            font-size: 20px;
        }
        h3 {
            text-align: center;
            background-color: black;
            animation: colorChangedev 2s infinite;
            font-family: 'Courier New', Courier, monospace;
            font-size: 15px;
        }
        LX {
            color: red;
            margin: 10px 0;
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
        }
        textarea {
            width: 100%;
            margin-bottom: 10px;
            font-size: 16px;
            color: cyan;
            background-color: black;
            border: 2px solid #ff0000;
            border-radius: 5px;
            border-color: red;
            padding: 10px;
        }
        .input-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 100%;
            margin-bottom: 0px;
        }
        .input-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 0px;
        }
        .input-actions button {
            padding: 1px 50px;
            font-size: 14px;
            color: cyan;
            background-color: black;
            border: 1.5px solid #ff0000;
            border-radius: 5px;
            border-color: red;
            cursor: pointer;
            width: 32%;
        }
        .input-actions button:hover {
            background-color: cyan;
            border-color: red;
            color: red;
        }
        .ENC-DEC-BOX {
            display: flex;
            justify-content: space-between;
            margin-top: 0px;
        }
        .ENC-DEC-BOX button {
            padding: 4.5px 76.5px;
            font-size: 15px;
            color: lime;
            background-color: black;
            border: 1.5px solid #ff0000;
            border-radius: 5px;
            cursor: pointer;
            width: 49%;
        }
        .ENC-DEC-BOX button:hover {
            background-color: lime;
            color: red;
        }
        .result-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 1px;
        }
        .result-actions button {
            padding: 1px 83px;
            font-size: 15px;
            color: yellow;
            background-color: black;
            border: 1.5px solid #ff0000;
            border-radius: 5px;
            cursor: pointer;
            width: 49%;
        }
        .result-actions button:hover {
            background-color: yellow;
            color: red;
        }
        .output-box {
            background-color: black;
            color: yellow;
            padding: 10px;
            border: 2px solid #ff0000;
            border-radius: 5px;
            overflow-y: auto;
            white-space: pre-wrap;
            width: 94%;
            max-width: 500px;
            margin-bottom: 0px;
        }
        button {
            padding: 5px 10px;
            font-size: 15px;
            color: #fff;
            background-color: black;
            border: 1.5px solid #ff0000;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 5px;
            width: 100%;
        }
        button:hover {
            background-color: #ff0000;
        }
        .horizontal-line {
            height: 1px;
            width: 100vw;
            margin: 40px;
            background-color: black;
            animation: colorChange 1.3s infinite;
        }
        span {
            transition: color 0.9s ease-in-out;
        }
@media (max-width: 600px) {
            .input-container {
                width: 100%;
            }
            button {
                width: 100%;
            }
        }
@keyframes colorChange {
            5% {
                background-color: black;
            }
            25% {
                background-color: red;
            }
            45% {
                background-color: orange;
            }
            65% {
                background-color: lime;
            }
            85% {
                background-color: cyan;
            }
            100% {
                background-color: black;
            }
        }
@keyframes colorChangedev {
            5% {
                color: orange;
            }
            15% {
                color: lime;
            }
            25% {
                color: yellow;
            }
            35% {
                color: red;
            }
            45% {
                color: cyan;
            }
            55% {
                color: purple;
            }
            65% {
                color: blue;
            }
            75% {
                color: white;
            }
            85% {
                color: violet;
            }
            95% {
                color: teal;
            }
        }

    </style>
</head>

<body>


    <div class="container">
        <img src="file:///android_asset/LMNx9/lmnx9.dex.v1/data/lmnx9.png" alt="lmnx9" class="circle-img">
    </div>

    <LX id="animatedText">
        <span>L</span><span>M</span><span>N</span><span>x</span><span>9</span> <span>D</span><span>E</span><span>X</span> <span>v</span><span>1</span><span>.</span><span>0</span>
    </LX>
    <div class="horizontal-line"></div>



    <h2>Zlib Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="zlibInput" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('zlibInput')">CLEAR</button>
            <button onclick="copyInput('zlibInput')">COPY</button>
            <button onclick="pasteInput('zlibInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeZlib()">ENCODE</button>
        <button onclick="decodeZlib()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('zlibOutput')">CLEAR</button>
        <button onclick="copyOutput('zlibOutput')">COPY</button>
    </div>
    <br>
    <div id="zlibOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>Base32 Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="base32Input" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('base32Input')">CLEAR</button>
            <button onclick="copyInput('base32Input')">COPY</button>
            <button onclick="pasteInput('base32Input')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeBase32()">ENCODE</button>
        <button onclick="decodeBase32()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('base32Output')">CLEAR</button>
        <button onclick="copyOutput('base32Output')">COPY</button>
    </div>
    <br>
    <div id="base32Output" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>Base64 Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="base64Input" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('base64Input')">CLEAR</button>
            <button onclick="copyInput('base64Input')">COPY</button>
            <button onclick="pasteInput('base64Input')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeBase64()">ENCODE</button>
        <button onclick="decodeBase64()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('base64Output')">CLEAR</button>
        <button onclick="copyOutput('base64Output')">COPY</button>
    </div>
    <br>
    <div id="base64Output" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>ROT13 Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="rot13Input" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('rot13Input')">CLEAR</button>
            <button onclick="copyInput('rot13Input')">COPY</button>
            <button onclick="pasteInput('rot13Input')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeROT13()">ENCODE</button>
        <button onclick="decodeROT13()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('rot13Output')">CLEAR</button>
        <button onclick="copyOutput('rot13Output')">COPY</button>
    </div>
    <br>
    <div id="rot13Output" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>AES Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="aesInput" rows="4" placeholder=""></textarea>
        <textarea id="aesKey" rows="1" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('aesInput')">CLEAR</button>
            <button onclick="copyInput('aesInput')">COPY</button>
            <button onclick="pasteInput('aesInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="aesEncrypt()">ENCODE</button>
        <button onclick="aesDecrypt()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('aesOutput')">CLEAR</button>
        <button onclick="copyOutput('aesOutput')">COPY</button>
    </div>
    <br>
    <div id="aesOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>XOR Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="xorInput" rows="4" placeholder=""></textarea>
        <textarea id="xorKey" rows="1" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('xorInput')">CLEAR</button>
            <button onclick="copyInput('xorInput')">COPY</button>
            <button onclick="pasteInput('xorInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="xorEncrypt()">ENCODE</button>
        <button onclick="xorDecrypt()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('xorOutput')">CLEAR</button>
        <button onclick="copyOutput('xorOutput')">COPY</button>
    </div>
    <br>
    <div id="xorOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>URL Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="urlInput" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('urlInput')">CLEAR</button>
            <button onclick="copyInput('urlInput')">COPY</button>
            <button onclick="pasteInput('urlInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeURL()">ENCODE</button>
        <button onclick="decodeURL()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('urlOutput')">CLEAR</button>
        <button onclick="copyOutput('urlOutput')">COPY</button>
    </div>
    <br>
    <div id="urlOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>JSON Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="jsonInput" rows="4" placeholder=''></textarea>
        <div class="input-actions">
            <button onclick="clearInput('jsonInput')">CLEAR</button>
            <button onclick="copyInput('jsonInput')">COPY</button>
            <button onclick="pasteInput('jsonInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeJSON()">ENCODE</button>
        <button onclick="decodeJSON()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('jsonOutput')">CLEAR</button>
        <button onclick="copyOutput('jsonOutput')">COPY</button>
    </div>
    <br>
    <div id="jsonOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>PHP Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="phpInput" rows="4" placeholder=''></textarea>
        <div class="input-actions">
            <button onclick="clearInput('phpInput')">CLEAR</button>
            <button onclick="copyInput('phpInput')">COPY</button>
            <button onclick="pasteInput('phpInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodePHP()">ENCODE</button>
        <button onclick="decodePHP()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('phpOutput')">CLEAR</button>
        <button onclick="copyOutput('phpOutput')">COPY</button>
    </div>
    <br>
    <div id="phpOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>HTML Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="htmlInput" rows="4" placeholder=''></textarea>
        <div class="input-actions">
            <button onclick="clearInput('htmlInput')">CLEAR</button>
            <button onclick="copyInput('htmlInput')">COPY</button>
            <button onclick="pasteInput('htmlInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeHTML()">ENCODE</button>
        <button onclick="decodeHTML()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('htmlOutput')">CLEAR</button>
        <button onclick="copyOutput('htmlOutput')">COPY</button>
    </div>
    <br>
    <div id="htmlOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>HEX Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="hexInput" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('hexInput')">CLEAR</button>
            <button onclick="copyInput('hexInput')">COPY</button>
            <button onclick="pasteInput('hexInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeHex()">ENCODE</button>
        <button onclick="decodeHex()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('hexOutput')">CLEAR</button>
        <button onclick="copyOutput('hexOutput')">COPY</button>
    </div>
    <br>
    <div id="hexOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>ASCII Encoder/Decoder</h2>
    <div class="input-container">
        <textarea id="asciiInput" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('asciiInput')">CLEAR</button>
            <button onclick="copyInput('asciiInput')">COPY</button>
            <button onclick="pasteInput('asciiInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="encodeASCII()">ENCODE</button>
        <button onclick="decodeASCII()">DECODE</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('asciiOutput')">CLEAR</button>
        <button onclick="copyOutput('asciiOutput')">COPY</button>
    </div>
    <br>
    <div id="asciiOutput" class="output-box"></div>
    <div class="horizontal-line"></div>



    <h2>Hashlib SHA-256/MD5</h2>
    <div class="input-container">
        <textarea id="hashInput" rows="4" placeholder=""></textarea>
        <div class="input-actions">
            <button onclick="clearInput('hashInput')">CLEAR</button>
            <button onclick="copyInput('hashInput')">COPY</button>
            <button onclick="pasteInput('hashInput')">PASTE</button>
        </div>
    </div>
    <div class="ENC-DEC-BOX">
        <button onclick="hashSHA256()">ExSHA256</button>
        <button onclick="hashMD5()">DxMD5</button>
    </div>
    <div class="result-actions">
        <button onclick="clearOutput('hashOutput')">CLEAR</button>
        <button onclick="copyOutput('hashOutput')">COPY</button>
    </div>
    <br>
    <div id="hashOutput" class="output-box"></div>
    <div class="horizontal-line"></div>


    <h3>Developer © Limon Hossain</h3>


    <script>


        function clearInput(id) {
            document.getElementById(id).value = "";
        }

        function copyInput(id) {
            var inputText = document.getElementById(id);
            inputText.select();
            document.execCommand('copy');
        }

        function pasteInput(id) {
            navigator.clipboard.readText().then(function(text) {
                document.getElementById(id).value = text;
            }).catch(function(error) {});
        }

        function clearOutput(id) {
            document.getElementById(id).textContent = '';
        }

        function copyOutput(id) {
            const output = document.getElementById(id).textContent;
            navigator.clipboard.writeText(output);
        }



        function encodeZlib() {
            const input = document.getElementById("zlibInput").value;
            const compressed = pako.deflate(input, {
                to: 'string'
            });
            document.getElementById("zlibOutput").textContent = btoa(compressed);
        }
        function decodeZlib() {
            const input = atob(document.getElementById("zlibInput").value);
            const decompressed = pako.inflate(input, {
                to: 'string'
            });
            document.getElementById("zlibOutput").textContent = decompressed;
        }



        const base32 = {
            encode: (data) => {
                const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
                let bits = "",
                result = "";
                for (let i = 0; i < data.length; i++) {
                    bits += data.charCodeAt(i).toString(2).padStart(8, "0");
                }
                for (let i = 0; i < bits.length; i += 5) {
                    const chunk = bits.substr(i, 5).padEnd(5, "0");
                    result += alphabet[parseInt(chunk, 2)];
                }
                return result.padEnd(Math.ceil(result.length / 8) * 8, "=");
            },
            decode: (data) => {
                const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
                let bits = "",
                result = "";
                data = data.replace(/=/g, "");
                for (let i = 0; i < data.length; i++) {
                    bits += alphabet.indexOf(data[i]).toString(2).padStart(5, "0");
                }
                for (let i = 0; i < bits.length; i += 8) {
                    const chunk = bits.substr(i, 8);
                    if (chunk.length === 8) {
                        result += String.fromCharCode(parseInt(chunk, 2));
                    }
                }
                return result;
            }
        };
        function encodeBase32() {
            const input = document.getElementById("base32Input").value;
            const encoded = base32.encode(input);
            document.getElementById("base32Output").textContent = encoded;
        }
        function decodeBase32() {
            const input = document.getElementById("base32Input").value;
            try {
                const decoded = base32.decode(input);
                document.getElementById("base32Output").textContent = decoded;
            } catch (error) {
                document.getElementById("base32Output").textContent = "Error: Invalid Base32 input.";
            }
        }



        function encodeBase64() {
            const input = document.getElementById("base64Input").value;
            const encoded = btoa(input);
            document.getElementById("base64Output").textContent = encoded;
        }
        function decodeBase64() {
            const input = document.getElementById("base64Input").value;
            const decoded = atob(input);
            document.getElementById("base64Output").textContent = decoded;
        }



        function encodeROT13() {
            const input = document.getElementById("rot13Input").value;
            const encoded = input.replace(/[a-zA-Z]/g, function(c) {
                return String.fromCharCode(((c.charCodeAt(0) - (c < 'a' ? 65: 97) + 13) % 26) + (c < 'a' ? 65: 97));
            });
            document.getElementById("rot13Output").textContent = encoded;
        }
        function decodeROT13() {
            encodeROT13();
        }



        function xorEncrypt() {
            const input = document.getElementById("xorInput").value;
            const key = document.getElementById("xorKey").value;
            if (!key) {
                document.getElementById("xorOutput").textContent = "Error: XOR key is required.";
                return;
            }
            const encrypted = Array.from(input)
            .map((char, i) => String.fromCharCode(char.charCodeAt(0) ^ key.charCodeAt(i % key.length)))
            .join('');
            document.getElementById("xorOutput").textContent = btoa(encrypted);
        }
        function xorDecrypt() {
            const input = document.getElementById("xorInput").value;
            const key = document.getElementById("xorKey").value;
            if (!key) {
                document.getElementById("xorOutput").textContent = "Error: XOR key is required.";
                return;
            }
            try {
                const decoded = atob(input);
                const decrypted = Array.from(decoded)
                .map((char, i) => String.fromCharCode(char.charCodeAt(0) ^ key.charCodeAt(i % key.length)))
                .join('');
                document.getElementById("xorOutput").textContent = decrypted;
            } catch (error) {
                document.getElementById("xorOutput").textContent = "Error: Invalid XOR input or key.";
            }
        }



        function aesEncrypt() {
            const input = document.getElementById("aesInput").value;
            const key = document.getElementById("aesKey").value;
            const encrypted = CryptoJS.AES.encrypt(input, key).toString();
            document.getElementById("aesOutput").textContent = encrypted;
        }
        function aesDecrypt() {
            const input = document.getElementById("aesInput").value;
            const key = document.getElementById("aesKey").value;
            const decrypted = CryptoJS.AES.decrypt(input, key).toString(CryptoJS.enc.Utf8);
            document.getElementById("aesOutput").textContent = decrypted;
        }



        function encodeURL() {
            const input = document.getElementById("urlInput").value;
            document.getElementById("urlOutput").textContent = encodeURIComponent(input);
        }
        function decodeURL() {
            const input = document.getElementById("urlInput").value;
            try {
                document.getElementById("urlOutput").textContent = decodeURIComponent(input);
            } catch (error) {
                document.getElementById("urlOutput").textContent = "Error: Invalid URL input.";
            }
        }



        function encodeJSON() {
            const input = document.getElementById("jsonInput").value;
            try {
                const parsed = JSON.parse(input);
                const encoded = JSON.stringify(parsed, null, 2);
                document.getElementById("jsonOutput").textContent = encoded;
            } catch (error) {
                document.getElementById("jsonOutput").textContent = "Error: Invalid JSON input.";
            }
        }
        function decodeJSON() {
            const input = document.getElementById("jsonInput").value;
            try {
                const decoded = JSON.stringify(JSON.parse(input));
                document.getElementById("jsonOutput").textContent = decoded;
            } catch (error) {
                document.getElementById("jsonOutput").textContent = "Error: Invalid JSON input.";
            }
        }



        function encodePHP() {
            const input = document.getElementById('phpInput').value;
            const output = btoa(input);
            document.getElementById('phpOutput').innerText = output;
        }
        function decodePHP() {
            const input = document.getElementById('phpInput').value;
            try {
                const output = atob(input);
                document.getElementById('phpOutput').innerText = output;
            } catch (error) {
                document.getElementById('phpOutput').innerText = 'Error: ' + error.message;
            }
        }



        function encodeHTML() {
            const input = document.getElementById('htmlInput').value;
            const obfuscated = input.split('').map(char => `&#${char.charCodeAt(0)};`).join('');
            document.getElementById('htmlOutput').innerText = obfuscated;
        }
        function decodeHTML() {
            const input = document.getElementById('htmlInput').value;
            const deobfuscated = input.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec));
            document.getElementById('htmlOutput').innerText = deobfuscated;
        }



        function hashSHA256() {
            const input = document.getElementById('hashInput').value;
            const hash = CryptoJS.SHA256(input).toString();
            document.getElementById('hashOutput').innerText = hash;
        }
        function hashMD5() {
            const input = document.getElementById('hashInput').value;
            const hash = CryptoJS.MD5(input).toString();
            document.getElementById('hashOutput').innerText = hash;
        }



        function encodeHex() {
            const input = document.getElementById('hexInput').value;
            let hex = '';
            for (let i = 0; i < input.length; i++) {
                hex += input.charCodeAt(i).toString(16);
            }
            document.getElementById('hexOutput').textContent = hex;
        }
        function decodeHex() {
            const input = document.getElementById('hexInput').value;
            let str = '';
            for (let i = 0; i < input.length; i += 2) {
                str += String.fromCharCode(parseInt(input.substr(i, 2), 16));
            }
            document.getElementById('hexOutput').textContent = str;
        }



        function encodeASCII() {
            const input = document.getElementById('asciiInput').value;
            let ascii = '';
            for (let i = 0; i < input.length; i++) {
                ascii += input.charCodeAt(i) + ' ';
            }
            document.getElementById('asciiOutput').textContent = ascii.trim();
        }
        function decodeASCII() {
            const input = document.getElementById('asciiInput').value;
            const asciiArray = input.split(' ');
            let str = '';
            for (let i = 0; i < asciiArray.length; i++) {
                str += String.fromCharCode(parseInt(asciiArray[i]));
            }
            document.getElementById('asciiOutput').textContent = str;
        }



        document.addEventListener("DOMContentLoaded", () => {
            const colors = ["black", "white", "red", "blue", "green", "orange", "purple", "cyan", "pink", "yellow"];
            const textSpans = document.querySelectorAll("#animatedText span");
            function changeColors() {
                textSpans.forEach((span, index) => {
                    setTimeout(() => {
                        span.style.color = colors[Math.floor(Math.random() * colors.length)];
                    }, index * 500);
                });
            }
            setInterval(changeColors, 1000);
        });
        

    </script>

</body>
</html>