|
|
<!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> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #20331B; |
|
|
--btn: #C3CA92; |
|
|
--light: #FFFFFF; |
|
|
--bg: #F5F5F5; |
|
|
--error: #E53E3E; |
|
|
} |
|
|
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; } |
|
|
body { font-family: 'Inter', sans-serif; background: var(--light); color: var(--primary); min-height:100vh; display:flex; flex-direction:column; } |
|
|
header { background: var(--primary); color: var(--light); padding:1rem; text-align:center; } |
|
|
header h1 { font-size:2rem; } |
|
|
nav { background: var(--primary); display:flex; justify-content:center; gap:.5rem; padding:.5rem; } |
|
|
nav button { background: var(--btn); color: var(--primary); border:none; padding:.6rem 1rem; border-radius:6px; cursor:pointer; transition:background .2s; } |
|
|
nav button.active, nav button:hover { background: var(--primary); color: var(--light); } |
|
|
main { flex:1; padding:2rem; max-width:900px; margin:auto; } |
|
|
section { display:none; animation:fadeIn .3s ease-in; } |
|
|
section.active { display:block; } |
|
|
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} } |
|
|
.card { background: var(--bg); border-left:4px solid var(--btn); padding:1rem; margin-bottom:1.5rem; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.1); } |
|
|
.card h3 { color: var(--btn); margin-bottom:.5rem; } |
|
|
input, select, textarea, button { width:100%; padding:.6rem; margin:.5rem 0; border:1px solid #ccc; border-radius:6px; font-size:1rem; } |
|
|
button.primary { background: var(--primary); color: var(--light); border:none; cursor:pointer; transition:background .2s; } |
|
|
button.primary:hover { background:#10210f; } |
|
|
.error { color: var(--error); margin-top:.5rem; } |
|
|
footer { background: var(--primary); color: var(--light); text-align:center; padding:1rem; font-size:.9rem; } |
|
|
|
|
|
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; } |
|
|
.modal .box { background: var(--light); padding:2rem; border-radius:8px; width:90%; max-width:320px; text-align:center; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>Jornal Oliveira</h1> |
|
|
</header> |
|
|
<nav> |
|
|
<button data-sec="inicio" class="active">Início</button> |
|
|
<button data-sec="avaliar">Avaliar</button> |
|
|
<button data-sec="sugestoes">Sugestões</button> |
|
|
<button data-sec="participar">Participe</button> |
|
|
<button id="btnLoginNav">Login</button> |
|
|
</nav> |
|
|
<main> |
|
|
|
|
|
<section id="inicio" class="active"> |
|
|
<h2>Últimas Matérias</h2> |
|
|
<div id="listMaterias"></div> |
|
|
</section> |
|
|
|
|
|
<section id="avaliar"> |
|
|
<h2>Avalie o Jornal</h2> |
|
|
<input type="number" id="nota" min="1" max="5" placeholder="Nota (1 a 5)"> |
|
|
<textarea id="comentAval" placeholder="Comentário" ></textarea> |
|
|
<button class="primary" id="btnAvaliar">Enviar Avaliação</button> |
|
|
<p id="errAval" class="error"></p> |
|
|
</section> |
|
|
|
|
|
<section id="sugestoes"> |
|
|
<h2>Sugestões</h2> |
|
|
<textarea id="txtSugest" placeholder="Sua sugestão"></textarea> |
|
|
<button class="primary" id="btnSugest">Enviar Sugestão</button> |
|
|
<p id="errSug" class="error"></p> |
|
|
</section> |
|
|
|
|
|
<section id="participar"> |
|
|
<h2>Participe</h2> |
|
|
<input id="nomePart" placeholder="Nome completo"> |
|
|
<input id="salaPart" placeholder="Sala"> |
|
|
<select id="periodoPart"> |
|
|
<option value="">Período</option> |
|
|
<option>Manhã</option> |
|
|
<option>Tarde</option> |
|
|
<option>Noite</option> |
|
|
</select> |
|
|
<input id="raPart" placeholder="RA (Registro do Aluno)"> |
|
|
<textarea id="descPart" placeholder="Descrição (opcional)"></textarea> |
|
|
<div class="card"> |
|
|
<h3>Termos de Participação</h3> |
|
|
<label><input type="checkbox" id="chkTermo"> Declaro que li e concordo com os termos abaixo.</label> |
|
|
<div class="leia-mais" onclick="toggleTermos()" style="color: var(--primary); cursor:pointer; text-decoration:underline;">Leia mais</div> |
|
|
<div id="termosTexto" style="display:none; margin-top:10px;"> |
|
|
<p><strong>TERMO DE CONDIÇÃO DE PARTICIPAÇÃO – JORNAL OLIVEIRA</strong></p> |
|
|
<p>Para fins de organização e reconhecimento dos participantes do Jornal Oliveira, solicitamos que os novos integrantes forneçam o seu RA (Registro do Aluno) no momento da inscrição. Essa informação será utilizada exclusivamente para identificação interna no âmbito do projeto.</p> |
|
|
<p>O Jornal Oliveira compromete-se a utilizar o RA apenas para os fins aqui descritos, não realizando qualquer tipo de divulgação ou compartilhamento não autorizado. Contudo, ao fornecer essa informação, o participante declara estar ciente de que a organização não se responsabiliza por eventuais vazamentos ou acessos indevidos que ocorram por fatores externos ou alheios à sua vontade.</p> |
|
|
<p>Ao assinalar a opção acima, o(a) participante declara estar de acordo com os termos apresentados e autoriza expressamente o uso do seu RA para os fins descritos.</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="primary" id="btnParticipe">Enviar Participação</button> |
|
|
<p id="errPart" class="error"></p> |
|
|
</section> |
|
|
|
|
|
<section id="editorPanel"> |
|
|
<h2>Painel do Editor</h2> |
|
|
<div class="card"> |
|
|
<h3>Enviar Matéria</h3> |
|
|
<input id="edAutor" placeholder="Autor"> |
|
|
<input id="edTitulo" placeholder="Título"> |
|
|
<select id="edCategoria"> |
|
|
<option value="">Categoria</option> |
|
|
<option>Colunas</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="edIntro" rows="2" placeholder="Introdução (opcional)"></textarea> |
|
|
<textarea id="edDev" rows="4" placeholder="Desenvolvimento"></textarea> |
|
|
<textarea id="edOutro" rows="2" placeholder="Encerramento (opcional)"></textarea> |
|
|
<input id="edPart" placeholder="Participantes (opcional)"> |
|
|
<button class="primary" id="btnPublicar">Publicar</button> |
|
|
<p id="errPub" class="error"></p> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h3>Avaliações</h3> |
|
|
<ul id="listAvals"></ul> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h3>Sugestões</h3> |
|
|
<ul id="listSugs"></ul> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h3>Participações</h3> |
|
|
<ul id="listParts"></ul> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
<footer> |
|
|
Jornal Oliveira © 2025 — Contato WhatsApp: (11) 98172-2855 |
|
|
</footer><div id="modalLogin" class="modal"> |
|
|
<div class="box"> |
|
|
<h3>Login de Editor</h3> |
|
|
<input id="codeLogin" type="password" placeholder="Código de acesso"> |
|
|
<button class="primary" id="btnLogin">Entrar</button> |
|
|
<p id="errLogin" class="error"></p> |
|
|
</div> |
|
|
</div><script> |
|
|
const materias = JSON.parse(localStorage.getItem('materias') || '[]'); |
|
|
const avals = JSON.parse(localStorage.getItem('avaliacoes')|| '[]'); |
|
|
const sugs = JSON.parse(localStorage.getItem('sugestoes') || '[]'); |
|
|
const parts = JSON.parse(localStorage.getItem('parts') || '[]'); |
|
|
let attempts = 0; |
|
|
const ACCESS_EDITOR = 'BRJORNALEDITOR'; |
|
|
|
|
|
|
|
|
document.querySelectorAll('nav button').forEach(btn => { |
|
|
btn.onclick = () => { |
|
|
document.querySelectorAll('nav button').forEach(b=>b.classList.remove('active')); |
|
|
btn.classList.add('active'); |
|
|
document.querySelectorAll('section').forEach(s=>s.classList.remove('active')); |
|
|
const sec = btn === document.getElementById('btnLoginNav') ? 'inicio' : btn.dataset.sec; |
|
|
document.getElementById(sec).classList.add('active'); |
|
|
}; |
|
|
}); |
|
|
|
|
|
|
|
|
function renderMaterias() { |
|
|
const c = document.getElementById('listMaterias'); c.innerHTML=''; |
|
|
materias.slice().reverse().forEach(m=>{ |
|
|
const d = document.createElement('div'); d.className='card'; |
|
|
d.innerHTML = `<h3>${m.titulo}</h3><p>${m.intro||''}</p><p>${m.desenvolvimento}</p><p>${m.outro||''}</p><small>Por ${m.autor} em ${m.date}</small>` + |
|
|
(m.participantes?`<p><em>Participantes: ${m.participantes}</em></p>`:''); |
|
|
c.appendChild(d); |
|
|
}); |
|
|
localStorage.setItem('materias', JSON.stringify(materias)); |
|
|
} |
|
|
|
|
|
|
|
|
function renderEditorLists() { |
|
|
const la = document.getElementById('listAvals'); la.innerHTML=''; avals.forEach(a=>{ let li=document.createElement('li'); li.textContent=`⭐${a.nota} — ${a.coment}`; la.appendChild(li); }); |
|
|
const ls = document.getElementById('listSugs'); ls.innerHTML=''; sugs.forEach(s=>{ let li=document.createElement('li'); li.textContent=s; ls.appendChild(li); }); |
|
|
const lp = document.getElementById('listParts'); lp.innerHTML=''; parts.forEach(p=>{ let li=document.createElement('li'); li.textContent=`${p.nome}, ${p.sala}, ${p.periodo}` + (p.desc?` — ${p.desc}`:''); lp.appendChild(li); }); |
|
|
} |
|
|
|
|
|
|
|
|
window.onload = () => { renderMaterias(); renderEditorLists(); }; |
|
|
|
|
|
|
|
|
document.getElementById('btnAvaliar').onclick = () => { |
|
|
const n = +document.getElementById('nota').value; |
|
|
const c = document.getElementById('comentAval').value.trim(); |
|
|
if(!n||!c) { document.getElementById('errAval').textContent='Preencha nota e comentário.'; return; } |
|
|
avals.push({nota:n, coment:c}); localStorage.setItem('avaliacoes', JSON.stringify(avals)); alert('Avaliação enviada!'); document.getElementById('errAval').textContent=''; |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('btnSugest').onclick = () => { |
|
|
const t = document.getElementById('txtSugest').value.trim(); |
|
|
if(!t) { document.getElementById('errSug').textContent='Campo obrigatório.'; return; } |
|
|
sugs.push(t); localStorage.setItem('sugestoes', JSON.stringify(sugs)); alert('Sugestão enviada!'); document.getElementById('errSug').textContent=''; |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('btnParticipe').onclick = () => { |
|
|
const n=document.getElementById('').value.trim(), s=document.getElementById('salaPart').value.trim(), p=document.getElementById('periodoPart').value, r=document.getElementById('raPart').value.trim(); |
|
|
const chk=document.getElementById('chkTermo').checked; |
|
|
if(!n||!s||!p||!r) { document.getElementById('errPart').textContent='Preencha todos os campos.'; return; } |
|
|
if(!chk) { document.getElementById('errPart').textContent='Concorde com os termos.'; return; } |
|
|
parts.push({nome:n,sala:s,periodo:p,desc:document.getElementById('descPart').value.trim()}); localStorage.setItem('parts', JSON.stringify(parts)); alert('Inscrição enviada! WhatsApp: (11) 98172-2855'); document.getElementById('errPart').textContent=''; |
|
|
}; |
|
|
|
|
|
|
|
|
function toggleTermos() { const el=document.getElementById('termosTexto'); el.style.display = el.style.display==='block'?'none':'block'; } |
|
|
|
|
|
|
|
|
const modal = document.getElementById('modalLogin'); |
|
|
document.getElementById('btnLoginNav').onclick = () => { modal.style.display='flex'; }; |
|
|
document.getElementById('btnLogin').onclick = () => { |
|
|
const c = document.getElementById('codeLogin').value.trim(); const err = document.getElementById('errLogin'); attempts++; |
|
|
if(c===ACCESS_EDITOR) { modal.style.display='none'; document.querySelectorAll('nav button').forEach(b=>b.classList.remove('active')); document.getElementById('editorPanel').classList.add('active'); err.textContent=''; } |
|
|
else { err.textContent = attempts>=3 ? 'Muitas tentativas. Tente mais tarde.' : 'Código incorreto.'; } |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('btnPublicar').onclick = () => { |
|
|
const a=document.getElementById('edAutor').value.trim(), t=document.getElementById('edTitulo').value.trim(); |
|
|
const c=document.getElementById('edCategoria').value, i=document.getElementById('edIntro').value.trim(); |
|
|
const d=document.getElementById('edDev').value.trim(), o=document.getElementById('edOutro').value.trim(); |
|
|
const pt=document.getElementById('edPart').value.trim(), err=document.getElementById('errPub'); |
|
|
if(!a||!t||!c||!d) { err.textContent='Preencha campos obrigatórios.'; return; } |
|
|
materias.push({autor:a,titulo:t,intro:i,desenvolvimento:d,outro:o,participantes:pt,date:new Date().toLocaleDateString()}); |
|
|
localStorage.setItem('materias', JSON.stringify(materias)); renderMaterias(); alert('Matéria publicada!'); err.textContent=''; |
|
|
}; |
|
|
</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-3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
