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

        <h3 class="tomljson-output-title">JSON Output:</h3>
        <pre class="tomljson-output"></pre>
    </div>
</div>
<script type="module">
    import * as TOML from 'https://cdn.jsdelivr.net/npm/toml@3.0.0/+esm';

    document.addEventListener("DOMContentLoaded", () => {
        document.querySelector(".tomljson-convert-btn").addEventListener("click", () => {
            try {
                const tomlData = document.querySelector(".tomljson-input").value;
                const jsonData = TOML.parse(tomlData);
                document.querySelector(".tomljson-output").textContent = JSON.stringify(jsonData, null, 2);
            } catch (error) {
                document.querySelector(".tomljson-output").textContent = "Error: " + error.message;
            }
        });

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

<style>

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

    .tomljson-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;
    }

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

    .tomljson-input {
        /* width: 100%; */
        background: #3c3c3c;
        color: #ffffff;
        border: 1px solid #555;
        border-radius: 5px;
        /* padding: 12px; */
        font-size: 14px;
        resize: none;
    }

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

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

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

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

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

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

    .tomljson-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>
