| <!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; --footer-bg: #20331B; --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; } nav .tab { background-color: var(--card-bg); color: var(--text-main); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } nav .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 { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; } .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; } </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> <!-- Seções --> <section id="home" class="content-section active"> <div id="articles"></div> </section> <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: encerramento, reflexões finais." required></textarea> <input id="artImage" type="file" accept="image/*"> <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> <section id="pendentes" class="content-section restricted"> <h2>Matérias Pendentes</h2> <div id="pendingList"></div> </section> <section id="notificacoes" class="content-section restricted"> <h2>Notificações</h2> <div id="notificationList"></div> </section> <footer> <p>Jornal Oliveira © 2025</p> </footer><script> // Dados let authUsers = JSON.parse(localStorage.getItem('jo_users')) || []; let pending = JSON.parse(localStorage.getItem('jo_pending') || '[]'); let published = JSON.parse(localStorage.getItem('jo_published') || '[]'); let notifications = JSON.parse(localStorage.getItem('jo_notifications') || '[]'); // Simulação de login já realizado // Em sua implementação real, use o sistema de login anterior // Render Home function renderHome(filter='Todas') { const container = document.getElementById('articles'); container.innerHTML = ''; let list = published; if (filter!=='Todas') list = published.filter(a=>a.category===filter); if (!list.length) { container.innerHTML='<p>Nenhuma matéria.</p>'; return; } list.sort((a,b)=>new Date(b.date)-new Date(a.date)); list.forEach(a=>{ const card=document.createElement('div');card.className='card'; card.innerHTML=`<h3>${a.title}</h3><p><strong>${a.author}</strong> - ${a.date}</p><p><em>${a.category}</em></p><p>${a.lide}</p>`; container.appendChild(card); }); } // Envio de matéria const form = document.getElementById('formEnviar'); form.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!');return;} const reader = new FileReader(); const data={ title:fields[0].value, author:fields[1].value, date:fields[2].value, category:document.getElementById('artCat').value, lide:document.getElementById('artLide').value, desenvolvimento:document.getElementById('artDev').value, conclusao:document.getElementById('artConc').value, imageUrl:'' }; if(document.getElementById('artImage').files.length){ reader.onload=e2=>{ data.imageUrl=e2.target.result; savePending(data); }; reader.readAsDataURL(document.getElementById('artImage').files[0]); } else savePending(data); }); function savePending(data){ pending.push(data); localStorage.setItem('jo_pending',JSON.stringify(pending)); document.getElementById('formEnviar').reset(); 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}</p><p><em>${a.category}</em></p> <p>${a.lide}</p><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({type:'approved',message:Matéria "${a.title}" aprovada.,author:a.author}); saveAll(); renderPending(); renderNot(); renderHome(); } function reject(i){ const a=pending[i]; const cmt=document.getElementById('cmt'+i).value; pending.splice(i,1); notifications.push({type:'rejected',message:Matéria "${a.title}" recusada. Motivo: ${cmt},author:a.author}); saveAll(); renderPending(); renderNot(); } 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 renderNot(){ const n=document.getElementById('notificationList');n.innerHTML=''; notifications.forEach(x=>{ const d=document.createElement('div'); d.className='notification'; d.textContent=x.message; n.appendChild(d); }); } // Tabs 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'); }); // Init renderHome(); renderPending(); renderNot(); </script> </body> </html> |