Hugging Face's logo

Spaces:
Lewrybe
/
mystuff
Running

App Files Community
Lewrybe commited on
Commit
f1d90e2
·
verified ·
1 Parent(s): b25cf88

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +872 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mystuff
3
- emoji: 🐢
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mystuff
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,872 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calculadora Trabalhista Universal</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .custom-shadow {
11
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
12
+ }
13
+ .slide-fade-enter-active {
14
+ transition: all 0.3s ease-out;
15
+ }
16
+ .slide-fade-leave-active {
17
+ transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
18
+ }
19
+ .slide-fade-enter-from,
20
+ .slide-fade-leave-to {
21
+ transform: translateX(20px);
22
+ opacity: 0;
23
+ }
24
+ .result-box {
25
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 min-h-screen">
30
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
31
+ <!-- Header -->
32
+ <header class="text-center mb-10">
33
+ <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">
34
+ <i class="fas fa-calculator mr-2"></i>Calculadora Trabalhista Universal
35
+ </h1>
36
+ <p class="text-gray-600">Cálculos precisos para todos os profissionais, incluindo professores</p>
37
+ </header>
38
+
39
+ <!-- Main Content -->
40
+ <main>
41
+ <!-- Calculator Selection -->
42
+ <div class="bg-white rounded-xl p-6 mb-8 custom-shadow">
43
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
44
+ <i class="fas fa-tools mr-2 text-indigo-600"></i> Selecione o Tipo de Cálculo
45
+ </h2>
46
+
47
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
48
+ <button onclick="showCalculator('salario')" class="calculator-btn bg-indigo-50 hover:bg-indigo-100 text-indigo-700">
49
+ <i class="fas fa-money-bill-wave mr-2"></i> Salário Líquido
50
+ </button>
51
+ <button onclick="showCalculator('ferias')" class="calculator-btn bg-blue-50 hover:bg-blue-100 text-blue-700">
52
+ <i class="fas fa-umbrella-beach mr-2"></i> Férias
53
+ </button>
54
+ <button onclick="showCalculator('decimo')" class="calculator-btn bg-green-50 hover:bg-green-100 text-green-700">
55
+ <i class="fas fa-gift mr-2"></i> 13º Salário
56
+ </button>
57
+ <button onclick="showCalculator('rescisao')" class="calculator-btn bg-red-50 hover:bg-red-100 text-red-700">
58
+ <i class="fas fa-file-contract mr-2"></i> Rescisão
59
+ </button>
60
+ <button onclick="showCalculator('professor')" class="calculator-btn bg-purple-50 hover:bg-purple-100 text-purple-700">
61
+ <i class="fas fa-chalkboard-teacher mr-2"></i> Cálculos para Professores
62
+ </button>
63
+ <button onclick="showCalculator('hora')" class="calculator-btn bg-yellow-50 hover:bg-yellow-100 text-yellow-700">
64
+ <i class="fas fa-clock mr-2"></i> Valor Hora
65
+ </button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Calculator Forms -->
70
+ <div id="calculators" class="bg-white rounded-xl p-6 custom-shadow">
71
+ <!-- Salary Calculator (Default) -->
72
+ <div id="salario-calculator" class="calculator-form">
73
+ <h3 class="text-lg font-semibold mb-4 text-indigo-700 flex items-center">
74
+ <i class="fas fa-money-bill-wave mr-2"></i> Cálculo de Salário Líquido
75
+ </h3>
76
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
77
+ <div>
78
+ <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label>
79
+ <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">
80
+ </div>
81
+ <div>
82
+ <label class="block text-sm font-medium text-gray-700 mb-1">Dependentes (IRRF)</label>
83
+ <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">
84
+ </div>
85
+ <div>
86
+ <label class="block text-sm font-medium text-gray-700 mb-1">Descontos (R$)</label>
87
+ <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">
88
+ </div>
89
+ <div>
90
+ <label class="block text-sm font-medium text-gray-700 mb-1">Benefícios (R$)</label>
91
+ <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">
92
+ </div>
93
+ </div>
94
+ <div class="mt-6">
95
+ <button onclick="calcularSalarioLiquido()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
96
+ Calcular Salário Líquido
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Vacation Calculator -->
102
+ <div id="ferias-calculator" class="calculator-form hidden">
103
+ <h3 class="text-lg font-semibold mb-4 text-blue-700 flex items-center">
104
+ <i class="fas fa-umbrella-beach mr-2"></i> Cálculo de Férias
105
+ </h3>
106
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
107
+ <div>
108
+ <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label>
109
+ <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">
110
+ </div>
111
+ <div>
112
+ <label class="block text-sm font-medium text-gray-700 mb-1">Dias de Férias</label>
113
+ <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">
114
+ </div>
115
+ <div>
116
+ <label class="block text-sm font-medium text-gray-700 mb-1">Abono Pecuniário (1/3)</label>
117
+ <select id="abono" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
118
+ <option value="nao">Não</option>
119
+ <option value="sim">Sim</option>
120
+ </select>
121
+ </div>
122
+ <div>
123
+ <label class="block text-sm font-medium text-gray-700 mb-1">Adiantar 13º?</label>
124
+ <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">
125
+ <option value="nao">Não</option>
126
+ <option value="sim">Sim</option>
127
+ </select>
128
+ </div>
129
+ </div>
130
+ <div class="mt-6">
131
+ <button onclick="calcularFerias()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
132
+ Calcular Férias
133
+ </button>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- 13th Salary Calculator -->
138
+ <div id="decimo-calculator" class="calculator-form hidden">
139
+ <h3 class="text-lg font-semibold mb-4 text-green-700 flex items-center">
140
+ <i class="fas fa-gift mr-2"></i> Cálculo de 13º Salário
141
+ </h3>
142
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
143
+ <div>
144
+ <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label>
145
+ <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">
146
+ </div>
147
+ <div>
148
+ <label class="block text-sm font-medium text-gray-700 mb-1">Meses Trabalhados</label>
149
+ <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">
150
+ </div>
151
+ <div>
152
+ <label class="block text-sm font-medium text-gray-700 mb-1">Parcela (1ª ou 2ª)</label>
153
+ <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">
154
+ <option value="1">1ª Parcela</option>
155
+ <option value="2">2ª Parcela</option>
156
+ </select>
157
+ </div>
158
+ </div>
159
+ <div class="mt-6">
160
+ <button onclick="calcularDecimo()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
161
+ Calcular 13º Salário
162
+ </button>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Termination Calculator -->
167
+ <div id="rescisao-calculator" class="calculator-form hidden">
168
+ <h3 class="text-lg font-semibold mb-4 text-red-700 flex items-center">
169
+ <i class="fas fa-file-contract mr-2"></i> Cálculo de Rescisão
170
+ </h3>
171
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
172
+ <div>
173
+ <label class="block text-sm font-medium text-gray-700 mb-1">Salário Bruto (R$)</label>
174
+ <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">
175
+ </div>
176
+ <div>
177
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tempo de Serviço (anos)</label>
178
+ <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">
179
+ </div>
180
+ <div>
181
+ <label class="block text-sm font-medium text-gray-700 mb-1">Motivo da Rescisão</label>
182
+ <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">
183
+ <option value="sem-justa-causa">Demissão sem justa causa</option>
184
+ <option value="justa-causa">Demissão por justa causa</option>
185
+ <option value="pedido-demissao">Pedido de demissão</option>
186
+ <option value="termino-contrato">Término de contrato</option>
187
+ </select>
188
+ </div>
189
+ <div>
190
+ <label class="block text-sm font-medium text-gray-700 mb-1">Férias Vencidas?</label>
191
+ <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">
192
+ <option value="nao">Não</option>
193
+ <option value="sim">Sim</option>
194
+ </select>
195
+ </div>
196
+ <div>
197
+ <label class="block text-sm font-medium text-gray-700 mb-1">Aviso Prévio Trabalhado?</label>
198
+ <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">
199
+ <option value="nao">Não</option>
200
+ <option value="sim">Sim</option>
201
+ </select>
202
+ </div>
203
+ <div>
204
+ <label class="block text-sm font-medium text-gray-700 mb-1">Saldo de Salário (dias)</label>
205
+ <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">
206
+ </div>
207
+ </div>
208
+ <div class="mt-6">
209
+ <button onclick="calcularRescisao()" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
210
+ Calcular Rescisão
211
+ </button>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Teacher Calculator -->
216
+ <div id="professor-calculator" class="calculator-form hidden">
217
+ <h3 class="text-lg font-semibold mb-4 text-purple-700 flex items-center">
218
+ <i class="fas fa-chalkboard-teacher mr-2"></i> Cálculos Específicos para Professores
219
+ </h3>
220
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
221
+ <div>
222
+ <label class="block text-sm font-medium text-gray-700 mb-1">Salário Base (R$)</label>
223
+ <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">
224
+ </div>
225
+ <div>
226
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Contrato</label>
227
+ <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">
228
+ <option value="estatutario">Estatutário</option>
229
+ <option value="clt">CLT</option>
230
+ <option value="horista">Horista</option>
231
+ </select>
232
+ </div>
233
+ <div>
234
+ <label class="block text-sm font-medium text-gray-700 mb-1">Carga Horária Semanal</label>
235
+ <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">
236
+ </div>
237
+ <div>
238
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tempo de Serviço (anos)</label>
239
+ <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">
240
+ </div>
241
+ <div>
242
+ <label class="block text-sm font-medium text-gray-700 mb-1">Nível de Titulação</label>
243
+ <select id="titulacao" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
244
+ <option value="graduacao">Graduação</option>
245
+ <option value="especializacao">Especialização</option>
246
+ <option value="mestrado">Mestrado</option>
247
+ <option value="doutorado">Doutorado</option>
248
+ </select>
249
+ </div>
250
+ <div>
251
+ <label class="block text-sm font-medium text-gray-700 mb-1">Trabalha em Escola Pública?</label>
252
+ <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">
253
+ <option value="sim">Sim</option>
254
+ <option value="nao">Não</option>
255
+ </select>
256
+ </div>
257
+ </div>
258
+ <div class="mt-6">
259
+ <button onclick="calcularProfessor()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
260
+ Calcular Benefícios
261
+ </button>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Hourly Rate Calculator -->
266
+ <div id="hora-calculator" class="calculator-form hidden">
267
+ <h3 class="text-lg font-semibold mb-4 text-yellow-700 flex items-center">
268
+ <i class="fas fa-clock mr-2"></i> Cálculo de Valor Hora
269
+ </h3>
270
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
271
+ <div>
272
+ <label class="block text-sm font-medium text-gray-700 mb-1">Salário Mensal (R$)</label>
273
+ <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">
274
+ </div>
275
+ <div>
276
+ <label class="block text-sm font-medium text-gray-700 mb-1">Carga Horária Semanal</label>
277
+ <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">
278
+ </div>
279
+ <div>
280
+ <label class="block text-sm font-medium text-gray-700 mb-1">Dias Úteis na Semana</label>
281
+ <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">
282
+ </div>
283
+ </div>
284
+ <div class="mt-6">
285
+ <button onclick="calcularValorHora()" class="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
286
+ Calcular Valor Hora
287
+ </button>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Results Section -->
293
+ <div id="results" class="mt-8 hidden">
294
+ <div class="result-box rounded-xl p-6 custom-shadow">
295
+ <div class="flex justify-between items-center mb-4">
296
+ <h3 class="text-xl font-semibold text-gray-800" id="result-title">Resultado</h3>
297
+ <button onclick="hideResults()" class="text-gray-500 hover:text-gray-700">
298
+ <i class="fas fa-times"></i>
299
+ </button>
300
+ </div>
301
+ <div id="result-content" class="space-y-4">
302
+ <!-- Results will be inserted here by JavaScript -->
303
+ </div>
304
+ <div class="mt-6 pt-4 border-t border-gray-200">
305
+ <button onclick="printResults()" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium">
306
+ <i class="fas fa-print mr-2"></i> Imprimir Resultado
307
+ </button>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Information Section -->
313
+ <div class="bg-white rounded-xl p-6 mt-8 custom-shadow">
314
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
315
+ <i class="fas fa-info-circle mr-2 text-indigo-600"></i> Informações Importantes
316
+ </h2>
317
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
318
+ <div class="bg-indigo-50 p-4 rounded-lg">
319
+ <h3 class="font-medium text-indigo-700 mb-2 flex items-center">
320
+ <i class="fas fa-exclamation-triangle mr-2"></i> Atenção
321
+ </h3>
322
+ <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>
323
+ </div>
324
+ <div class="bg-blue-50 p-4 rounded-lg">
325
+ <h3 class="font-medium text-blue-700 mb-2 flex items-center">
326
+ <i class="fas fa-calendar-alt mr-2"></i> Atualização
327
+ </h3>
328
+ <p class="text-sm text-gray-700">Alíquotas atualizadas conforme tabelas vigentes em 2023. Verifique sempre as atualizações legais.</p>
329
+ </div>
330
+ <div class="bg-green-50 p-4 rounded-lg">
331
+ <h3 class="font-medium text-green-700 mb-2 flex items-center">
332
+ <i class="fas fa-graduation-cap mr-2"></i> Professores
333
+ </h3>
334
+ <p class="text-sm text-gray-700">Cálculos específicos consideram adicional de titulação, plano de carreira e outros benefícios.</p>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </main>
339
+
340
+ <!-- Footer -->
341
+ <footer class="mt-12 text-center text-gray-600 text-sm">
342
+ <p>© 2023 Calculadora Trabalhista Universal. Todos os direitos reservados.</p>
343
+ <p class="mt-2">Esta ferramenta não substitui consulta com profissional especializado.</p>
344
+ </footer>
345
+ </div>
346
+
347
+ <script>
348
+ // Show calculator based on selection
349
+ function showCalculator(type) {
350
+ // Hide all calculators
351
+ document.querySelectorAll('.calculator-form').forEach(el => {
352
+ el.classList.add('hidden');
353
+ });
354
+
355
+ // Show selected calculator
356
+ document.getElementById(`${type}-calculator`).classList.remove('hidden');
357
+
358
+ // Hide results if showing
359
+ hideResults();
360
+ }
361
+
362
+ // Hide results section
363
+ function hideResults() {
364
+ document.getElementById('results').classList.add('hidden');
365
+ }
366
+
367
+ // Print results
368
+ function printResults() {
369
+ window.print();
370
+ }
371
+
372
+ // Format currency
373
+ function formatCurrency(value) {
374
+ return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
375
+ }
376
+
377
+ // Calculate INSS
378
+ function calcularINSS(salario) {
379
+ let inss = 0;
380
+
381
+ if (salario <= 1320.00) {
382
+ inss = salario * 0.075;
383
+ } else if (salario <= 2571.29) {
384
+ inss = (1320.00 * 0.075) + ((salario - 1320.00) * 0.09);
385
+ } else if (salario <= 3856.94) {
386
+ inss = (1320.00 * 0.075) + ((2571.29 - 1320.00) * 0.09) + ((salario - 2571.29) * 0.12);
387
+ } else if (salario <= 7507.49) {
388
+ inss = (1320.00 * 0.075) + ((2571.29 - 1320.00) * 0.09) + ((3856.94 - 2571.29) * 0.12) + ((salario - 3856.94) * 0.14);
389
+ } else {
390
+ inss = (1320.00 * 0.075) + ((2571.29 - 1320.00) * 0.09) + ((3856.94 - 2571.29) * 0.12) + ((7507.49 - 3856.94) * 0.14);
391
+ }
392
+
393
+ return inss;
394
+ }
395
+
396
+ // Calculate IRRF
397
+ function calcularIRRF(salario, inss, dependentes) {
398
+ const deducaoDependente = 189.59;
399
+ const baseCalculo = salario - inss - (dependentes * deducaoDependente);
400
+
401
+ let irrf = 0;
402
+ let aliquota = 0;
403
+ let deducao = 0;
404
+
405
+ if (baseCalculo <= 2112.00) {
406
+ aliquota = 0;
407
+ deducao = 0;
408
+ } else if (baseCalculo <= 2826.65) {
409
+ aliquota = 0.075;
410
+ deducao = 158.40;
411
+ } else if (baseCalculo <= 3751.05) {
412
+ aliquota = 0.15;
413
+ deducao = 370.40;
414
+ } else if (baseCalculo <= 4664.68) {
415
+ aliquota = 0.225;
416
+ deducao = 651.73;
417
+ } else {
418
+ aliquota = 0.275;
419
+ deducao = 884.96;
420
+ }
421
+
422
+ irrf = (baseCalculo * aliquota) - deducao;
423
+ return irrf > 0 ? irrf : 0;
424
+ }
425
+
426
+ // Calculate net salary
427
+ function calcularSalarioLiquido() {
428
+ const salarioBruto = parseFloat(document.getElementById('salario-bruto').value) || 0;
429
+ const dependentes = parseInt(document.getElementById('dependentes').value) || 0;
430
+ const descontos = parseFloat(document.getElementById('descontos').value) || 0;
431
+ const beneficios = parseFloat(document.getElementById('beneficios').value) || 0;
432
+
433
+ const inss = calcularINSS(salarioBruto);
434
+ const irrf = calcularIRRF(salarioBruto, inss, dependentes);
435
+
436
+ const salarioLiquido = salarioBruto - inss - irrf - descontos + beneficios;
437
+
438
+ // Prepare results
439
+ const resultTitle = 'Cálculo de Salário Líquido';
440
+ let resultContent = `
441
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
442
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
443
+ <h4 class="font-medium text-gray-700 mb-2">Salário Bruto</h4>
444
+ <p class="text-xl font-semibold text-indigo-600">${formatCurrency(salarioBruto)}</p>
445
+ </div>
446
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
447
+ <h4 class="font-medium text-gray-700 mb-2">Salário Líquido</h4>
448
+ <p class="text-xl font-semibold text-green-600">${formatCurrency(salarioLiquido)}</p>
449
+ </div>
450
+ </div>
451
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
452
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
453
+ <h4 class="font-medium text-gray-700 mb-2">INSS</h4>
454
+ <p class="text-lg text-blue-600">${formatCurrency(inss)}</p>
455
+ </div>
456
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
457
+ <h4 class="font-medium text-gray-700 mb-2">IRRF</h4>
458
+ <p class="text-lg text-red-600">${formatCurrency(irrf)}</p>
459
+ </div>
460
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
461
+ <h4 class="font-medium text-gray-700 mb-2">Outros Descontos</h4>
462
+ <p class="text-lg text-yellow-600">${formatCurrency(descontos)}</p>
463
+ </div>
464
+ </div>
465
+ <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200">
466
+ <h4 class="font-medium text-gray-700 mb-2">Benefícios Adicionais</h4>
467
+ <p class="text-lg text-green-600">${formatCurrency(beneficios)}</p>
468
+ </div>
469
+ `;
470
+
471
+ showResults(resultTitle, resultContent);
472
+ }
473
+
474
+ // Calculate vacation
475
+ function calcularFerias() {
476
+ const salario = parseFloat(document.getElementById('ferias-salario').value) || 0;
477
+ const diasFerias = parseInt(document.getElementById('dias-ferias').value) || 30;
478
+ const abono = document.getElementById('abono').value;
479
+ const adiantar13 = document.getElementById('adiantar-13').value;
480
+
481
+ const valorFerias = (salario / 30) * diasFerias;
482
+ const umTerco = valorFerias / 3;
483
+ const valorAbono = abono === 'sim' ? umTerco : 0;
484
+ const adiantamento13 = adiantar13 === 'sim' ? salario / 2 : 0;
485
+
486
+ const inssFerias = calcularINSS(valorFerias + valorAbono);
487
+ const irrfFerias = calcularIRRF(valorFerias + valorAbono, inssFerias, 0);
488
+
489
+ const totalFerias = valorFerias + valorAbono - inssFerias - irrfFerias + adiantamento13;
490
+
491
+ // Prepare results
492
+ const resultTitle = 'Cálculo de Férias';
493
+ let resultContent = `
494
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
495
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
496
+ <h4 class="font-medium text-gray-700 mb-2">Valor das Férias (${diasFerias} dias)</h4>
497
+ <p class="text-xl font-semibold text-blue-600">${formatCurrency(valorFerias)}</p>
498
+ </div>
499
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
500
+ <h4 class="font-medium text-gray-700 mb-2">Total a Receber</h4>
501
+ <p class="text-xl font-semibold text-green-600">${formatCurrency(totalFerias)}</p>
502
+ </div>
503
+ </div>
504
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
505
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
506
+ <h4 class="font-medium text-gray-700 mb-2">1/3 de Férias</h4>
507
+ <p class="text-lg ${abono === 'sim' ? 'text-green-600' : 'text-gray-500'}">${abono === 'sim' ? formatCurrency(valorAbono) : 'Não aplicado'}</p>
508
+ </div>
509
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
510
+ <h4 class="font-medium text-gray-700 mb-2">INSS sobre Férias</h4>
511
+ <p class="text-lg text-red-600">${formatCurrency(inssFerias)}</p>
512
+ </div>
513
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
514
+ <h4 class="font-medium text-gray-700 mb-2">IRRF sobre Férias</h4>
515
+ <p class="text-lg text-red-600">${formatCurrency(irrfFerias)}</p>
516
+ </div>
517
+ </div>
518
+ <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200">
519
+ <h4 class="font-medium text-gray-700 mb-2">Adiantamento 13º Salário</h4>
520
+ <p class="text-lg ${adiantar13 === 'sim' ? 'text-purple-600' : 'text-gray-500'}">${adiantar13 === 'sim' ? formatCurrency(adiantamento13) : 'Não aplicado'}</p>
521
+ </div>
522
+ `;
523
+
524
+ showResults(resultTitle, resultContent);
525
+ }
526
+
527
+ // Calculate 13th salary
528
+ function calcularDecimo() {
529
+ const salario = parseFloat(document.getElementById('decimo-salario').value) || 0;
530
+ const mesesTrabalhados = parseInt(document.getElementById('meses-trabalhados').value) || 12;
531
+ const parcela = document.getElementById('parcela-decimo').value;
532
+
533
+ const valorDecimo = (salario * mesesTrabalhados) / 12;
534
+ let valorParcela = 0;
535
+ let inssDecimo = 0;
536
+ let irrfDecimo = 0;
537
+
538
+ if (parcela === '1') {
539
+ valorParcela = valorDecimo * 0.5;
540
+ // 1ª parcela não tem desconto de INSS/IRRF
541
+ } else {
542
+ valorParcela = valorDecimo * 0.5;
543
+ inssDecimo = calcularINSS(valorDecimo);
544
+ irrfDecimo = calcularIRRF(valorDecimo, inssDecimo, 0);
545
+ valorParcela = valorDecimo - inssDecimo - irrfDecimo;
546
+ }
547
+
548
+ // Prepare results
549
+ const resultTitle = 'Cálculo de 13º Salário';
550
+ let resultContent = `
551
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
552
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
553
+ <h4 class="font-medium text-gray-700 mb-2">Valor Total do 13º</h4>
554
+ <p class="text-xl font-semibold text-green-600">${formatCurrency(valorDecimo)}</p>
555
+ </div>
556
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
557
+ <h4 class="font-medium text-gray-700 mb-2">${parcela === '1' ? '1ª Parcela' : '2ª Parcela (Líquida)'}</h4>
558
+ <p class="text-xl font-semibold text-blue-600">${formatCurrency(valorParcela)}</p>
559
+ </div>
560
+ </div>
561
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
562
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
563
+ <h4 class="font-medium text-gray-700 mb-2">Meses Trabalhados</h4>
564
+ <p class="text-lg">${mesesTrabalhados} meses</p>
565
+ </div>
566
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
567
+ <h4 class="font-medium text-gray-700 mb-2">Parcela</h4>
568
+ <p class="text-lg">${parcela === '1' ? '1ª (50% sem descontos)' : '2ª (com descontos)'}</p>
569
+ </div>
570
+ </div>
571
+ `;
572
+
573
+ if (parcela === '2') {
574
+ resultContent += `
575
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
576
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
577
+ <h4 class="font-medium text-gray-700 mb-2">INSS</h4>
578
+ <p class="text-lg text-red-600">${formatCurrency(inssDecimo)}</p>
579
+ </div>
580
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
581
+ <h4 class="font-medium text-gray-700 mb-2">IRRF</h4>
582
+ <p class="text-lg text-red-600">${formatCurrency(irrfDecimo)}</p>
583
+ </div>
584
+ </div>
585
+ `;
586
+ }
587
+
588
+ showResults(resultTitle, resultContent);
589
+ }
590
+
591
+ // Calculate termination
592
+ function calcularRescisao() {
593
+ const salario = parseFloat(document.getElementById('rescisao-salario').value) || 0;
594
+ const tempoServico = parseInt(document.getElementById('tempo-servico').value) || 0;
595
+ const motivo = document.getElementById('motivo-rescisao').value;
596
+ const feriasVencidas = document.getElementById('ferias-vencidas').value;
597
+ const avisoPrevio = document.getElementById('aviso-previo').value;
598
+ const saldoSalario = parseInt(document.getElementById('saldo-salario').value) || 0;
599
+
600
+ // Calculate components
601
+ const saldoSalarioValor = (salario / 30) * saldoSalario;
602
+ let avisoPrevioValor = 0;
603
+ let feriasProporcionais = 0;
604
+ let decimoProporcional = 0;
605
+ let multaFGTS = 0;
606
+ let seguroDesemprego = 0;
607
+
608
+ // Aviso prévio
609
+ if (avisoPrevio === 'nao' && motivo !== 'justa-causa') {
610
+ avisoPrevioValor = salario;
611
+ }
612
+
613
+ // Férias proporcionais
614
+ const mesesTrabalhadosAno = tempoServico % 12;
615
+ feriasProporcionais = (salario / 12) * mesesTrabalhadosAno;
616
+
617
+ if (feriasVencidas === 'sim') {
618
+ feriasProporcionais += salario;
619
+ }
620
+
621
+ // 13º proporcional
622
+ decimoProporcional = (salario / 12) * mesesTrabalhadosAno;
623
+
624
+ // FGTS + multa
625
+ const fgts = salario * 0.08 * tempoServico;
626
+
627
+ if (motivo === 'sem-justa-causa') {
628
+ multaFGTS = fgts * 0.4;
629
+ }
630
+
631
+ // Seguro desemprego
632
+ if (motivo === 'sem-justa-causa' || motivo === 'termino-contrato') {
633
+ if (tempoServico >= 12) {
634
+ seguroDesemprego = salario * 0.8;
635
+ } else if (tempoServico >= 6) {
636
+ seguroDesemprego = salario * 0.6;
637
+ }
638
+ }
639
+
640
+ // Total
641
+ let totalRescisao = saldoSalarioValor + avisoPrevioValor + feriasProporcionais + decimoProporcional;
642
+
643
+ if (motivo === 'pedido-demissao') {
644
+ totalRescisao = saldoSalarioValor + feriasProporcionais;
645
+ } else if (motivo === 'justa-causa') {
646
+ totalRescisao = saldoSalarioValor;
647
+ }
648
+
649
+ // Prepare results
650
+ const resultTitle = 'Cálculo de Rescisão';
651
+ let resultContent = `
652
+ <div class="bg-white p-4 rounded-lg border border-gray-200 mb-4">
653
+ <h4 class="font-medium text-gray-700 mb-2">Motivo da Rescisão</h4>
654
+ <p class="text-lg">
655
+ ${
656
+ motivo === 'sem-justa-causa' ? 'Demissão sem justa causa' :
657
+ motivo === 'justa-causa' ? 'Demissão por justa causa' :
658
+ motivo === 'pedido-demissao' ? 'Pedido de demissão' : 'Término de contrato'
659
+ }
660
+ </p>
661
+ </div>
662
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
663
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
664
+ <h4 class="font-medium text-gray-700 mb-2">Total da Rescisão</h4>
665
+ <p class="text-xl font-semibold text-green-600">${formatCurrency(totalRescisao)}</p>
666
+ </div>
667
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
668
+ <h4 class="font-medium text-gray-700 mb-2">Tempo de Serviço</h4>
669
+ <p class="text-lg">${tempoServico} anos</p>
670
+ </div>
671
+ </div>
672
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
673
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
674
+ <h4 class="font-medium text-gray-700 mb-2">Saldo de Salário (${saldoSalario} dias)</h4>
675
+ <p class="text-lg text-blue-600">${formatCurrency(saldoSalarioValor)}</p>
676
+ </div>
677
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
678
+ <h4 class="font-medium text-gray-700 mb-2">Aviso Prévio</h4>
679
+ <p class="text-lg ${avisoPrevioValor > 0 ? 'text-blue-600' : 'text-gray-500'}">${avisoPrevioValor > 0 ? formatCurrency(avisoPrevioValor) : 'Não aplicável'}</p>
680
+ </div>
681
+ </div>
682
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
683
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
684
+ <h4 class="font-medium text-gray-700 mb-2">Férias Proporcionais</h4>
685
+ <p class="text-lg text-purple-600">${formatCurrency(feriasProporcionais)}</p>
686
+ </div>
687
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
688
+ <h4 class="font-medium text-gray-700 mb-2">13º Proporcional</h4>
689
+ <p class="text-lg text-purple-600">${formatCurrency(decimoProporcional)}</p>
690
+ </div>
691
+ </div>
692
+ `;
693
+
694
+ if (motivo === 'sem-justa-causa' || motivo === 'termino-contrato') {
695
+ resultContent += `
696
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
697
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
698
+ <h4 class="font-medium text-gray-700 mb-2">FGTS + Multa</h4>
699
+ <p class="text-lg text-indigo-600">${formatCurrency(fgts + multaFGTS)}</p>
700
+ </div>
701
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
702
+ <h4 class="font-medium text-gray-700 mb-2">Seguro-Desemprego</h4>
703
+ <p class="text-lg ${seguroDesemprego > 0 ? 'text-green-600' : 'text-gray-500'}">${seguroDesemprego > 0 ? formatCurrency(seguroDesemprego) : 'Não aplicável'}</p>
704
+ </div>
705
+ </div>
706
+ `;
707
+ }
708
+
709
+ showResults(resultTitle, resultContent);
710
+ }
711
+
712
+ // Calculate teacher benefits
713
+ function calcularProfessor() {
714
+ const salario = parseFloat(document.getElementById('prof-salario').value) || 0;
715
+ const tipoContrato = document.getElementById('tipo-contrato').value;
716
+ const cargaHoraria = parseInt(document.getElementById('carga-horaria').value) || 40;
717
+ const tempoServico = parseInt(document.getElementById('tempo-servico-prof').value) || 0;
718
+ const titulacao = document.getElementById('titulacao').value;
719
+ const escolaPublica = document.getElementById('escola-publica').value;
720
+
721
+ // Calculate benefits
722
+ let adicionalTitulacao = 0;
723
+ let adicionalTempoServico = 0;
724
+ let gratificacao = 0;
725
+ let bonus = 0;
726
+
727
+ // Adicional por titulação
728
+ switch(titulacao) {
729
+ case 'especializacao':
730
+ adicionalTitulacao = salario * 0.1;
731
+ break;
732
+ case 'mestrado':
733
+ adicionalTitulacao = salario * 0.2;
734
+ break;
735
+ case 'doutorado':
736
+ adicionalTitulacao = salario * 0.3;
737
+ break;
738
+ default:
739
+ adicionalTitulacao = 0;
740
+ }
741
+
742
+ // Adicional por tempo de serviço (5% por 5 anos)
743
+ adicionalTempoServico = salario * (Math.floor(tempoServico / 5) * 0.05);
744
+
745
+ // Gratificação para professores de escola pública
746
+ if (escolaPublica === 'sim') {
747
+ gratificacao = salario * 0.15;
748
+ }
749
+
750
+ // Bônus por carga horária
751
+ if (cargaHoraria > 40) {
752
+ bonus = (cargaHoraria - 40) * (salario / cargaHoraria) * 0.5;
753
+ }
754
+
755
+ // Total benefits
756
+ const totalBeneficios = adicionalTitulacao + adicionalTempoServico + gratificacao + bonus;
757
+ const salarioTotal = salario + totalBeneficios;
758
+
759
+ // Prepare results
760
+ const resultTitle = 'Cálculos para Professores';
761
+ let resultContent = `
762
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
763
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
764
+ <h4 class="font-medium text-gray-700 mb-2">Salário Base</h4>
765
+ <p class="text-xl font-semibold text-indigo-600">${formatCurrency(salario)}</p>
766
+ </div>
767
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
768
+ <h4 class="font-medium text-gray-700 mb-2">Salário Total</h4>
769
+ <p class="text-xl font-semibold text-green-600">${formatCurrency(salarioTotal)}</p>
770
+ </div>
771
+ </div>
772
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
773
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
774
+ <h4 class="font-medium text-gray-700 mb-2">Tipo de Contrato</h4>
775
+ <p class="text-lg">${
776
+ tipoContrato === 'estatutario' ? 'Estatutário' :
777
+ tipoContrato === 'clt' ? 'CLT' : 'Horista'
778
+ }</p>
779
+ </div>
780
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
781
+ <h4 class="font-medium text-gray-700 mb-2">Carga Horária</h4>
782
+ <p class="text-lg">${cargaHoraria} horas semanais</p>
783
+ </div>
784
+ </div>
785
+ <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200">
786
+ <h4 class="font-medium text-gray-700 mb-2">Benefícios Calculados</h4>
787
+ <div class="mt-2 space-y-2">
788
+ <div class="flex justify-between">
789
+ <span>Adicional por Titulação:</span>
790
+ <span class="font-medium text-blue-600">${formatCurrency(adicionalTitulacao)}</span>
791
+ </div>
792
+ <div class="flex justify-between">
793
+ <span>Adicional por Tempo de Serviço (${tempoServico} anos):</span>
794
+ <span class="font-medium text-blue-600">${formatCurrency(adicionalTempoServico)}</span>
795
+ </div>
796
+ <div class="flex justify-between">
797
+ <span>Gratificação ${escolaPublica === 'sim' ? '(Escola Pública)' : ''}:</span>
798
+ <span class="font-medium ${escolaPublica === 'sim' ? 'text-blue-600' : 'text-gray-500'}">${escolaPublica === 'sim' ? formatCurrency(gratificacao) : 'Não aplicável'}</span>
799
+ </div>
800
+ <div class="flex justify-between">
801
+ <span>Bônus por Carga Horária:</span>
802
+ <span class="font-medium ${bonus > 0 ? 'text-blue-600' : 'text-gray-500'}">${bonus > 0 ? formatCurrency(bonus) : 'Não aplicável'}</span>
803
+ </div>
804
+ <div class="mt-2 pt-2 border-t border-gray-200 flex justify-between font-semibold">
805
+ <span>Total de Benefícios:</span>
806
+ <span class="text-green-600">${formatCurrency(totalBeneficios)}</span>
807
+ </div>
808
+ </div>
809
+ </div>
810
+ `;
811
+
812
+ showResults(resultTitle, resultContent);
813
+ }
814
+
815
+ // Calculate hourly rate
816
+ function calcularValorHora() {
817
+ const salario = parseFloat(document.getElementById('salario-hora').value) || 0;
818
+ const cargaSemanal = parseInt(document.getElementById('carga-semanal').value) || 40;
819
+ const diasUteis = parseInt(document.getElementById('dias-uteis').value) || 5;
820
+
821
+ const horasMes = cargaSemanal * (52 / 12); // 52 semanas no ano / 12 meses
822
+ const valorHora = salario / horasMes;
823
+
824
+ // Prepare results
825
+ const resultTitle = 'Cálculo de Valor Hora';
826
+ let resultContent = `
827
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
828
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
829
+ <h4 class="font-medium text-gray-700 mb-2">Valor da Hora</h4>
830
+ <p class="text-xl font-semibold text-green-600">${formatCurrency(valorHora)}</p>
831
+ </div>
832
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
833
+ <h4 class="font-medium text-gray-700 mb-2">Horas Mensais</h4>
834
+ <p class="text-lg">${horasMes.toFixed(2)} horas</p>
835
+ </div>
836
+ </div>
837
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
838
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
839
+ <h4 class="font-medium text-gray-700 mb-2">Salário Mensal</h4>
840
+ <p class="text-lg text-indigo-600">${formatCurrency(salario)}</p>
841
+ </div>
842
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
843
+ <h4 class="font-medium text-gray-700 mb-2">Carga Horária Semanal</h4>
844
+ <p class="text-lg">${cargaSemanal} horas</p>
845
+ </div>
846
+ </div>
847
+ <div class="mt-4 bg-white p-4 rounded-lg border border-gray-200">
848
+ <h4 class="font-medium text-gray-700 mb-2">Dias Úteis na Semana</h4>
849
+ <p class="text-lg">${diasUteis} dias</p>
850
+ </div>
851
+ `;
852
+
853
+ showResults(resultTitle, resultContent);
854
+ }
855
+
856
+ // Show results
857
+ function showResults(title, content) {
858
+ document.getElementById('result-title').textContent = title;
859
+ document.getElementById('result-content').innerHTML = content;
860
+ document.getElementById('results').classList.remove('hidden');
861
+
862
+ // Scroll to results
863
+ document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
864
+ }
865
+
866
+ // Initialize with salary calculator
867
+ document.addEventListener('DOMContentLoaded', function() {
868
+ showCalculator('salario');
869
+ });
870
+ </script>
871
+ <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>
872
+ </html>