FORMULÁRIO PARA SOLICITAÇÃO DE REGIME EXCEPCIONAL DE ESTUDOS.html
formulario solicitacao regime excepcional de estudos v2.html
— 16 KB
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Formulário de Solicitação de Regime Excepcional de Estudos</title>
<style>
body {
font-family: 'Futura STD Medium Condensed', sans-serif;
text-align: left;
background-color: #f0f9e0;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1;
}
h2 {
font-family: 'Futura STD Heavy', sans-serif;
color: #0065a2;
text-align: center;
font-size: 13px;
line-height: 2;
}
h3 {
font-family: 'Futura STD Heavy', sans-serif;
color: #00000;
font-size: 13px;
font-weight: bold;
text-align: center;
line-height: 1.5;
}
p {
text-align: justify;
}
label {
display: block;
margin: 5px 0;
}
input[type="text"],
select {
width: 50%;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
text-align: justify;
}
input[type="email"],
select {
width: 50%;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
text-align: justify;
}
input[type="tel"],
select {
width: 30%;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
input[type="date"] {
font-family: 'Futura STD Heavy', sans-serif;
width: 20%;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
input[type="dias"] {
width: 10%;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="dias"],
select {
font-size: 13px;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
#mensagemIdade {
font-size: 10px;
}
.container {
max-width: 800px;
margin: 10px auto 10px auto;
background-color: #fff;
padding: 15px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: justify;
}
#form-container {
width: 50%;
}
#form-container textarea {
width: 95%;
padding: 5px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
text-align: justify;
}
#form-container input[type="text"] {
width: 95%;
}
.checkbox-label {
display: flex;
align-items: left;
}
input[type="checkbox"] {
margin-right: 10px;
}
textarea {
width: 95%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
text-align: justify;
display: block;
margin: 0 auto;
font: inherit;
font-size: inherit;
}
button {
background-color: #0065a2;
color: #fff;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
@media print {
.no-print {
display: none;
}
body {
background-color: #fff;
}
.container {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 15px;
margin: 10px;
}
}
</style>
</head>
<body>
<noscript>
<div style="background-color: #f44336; color: white; font-size:18px; text-align: center; padding: 10px;">
<p style="text-align: center;">ATENÇÃO!<br><br>O JavaScript do seu navegador está desativado ou não é suportado. Isso faz com que este formulário <u>não funcione corretamente</u>. Você pode ativar a funcionalidade manualmente (o que fará esta mensagem desaparecer).<br><br>Se tiver dificuldade, entre em contato com o Setor de Planejamento de Ensino.</p>
</div>
</noscript>
<div class="container">
<p style="text-align: center;"><img src="brasao-versao-oficial.jpg" height="80px" width="80px" alt="Brasão de Armas do Brasil"><br>Ministério da Educação<br>Instituto Federal de Educação, Ciência e Tecnologia de Minas Gerais<br>Campus Santa Luzia</p>
<h2>FORMULÁRIO PARA SOLICITAÇÃO DE REGIME EXCEPCIONAL DE ESTUDOS</h2>
<h3>IDENTIFICAÇÃO DO ESTUDANTE</h3>
<form>
<label for="nomeEstudante">Nome do estudante:</label>
<input type="text" id="nomeEstudante" name="nomeEstudante" required><br>
<label for="curso">Curso:</label>
<input type="text" id="curso" name="curso" required><br>
<label for="matricula">Matrícula:</label>
<input type="tel" id="matricula" name="matricula" required><br>
<label for="telefone">Telefone:</label>
<input type="tel" id="telefone" name="telefone" required><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required><br>
<label for="Nascimento">Data de nascimento:</label>
<input type="date" id="Nascimento" name="Nascimento" required onchange="validarIdadeEstudante()"><br>
<div id="mensagemIdade"></div>
</form>
<div id="representanteForm" style="display: none;">
<h3>Dados do responsável legal (em caso de estudante que não atingiu a capacidade civil)</h3>
<form>
<label for="responsavel">Nome do responsável:</label>
<input type="text" id="responsavel" name="responsavel"><br>
<label for="responsavelEmail">E-mail:</label>
<input type="email" id="responsavelEmail" name="responsavelEmail"><br>
<label for="responsavelTelefone">Telefone:</label>
<input type="tel" id="responsavelTelefone" name="responsavelTelefone" pattern="\(\d{2}\) \d{4,5}-\d{4}"><br>
</form>
</div>
<h3>DADOS DO AFASTAMENTO</h3>
<form>
<label for="inicioAfastamento">Início:</label>
<input type="date" id="inicioAfastamento" name="inicioAfastamento" required><br>
<label for="terminoAfastamento">Término:</label>
<input type="date" id="terminoAfastamento" name="terminoAfastamento" required><br>
<label for="diasCorridos">Total em dias corridos:</label>
<input type="dias" id="diasCorridos" name="diasCorridos" readonly><br>
</form>
<h3>DISCIPLINAS EM QUE ESTÁ MATRICULADO</h3>
<div id="form-container">
<form id="formulario1">
<label for="disciplina1">Nome da disciplina:</label>
<textarea type="text" id="disciplina1" name="disciplina1" rows="1" oninput="autoResize(this)"></textarea>
<label for="docente1">Docente responsável:</label>
<input type="text" id="docente1" name="docente1"><br>
<hr style="border: none; border-top: 1px solid #ccc; width: 100%; margin: 0;"><br>
</form>
</div>
<br>
<button class="no-print" type="button" onclick="adicionarDisciplina()">Adicionar outra disciplina</button>
<h3>INFORMAÇÕES COMPLEMENTARES</h3>
<form>
<p>1. Para embasar o pedido, anexo:</p>
<input type="checkbox" id="laudoMedico" name="laudoMedico"> Laudo ou atestado médico (obrigatório).<br><br>
<input type="checkbox" id="outrosDocumentos" name="outrosDocumentos"> Outros documentos comprobatórios. Quais?<br><br>
<textarea id="comprovatorios" name="comprovatorios" rows="4" cols="50" oninput="autoResize(this)"></textarea><br>
<p>2. Está apto a desenvolver as atividades acadêmicas que exigem esforço intelectual e concentração durante o período de concessão do regime excepcional de estudos?</p>
<input type="radio" id="aptidaoSim" name="aptidao" value="Sim"> Sim
<input type="radio" id="aptidaoNao" name="aptidao" value="Não"> Não<br><br>
<p>3. Quais as limitações físicas durante o regime excepcional de estudos que eventualmente poderão impedir o desenvolvimento das atividades acadêmicas?</p>
<textarea id="limitacoesFisicas" name="limitacoesFisicas" rows="4" cols="50" oninput="autoResize(this)"></textarea><br>
</form>
<h3>MOTIVO DO AFASTAMENTO</h3>
<form>
<p>Marque a opção que se aplica, de acordo com o Decreto-Lei nº 1.044, de 21 de outubro de 1969, e a Lei 6.202, de 17 de abril de 1975:</p>
<input type="checkbox" id="afastamentoGestacao" name="afastamentoMotivo" value="Afastamento a partir do oitavo mês de gestação pelo período de até 3 meses.">Afastamento a partir do oitavo mês de gestação pelo período de até 3 meses.<br>
<input type="checkbox" id="afastamentoGestante" name="afastamentoMotivo" value="Afastamento da gestante ou lactante incompatível com a frequência aos trabalhos escolares.">Afastamento da gestante ou lactante incompatível com a frequência aos trabalhos escolares.<br>
<input type="checkbox" id="incapacidadeFisica" name="afastamentoMotivo" value="Incapacidade física relativa, incompatível com a frequência aos trabalhos escolares.">Incapacidade física relativa, incompatível com a frequência aos trabalhos escolares.<br>
<input type="checkbox" id="ocorrenciaIsolada" name="afastamentoMotivo" value="Ocorrência isolada ou esporádica.">Ocorrência isolada ou esporádica.<br>
<input type="checkbox" id="duracaoMaxima" name="afastamentoMotivo" value="Duração que não ultrapasse o máximo admissível.">Duração que não ultrapasse o máximo ainda admissível, em cada caso, para a continuidade do processo pedagógico de aprendizado, atendendo a que tais características se verificam, entre outros, em casos de síndromes hemorrágicos (tais como a hemofilia), asma, cartide, pericardites, afecções osteoarticulares submetidas a correções ortopédicas, nefropatias agudas ou subagudas, afecções reumáticas, etc.<br>
</form>
<h3>DECLARAÇÃO E ENCAMINHAMENTO</h3>
<form>
<p>Nestes termos, pede deferimento e declara estar ciente de que deve entrar em contato com os professores dos componentes curriculares citados, buscar informações sobre os conteúdos, bem como acompanhar os exercícios domiciliares e avaliações.</p><br>
<p><input type="text" id="Cidade" name="cidade" placeholder="Cidade" style="width: 200px;">, <span id="data"></span>.</p>
</form>
<br><br><br><br><br><br><p style="font-size:10px; text-align:center;">ASSINATURA DO ESTUDANTE</p>
<br><br><div align="center"><button class="no-print" id="printButton" onclick="imprimirPagina()">Concluir</button></p>
</div>
<script>
// Função para gerar a data ao lado da assinatura.
function getDataFormatada() {
const meses = [
"janeiro", "fevereiro", "março", "abril",
"maio", "junho", "julho", "agosto",
"setembro", "outubro", "novembro", "dezembro"
];
const dataAtual = new Date();
const dia = dataAtual.getDate();
const mes = meses[dataAtual.getMonth()];
const ano = dataAtual.getFullYear();
const diaFormatado = dia === 1 ? `1º` : dia;
return `${diaFormatado} de ${mes} de ${ano}`;
}
document.getElementById("data").textContent = getDataFormatada();
function formatarTelefone(inputElement) {
var input = inputElement.value.replace(/\D/g, '');
var formatted = '(' + input.slice(0, 2) + ') ' + input.slice(2, 3) + ' ' + input.slice(3, 7) + '-' + input.slice(7, 11);
inputElement.value = formatted;
}
document.getElementById('telefone').addEventListener('input', function (e) {
formatarTelefone(e.target);
});
document.getElementById('responsavelTelefone').addEventListener('input', function (e) {
formatarTelefone(e.target);
});
// Função para calcular e exibir a duração do afastamento em dias
document.getElementById("inicioAfastamento").addEventListener("input", calcularDiasCorridos);
document.getElementById("terminoAfastamento").addEventListener("input", calcularDiasCorridos);
function calcularDiasCorridos() {
const inicioValue = document.getElementById("inicioAfastamento").value;
const terminoValue = document.getElementById("terminoAfastamento").value;
if (inicioValue && terminoValue) {
const inicioAfastamento = new Date(inicioValue);
const terminoAfastamento = new Date(terminoValue);
const diffEmDias = Math.floor((terminoAfastamento - inicioAfastamento) / (1000 * 60 * 60 * 24));
const diasCorridos = diffEmDias + 1;
document.getElementById("diasCorridos").value = diasCorridos;
} else {
document.getElementById("diasCorridos").value = "";
}
}
// Função para clonar os campos de informação sobre as disciplinas
let formCounter = 1;
function adicionarDisciplina() {
formCounter++;
const formClone = document.querySelector('#formulario1').cloneNode(true);
formClone.id = `formulario${formCounter}`;
const inputsAndTextareas = formClone.querySelectorAll('input, textarea');
inputsAndTextareas.forEach(element => {
const currentId = element.id;
const currentName = element.name;
const newId = `${currentId}${formCounter}`;
const newName = `${currentName}${formCounter}`;
element.id = newId;
element.name = newName;
if (element.tagName.toLowerCase() === 'textarea') {
element.value = '';
} else {
element.value = '';
}
element.removeEventListener('change', () => {
});
});
document.getElementById('form-container').appendChild(formClone);
}
// Função para as caixas de texto se redimensionarem verticalmente e não gerarem barras de rolagem, para saírem corretamente na impressão
function autoResize(textarea) {
textarea.style.height = 'auto';
textarea.style.height = (textarea.scrollHeight) + 'px';
}
// Função para verificar se o estudante é menor de idade e exibir o formulário com os dados do responsável
function validarIdadeEstudante() {
var dataNascimento = new Date(document.getElementById("Nascimento").value);
var dataHoje = new Date();
var diferencaAnos = dataHoje.getFullYear() - dataNascimento.getFullYear();
var mesNascimento = dataNascimento.getMonth() + 1;
var diaNascimento = dataNascimento.getDate() + 1;
var mesAtual = dataHoje.getMonth() + 1;
var diaAtual = dataHoje.getDate();
if (mesAtual < mesNascimento || (mesAtual === mesNascimento && diaAtual < diaNascimento)) {
diferencaAnos--;
}
var mensagemIdade = document.getElementById("mensagemIdade");
if (diferencaAnos > 18 || (diferencaAnos === 18 && mesAtual >= mesNascimento && diaAtual >= diaNascimento)) {
document.getElementById("representanteForm").style.display = "none";
mensagemIdade.textContent = "";
return true;
} else {
mensagemIdade.textContent = "O estudante ainda não atingiu a capacidade civil.";
document.getElementById("representanteForm").style.display = "block";
return false;
}
}
// Funções para validar e imprimir a página
function imprimirPagina() {
const mensagensErro = validarCamposObrigatorios();
if (mensagensErro.length === 0) {
alert("O formulário deverá ser assinado manual ou eletronicamente pelo requerente e encaminhado ao endereço eletrônico do Setor de Planejamento de Ensino (spe.santaluzia@ifmg.edu.br).");
window.print();
} else {
alert("Campos obrigatórios não preenchidos:\n" + mensagensErro.join('\n'));
}
}
function validarCamposObrigatorios() {
const mensagensErro = [];
const camposObrigatorios = [
{ id: "nomeEstudante", nomeAmigavel: "Nome do estudante" },
{ id: "curso", nomeAmigavel: "Curso" },
{ id: "matricula", nomeAmigavel: "Matrícula" },
{ id: "telefone", nomeAmigavel: "Telefone" },
{ id: "Nascimento", nomeAmigavel: "Data de nascimento" },
{ id: "inicioAfastamento", nomeAmigavel: "Início" },
{ id: "terminoAfastamento", nomeAmigavel: "Término" },
{ id: "disciplina1", nomeAmigavel: "Nome da disciplina" },
{ id: "docente1", nomeAmigavel: "Docente responsável" },
{ id: "Cidade", nomeAmigavel: "Cidade" }
];
for (const campo of camposObrigatorios) {
const inputElement = document.getElementById(campo.id);
if (!inputElement || inputElement.value.trim() === "") {
mensagensErro.push(`O campo "${campo.nomeAmigavel}" é obrigatório.`);
}
}
const responsavelNome = document.getElementById("responsavel").value;
const responsavelTelefone = document.getElementById("responsavelTelefone").value;
const idadeEstudanteValida = validarIdadeEstudante();
if (!idadeEstudanteValida) {
if (responsavelNome.trim() === "" || responsavelTelefone.trim() === "") {
mensagensErro.push("O estudante ainda não atingiu a capacidade civil, é preciso fornecer os dados do responsável.");
}
}
const laudoMedicoChecked = document.getElementById("laudoMedico").checked;
const outrosDocumentosChecked = document.getElementById("outrosDocumentos").checked;
const comprovatoriosTextarea = document.getElementById("comprovatorios");
const aptidaoSimChecked = document.getElementById("aptidaoSim").checked;
const limitacoesFisicas = document.getElementById("limitacoesFisicas").value;
const motivoAfastamentoCheckboxes = document.querySelectorAll('input[name="afastamentoMotivo"]:checked');
if (!(laudoMedicoChecked || outrosDocumentosChecked)) {
mensagensErro.push("Selecione pelo menos uma opção entre 'Laudo médico' e 'Outros documentos comprobatórios'.");
}
if (outrosDocumentosChecked && comprovatoriosTextarea.value.trim() === "") {
mensagensErro.push("O campo 'Outros documentos comprobatórios' está marcado, mas não foram indicar os documentos.");
}
if (!(aptidaoSimChecked || document.getElementById("aptidaoNao").checked)) {
mensagensErro.push("Selecione se está apto ou não a desenvolver as atividades acadêmicas.");
}
if (!limitacoesFisicas) {
mensagensErro.push("Preencha o campo 'Limitações físicas'.");
}
if (motivoAfastamentoCheckboxes.length === 0) {
mensagensErro.push("Selecione pelo menos um motivo de afastamento.");
}
return mensagensErro;
}
</script>
</body>
</html>