<?php
    require_once('.htac_header.php');
?>
<section class="diZContainer diZmxAuto diZmy20">
    <div class="diZMaxW600 diZmxAuto toolsSection">
        <h1>HTML Encoder</h1>
        <div class="diZFlexColumn">
            <textarea class="diZScrollBarNone" rows="10" id="inputText" placeholder="Enter HTML code here..."></textarea>

            <button class="diZmt4 diZmxAuto" onclick="encodeHtml()"><span>Encode</span></button>

            <textarea class="diZmt4 diZScrollBarNone" rows="10" id="outputText" readonly placeholder="Encoded HTML will appear here..."></textarea>

            <button class="diZmt4 diZmxAuto" id="copyButton" onclick="copyToClipboard()"><span>Copy</span></button>
        </div>
    </div>
</section>   
    <script>
        function encodeHtml() {
            const input = document.getElementById('inputText').value;
            const encoded = input.replace(/[\u00A0-\u9999<>&'"]/gim, function(i) {
                return '&#' + i.charCodeAt(0) + ';';
            });
            document.getElementById('outputText').value = encoded;
        }

        function copyToClipboard() {
        const encodedText = document.getElementById('outputText');
        encodedText.select();
        encodedText.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>
