<section class="diZContainer diZmxAuto">
    <h2 class="diZBorderBottom">Remove Multiple Whitespace</h2>
    <div class="diZMaxW600 diZFlexColumn diZmxAuto diZmy20 toolsSection">
        <textarea class="textarea-text" id="textInput" rows="10" placeholder="Enter text here..."></textarea>
        <button class="diZmt2 diZmxAuto" onclick="processText()"><span>Remove</span></button>
        <div class="diZFlexColumn diZDisplayNone diZmt2" id="after-procces">
            <textarea class="textarea-text" id="output" rows="10" readonly></textarea>
            <p class="diZDisplayNone diZTextCenter" id="copied-notice"></p>
            <button class="diZmt2 diZmxAuto" id="copyButton" onclick="copyOutputText()"><span>Copy</span></button>
        </div>
    </div>
</section>

<script>
    function removeMultipleWhitespace(text) {
        return text.replace(/\s+/g, ' ').trim();
    }

    function processText() {
        const inputText = document.getElementById('textInput').value;
        const cleanedText = removeMultipleWhitespace(inputText);
        document.getElementById('output').value = cleanedText;
        document.getElementById('after-procces').style.display = 'flex';
    }

    function copyOutputText() {
        const outputText = document.getElementById('output').value;
        const textarea = document.createElement('textarea');
        textarea.value = outputText;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        const copiedNotice = document.getElementById('copied-notice');
        copiedNotice.style.display = 'block';
        copiedNotice.innerHTML = 'Output text copied to clipboard!';
        setTimeout(() => {
            copiedNotice.style.display = 'none';
        }, 2000);
    }
</script>