Download index.html from Eris1298/test: direct link, hf CLI and curl.
- Browser
- Download file 41.8 kB
-
https://huggingface.co/spaces/Eris1298/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/Eris1298/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Eris1298/test/resolve/main/index.html
41.8 kB
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Diário Comunitário - Paróquia Nossa Senhora dos Remédios</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .tab-button.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .presence-present { | |
| background-color: #4ade80 ; | |
| } | |
| .presence-absent { | |
| background-color: #f87171 ; | |
| } | |
| .logo-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .logo-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .logo-caption { | |
| margin-top: 0.5rem; | |
| text-align: center; | |
| font-size: 0.875rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-blue-800">Diário Comunitário</h1> | |
| <h2 class="text-xl text-blue-700">Paróquia Nossa Senhora dos Remédios</h2> | |
| <h3 class="text-lg text-blue-600">Diocese de Petrolina</h3> | |
| </header> | |
| <div class="flex border-b border-gray-300 mb-6"> | |
| <button class="tab-button px-4 py-2 font-medium rounded-t-lg active" data-tab="turmas"> | |
| <i class="fas fa-users mr-2"></i>Registrar Turmas | |
| </button> | |
| <button class="tab-button px-4 py-2 font-medium rounded-t-lg" data-tab="encontros"> | |
| <i class="fas fa-calendar-alt mr-2"></i>Registro de Encontro | |
| </button> | |
| <button class="tab-button px-4 py-2 font-medium rounded-t-lg" data-tab="documentos"> | |
| <i class="fas fa-archive mr-2"></i>Repositório de Documentos | |
| </button> | |
| </div> | |
| <!-- Turmas Section --> | |
| <div id="turmas" class="tab-content active bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-800 border-b pb-2"> | |
| <i class="fas fa-users mr-2"></i>Registrar Nova Turma | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="responsavel-turma">Responsável</label> | |
| <input type="text" id="responsavel-turma" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="tipo-catequese">Tipo de Catequese</label> | |
| <select id="tipo-catequese" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Selecione...</option> | |
| <option value="Pre-Catequese">Pré-Catequese</option> | |
| <option value="Eucaristia-I">Eucaristia I</option> | |
| <option value="Eucaristia-II">Eucaristia II</option> | |
| <option value="Perseveranca">Perseverança</option> | |
| <option value="Crisma-Jovem">Crisma Jovem</option> | |
| <option value="Crisma-Adulta">Crisma Adulta</option> | |
| <option value="Adulto-I">Adulto I</option> | |
| <option value="Adulto-II">Adulto II</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="ano-turma">Ano</label> | |
| <input type="number" id="ano-turma" min="2000" max="2100" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Alunos</h3> | |
| <div id="alunos-container" class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="text" class="aluno-nome flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nome do aluno"> | |
| <button class="remove-aluno ml-2 p-2 text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button id="add-aluno" class="mt-3 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200"> | |
| <i class="fas fa-plus mr-2"></i>Adicionar Aluno | |
| </button> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button id="limpar-turma" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"> | |
| <i class="fas fa-broom mr-2"></i>Limpar Seleção | |
| </button> | |
| <button id="salvar-turma" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-save mr-2"></i>Salvar Turma | |
| </button> | |
| </div> | |
| <div class="logo-container"> | |
| <div class="logo-item"> | |
| <img src="brasao-paroquia.png" alt="Brasão da Paróquia" class="h-20"> | |
| <span class="logo-caption">Paróquia Nossa Senhora dos Remédios</span> | |
| </div> | |
| <div class="logo-item"> | |
| <img src="brasao-diocese.png" alt="Brasão da Diocese" class="h-20"> | |
| <span class="logo-caption">Diocese de Petrolina</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Encontros Section --> | |
| <div id="encontros" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-800 border-b pb-2"> | |
| <i class="fas fa-calendar-alt mr-2"></i>Registro de Encontro | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="responsavel-encontro">Responsável</label> | |
| <select id="responsavel-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Selecione...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="tipo-catequese-encontro">Tipo de Catequese</label> | |
| <select id="tipo-catequese-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Selecione...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="ano-encontro">Ano</label> | |
| <select id="ano-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Selecione...</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="alunos-turma-container" class="hidden mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Alunos da Turma</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white border"> | |
| <thead> | |
| <tr class="bg-gray-100"> | |
| <th class="py-2 px-4 border">#</th> | |
| <th class="py-2 px-4 border">Nome</th> | |
| <th class="py-2 px-4 border">Presente</th> | |
| <th class="py-2 px-4 border">Justificativa</th> | |
| <th class="py-2 px-4 border">Observação</th> | |
| </tr> | |
| </thead> | |
| <tbody id="alunos-turma-body"> | |
| <!-- Alunos will be added here dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="leitura-dia">Leitura do Dia</label> | |
| <input type="text" id="leitura-dia" placeholder="Ex.: Gn 1, 1-23" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="tema-encontro">Tema do Encontro</label> | |
| <input type="text" id="tema-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="auxiliares">Auxiliar(es)</label> | |
| <input type="text" id="auxiliares" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="data-encontro">Data</label> | |
| <input type="date" id="data-encontro" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2" for="resumo-encontro">Resumo do Encontro</label> | |
| <textarea id="resumo-encontro" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button id="limpar-encontro" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"> | |
| <i class="fas fa-broom mr-2"></i>Limpar Página | |
| </button> | |
| <button id="gerar-pdf" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"> | |
| <i class="fas fa-file-pdf mr-2"></i>Gerar PDF | |
| </button> | |
| </div> | |
| <div class="logo-container"> | |
| <div class="logo-item"> | |
| <img src="brasao-paroquia.png" alt="Brasão da Paróquia" class="h-20"> | |
| <span class="logo-caption">Paróquia Nossa Senhora dos Remédios</span> | |
| </div> | |
| <div class="logo-item"> | |
| <img src="brasao-diocese.png" alt="Brasão da Diocese" class="h-20"> | |
| <span class="logo-caption">Diocese de Petrolina</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documentos Section --> | |
| <div id="documentos" class="tab-content bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-2xl font-semibold mb-4 text-blue-800 border-b pb-2"> | |
| <i class="fas fa-archive mr-2"></i>Repositório de Documentos | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="responsavel-documento">Responsável</label> | |
| <select id="responsavel-documento" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Selecione...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="tipo-catequese-documento">Tipo de Catequese</label> | |
| <select id="tipo-catequese-documento" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Selecione...</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 font-medium mb-2" for="ano-documento">Ano</label> | |
| <select id="ano-documento" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="">Selecione...</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="documentos-container" class="hidden mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Documentos Disponíveis</h3> | |
| <div class="space-y-3" id="lista-documentos"> | |
| <!-- Documents will be listed here --> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Upload de Documentos</h3> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center"> | |
| <input type="file" id="upload-documento" class="hidden" accept=".pdf,.xlsx,.xls"> | |
| <label for="upload-documento" class="cursor-pointer"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-2"></i> | |
| <p class="text-gray-600">Arraste e solte arquivos aqui ou clique para selecionar</p> | |
| <p class="text-sm text-gray-500 mt-1">Formatos aceitos: PDF, Excel (.xlsx, .xls)</p> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="logo-container"> | |
| <div class="logo-item"> | |
| <img src="brasao-paroquia.png" alt="Brasão da Paróquia" class="h-20"> | |
| <span class="logo-caption">Paróquia Nossa Senhora dos Remédios</span> | |
| </div> | |
| <div class="logo-item"> | |
| <img src="brasao-diocese.png" alt="Brasão da Diocese" class="h-20"> | |
| <span class="logo-caption">Diocese de Petrolina</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize the jsPDF library | |
| const { jsPDF } = window.jspdf; | |
| // Tab functionality | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons and content | |
| document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); | |
| // Add active class to clicked button and corresponding content | |
| button.classList.add('active'); | |
| const tabId = button.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Turmas Section Functionality | |
| let alunosCount = 1; | |
| document.getElementById('add-aluno').addEventListener('click', () => { | |
| const container = document.getElementById('alunos-container'); | |
| const newAluno = document.createElement('div'); | |
| newAluno.className = 'flex items-center'; | |
| newAluno.innerHTML = ` | |
| <input type="text" class="aluno-nome flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nome do aluno"> | |
| <button class="remove-aluno ml-2 p-2 text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| container.appendChild(newAluno); | |
| // Add event listener to the new remove button | |
| newAluno.querySelector('.remove-aluno').addEventListener('click', () => { | |
| container.removeChild(newAluno); | |
| }); | |
| }); | |
| // Remove aluno when clicking on existing remove buttons | |
| document.querySelectorAll('.remove-aluno').forEach(button => { | |
| button.addEventListener('click', function() { | |
| this.parentElement.remove(); | |
| }); | |
| }); | |
| // Limpar Turma button | |
| document.getElementById('limpar-turma').addEventListener('click', () => { | |
| document.getElementById('responsavel-turma').value = ''; | |
| document.getElementById('tipo-catequese').value = ''; | |
| document.getElementById('ano-turma').value = ''; | |
| const container = document.getElementById('alunos-container'); | |
| container.innerHTML = ` | |
| <div class="flex items-center"> | |
| <input type="text" class="aluno-nome flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Nome do aluno"> | |
| <button class="remove-aluno ml-2 p-2 text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| `; | |
| // Re-add event listener | |
| document.querySelector('.remove-aluno').addEventListener('click', function() { | |
| this.parentElement.remove(); | |
| }); | |
| }); | |
| // Salvar Turma button | |
| document.getElementById('salvar-turma').addEventListener('click', () => { | |
| const responsavel = document.getElementById('responsavel-turma').value.trim(); | |
| const tipoCatequese = document.getElementById('tipo-catequese').value; | |
| const ano = document.getElementById('ano-turma').value.trim(); | |
| const alunos = Array.from(document.querySelectorAll('.aluno-nome')).map(input => input.value.trim()).filter(name => name); | |
| if (!responsavel || !tipoCatequese || !ano || alunos.length === 0) { | |
| alert('Por favor, preencha todos os campos obrigatórios e adicione pelo menos um aluno.'); | |
| return; | |
| } | |
| // Save to localStorage | |
| const turmas = JSON.parse(localStorage.getItem('turmas')) || []; | |
| const novaTurma = { | |
| id: Date.now(), | |
| responsavel, | |
| tipoCatequese, | |
| ano, | |
| alunos | |
| }; | |
| turmas.push(novaTurma); | |
| localStorage.setItem('turmas', JSON.stringify(turmas)); | |
| // Update dropdowns in other sections | |
| updateDropdowns(); | |
| alert('Turma salva com sucesso!'); | |
| document.getElementById('limpar-turma').click(); | |
| }); | |
| // Encontros Section Functionality | |
| function updateDropdowns() { | |
| const turmas = JSON.parse(localStorage.getItem('turmas')) || []; | |
| // Responsaveis | |
| const responsaveis = [...new Set(turmas.map(t => t.responsavel))]; | |
| const responsavelEncontro = document.getElementById('responsavel-encontro'); | |
| const responsavelDocumento = document.getElementById('responsavel-documento'); | |
| responsavelEncontro.innerHTML = '<option value="">Selecione...</option>'; | |
| responsavelDocumento.innerHTML = '<option value="">Selecione...</option>'; | |
| responsaveis.forEach(r => { | |
| responsavelEncontro.innerHTML += `<option value="${r}">${r}</option>`; | |
| responsavelDocumento.innerHTML += `<option value="${r}">${r}</option>`; | |
| }); | |
| // When responsavel changes in encontros | |
| responsavelEncontro.addEventListener('change', function() { | |
| const selectedResponsavel = this.value; | |
| const tipos = [...new Set(turmas | |
| .filter(t => t.responsavel === selectedResponsavel) | |
| .map(t => t.tipoCatequese))]; | |
| const tipoSelect = document.getElementById('tipo-catequese-encontro'); | |
| tipoSelect.innerHTML = '<option value="">Selecione...</option>'; | |
| tipos.forEach(t => { | |
| tipoSelect.innerHTML += `<option value="${t}">${getTipoCatequeseName(t)}</option>`; | |
| }); | |
| }); | |
| // When tipo changes in encontros | |
| document.getElementById('tipo-catequese-encontro').addEventListener('change', function() { | |
| const selectedResponsavel = document.getElementById('responsavel-encontro').value; | |
| const selectedTipo = this.value; | |
| const anos = [...new Set(turmas | |
| .filter(t => t.responsavel === selectedResponsavel && t.tipoCatequese === selectedTipo) | |
| .map(t => t.ano))]; | |
| const anoSelect = document.getElementById('ano-encontro'); | |
| anoSelect.innerHTML = '<option value="">Selecione...</option>'; | |
| anos.forEach(a => { | |
| anoSelect.innerHTML += `<option value="${a}">${a}</option>`; | |
| }); | |
| }); | |
| // When ano is selected in encontros | |
| document.getElementById('ano-encontro').addEventListener('change', function() { | |
| const selectedResponsavel = document.getElementById('responsavel-encontro').value; | |
| const selectedTipo = document.getElementById('tipo-catequese-encontro').value; | |
| const selectedAno = this.value; | |
| const turma = turmas.find(t => | |
| t.responsavel === selectedResponsavel && | |
| t.tipoCatequese === selectedTipo && | |
| t.ano === selectedAno | |
| ); | |
| if (turma) { | |
| document.getElementById('alunos-turma-container').classList.remove('hidden'); | |
| const tbody = document.getElementById('alunos-turma-body'); | |
| tbody.innerHTML = ''; | |
| turma.alunos.forEach((aluno, index) => { | |
| const row = document.createElement('tr'); | |
| row.className = 'hover:bg-gray-50'; | |
| row.innerHTML = ` | |
| <td class="py-2 px-4 border">${index + 1}</td> | |
| <td class="py-2 px-4 border">${aluno}</td> | |
| <td class="py-2 px-4 border text-center"> | |
| <select class="presenca-select px-2 py-1 border rounded"> | |
| <option value="presente">Presente</option> | |
| <option value="ausente">Ausente</option> | |
| </select> | |
| </td> | |
| <td class="py-2 px-4 border"> | |
| <input type="text" class="justificativa w-full px-2 py-1 border rounded" placeholder="Justificativa"> | |
| </td> | |
| <td class="py-2 px-4 border"> | |
| <input type="text" class="observacao w-full px-2 py-1 border rounded" placeholder="Observação"> | |
| </td> | |
| `; | |
| tbody.appendChild(row); | |
| // Add event listener to presence select | |
| row.querySelector('.presenca-select').addEventListener('change', function() { | |
| const row = this.closest('tr'); | |
| if (this.value === 'presente') { | |
| row.querySelector('td:nth-child(3)').classList.add('presence-present'); | |
| row.querySelector('td:nth-child(3)').classList.remove('presence-absent'); | |
| } else { | |
| row.querySelector('td:nth-child(3)').classList.add('presence-absent'); | |
| row.querySelector('td:nth-child(3)').classList.remove('presence-present'); | |
| } | |
| }); | |
| }); | |
| } | |
| }); | |
| // Similar functionality for documentos section | |
| const responsavelDoc = document.getElementById('responsavel-documento'); | |
| const tipoDoc = document.getElementById('tipo-catequese-documento'); | |
| const anoDoc = document.getElementById('ano-documento'); | |
| responsavelDoc.addEventListener('change', function() { | |
| const selectedResponsavel = this.value; | |
| const tipos = [...new Set(turmas | |
| .filter(t => t.responsavel === selectedResponsavel) | |
| .map(t => t.tipoCatequese))]; | |
| tipoDoc.innerHTML = '<option value="">Selecione...</option>'; | |
| tipos.forEach(t => { | |
| tipoDoc.innerHTML += `<option value="${t}">${getTipoCatequeseName(t)}</option>`; | |
| }); | |
| }); | |
| tipoDoc.addEventListener('change', function() { | |
| const selectedResponsavel = responsavelDoc.value; | |
| const selectedTipo = this.value; | |
| const anos = [...new Set(turmas | |
| .filter(t => t.responsavel === selectedResponsavel && t.tipoCatequese === selectedTipo) | |
| .map(t => t.ano))]; | |
| anoDoc.innerHTML = '<option value="">Selecione...</option>'; | |
| anos.forEach(a => { | |
| anoDoc.innerHTML += `<option value="${a}">${a}</option>`; | |
| }); | |
| }); | |
| anoDoc.addEventListener('change', function() { | |
| const selectedResponsavel = responsavelDoc.value; | |
| const selectedTipo = tipoDoc.value; | |
| const selectedAno = this.value; | |
| if (selectedResponsavel && selectedTipo && selectedAno) { | |
| loadDocuments(selectedResponsavel, selectedTipo, selectedAno); | |
| } | |
| }); | |
| } | |
| function getTipoCatequeseName(value) { | |
| const tipos = { | |
| 'Pre-Catequese': 'Pré-Catequese', | |
| 'Eucaristia-I': 'Eucaristia I', | |
| 'Eucaristia-II': 'Eucaristia II', | |
| 'Perseveranca': 'Perseverança', | |
| 'Crisma-Jovem': 'Crisma Jovem', | |
| 'Crisma-Adulta': 'Crisma Adulta', | |
| 'Adulto-I': 'Adulto I', | |
| 'Adulto-II': 'Adulto II' | |
| }; | |
| return tipos[value] || value; | |
| } | |
| // Limpar Encontro button | |
| document.getElementById('limpar-encontro').addEventListener('click', () => { | |
| document.getElementById('responsavel-encontro').value = ''; | |
| document.getElementById('tipo-catequese-encontro').value = ''; | |
| document.getElementById('ano-encontro').value = ''; | |
| document.getElementById('leitura-dia').value = ''; | |
| document.getElementById('tema-encontro').value = ''; | |
| document.getElementById('auxiliares').value = ''; | |
| document.getElementById('data-encontro').value = ''; | |
| document.getElementById('resumo-encontro').value = ''; | |
| document.getElementById('alunos-turma-container').classList.add('hidden'); | |
| }); | |
| // Gerar PDF button | |
| document.getElementById('gerar-pdf').addEventListener('click', async () => { | |
| const responsavel = document.getElementById('responsavel-encontro').value; | |
| const tipoCatequese = document.getElementById('tipo-catequese-encontro').value; | |
| const ano = document.getElementById('ano-encontro').value; | |
| const leitura = document.getElementById('leitura-dia').value; | |
| const tema = document.getElementById('tema-encontro').value; | |
| const auxiliares = document.getElementById('auxiliares').value; | |
| const data = document.getElementById('data-encontro').value; | |
| const resumo = document.getElementById('resumo-encontro').value; | |
| if (!responsavel || !tipoCatequese || !ano || !leitura || !tema || !data) { | |
| alert('Por favor, preencha todos os campos obrigatórios antes de gerar o PDF.'); | |
| return; | |
| } | |
| // Create a temporary div to hold the PDF content | |
| const pdfContent = document.createElement('div'); | |
| pdfContent.className = 'p-6 bg-white'; | |
| // Format date | |
| const dataObj = new Date(data); | |
| const dataFormatada = dataObj.toLocaleDateString('pt-BR'); | |
| // Get alunos data | |
| const alunosRows = document.querySelectorAll('#alunos-turma-body tr'); | |
| const alunosData = Array.from(alunosRows).map(row => { | |
| return { | |
| numero: row.cells[0].textContent, | |
| nome: row.cells[1].textContent, | |
| presenca: row.cells[2].querySelector('select').value, | |
| justificativa: row.cells[3].querySelector('input').value, | |
| observacao: row.cells[4].querySelector('input').value | |
| }; | |
| }); | |
| // Build HTML for PDF | |
| pdfContent.innerHTML = ` | |
| <h1 class="text-2xl font-bold text-center mb-4">Registro de Encontro - Paróquia Nossa Senhora dos Remédios</h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div> | |
| <p class="font-semibold">Responsável:</p> | |
| <p>${responsavel}</p> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Tipo de Catequese:</p> | |
| <p>${getTipoCatequeseName(tipoCatequese)}</p> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Ano:</p> | |
| <p>${ano}</p> | |
| </div> | |
| <div> | |
| <p class="font-semibold">Data:</p> | |
| <p>${dataFormatada}</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="font-semibold">Leitura do Dia:</p> | |
| <p>${leitura}</p> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="font-semibold">Tema do Encontro:</p> | |
| <p>${tema}</p> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="font-semibold">Auxiliar(es):</p> | |
| <p>${auxiliares || 'Nenhum'}</p> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="font-semibold">Resumo do Encontro:</p> | |
| <p>${resumo || 'Nenhum resumo fornecido.'}</p> | |
| </div> | |
| <h2 class="text-xl font-semibold mb-3">Frequência dos Alunos</h2> | |
| <table class="min-w-full border mb-6"> | |
| <thead> | |
| <tr class="bg-gray-100"> | |
| <th class="py-2 px-4 border">#</th> | |
| <th class="py-2 px-4 border">Nome</th> | |
| <th class="py-2 px-4 border">Presença</th> | |
| <th class="py-2 px-4 border">Justificativa</th> | |
| <th class="py-2 px-4 border">Observação</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| ${alunosData.map(aluno => ` | |
| <tr> | |
| <td class="py-2 px-4 border">${aluno.numero}</td> | |
| <td class="py-2 px-4 border">${aluno.nome}</td> | |
| <td class="py-2 px-4 border ${aluno.presenca === 'presente' ? 'bg-green-200' : 'bg-red-200'}"> | |
| ${aluno.presenca === 'presente' ? 'Presente' : 'Ausente'} | |
| </td> | |
| <td class="py-2 px-4 border">${aluno.justificativa || '-'}</td> | |
| <td class="py-2 px-4 border">${aluno.observacao || '-'}</td> | |
| </tr> | |
| `).join('')} | |
| </tbody> | |
| </table> | |
| <div class="text-center text-sm text-gray-500 mt-8"> | |
| <p>Documento gerado em: ${new Date().toLocaleString('pt-BR')}</p> | |
| </div> | |
| <div style="display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2rem;"> | |
| <div style="display: flex; flex-direction: column; align-items: center;"> | |
| <img src="brasao-paroquia.png" alt="Brasão da Paróquia" style="height: 80px;"> | |
| <span style="margin-top: 0.5rem; text-align: center; font-size: 0.875rem;">Paróquia Nossa Senhora dos Remédios</span> | |
| </div> | |
| <div style="display: flex; flex-direction: column; align-items: center;"> | |
| <img src="brasao-diocese.png" alt="Brasão da Diocese" style="height: 80px;"> | |
| <span style="margin-top: 0.5rem; text-align: center; font-size: 0.875rem;">Diocese de Petrolina</span> | |
| </div> | |
| </div> | |
| `; | |
| // Append to body temporarily | |
| document.body.appendChild(pdfContent); | |
| try { | |
| // Generate PDF | |
| const pdf = new jsPDF('p', 'pt', 'a4'); | |
| await html2canvas(pdfContent, { | |
| scale: 2, | |
| logging: false, | |
| useCORS: true | |
| }).then(canvas => { | |
| const imgData = canvas.toDataURL('image/png'); | |
| const imgWidth = pdf.internal.pageSize.getWidth(); | |
| const imgHeight = (canvas.height * imgWidth) / canvas.width; | |
| pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight); | |
| // Save the PDF | |
| const fileName = `Encontro_${responsavel}_${tipoCatequese}_${dataFormatada.replace(/\//g, '-')}.pdf`; | |
| pdf.save(fileName); | |
| // Save to documentos repository | |
| saveToDocumentos(responsavel, tipoCatequese, ano, fileName, imgData); | |
| }); | |
| } catch (error) { | |
| console.error('Error generating PDF:', error); | |
| alert('Ocorreu um erro ao gerar o PDF. Por favor, tente novamente.'); | |
| } finally { | |
| // Remove temporary element | |
| document.body.removeChild(pdfContent); | |
| } | |
| }); | |
| function saveToDocumentos(responsavel, tipoCatequese, ano, fileName, pdfData) { | |
| const documentos = JSON.parse(localStorage.getItem('documentos')) || []; | |
| const novoDocumento = { | |
| id: Date.now(), | |
| responsavel, | |
| tipoCatequese, | |
| ano, | |
| fileName, | |
| pdfData, | |
| dateCreated: new Date().toISOString() | |
| }; | |
| documentos.push(novoDocumento); | |
| localStorage.setItem('documentos', JSON.stringify(documentos)); | |
| // Update documentos list if on documentos tab | |
| if (document.getElementById('documentos').classList.contains('active')) { | |
| const responsavelDoc = document.getElementById('responsavel-documento').value; | |
| const tipoDoc = document.getElementById('tipo-catequese-documento').value; | |
| const anoDoc = document.getElementById('ano-documento').value; | |
| if (responsavelDoc === responsavel && tipoDoc === tipoCatequese && anoDoc === ano) { | |
| loadDocuments(responsavel, tipoCatequese, ano); | |
| } | |
| } | |
| } | |
| // Documentos Section Functionality | |
| function loadDocuments(responsavel, tipoCatequese, ano) { | |
| const documentos = JSON.parse(localStorage.getItem('documentos')) || []; | |
| const filteredDocs = documentos.filter(doc => | |
| doc.responsavel === responsavel && | |
| doc.tipoCatequese === tipoCatequese && | |
| doc.ano === ano | |
| ); | |
| const listaDocumentos = document.getElementById('lista-documentos'); | |
| listaDocumentos.innerHTML = ''; | |
| if (filteredDocs.length === 0) { | |
| listaDocumentos.innerHTML = '<p class="text-gray-500">Nenhum documento encontrado para esta turma.</p>'; | |
| } else { | |
| filteredDocs.forEach(doc => { | |
| const docElement = document.createElement('div'); | |
| docElement.className = 'flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50'; | |
| docElement.innerHTML = ` | |
| <div> | |
| <i class="fas fa-file-pdf text-red-500 mr-2"></i> | |
| <span>${doc.fileName}</span> | |
| <span class="text-sm text-gray-500 ml-2">(${new Date(doc.dateCreated).toLocaleString('pt-BR')})</span> | |
| </div> | |
| <div> | |
| <button class="view-document p-2 text-blue-500 hover:text-blue-700" data-id="${doc.id}"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="download-document p-2 text-green-500 hover:text-green-700" data-id="${doc.id}"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| `; | |
| listaDocumentos.appendChild(docElement); | |
| // Add event listeners | |
| docElement.querySelector('.view-document').addEventListener('click', () => viewDocument(doc.id)); | |
| docElement.querySelector('.download-document').addEventListener('click', () => downloadDocument(doc.id)); | |
| }); | |
| } | |
| document.getElementById('documentos-container').classList.remove('hidden'); | |
| } | |
| function viewDocument(id) { | |
| const documentos = JSON.parse(localStorage.getItem('documentos')) || []; | |
| const doc = documentos.find(d => d.id == id); | |
| if (doc) { | |
| // Open PDF in new tab | |
| const pdfWindow = window.open('', '_blank'); | |
| pdfWindow.document.write(` | |
| <html> | |
| <head> | |
| <title>${doc.fileName}</title> | |
| <style> | |
| body { margin: 0; padding: 0; } | |
| iframe { width: 100%; height: 100vh; border: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <iframe src="${doc.pdfData}"></iframe> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Eris1298/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |