pro-code for code generator

 
<div class="paste-area">
    <textarea id="paste-box" placeholder="Paste your HTML code here"></textarea>
    <button class="generate-btn" onclick="generateCode()">Generate</button>
</div>
<div class="code-container">
    <pre><code id="code-block"></code></pre>
    <button class="copy-btn" onclick="copyCode()">Copy All</button>
</div>
<style>
    .paste-area {
    margin-bottom: 20px;
}

#paste-box {
    width: 100%;
    height: 100px;
    padding: 10px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

.generate-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    margin-bottom: 20px;
}

.generate-btn:hover {
    background-color: #218838;
}

.code-container {
    position: relative;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    word-wrap: break-word;
    overflow-x: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.copy-btn:hover {
    background-color: #0056b3;
}

.copy-btn:active {
    background-color: #003f7f;
}

</style><script>
function generateCode() {
    var pasteBox = document.getElementById('paste-box');
    var codeBlock = document.getElementById('code-block');

    var pastedHTML = pasteBox.value;
    var escapedHTML = replaceTags(pastedHTML);
    
    codeBlock.innerText = escapedHTML; // Use innerText instead of innerHTML
}

function replaceTags(html) {
    return html.replace(/</g, '<').replace(/>/g, '>');
}

function copyCode() {
    var code = document.getElementById('code-block').innerText;
    navigator.clipboard.writeText(code).then(function() {
        alert('Code copied to clipboard!');
    }).catch(function(err) {
        console.error('Could not copy text: ', err);
    });
}
</script>