| <!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; --card-bg: #A4B17B; --card-bg-alt: #859864; --button-primary: #4E653D; --button-secondary: #697E50; --header-bg: #354C2B; --footer-bg: #20331B; --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, nav, footer { background-color: var(--header-bg); color: var(--text-light); text-align: center; padding: 1rem; } nav { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } nav .tab { background-color: var(--card-bg); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } nav .tab.active { background-color: var(--button-primary); color: var(--text-light); } section { display: none; padding: 1rem; } section.active { display: block; } .card { background-color: var(--card-bg); padding: 1rem; margin: 1rem auto; border-radius: 8px; max-width: 500px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } input, select, textarea, button { width: 100%; margin: 0.5rem 0; padding: 0.5rem; border-radius: 4px; border: 1px solid #ccc; font-size: 1rem; } button { background-color: var(--button-primary); color: var(--text-light); border: none; cursor: pointer; } button:hover { background-color: var(--button-secondary); } </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" data-tab="avaliar">Avaliar</div> <div class="tab" data-tab="sugestoes">Sugestões</div> </nav> <main> <section id="home" class="active"> <h2>Bem-vindo!</h2> <p>Explore as matérias feitas por nossos alunos!</p> </section> <section id="enviar" class="restricted"> <h2>Enviar Matéria</h2> <input id="artTitle" type="text" placeholder="Título"> <input id="artAuthor" type="text" placeholder="Autor"> <input id="artDate" type="date"> <select id="artCat"> <option value="">Selecione uma categoria</option> <option value="Cultura">Cultura</option> <option value="Esportes">Esportes</option> <option value="Opinião">Opinião</option> <option value="Notícias">Notícias</option> </select> <textarea id="artContent" rows="5" placeholder="Conteúdo da matéria"></textarea> <button id="btnSubmit">Enviar Matéria</button> </section> <section id="avaliar"> <h2>Avalie o Jornal</h2> <p>Deixe sua opinião!</p> <textarea id="evalComment" rows="3" placeholder="Seu comentário..."></textarea> <button id="btnEval">Enviar Avaliação</button> </section> <section id="sugestoes"> <h2>Envie uma Sugestão</h2> <textarea id="suggestText" rows="3" placeholder="Sua sugestão..."></textarea> <button id="btnSuggest">Enviar Sugestão</button> </section> <section id="login" class="card"> <h2>Login de Editor</h2> <input id="loginName" type="text" placeholder="Nome"> <input id="loginPass" type="password" placeholder="Senha"> <button id="btnLogin">Entrar</button> <small>Senha padrão: <strong>jornal Oliveira</strong></small> </section> </main> <footer> <p>Jornal Oliveira © 2025</p> </footer> <script> // Dados iniciais let authUsers = JSON.parse(localStorage.getItem('jo_users')) || [ { name: 'Mikael Silva', pass: 'Editor chefe 1' }, { name: 'Lorena Rangel', pass: 'Editor chefe 2' } ]; localStorage.setItem('jo_users', JSON.stringify(authUsers)); let isLogged = false; // Troca de abas document.querySelectorAll('.tab').forEach(tab => { tab.onclick = () => { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); tab.classList.add('active'); document.querySelectorAll('section').forEach(sec => sec.classList.remove('active')); document.getElementById(tab.dataset.tab).classList.add('active'); }; }); // Login document.getElementById('btnLogin').onclick = () => { const name = document.getElementById('loginName').value.trim(); const pass = document.getElementById('loginPass').value.trim(); const user = authUsers.find(u => u.name === name && u.pass === pass); if (user || pass === 'jornal Oliveira') { alert('Login bem-sucedido!'); isLogged = true; document.getElementById('login').style.display = 'none'; document.querySelectorAll('.restricted').forEach(tab => tab.style.display = 'block'); } else { alert('Nome ou senha incorretos.'); } }; // Enviar matéria document.getElementById('btnSubmit').onclick = () => { if (!isLogged) { alert('Você precisa estar logado para enviar uma matéria!'); return; } const title = document.getElementById('artTitle').value.trim(); const author = document.getElementById('artAuthor').value.trim(); const date = document.getElementById('artDate').value; const category = document.getElementById('artCat').value; const content = document.getElementById('artContent').value.trim(); if (!title || !author || !date || !category || !content) { alert('Preencha todos os campos!'); return; } let pending = JSON.parse(localStorage.getItem('jo_pending')) || []; pending.push({ title, author, date, category, content }); localStorage.setItem('jo_pending', JSON.stringify(pending)); alert('Matéria enviada para aprovação!'); document.getElementById('artTitle').value = ''; document.getElementById('artAuthor').value = ''; document.getElementById('artDate').value = ''; document.getElementById('artCat').value = ''; document.getElementById('artContent').value = ''; }; // Avaliação document.getElementById('btnEval').onclick = () => { alert('Obrigado pela sua avaliação!'); document.getElementById('evalComment').value = ''; }; // Sugestões document.getElementById('btnSuggest').onclick = () => { alert('Sugestão enviada!'); document.getElementById('suggestText').value = ''; }; // Esconde abas restritas no começo document.querySelectorAll('.restricted').forEach(tab => tab.style.display = 'none'); </script> </body> </html> |