| <!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> <style> :root { --bg-main: #C3CA92; --header-bg: #354C2B; --card-bg: #A4B17B; --card-bg-alt: #859864; --button-primary: #4E653D; --button-secondary: #697E50; --text-main: #20331B; --text-light: #FFFFFF; } * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: var(--bg-main); color: var(--text-main); font-family: Arial, sans-serif; } header { background-color: var(--header-bg); color: var(--text-light); padding: 1rem; text-align: center; } nav { background-color: var(--header-bg); display: flex; justify-content: center; gap: 0.5rem; padding: 0.5rem; } .tab { background-color: var(--card-bg); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; color: var(--text-main); } .tab.active { background-color: var(--button-primary); color: var(--text-light); } .content-section { display: none; padding: 1rem; } .content-section.active { display: block; } .card { background-color: var(--card-bg); padding: 1rem; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn { padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-right: 0.5rem; } .btn-primary { background-color: var(--button-primary); color: var(--text-light); } .btn-secondary { background-color: var(--button-secondary); color: var(--text-light); } table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; } th { background-color: var(--card-bg-alt); } .notification { background: #f8d7da; color: #721c24; padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 4px; } .hidden { display: none; } img.preview { max-width: 100%; height: auto; margin-top: 0.5rem; border-radius: 4px; } </style> </head> <body> <header> <h1>Jornal Oliveira</h1> <p>Feito de alunos para alunos</p> </header> <nav> <div class="tab active" data-tab="home">Início</div> <div class="tab restricted" data-tab="enviar">Enviar</div> <div class="tab restricted" data-tab="pendentes">Pendentes</div> <div class="tab restricted" data-tab="notificacoes">Notificações</div> </nav> <!-- Home --> <section id="home" class="content-section active"> <div id="articles"></div> </section> <!-- Enviar Matéria --> <section id="enviar" class="content-section restricted"> <h2>Enviar Matéria</h2> <form id="formEnviar"> <input id="artTitle" type="text" placeholder="Título da Matéria" required> <input id="artAuthor" type="text" placeholder="Autor" required> <input id="artDate" type="date" required> <select id="artCat" 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> <textarea id="artLide" rows="3" placeholder="Lide (o quê, quem, quando, onde, como e por quê)" required></textarea> <textarea id="artDev" rows="5" placeholder="Desenvolvimento (detalhes, contexto, explicações)" required></textarea> <textarea id="artConc" rows="3" placeholder="Conclusão (reflexões finais)" required></textarea> <input id="artImage" type="file" accept="image/*"> <img id="preview" class="preview hidden" alt="Pré-visualização"> <button type="submit" class="btn btn-primary">Enviar para Aprovação</button> </form> <p id="successMessage" class="hidden" style="color:green; margin-top:10px;">Sua matéria foi enviada para aprovação!</p> </section> <!-- Pendentes --> <section id="pendentes" class="content-section restricted"> <h2>Matérias Pendentes</h2> <div id="pendingList"></div> </section> <!-- Notificações --> <section id="notificacoes" class="content-section restricted"> <h2>Notificações</h2> <div id="notificationList"></div> </section> <footer> <p>Jornal Oliveira © 2025</p> </footer><script> // Inicialização 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; // Login simulado (substitua por seu sistema de login) function simulateLogin() { const name = prompt('Nome do editor:'); const pass = prompt('Senha:'); if (pass.toLowerCase() === 'jornal oliveira') { currentUser = { name, role: 'editor' }; } else { const user = authUsers.find(u => u.name.toLowerCase() === name.toLowerCase().trim() && u.pass === pass); if (user) currentUser = user; } if (!currentUser) { alert('Login falhou'); return; } document.querySelectorAll('.restricted').forEach(el => el.style.display = 'block'); renderAll(); } simulateLogin(); // Render Home function renderHome() { const container = document.getElementById('articles'); container.innerHTML = ''; if (!published.length) createWelcome(); published.sort((a,b) => new Date(b.date) - new Date(a.date)); published.forEach(a => { const card = document.createElement('div'); card.className = 'card'; card.innerHTML = ` <h3>${a.title}</h3> <p><strong>${a.author}</strong> - ${a.date} (<em>${a.category}</em>)</p> ${a.imageUrl ? `<img src="${a.imageUrl}" class="preview" alt="">` : ''} <p>${a.lide}</p> <p>${a.desenvolvimento}</p> <p>${a.conclusao}</p> `; container.appendChild(card); }); } function createWelcome() { published.push({ title: 'Bem-vindo ao Jornal Oliveira!', author:'Equipe', date: new Date().toLocaleDateString('pt-BR'), category:'Notícias da Escola', lide:'Este é nosso primeiro artigo.', desenvolvimento:'Aguarde novas matérias feitas por alunos.', conclusao:'Participe você também!', imageUrl:'' }); localStorage.setItem('jo_published', JSON.stringify(published)); } // Formulário de envio const previewImg = document.getElementById('preview'); document.getElementById('artImage').addEventListener('change', e=>{ const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = ev => { previewImg.src = ev.target.result; previewImg.classList.remove('hidden'); }; reader.readAsDataURL(file); }); document.getElementById('formEnviar').addEventListener('submit', e=>{ e.preventDefault(); const data = { 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: previewImg.src || '' }; pending.push(data); localStorage.setItem('jo_pending', JSON.stringify(pending)); document.getElementById('formEnviar').reset(); previewImg.classList.add('hidden'); document.getElementById('successMessage').classList.remove('hidden'); renderPending(); }); // Render Pendentes function renderPending() { const list = document.getElementById('pendingList'); list.innerHTML=''; pending.forEach((a,i) => { const c = document.createElement('div'); c.className='card'; c.innerHTML = ` <h3>${a.title}</h3> <p><strong>${a.author}</strong> - ${a.date} (<em>${a.category}</em>)</p> ${a.imageUrl ? `<img src="${a.imageUrl}" class="preview" alt="">` : ''} <textarea id="cmt${i}" rows="2" placeholder="Comentário"></textarea><button class="btn btn-primary" onclick="approve(${i})">Aprovar</button> <button class="btn btn-secondary" onclick="reject(${i})">Recusar</button> `; list.appendChild(c); }); } function approve(i) { const a = pending[i]; a.comment = document.getElementById('cmt'+i).value; published.push(a); pending.splice(i,1); notifications.push({ message:Sua matéria "${a.title}" foi aprovada! }); saveAll(); renderPending(); renderHome(); renderNotifications(); } function reject(i) { const a = pending[i]; const cmt = document.getElementById('cmt'+i).value; pending.splice(i,1); notifications.push({ message:Sua matéria "${a.title}" foi recusada. Motivo: ${cmt} }); saveAll(); renderPending(); renderNotifications(); } function saveAll() { localStorage.setItem('jo_published', JSON.stringify(published)); localStorage.setItem('jo_pending', JSON.stringify(pending)); localStorage.setItem('jo_notifications', JSON.stringify(notifications)); } // Render Notificações function renderNotifications() { const n = document.getElementById('notificationList'); n.innerHTML=''; notifications.forEach(nt => { const d = document.createElement('div'); d.className='notification'; d.textContent = nt.message; n.appendChild(d); }); } // Controle de abas function renderAll() { renderHome(); renderPending(); renderNotifications(); } document.querySelectorAll('.tab').forEach(t => t.onclick = () => { document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active')); t.classList.add('active'); document.querySelectorAll('.content-section').forEach(s=>s.classList.remove('active')); document.getElementById(t.dataset.tab).classList.add('active'); }); // Iniciar renderAll(); </script> </body> </html> |