| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Calculadora Trabalhista Universal</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .custom-shadow { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .slide-fade-enter-active { |
| transition: all 0.3s ease-out; |
| } |
| .slide-fade-leave-active { |
| transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); |
| } |
| .slide-fade-enter-from, |
| .slide-fade-leave-to { |
| transform: translateX(20px); |
| opacity: 0; |
| } |
| .result-box { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| |
| <header class="text-center mb-10"> |
| <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2"> |
| <i class="fas fa-calculator mr-2"></i>Calculadora Trabalhista Universal |
| </h1> |
| <p class="text-gray-600">Cálculos precisos para todos os profissionais, incluindo professores</p> |
| </header> |
|
|
| |
| <main> |
| |
| <div class="bg-white rounded-xl p-6 mb-8 custom-shadow"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-tools mr-2 text-indigo-600"></i> Selecione o Tipo de Cálculo |
| </h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <button onclick="showCalculator('salario')" class="calculator-btn bg-indigo-50 hover:bg-indigo-100 text-indigo-700"> |
| <i class="fas fa-money-bill-wave mr-2"></i> Salário Líquido |
| </button> |
| <button onclick="showCalculator('ferias')" class="calculator-btn bg-blue-50 hover:bg-blue-100 text-blue-700"> |
| <i class="fas fa-umbrella-beach mr-2"></i> Férias |
| </button> |
| <button onclick="showCalculator('decimo')" class="calculator-btn bg-green-50 hover:bg-green-100 text-green-700"> |
| <i class="fas fa-gift mr-2"></i> 13º Salário |
| </button> |
| <button onclick="showCalculator('rescisao')" class="calculator-btn bg-red-50 hover:bg-red-100 text-red-700"> |
| <i class="fas fa-file-contract mr-2"></i> Rescisão |
| </button> |
| <button onclick="showCalculator('professor')" class="calculator-btn bg-purple-50 hover:bg-purple-100 text-purple-700"> |
| <i class="fas fa-chalkboard-teacher mr-2"></i> Cálculos para Professores |
| </button> |
| <button onclick="showCalculator('hora')" class="calculator-btn bg-yellow-50 hover:bg-yellow-100 text-yellow-700"> |
| <i class="fas fa-clock mr-2"></i> Valor Hora |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="calculators" class="bg-white rounded-xl p-6 custom-shadow"> |
| |
| <div id="salario-calculator" class="calculator-form"> |
| <h3 class="text-lg font-semibold mb-4 text-indigo-700 flex items-center"> |
| <i class="fas fa-money-bill-wave mr-2"></i> Cálculo de Salário Líquido |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label> |
| <input type="number" id="salario-bruto" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="5000.00"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Dependentes (IRRF)</label> |
| <input type="number" id="dependentes" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="0" value="0"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Descontos (R$)</label> |
| <input type="number" id="descontos" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="0.00" value="0"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Benefícios (R$)</label> |
| <input type="number" id="beneficios" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="0.00" value="0"> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button onclick="calcularSalarioLiquido()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> |
| Calcular Salário Líquido |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="ferias-calculator" class="calculator-form hidden"> |
| <h3 class="text-lg font-semibold mb-4 text-blue-700 flex items-center"> |
| <i class="fas fa-umbrella-beach mr-2"></i> Cálculo de Férias |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label> |
| <input type="number" id="ferias-salario" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="5000.00"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Dias de Férias</label> |
| <input type="number" id="dias-ferias" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="30" value="30"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Abono Pecuniário (1/3)</label> |
| <select id="abono" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option value="nao">Não</option> |
| <option value="sim">Sim</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Adiantar 13º?</label> |
| <select id="adiantar-13" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option value="nao">Não</option> |
| <option value="sim">Sim</option> |
| </select> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button onclick="calcularFerias()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> |
| Calcular Férias |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="decimo-calculator" class="calculator-form hidden"> |
| <h3 class="text-lg font-semibold mb-4 text-green-700 flex items-center"> |
| <i class="fas fa-gift mr-2"></i> Cálculo de 13º Salário |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label> |
| <input type="number" id="decimo-salario" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="5000.00"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Meses Trabalhados</label> |
| <input type="number" id="meses-trabalhados" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="12" value="12" min="1" max="12"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Parcela (1ª ou 2ª)</label> |
| <select id="parcela-decimo" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> |
| <option value="1">1ª Parcela</option> |
| <option value="2">2ª Parcela</option> |
| </select> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button onclick="calcularDecimo()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> |
| Calcular 13º Salário |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="rescisao-calculator" class="calculator-form hidden"> |
| <h3 class="text-lg font-semibold mb-4 text-red-700 flex items-center"> |
| <i class="fas fa-file-contract mr-2"></i> Cálculo de Rescisão |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label> |
| <input type="number" id="rescisao-salario" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" placeholder="5000.00"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tempo de Serviço (anos)</label> |
| <input type="number" id="tempo-servico" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" placeholder="2"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Motivo da Rescisão</label> |
| <select id="motivo-rescisao" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"> |
| <option value="sem-justa-causa">Demissão sem justa causa</option> |
| <option value="justa-causa">Demissão por justa causa</option> |
| <option value="pedido-demissao">Pedido de demissão</option> |
| <option value="termino-contrato">Término de contrato</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Férias Vencidas?</label> |
| <select id="ferias-vencidas" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"> |
| <option value="nao">Não</option> |
| <option value="sim">Sim</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Aviso Prévio Trabalhado?</label> |
| <select id="aviso-previo" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"> |
| <option value="nao">Não</option> |
| <option value="sim">Sim</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Saldo de Salário (dias)</label> |
| <input type="number" id="saldo-salario" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" placeholder="15" value="15"> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button onclick="calcularRescisao()" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> |
| Calcular Rescisão |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="professor-calculator" class="calculator-form hidden"> |
| <h3 class="text-lg font-semibold mb-4 text-purple-700 flex items-center"> |
| <i class="fas fa-chalkboard-teacher mr-2"></i> Cálculos Específicos para Professores |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Salário Base (R$)</label> |
| <input type="number" id="prof-salario" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="3000.00"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Contrato</label> |
| <select id="tipo-contrato" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
| <option value="estatutario">Estatutário</option> |
| <option value="clt">CLT</option> |
| <option value="horista">Horista</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Carga Horária Semanal</label> |
| <input type="number" id="carga-horaria" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="40" value="40"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tempo de Serviço (anos)</label> |
| <input type="number" id="tempo-servico-prof" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="5"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nível de Titulação</label> |
| <select id="titulacao" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
| <option value="graduacao">Graduação</option> |
| <option value="especializacao">Especialização</option> |
| <option value="mestrado">Mestrado</option> |
| <option value="doutorado">Doutorado</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Trabalha em Escola Pública?</label> |
| <select id="escola-publica" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
| <option value="sim">Sim</option> |
| <option value="nao">Não</option> |
| </select> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button onclick="calcularProfessor()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> |
| Calcular Benefícios |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="hora-calculator" class="calculator-form hidden"> |
| <h3 class="text-lg font-semibold mb-4 text-yellow-700 flex items-center"> |
| <i class="fas fa-clock mr-2"></i> Cálculo de Valor Hora |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Salário Mensal (R$)</label> |
| <input type="number" id="salario-hora" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500" placeholder="3000.00"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Carga Horária Semanal</label> |
| <input type="number" id="carga-semanal" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500" placeholder="40" value="40"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Dias Úteis na Semana</label> |
| <input type="number" id="dias-uteis" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500" placeholder="5" value="5"> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <button onclick="calcularValorHora()" class="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300"> |
| Calcular Valor Hora |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="results" class="mt-8 hidden"> |
| <div class="result-box rounded-xl p-6 custom-shadow"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-semibold text-gray-800" id="result-title">Resultado</h3> |
| <button onclick="hideResults()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div id="result-content" class="space-y-4"> |
| |
| </div> |
| <div class="mt-6 pt-4 border-t border-gray-200"> |
| <button onclick="printResults()" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium"> |
| <i class="fas fa-print mr-2"></i> Imprimir Resultado |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl p-6 mt-8 custom-shadow"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-info-circle mr-2 text-indigo-600"></i> Informações Importantes |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-indigo-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-indigo-700 mb-2 flex items-center"> |
| <i class="fas fa-exclamation-triangle mr-2"></i> Atenção |
| </h3> |
| <p class="text-sm text-gray-700">Os cálculos são estimativas baseadas na legislação atual e podem variar conforme casos específicos.</p> |
| </div> |
| <div class="bg-blue-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-blue-700 mb-2 flex items-center"> |
| <i class="fas fa-calendar-alt mr-2"></i> Atualização |
| </h3> |
| <p class="text-sm text-gray-700">Alíquotas atualizadas conforme tabelas vigentes em 2023. Verifique sempre as atualizações legais.</p> |
| </div> |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-green-700 mb-2 flex items-center"> |
| <i class="fas fa-graduation-cap mr-2"></i> Professores |
| </h3> |
| <p class="text-sm text-gray-700">Cálculos específicos consideram adicional de titulação, plano de carreira e outros benefícios.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="mt-12 text-center text-gray-600 text-sm"> |
| <p>© 2023 Calculadora Trabalhista Universal. Todos os direitos reservados.</p> |
| <p class="mt-2">Esta ferramenta não substitui consulta com profissional especializado.</p> |
| </footer> |
| </div> |
|
|
| <script> |
| // Show calculator based on selection |
| function showCalculator(type) { |
| // Hide all calculators |
| document.querySelectorAll('.calculator-form').forEach(el => { |
| el.classList.add('hidden'); |
| }); |
| |
| // Show selected calculator |
| document.getElementById(`${type}-calculator`).classList.remove('hidden'); |
| |
| // Hide results if showing |
| hideResults(); |
| } |
| |
| // Hide results section |
| function hideResults() { |
| document.getElementById('results').classList.add('hidden'); |
| } |
| |
| // Print results |
| function printResults() { |
| window.print(); |
| } |
| |
| // Format currency |
| function formatCurrency(value) { |
| return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value); |
| } |
| |
| // Calculate INSS |
| function calcularINSS(salario) { |
| let inss = 0; |
| |
| if (salario <= 1320.00) { |
| inss = salario * 0.075; |
| } else if (salario <= 2571.29) { |
| inss = (1320.00 * 0.075) + ((salario - 1320.00) * 0.09); |
| } else if (salario <= 3856.94) { |
| inss = (1320.00 * 0.075) + ((2571.29 - 1320.00) * 0.09) + ((salario - 2571.29) * 0.12); |
| } else if (salario <= 7507.49) { |
| inss = (1320.00 * 0.075) + ((2571.29 - 1320.00) * 0.09) + ((3856.94 - 2571.29) * 0.12) + ((salario - 3856.94) * 0.14); |
| } else { |
| inss = (1320.00 * 0.075) + ((2571.29 - 1320.00) * 0.09) + ((3856.94 - 2571.29) * 0.12) + ((7507.49 - 3856.94) * 0.14); |
| } |
| |
| return inss; |
| } |
| |
| // Calculate IRRF |
| function calcularIRRF(salario, inss, dependentes) { |
| const deducaoDependente = 189.59; |
| const baseCalculo = salario - inss - (dependentes * deducaoDependente); |
| |
| let irrf = 0; |
| let aliquota = 0; |
| let deducao = 0; |
| |
| if (baseCalculo <= 2112.00) { |
| aliquota = 0; |
| deducao = 0; |
| } else if (baseCalculo <= 2826.65) { |
| aliquota = 0.075; |
| deducao = 158.40; |
| } else if (baseCalculo <= 3751.05) { |
| aliquota = 0.15; |
| deducao = 370.40; |
| } else if (baseCalculo <= 4664.68) { |
| aliquota = 0.225; |
| deducao = 651.73; |
| } else { |
| aliquota = 0.275; |
| deducao = 884.96; |
| } |
| |
| irrf = (baseCalculo * aliquota) - deducao; |
| return irrf > 0 ? irrf : 0; |
| } |
| |
| // Calculate net salary |
| function calcularSalarioLiquido() { |
| const salarioBruto = parseFloat(document.getElementById('salario-bruto').value) || 0; |
| const dependentes = parseInt(document.getElementById('dependentes').value) || 0; |
| const descontos = parseFloat(document.getElementById('descontos').value) || 0; |
| const beneficios = parseFloat(document.getElementById('beneficios').value) || 0; |
| |
| const inss = calcularINSS(salarioBruto); |
| const irrf = calcularIRRF(salarioBruto, inss, dependentes); |
| |
| const salarioLiquido = salarioBruto - inss - irrf - descontos + beneficios; |
| |
| // Prepare results |
| const resultTitle = 'Cálculo de Salário Líquido'; |
| let resultContent = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Salário Bruto</h4> |
| <p class="text-xl font-semibold text-indigo-600">${formatCurrency(salarioBruto)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Salário Líquido</h4> |
| <p class="text-xl font-semibold text-green-600">${formatCurrency(salarioLiquido)}</p> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">INSS</h4> |
| <p class="text-lg text-blue-600">${formatCurrency(inss)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">IRRF</h4> |
| <p class="text-lg text-red-600">${formatCurrency(irrf)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Outros Descontos</h4> |
| <p class="text-lg text-yellow-600">${formatCurrency(descontos)}</p> |
| </div> |
| </div> |
| <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Benefícios Adicionais</h4> |
| <p class="text-lg text-green-600">${formatCurrency(beneficios)}</p> |
| </div> |
| `; |
| |
| showResults(resultTitle, resultContent); |
| } |
| |
| // Calculate vacation |
| function calcularFerias() { |
| const salario = parseFloat(document.getElementById('ferias-salario').value) || 0; |
| const diasFerias = parseInt(document.getElementById('dias-ferias').value) || 30; |
| const abono = document.getElementById('abono').value; |
| const adiantar13 = document.getElementById('adiantar-13').value; |
| |
| const valorFerias = (salario / 30) * diasFerias; |
| const umTerco = valorFerias / 3; |
| const valorAbono = abono === 'sim' ? umTerco : 0; |
| const adiantamento13 = adiantar13 === 'sim' ? salario / 2 : 0; |
| |
| const inssFerias = calcularINSS(valorFerias + valorAbono); |
| const irrfFerias = calcularIRRF(valorFerias + valorAbono, inssFerias, 0); |
| |
| const totalFerias = valorFerias + valorAbono - inssFerias - irrfFerias + adiantamento13; |
| |
| // Prepare results |
| const resultTitle = 'Cálculo de Férias'; |
| let resultContent = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Valor das Férias (${diasFerias} dias)</h4> |
| <p class="text-xl font-semibold text-blue-600">${formatCurrency(valorFerias)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Total a Receber</h4> |
| <p class="text-xl font-semibold text-green-600">${formatCurrency(totalFerias)}</p> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">1/3 de Férias</h4> |
| <p class="text-lg ${abono === 'sim' ? 'text-green-600' : 'text-gray-500'}">${abono === 'sim' ? formatCurrency(valorAbono) : 'Não aplicado'}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">INSS sobre Férias</h4> |
| <p class="text-lg text-red-600">${formatCurrency(inssFerias)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">IRRF sobre Férias</h4> |
| <p class="text-lg text-red-600">${formatCurrency(irrfFerias)}</p> |
| </div> |
| </div> |
| <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Adiantamento 13º Salário</h4> |
| <p class="text-lg ${adiantar13 === 'sim' ? 'text-purple-600' : 'text-gray-500'}">${adiantar13 === 'sim' ? formatCurrency(adiantamento13) : 'Não aplicado'}</p> |
| </div> |
| `; |
| |
| showResults(resultTitle, resultContent); |
| } |
| |
| // Calculate 13th salary |
| function calcularDecimo() { |
| const salario = parseFloat(document.getElementById('decimo-salario').value) || 0; |
| const mesesTrabalhados = parseInt(document.getElementById('meses-trabalhados').value) || 12; |
| const parcela = document.getElementById('parcela-decimo').value; |
| |
| const valorDecimo = (salario * mesesTrabalhados) / 12; |
| let valorParcela = 0; |
| let inssDecimo = 0; |
| let irrfDecimo = 0; |
| |
| if (parcela === '1') { |
| valorParcela = valorDecimo * 0.5; |
| // 1ª parcela não tem desconto de INSS/IRRF |
| } else { |
| valorParcela = valorDecimo * 0.5; |
| inssDecimo = calcularINSS(valorDecimo); |
| irrfDecimo = calcularIRRF(valorDecimo, inssDecimo, 0); |
| valorParcela = valorDecimo - inssDecimo - irrfDecimo; |
| } |
| |
| // Prepare results |
| const resultTitle = 'Cálculo de 13º Salário'; |
| let resultContent = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Valor Total do 13º</h4> |
| <p class="text-xl font-semibold text-green-600">${formatCurrency(valorDecimo)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">${parcela === '1' ? '1ª Parcela' : '2ª Parcela (Líquida)'}</h4> |
| <p class="text-xl font-semibold text-blue-600">${formatCurrency(valorParcela)}</p> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Meses Trabalhados</h4> |
| <p class="text-lg">${mesesTrabalhados} meses</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Parcela</h4> |
| <p class="text-lg">${parcela === '1' ? '1ª (50% sem descontos)' : '2ª (com descontos)'}</p> |
| </div> |
| </div> |
| `; |
| |
| if (parcela === '2') { |
| resultContent += ` |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">INSS</h4> |
| <p class="text-lg text-red-600">${formatCurrency(inssDecimo)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">IRRF</h4> |
| <p class="text-lg text-red-600">${formatCurrency(irrfDecimo)}</p> |
| </div> |
| </div> |
| `; |
| } |
| |
| showResults(resultTitle, resultContent); |
| } |
| |
| // Calculate termination |
| function calcularRescisao() { |
| const salario = parseFloat(document.getElementById('rescisao-salario').value) || 0; |
| const tempoServico = parseInt(document.getElementById('tempo-servico').value) || 0; |
| const motivo = document.getElementById('motivo-rescisao').value; |
| const feriasVencidas = document.getElementById('ferias-vencidas').value; |
| const avisoPrevio = document.getElementById('aviso-previo').value; |
| const saldoSalario = parseInt(document.getElementById('saldo-salario').value) || 0; |
| |
| // Calculate components |
| const saldoSalarioValor = (salario / 30) * saldoSalario; |
| let avisoPrevioValor = 0; |
| let feriasProporcionais = 0; |
| let decimoProporcional = 0; |
| let multaFGTS = 0; |
| let seguroDesemprego = 0; |
| |
| // Aviso prévio |
| if (avisoPrevio === 'nao' && motivo !== 'justa-causa') { |
| avisoPrevioValor = salario; |
| } |
| |
| // Férias proporcionais |
| const mesesTrabalhadosAno = tempoServico % 12; |
| feriasProporcionais = (salario / 12) * mesesTrabalhadosAno; |
| |
| if (feriasVencidas === 'sim') { |
| feriasProporcionais += salario; |
| } |
| |
| // 13º proporcional |
| decimoProporcional = (salario / 12) * mesesTrabalhadosAno; |
| |
| // FGTS + multa |
| const fgts = salario * 0.08 * tempoServico; |
| |
| if (motivo === 'sem-justa-causa') { |
| multaFGTS = fgts * 0.4; |
| } |
| |
| // Seguro desemprego |
| if (motivo === 'sem-justa-causa' || motivo === 'termino-contrato') { |
| if (tempoServico >= 12) { |
| seguroDesemprego = salario * 0.8; |
| } else if (tempoServico >= 6) { |
| seguroDesemprego = salario * 0.6; |
| } |
| } |
| |
| // Total |
| let totalRescisao = saldoSalarioValor + avisoPrevioValor + feriasProporcionais + decimoProporcional; |
| |
| if (motivo === 'pedido-demissao') { |
| totalRescisao = saldoSalarioValor + feriasProporcionais; |
| } else if (motivo === 'justa-causa') { |
| totalRescisao = saldoSalarioValor; |
| } |
| |
| // Prepare results |
| const resultTitle = 'Cálculo de Rescisão'; |
| let resultContent = ` |
| <div class="bg-white p-4 rounded-lg border border-gray-200 mb-4"> |
| <h4 class="font-medium text-gray-700 mb-2">Motivo da Rescisão</h4> |
| <p class="text-lg"> |
| ${ |
| motivo === 'sem-justa-causa' ? 'Demissão sem justa causa' : |
| motivo === 'justa-causa' ? 'Demissão por justa causa' : |
| motivo === 'pedido-demissao' ? 'Pedido de demissão' : 'Término de contrato' |
| } |
| </p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Total da Rescisão</h4> |
| <p class="text-xl font-semibold text-green-600">${formatCurrency(totalRescisao)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Tempo de Serviço</h4> |
| <p class="text-lg">${tempoServico} anos</p> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Saldo de Salário (${saldoSalario} dias)</h4> |
| <p class="text-lg text-blue-600">${formatCurrency(saldoSalarioValor)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Aviso Prévio</h4> |
| <p class="text-lg ${avisoPrevioValor > 0 ? 'text-blue-600' : 'text-gray-500'}">${avisoPrevioValor > 0 ? formatCurrency(avisoPrevioValor) : 'Não aplicável'}</p> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Férias Proporcionais</h4> |
| <p class="text-lg text-purple-600">${formatCurrency(feriasProporcionais)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">13º Proporcional</h4> |
| <p class="text-lg text-purple-600">${formatCurrency(decimoProporcional)}</p> |
| </div> |
| </div> |
| `; |
| |
| if (motivo === 'sem-justa-causa' || motivo === 'termino-contrato') { |
| resultContent += ` |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">FGTS + Multa</h4> |
| <p class="text-lg text-indigo-600">${formatCurrency(fgts + multaFGTS)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Seguro-Desemprego</h4> |
| <p class="text-lg ${seguroDesemprego > 0 ? 'text-green-600' : 'text-gray-500'}">${seguroDesemprego > 0 ? formatCurrency(seguroDesemprego) : 'Não aplicável'}</p> |
| </div> |
| </div> |
| `; |
| } |
| |
| showResults(resultTitle, resultContent); |
| } |
| |
| // Calculate teacher benefits |
| function calcularProfessor() { |
| const salario = parseFloat(document.getElementById('prof-salario').value) || 0; |
| const tipoContrato = document.getElementById('tipo-contrato').value; |
| const cargaHoraria = parseInt(document.getElementById('carga-horaria').value) || 40; |
| const tempoServico = parseInt(document.getElementById('tempo-servico-prof').value) || 0; |
| const titulacao = document.getElementById('titulacao').value; |
| const escolaPublica = document.getElementById('escola-publica').value; |
| |
| // Calculate benefits |
| let adicionalTitulacao = 0; |
| let adicionalTempoServico = 0; |
| let gratificacao = 0; |
| let bonus = 0; |
| |
| // Adicional por titulação |
| switch(titulacao) { |
| case 'especializacao': |
| adicionalTitulacao = salario * 0.1; |
| break; |
| case 'mestrado': |
| adicionalTitulacao = salario * 0.2; |
| break; |
| case 'doutorado': |
| adicionalTitulacao = salario * 0.3; |
| break; |
| default: |
| adicionalTitulacao = 0; |
| } |
| |
| // Adicional por tempo de serviço (5% por 5 anos) |
| adicionalTempoServico = salario * (Math.floor(tempoServico / 5) * 0.05); |
| |
| // Gratificação para professores de escola pública |
| if (escolaPublica === 'sim') { |
| gratificacao = salario * 0.15; |
| } |
| |
| // Bônus por carga horária |
| if (cargaHoraria > 40) { |
| bonus = (cargaHoraria - 40) * (salario / cargaHoraria) * 0.5; |
| } |
| |
| // Total benefits |
| const totalBeneficios = adicionalTitulacao + adicionalTempoServico + gratificacao + bonus; |
| const salarioTotal = salario + totalBeneficios; |
| |
| // Prepare results |
| const resultTitle = 'Cálculos para Professores'; |
| let resultContent = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Salário Base</h4> |
| <p class="text-xl font-semibold text-indigo-600">${formatCurrency(salario)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Salário Total</h4> |
| <p class="text-xl font-semibold text-green-600">${formatCurrency(salarioTotal)}</p> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Tipo de Contrato</h4> |
| <p class="text-lg">${ |
| tipoContrato === 'estatutario' ? 'Estatutário' : |
| tipoContrato === 'clt' ? 'CLT' : 'Horista' |
| }</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Carga Horária</h4> |
| <p class="text-lg">${cargaHoraria} horas semanais</p> |
| </div> |
| </div> |
| <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Benefícios Calculados</h4> |
| <div class="mt-2 space-y-2"> |
| <div class="flex justify-between"> |
| <span>Adicional por Titulação:</span> |
| <span class="font-medium text-blue-600">${formatCurrency(adicionalTitulacao)}</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Adicional por Tempo de Serviço (${tempoServico} anos):</span> |
| <span class="font-medium text-blue-600">${formatCurrency(adicionalTempoServico)}</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Gratificação ${escolaPublica === 'sim' ? '(Escola Pública)' : ''}:</span> |
| <span class="font-medium ${escolaPublica === 'sim' ? 'text-blue-600' : 'text-gray-500'}">${escolaPublica === 'sim' ? formatCurrency(gratificacao) : 'Não aplicável'}</span> |
| </div> |
| <div class="flex justify-between"> |
| <span>Bônus por Carga Horária:</span> |
| <span class="font-medium ${bonus > 0 ? 'text-blue-600' : 'text-gray-500'}">${bonus > 0 ? formatCurrency(bonus) : 'Não aplicável'}</span> |
| </div> |
| <div class="mt-2 pt-2 border-t border-gray-200 flex justify-between font-semibold"> |
| <span>Total de Benefícios:</span> |
| <span class="text-green-600">${formatCurrency(totalBeneficios)}</span> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| showResults(resultTitle, resultContent); |
| } |
| |
| // Calculate hourly rate |
| function calcularValorHora() { |
| const salario = parseFloat(document.getElementById('salario-hora').value) || 0; |
| const cargaSemanal = parseInt(document.getElementById('carga-semanal').value) || 40; |
| const diasUteis = parseInt(document.getElementById('dias-uteis').value) || 5; |
| |
| const horasMes = cargaSemanal * (52 / 12); // 52 semanas no ano / 12 meses |
| const valorHora = salario / horasMes; |
| |
| // Prepare results |
| const resultTitle = 'Cálculo de Valor Hora'; |
| let resultContent = ` |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Valor da Hora</h4> |
| <p class="text-xl font-semibold text-green-600">${formatCurrency(valorHora)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Horas Mensais</h4> |
| <p class="text-lg">${horasMes.toFixed(2)} horas</p> |
| </div> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Salário Mensal</h4> |
| <p class="text-lg text-indigo-600">${formatCurrency(salario)}</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Carga Horária Semanal</h4> |
| <p class="text-lg">${cargaSemanal} horas</p> |
| </div> |
| </div> |
| <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-gray-700 mb-2">Dias Úteis na Semana</h4> |
| <p class="text-lg">${diasUteis} dias</p> |
| </div> |
| `; |
| |
| showResults(resultTitle, resultContent); |
| } |
| |
| // Show results |
| function showResults(title, content) { |
| document.getElementById('result-title').textContent = title; |
| document.getElementById('result-content').innerHTML = content; |
| document.getElementById('results').classList.remove('hidden'); |
| |
| // Scroll to results |
| document.getElementById('results').scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| // Initialize with salary calculator |
| document.addEventListener('DOMContentLoaded', function() { |
| showCalculator('salario'); |
| }); |
| </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=Lewrybe/mystuff" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
