Hugging Face's logo

Spaces:
Prstore38
/
sst-menager
Running

App Files Community
Prstore38 commited on
Commit
650d808
·
verified ·
1 Parent(s): c34fd4f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +592 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sst Menager
3
- emoji: 😻
4
  colorFrom: purple
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: sst-menager
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: red
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,592 @@
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>SST Document Manager</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #10b981 0%, #ffffff 50%, #1f2937 100%);
12
+ }
13
+ .document-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .sidebar {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .chat-bubble {
21
+ animation: fadeIn 0.3s ease-in-out;
22
+ }
23
+ @keyframes fadeIn {
24
+ from { opacity: 0; transform: translateY(10px); }
25
+ to { opacity: 1; transform: translateY(0); }
26
+ }
27
+ .pulse-alert {
28
+ animation: pulse 2s infinite;
29
+ }
30
+ @keyframes pulse {
31
+ 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
32
+ 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
33
+ 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50 font-sans">
38
+ <!-- Main Container -->
39
+ <div class="flex h-screen overflow-hidden">
40
+ <!-- Sidebar -->
41
+ <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0 flex flex-col">
42
+ <div class="p-4 flex items-center justify-center border-b border-gray-700">
43
+ <div class="flex items-center">
44
+ <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-3">
45
+ <i class="fas fa-shield-alt text-white"></i>
46
+ </div>
47
+ <span class="text-xl font-bold">SST Manager</span>
48
+ </div>
49
+ </div>
50
+ <div class="p-4 border-b border-gray-700">
51
+ <div class="flex items-center space-x-3">
52
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
53
+ <i class="fas fa-user text-green-800"></i>
54
+ </div>
55
+ <div>
56
+ <p class="font-medium">Admin User</p>
57
+ <p class="text-xs text-gray-400">[email protected]</p>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <nav class="flex-1 overflow-y-auto">
62
+ <div class="p-2">
63
+ <p class="text-xs uppercase text-gray-400 mb-2 px-2">Menu Principal</p>
64
+ <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded bg-gray-700 text-white">
65
+ <i class="fas fa-tachometer-alt w-5"></i>
66
+ <span>Dashboard</span>
67
+ </a>
68
+ <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1">
69
+ <i class="fas fa-file-alt w-5"></i>
70
+ <span>Documentos SST</span>
71
+ </a>
72
+ <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1">
73
+ <i class="fas fa-leaf w-5"></i>
74
+ <span>Ambientais</span>
75
+ </a>
76
+ <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1">
77
+ <i class="fas fa-building w-5"></i>
78
+ <span>Terceiros</span>
79
+ </a>
80
+ <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1">
81
+ <i class="fas fa-cog w-5"></i>
82
+ <span>Configurações</span>
83
+ </a>
84
+ </div>
85
+ <div class="p-2 mt-4">
86
+ <p class="text-xs uppercase text-gray-400 mb-2 px-2">Ramo de Atividade</p>
87
+ <div class="px-2">
88
+ <select class="w-full bg-gray-700 text-white rounded px-3 py-2 text-sm border border-gray-600 focus:outline-none focus:ring-1 focus:ring-green-500">
89
+ <option>Construção Civil</option>
90
+ <option>Indústria</option>
91
+ <option>Comércio</option>
92
+ <option>Serviços</option>
93
+ <option>Saúde</option>
94
+ </select>
95
+ </div>
96
+ </div>
97
+ </nav>
98
+ <div class="p-4 border-t border-gray-700">
99
+ <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded flex items-center justify-center space-x-2">
100
+ <i class="fas fa-sign-out-alt"></i>
101
+ <span>Sair</span>
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Main Content -->
107
+ <div class="flex-1 flex flex-col overflow-hidden">
108
+ <!-- Top Navigation -->
109
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between px-6 py-3">
110
+ <div class="flex items-center">
111
+ <button id="sidebarToggle" class="text-gray-500 mr-4 md:hidden">
112
+ <i class="fas fa-bars"></i>
113
+ </button>
114
+ <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1>
115
+ </div>
116
+ <div class="flex items-center space-x-4">
117
+ <div class="relative">
118
+ <button class="text-gray-500 hover:text-gray-700">
119
+ <i class="fas fa-bell"></i>
120
+ </button>
121
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
122
+ </div>
123
+ <div class="relative">
124
+ <button class="text-gray-500 hover:text-gray-700">
125
+ <i class="fas fa-envelope"></i>
126
+ </button>
127
+ <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
128
+ </div>
129
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
130
+ <i class="fas fa-user text-green-800"></i>
131
+ </div>
132
+ </div>
133
+ </header>
134
+
135
+ <!-- Dashboard Content -->
136
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
137
+ <!-- Stats Cards -->
138
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
139
+ <div class="bg-white rounded-lg shadow p-6">
140
+ <div class="flex items-center justify-between">
141
+ <div>
142
+ <p class="text-gray-500">Documentos SST</p>
143
+ <p class="text-2xl font-bold">24</p>
144
+ </div>
145
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
146
+ <i class="fas fa-file-alt text-green-600 text-xl"></i>
147
+ </div>
148
+ </div>
149
+ <div class="mt-4">
150
+ <div class="flex items-center justify-between text-sm">
151
+ <span class="text-gray-500">Vencendo em 30 dias</span>
152
+ <span class="font-semibold text-red-500">3</span>
153
+ </div>
154
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
155
+ <div class="bg-red-500 h-2 rounded-full" style="width: 25%"></div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="bg-white rounded-lg shadow p-6">
161
+ <div class="flex items-center justify-between">
162
+ <div>
163
+ <p class="text-gray-500">Documentos Ambientais</p>
164
+ <p class="text-2xl font-bold">12</p>
165
+ </div>
166
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
167
+ <i class="fas fa-leaf text-blue-600 text-xl"></i>
168
+ </div>
169
+ </div>
170
+ <div class="mt-4">
171
+ <div class="flex items-center justify-between text-sm">
172
+ <span class="text-gray-500">Próximos a vencer</span>
173
+ <span class="font-semibold text-yellow-500">2</span>
174
+ </div>
175
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
176
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 16%"></div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-white rounded-lg shadow p-6">
182
+ <div class="flex items-center justify-between">
183
+ <div>
184
+ <p class="text-gray-500">Certificados Terceiros</p>
185
+ <p class="text-2xl font-bold">18</p>
186
+ </div>
187
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
188
+ <i class="fas fa-building text-purple-600 text-xl"></i>
189
+ </div>
190
+ </div>
191
+ <div class="mt-4">
192
+ <div class="flex items-center justify-between text-sm">
193
+ <span class="text-gray-500">Vencidos</span>
194
+ <span class="font-semibold text-red-500">1</span>
195
+ </div>
196
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
197
+ <div class="bg-red-500 h-2 rounded-full" style="width: 8%"></div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="bg-white rounded-lg shadow p-6">
203
+ <div class="flex items-center justify-between">
204
+ <div>
205
+ <p class="text-gray-500">NRs Aplicáveis</p>
206
+ <p class="text-2xl font-bold">8</p>
207
+ </div>
208
+ <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
209
+ <i class="fas fa-clipboard-list text-orange-600 text-xl"></i>
210
+ </div>
211
+ </div>
212
+ <div class="mt-4">
213
+ <div class="flex items-center justify-between text-sm">
214
+ <span class="text-gray-500">Atualizações recentes</span>
215
+ <span class="font-semibold text-green-500">1</span>
216
+ </div>
217
+ <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
218
+ <div class="bg-green-500 h-2 rounded-full" style="width: 12%"></div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Documents Section -->
225
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
226
+ <!-- Recent Documents -->
227
+ <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden">
228
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
229
+ <h2 class="text-lg font-semibold text-gray-800">Documentos Recentes</h2>
230
+ <button class="text-sm text-green-600 hover:text-green-800 font-medium">Ver todos</button>
231
+ </div>
232
+ <div class="divide-y divide-gray-200">
233
+ <!-- Document Item -->
234
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition">
235
+ <div class="flex items-center justify-between">
236
+ <div class="flex items-center space-x-4">
237
+ <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center">
238
+ <i class="fas fa-file-pdf text-red-500"></i>
239
+ </div>
240
+ <div>
241
+ <p class="font-medium">PPRA - 2023</p>
242
+ <p class="text-sm text-gray-500">Construção Civil</p>
243
+ </div>
244
+ </div>
245
+ <div class="text-right">
246
+ <p class="text-sm font-medium text-green-600">Válido até 15/12/2023</p>
247
+ <p class="text-xs text-gray-500">30 dias restantes</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Document Item with Alert -->
253
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition pulse-alert">
254
+ <div class="flex items-center justify-between">
255
+ <div class="flex items-center space-x-4">
256
+ <div class="w-10 h-10 rounded bg-yellow-100 flex items-center justify-center">
257
+ <i class="fas fa-file-word text-blue-500"></i>
258
+ </div>
259
+ <div>
260
+ <p class="font-medium">PCMSO - 2023</p>
261
+ <p class="text-sm text-gray-500">Construção Civil</p>
262
+ </div>
263
+ </div>
264
+ <div class="text-right">
265
+ <p class="text-sm font-medium text-red-600">Vence em 7 dias</p>
266
+ <p class="text-xs text-gray-500">23/11/2023</p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Document Item -->
272
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition">
273
+ <div class="flex items-center justify-between">
274
+ <div class="flex items-center space-x-4">
275
+ <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center">
276
+ <i class="fas fa-file-excel text-green-500"></i>
277
+ </div>
278
+ <div>
279
+ <p class="font-medium">Laudo de Insalubridade</p>
280
+ <p class="text-sm text-gray-500">NR-15</p>
281
+ </div>
282
+ </div>
283
+ <div class="text-right">
284
+ <p class="text-sm font-medium text-yellow-600">Vence em 15 dias</p>
285
+ <p class="text-xs text-gray-500">01/12/2023</p>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Document Item -->
291
+ <div class="p-4 hover:bg-gray-50 cursor-pointer transition">
292
+ <div class="flex items-center justify-between">
293
+ <div class="flex items-center space-x-4">
294
+ <div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center">
295
+ <i class="fas fa-file-pdf text-red-500"></i>
296
+ </div>
297
+ <div>
298
+ <p class="font-medium">CART - 2023</p>
299
+ <p class="text-sm text-gray-500">NR-18</p>
300
+ </div>
301
+ </div>
302
+ <div class="text-right">
303
+ <p class="text-sm font-medium text-green-600">Válido até 30/04/2024</p>
304
+ <p class="text-xs text-gray-500">163 dias restantes</p>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Quick Actions and SST Bot -->
312
+ <div class="space-y-6">
313
+ <!-- Quick Actions -->
314
+ <div class="bg-white rounded-lg shadow overflow-hidden">
315
+ <div class="px-6 py-4 border-b border-gray-200">
316
+ <h2 class="text-lg font-semibold text-gray-800">Ações Rápidas</h2>
317
+ </div>
318
+ <div class="p-4 space-y-3">
319
+ <button class="w-full flex items-center space-x-3 bg-green-50 hover:bg-green-100 text-green-700 px-4 py-3 rounded-lg transition">
320
+ <i class="fas fa-plus-circle text-green-600"></i>
321
+ <span>Novo Documento SST</span>
322
+ </button>
323
+ <button class="w-full flex items-center space-x-3 bg-blue-50 hover:bg-blue-100 text-blue-700 px-4 py-3 rounded-lg transition">
324
+ <i class="fas fa-cloud-upload-alt text-blue-600"></i>
325
+ <span>Upload em Massa</span>
326
+ </button>
327
+ <button class="w-full flex items-center space-x-3 bg-purple-50 hover:bg-purple-100 text-purple-700 px-4 py-3 rounded-lg transition">
328
+ <i class="fas fa-building text-purple-600"></i>
329
+ <span>Cadastrar Terceiro</span>
330
+ </button>
331
+ <button class="w-full flex items-center space-x-3 bg-yellow-50 hover:bg-yellow-100 text-yellow-700 px-4 py-3 rounded-lg transition">
332
+ <i class="fas fa-file-export text-yellow-600"></i>
333
+ <span>Gerar Relatório</span>
334
+ </button>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- SST Bot -->
339
+ <div class="bg-white rounded-lg shadow overflow-hidden">
340
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
341
+ <h2 class="text-lg font-semibold text-gray-800">SST Bot Assistente</h2>
342
+ <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
343
+ <i class="fas fa-robot text-white text-xs"></i>
344
+ </div>
345
+ </div>
346
+ <div class="p-4">
347
+ <div class="bg-gray-100 rounded-lg p-3 mb-3">
348
+ <p class="text-sm text-gray-700">Olá! Sou o assistente de SST. Como posso ajudar você hoje?</p>
349
+ </div>
350
+
351
+ <div id="chatContainer" class="h-48 overflow-y-auto mb-3 space-y-2">
352
+ <!-- Chat messages will appear here -->
353
+ </div>
354
+
355
+ <div class="flex space-x-2">
356
+ <input type="text" id="chatInput" placeholder="Digite sua pergunta..." class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-green-500">
357
+ <button id="sendChat" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
358
+ <i class="fas fa-paper-plane"></i>
359
+ </button>
360
+ </div>
361
+
362
+ <div class="mt-3 grid grid-cols-2 gap-2">
363
+ <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">
364
+ O que é PPRA?
365
+ </button>
366
+ <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">
367
+ NRs para construção
368
+ </button>
369
+ <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">
370
+ PCMSO obrigatório?
371
+ </button>
372
+ <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">
373
+ Documentos vencendo
374
+ </button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- NRs Section -->
382
+ <div class="mt-6 bg-white rounded-lg shadow overflow-hidden">
383
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
384
+ <h2 class="text-lg font-semibold text-gray-800">NRs Aplicáveis ao Seu Ramo</h2>
385
+ <div class="flex items-center space-x-2">
386
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Construção Civil</span>
387
+ <button class="text-sm text-green-600 hover:text-green-800 font-medium">Ver todas</button>
388
+ </div>
389
+ </div>
390
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-4">
391
+ <!-- NR Card -->
392
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
393
+ <div class="flex items-center justify-between mb-2">
394
+ <span class="font-bold text-gray-800">NR-18</span>
395
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Atualizada</span>
396
+ </div>
397
+ <p class="text-sm text-gray-600 mb-3">Condições e Meio Ambiente de Trabalho na Indústria da Construção</p>
398
+ <div class="flex justify-between items-center text-xs text-gray-500">
399
+ <span>Última revisão: 2022</span>
400
+ <button class="text-green-600 hover:text-green-800">
401
+ <i class="fas fa-book-open"></i>
402
+ </button>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- NR Card -->
407
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
408
+ <div class="flex items-center justify-between mb-2">
409
+ <span class="font-bold text-gray-800">NR-35</span>
410
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Ativa</span>
411
+ </div>
412
+ <p class="text-sm text-gray-600 mb-3">Trabalho em Altura</p>
413
+ <div class="flex justify-between items-center text-xs text-gray-500">
414
+ <span>Última revisão: 2021</span>
415
+ <button class="text-green-600 hover:text-green-800">
416
+ <i class="fas fa-book-open"></i>
417
+ </button>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- NR Card -->
422
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
423
+ <div class="flex items-center justify-between mb-2">
424
+ <span class="font-bold text-gray-800">NR-10</span>
425
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Ativa</span>
426
+ </div>
427
+ <p class="text-sm text-gray-600 mb-3">Segurança em Instalações e Serviços em Eletricidade</p>
428
+ <div class="flex justify-between items-center text-xs text-gray-500">
429
+ <span>Última revisão: 2019</span>
430
+ <button class="text-green-600 hover:text-green-800">
431
+ <i class="fas fa-book-open"></i>
432
+ </button>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- NR Card -->
437
+ <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer">
438
+ <div class="flex items-center justify-between mb-2">
439
+ <span class="font-bold text-gray-800">NR-06</span>
440
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Pendente</span>
441
+ </div>
442
+ <p class="text-sm text-gray-600 mb-3">Equipamento de Proteção Individual - EPI</p>
443
+ <div class="flex justify-between items-center text-xs text-gray-500">
444
+ <span>Nova versão em análise</span>
445
+ <button class="text-green-600 hover:text-green-800">
446
+ <i class="fas fa-book-open"></i>
447
+ </button>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </main>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- Document Upload Modal (Hidden by default) -->
457
+ <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
458
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
459
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
460
+ <h3 class="text-lg font-semibold text-gray-800">Upload de Documento</h3>
461
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
462
+ <i class="fas fa-times"></i>
463
+ </button>
464
+ </div>
465
+ <div class="p-6">
466
+ <div class="mb-4">
467
+ <label class="block text-gray-700 text-sm font-medium mb-2">Tipo de Documento</label>
468
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-green-500">
469
+ <option>Selecione...</option>
470
+ <option>PPRA</option>
471
+ <option>PCMSO</option>
472
+ <option>Laudo de Insalubridade</option>
473
+ <option>CART</option>
474
+ <option>NR-10</option>
475
+ <option>NR-35</option>
476
+ <option>Outro</option>
477
+ </select>
478
+ </div>
479
+ <div class="mb-4">
480
+ <label class="block text-gray-700 text-sm font-medium mb-2">Data de Validade</label>
481
+ <input type="date" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-green-500">
482
+ </div>
483
+ <div class="mb-6">
484
+ <label class="block text-gray-700 text-sm font-medium mb-2">Arquivo</label>
485
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
486
+ <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
487
+ <p class="text-gray-500">Arraste e solte arquivos aqui ou</p>
488
+ <button class="mt-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm">
489
+ Selecione arquivos
490
+ </button>
491
+ </div>
492
+ </div>
493
+ <div class="flex justify-end space-x-3">
494
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
495
+ Cancelar
496
+ </button>
497
+ <button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg">
498
+ Enviar Documento
499
+ </button>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <script>
506
+ // Toggle sidebar on mobile
507
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
508
+ document.querySelector('.sidebar').classList.toggle('hidden');
509
+ document.querySelector('.sidebar').classList.toggle('block');
510
+ });
511
+
512
+ // Chat functionality for SST Bot
513
+ document.getElementById('sendChat').addEventListener('click', function() {
514
+ const input = document.getElementById('chatInput');
515
+ const message = input.value.trim();
516
+
517
+ if (message) {
518
+ // Add user message
519
+ const userMsg = document.createElement('div');
520
+ userMsg.className = 'flex justify-end';
521
+ userMsg.innerHTML = `
522
+ <div class="bg-green-100 rounded-lg p-3 max-w-xs">
523
+ <p class="text-sm text-gray-800">${message}</p>
524
+ </div>
525
+ `;
526
+ document.getElementById('chatContainer').appendChild(userMsg);
527
+
528
+ // Clear input
529
+ input.value = '';
530
+
531
+ // Add bot response after a short delay
532
+ setTimeout(() => {
533
+ const botResponses = [
534
+ "O PPRA (Programa de Prevenção de Riscos Ambientais) é obrigatório para todas as empresas que admitam trabalhadores como empregados, conforme estabelece a NR-9.",
535
+ "Para o ramo de construção civil, as NRs mais relevantes são: NR-18 (Condições de Trabalho na Construção), NR-35 (Trabalho em Altura), NR-10 (Segurança em Eletricidade) e NR-6 (EPIs).",
536
+ "Sim, o PCMSO (Programa de Controle Médico de Saúde Ocupacional) é obrigatório conforme a NR-7 para todas as empresas que possuam empregados regidos pela CLT.",
537
+ "Você tem 3 documentos vencendo em breve: PCMSO (7 dias), Laudo de Insalubridade (15 dias) e PPRA (30 dias)."
538
+ ];
539
+
540
+ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];
541
+
542
+ const botMsg = document.createElement('div');
543
+ botMsg.className = 'flex justify-start';
544
+ botMsg.innerHTML = `
545
+ <div class="bg-gray-100 rounded-lg p-3 max-w-xs">
546
+ <p class="text-sm text-gray-700">${randomResponse}</p>
547
+ </div>
548
+ `;
549
+ document.getElementById('chatContainer').appendChild(botMsg);
550
+
551
+ // Scroll to bottom
552
+ document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight;
553
+ }, 1000);
554
+ }
555
+ });
556
+
557
+ // Quick question buttons
558
+ document.querySelectorAll('.quick-question').forEach(button => {
559
+ button.addEventListener('click', function() {
560
+ const question = this.textContent.trim();
561
+ document.getElementById('chatInput').value = question;
562
+ document.getElementById('sendChat').click();
563
+ });
564
+ });
565
+
566
+ // Modal functionality
567
+ document.querySelectorAll('[data-modal-toggle="uploadModal"]').forEach(button => {
568
+ button.addEventListener('click', function() {
569
+ document.getElementById('uploadModal').classList.remove('hidden');
570
+ });
571
+ });
572
+
573
+ document.getElementById('closeModal').addEventListener('click', function() {
574
+ document.getElementById('uploadModal').classList.add('hidden');
575
+ });
576
+
577
+ // Close modal when clicking outside
578
+ window.addEventListener('click', function(event) {
579
+ if (event.target === document.getElementById('uploadModal')) {
580
+ document.getElementById('uploadModal').classList.add('hidden');
581
+ }
582
+ });
583
+
584
+ // Allow pressing Enter in chat input
585
+ document.getElementById('chatInput').addEventListener('keypress', function(e) {
586
+ if (e.key === 'Enter') {
587
+ document.getElementById('sendChat').click();
588
+ }
589
+ });
590
+ </script>
591
+ <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=Prstore38/sst-menager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
592
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ ### **Parte 1: Estrutura Básica do Sistema (Core)** **Funcionalidades**: - Cadastro e login de usuários (admin). - Cadastro da empresa com definição do **ramo de atividade** (dropdown com opções pré-definidas). - Página inicial (dashboard) com visão geral de documentos. - Configurações de perfil da empresa (editar ramo, adicionar logo). **Tecnologias**: - Frontend: React.js (interface responsiva). - Backend: Node.js (API REST). - Banco de Dados: PostgreSQL (armazenar dados da empresa e usuários). **Passos**: 1. Criar telas de login/cadastro. 2. Implementar dropdown de ramos de atividade no cadastro. 3. Desenvolver dashboard básico (gráficos estáticos). --- ### **Parte 2: Módulo de Documentos SST** **Funcionalidades**: - Cadastro de documentos (PPRA, PCMSO, etc.) com upload de arquivos. - Alertas automáticos de vencimento (30, 15, 7 dias). - Filtragem de NRs e documentos por ramo (ex.: construção civil → NR-18). **Tecnologias**: - Armazenamento de arquivos: Firebase Storage ou AWS S3. - Notificações: Node.js + Nodemailer (envio de e-mails). **Passos**: 1. Criar página "Documentos SST" com formulário de upload. 2. Configurar banco de dados de NRs por ramo (JSON/PostgreSQL). 3. Implementar lógica de alertas (cron jobs para verificar prazos). --- ### **Parte 3: Módulo de Documentos Ambientais** **Funcionalidades**: - Página dedicada para licenças e relatórios ambientais. - Campos específicos: tipo de documento, órgão emissor, validade. - Alertas personalizados (ex.: renovação de licença CETESB). **Passos**: 1. Replicar estrutura do módulo SST com campos customizados. 2. Adicionar templates para documentos ambientais (ex.: CADRI). --- ### **Parte 4: Controle de Certificados de Terceiros** **Funcionalidades**: - Cadastro de fornecedores/terceiros (CNPJ, razão social). - Upload de documentos (laudos, certificados). - Validação automática de CNPJ e alertas de vencimento. **Tecnologias**: - API de validação de CNPJ (Receita WS ou similar). - Tabela no PostgreSQL para relacionar empresas ↔ terceiros. --- ### **Parte 5: IA Assistente (SST Bot)** **Funcionalidades**: - Chat integrado para tirar dúvidas sobre NRs. - Respostas contextualizadas por ramo (ex.: construção civil → NR-18). - Sugestão de documentos obrigatórios. **Tecnologias**: - Modelo de linguagem: GPT-3.5 Turbo (OpenAI) ou modelo treinado. - Backend: Python (FastAPI) para integrar IA. **Passos**: 1. Treinar modelo com base de dados de NRs por ramo. 2. Criar interface de chat no frontend. --- ### **Parte 6: Segurança e LGPD** **Funcionalidades**: - Criptografia AES-256 para documentos e dados. - Autenticação em dois fatores (2FA). - Exclusão definitiva de dados sob demanda. **Tecnologias**: - Bibliotecas: Crypto.js (criptografia). - Firebase Auth ou Auth0 para autenticação. --- ### **Parte 7: Personalização por Ramo** **Funcionalidades**: - Templates de documentos pré-formatados por setor. - Filtragem dinâmica de NRs no dashboard. - Atualização do perfil da empresa (mudança de ramo). **Passos**: 1. Criar templates de PPRA, PCMSO, etc., para cada ramo. 2. Vincular seleção de ramo à exibição de conteúdo. --- ### **Parte 8: Notificações e Relatórios** **Funcionalidades**: - Notificações por e-mail e push (app). - Geração de relatórios em PDF (ex.: status de documentos). - Exportação de dados para planilha. **Tecnologias**: - Bibliotecas: PDFMake (gerar PDFs). - React Native (para app móvel). --- ### **Parte 9: Integrações** **Funcionalidades**: - Conexão com ERPs (ex.: Totvs) via API. - API pública para consultorias terceirizadas. As cores devem ser gradiente verde, brano e preto aparabtexto, nao quero um escudo quero a logo oficial sst