Gerador de Código com botão Copiar

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerar Código Dinamicamente com Copiar</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 90%;
            text-align: center;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            margin-bottom: 20px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .generated-code {
            margin-top: 20px;
            padding: 20px;
            background-color: #f5f5f5;
            border-left: 5px solid #007bff;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'Courier New', Courier, monospace;
            color: #d63384;
            font-size: 14px;
            text-align: left;
        }

        #copyButton {
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Insira o texto para gerar código</h1>
        <textarea id="userInput" placeholder="Digite seu código ou texto aqui..."></textarea>
        <button onclick="generateCode()">Gerar Código</button>

        <div id="output" class="generated-code" style="display:none;">
            <!-- O código gerado será inserido aqui -->
        </div>

        <button id="copyButton" onclick="copyCode()">Copiar Código</button>
    </div>

    <script>
        function generateCode() {
            // Obtém o texto da área de texto
            const userInput = document.getElementById('userInput').value;

            if (userInput.trim() === "") {
                alert('Por favor, insira algum texto para gerar o código.');
                return;
            }

            // Gera o conteúdo da tag <code> dinamicamente
            const codeBlock = `
<code>
${userInput}
</code>
            `;

            // Insere o código gerado no elemento output
            const outputDiv = document.getElementById('output');
            outputDiv.textContent = codeBlock;
            outputDiv.style.display = "block";

            // Exibe o botão de copiar
            document.getElementById('copyButton').style.display = "inline-block";
        }

        function copyCode() {
            // Seleciona o conteúdo dentro do elemento gerado
            const codeContent = document.getElementById('output').textContent;

            // Cria um elemento temporário para selecionar o texto
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = codeContent;
            document.body.appendChild(tempTextArea);

            // Seleciona o conteúdo e copia para a área de transferência
            tempTextArea.select();
            document.execCommand('copy');

            // Remove o elemento temporário
            document.body.removeChild(tempTextArea);

            // Alerta o usuário que o texto foi copiado
            alert('Código copiado para a área de transferência!');
        }
    </script>

</body>
</html>