<section class="diZContainer diZmxAuto ">
    <h1 class="diZBorderBottom">HTML Decoder</h1>
    <div class="diZMaxW600 diZmxAuto toolsSection diZmy20">
        <div class="diZFlexColumn diZJustifyCenter">
            <textarea class="diZScrollBarNone" rows="10" id="encodedText" placeholder="Enter encoded HTML here..."></textarea>
            <div></div>
            <button class="diZmt4 diZmxAuto" onclick="decodeHtml()"><span>Decode</span></button>
            <textarea class="diZmt4 diZScrollBarNone" rows="10" id="decodedText" readonly placeholder="Decoded HTML will appear here..."></textarea>
            <button class="diZmt4 diZmxAuto" id="copyButton" onclick="copyToClipboard()"><span>Copy</span></button>
        </div>
    </div>
</section>    

<script>
    function decodeHtml() {
        const encodedInput = document.getElementById('encodedText').value;
        const textarea = document.createElement('textarea');
        textarea.innerHTML = encodedInput;
        const decoded = textarea.value;
        document.getElementById('decodedText').value = decoded;
    }

    function copyToClipboard() {
        const decodedText = document.getElementById('decodedText');
        decodedText.select();
        decodedText.setSelectionRange(0, 99999); // For mobile devices
        document.execCommand('copy');
        let copyButtons = document.getElementById('copyButton');
        copyButtons.innerHTML = 'Copied to clipboard!';
        setTimeout(() => {
            copyButtons.innerHTML = 'Copy';
        }, 2000);
        
        // alert('Decoded HTML copied to clipboard!');
    }
</script>
