| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Jornal Oliveira</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #4E653D; |
| --primary-light: #6B8C4A; |
| --secondary: #354C2B; |
| --accent: #A4B17B; |
| --background: #F5F7F0; |
| --text: #20331B; |
| --text-light: #FFFFFF; |
| } |
| |
| body { |
| background-color: var(--background); |
| color: var(--text); |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .preview-image { |
| transition: all 0.3s ease; |
| } |
| |
| .preview-image:hover { |
| transform: scale(1.02); |
| } |
| |
| .tab-active { |
| background-color: var(--primary); |
| color: white; |
| } |
| |
| .notification-unread { |
| border-left: 4px solid var(--primary-light); |
| } |
| |
| #preview { |
| max-height: 300px; |
| object-fit: contain; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--accent); |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--primary-light); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex flex-col"> |
| |
| <header class="bg-gradient-to-r from-green-900 to-green-700 text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="text-center md:text-left mb-4 md:mb-0"> |
| <h1 class="text-3xl md:text-4xl font-bold">Jornal Oliveira</h1> |
| <p class="text-lg italic">Feito de alunos para alunos</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div id="userInfo" class="hidden bg-green-800 px-4 py-2 rounded-full flex items-center"> |
| <i class="fas fa-user-circle mr-2"></i> |
| <span id="usernameDisplay"></span> |
| </div> |
| <button id="loginBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-full transition"> |
| <i class="fas fa-sign-in-alt mr-2"></i>Entrar |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <nav class="bg-green-800 text-white shadow-md sticky top-0 z-10"> |
| <div class="container mx-auto px-4"> |
| <div class="flex overflow-x-auto py-2 space-x-1"> |
| <button data-tab="home" class="tab-btn px-4 py-2 rounded-lg font-medium transition whitespace-nowrap active"> |
| <i class="fas fa-home mr-2"></i>Início |
| </button> |
| <button data-tab="enviar" class="tab-btn restricted px-4 py-2 rounded-lg font-medium transition whitespace-nowrap"> |
| <i class="fas fa-paper-plane mr-2"></i>Enviar |
| </button> |
| <button data-tab="pendentes" class="tab-btn restricted px-4 py-2 rounded-lg font-medium transition whitespace-nowrap"> |
| <i class="fas fa-clock mr-2"></i>Pendentes |
| </button> |
| <button data-tab="notificacoes" class="tab-btn restricted px-4 py-2 rounded-lg font-medium transition whitespace-nowrap relative"> |
| <i class="fas fa-bell mr-2"></i>Notificações |
| <span id="notificationBadge" class="hidden absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="flex-grow container mx-auto px-4 py-6"> |
| |
| <section id="home" class="content-section active"> |
| <div class="mb-8"> |
| <h2 class="text-2xl font-bold mb-4 text-green-900 border-b-2 border-green-200 pb-2">Últimas Notícias</h2> |
| <div id="articles" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div> |
| </div> |
| |
| <div class="mb-8"> |
| <h2 class="text-2xl font-bold mb-4 text-green-900 border-b-2 border-green-200 pb-2">Destaques</h2> |
| <div id="featured" class="grid grid-cols-1 gap-6"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="enviar" class="content-section restricted max-w-4xl mx-auto"> |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <h2 class="text-2xl font-bold mb-6 text-green-900"> |
| <i class="fas fa-edit mr-2"></i>Enviar Matéria |
| </h2> |
| |
| <form id="formEnviar" class="space-y-4"> |
| <div> |
| <label for="artTitle" class="block text-sm font-medium text-gray-700 mb-1">Título da Matéria</label> |
| <input id="artTitle" type="text" placeholder="Digite o título da matéria" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div> |
| <label for="artAuthor" class="block text-sm font-medium text-gray-700 mb-1">Autor</label> |
| <input id="artAuthor" type="text" placeholder="Seu nome" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"> |
| </div> |
| |
| <div> |
| <label for="artDate" class="block text-sm font-medium text-gray-700 mb-1">Data</label> |
| <input id="artDate" type="date" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="artCat" class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> |
| <select id="artCat" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"> |
| <option value="">Selecione uma Categoria</option> |
| <option>Notícias da Escola</option> |
| <option>Entrevistas</option> |
| <option>Opinião</option> |
| <option>Cultura e Arte</option> |
| <option>Esportes</option> |
| <option>Humor</option> |
| <option>Você Sabia?</option> |
| <option>Projetos e Grêmios</option> |
| <option>Fala Estudante</option> |
| <option>Investigação</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="artLide" class="block text-sm font-medium text-gray-700 mb-1">Lide</label> |
| <p class="text-xs text-gray-500 mb-1">Responda: o quê, quem, quando, onde, como e por quê</p> |
| <textarea id="artLide" rows="3" placeholder="Escreva o lide da matéria..." required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"></textarea> |
| </div> |
| |
| <div> |
| <label for="artDev" class="block text-sm font-medium text-gray-700 mb-1">Desenvolvimento</label> |
| <p class="text-xs text-gray-500 mb-1">Detalhes, contexto, explicações</p> |
| <textarea id="artDev" rows="5" placeholder="Desenvolva sua matéria..." required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"></textarea> |
| </div> |
| |
| <div> |
| <label for="artConc" class="block text-sm font-medium text-gray-700 mb-1">Conclusão</label> |
| <p class="text-xs text-gray-500 mb-1">Reflexões finais</p> |
| <textarea id="artConc" rows="3" placeholder="Conclua sua matéria..." required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"></textarea> |
| </div> |
| |
| <div> |
| <label for="artImage" class="block text-sm font-medium text-gray-700 mb-1">Imagem (opcional)</label> |
| <div class="flex items-center space-x-4"> |
| <label class="cursor-pointer bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition inline-flex items-center"> |
| <i class="fas fa-image mr-2"></i> |
| Escolher Imagem |
| <input id="artImage" type="file" accept="image/*" class="hidden"> |
| </label> |
| <span id="fileName" class="text-sm text-gray-500">Nenhum arquivo selecionado</span> |
| </div> |
| <img id="preview" class="mt-2 rounded-lg hidden max-w-full h-auto max-h-64 object-contain mx-auto"> |
| </div> |
| |
| <div class="pt-4"> |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition flex items-center justify-center"> |
| <i class="fas fa-paper-plane mr-2"></i>Enviar para Aprovação |
| </button> |
| </div> |
| </form> |
| |
| <div id="successMessage" class="hidden mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg"> |
| <i class="fas fa-check-circle mr-2"></i> Sua matéria foi enviada para aprovação com sucesso! |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="pendentes" class="content-section restricted"> |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <h2 class="text-2xl font-bold mb-6 text-green-900"> |
| <i class="fas fa-clock mr-2"></i>Matérias Pendentes |
| </h2> |
| |
| <div id="pendingList" class="space-y-6"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="notificacoes" class="content-section restricted max-w-4xl mx-auto"> |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-green-900"> |
| <i class="fas fa-bell mr-2"></i>Notificações |
| </h2> |
| <button id="markAllRead" class="text-sm text-green-600 hover:text-green-800 transition"> |
| <i class="fas fa-check-double mr-1"></i>Marcar todas como lidas |
| </button> |
| </div> |
| |
| <div id="notificationList" class="space-y-4"> |
| |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-green-900 text-white py-6"> |
| <div class="container mx-auto px-4 text-center"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold">Jornal Oliveira</h3> |
| <p class="text-sm">Feito de alunos para alunos</p> |
| </div> |
| |
| <div class="flex space-x-4"> |
| <a href="#" class="hover:text-green-300 transition"> |
| <i class="fab fa-facebook-f text-lg"></i> |
| </a> |
| <a href="#" class="hover:text-green-300 transition"> |
| <i class="fab fa-instagram text-lg"></i> |
| </a> |
| <a href="#" class="hover:text-green-300 transition"> |
| <i class="fab fa-twitter text-lg"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-4 pt-4 border-t border-green-700 text-sm"> |
| <p>© 2025 Jornal Oliveira. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold text-green-900">Acesso ao Sistema</h3> |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <form id="loginForm" class="space-y-4"> |
| <div> |
| <label for="loginName" class="block text-sm font-medium text-gray-700 mb-1">Nome do editor</label> |
| <input id="loginName" type="text" placeholder="Digite seu nome" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"> |
| </div> |
| |
| <div> |
| <label for="loginPass" class="block text-sm font-medium text-gray-700 mb-1">Senha</label> |
| <input id="loginPass" type="password" placeholder="Digite sua senha" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"> |
| </div> |
| |
| <div class="pt-2"> |
| <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition"> |
| <i class="fas fa-sign-in-alt mr-2"></i>Entrar |
| </button> |
| </div> |
| </form> |
| |
| <div id="loginError" class="hidden mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg"> |
| <i class="fas fa-exclamation-circle mr-2"></i> Credenciais inválidas. Por favor, tente novamente. |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let authUsers = JSON.parse(localStorage.getItem('jo_users')) || [ |
| { name: 'Mikael Silva', pass: '1903', role: 'editor' }, |
| { name: 'Lorena Rangel', pass: 'Editor chefe 2', role: 'editor' } |
| ]; |
| |
| localStorage.setItem('jo_users', JSON.stringify(authUsers)); |
| |
| let pending = JSON.parse(localStorage.getItem('jo_pending') || '[]'); |
| let published = JSON.parse(localStorage.getItem('jo_published') || '[]'); |
| let notifications = JSON.parse(localStorage.getItem('jo_notifications') || '[]'); |
| let currentUser = null; |
| |
| |
| const loginBtn = document.getElementById('loginBtn'); |
| const loginModal = document.getElementById('loginModal'); |
| const closeModal = document.getElementById('closeModal'); |
| const loginForm = document.getElementById('loginForm'); |
| const loginError = document.getElementById('loginError'); |
| const userInfo = document.getElementById('userInfo'); |
| const usernameDisplay = document.getElementById('usernameDisplay'); |
| const notificationBadge = document.getElementById('notificationBadge'); |
| const markAllRead = document.getElementById('markAllRead'); |
| |
| |
| loginBtn.addEventListener('click', () => loginModal.classList.remove('hidden')); |
| closeModal.addEventListener('click', () => loginModal.classList.add('hidden')); |
| |
| loginForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| const name = document.getElementById('loginName').value.trim(); |
| const pass = document.getElementById('loginPass').value; |
| |
| |
| if (pass.toLowerCase() === 'jornal oliveira') { |
| currentUser = { name, role: 'editor' }; |
| handleSuccessfulLogin(); |
| return; |
| } |
| |
| |
| const user = authUsers.find(u => |
| u.name.toLowerCase() === name.toLowerCase() && u.pass === pass |
| ); |
| |
| if (user) { |
| currentUser = user; |
| handleSuccessfulLogin(); |
| } else { |
| loginError.classList.remove('hidden'); |
| } |
| }); |
| |
| function handleSuccessfulLogin() { |
| loginModal.classList.add('hidden'); |
| loginError.classList.add('hidden'); |
| document.getElementById('loginName').value = ''; |
| document.getElementById('loginPass').value = ''; |
| |
| |
| loginBtn.classList.add('hidden'); |
| userInfo.classList.remove('hidden'); |
| usernameDisplay.textContent = currentUser.name; |
| |
| |
| document.querySelectorAll('.restricted').forEach(el => el.style.display = 'block'); |
| |
| |
| renderAll(); |
| |
| |
| updateNotificationBadge(); |
| } |
| |
| |
| document.querySelectorAll('.tab-btn').forEach(tab => { |
| tab.addEventListener('click', () => { |
| |
| document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| |
| |
| document.querySelectorAll('.content-section').forEach(section => { |
| section.classList.remove('active'); |
| }); |
| document.getElementById(tab.dataset.tab).classList.add('active'); |
| }); |
| }); |
| |
| |
| const artImage = document.getElementById('artImage'); |
| const preview = document.getElementById('preview'); |
| const fileName = document.getElementById('fileName'); |
| |
| artImage.addEventListener('change', (e) => { |
| const file = e.target.files[0]; |
| if (!file) return; |
| |
| fileName.textContent = file.name; |
| |
| const reader = new FileReader(); |
| reader.onload = (event) => { |
| preview.src = event.target.result; |
| preview.classList.remove('hidden'); |
| }; |
| reader.readAsDataURL(file); |
| }); |
| |
| |
| const formEnviar = document.getElementById('formEnviar'); |
| const successMessage = document.getElementById('successMessage'); |
| |
| formEnviar.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| const article = { |
| title: document.getElementById('artTitle').value.trim(), |
| author: document.getElementById('artAuthor').value.trim(), |
| date: document.getElementById('artDate').value, |
| category: document.getElementById('artCat').value, |
| lide: document.getElementById('artLide').value.trim(), |
| desenvolvimento: document.getElementById('artDev').value.trim(), |
| conclusao: document.getElementById('artConc').value.trim(), |
| imageUrl: preview.src || '', |
| submittedBy: currentUser.name, |
| submittedAt: new Date().toISOString() |
| }; |
| |
| pending.push(article); |
| localStorage.setItem('jo_pending', JSON.stringify(pending)); |
| |
| |
| formEnviar.reset(); |
| preview.classList.add('hidden'); |
| fileName.textContent = 'Nenhum arquivo selecionado'; |
| |
| |
| successMessage.classList.remove('hidden'); |
| setTimeout(() => { |
| successMessage.classList.add('hidden'); |
| }, 5000); |
| |
| |
| notifications.push({ |
| message: `Nova matéria submetida: "${article.title}" por ${currentUser.name}`, |
| read: false, |
| date: new Date().toISOString(), |
| type: 'submission' |
| }); |
| localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
| |
| |
| renderPending(); |
| updateNotificationBadge(); |
| }); |
| |
| |
| function renderHome() { |
| const articlesContainer = document.getElementById('articles'); |
| const featuredContainer = document.getElementById('featured'); |
| |
| articlesContainer.innerHTML = ''; |
| featuredContainer.innerHTML = ''; |
| |
| if (!published.length) { |
| createWelcome(); |
| } |
| |
| |
| published.sort((a, b) => new Date(b.date) - new Date(a.date)); |
| |
| |
| published.forEach((article, index) => { |
| const card = createArticleCard(article); |
| |
| |
| if (index < 3) { |
| const featuredCard = card.cloneNode(true); |
| featuredCard.classList.add('bg-green-50', 'border-l-4', 'border-green-500'); |
| featuredContainer.appendChild(featuredCard); |
| } |
| |
| articlesContainer.appendChild(card); |
| }); |
| } |
| |
| function createArticleCard(article) { |
| const card = document.createElement('div'); |
| card.className = 'bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover'; |
| |
| card.innerHTML = ` |
| ${article.imageUrl ? ` |
| <div class="h-48 overflow-hidden"> |
| <img src="${article.imageUrl}" alt="${article.title}" class="w-full h-full object-cover preview-image"> |
| </div> |
| ` : ''} |
| |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"> |
| ${article.category} |
| </span> |
| <span class="text-sm text-gray-500">${formatDate(article.date)}</span> |
| </div> |
| |
| <h3 class="text-xl font-bold text-green-900 mb-2">${article.title}</h3> |
| <p class="text-sm text-gray-600 mb-3">Por <span class="font-medium">${article.author}</span></p> |
| |
| <p class="text-gray-700 mb-3">${article.lide}</p> |
| |
| <button class="text-green-600 hover:text-green-800 font-medium text-sm transition"> |
| Ler mais <i class="fas fa-arrow-right ml-1"></i> |
| </button> |
| </div> |
| `; |
| |
| return card; |
| } |
| |
| function createWelcome() { |
| published.push({ |
| title: 'Bem-vindo ao Jornal Oliveira!', |
| author: 'Equipe', |
| date: new Date().toISOString(), |
| category: 'Notícias da Escola', |
| lide: 'Este é o primeiro artigo do nosso jornal escolar digital.', |
| desenvolvimento: 'Aqui você encontrará as últimas notícias, eventos e artigos escritos por alunos para alunos. Nosso objetivo é manter toda a comunidade escolar informada e engajada.', |
| conclusao: 'Participe você também! Envie suas matérias e faça parte deste projeto.', |
| imageUrl: '' |
| }); |
| |
| localStorage.setItem('jo_published', JSON.stringify(published)); |
| } |
| |
| |
| function renderPending() { |
| const pendingList = document.getElementById('pendingList'); |
| pendingList.innerHTML = ''; |
| |
| if (!pending.length) { |
| pendingList.innerHTML = ` |
| <div class="bg-gray-100 rounded-lg p-6 text-center"> |
| <i class="fas fa-inbox text-4xl text-gray-400 mb-4"></i> |
| <p class="text-gray-600">Nenhuma matéria pendente no momento.</p> |
| </div> |
| `; |
| return; |
| } |
| |
| pending.forEach((article, index) => { |
| const card = document.createElement('div'); |
| card.className = 'bg-white rounded-lg shadow-md overflow-hidden'; |
| |
| card.innerHTML = ` |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full mb-2"> |
| Pendente |
| </span> |
| <h3 class="text-xl font-bold text-green-900">${article.title}</h3> |
| </div> |
| <span class="text-sm text-gray-500">${formatDate(article.date)}</span> |
| </div> |
| |
| <div class="mb-4"> |
| <p class="text-sm text-gray-600 mb-1"><span class="font-medium">Autor:</span> ${article.author}</p> |
| <p class="text-sm text-gray-600"><span class="font-medium">Categoria:</span> ${article.category}</p> |
| </div> |
| |
| ${article.imageUrl ? ` |
| <div class="mb-4"> |
| <img src="${article.imageUrl}" alt="${article.title}" class="max-h-40 mx-auto rounded-lg"> |
| </div> |
| ` : ''} |
| |
| <div class="mb-4"> |
| <h4 class="font-medium text-gray-800 mb-1">Lide:</h4> |
| <p class="text-gray-700 text-sm">${article.lide}</p> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="cmt${index}" class="block text-sm font-medium text-gray-700 mb-1">Comentário:</label> |
| <textarea id="cmt${index}" rows="2" placeholder="Digite seu comentário..." |
| class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition text-sm"></textarea> |
| </div> |
| |
| <div class="flex justify-end space-x-3"> |
| <button onclick="reject(${index})" class="bg-red-100 hover:bg-red-200 text-red-700 px-4 py-2 rounded-lg transition text-sm"> |
| <i class="fas fa-times mr-1"></i> Recusar |
| </button> |
| <button onclick="approve(${index})" class="bg-green-100 hover:bg-green-200 text-green-700 px-4 py-2 rounded-lg transition text-sm"> |
| <i class="fas fa-check mr-1"></i> Aprovar |
| </button> |
| </div> |
| </div> |
| `; |
| |
| pendingList.appendChild(card); |
| }); |
| } |
| |
| |
| function approve(index) { |
| const article = pending[index]; |
| const comment = document.getElementById(`cmt${index}`).value; |
| |
| |
| article.approvedBy = currentUser.name; |
| article.approvedAt = new Date().toISOString(); |
| article.editorComment = comment; |
| |
| |
| published.push(article); |
| pending.splice(index, 1); |
| |
| |
| notifications.push({ |
| message: `Sua matéria "${article.title}" foi aprovada! ${comment ? `Comentário: ${comment}` : ''}`, |
| read: false, |
| date: new Date().toISOString(), |
| type: 'approval', |
| recipient: article.submittedBy |
| }); |
| |
| saveAll(); |
| renderPending(); |
| renderHome(); |
| updateNotificationBadge(); |
| } |
| |
| |
| function reject(index) { |
| const article = pending[index]; |
| const comment = document.getElementById(`cmt${index}`).value; |
| |
| if (!comment) { |
| alert('Por favor, forneça um motivo para a recusa.'); |
| return; |
| } |
| |
| |
| article.rejectedBy = currentUser.name; |
| article.rejectedAt = new Date().toISOString(); |
| article.rejectionReason = comment; |
| |
| |
| pending.splice(index, 1); |
| |
| |
| notifications.push({ |
| message: `Sua matéria "${article.title}" foi recusada. Motivo: ${comment}`, |
| read: false, |
| date: new Date().toISOString(), |
| type: 'rejection', |
| recipient: article.submittedBy |
| }); |
| |
| saveAll(); |
| renderPending(); |
| updateNotificationBadge(); |
| } |
| |
| |
| function renderNotifications() { |
| const notificationList = document.getElementById('notificationList'); |
| notificationList.innerHTML = ''; |
| |
| if (!notifications.length) { |
| notificationList.innerHTML = ` |
| <div class="bg-gray-100 rounded-lg p-6 text-center"> |
| <i class="fas fa-bell-slash text-4xl text-gray-400 mb-4"></i> |
| <p class="text-gray-600">Nenhuma notificação no momento.</p> |
| </div> |
| `; |
| return; |
| } |
| |
| |
| let userNotifications = notifications; |
| if (currentUser.role !== 'editor') { |
| userNotifications = notifications.filter(n => n.recipient === currentUser.name); |
| } |
| |
| |
| userNotifications.sort((a, b) => new Date(b.date) - new Date(a.date)); |
| |
| userNotifications.forEach((notification, index) => { |
| const notificationElement = document.createElement('div'); |
| notificationElement.className = `bg-white rounded-lg shadow-sm p-4 ${!notification.read ? 'notification-unread' : ''}`; |
| |
| notificationElement.innerHTML = ` |
| <div class="flex justify-between items-start"> |
| <div class="flex-1"> |
| <p class="text-gray-800">${notification.message}</p> |
| <p class="text-xs text-gray-500 mt-1">${formatDate(notification.date)}</p> |
| </div> |
| <button onclick="markAsRead(${index})" class="ml-2 text-gray-400 hover:text-gray-600 transition"> |
| <i class="fas fa-check-circle"></i> |
| </button> |
| </div> |
| `; |
| |
| notificationList.appendChild(notificationElement); |
| }); |
| } |
| |
| |
| function markAsRead(index) { |
| notifications[index].read = true; |
| localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
| updateNotificationBadge(); |
| renderNotifications(); |
| } |
| |
| |
| markAllRead.addEventListener('click', () => { |
| notifications.forEach(n => n.read = true); |
| localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
| updateNotificationBadge(); |
| renderNotifications(); |
| }); |
| |
| |
| function updateNotificationBadge() { |
| let unreadCount = 0; |
| |
| if (currentUser) { |
| if (currentUser.role === 'editor') { |
| unreadCount = notifications.filter(n => !n.read).length; |
| } else { |
| unreadCount = notifications.filter(n => !n.read && n.recipient === currentUser.name).length; |
| } |
| } |
| |
| if (unreadCount > 0) { |
| notificationBadge.textContent = unreadCount; |
| notificationBadge.classList.remove('hidden'); |
| } else { |
| notificationBadge.classList.add('hidden'); |
| } |
| } |
| |
| |
| function saveAll() { |
| localStorage.setItem('jo_published', JSON.stringify(published)); |
| localStorage.setItem('jo_pending', JSON.stringify(pending)); |
| localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
| } |
| |
| |
| function formatDate(dateString) { |
| const options = { year: 'numeric', month: 'long', day: 'numeric' }; |
| return new Date(dateString).toLocaleDateString('pt-BR', options); |
| } |
| |
| |
| function renderAll() { |
| renderHome(); |
| renderPending(); |
| renderNotifications(); |
| } |
| |
| |
| updateNotificationBadge(); |
| </script> |
| <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=Rwhehhehe/sim" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
