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; | |
background-color: #f1f1f1; | |
margin: 0; | |
padding: 0; | |
} | |
header { | |
background-color: #222; | |
color: white; | |
padding: 15px; | |
text-align: center; | |
font-family: "Old English Text MT", serif; | |
font-size: 32px; | |
} | |
nav { | |
display: flex; | |
justify-content: center; | |
gap: 10px; | |
padding: 10px; | |
background-color: #444; | |
} | |
nav button { | |
padding: 10px; | |
background-color: white; | |
border: none; | |
cursor: pointer; | |
} | |
section { | |
padding: 20px; | |
} | |
.hidden { | |
display: none; | |
} | |
.article { | |
background-color: white; | |
padding: 10px; | |
margin-bottom: 10px; | |
border-radius: 8px; | |
} | |
.approved { | |
border-left: 4px solid green; | |
} | |
.editor-buttons button { | |
margin-right: 5px; | |
} | |
</style> | |
</head> | |
<body> | |
<header>Jornal Oliveira</header> <nav id="menu" class="hidden"> | |
<button onclick="showSection('inicio')">Início</button> | |
<button onclick="showSection('avaliacao')">Avaliação</button> | |
<button onclick="showSection('sugestoes')">Sugestões</button> | |
<button id="btnEnviar" class="hidden" onclick="showSection('enviar')">Enviar Matéria</button> | |
<button id="btnEditor" class="hidden" onclick="showSection('editor')">Painel do Editor</button> | |
</nav> <section id="login"> | |
<h2>Login</h2> | |
<input type="text" id="senha" placeholder="Digite a senha" /> | |
<button onclick="verificarSenha()">Entrar</button> | |
</section> <section id="inicio" class="hidden"> | |
<h2>Bem-vindo ao Jornal Oliveira</h2> | |
<div id="listaArtigos"></div> | |
</section> <section id="avaliacao" class="hidden"> | |
<h2>Avaliação</h2> | |
<textarea placeholder="Deixe sua avaliação"></textarea> | |
</section> <section id="sugestoes" class="hidden"> | |
<h2>Sugestões</h2> | |
<textarea placeholder="Deixe sua sugestão"></textarea> | |
</section> <section id="enviar" class="hidden"> | |
<h2>Enviar Matéria</h2> | |
<input type="text" id="titulo" placeholder="Título" /><br /> | |
<input type="text" id="lide" placeholder="Lide (resumo)" /><br /> | |
<textarea id="corpo" placeholder="Corpo da matéria"></textarea><br /> | |
<input type="text" id="autor" placeholder="Nome do autor" /><br /> | |
<input type="text" id="participantes" placeholder="Outros participantes" /><br /> | |
<input type="date" id="data" /><br /> | |
<select id="categoria"> | |
<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><br /> | |
<button onclick="enviarMateria()">Enviar</button> | |
</section> <section id="editor" class="hidden"> | |
<h2>Painel do Editor</h2> | |
<div id="painelEditor"></div> | |
</section> <script> | |
let artigos = JSON.parse(localStorage.getItem("artigos")) || []; | |
function verificarSenha() { | |
const senha = document.getElementById("senha").value; | |
document.getElementById("login").classList.add("hidden"); | |
document.getElementById("menu").classList.remove("hidden"); | |
document.getElementById("inicio").classList.remove("hidden"); | |
if (senha === "BRJORNAL") { | |
document.getElementById("btnEnviar").classList.remove("hidden"); | |
} else if (senha === "BRJORNALEDITOR") { | |
document.getElementById("btnEditor").classList.remove("hidden"); | |
} | |
listarArtigos(); | |
} | |
function showSection(id) { | |
document.querySelectorAll("section").forEach(sec => sec.classList.add("hidden")); | |
document.getElementById(id).classList.remove("hidden"); | |
if (id === "inicio") listarArtigos(); | |
if (id === "editor") mostrarPainelEditor(); | |
} | |
function enviarMateria() { | |
const artigo = { | |
titulo: document.getElementById("titulo").value, | |
lide: document.getElementById("lide").value, | |
corpo: document.getElementById("corpo").value, | |
autor: document.getElementById("autor").value, | |
participantes: document.getElementById("participantes").value, | |
data: document.getElementById("data").value, | |
categoria: document.getElementById("categoria").value, | |
aprovado: false | |
}; | |
artigos.push(artigo); | |
localStorage.setItem("artigos", JSON.stringify(artigos)); | |
alert("Matéria enviada para aprovação!"); | |
} | |
function listarArtigos() { | |
const lista = document.getElementById("listaArtigos"); | |
lista.innerHTML = ""; | |
artigos.filter(a => a.aprovado).forEach((a, i) => { | |
lista.innerHTML += `<div class="article approved"> | |
<h3>${a.titulo}</h3> | |
<p><strong>Lide:</strong> ${a.lide}</p> | |
<p><strong>Autor:</strong> ${a.autor}</p> | |
<p><strong>Data:</strong> ${a.data}</p> | |
<details><summary>Leia mais</summary> | |
<p>${a.corpo}</p> | |
</details> | |
</div>`; | |
}); | |
} | |
function mostrarPainelEditor() { | |
const painel = document.getElementById("painelEditor"); | |
painel.innerHTML = ""; | |
artigos.forEach((a, i) => { | |
painel.innerHTML += `<div class="article"> | |
<h3>${a.titulo}</h3> | |
<p><strong>Autor:</strong> ${a.autor}</p> | |
<p><strong>Categoria:</strong> ${a.categoria}</p> | |
<div class="editor-buttons"> | |
<button onclick="aprovar(${i})">Aprovar</button> | |
<button onclick="recusar(${i})">Recusar</button> | |
<button onclick="apagar(${i})">Apagar</button> | |
</div> | |
</div>`; | |
}); | |
} | |
function aprovar(index) { | |
artigos[index].aprovado = true; | |
salvar(); | |
mostrarPainelEditor(); | |
} | |
function recusar(index) { | |
artigos[index].aprovado = false; | |
salvar(); | |
mostrarPainelEditor(); | |
} | |
function apagar(index) { | |
artigos.splice(index, 1); | |
salvar(); | |
mostrarPainelEditor(); | |
} | |
function salvar() { | |
localStorage.setItem("artigos", JSON.stringify(artigos)); | |
listarArtigos(); | |
} | |
</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/teste-1-11" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
</html> |