|
|
<!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> |
