Spaces:
Running
Running
| <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> | |
| body { font-family: Arial, sans-serif; margin: 20px; background: #f9f9f9; } | |
| header, footer { background: #003366; color: white; padding: 10px; text-align: center; } | |
| h1, h2 { color: #003366; } | |
| .categoria, .banco-materias, .formulario, .instagram { margin: 20px 0; } | |
| .formulario input, .formulario select, .formulario textarea { display: block; margin: 10px 0; width: 100%; padding: 8px; } | |
| .formulario button { padding: 10px 20px; background: #003366; color: white; border: none; cursor: pointer; } | |
| .materia { background: white; padding: 10px; border: 1px solid #ccc; margin-top: 10px; } | |
| .oculto { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Jornal Oliveira</h1> | |
| <p>O Jornal da Escola Fala Sobre Você!</p> | |
| </header> <section> | |
| <h2>Sobre o Jornal</h2> | |
| <p>No Jornal da Escola, destacamos os projetos dos alunos, suas conquistas, suas ideias e tudo o que acontece no nosso dia a dia. Aqui, cada estudante tem vez e voz!</p> | |
| <ul> | |
| <li>Entrevistas Exclusivas</li> | |
| <li>Opiniões de Estudantes</li> | |
| <li>Cultura & Arte</li> | |
| <li>Esportes</li> | |
| <li>Humor</li> | |
| <li>Você Sabia?</li> | |
| <li>Projetos e Grêmios</li> | |
| <li>Investigação</li> | |
| <li>Lá Fora</li> | |
| <li>Notícias da Escola</li> | |
| </ul> | |
| </section> <section class="formulario"> | |
| <h2>Envie sua Matéria</h2> | |
| <input type="text" id="autor" placeholder="Seu nome"> | |
| <select id="categoria"> | |
| <option value="Entrevistas">Entrevistas</option> | |
| <option value="Opinião">Opinião</option> | |
| <option value="Cultura e Arte">Cultura e Arte</option> | |
| <option value="Esportes">Esportes</option> | |
| <option value="Humor">Humor</option> | |
| <option value="Você Sabia?">Você Sabia?</option> | |
| <option value="Projetos e Grêmios">Projetos e Grêmios</option> | |
| <option value="Investigação">Investigação</option> | |
| <option value="Lá Fora">Lá Fora</option> | |
| <option value="Notícias da Escola">Notícias da Escola</option> | |
| </select> | |
| <textarea id="conteudo" rows="5" placeholder="Escreva sua matéria aqui..."></textarea> | |
| <button onclick="adicionarMateria()">Enviar</button> | |
| </section> <section class="banco-materias"> | |
| <h2>Banco de Matérias (Acesso Restrito)</h2> | |
| <input type="password" id="senha" placeholder="Digite a senha"> | |
| <button onclick="verificarSenha()">Acessar</button> | |
| <div id="listaMaterias" class="oculto"></div> | |
| </section> <section class="instagram"> | |
| <h2>Siga no Instagram</h2> | |
| <a href="https://www.instagram.com/jornal_oliveira?igsh=MW1nZGp4Zmw2YWNnbQ==" target="_blank">@jornal_oliveira</a> | |
| </section> <footer> | |
| <p>Feito por alunos, para alunos. Jornal Oliveira © 2025</p> | |
| </footer> <script> | |
| const materias = []; | |
| function adicionarMateria() { | |
| const autor = document.getElementById('autor').value; | |
| const categoria = document.getElementById('categoria').value; | |
| const conteudo = document.getElementById('conteudo').value; | |
| if (autor && categoria && conteudo) { | |
| materias.push({ autor, categoria, conteudo }); | |
| alert("Matéria enviada com sucesso!"); | |
| document.getElementById('autor').value = ''; | |
| document.getElementById('conteudo').value = ''; | |
| } else { | |
| alert("Preencha todos os campos."); | |
| } | |
| } | |
| function verificarSenha() { | |
| const senha = document.getElementById('senha').value; | |
| if (senha === "1903") { | |
| const lista = document.getElementById('listaMaterias'); | |
| lista.innerHTML = '<h3>Matérias Publicadas</h3>' + materias.map(m => | |
| `<div class='materia'><strong>${m.categoria}</strong><br><em>${m.autor}</em><p>${m.conteudo}</p></div>` | |
| ).join(''); | |
| lista.classList.remove('oculto'); | |
| } else { | |
| alert("Senha incorreta!"); | |
| } | |
| } | |
| </script></body> | |
| </html> |