Hugging Face's logo

Spaces:
JEFFERSON1995
/
topmultas-compl-cliente
Running

App Files Community
JEFFERSON1995 commited on
Commit
31e90c5
·
verified ·
1 Parent(s): 6796e80

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +657 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Topmultas Compl Cliente
3
- emoji: 👀
4
  colorFrom: green
5
- colorTo: yellow
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: topmultas-compl-cliente
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: gray
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,657 @@
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>TOP MULTAS - Painel do Cliente</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
+ .sidebar {
11
+ transition: all 0.3s;
12
+ }
13
+ .sidebar-collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar-collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .sidebar-collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar-collapsed .nav-item {
23
+ justify-content: center;
24
+ }
25
+ .progress-bar {
26
+ height: 10px;
27
+ border-radius: 5px;
28
+ background-color: #e5e7eb;
29
+ }
30
+ .progress-fill {
31
+ height: 100%;
32
+ border-radius: 5px;
33
+ transition: width 0.5s ease-in-out;
34
+ }
35
+ .process-step {
36
+ position: relative;
37
+ }
38
+ .process-step:not(:last-child):after {
39
+ content: '';
40
+ position: absolute;
41
+ top: 20px;
42
+ left: 20px;
43
+ height: 100%;
44
+ width: 2px;
45
+ background-color: #e5e7eb;
46
+ }
47
+ .animate-pulse {
48
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
49
+ }
50
+ @keyframes pulse {
51
+ 0%, 100% {
52
+ opacity: 1;
53
+ }
54
+ 50% {
55
+ opacity: 0.5;
56
+ }
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="bg-gray-50">
61
+ <div class="flex h-screen overflow-hidden">
62
+ <!-- Sidebar -->
63
+ <div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0 flex flex-col">
64
+ <div class="p-4 flex items-center border-b border-blue-700">
65
+ <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-blue-800 font-bold">
66
+ TM
67
+ </div>
68
+ <div class="ml-3 logo-text">
69
+ <h1 class="font-bold text-lg">TOP MULTAS</h1>
70
+ <p class="text-xs text-blue-200">Painel do Cliente</p>
71
+ </div>
72
+ </div>
73
+ <div class="flex-1 overflow-y-auto">
74
+ <div class="p-4">
75
+ <div class="flex items-center justify-between mb-6">
76
+ <div class="flex items-center">
77
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
78
+ <i class="fas fa-user"></i>
79
+ </div>
80
+ <div class="ml-3 sidebar-text">
81
+ <p class="font-medium">João Silva</p>
82
+ <p class="text-xs text-blue-200">Plano Profissional</p>
83
+ </div>
84
+ </div>
85
+ <button class="text-blue-200 hover:text-white sidebar-text">
86
+ <i class="fas fa-cog"></i>
87
+ </button>
88
+ </div>
89
+
90
+ <nav class="mt-8">
91
+ <div class="mb-6 sidebar-text">
92
+ <p class="text-xs uppercase text-blue-300 font-bold mb-2">Menu Principal</p>
93
+ <ul>
94
+ <li class="mb-1">
95
+ <a href="#" class="flex items-center p-2 rounded bg-blue-700 text-white">
96
+ <i class="fas fa-home mr-3"></i>
97
+ <span>Dashboard</span>
98
+ </a>
99
+ </li>
100
+ <li class="mb-1">
101
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
102
+ <i class="fas fa-car mr-3"></i>
103
+ <span>Minhas Multas</span>
104
+ </a>
105
+ </li>
106
+ <li class="mb-1">
107
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
108
+ <i class="fas fa-file-alt mr-3"></i>
109
+ <span>Processos</span>
110
+ </a>
111
+ </li>
112
+ <li class="mb-1">
113
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
114
+ <i class="fas fa-calendar-alt mr-3"></i>
115
+ <span>Agendamentos</span>
116
+ </a>
117
+ </li>
118
+ <li class="mb-1">
119
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
120
+ <i class="fas fa-comments mr-3"></i>
121
+ <span>Atendimento</span>
122
+ </a>
123
+ </li>
124
+ </ul>
125
+ </div>
126
+
127
+ <div class="mb-6 sidebar-text">
128
+ <p class="text-xs uppercase text-blue-300 font-bold mb-2">Documentos</p>
129
+ <ul>
130
+ <li class="mb-1">
131
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
132
+ <i class="fas fa-file-upload mr-3"></i>
133
+ <span>Enviar Documentos</span>
134
+ </a>
135
+ </li>
136
+ <li class="mb-1">
137
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
138
+ <i class="fas fa-file-signature mr-3"></i>
139
+ <span>Contratos</span>
140
+ </a>
141
+ </li>
142
+ </ul>
143
+ </div>
144
+
145
+ <div class="sidebar-text">
146
+ <p class="text-xs uppercase text-blue-300 font-bold mb-2">Configurações</p>
147
+ <ul>
148
+ <li class="mb-1">
149
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
150
+ <i class="fas fa-user-cog mr-3"></i>
151
+ <span>Meu Perfil</span>
152
+ </a>
153
+ </li>
154
+ <li class="mb-1">
155
+ <a href="#" class="flex items-center p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
156
+ <i class="fas fa-credit-card mr-3"></i>
157
+ <span>Pagamentos</span>
158
+ </a>
159
+ </li>
160
+ </ul>
161
+ </div>
162
+ </nav>
163
+ </div>
164
+ </div>
165
+ <div class="p-4 border-t border-blue-700">
166
+ <button class="flex items-center justify-center w-full p-2 rounded hover:bg-blue-700 text-blue-100 hover:text-white">
167
+ <i class="fas fa-sign-out-alt"></i>
168
+ <span class="ml-2 sidebar-text">Sair</span>
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Main Content -->
174
+ <div class="flex-1 flex flex-col overflow-hidden">
175
+ <!-- Top Navigation -->
176
+ <header class="bg-white shadow-sm">
177
+ <div class="flex items-center justify-between px-6 py-4">
178
+ <div class="flex items-center">
179
+ <button class="text-gray-500 hover:text-gray-700 mr-4">
180
+ <i class="fas fa-bars"></i>
181
+ </button>
182
+ <div class="relative">
183
+ <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
184
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
185
+ </div>
186
+ </div>
187
+ <div class="flex items-center space-x-4">
188
+ <button class="text-gray-500 hover:text-gray-700 relative">
189
+ <i class="fas fa-bell"></i>
190
+ <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
191
+ </button>
192
+ <button class="text-gray-500 hover:text-gray-700">
193
+ <i class="fas fa-envelope"></i>
194
+ </button>
195
+ <button class="text-gray-500 hover:text-gray-700">
196
+ <i class="fas fa-question-circle"></i>
197
+ </button>
198
+ </div>
199
+ </div>
200
+ </header>
201
+
202
+ <!-- Main Content Area -->
203
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
204
+ <div class="mb-6">
205
+ <h1 class="text-2xl font-bold text-gray-800">Bem-vindo, João Silva</h1>
206
+ <p class="text-gray-600">Acompanhe seus processos e multas de forma simplificada</p>
207
+ </div>
208
+
209
+ <!-- Stats Cards -->
210
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
211
+ <div class="bg-white rounded-lg shadow p-6">
212
+ <div class="flex items-center justify-between">
213
+ <div>
214
+ <p class="text-gray-500 text-sm">Multas em análise</p>
215
+ <h3 class="text-2xl font-bold text-blue-600">3</h3>
216
+ </div>
217
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
218
+ <i class="fas fa-car-crash text-xl"></i>
219
+ </div>
220
+ </div>
221
+ <div class="mt-4">
222
+ <div class="flex items-center text-sm text-green-500">
223
+ <i class="fas fa-arrow-up mr-1"></i>
224
+ <span>1 nova esta semana</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="bg-white rounded-lg shadow p-6">
230
+ <div class="flex items-center justify-between">
231
+ <div>
232
+ <p class="text-gray-500 text-sm">Processos ativos</p>
233
+ <h3 class="text-2xl font-bold text-orange-500">5</h3>
234
+ </div>
235
+ <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center text-orange-500">
236
+ <i class="fas fa-file-alt text-xl"></i>
237
+ </div>
238
+ </div>
239
+ <div class="mt-4">
240
+ <div class="flex items-center text-sm text-blue-500">
241
+ <i class="fas fa-info-circle mr-1"></i>
242
+ <span>2 com prazos próximos</span>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <div class="bg-white rounded-lg shadow p-6">
248
+ <div class="flex items-center justify-between">
249
+ <div>
250
+ <p class="text-gray-500 text-sm">Pontos na CNH</p>
251
+ <h3 class="text-2xl font-bold text-purple-600">12</h3>
252
+ </div>
253
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
254
+ <i class="fas fa-id-card text-xl"></i>
255
+ </div>
256
+ </div>
257
+ <div class="mt-4">
258
+ <div class="flex items-center text-sm text-yellow-500">
259
+ <i class="fas fa-exclamation-triangle mr-1"></i>
260
+ <span>Limite: 20 pontos</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="bg-white rounded-lg shadow p-6">
266
+ <div class="flex items-center justify-between">
267
+ <div>
268
+ <p class="text-gray-500 text-sm">Dias para renovação</p>
269
+ <h3 class="text-2xl font-bold text-green-600">45</h3>
270
+ </div>
271
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
272
+ <i class="fas fa-calendar-check text-xl"></i>
273
+ </div>
274
+ </div>
275
+ <div class="mt-4">
276
+ <div class="flex items-center text-sm text-gray-500">
277
+ <i class="fas fa-clock mr-1"></i>
278
+ <span>Vence em 15/10/2023</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Main Sections -->
285
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
286
+ <!-- Processos em Andamento -->
287
+ <div class="lg:col-span-2">
288
+ <div class="bg-white rounded-lg shadow overflow-hidden">
289
+ <div class="px-6 py-4 border-b border-gray-200">
290
+ <h2 class="text-lg font-semibold text-gray-800">Processos em Andamento</h2>
291
+ </div>
292
+ <div class="divide-y divide-gray-200">
293
+ <!-- Process Item -->
294
+ <div class="p-6">
295
+ <div class="flex items-start justify-between">
296
+ <div>
297
+ <h3 class="font-medium text-gray-800">Recurso à JARI - SP</h3>
298
+ <p class="text-sm text-gray-500">Multa por excesso de velocidade</p>
299
+ </div>
300
+ <span class="px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded-full">Em análise</span>
301
+ </div>
302
+ <div class="mt-4">
303
+ <div class="flex items-center text-sm text-gray-500 mb-2">
304
+ <i class="fas fa-calendar-alt mr-2"></i>
305
+ <span>Prazo: 15/08/2023</span>
306
+ </div>
307
+ <div class="progress-bar">
308
+ <div class="progress-fill bg-blue-500" style="width: 60%"></div>
309
+ </div>
310
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
311
+ <span>Iniciado: 01/07/2023</span>
312
+ <span>60% concluído</span>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Process Item -->
318
+ <div class="p-6">
319
+ <div class="flex items-start justify-between">
320
+ <div>
321
+ <h3 class="font-medium text-gray-800">Defesa Prévia - RJ</h3>
322
+ <p class="text-sm text-gray-500">Multa por estacionamento proibido</p>
323
+ </div>
324
+ <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">Em andamento</span>
325
+ </div>
326
+ <div class="mt-4">
327
+ <div class="flex items-center text-sm text-gray-500 mb-2">
328
+ <i class="fas fa-calendar-alt mr-2"></i>
329
+ <span>Prazo: 22/08/2023</span>
330
+ </div>
331
+ <div class="progress-bar">
332
+ <div class="progress-fill bg-green-500" style="width: 30%"></div>
333
+ </div>
334
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
335
+ <span>Iniciado: 10/07/2023</span>
336
+ <span>30% concluído</span>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Process Item -->
342
+ <div class="p-6">
343
+ <div class="flex items-start justify-between">
344
+ <div>
345
+ <h3 class="font-medium text-gray-800">Recurso ao CETRAN - MG</h3>
346
+ <p class="text-sm text-gray-500">Suspensão de CNH</p>
347
+ </div>
348
+ <span class="px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-800 rounded-full">Aguardando</span>
349
+ </div>
350
+ <div class="mt-4">
351
+ <div class="flex items-center text-sm text-gray-500 mb-2">
352
+ <i class="fas fa-calendar-alt mr-2"></i>
353
+ <span>Prazo: 05/09/2023</span>
354
+ </div>
355
+ <div class="progress-bar">
356
+ <div class="progress-fill bg-purple-500" style="width: 15%"></div>
357
+ </div>
358
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
359
+ <span>Iniciado: 20/07/2023</span>
360
+ <span>15% concluído</span>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ <div class="px-6 py-3 bg-gray-50 text-right">
366
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Ver todos os processos</a>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Atendimento Rápido -->
372
+ <div>
373
+ <div class="bg-white rounded-lg shadow overflow-hidden">
374
+ <div class="px-6 py-4 border-b border-gray-200">
375
+ <h2 class="text-lg font-semibold text-gray-800">Atendimento Rápido</h2>
376
+ </div>
377
+ <div class="p-6">
378
+ <div class="space-y-4">
379
+ <button class="w-full flex items-center justify-between p-4 border rounded-lg hover:bg-blue-50 hover:border-blue-200 transition">
380
+ <div class="flex items-center">
381
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
382
+ <i class="fas fa-file-alt"></i>
383
+ </div>
384
+ <span class="font-medium">Nova Defesa</span>
385
+ </div>
386
+ <i class="fas fa-chevron-right text-gray-400"></i>
387
+ </button>
388
+
389
+ <button class="w-full flex items-center justify-between p-4 border rounded-lg hover:bg-green-50 hover:border-green-200 transition">
390
+ <div class="flex items-center">
391
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
392
+ <i class="fas fa-calendar-plus"></i>
393
+ </div>
394
+ <span class="font-medium">Agendar Consulta</span>
395
+ </div>
396
+ <i class="fas fa-chevron-right text-gray-400"></i>
397
+ </button>
398
+
399
+ <button class="w-full flex items-center justify-between p-4 border rounded-lg hover:bg-purple-50 hover:border-purple-200 transition">
400
+ <div class="flex items-center">
401
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4">
402
+ <i class="fas fa-file-upload"></i>
403
+ </div>
404
+ <span class="font-medium">Enviar Documentos</span>
405
+ </div>
406
+ <i class="fas fa-chevron-right text-gray-400"></i>
407
+ </button>
408
+
409
+ <button class="w-full flex items-center justify-between p-4 border rounded-lg hover:bg-orange-50 hover:border-orange-200 transition">
410
+ <div class="flex items-center">
411
+ <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 mr-4">
412
+ <i class="fas fa-comment-dots"></i>
413
+ </div>
414
+ <span class="font-medium">Falar com Atendente</span>
415
+ </div>
416
+ <i class="fas fa-chevron-right text-gray-400"></i>
417
+ </button>
418
+ </div>
419
+
420
+ <div class="mt-6">
421
+ <h3 class="font-medium text-gray-800 mb-3">Status do Plano</h3>
422
+ <div class="bg-blue-50 border border-blue-100 rounded-lg p-4">
423
+ <div class="flex items-center justify-between mb-2">
424
+ <span class="font-medium">Profissional</span>
425
+ <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">Ativo</span>
426
+ </div>
427
+ <p class="text-sm text-gray-600 mb-3">5 defesas/mês (3 utilizadas)</p>
428
+ <div class="progress-bar">
429
+ <div class="progress-fill bg-blue-500" style="width: 60%"></div>
430
+ </div>
431
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
432
+ <span>Renovação: 15/09/2023</span>
433
+ <span>60% utilizado</span>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Últimas Multas -->
443
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
444
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
445
+ <h2 class="text-lg font-semibold text-gray-800">Últimas Multas</h2>
446
+ <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-800">Ver histórico completo</a>
447
+ </div>
448
+ <div class="overflow-x-auto">
449
+ <table class="min-w-full divide-y divide-gray-200">
450
+ <thead class="bg-gray-50">
451
+ <tr>
452
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
453
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Infração</th>
454
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Local</th>
455
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th>
456
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pontos</th>
457
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
458
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
459
+ </tr>
460
+ </thead>
461
+ <tbody class="bg-white divide-y divide-gray-200">
462
+ <tr>
463
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/07/2023</td>
464
+ <td class="px-6 py-4 whitespace-nowrap">
465
+ <div class="text-sm font-medium text-gray-900">Excesso de velocidade</div>
466
+ <div class="text-sm text-gray-500">Art. 218, inc. VII do CTB</div>
467
+ </td>
468
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SP-280, km 145</td>
469
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 293,47</td>
470
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7</td>
471
+ <td class="px-6 py-4 whitespace-nowrap">
472
+ <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">Em defesa</span>
473
+ </td>
474
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
475
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a>
476
+ <a href="#" class="text-green-600 hover:text-green-900">Documentos</a>
477
+ </td>
478
+ </tr>
479
+ <tr>
480
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/07/2023</td>
481
+ <td class="px-6 py-4 whitespace-nowrap">
482
+ <div class="text-sm font-medium text-gray-900">Estacionamento proibido</div>
483
+ <div class="text-sm text-gray-500">Art. 181, inc. XVI do CTB</div>
484
+ </td>
485
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rua XV de Novembro, 100 - RJ</td>
486
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 88,38</td>
487
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
488
+ <td class="px-6 py-4 whitespace-nowrap">
489
+ <span class="px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded-full">Análise</span>
490
+ </td>
491
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
492
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a>
493
+ <a href="#" class="text-green-600 hover:text-green-900">Documentos</a>
494
+ </td>
495
+ </tr>
496
+ <tr>
497
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28/06/2023</td>
498
+ <td class="px-6 py-4 whitespace-nowrap">
499
+ <div class="text-sm font-medium text-gray-900">Ultrapassagem irregular</div>
500
+ <div class="text-sm text-gray-500">Art. 203 do CTB</div>
501
+ </td>
502
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">BR-116, km 32 - MG</td>
503
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 1.467,35</td>
504
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
505
+ <td class="px-6 py-4 whitespace-nowrap">
506
+ <span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">Cancelada</span>
507
+ </td>
508
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
509
+ <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">Detalhes</a>
510
+ <a href="#" class="text-green-600 hover:text-green-900">Documentos</a>
511
+ </td>
512
+ </tr>
513
+ </tbody>
514
+ </table>
515
+ </div>
516
+ </div>
517
+
518
+ <!-- Documentos Pendentes e Notificações -->
519
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
520
+ <!-- Documentos Pendentes -->
521
+ <div class="bg-white rounded-lg shadow overflow-hidden">
522
+ <div class="px-6 py-4 border-b border-gray-200">
523
+ <h2 class="text-lg font-semibold text-gray-800">Documentos Pendentes</h2>
524
+ </div>
525
+ <div class="p-6">
526
+ <div class="space-y-4">
527
+ <div class="flex items-start p-3 border border-yellow-200 rounded-lg bg-yellow-50">
528
+ <div class="flex-shrink-0 pt-1">
529
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
530
+ <i class="fas fa-exclamation"></i>
531
+ </div>
532
+ </div>
533
+ <div class="ml-3">
534
+ <h3 class="text-sm font-medium text-yellow-800">CNH vencida</h3>
535
+ <p class="text-sm text-yellow-700">Sua CNH vence em 45 dias. Envie uma cópia atualizada para continuarmos com seus processos.</p>
536
+ <div class="mt-2">
537
+ <button class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none">
538
+ Enviar Documento
539
+ </button>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="flex items-start p-3 border border-blue-200 rounded-lg bg-blue-50">
545
+ <div class="flex-shrink-0 pt-1">
546
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
547
+ <i class="fas fa-file-signature"></i>
548
+ </div>
549
+ </div>
550
+ <div class="ml-3">
551
+ <h3 class="text-sm font-medium text-blue-800">Procuração pendente</h3>
552
+ <p class="text-sm text-blue-700">Para dar continuidade ao processo na JARI-SP, precisamos que assine a procuração eletrônica.</p>
553
+ <div class="mt-2">
554
+ <button class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
555
+ Assinar Agora
556
+ </button>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="flex items-start p-3 border border-gray-200 rounded-lg bg-gray-50">
562
+ <div class="flex-shrink-0 pt-1">
563
+ <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
564
+ <i class="fas fa-check"></i>
565
+ </div>
566
+ </div>
567
+ <div class="ml-3">
568
+ <h3 class="text-sm font-medium text-gray-800">CRLV atualizado</h3>
569
+ <p class="text-sm text-gray-700">Documento do veículo OK. Nenhuma ação necessária no momento.</p>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ <!-- Notificações -->
577
+ <div class="bg-white rounded-lg shadow overflow-hidden">
578
+ <div class="px-6 py-4 border-b border-gray-200">
579
+ <h2 class="text-lg font-semibold text-gray-800">Notificações</h2>
580
+ </div>
581
+ <div class="p-6">
582
+ <div class="space-y-4">
583
+ <div class="flex items-start">
584
+ <div class="flex-shrink-0">
585
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
586
+ <i class="fas fa-check-circle"></i>
587
+ </div>
588
+ </div>
589
+ <div class="ml-3">
590
+ <h3 class="text-sm font-medium text-gray-800">Defesa enviada com sucesso</h3>
591
+ <p class="text-sm text-gray-600">Sua defesa para a multa de excesso de velocidade foi protocolada no DETRAN-SP.</p>
592
+ <p class="text-xs text-gray-500 mt-1">Hoje, 09:42</p>
593
+ </div>
594
+ </div>
595
+
596
+ <div class="flex items-start">
597
+ <div class="flex-shrink-0">
598
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
599
+ <i class="fas fa-calendar-alt"></i>
600
+ </div>
601
+ </div>
602
+ <div class="ml-3">
603
+ <h3 class="text-sm font-medium text-gray-800">Consulta agendada</h3>
604
+ <p class="text-sm text-gray-600">Sua consulta com o especialista em trânsito está marcada para 25/07 às 14h.</p>
605
+ <p class="text-xs text-gray-500 mt-1">Ontem, 16:30</p>
606
+ </div>
607
+ </div>
608
+
609
+ <div class="flex items-start">
610
+ <div class="flex-shrink-0">
611
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
612
+ <i class="fas fa-exclamation-triangle"></i>
613
+ </div>
614
+ </div>
615
+ <div class="ml-3">
616
+ <h3 class="text-sm font-medium text-gray-800">Prazo próximo</h3>
617
+ <p class="text-sm text-gray-600">O recurso à JARI-SP vence em 5 dias. Acompanhe o status no painel de processos.</p>
618
+ <p class="text-xs text-gray-500 mt-1">15/07/2023, 11:20</p>
619
+ </div>
620
+ </div>
621
+ </div>
622
+
623
+ <div class="mt-6">
624
+ <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
625
+ Ver todas as notificações
626
+ </button>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </main>
632
+ </div>
633
+ </div>
634
+
635
+ <script>
636
+ // Toggle sidebar collapse
637
+ document.addEventListener('DOMContentLoaded', function() {
638
+ const sidebar = document.querySelector('.sidebar');
639
+ const toggleButton = document.querySelector('header button');
640
+
641
+ toggleButton.addEventListener('click', function() {
642
+ sidebar.classList.toggle('sidebar-collapsed');
643
+ });
644
+
645
+ // Simulate loading progress
646
+ setTimeout(() => {
647
+ document.querySelectorAll('.progress-fill').forEach(el => {
648
+ const currentWidth = parseInt(el.style.width);
649
+ if (currentWidth < 100) {
650
+ el.classList.add('animate-pulse');
651
+ }
652
+ });
653
+ }, 1000);
654
+ });
655
+ </script>
656
+ <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=JEFFERSON1995/topmultas-compl-cliente" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
657
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ crie um criar um Sistema de gestão de processos (semelhante ao da BR MULTAS E SÓ MULTAS) para atender as necessidades da empresa – o painel do cliente APRESENTAÇÃO INSTITUCIONAL – TOP MULTAS ________________________________________ 🏢 QUEM SOMOS A TOP MULTAS é uma empresa especializada em defesas administrativas e consultoria jurídica em trânsito, atuando com foco em eficiência, resultado e atendimento digital inteligente. Nascemos com o propósito de proteger condutores e empresas dos abusos e excessos das autuações de trânsito, com tecnologia, experiência e agilidade. “Sua CNH protegida com inteligência jurídica.” ________________________________________ 💼 NOSSOS SERVIÇOS ➤ Defesa Administrativa: • Defesa Prévia • Recurso à JARI • Recurso ao CETRAN • Suspensão e Cassação da CNH ➤ Consultoria Técnica: • Regularização de veículos • Pontuação na CNH e análise de risco • Consultoria para empresas com frota (compliance de trânsito) ➤ Monitoramento Inteligente: • Consulta mensal em RENAINF e DETRAN • Alertas automáticos por WhatsApp • Análise preventiva e relatórios mensais ________________________________________ 📦 NOSSOS PLANOS 🟢 Plano Essencial • Até 2 defesas/mês • Alertas por WhatsApp • Monitoramento da CNH 🔵 Plano Profissional • Até 5 defesas/mês • Acompanhamento com relatório • Atendimento prioritário 🟠 Plano Frota • Defesa ilimitada (até 10 CNHs) • Relatórios gerenciais mensais • Suporte técnico para empresas ⚙️ Plano Personalizado • Atendimento para empresas de grande porte • Integração com sistemas de gestão • Consultoria jurídica contínua ________________________________________ ⚙️ TECNOLOGIA E EFICIÊNCIA Utilizamos as melhores ferramentas do mercado: • ADVBox – Gestão automatizada de processos jurídicos • ZAPSign – Assinaturas digitais com validade jurídica • ZAP-SAG – Robôs de consulta DETRAN e RENAINF • Asaas – Cobrança automatizada de planos por Pix e cartão • WhatsApp API – Comunicação automatizada com o cliente ________________________________________ 👥 PÚBLICO-ALVO • Motoristas profissionais (Uber, Táxi, Caminhoneiros) • Motoristas com pontuação elevada • Empresas de transporte e logística • Transportadoras e frotas compartilhadas ________________________________________ 📈 DIFERENCIAIS ✅ Atendimento 100% digital ✅ Equipe jurídica especializada em trânsito ✅ Tecnologia de automação para defesa rápida ✅ Relatórios mensais para clientes corporativos ✅ Cobrança recorrente facilitada (cartão, Pix, boleto) ✅ Portal do cliente com acesso a processos e documentos Tenha: Icone: clientes dos planos e clientes avulso - catalogo de multas - catalogo de defesas/recurso a jari/ recursos ai CETRAN - buscas de CNH e documentos de veículos (ver integração) - CRM de atendimentos - Processos Administrativos - Potenciais processos judiciais ( sistema para o clientes contratar com o escritório parceiro; direcionar – ex: mandar notificação para o cliente que as instancias administrativas acabaram e que precisa contratar advogado, direciona para - - ex: Plano Essencial = prever quais serviços estão disponíveis no sistema - que em cada plano, conste o tempo de resposta de cada cliente vinculado ao seu plano; com tarjetas de prioridades, notificações de lembrete; - tenha Portal dos clientes No sistema do clientes ter: painel de agendamento; serviços disponíveis; serviços extras a ser solicitados, períodos de renovação, chat bot para tirar dúvidas, painel para enviar documentos para análise nos formatos JPG ou PDF e/ou possíveis demandas – contratos, cheques, entre outros documentos - que no momento de contratação, já gere automaticamente o contrato do serviço do plano que o cliente escolher e já solicitar assinatura - - ter CRM para atendimento de clientes ou integração para CRM - tenha processos administrativos - tenha pasta para possíveis demandas litigiosas - tenha sistema financeiro Observação: 🔧 Módulos Essenciais do Sistema TOPMULTAS 1. Gestão de Clientes (CRM) • Cadastro completo de clientes (dados pessoais, CNH, veículos, infrações). • Histórico de atendimentos, ações tomadas e status de cada caso. • Pipeline de atendimento (lead, em atendimento, finalizado, etc). 2. Gestão de Processos Administrativos • Cadastro de tipos de processos (recurso de multa, defesa prévia, suspensão, cassação). • Etapas automatizadas por tipo de processo. • Controle de prazos e geração de alertas. • Geração automatizada de documentos com modelos editáveis. 3. Central de Tarefas e Produtividade • Painel de tarefas por colaborador. • Atribuição de tarefas com prazos e prioridades. • Sistema de pontuação ou produtividade. 4. Gestão Financeira • Cadastro de planos de serviços e valores. • Controle de pagamentos, boletos, Pix e cartões. • Relatórios financeiros: receitas, inadimplência, fluxo de caixa. 5. Área do Cliente • Portal onde o cliente acessa seus processos, status, documentos e comunicações. • Upload de documentos, assinatura eletrônica e chat integrado. 6. Controle de Documentos • Armazenamento seguro de documentos por cliente/processo. • Geração automática de contratos, procurações e defesas. • Assinatura digital integrada (Ex: Clicksign, D4Sign). 7. Comunicação Integrada • Envio de e-mails, SMS e WhatsApp automatizado por etapa do processo. • Templates de mensagens personalizáveis. 8. Dashboard e BI • Métricas sobre número de casos por tipo, desempenho de colaboradores, tempo médio de resolução. • Gráficos financeiros e indicadores de satisfação. 9. Controle de Permissões e Segurança • Perfis de acesso (administrador, jurídico, financeiro, atendente). • Log de ações por usuário. • Backup automático e criptografia de dados. 10. Integrações • Consulta automática de infrações via API (Detran, SNE). • Integração com plataformas de pagamento. • Google Calendar para prazos e reuniões.