Hugging Face's logo

Spaces:
joaokss
/
teste
Running

App Files Community
joaokss commited on
Commit
435b21c
·
verified ·
1 Parent(s): 69871b8

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +508 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Teste
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: red
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: teste
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: yellow
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,508 @@
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>Elegance - Moda Feminina | Admin</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
+ .dropdown:hover .dropdown-menu {
11
+ display: block;
12
+ }
13
+
14
+ .search-bar {
15
+ transition: all 0.3s ease;
16
+ }
17
+
18
+ .search-bar:focus-within {
19
+ width: 300px;
20
+ }
21
+
22
+ .cart-count {
23
+ top: -8px;
24
+ right: -8px;
25
+ }
26
+
27
+ @media (max-width: 768px) {
28
+ .mobile-menu {
29
+ transform: translateX(-100%);
30
+ transition: transform 0.3s ease;
31
+ }
32
+
33
+ .mobile-menu.active {
34
+ transform: translateX(0);
35
+ }
36
+ }
37
+
38
+ /* Custom styles for admin section */
39
+ .admin-container {
40
+ min-height: calc(100vh - 200px);
41
+ }
42
+
43
+ .product-image-preview {
44
+ max-height: 150px;
45
+ object-fit: contain;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="font-sans bg-gray-50">
50
+ <!-- Top Bar -->
51
+ <div class="bg-pink-600 text-white text-sm py-2 px-4">
52
+ <div class="container mx-auto flex justify-between items-center">
53
+ <div class="flex space-x-4">
54
+ <a href="#" class="hover:text-pink-200"><i class="fas fa-phone-alt mr-1"></i> (11) 9999-9999</a>
55
+ <a href="#" class="hover:text-pink-200"><i class="fas fa-envelope mr-1"></i> [email protected]</a>
56
+ </div>
57
+ <div class="flex space-x-4">
58
+ <a href="#" class="hover:text-pink-200"><i class="fas fa-truck mr-1"></i> Frete Grátis acima de R$20000</a>
59
+ <a href="#" class="hover:text-pink-200"><i class="fas fa-exchange-alt mr-1"></i> Troca Fácil</a>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Main Header -->
65
+ <header class="sticky top-0 z-50 bg-white shadow-md">
66
+ <div class="container mx-auto px-4 py-4">
67
+ <!-- Mobile Menu Button (hidden on desktop) -->
68
+ <div class="md:hidden flex justify-between items-center">
69
+ <button id="mobileMenuButton" class="text-gray-700">
70
+ <i class="fas fa-bars text-2xl"></i>
71
+ </button>
72
+ <a href="#" class="text-2xl font-bold text-pink-600">ELEGANCE</a>
73
+ <div class="flex space-x-4">
74
+ <a href="#" class="text-gray-700 relative">
75
+ <i class="fas fa-user text-xl"></i>
76
+ </a>
77
+ <a href="#" class="text-gray-700 relative">
78
+ <i class="fas fa-shopping-bag text-xl"></i>
79
+ <span class="cart-count absolute bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
80
+ </a>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Desktop Header -->
85
+ <div class="hidden md:flex justify-between items-center">
86
+ <!-- Logo -->
87
+ <a href="#" class="text-3xl font-bold text-pink-600">ELEGANCE</a>
88
+
89
+ <!-- Search Bar -->
90
+ <div class="search-bar relative w-64">
91
+ <input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:border-pink-500">
92
+ <button class="absolute right-0 top-0 h-full px-3 text-gray-500 hover:text-pink-600">
93
+ <i class="fas fa-search"></i>
94
+ </button>
95
+ </div>
96
+
97
+ <!-- User Actions -->
98
+ <div class="flex space-x-6 items-center">
99
+ <a href="#" class="text-gray-700 hover:text-pink-600 flex flex-col items-center">
100
+ <i class="fas fa-user text-xl"></i>
101
+ <span class="text-xs mt-1">Minha Conta</span>
102
+ </a>
103
+ <a href="#" class="text-gray-700 hover:text-pink-600 flex flex-col items-center">
104
+ <i class="fas fa-heart text-xl"></i>
105
+ <span class="text-xs mt-1">Favoritos</span>
106
+ </a>
107
+ <a href="#" class="text-gray-700 hover:text-pink-600 flex flex-col items-center relative">
108
+ <i class="fas fa-shopping-bag text-xl"></i>
109
+ <span class="text-xs mt-1">Carrinho</span>
110
+ <span class="cart-count absolute -top-1 -right-2 bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
111
+ </a>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Navigation -->
116
+ <nav class="hidden md:block mt-4">
117
+ <ul class="flex justify-center space-x-8">
118
+ <li class="dropdown relative">
119
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex items-center">
120
+ Novidades <i class="fas fa-chevron-down ml-1 text-xs"></i>
121
+ </a>
122
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-50">
123
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Lançamentos</a>
124
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Coleção Verão</a>
125
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Promoções</a>
126
+ </div>
127
+ </li>
128
+ <li class="dropdown relative">
129
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex items-center">
130
+ Roupas <i class="fas fa-chevron-down ml-1 text-xs"></i>
131
+ </a>
132
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-50">
133
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Vestidos</a>
134
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Blusas</a>
135
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Calças</a>
136
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Shorts</a>
137
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Saias</a>
138
+ </div>
139
+ </li>
140
+ <li class="dropdown relative">
141
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex items-center">
142
+ Acessórios <i class="fas fa-chevron-down ml-1 text-xs"></i>
143
+ </a>
144
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48 z-50">
145
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Bolsas</a>
146
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Cintos</a>
147
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Óculos</a>
148
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-pink-50 hover:text-pink-600">Joias</a>
149
+ </div>
150
+ </li>
151
+ <li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2">Sapatos</a></li>
152
+ <li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2">Plus Size</a></li>
153
+ <li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2">Promoções</a></li>
154
+ </ul>
155
+ </nav>
156
+ </div>
157
+ </header>
158
+
159
+ <!-- Mobile Menu (hidden by default) -->
160
+ <div id="mobileMenu" class="mobile-menu fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-50 p-4 md:hidden">
161
+ <div class="flex justify-between items-center mb-6">
162
+ <a href="#" class="text-xl font-bold text-pink-600">ELEGANCE</a>
163
+ <button id="closeMobileMenu" class="text-gray-700">
164
+ <i class="fas fa-times text-2xl"></i>
165
+ </button>
166
+ </div>
167
+
168
+ <div class="search-bar relative mb-6">
169
+ <input type="text" placeholder="Buscar produtos..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-300 focus:outline-none focus:border-pink-500">
170
+ <button class="absolute right-0 top-0 h-full px-3 text-gray-500 hover:text-pink-600">
171
+ <i class="fas fa-search"></i>
172
+ </button>
173
+ </div>
174
+
175
+ <nav>
176
+ <ul class="space-y-4">
177
+ <li>
178
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex justify-between items-center">
179
+ Novidades <i class="fas fa-chevron-down"></i>
180
+ </a>
181
+ </li>
182
+ <li>
183
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex justify-between items-center">
184
+ Roupas <i class="fas fa-chevron-down"></i>
185
+ </a>
186
+ </li>
187
+ <li>
188
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 flex justify-between items-center">
189
+ Acessórios <i class="fas fa-chevron-down"></i>
190
+ </a>
191
+ </li>
192
+ <li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block">Sapatos</a></li>
193
+ <li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block">Plus Size</a></li>
194
+ <li><a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block">Promoções</a></li>
195
+ <li class="border-t border-gray-200 pt-4 mt-4">
196
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block"><i class="fas fa-user mr-2"></i> Minha Conta</a>
197
+ </li>
198
+ <li>
199
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block"><i class="fas fa-heart mr-2"></i> Favoritos</a>
200
+ </li>
201
+ <li>
202
+ <a href="#" class="text-gray-700 hover:text-pink-600 font-medium py-2 block relative">
203
+ <i class="fas fa-shopping-bag mr-2"></i> Carrinho
204
+ <span class="cart-count absolute top-1/2 -right-6 transform -translate-y-1/2 bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
205
+ </a>
206
+ </li>
207
+ </ul>
208
+ </nav>
209
+ </div>
210
+
211
+ <!-- Admin Content -->
212
+ <main class="admin-container container mx-auto px-4 py-8">
213
+ <div class="flex justify-between items-center mb-8">
214
+ <h1 class="text-3xl font-bold text-gray-800">Gerenciamento de Produtos</h1>
215
+ <button id="addProductBtn" class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-md flex items-center">
216
+ <i class="fas fa-plus mr-2"></i> Adicionar Produto
217
+ </button>
218
+ </div>
219
+
220
+ <!-- Product Form Modal (hidden by default) -->
221
+ <div id="productModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
222
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-y-auto">
223
+ <div class="flex justify-between items-center border-b px-6 py-4">
224
+ <h3 id="modalTitle" class="text-xl font-semibold text-gray-800">Adicionar Novo Produto</h3>
225
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
226
+ <i class="fas fa-times"></i>
227
+ </button>
228
+ </div>
229
+ <form id="productForm" class="p-6">
230
+ <input type="hidden" id="productId">
231
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
232
+ <div>
233
+ <label for="productName" class="block text-sm font-medium text-gray-700 mb-1">Nome do Produto</label>
234
+ <input type="text" id="productName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required>
235
+ </div>
236
+ <div>
237
+ <label for="productCategory" class="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
238
+ <select id="productCategory" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required>
239
+ <option value="">Selecione uma categoria</option>
240
+ <option value="Vestidos">Vestidos</option>
241
+ <option value="Blusas">Blusas</option>
242
+ <option value="Calças">Calças</option>
243
+ <option value="Shorts">Shorts</option>
244
+ <option value="Saias">Saias</option>
245
+ <option value="Bolsas">Bolsas</option>
246
+ <option value="Acessórios">Acessórios</option>
247
+ <option value="Sapatos">Sapatos</option>
248
+ </select>
249
+ </div>
250
+ <div>
251
+ <label for="productPrice" class="block text-sm font-medium text-gray-700 mb-1">Preço (R$)</label>
252
+ <input type="number" id="productPrice" step="0.01" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required>
253
+ </div>
254
+ <div>
255
+ <label for="productStock" class="block text-sm font-medium text-gray-700 mb-1">Estoque</label>
256
+ <input type="number" id="productStock" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500" required>
257
+ </div>
258
+ <div class="md:col-span-2">
259
+ <label for="productDescription" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label>
260
+ <textarea id="productDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500"></textarea>
261
+ </div>
262
+ <div class="md:col-span-2">
263
+ <label for="productImage" class="block text-sm font-medium text-gray-700 mb-1">Imagem do Produto</label>
264
+ <input type="file" id="productImage" accept="image/*" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-pink-500 focus:border-pink-500">
265
+ <div id="imagePreviewContainer" class="mt-2 hidden">
266
+ <img id="imagePreview" src="#" alt="Preview da imagem" class="product-image-preview">
267
+ </div>
268
+ </div>
269
+ </div>
270
+ <div class="mt-6 flex justify-end space-x-3">
271
+ <button type="button" id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancelar</button>
272
+ <button type="submit" id="saveProductBtn" class="px-4 py-2 bg-pink-600 text-white rounded-md hover:bg-pink-700">Salvar Produto</button>
273
+ </div>
274
+ </form>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Products Table -->
279
+ <div class="bg-white shadow-md rounded-lg overflow-hidden">
280
+ <div class="overflow-x-auto">
281
+ <table class="min-w-full divide-y divide-gray-200">
282
+ <thead class="bg-gray-50">
283
+ <tr>
284
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Imagem</th>
285
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
286
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categoria</th>
287
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Preço</th>
288
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estoque</th>
289
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
290
+ </tr>
291
+ </thead>
292
+ <tbody id="productsTableBody" class="bg-white divide-y divide-gray-200">
293
+ <!-- Products will be loaded here -->
294
+ </tbody>
295
+ </table>
296
+ </div>
297
+ </div>
298
+ </main>
299
+
300
+ <script>
301
+ // Mobile menu toggle
302
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
303
+ const closeMobileMenu = document.getElementById('closeMobileMenu');
304
+ const mobileMenu = document.getElementById('mobileMenu');
305
+
306
+ mobileMenuButton.addEventListener('click', () => {
307
+ mobileMenu.classList.add('active');
308
+ document.body.style.overflow = 'hidden';
309
+ });
310
+
311
+ closeMobileMenu.addEventListener('click', () => {
312
+ mobileMenu.classList.remove('active');
313
+ document.body.style.overflow = 'auto';
314
+ });
315
+
316
+ // Close mobile menu when clicking outside
317
+ document.addEventListener('click', (e) => {
318
+ if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) {
319
+ mobileMenu.classList.remove('active');
320
+ document.body.style.overflow = 'auto';
321
+ }
322
+ });
323
+
324
+ // Dropdown menus
325
+ const dropdowns = document.querySelectorAll('.dropdown');
326
+
327
+ dropdowns.forEach(dropdown => {
328
+ const button = dropdown.querySelector('a');
329
+ const menu = dropdown.querySelector('.dropdown-menu');
330
+
331
+ button.addEventListener('click', (e) => {
332
+ e.preventDefault();
333
+ menu.classList.toggle('hidden');
334
+
335
+ // Close other dropdowns
336
+ dropdowns.forEach(otherDropdown => {
337
+ if (otherDropdown !== dropdown) {
338
+ otherDropdown.querySelector('.dropdown-menu').classList.add('hidden');
339
+ }
340
+ });
341
+ });
342
+ });
343
+
344
+ // Close dropdowns when clicking outside
345
+ document.addEventListener('click', (e) => {
346
+ if (!e.target.matches('.dropdown a')) {
347
+ dropdowns.forEach(dropdown => {
348
+ dropdown.querySelector('.dropdown-menu').classList.add('hidden');
349
+ });
350
+ }
351
+ });
352
+
353
+ // Product CRUD functionality
354
+ let products = JSON.parse(localStorage.getItem('products')) || [];
355
+ let currentProductId = null;
356
+
357
+ // DOM Elements
358
+ const addProductBtn = document.getElementById('addProductBtn');
359
+ const productModal = document.getElementById('productModal');
360
+ const closeModalBtn = document.getElementById('closeModalBtn');
361
+ const cancelBtn = document.getElementById('cancelBtn');
362
+ const productForm = document.getElementById('productForm');
363
+ const productsTableBody = document.getElementById('productsTableBody');
364
+ const productImage = document.getElementById('productImage');
365
+ const imagePreviewContainer = document.getElementById('imagePreviewContainer');
366
+ const imagePreview = document.getElementById('imagePreview');
367
+
368
+ // Event Listeners
369
+ addProductBtn.addEventListener('click', openAddProductModal);
370
+ closeModalBtn.addEventListener('click', closeProductModal);
371
+ cancelBtn.addEventListener('click', closeProductModal);
372
+ productForm.addEventListener('submit', saveProduct);
373
+ productImage.addEventListener('change', previewImage);
374
+
375
+ // Initialize the products table
376
+ renderProductsTable();
377
+
378
+ // Functions
379
+ function openAddProductModal() {
380
+ currentProductId = null;
381
+ document.getElementById('modalTitle').textContent = 'Adicionar Novo Produto';
382
+ document.getElementById('productForm').reset();
383
+ imagePreviewContainer.classList.add('hidden');
384
+ productModal.classList.remove('hidden');
385
+ }
386
+
387
+ function openEditProductModal(id) {
388
+ const product = products.find(p => p.id === id);
389
+ if (!product) return;
390
+
391
+ currentProductId = id;
392
+ document.getElementById('modalTitle').textContent = 'Editar Produto';
393
+ document.getElementById('productId').value = product.id;
394
+ document.getElementById('productName').value = product.name;
395
+ document.getElementById('productCategory').value = product.category;
396
+ document.getElementById('productPrice').value = product.price;
397
+ document.getElementById('productStock').value = product.stock;
398
+ document.getElementById('productDescription').value = product.description || '';
399
+
400
+ if (product.image) {
401
+ imagePreview.src = product.image;
402
+ imagePreviewContainer.classList.remove('hidden');
403
+ } else {
404
+ imagePreviewContainer.classList.add('hidden');
405
+ }
406
+
407
+ productModal.classList.remove('hidden');
408
+ }
409
+
410
+ function closeProductModal() {
411
+ productModal.classList.add('hidden');
412
+ }
413
+
414
+ function previewImage(e) {
415
+ const file = e.target.files[0];
416
+ if (file) {
417
+ const reader = new FileReader();
418
+ reader.onload = function(event) {
419
+ imagePreview.src = event.target.result;
420
+ imagePreviewContainer.classList.remove('hidden');
421
+ };
422
+ reader.readAsDataURL(file);
423
+ }
424
+ }
425
+
426
+ function saveProduct(e) {
427
+ e.preventDefault();
428
+
429
+ const productData = {
430
+ id: currentProductId || Date.now().toString(),
431
+ name: document.getElementById('productName').value,
432
+ category: document.getElementById('productCategory').value,
433
+ price: parseFloat(document.getElementById('productPrice').value),
434
+ stock: parseInt(document.getElementById('productStock').value),
435
+ description: document.getElementById('productDescription').value,
436
+ image: imagePreview.src !== '#' ? imagePreview.src : ''
437
+ };
438
+
439
+ if (currentProductId) {
440
+ // Update existing product
441
+ const index = products.findIndex(p => p.id === currentProductId);
442
+ if (index !== -1) {
443
+ products[index] = productData;
444
+ }
445
+ } else {
446
+ // Add new product
447
+ products.push(productData);
448
+ }
449
+
450
+ // Save to localStorage
451
+ localStorage.setItem('products', JSON.stringify(products));
452
+
453
+ // Refresh the table
454
+ renderProductsTable();
455
+
456
+ // Close the modal
457
+ closeProductModal();
458
+ }
459
+
460
+ function deleteProduct(id) {
461
+ if (confirm('Tem certeza que deseja excluir este produto?')) {
462
+ products = products.filter(p => p.id !== id);
463
+ localStorage.setItem('products', JSON.stringify(products));
464
+ renderProductsTable();
465
+ }
466
+ }
467
+
468
+ function renderProductsTable() {
469
+ productsTableBody.innerHTML = '';
470
+
471
+ if (products.length === 0) {
472
+ productsTableBody.innerHTML = `
473
+ <tr>
474
+ <td colspan="6" class="px-6 py-4 text-center text-gray-500">Nenhum produto cadastrado</td>
475
+ </tr>
476
+ `;
477
+ return;
478
+ }
479
+
480
+ products.forEach(product => {
481
+ const row = document.createElement('tr');
482
+ row.innerHTML = `
483
+ <td class="px-6 py-4 whitespace-nowrap">
484
+ ${product.image ? `<img src="${product.image}" alt="${product.name}" class="h-10 w-10 rounded-full object-cover">` : '<div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center"><i class="fas fa-image text-gray-400"></i></div>'}
485
+ </td>
486
+ <td class="px-6 py-4 whitespace-nowrap">
487
+ <div class="text-sm font-medium text-gray-900">${product.name}</div>
488
+ </td>
489
+ <td class="px-6 py-4 whitespace-nowrap">
490
+ <div class="text-sm text-gray-500">${product.category}</div>
491
+ </td>
492
+ <td class="px-6 py-4 whitespace-nowrap">
493
+ <div class="text-sm text-gray-900">R$ ${product.price.toFixed(2)}</div>
494
+ </td>
495
+ <td class="px-6 py-4 whitespace-nowrap">
496
+ <div class="text-sm text-gray-900">${product.stock}</div>
497
+ </td>
498
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
499
+ <button onclick="openEditProductModal('${product.id}')" class="text-pink-600 hover:text-pink-900 mr-3"><i class="fas fa-edit"></i> Editar</button>
500
+ <button onclick="deleteProduct('${product.id}')" class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i> Excluir</button>
501
+ </td>
502
+ `;
503
+ productsTableBody.appendChild(row);
504
+ });
505
+ }
506
+ </script>
507
+ <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=joaokss/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
508
+ </html>
prompts.txt ADDED
File without changes