tools/.hta_slug/xml-to-json.php

<div class="xmljson-container">
    <div class="xmljson-box">
        <h2 class="xmljson-title">XML to JSON Converter</h2>
        <textarea cols="45" rows="8" class="xmljson-input" placeholder="Paste XML here..."></textarea>
        <div class="xmljson-button-group">
            <button class="xmljson-convert-btn">Convert</button>
            <button class="xmljson-copy-btn">Copy JSON</button>
        </div>

        <h3 class="xmljson-output-title">JSON Output:</h3>
        <pre class="xmljson-output"></pre>
    </div>
</div>

<script>
    function xmlToJson(xml) {
        let obj = {};
        if (xml.nodeType === 1) { // Element
            if (xml.attributes.length > 0) {
                obj["@attributes"] = {};
                for (let j = 0; j < xml.attributes.length; j++) {
                    let attribute = xml.attributes.item(j);
                    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                }
            }
        } else if (xml.nodeType === 3) { // Text
            return xml.nodeValue.trim();
        }

        if (xml.hasChildNodes()) {
            for (let i = 0; i < xml.childNodes.length; i++) {
                let item = xml.childNodes.item(i);
                let nodeName = item.nodeName;
                let jsonNode = xmlToJson(item);

                if (jsonNode !== "") {
                    if (typeof obj[nodeName] === "undefined") {
                        obj[nodeName] = jsonNode;
                    } else {
                        if (!Array.isArray(obj[nodeName])) {
                            obj[nodeName] = [obj[nodeName]];
                        }
                        obj[nodeName].push(jsonNode);
                    }
                }
            }
        }
        return obj;
    }

    document.addEventListener("DOMContentLoaded", () => {
        document.querySelector(".xmljson-convert-btn").addEventListener("click", () => {
            try {
                const xmlText = document.querySelector(".xmljson-input").value;
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xmlText, "text/xml");

                if (xmlDoc.getElementsByTagName("parsererror").length) {
                    throw new Error("Invalid XML format!");
                }

                let jsonData = xmlToJson(xmlDoc.documentElement);
                document.querySelector(".xmljson-output").textContent = JSON.stringify(jsonData, null, 2);
            } catch (error) {
                document.querySelector(".xmljson-output").textContent = "Error: " + error.message;
            }
        });

        document.querySelector(".xmljson-copy-btn").addEventListener("click", () => {
            const jsonOutput = document.querySelector(".xmljson-output").textContent;
            navigator.clipboard.writeText(jsonOutput).then(() => {
                document.querySelector(".xmljson-copy-btn").textContent = "Copied!";
                setTimeout(() => document.querySelector(".xmljson-copy-btn").textContent = "Copy JSON", 2000);
            });
        });
    });
</script>

<style>
    .xmljson-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 100px 0;
    }

    .xmljson-box {
        background: #2c2c2c;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        max-width: 450px;
        width: 100%;
        text-align: center;
    }

    .xmljson-title {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #ffffff;
    }

    .xmljson-input {
        background: #3c3c3c;
        color: #ffffff;
        border: 1px solid #555;
        border-radius: 5px;
        font-size: 14px;
        resize: none;
        padding: 10px;
    }

    .xmljson-button-group {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 15px;
    }

    .xmljson-convert-btn, .xmljson-copy-btn {
        background: #007bff;
        border: none;
        padding: 10px 18px;
        border-radius: 5px;
        color: #ffffff;
        cursor: pointer;
        font-size: 15px;
        transition: 0.3s;
    }

    .xmljson-copy-btn {
        background: #28a745;
    }

    .xmljson-convert-btn:hover {
        background: #0056b3;
    }

    .xmljson-copy-btn:hover {
        background: #218838;
    }

    .xmljson-output-title {
        font-size: 18px;
        margin-top: 20px;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
    }

    .xmljson-output {
        background: #3c3c3c;
        padding: 12px;
        border-radius: 5px;
        text-align: left;
        font-size: 14px;
        height: 160px;
        overflow: auto;
        white-space: pre-wrap;
        border: 1px solid #555;
        color: #ffffff;
        margin-top: 10px;
    }
</style>