|
|
<!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> |
|
|
body { |
|
|
margin: 0; |
|
|
font-family: Arial, sans-serif; |
|
|
background-color: white; |
|
|
color: black; |
|
|
} |
|
|
header { |
|
|
background-color: #388e3c; |
|
|
color: white; |
|
|
padding: 1rem; |
|
|
text-align: center; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
nav { |
|
|
background-color: #66bb6a; |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
padding: 0.5rem; |
|
|
} |
|
|
nav a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
font-weight: bold; |
|
|
} |
|
|
.container { |
|
|
padding: 1rem; |
|
|
} |
|
|
.section-title { |
|
|
font-size: 1.2rem; |
|
|
font-weight: bold; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.article-card { |
|
|
border: 1px solid #ccc; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
border-radius: 5px; |
|
|
} |
|
|
.article-card a { |
|
|
color: blue; |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
} |
|
|
.hidden { |
|
|
display: none; |
|
|
} |
|
|
.termobox { |
|
|
background-color: #f0f0f0; |
|
|
padding: 1rem; |
|
|
margin-top: 1rem; |
|
|
border-radius: 5px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header>Jornal Oliveira</header> |
|
|
<nav> |
|
|
<a href="#" onclick="showSection('inicio')">Início</a> |
|
|
<a href="#" onclick="showSection('avaliar')">Avaliar</a> |
|
|
<a href="#" onclick="showSection('sugestoes')">Sugestões</a> |
|
|
<a href="#" onclick="showSection('participe')">Participe</a> |
|
|
<a href="#" onclick="showSection('login')">Login</a> |
|
|
</nav> |
|
|
<div class="container"> |
|
|
<div id="inicio"> |
|
|
<div class="section-title">Últimas matérias</div> |
|
|
<div class="article-card"> |
|
|
<div><strong>Coluna: Investigação</strong></div> |
|
|
<div>Resumo da matéria...</div> |
|
|
<a onclick="toggleArticle(this)">Leia mais</a> |
|
|
<div class="hidden">Texto completo da matéria... <a onclick="toggleArticle(this)">Ler menos</a></div> |
|
|
</div> |
|
|
</div><div id="avaliar" class="hidden"> |
|
|
<div class="section-title">Avaliação</div> |
|
|
<label for="nota">Nota (1 a 5):</label> |
|
|
<select id="nota"> |
|
|
<option>1</option> |
|
|
<option>2</option> |
|
|
<option>3</option> |
|
|
<option>4</option> |
|
|
<option>5</option> |
|
|
</select> |
|
|
<br /><br /> |
|
|
<label for="comentario">Comentário (obrigatório):</label> |
|
|
<br /> |
|
|
<textarea id="comentario" rows="4" cols="50"></textarea> |
|
|
<br /> |
|
|
<button onclick="enviarAvaliacao()">Enviar</button> |
|
|
</div> |
|
|
|
|
|
<div id="sugestoes" class="hidden"> |
|
|
<div class="section-title">Sugestões</div> |
|
|
<label for="sugestao">Digite sua sugestão (mínimo 10 palavras):</label> |
|
|
<br /> |
|
|
<textarea id="sugestao" rows="4" cols="50"></textarea> |
|
|
<br /> |
|
|
<button onclick="enviarSugestao()">Enviar</button> |
|
|
</div> |
|
|
|
|
|
<div id="participe" class="hidden"> |
|
|
<div class="section-title">Participe</div> |
|
|
<label>Nome completo:</label><br /> |
|
|
<input type="text" id="nome" /><br /> |
|
|
|
|
|
<label>Série:</label><br /> |
|
|
<input type="text" id="serie" /><br /> |
|
|
|
|
|
<label>Período:</label><br /> |
|
|
<select id="periodo"> |
|
|
<option>Manhã</option> |
|
|
<option>Tarde</option> |
|
|
<option>Noite</option> |
|
|
</select><br /> |
|
|
|
|
|
<label>RA (começa com 000):</label><br /> |
|
|
<input type="text" id="ra" /><br /> |
|
|
|
|
|
<div class="termobox"> |
|
|
<a onclick="toggleArticle(this)">Ler mais</a> |
|
|
<div class="hidden"> |
|
|
<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 <strong>não se responsabiliza</strong> por eventuais vazamentos ou acessos indevidos que ocorram por fatores externos ou alheios à sua vontade. |
|
|
</p> |
|
|
<p> |
|
|
Ao assinalar a opção abaixo, 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> |
|
|
<label> |
|
|
<input type="checkbox" id="termo" /> Declaro que li e concordo com os termos acima para participar do Jornal Oliveira. |
|
|
</label> |
|
|
</div> |
|
|
<button onclick="enviarParticipacao()">Enviar inscrição</button> |
|
|
</div> |
|
|
|
|
|
<div id="login" class="hidden"> |
|
|
<div class="section-title">Login</div> |
|
|
<label for="codigo">Código/Senha:</label> |
|
|
<input type="text" id="codigo" /> |
|
|
<button onclick="fazerLogin()">Entrar</button> |
|
|
<div id="loginResultado"></div> |
|
|
</div> |
|
|
|
|
|
</div> <script> |
|
|
function showSection(id) { |
|
|
const sections = ["inicio", "avaliar", "sugestoes", "participe", "login"]; |
|
|
sections.forEach((sec) => document.getElementById(sec).classList.add("hidden")); |
|
|
document.getElementById(id).classList.remove("hidden"); |
|
|
} |
|
|
|
|
|
function toggleArticle(el) { |
|
|
const hidden = el.parentElement.querySelector(".hidden"); |
|
|
if (hidden) { |
|
|
hidden.classList.toggle("hidden"); |
|
|
} else { |
|
|
el.parentElement.classList.add("hidden"); |
|
|
} |
|
|
} |
|
|
|
|
|
function enviarAvaliacao() { |
|
|
const comentario = document.getElementById("comentario").value; |
|
|
if (!comentario.trim()) { |
|
|
alert("O comentário é obrigatório."); |
|
|
return; |
|
|
} |
|
|
alert("Avaliação enviada com sucesso."); |
|
|
} |
|
|
|
|
|
function enviarSugestao() { |
|
|
const texto = document.getElementById("sugestao").value; |
|
|
if (texto.trim().split(" ").length < 10) { |
|
|
alert("A sugestão precisa ter no mínimo 10 palavras."); |
|
|
return; |
|
|
} |
|
|
alert("Sugestão enviada com sucesso."); |
|
|
} |
|
|
|
|
|
function enviarParticipacao() { |
|
|
const nome = document.getElementById("nome").value; |
|
|
const serie = document.getElementById("serie").value; |
|
|
const ra = document.getElementById("ra").value; |
|
|
const termo = document.getElementById("termo").checked; |
|
|
|
|
|
if (!nome || !serie || !ra.startsWith("000")) { |
|
|
alert("Preencha corretamente todos os campos e verifique o RA."); |
|
|
return; |
|
|
} |
|
|
if (!termo) { |
|
|
alert("Você deve concordar com os termos para participar."); |
|
|
return; |
|
|
} |
|
|
alert("Inscrição enviada com sucesso."); |
|
|
} |
|
|
|
|
|
function fazerLogin() { |
|
|
const codigo = document.getElementById("codigo").value; |
|
|
const resultado = document.getElementById("loginResultado"); |
|
|
if (codigo === "BRJORNAL") { |
|
|
resultado.innerHTML = "<p>Área de envio de matéria liberada.</p>"; |
|
|
} else if (codigo === "BRJORNALEDITOR") { |
|
|
resultado.innerHTML = "<p>Área de avaliação e edição liberada.</p>"; |
|
|
} else { |
|
|
resultado.innerHTML = "<p>Código inválido.</p>"; |
|
|
} |
|
|
} |
|
|
</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-6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
