|
|
<!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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #354C2B; |
|
|
--secondary: #A4B17B; |
|
|
--accent: #4E653D; |
|
|
--light: #F8F8F8; |
|
|
--dark: #20331B; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Open Sans', sans-serif; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
font-family: 'Merriweather', serif; |
|
|
} |
|
|
|
|
|
.article-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.tab-indicator { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
height: 3px; |
|
|
background-color: var(--accent); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.notification-dot { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
right: -5px; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background-color: #EF4444; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.markdown-content p { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.markdown-content h3 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: bold; |
|
|
margin: 1.5rem 0 1rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<header class="bg-[var(--primary)] 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-[var(--secondary)] italic">Feito de alunos para alunos</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button id="loginBtn" class="bg-[var(--accent)] hover:bg-[#3a5530] text-white px-4 py-2 rounded-lg transition"> |
|
|
<i class="fas fa-user mr-2"></i>Entrar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-10"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="relative flex overflow-x-auto"> |
|
|
<div class="flex space-x-1"> |
|
|
<button data-tab="home" class="tab-btn active relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition"> |
|
|
<i class="fas fa-home mr-2"></i>Início |
|
|
</button> |
|
|
<button data-tab="enviar" class="tab-btn restricted relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition"> |
|
|
<i class="fas fa-paper-plane mr-2"></i>Enviar |
|
|
</button> |
|
|
<button data-tab="pendentes" class="tab-btn restricted relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition"> |
|
|
<i class="fas fa-clock mr-2"></i>Pendentes |
|
|
<span id="pendingCount" class="hidden ml-2 bg-[var(--accent)] text-white text-xs font-bold px-2 py-1 rounded-full">0</span> |
|
|
</button> |
|
|
<button data-tab="notificacoes" class="tab-btn restricted relative px-6 py-4 font-medium text-gray-700 hover:text-[var(--primary)] transition"> |
|
|
<i class="fas fa-bell mr-2"></i>Notificações |
|
|
<span id="notificationCount" class="hidden ml-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">0</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="tab-indicator"></div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<section id="home" class="content-section active fade-in"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h2 class="text-2xl font-bold text-[var(--primary)]">Últimas Notícias</h2> |
|
|
<div class="relative"> |
|
|
<select id="categoryFilter" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"> |
|
|
<option value="Todas">Todas Categorias</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 class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="articles" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="noArticles" class="hidden text-center py-12"> |
|
|
<i class="fas fa-newspaper text-5xl text-gray-300 mb-4"></i> |
|
|
<h3 class="text-xl font-medium text-gray-500">Nenhuma matéria encontrada</h3> |
|
|
<p class="text-gray-400">Seja o primeiro a publicar uma matéria!</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="enviar" class="content-section restricted fade-in"> |
|
|
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> |
|
|
<h2 class="text-2xl font-bold text-[var(--primary)] mb-6"> |
|
|
<i class="fas fa-pen-alt 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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Digite o título da matéria" required> |
|
|
</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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Seu nome" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="artDate" class="block text-sm font-medium text-gray-700 mb-1">Data</label> |
|
|
<input id="artDate" type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" required> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="artCat" class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> |
|
|
<select id="artCat" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" required> |
|
|
<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">O quê, quem, quando, onde, como e por quê.</p> |
|
|
<textarea id="artLide" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Resumo inicial da matéria" required></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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Corpo principal da matéria" required></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">Encerramento, reflexões finais.</p> |
|
|
<textarea id="artConc" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Finalização da matéria" required></textarea> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="artImage" class="block text-sm font-medium text-gray-700 mb-1">Imagem de Capa (Opcional)</label> |
|
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> |
|
|
<div class="space-y-1 text-center"> |
|
|
<div class="flex text-sm text-gray-600"> |
|
|
<label for="artImage" class="relative cursor-pointer bg-white rounded-md font-medium text-[var(--accent)] hover:text-[var(--primary)] focus-within:outline-none"> |
|
|
<span>Carregar arquivo</span> |
|
|
<input id="artImage" type="file" class="sr-only" accept="image/*"> |
|
|
</label> |
|
|
<p class="pl-1">ou arraste e solte</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">PNG, JPG, GIF até 5MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<div id="imagePreview" class="hidden mt-2"> |
|
|
<img id="previewImage" src="#" alt="Preview" class="max-h-48 rounded-lg"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button type="submit" class="w-full bg-[var(--accent)] hover:bg-[#3a5530] text-white font-medium py-2 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! |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pendentes" class="content-section restricted fade-in"> |
|
|
<h2 class="text-2xl font-bold text-[var(--primary)] mb-6"> |
|
|
<i class="fas fa-clock mr-2"></i>Matérias Pendentes |
|
|
</h2> |
|
|
|
|
|
<div id="pendingList" class="space-y-6"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="noPending" class="hidden text-center py-12"> |
|
|
<i class="fas fa-check-circle text-5xl text-gray-300 mb-4"></i> |
|
|
<h3 class="text-xl font-medium text-gray-500">Nenhuma matéria pendente</h3> |
|
|
<p class="text-gray-400">Todas as matérias foram revisadas</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="notificacoes" class="content-section restricted fade-in"> |
|
|
<h2 class="text-2xl font-bold text-[var(--primary)] mb-6"> |
|
|
<i class="fas fa-bell mr-2"></i>Notificações |
|
|
</h2> |
|
|
|
|
|
<div id="notificationList" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div id="noNotifications" class="hidden text-center py-12"> |
|
|
<i class="fas fa-bell-slash text-5xl text-gray-300 mb-4"></i> |
|
|
<h3 class="text-xl font-medium text-gray-500">Nenhuma notificação</h3> |
|
|
<p class="text-gray-400">Você não tem notificações no momento</p> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-[var(--primary)] text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<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-[var(--secondary)] italic">Feito de alunos para alunos</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="hover:text-[var(--secondary)] transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="hover:text-[var(--secondary)] transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="hover:text-[var(--secondary)] transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 pt-6 border-t border-[var(--secondary)] text-center 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 w-full max-w-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-[var(--primary)]">Entrar no 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="username" class="block text-sm font-medium text-gray-700 mb-1">Nome de Usuário</label> |
|
|
<input id="username" type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Digite seu usuário" required> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Senha</label> |
|
|
<input id="password" type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]" placeholder="Digite sua senha" required> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<button type="submit" class="w-full bg-[var(--accent)] hover:bg-[#3a5530] text-white font-medium py-2 px-4 rounded-lg transition"> |
|
|
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>Usuário ou senha incorretos |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="articleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-4xl my-8"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 id="modalTitle" class="text-2xl font-bold text-[var(--primary)]"></h3> |
|
|
<div class="flex items-center mt-2 text-sm text-gray-600"> |
|
|
<span id="modalAuthor" class="font-medium"></span> |
|
|
<span class="mx-2">•</span> |
|
|
<span id="modalDate"></span> |
|
|
<span class="mx-2">•</span> |
|
|
<span id="modalCategory" class="px-2 py-1 bg-gray-100 rounded-full text-xs"></span> |
|
|
</div> |
|
|
</div> |
|
|
<button id="closeArticleModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="modalImageContainer" class="hidden mb-6"> |
|
|
<img id="modalImage" src="#" alt="Article Image" class="w-full h-64 object-cover rounded-lg"> |
|
|
</div> |
|
|
|
|
|
<div id="modalContent" class="markdown-content space-y-4"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let authUsers = JSON.parse(localStorage.getItem('jo_users')) || [ |
|
|
{ username: 'admin', password: 'admin123', role: 'admin' }, |
|
|
{ username: 'editor', password: 'editor123', role: 'editor' }, |
|
|
{ username: 'reporter', password: 'reporter123', role: 'reporter' } |
|
|
]; |
|
|
|
|
|
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; |
|
|
let isLoggedIn = false; |
|
|
|
|
|
|
|
|
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 articleModal = document.getElementById('articleModal'); |
|
|
const closeArticleModal = document.getElementById('closeArticleModal'); |
|
|
const categoryFilter = document.getElementById('categoryFilter'); |
|
|
const imagePreview = document.getElementById('imagePreview'); |
|
|
const previewImage = document.getElementById('previewImage'); |
|
|
const artImage = document.getElementById('artImage'); |
|
|
const pendingCount = document.getElementById('pendingCount'); |
|
|
const notificationCount = document.getElementById('notificationCount'); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
updateCounts(); |
|
|
renderHome(); |
|
|
renderPending(); |
|
|
renderNotifications(); |
|
|
|
|
|
|
|
|
|
|
|
if (localStorage.getItem('jo_currentUser')) { |
|
|
currentUser = JSON.parse(localStorage.getItem('jo_currentUser')); |
|
|
isLoggedIn = true; |
|
|
updateAuthUI(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
loginBtn.addEventListener('click', () => { |
|
|
if (isLoggedIn) { |
|
|
logout(); |
|
|
} else { |
|
|
loginModal.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
loginModal.classList.add('hidden'); |
|
|
loginError.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
closeArticleModal.addEventListener('click', () => { |
|
|
articleModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
loginForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const username = document.getElementById('username').value; |
|
|
const password = document.getElementById('password').value; |
|
|
|
|
|
const user = authUsers.find(u => u.username === username && u.password === password); |
|
|
|
|
|
if (user) { |
|
|
currentUser = user; |
|
|
isLoggedIn = true; |
|
|
localStorage.setItem('jo_currentUser', JSON.stringify(user)); |
|
|
loginModal.classList.add('hidden'); |
|
|
loginError.classList.add('hidden'); |
|
|
updateAuthUI(); |
|
|
} else { |
|
|
loginError.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
categoryFilter.addEventListener('change', () => { |
|
|
renderHome(categoryFilter.value); |
|
|
}); |
|
|
|
|
|
artImage.addEventListener('change', function() { |
|
|
if (this.files && this.files[0]) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
imagePreview.classList.remove('hidden'); |
|
|
previewImage.src = e.target.result; |
|
|
} |
|
|
reader.readAsDataURL(this.files[0]); |
|
|
} else { |
|
|
imagePreview.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
if (tab.classList.contains('restricted') && !isLoggedIn) { |
|
|
loginModal.classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(t => t.classList.remove('active')); |
|
|
tab.classList.add('active'); |
|
|
|
|
|
|
|
|
const indicator = document.querySelector('.tab-indicator'); |
|
|
indicator.style.width = `${tab.offsetWidth}px`; |
|
|
indicator.style.left = `${tab.offsetLeft}px`; |
|
|
|
|
|
|
|
|
const tabId = tab.getAttribute('data-tab'); |
|
|
document.querySelectorAll('.content-section').forEach(section => { |
|
|
section.classList.remove('active'); |
|
|
if (section.id === tabId) { |
|
|
section.classList.add('active'); |
|
|
section.classList.add('fade-in'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('formEnviar').addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const fields = ['Title', 'Author', 'Date', 'Cat', 'Lide', 'Dev', 'Conc'].map(f => |
|
|
document.getElementById('art' + f) |
|
|
); |
|
|
|
|
|
if (fields.slice(0, 6).some(inp => !inp.value.trim())) { |
|
|
alert('Preencha todos os campos obrigatórios!'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const newArticle = { |
|
|
title: fields[0].value, |
|
|
author: fields[1].value, |
|
|
date: fields[2].value, |
|
|
category: document.getElementById('artCat').value, |
|
|
lide: fields[4].value, |
|
|
desenvolvimento: fields[5].value, |
|
|
conclusao: fields[6].value, |
|
|
imageUrl: '' |
|
|
}; |
|
|
|
|
|
if (artImage.files.length) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (e) => { |
|
|
newArticle.imageUrl = e.target.result; |
|
|
savePendingArticle(newArticle); |
|
|
}; |
|
|
reader.readAsDataURL(artImage.files[0]); |
|
|
} else { |
|
|
savePendingArticle(newArticle); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function logout() { |
|
|
currentUser = null; |
|
|
isLoggedIn = false; |
|
|
localStorage.removeItem('jo_currentUser'); |
|
|
updateAuthUI(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.content-section.restricted.active').forEach(section => { |
|
|
section.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('home').classList.add('active'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(tab => tab.classList.remove('active')); |
|
|
document.querySelector('[data-tab="home"]').classList.add('active'); |
|
|
} |
|
|
|
|
|
function updateAuthUI() { |
|
|
if (isLoggedIn) { |
|
|
loginBtn.innerHTML = `<i class="fas fa-sign-out-alt mr-2"></i>Sair`; |
|
|
document.querySelectorAll('.restricted').forEach(el => el.classList.remove('restricted')); |
|
|
|
|
|
|
|
|
if (currentUser.role === 'admin' || currentUser.role === 'editor') { |
|
|
updateCounts(); |
|
|
} |
|
|
} else { |
|
|
loginBtn.innerHTML = `<i class="fas fa-user mr-2"></i>Entrar`; |
|
|
document.querySelectorAll('.restricted').forEach(el => el.classList.add('restricted')); |
|
|
pendingCount.classList.add('hidden'); |
|
|
notificationCount.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateCounts() { |
|
|
if (currentUser && (currentUser.role === 'admin' || currentUser.role === 'editor')) { |
|
|
|
|
|
if (pending.length > 0) { |
|
|
pendingCount.textContent = pending.length; |
|
|
pendingCount.classList.remove('hidden'); |
|
|
} else { |
|
|
pendingCount.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
const unreadNotifications = notifications.filter(n => !n.read).length; |
|
|
if (unreadNotifications > 0) { |
|
|
notificationCount.textContent = unreadNotifications; |
|
|
notificationCount.classList.remove('hidden'); |
|
|
} else { |
|
|
notificationCount.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function savePendingArticle(article) { |
|
|
pending.push(article); |
|
|
localStorage.setItem('jo_pending', JSON.stringify(pending)); |
|
|
|
|
|
|
|
|
if (currentUser && (currentUser.role === 'admin' || currentUser.role === 'editor')) { |
|
|
notifications.unshift({ |
|
|
type: 'new', |
|
|
message: `Nova matéria "${article.title}" enviada para aprovação.`, |
|
|
author: article.author, |
|
|
date: new Date().toISOString(), |
|
|
read: false |
|
|
}); |
|
|
localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('formEnviar').reset(); |
|
|
imagePreview.classList.add('hidden'); |
|
|
|
|
|
|
|
|
const successMessage = document.getElementById('successMessage'); |
|
|
successMessage.classList.remove('hidden'); |
|
|
setTimeout(() => successMessage.classList.add('hidden'), 3000); |
|
|
|
|
|
|
|
|
updateCounts(); |
|
|
renderPending(); |
|
|
} |
|
|
|
|
|
function renderHome(filter = 'Todas') { |
|
|
const container = document.getElementById('articles'); |
|
|
const noArticles = document.getElementById('noArticles'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
let articlesToShow = published; |
|
|
if (filter !== 'Todas') { |
|
|
articlesToShow = published.filter(a => a.category === filter); |
|
|
} |
|
|
|
|
|
if (!articlesToShow.length) { |
|
|
noArticles.classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
noArticles.classList.add('hidden'); |
|
|
articlesToShow.sort((a, b) => new Date(b.date) - new Date(a.date)); |
|
|
|
|
|
articlesToShow.forEach(article => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'article-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg'; |
|
|
card.innerHTML = ` |
|
|
${article.imageUrl ? `<img src="${article.imageUrl}" alt="${article.title}" class="w-full h-48 object-cover">` : ''} |
|
|
<div class="p-6"> |
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold bg-[var(--secondary)] text-[var(--primary)] rounded-full mb-2">${article.category}</span> |
|
|
<h3 class="text-xl font-bold mb-2 line-clamp-2">${article.title}</h3> |
|
|
<p class="text-gray-600 text-sm mb-4 line-clamp-3">${article.lide}</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm text-gray-500">${formatDate(article.date)}</span> |
|
|
<button onclick="openArticleModal('${article.title}')" class="text-sm font-medium text-[var(--accent)] hover:text-[var(--primary)] transition"> |
|
|
Ler mais <i class="fas fa-arrow-right ml-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
function renderPending() { |
|
|
const container = document.getElementById('pendingList'); |
|
|
const noPending = document.getElementById('noPending'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
if (!pending.length) { |
|
|
noPending.classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
noPending.classList.add('hidden'); |
|
|
|
|
|
pending.forEach((article, index) => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'bg-white rounded-xl shadow-md overflow-hidden'; |
|
|
card.innerHTML = ` |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold">${article.title}</h3> |
|
|
<div class="flex items-center mt-1 text-sm text-gray-600"> |
|
|
<span class="font-medium">${article.author}</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>${formatDate(article.date)}</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span class="px-2 py-1 bg-gray-100 rounded-full text-xs">${article.category}</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
${article.imageUrl ? `<img src="${article.imageUrl}" alt="${article.title}" class="w-full h-48 object-cover rounded-lg mb-4">` : ''} |
|
|
|
|
|
<div class="space-y-4 mb-4"> |
|
|
<div> |
|
|
<h4 class="font-medium text-sm text-gray-700 mb-1">Lide</h4> |
|
|
<p class="text-gray-600">${article.lide}</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium text-sm text-gray-700 mb-1">Desenvolvimento</h4> |
|
|
<p class="text-gray-600 line-clamp-3">${article.desenvolvimento}</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium text-sm text-gray-700 mb-1">Conclusão</h4> |
|
|
<p class="text-gray-600">${article.conclusao}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-200"> |
|
|
<textarea id="cmt${index}" rows="2" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)] mb-3" placeholder="Adicione um comentário (opcional)"></textarea> |
|
|
|
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button onclick="rejectArticle(${index})" class="bg-red-100 hover:bg-red-200 text-red-700 font-medium py-2 px-4 rounded-lg transition"> |
|
|
<i class="fas fa-times mr-2"></i>Recusar |
|
|
</button> |
|
|
<button onclick="approveArticle(${index})" class="bg-green-100 hover:bg-green-200 text-green-700 font-medium py-2 px-4 rounded-lg transition"> |
|
|
<i class="fas fa-check mr-2"></i>Aprovar |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
function renderNotifications() { |
|
|
const container = document.getElementById('notificationList'); |
|
|
const noNotifications = document.getElementById('noNotifications'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
if (!notifications.length) { |
|
|
noNotifications.classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
noNotifications.classList.add('hidden'); |
|
|
|
|
|
notifications.forEach((notification, index) => { |
|
|
const notificationEl = document.createElement('div'); |
|
|
notificationEl.className = `p-4 rounded-lg border ${notification.read ? 'bg-white border-gray-200' : 'bg-blue-50 border-blue-200'}`; |
|
|
|
|
|
notificationEl.innerHTML = ` |
|
|
<div class="flex justify-between items-start"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center mb-1"> |
|
|
<span class="font-medium ${notification.read ? 'text-gray-700' : 'text-blue-700'}"> |
|
|
${notification.type === 'approved' ? 'Matéria Aprovada' : |
|
|
notification.type === 'rejected' ? 'Matéria Recusada' : 'Nova Matéria'} |
|
|
</span> |
|
|
<span class="mx-2 text-gray-400">•</span> |
|
|
<span class="text-sm ${notification.read ? 'text-gray-500' : 'text-blue-500'}">${formatDate(notification.date)}</span> |
|
|
</div> |
|
|
<p class="${notification.read ? 'text-gray-600' : 'text-blue-600'}">${notification.message}</p> |
|
|
${notification.author ? `<p class="text-xs mt-2 ${notification.read ? 'text-gray-500' : 'text-blue-500'}">Autor: ${notification.author}</p>` : ''} |
|
|
</div> |
|
|
<button onclick="markAsRead(${index})" class="ml-2 text-gray-400 hover:text-gray-600"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(notificationEl); |
|
|
}); |
|
|
} |
|
|
|
|
|
function approveArticle(index) { |
|
|
const article = pending[index]; |
|
|
const comment = document.getElementById(`cmt${index}`).value; |
|
|
|
|
|
|
|
|
published.unshift(article); |
|
|
localStorage.setItem('jo_published', JSON.stringify(published)); |
|
|
|
|
|
|
|
|
pending.splice(index, 1); |
|
|
localStorage.setItem('jo_pending', JSON.stringify(pending)); |
|
|
|
|
|
|
|
|
notifications.unshift({ |
|
|
type: 'approved', |
|
|
message: `Sua matéria "${article.title}" foi aprovada.${comment ? ' Comentário: ' + comment : ''}`, |
|
|
author: article.author, |
|
|
date: new Date().toISOString(), |
|
|
read: false |
|
|
}); |
|
|
localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
|
|
|
|
|
|
|
|
updateCounts(); |
|
|
renderPending(); |
|
|
renderHome(); |
|
|
renderNotifications(); |
|
|
} |
|
|
|
|
|
function rejectArticle(index) { |
|
|
const article = pending[index]; |
|
|
const comment = document.getElementById(`cmt${index}`).value || 'Sem comentários adicionais'; |
|
|
|
|
|
|
|
|
pending.splice(index, 1); |
|
|
localStorage.setItem('jo_pending', JSON.stringify(pending)); |
|
|
|
|
|
|
|
|
notifications.unshift({ |
|
|
type: 'rejected', |
|
|
message: `Sua matéria "${article.title}" foi recusada. Motivo: ${comment}`, |
|
|
author: article.author, |
|
|
date: new Date().toISOString(), |
|
|
read: false |
|
|
}); |
|
|
localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
|
|
|
|
|
|
|
|
updateCounts(); |
|
|
renderPending(); |
|
|
renderNotifications(); |
|
|
} |
|
|
|
|
|
function markAsRead(index) { |
|
|
notifications[index].read = true; |
|
|
localStorage.setItem('jo_notifications', JSON.stringify(notifications)); |
|
|
updateCounts(); |
|
|
renderNotifications(); |
|
|
} |
|
|
|
|
|
function openArticleModal(title) { |
|
|
const article = published.find(a => a.title === title); |
|
|
if (!article) return; |
|
|
|
|
|
document.getElementById('modalTitle').textContent = article.title; |
|
|
document.getElementById('modalAuthor').textContent = article.author; |
|
|
document.getElementById('modalDate').textContent = formatDate(article.date); |
|
|
document.getElementById('modalCategory').textContent = article.category; |
|
|
|
|
|
const imageContainer = document.getElementById('modalImageContainer'); |
|
|
const modalImage = document.getElementById('modalImage'); |
|
|
if (article.imageUrl) { |
|
|
imageContainer.classList.remove('hidden'); |
|
|
modalImage.src = article.imageUrl; |
|
|
} else { |
|
|
imageContainer.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
const modalContent = document.getElementById('modalContent'); |
|
|
modalContent.innerHTML = ` |
|
|
<h3 class="text-lg font-bold text-[var(--primary)] mb-2">Lide</h3> |
|
|
<p>${article.lide}</p> |
|
|
|
|
|
<h3 class="text-lg font-bold text-[var(--primary)] mb-2">Desenvolvimento</h3> |
|
|
<p>${article.desenvolvimento}</p> |
|
|
|
|
|
<h3 class="text-lg font-bold text-[var(--primary)] mb-2">Conclusão</h3> |
|
|
<p>${article.conclusao}</p> |
|
|
`; |
|
|
|
|
|
articleModal.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function formatDate(dateString) { |
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric' }; |
|
|
return new Date(dateString).toLocaleDateString('pt-BR', options); |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
const activeTab = document.querySelector('.tab-btn.active'); |
|
|
if (activeTab) { |
|
|
const indicator = document.querySelector('.tab-indicator'); |
|
|
indicator.style.width = `${activeTab.offsetWidth}px`; |
|
|
indicator.style.left = `${activeTab.offsetLeft}px`; |
|
|
} |
|
|
}); |
|
|
</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/foi-g" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
