<style>
        /* Adicione estilos CSS conforme necessário */
        #jsonld-result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            white-space: pre-wrap;
        }

        #copy-button {
            margin-top: 10px;
            cursor: pointer;
            padding: 5px 10px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
        }
    </style>
  
        <h1>Gerador de JSON-LD para Artigos</h1>

    <form id="artigo-form">
        <h2>Dados do Artigo</h2>
        <div>
            <label for="tipoJsonLD">Tipo de JSON-LD:</label>
            <select id="tipoJsonLD" name="tipoJsonLD">
                <option value="Article">Artigo</option>
                <!-- Adicione mais tipos conforme necessário -->
            </select>
        </div>

        <div>
            <label for="urlPagina">URL da Página:</label>
            <input type="url" id="urlPagina" name="urlPagina" required>
        </div>

        <div>
            <label for="titulo">Título:</label>
            <input type="text" id="titulo" name="titulo" required>
        </div>

        <div>
            <label for="urlImagem">URL da Imagem:</label>
            <input type="url" id="urlImagem" name="urlImagem" required>
        </div>

        <div>
            <label for="descricao">Descrição:</label>
            <textarea id="descricao" name="descricao" required></textarea>
        </div>

        <div>
            <label for="tipoAutor">Tipo de Autor:</label>
            <select id="tipoAutor" name="tipoAutor">
                <option value="Person">Pessoa</option>
                <option value="Organization">Organização</option>
            </select>
        </div>

        <div>
            <label for="nomeAutor">Nome do Autor:</label>
            <input type="text" id="nomeAutor" name="nomeAutor" required>
        </div>

        <div>
            <label for="urlPaginaAutor">URL da Página do Autor:</label>
            <input type="url" id="urlPaginaAutor" name="urlPaginaAutor" required>
        </div>

        <div>
            <label for="editora">Editora:</label>
            <input type="text" id="editora" name="editora" required>
        </div>

        <div>
            <label for="logoEditora">URL do Logo da Editora:</label>
            <input type="url" id="logoEditora" name="logoEditora" required>
        </div>

        <div>
            <label for="dataPublicacao">Data de Publicação:</label>
            <input type="date" id="dataPublicacao" name="dataPublicacao" required>
        </div>

        <div>
            <label for="dataModificada">Data Modificada:</label>
            <input type="date" id="dataModificada" name="dataModificada" required>
        </div>
        <button type="button" onclick="gerarJsonLD('artigo')">Gerar JSON-LD</button>
    </form>



    <script>
        function gerarJsonLD() {
            const tipoJsonLD = document.getElementById('tipoJsonLD').value;
            const urlPagina = document.getElementById('urlPagina').value;
            const titulo = document.getElementById('titulo').value;
            const urlImagem = document.getElementById('urlImagem').value;
            const descricao = document.getElementById('descricao').value;
            const tipoAutor = document.getElementById('tipoAutor').value;
            const nomeAutor = document.getElementById('nomeAutor').value;
            const urlPaginaAutor = document.getElementById('urlPaginaAutor').value;
            const editora = document.getElementById('editora').value;
            const logoEditora = document.getElementById('logoEditora').value;
            const dataPublicacao = document.getElementById('dataPublicacao').value;
            const dataModificada = document.getElementById('dataModificada').value;

            const jsonLD = {
                "@context": "https://schema.org/",
                "@type": tipoJsonLD,
                "headline": titulo,
                "image": urlImagem,
                "author": {
                    "@type": tipoAutor,
                    "name": nomeAutor,
                    "url": urlPaginaAutor
                },
                "publisher": {
                    "@type": "Organization",
                    "name": editora,
                    "logo": {
                        "@type": "ImageObject",
                        "url": logoEditora
                    }
                },
              "datePublished": formatarDataParaJSONLD("2023-02-05"), // Exemplo de data
                "dateModified": formatarDataParaJSONLD("2023-02-07") // Exemplo de data
            };

            const jsonldContainer = document.getElementById('jsonld-container');
            jsonldContainer.innerText = JSON.stringify(jsonLD, null, 2);
        }

        function copiarJsonLD() {
            const jsonldContainer = document.getElementById('jsonld-container');
            const textarea = document.createElement('textarea');
            textarea.value = jsonldContainer.innerText;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('JSON-LD copiado para a área de transferência!');
        }
         function formatarDataParaJSONLD(dataString) {
            const data = new Date(dataString);
            const offset = -data.getTimezoneOffset() / 60;
            const offsetStr = (offset >= 0 ? "+" : "-") + (Math.abs(offset) < 10 ? "0" : "") + Math.abs(offset) + ":00";

            return data.toISOString().replace("Z", offsetStr);
        }
    </script>

<!-- Área para exibir o JSON-LD gerado -->
    <div id="jsonld-container" class="jsonld-container"></div>

    <!-- Botão de copiar JSON-LD -->
    <button id="copy-button" onclick="copiarJsonLD()">Copiar JSON-LD</button>