File size: 101,980 Bytes
6123d37 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 |
<!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; /* Verde escuro */
--btn: #C3CA92; /* Verde claro */
--light: #FFFFFF; /* Branco */
--bg: #F5F5F5; /* Fundo de cards */
--error: #E53E3E; /* Vermelho de erro */
}
*, *::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 Login */
.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>
<!-- Início -->
<section id="inicio" class="active">
<h2>Últimas Matérias</h2>
<div id="listMaterias"></div>
</section>
<!-- Avaliar -->
<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>
<!-- Sugestões -->
<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>
<!-- Participe -->
<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>
<!-- Editor Panel -->
<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><!-- Login Modal --><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';
// Navegação
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');
};
});
// Renderiza matérias
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));
}
// Renderiza editor data
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); });
}
// Inicial
window.onload = () => { renderMaterias(); renderEditorLists(); };
// Avaliar
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='';
};
// Sugestões
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='';
};
// Participar
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='';
};
// Toggle termos
function toggleTermos() { const el=document.getElementById('termosTexto'); el.style.display = el.style.display==='block'?'none':'block'; }
// Login
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.'; }
};
// Publicar matéria
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> |