Hugging Face's logo

Spaces:
danillo10
/
anycoder-e12863d4
Running

App Files Community
danillo10 commited on
Commit
1629e9b
路
verified 路
1 Parent(s): e5b6122

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +674 -19
index.html CHANGED
@@ -1,19 +1,674 @@
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>Gerenciamento de Clientes - Laravel CRUD Simulation</title>
7
+
8
+ <!-- FontAwesome for Icons -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <!-- Google Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300,400,500,600,700&display=swap" rel="stylesheet">
13
+
14
+ <style>
15
+ :root {
16
+ --primary: #4f46e5; /* Laravel Indigo */
17
+ --primary-hover: #4338ca;
18
+ --bg-body: #f3f4f6;
19
+ --bg-card: #ffffff;
20
+ --text-main: #111827;
21
+ --text-secondary: #6b7280;
22
+ --border: #e5e7eb;
23
+ --danger: #ef4444;
24
+ --success: #10b981;
25
+ --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
26
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
27
+ --radius: 0.5rem;
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ font-family: 'Inter', sans-serif;
35
+ }
36
+
37
+ body {
38
+ background-color: var(--bg-body);
39
+ color: var(--text-main);
40
+ line-height: 1.5;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ /* --- Header --- */
45
+ header {
46
+ background: var(--bg-card);
47
+ border-bottom: 1px solid var(--border);
48
+ padding: 1rem 2rem;
49
+ display: flex;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ position: sticky;
53
+ top: 0;
54
+ z-index: 10;
55
+ }
56
+
57
+ .brand {
58
+ font-weight: 700;
59
+ font-size: 1.25rem;
60
+ color: var(--primary);
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 0.5rem;
64
+ }
65
+
66
+ .anycoder-link {
67
+ text-decoration: none;
68
+ color: var(--text-secondary);
69
+ font-size: 0.875rem;
70
+ font-weight: 500;
71
+ transition: color 0.2s;
72
+ border: 1px solid var(--border);
73
+ padding: 0.25rem 0.75rem;
74
+ border-radius: var(--radius);
75
+ }
76
+
77
+ .anycoder-link:hover {
78
+ color: var(--primary);
79
+ border-color: var(--primary);
80
+ }
81
+
82
+ /* --- Main Layout --- */
83
+ .container {
84
+ max-width: 1200px;
85
+ margin: 2rem auto;
86
+ padding: 0 1rem;
87
+ }
88
+
89
+ .card {
90
+ background: var(--bg-card);
91
+ border-radius: var(--radius);
92
+ box-shadow: var(--shadow);
93
+ overflow: hidden;
94
+ }
95
+
96
+ /* --- Toolbar --- */
97
+ .toolbar {
98
+ padding: 1.5rem;
99
+ display: flex;
100
+ justify-content: space-between;
101
+ align-items: center;
102
+ border-bottom: 1px solid var(--border);
103
+ flex-wrap: wrap;
104
+ gap: 1rem;
105
+ }
106
+
107
+ .toolbar-title h2 {
108
+ font-size: 1.5rem;
109
+ font-weight: 600;
110
+ }
111
+
112
+ .toolbar-title p {
113
+ color: var(--text-secondary);
114
+ font-size: 0.875rem;
115
+ }
116
+
117
+ .actions {
118
+ display: flex;
119
+ gap: 0.75rem;
120
+ }
121
+
122
+ .btn {
123
+ display: inline-flex;
124
+ align-items: center;
125
+ gap: 0.5rem;
126
+ padding: 0.625rem 1rem;
127
+ font-size: 0.875rem;
128
+ font-weight: 500;
129
+ border-radius: var(--radius);
130
+ border: none;
131
+ cursor: pointer;
132
+ transition: all 0.2s;
133
+ }
134
+
135
+ .btn-primary {
136
+ background-color: var(--primary);
137
+ color: white;
138
+ }
139
+
140
+ .btn-primary:hover {
141
+ background-color: var(--primary-hover);
142
+ }
143
+
144
+ .btn-outline {
145
+ background-color: transparent;
146
+ border: 1px solid var(--border);
147
+ color: var(--text-main);
148
+ }
149
+
150
+ .btn-outline:hover {
151
+ background-color: #f9fafb;
152
+ border-color: var(--text-secondary);
153
+ }
154
+
155
+ .search-box {
156
+ position: relative;
157
+ width: 250px;
158
+ }
159
+
160
+ .search-box input {
161
+ width: 100%;
162
+ padding: 0.625rem 1rem 0.625rem 2.5rem;
163
+ border: 1px solid var(--border);
164
+ border-radius: var(--radius);
165
+ outline: none;
166
+ font-size: 0.875rem;
167
+ }
168
+
169
+ .search-box input:focus {
170
+ border-color: var(--primary);
171
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
172
+ }
173
+
174
+ .search-box i {
175
+ position: absolute;
176
+ left: 1rem;
177
+ top: 50%;
178
+ transform: translateY(-50%);
179
+ color: var(--text-secondary);
180
+ }
181
+
182
+ /* --- Table --- */
183
+ .table-container {
184
+ width: 100%;
185
+ overflow-x: auto;
186
+ }
187
+
188
+ table {
189
+ width: 100%;
190
+ text-align: left;
191
+ border-collapse: collapse;
192
+ }
193
+
194
+ th {
195
+ background-color: #f9fafb;
196
+ padding: 1rem 1.5rem;
197
+ font-size: 0.75rem;
198
+ font-weight: 600;
199
+ text-transform: uppercase;
200
+ letter-spacing: 0.05em;
201
+ color: var(--text-secondary);
202
+ }
203
+
204
+ td {
205
+ padding: 1rem 1.5rem;
206
+ border-top: 1px solid var(--border);
207
+ font-size: 0.875rem;
208
+ }
209
+
210
+ tr:last-child td {
211
+ border-bottom: 1px solid var(--border);
212
+ }
213
+
214
+ tr:hover td {
215
+ background-color: #f9fafb;
216
+ }
217
+
218
+ .status-badge {
219
+ display: inline-block;
220
+ padding: 0.125rem 0.5rem;
221
+ font-size: 0.75rem;
222
+ font-weight: 500;
223
+ border-radius: 9999px;
224
+ }
225
+
226
+ .status-active { background-color: #d1fae5; color: #065f46; }
227
+ .status-inactive { background-color: #fee2e2; color: #991b1b; }
228
+
229
+ .action-btn {
230
+ background: none;
231
+ border: none;
232
+ cursor: pointer;
233
+ padding: 0.25rem;
234
+ color: var(--text-secondary);
235
+ transition: color 0.2s;
236
+ }
237
+
238
+ .action-btn:hover { color: var(--primary); }
239
+ .action-btn.delete:hover { color: var(--danger); }
240
+
241
+ /* --- Modal --- */
242
+ .modal-overlay {
243
+ position: fixed;
244
+ top: 0;
245
+ left: 0;
246
+ width: 100%;
247
+ height: 100%;
248
+ background: rgba(0, 0, 0, 0.5);
249
+ display: flex;
250
+ justify-content: center;
251
+ align-items: center;
252
+ z-index: 50;
253
+ opacity: 0;
254
+ visibility: hidden;
255
+ transition: all 0.3s;
256
+ }
257
+
258
+ .modal-overlay.active {
259
+ opacity: 1;
260
+ visibility: visible;
261
+ }
262
+
263
+ .modal {
264
+ background: var(--bg-card);
265
+ width: 100%;
266
+ max-width: 500px;
267
+ border-radius: var(--radius);
268
+ box-shadow: var(--shadow-lg);
269
+ transform: translateY(20px);
270
+ transition: transform 0.3s;
271
+ }
272
+
273
+ .modal-overlay.active .modal {
274
+ transform: translateY(0);
275
+ }
276
+
277
+ .modal-header {
278
+ padding: 1.5rem;
279
+ border-bottom: 1px solid var(--border);
280
+ display: flex;
281
+ justify-content: space-between;
282
+ align-items: center;
283
+ }
284
+
285
+ .modal-header h3 {
286
+ font-size: 1.125rem;
287
+ font-weight: 600;
288
+ }
289
+
290
+ .close-modal {
291
+ background: none;
292
+ border: none;
293
+ font-size: 1.25rem;
294
+ cursor: pointer;
295
+ color: var(--text-secondary);
296
+ }
297
+
298
+ .modal-body {
299
+ padding: 1.5rem;
300
+ }
301
+
302
+ .form-group {
303
+ margin-bottom: 1rem;
304
+ }
305
+
306
+ .form-group label {
307
+ display: block;
308
+ margin-bottom: 0.5rem;
309
+ font-size: 0.875rem;
310
+ font-weight: 500;
311
+ color: var(--text-main);
312
+ }
313
+
314
+ .form-control {
315
+ width: 100%;
316
+ padding: 0.625rem;
317
+ border: 1px solid var(--border);
318
+ border-radius: var(--radius);
319
+ font-size: 0.875rem;
320
+ }
321
+
322
+ .form-control:focus {
323
+ outline: none;
324
+ border-color: var(--primary);
325
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
326
+ }
327
+
328
+ .modal-footer {
329
+ padding: 1.5rem;
330
+ border-top: 1px solid var(--border);
331
+ background: #f9fafb;
332
+ display: flex;
333
+ justify-content: flex-end;
334
+ gap: 0.75rem;
335
+ }
336
+
337
+ /* --- Code Block Section --- */
338
+ .code-preview {
339
+ margin-top: 3rem;
340
+ background: #1e1e1e;
341
+ color: #d4d4d4;
342
+ border-radius: var(--radius);
343
+ padding: 2rem;
344
+ overflow-x: auto;
345
+ font-family: 'Consolas', 'Monaco', monospace;
346
+ font-size: 0.85rem;
347
+ position: relative;
348
+ }
349
+
350
+ .code-preview::before {
351
+ content: "Laravel Best Practices (Backend Logic Example)";
352
+ position: absolute;
353
+ top: -1.5rem;
354
+ left: 1rem;
355
+ background: var(--bg-card);
356
+ color: var(--text-main);
357
+ padding: 0.25rem 0.5rem;
358
+ border-radius: var(--radius);
359
+ font-size: 0.75rem;
360
+ font-weight: 600;
361
+ font-family: 'Inter', sans-serif;
362
+ }
363
+
364
+ .code-line { margin-bottom: 0.25rem; }
365
+ .kw { color: #569cd6; } /* Keyword */
366
+ .str { color: #ce9178; } /* String */
367
+ .cls { color: #4ec9b0; } /* Class */
368
+ .func { color: #dcdcaa; } /* Function */
369
+ .comment { color: #6a9955; }
370
+
371
+ /* --- Toast Notification --- */
372
+ .toast-container {
373
+ position: fixed;
374
+ bottom: 2rem;
375
+ right: 2rem;
376
+ z-index: 100;
377
+ }
378
+
379
+ .toast {
380
+ background: var(--bg-card);
381
+ padding: 1rem 1.5rem;
382
+ border-radius: var(--radius);
383
+ box-shadow: var(--shadow-lg);
384
+ border-left: 4px solid var(--primary);
385
+ margin-top: 0.5rem;
386
+ display: flex;
387
+ align-items: center;
388
+ gap: 0.75rem;
389
+ min-width: 300px;
390
+ transform: translateX(100%);
391
+ opacity: 0;
392
+ transition: all 0.3s;
393
+ }
394
+
395
+ .toast.show {
396
+ transform: translateX(0);
397
+ opacity: 1;
398
+ }
399
+
400
+ .toast.success { border-left-color: var(--success); }
401
+ .toast.error { border-left-color: var(--danger); }
402
+
403
+ /* Responsive */
404
+ @media (max-width: 768px) {
405
+ .toolbar { flex-direction: column; align-items: stretch; }
406
+ .toolbar-title { margin-bottom: 1rem; }
407
+ .actions { justify-content: space-between; }
408
+ .search-box { width: 100%; }
409
+ }
410
+ </style>
411
+ </head>
412
+ <body>
413
+
414
+ <!-- Header -->
415
+ <header>
416
+ <div class="brand">
417
+ <i class="fa-brands fa-laravel"></i>
418
+ ClientManager
419
+ </div>
420
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">
421
+ Built with AnyCoder
422
+ </a>
423
+ </header>
424
+
425
+ <!-- Main Content -->
426
+ <div class="container">
427
+
428
+ <!-- Dashboard Card -->
429
+ <div class="card">
430
+ <!-- Toolbar -->
431
+ <div class="toolbar">
432
+ <div class="toolbar-title">
433
+ <h2>Clientes</h2>
434
+ <p>Gerencie seus clientes com CRUD completo.</p>
435
+ </div>
436
+
437
+ <div class="actions">
438
+ <div class="search-box">
439
+ <i class="fa-solid fa-search"></i>
440
+ <input type="text" id="searchInput" placeholder="Buscar cliente...">
441
+ </div>
442
+ <button class="btn btn-primary" onclick="openModal('create')">
443
+ <i class="fa-solid fa-plus"></i> Novo Cliente
444
+ </button>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Table -->
449
+ <div class="table-container">
450
+ <table>
451
+ <thead>
452
+ <tr>
453
+ <th>ID</th>
454
+ <th>Nome</th>
455
+ <th>Email</th>
456
+ <th>Status</th>
457
+ <th>Actions</th>
458
+ </tr>
459
+ </thead>
460
+ <tbody id="clientTableBody">
461
+ <!-- Data injected by JS -->
462
+ </tbody>
463
+ </table>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Code Preview Section (Simulating Backend) -->
468
+ <div class="code-preview">
469
+ <div class="code-line"><span class="kw">public</span> <span class="func">function</span> <span class="func">store</span>(Request $request) {</div>
470
+ <div class="code-line">&nbsp;&nbsp;<span class="comment">// 1. Validation (Best Practice)</span></div>
471
+ <div class="code-line">&nbsp;&nbsp;$validated = $request->validate([</div>
472
+ <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;<span class="str">'name'</span> => <span class="str">'required|string|max:255'</span>,</div>
473
+ <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;<span class="str">'email'</span> => <span class="str">'required|email|unique:clients'</span>,</div>
474
+ <div class="code-line">&nbsp;&nbsp;]);</div>
475
+ <div class="code-line">&nbsp;&nbsp;<span class="comment">// 2. Creation</span></div>
476
+ <div class="code-line">&nbsp;&nbsp;<span class="cls">Client</span>::create($validated);</div>
477
+ <div class="code-line">&nbsp;&nbsp;<span class="kw">return</span> redirect()->route(<span class="str">'clients.index'</span>)->with(<span class="str">'success'</span>, <span class="str">'Client created successfully.'</span>);</div>
478
+ <div class="code-line>}</div>
479
+ </div>
480
+
481
+ </div>
482
+
483
+ <!-- Modal Form -->
484
+ <div class="modal-overlay" id="clientModal">
485
+ <div class="modal">
486
+ <div class="modal-header">
487
+ <h3 id="modalTitle">Novo Cliente</h3>
488
+ <button class="close-modal" onclick="closeModal()">
489
+ <i class="fa-solid fa-times"></i>
490
+ </button>
491
+ </div>
492
+ <div class="modal-body">
493
+ <form id="clientForm">
494
+ <div class="form-group">
495
+ <label for="name">Nome Completo</label>
496
+ <input type="text" class="form-control" id="name" required placeholder="Ex: Jo茫o Silva">
497
+ </div>
498
+ <div class="form-group">
499
+ <label for="email">Email Corporativo</label>
500
+ <input type="email" class="form-control" id="email" required placeholder="Ex: joao@empresa.com">
501
+ </div>
502
+ <div class="form-group">
503
+ <label for="status">Status</label>
504
+ <select class="form-control" id="status">
505
+ <option value="active">Ativo</option>
506
+ <option value="inactive">Inativo</option>
507
+ </select>
508
+ </div>
509
+ </form>
510
+ </div>
511
+ <div class="modal-footer">
512
+ <button class="btn btn-outline" onclick="closeModal()">Cancelar</button>
513
+ <button class="btn btn-primary" onclick="saveClient()">Salvar</button>
514
+ </div>
515
+ </div>
516
+ </div>
517
+
518
+ <!-- Toast Container -->
519
+ <div class="toast-container" id="toastContainer"></div>
520
+
521
+ <script>
522
+ // --- Mock Data ---
523
+ let clients = [
524
+ { id: 1, name: "Ana Souza", email: "ana.souza@dev.com", status: "active" },
525
+ { id: 2, name: "Carlos Pereira", email: "carlos.p@tech.com", status: "inactive" },
526
+ { id: 3, name: "Maria Oliveira", email: "maria.o@design.com", status: "active" },
527
+ ];
528
+
529
+ // --- State ---
530
+ let currentMode = 'create'; // 'create' or 'edit'
531
+ let editingId = null;
532
+
533
+ // --- Initialization ---
534
+ document.addEventListener('DOMContentLoaded', () => {
535
+ renderTable();
536
+ });
537
+
538
+ // --- Render Functions ---
539
+ function renderTable(data = clients) {
540
+ const tbody = document.getElementById('clientTableBody');
541
+ tbody.innerHTML = '';
542
+
543
+ if (data.length === 0) {
544
+ tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; color: var(--text-secondary)">Nenhum cliente encontrado.</td></tr>`;
545
+ return;
546
+ }
547
+
548
+ data.forEach(client => {
549
+ const tr = document.createElement('tr');
550
+ const statusBadge = client.status === 'active'
551
+ ? '<span class="status-badge status-active">Ativo</span>'
552
+ : '<span class="status-badge status-inactive">Inativo</span>';
553
+
554
+ tr.innerHTML = `
555
+ <td>${client.id}</td>
556
+ <td><strong>${client.name}</strong></td>
557
+ <td>${client.email}</td>
558
+ <td>${statusBadge}</td>
559
+ <td>
560
+ <button class="action-btn" onclick="openModal('edit', ${client.id})" title="Editar">
561
+ <i class="fa-solid fa-pen-to-square"></i>
562
+ </button>
563
+ <button class="action-btn delete" onclick="deleteClient(${client.id})" title="Excluir">
564
+ <i class="fa-solid fa-trash"></i>
565
+ </button>
566
+ </td>
567
+ `;
568
+ tbody.appendChild(tr);
569
+ });
570
+ }
571
+
572
+ // --- Modal Logic ---
573
+ function openModal(mode, id = null) {
574
+ currentMode = mode;
575
+ const modal = document.getElementById('clientModal');
576
+ const title = document.getElementById('modalTitle');
577
+ const form = document.getElementById('clientForm');
578
+
579
+ modal.classList.add('active');
580
+
581
+ if (mode === 'create') {
582
+ title.innerText = 'Novo Cliente';
583
+ form.reset();
584
+ editingId = null;
585
+ } else if (mode === 'edit') {
586
+ title.innerText = 'Editar Cliente';
587
+ editingId = id;
588
+ const client = clients.find(c => c.id === id);
589
+ if (client) {
590
+ document.getElementById('name').value = client.name;
591
+ document.getElementById('email').value = client.email;
592
+ document.getElementById('status').value = client.status;
593
+ }
594
+ }
595
+ }
596
+
597
+ function closeModal() {
598
+ document.getElementById('clientModal').classList.remove('active');
599
+ }
600
+
601
+ // --- CRUD Operations ---
602
+ function saveClient() {
603
+ const name = document.getElementById('name').value;
604
+ const email = document.getElementById('email').value;
605
+ const status = document.getElementById('status').value;
606
+
607
+ if (!name || !email) {
608
+ showToast('Preencha todos os campos obrigat贸rios.', 'error');
609
+ return;
610
+ }
611
+
612
+ if (currentMode === 'create') {
613
+ // Create Logic
614
+ const newId = clients.length > 0 ? Math.max(...clients.map(c => c.id)) + 1 : 1;
615
+ clients.push({ id: newId, name, email, status });
616
+ showToast('Cliente criado com sucesso!', 'success');
617
+ } else {
618
+ // Update Logic
619
+ const index = clients.findIndex(c => c.id === editingId);
620
+ if (index !== -1) {
621
+ clients[index] = { ...clients[index], name, email, status };
622
+ showToast('Cliente atualizado com sucesso!', 'success');
623
+ }
624
+ }
625
+
626
+ closeModal();
627
+ renderTable();
628
+ }
629
+
630
+ function deleteClient(id) {
631
+ if(confirm('Tem certeza que deseja excluir este cliente?')) {
632
+ clients = clients.filter(c => c.id !== id);
633
+ renderTable();
634
+ showToast('Cliente removido.', 'success');
635
+ }
636
+ }
637
+
638
+ // --- Search Logic ---
639
+ document.getElementById('searchInput').addEventListener('input', (e) => {
640
+ const term = e.target.value.toLowerCase();
641
+ const filtered = clients.filter(c =>
642
+ c.name.toLowerCase().includes(term) ||
643
+ c.email.toLowerCase().includes(term)
644
+ );
645
+ renderTable(filtered);
646
+ });
647
+
648
+ // --- Toast Notification ---
649
+ function showToast(message, type = 'success') {
650
+ const container = document.getElementById('toastContainer');
651
+ const toast = document.createElement('div');
652
+ toast.className = `toast ${type}`;
653
+
654
+ const icon = type === 'success' ? '<i class="fa-solid fa-check-circle"></i>' : '<i class="fa-solid fa-exclamation-circle"></i>';
655
+
656
+ toast.innerHTML = `
657
+ ${icon}
658
+ <span>${message}</span>
659
+ `;
660
+
661
+ container.appendChild(toast);
662
+
663
+ // Trigger animation
664
+ setTimeout(() => toast.classList.add('show'), 10);
665
+
666
+ // Remove
667
+ setTimeout(() => {
668
+ toast.classList.remove('show');
669
+ setTimeout(() => toast.remove(), 300);
670
+ }, 3000);
671
+ }
672
+ </script>
673
+ </body>
674
+ </html>