Hugging Face's logo

Spaces:
engmsilva
/
formspro
Running

App Files Community
engmsilva commited on
Commit
bb52df7
·
verified ·
1 Parent(s): edd0c94

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +507 -19
  3. prompts.txt +13 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Formspro
3
- emoji: 🌖
4
  colorFrom: purple
5
- colorTo: indigo
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: formspro
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: blue
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,507 @@
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>Meus Formulários | Dashboard</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
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #4F46E5;
14
+ --primary-light: #6366F1;
15
+ --primary-dark: #4338CA;
16
+ --secondary: #10B981;
17
+ --dark: #1F2937;
18
+ --light: #F9FAFB;
19
+ --gray: #6B7280;
20
+ --gray-light: #E5E7EB;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Inter', sans-serif;
25
+ background-color: #F9FAFB;
26
+ color: #1F2937;
27
+ }
28
+
29
+ .sidebar {
30
+ width: 280px;
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .sidebar-collapsed {
35
+ width: 80px;
36
+ }
37
+
38
+ .main-content {
39
+ margin-left: 280px;
40
+ transition: all 0.3s ease;
41
+ }
42
+
43
+ .main-content-expanded {
44
+ margin-left: 80px;
45
+ }
46
+
47
+ .nav-item.active {
48
+ background-color: #EEF2FF;
49
+ color: var(--primary);
50
+ border-left: 4px solid var(--primary);
51
+ }
52
+
53
+ .nav-item.active svg {
54
+ color: var(--primary);
55
+ }
56
+
57
+ .card-hover:hover {
58
+ transform: translateY(-2px);
59
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
60
+ }
61
+
62
+ .form-card {
63
+ transition: all 0.2s ease;
64
+ border-radius: 12px;
65
+ }
66
+
67
+ .form-card:hover {
68
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
69
+ }
70
+
71
+ .status-badge {
72
+ font-size: 12px;
73
+ padding: 4px 10px;
74
+ border-radius: 20px;
75
+ font-weight: 500;
76
+ }
77
+
78
+ .avatar-group .avatar {
79
+ margin-right: -10px;
80
+ border: 2px solid white;
81
+ transition: all 0.2s ease;
82
+ }
83
+
84
+ .avatar-group .avatar:hover {
85
+ transform: scale(1.1);
86
+ z-index: 10;
87
+ }
88
+
89
+ .dropdown-menu {
90
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
91
+ border-radius: 8px;
92
+ border: 1px solid #E5E7EB;
93
+ }
94
+
95
+ .search-input:focus {
96
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
97
+ }
98
+
99
+ .create-btn {
100
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
101
+ transition: all 0.2s ease;
102
+ }
103
+
104
+ .create-btn:hover {
105
+ transform: translateY(-1px);
106
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
107
+ }
108
+
109
+ .fade-in {
110
+ animation: fadeIn 0.2s ease-in-out;
111
+ }
112
+
113
+ @keyframes fadeIn {
114
+ from { opacity: 0; transform: translateY(-5px); }
115
+ to { opacity: 1; transform: translateY(0); }
116
+ }
117
+
118
+ .progress-bar {
119
+ height: 6px;
120
+ border-radius: 3px;
121
+ background-color: #E5E7EB;
122
+ }
123
+
124
+ .progress-fill {
125
+ height: 100%;
126
+ border-radius: 3px;
127
+ background-color: var(--primary);
128
+ }
129
+
130
+ /* Tooltip styles */
131
+ .tooltip {
132
+ position: relative;
133
+ }
134
+
135
+ .tooltip .tooltip-text {
136
+ visibility: hidden;
137
+ width: max-content;
138
+ background-color: #1F2937;
139
+ color: #fff;
140
+ text-align: center;
141
+ border-radius: 6px;
142
+ padding: 6px 12px;
143
+ position: absolute;
144
+ z-index: 30;
145
+ left: 100%;
146
+ margin-left: 12px;
147
+ opacity: 0;
148
+ transition: opacity 0.3s;
149
+ font-size: 13px;
150
+ font-weight: 500;
151
+ white-space: nowrap;
152
+ }
153
+
154
+ .tooltip .tooltip-text::after {
155
+ content: "";
156
+ position: absolute;
157
+ top: 50%;
158
+ right: 100%;
159
+ margin-top: -5px;
160
+ border-width: 5px;
161
+ border-style: solid;
162
+ border-color: transparent #1F2937 transparent transparent;
163
+ }
164
+
165
+ .tooltip:hover .tooltip-text {
166
+ visibility: visible;
167
+ opacity: 1;
168
+ }
169
+
170
+ /* Tooltip for collapsed sidebar */
171
+ .sidebar-collapsed .tooltip .tooltip-text {
172
+ left: 50%;
173
+ top: 100%;
174
+ margin-left: 0;
175
+ transform: translateX(-50%);
176
+ }
177
+
178
+ .sidebar-collapsed .tooltip .tooltip-text::after {
179
+ top: -5px;
180
+ left: 50%;
181
+ right: auto;
182
+ margin-left: -5px;
183
+ border-color: transparent transparent #1F2937 transparent;
184
+ }
185
+
186
+ /* Collapsed sidebar styles */
187
+ .sidebar-collapsed .nav-item {
188
+ justify-content: center;
189
+ padding-left: 0;
190
+ padding-right: 0;
191
+ }
192
+
193
+ .sidebar-collapsed .nav-item span {
194
+ display: none;
195
+ }
196
+
197
+ .sidebar-collapsed .nav-item .badge-count {
198
+ display: none;
199
+ }
200
+
201
+ .sidebar-collapsed .team-section {
202
+ display: none;
203
+ }
204
+
205
+ .sidebar-collapsed .user-info .user-details {
206
+ display: none;
207
+ }
208
+
209
+ .sidebar-collapsed .user-info svg {
210
+ display: none;
211
+ }
212
+
213
+ .sidebar-collapsed .logo-text {
214
+ display: none;
215
+ }
216
+
217
+ .sidebar-collapsed .logo-icon {
218
+ margin-right: 0;
219
+ }
220
+
221
+ /* Tooltip for collapse button */
222
+ .toggle-sidebar-tooltip {
223
+ position: relative;
224
+ }
225
+
226
+ .toggle-sidebar-tooltip .tooltip-text {
227
+ visibility: hidden;
228
+ width: max-content;
229
+ background-color: #1F2937;
230
+ color: #fff;
231
+ text-align: center;
232
+ border-radius: 6px;
233
+ padding: 6px 12px;
234
+ position: absolute;
235
+ z-index: 30;
236
+ left: 50%;
237
+ top: 100%;
238
+ transform: translateX(-50%);
239
+ opacity: 0;
240
+ transition: opacity 0.3s;
241
+ font-size: 13px;
242
+ font-weight: 500;
243
+ white-space: nowrap;
244
+ }
245
+
246
+ .toggle-sidebar-tooltip .tooltip-text::after {
247
+ content: "";
248
+ position: absolute;
249
+ top: -5px;
250
+ left: 50%;
251
+ margin-left: -5px;
252
+ border-width: 5px;
253
+ border-style: solid;
254
+ border-color: transparent transparent #1F2937 transparent;
255
+ }
256
+
257
+ .toggle-sidebar-tooltip:hover .tooltip-text {
258
+ visibility: visible;
259
+ opacity: 1;
260
+ }
261
+ </style>
262
+ </head>
263
+ <body class="flex h-screen overflow-hidden">
264
+ <!-- Sidebar -->
265
+ <div class="sidebar bg-white shadow-sm flex flex-col fixed h-full z-20">
266
+ <div class="p-6 flex items-center justify-between border-b border-gray-100">
267
+ <div class="flex items-center">
268
+ <div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center logo-icon">
269
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
270
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
271
+ </svg>
272
+ </div>
273
+ <span class="ml-3 text-lg font-semibold text-gray-800 logo-text">FormsPro</span>
274
+ </div>
275
+ <button class="text-gray-400 hover:text-gray-600 toggle-sidebar toggle-sidebar-tooltip">
276
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
277
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
278
+ </svg>
279
+ <span class="tooltip-text">Recolher menu</span>
280
+ </button>
281
+ </div>
282
+
283
+ <div class="flex-1 overflow-y-auto py-4 px-2">
284
+ <div class="space-y-1">
285
+ <a href="#" class="nav-item active flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg tooltip">
286
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
287
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
288
+ </svg>
289
+ <span class="ml-3">Dashboard</span>
290
+ <span class="tooltip-text">Dashboard</span>
291
+ </a>
292
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip">
293
+ <svg xmlns="http://www.w3.org/200极/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
294
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
295
+ </svg>
296
+ <span class="ml-3">Formulários</span>
297
+ <span class="ml-auto px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full badge-count">12</span>
298
+ <span class="tooltip-text">Formulários</span>
299
+ </a>
300
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip">
301
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
302
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
303
+ </svg>
304
+ <span class="ml-3">Respostas</span>
305
+ <span class="tooltip-text">Respostas</span>
306
+ </a>
307
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip">
308
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
309
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
310
+ </svg>
311
+ <span class="ml-3">Relatórios</span>
312
+ <span class="tooltip-text">Relatórios</span>
313
+ </a>
314
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip">
315
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
316
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
317
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
318
+ </svg>
319
+ <span class="ml-3">Configurações</span>
320
+ <span class="tooltip-text">Configurações</span>
321
+ </a>
322
+ </div>
323
+
324
+ <div class="mt-8 px-4 team-section">
325
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Equipe</h3>
326
+ <div class="mt-3 space-y-1">
327
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg">
328
+ <div class="relative">
329
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
330
+ <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-green-400"></span>
331
+ </div>
332
+ <span class="ml-3">Ana Silva</span>
333
+ </a>
334
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg">
335
+ <div class="relative">
336
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
337
+ <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-gray-400"></span>
338
+ </div>
339
+ <span class="ml-3">Carlos Souza</span>
340
+ </a>
341
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg">
342
+ <div class="relative">
343
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
344
+ <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-green-400"></span>
345
+ </div>
346
+ <span class="ml-3">Maria Oliveira</span>
347
+ </a>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="p-4 border-t border-gray-100">
353
+ <div class="relative dropdown">
354
+ <button class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg user-info tooltip">
355
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
356
+ <div class="ml-3 text-left user-details">
357
+ <div class="font-medium">Ana Silva</div>
358
+ <div class="text-xs text-gray-500">ana@example.com</div>
359
+ </div>
360
+ <svg xmlns="http://www.w3.org/2000/svg" class="ml-auto h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
361
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
362
+ </svg>
363
+ <span class="tooltip-text">Minha conta</span>
364
+ </button>
365
+ <div class="dropdown-menu absolute bottom-full left-0 mb-2 w-full hidden bg-white rounded-lg shadow-lg z-10 fade-in">
366
+ <div class="py-1">
367
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
368
+ <i class="fas fa-cog mr-2 text-gray-500"></i> Configurações
369
+ </a>
370
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
371
+ <i class="fas fa-exchange-alt mr-2 text-gray-500"></i> Trocar organização
372
+ </a>
373
+ <div class="border-t border-gray-200 my-1"></div>
374
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
375
+ <i class="fas fa-sign-out-alt mr-2 text-gray-500"></i> Sair
376
+ </a>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Main Content -->
384
+ <div class="main-content flex-1 flex flex-col overflow-hidden">
385
+ <!-- Top Navigation -->
386
+ <header class="bg-white border-b border-gray-200">
387
+ <div class="flex items-center justify-between px-6 py-4">
388
+ <div class="flex items-center">
389
+ <h1 class="text-xl font-semibold text-gray-900">Meus Formulários</h1>
390
+ <div class="ml-4 flex items-center">
391
+ <div class="relative dropdown">
392
+ <button class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900">
393
+ <span>Acme Inc.</span>
394
+ <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
395
+ <path stroke-linecap="round" stroke-linejoin="round, stroke-width="2" d="M19 9l-7 7-7-7" />
396
+ </svg>
397
+ </button>
398
+ <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white rounded-lg shadow-lg z-10 fade-in">
399
+ <div class="py-1">
400
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center">
401
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-5 h-5 rounded-full mr-2" alt="">
402
+ Acme Inc.
403
+ </a>
404
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center">
405
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-5 h-5 rounded-full mr-2" alt="">
406
+ Startup XYZ
407
+ </a>
408
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center">
409
+ <img src="https极randomuser.me/api/portraits/women/68.jpg" class="w-5 h-5 rounded-full mr-2" alt="">
410
+ Freelance
411
+ </a>
412
+ <div class="border-t border-gray-200 my-1"></div>
413
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
414
+ <i class="fas fa-cog mr-2 text-gray-500"></i> Gerenciar organizações
415
+ </a>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <span class="ml-2 px-2 py-1 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full">Admin</span>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="flex items-center space-x-4">
424
+ <button class="flex items-center px-4 py-2.5 create-btn text-white font-medium rounded-lg transition-all duration-200 shadow-md">
425
+ <i class="fas fa-plus mr-2"></i>
426
+ Criar novo
427
+ </button>
428
+
429
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full">
430
+ <i class="fas fa-bell"></i>
431
+ </button>
432
+ </div>
433
+ </div>
434
+ </header>
435
+
436
+ <!-- Content -->
437
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
438
+ <!-- Stats -->
439
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
440
+ <div class="bg-white rounded-xl shadow-sm p极">
441
+ <div class="flex items-center justify-between">
442
+ <div>
443
+ <p class="text-sm font-medium text-gray-500">Total de Formulários</p>
444
+ <p class="mt-1 text-2xl font-semibold text-gray-900">12</p>
445
+ </div>
446
+ <div class="p-3 rounded-lg bg-indigo-100 text-indigo-600">
447
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
448
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
449
+ </svg>
450
+ </div>
451
+ </div>
452
+ <div class="mt-4">
453
+ <div class="flex items-center justify-between text-sm text-gray-500">
454
+ <span>+2 desde o mês passado</span>
455
+ <span class="text-green-500 font-medium">+20%</span>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="bg-white rounded-xl shadow-sm p-6">
461
+ <div class="flex items-center justify-between">
462
+ <div>
463
+ <p class="text-sm font-medium text-gray-500">Respostas Totais</p>
464
+ <p class="mt-1 text-2xl font-semibold text-gray-900">501</p>
465
+ </div>
466
+ <div class="p-3 rounded-lg bg-green-100 text-green-600">
467
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none, viewBox="0 0 24 24" stroke="currentColor">
468
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
469
+ </svg>
470
+ </div>
471
+ </div>
472
+ <div class="mt-4">
473
+ <div class="flex items-center justify-between text-sm text-gray-500">
474
+ <span>+124 desde o mês passado</span>
475
+ <span class="text-green-500 font-medium">+33%</span>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="bg-white rounded-xl shadow-sm p-6">
481
+ <div class="flex items-center justify-between">
482
+ <div>
483
+ <p class="text-sm font-medium text-gray-500">Taxa de Resposta</p>
484
+ <p class="mt-1 text-2xl font-semibold text-gray-900">68%</p>
485
+ </div>
486
+ <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
487
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
488
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
489
+ </svg>
490
+ </div>
491
+ </div>
492
+ <div class="mt-4">
493
+ <div class="flex items-center justify-between text-sm text-gray-500">
494
+ <span>+8% desde o mês passado</span>
495
+ <span class="text-green-500 font-medium">+13%</span>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="bg-white rounded-xl shadow-sm p-6">
501
+ <div class="flex items-center justify-between">
502
+ <div>
503
+ <p class="text-sm font-medium text-gray-500">Colaboradores</p>
504
+ <p class="mt-1 text-2xl font-semibold text-gray-900">5</p>
505
+ </div>
506
+ <div
507
+ </html>
prompts.txt ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Crie uma página de gerenciamento de formulários para uma aplicação no-code builder, seguindo este estilo e padrão visual: Contexto da Aplicação A aplicação é multi-tenant (cada organização possui seu próprio espaço isolado) Os formulários são colaborativos: membros da organização podem criar, editar e gerenciar formulários em conjunto. A página deve permitir a visualização e análise das respostas capturadas pelos formulários. 🎨 Estilo e Layout Use um layout centralizado e espaçado, com foco na clareza visual, semelhante a uma dashboard leve. Fundo da página com gradiente horizontal from-blue-500 to-indigo-600. Use um cartão branco com bordas arredondadas (rounded-xl), sombra sutil (shadow-lg) e espaçamento interno (p-8) para o conteúdo principal. Utilize tipografia moderna, espaçamentos generosos e alto contraste para melhorar legibilidade. 🧩 Componentes esperados na página Header da página Título grande: “Meus formulários” Botão de ação primária no canto direito: “Criar novo formulário” Estilo com gradiente from-indigo-600 to-blue-500 Ícone de "+" Lista de formulários existentes Cada formulário exibido como um cartão individual: Nome do formulário Data de criação Quantidade de respostas Ações rápidas: Visualizar, Editar, Compartilhar, Excluir Os cartões devem ter bordas arredondadas, ícones sutis e sombra leve. Ações podem estar visíveis ou em um menu de 3 pontos ("..."). Indicadores e feedback Mensagem do tipo “Você ainda não criou nenhum formulário” quando vazio Use um icon outline ilustrativo (ex: clipboard ou form) Botão de criar com destaque nesse estado vazio Pesquisa e filtros Campo de busca com ícone de lupa Filtros por status: “Todos”, “Ativos”, “Arquivados” Dropdown para ordenar por “Mais recente”, “Mais respondido”, etc. Responsividade Adaptar os cartões e botões para visualização em dispositivos móveis Os elementos devem ocupar largura total (w-full) em telas menores Tipografia adaptável (text-sm, sm:text-base) 🌈 Estética e UX Cores principais: indigo-600, blue-500, gray-100, white Componentes com estados visuais (hover, foco, desativado) Interações suaves com hover:scale-105, transition-all duration-200 Ícones outline e minimalistas (Heroicons ou similares) Tipografia consistente com títulos font-extrabold e descrições text-gray-600 🧠 Extras sugeridos para IA Inclusão de spinner/loader quando estiver carregando os dados Toasts para ações de sucesso/erro (ex: ao excluir um formulário) Tooltip nos ícones de ação com descrição breve Paginação ou scroll infinito se houver muitos formulários Estilo Visual Layout limpo, espaçado, com foco na clareza visual e responsividade. Fundo com gradiente horizontal from-blue-500 to-indigo-600. Cartões e seções com fundo branco, cantos arredondados (rounded-xl), sombra sutil (shadow-lg), e padding generoso (p-8). Tipografia moderna e legível (font-extrabold para títulos, text-gray-600 para descrições). Ícones minimalistas (outline) no estilo Heroicons ou Lucide. 🧩 Elementos da Página 1. Header da Página Título: “Meus Formulários” Botão primário: “Criar novo formulário” com ícone de "+". Dropdown de seleção do tenant atual (organização ativa). Avatar de usuário com menu de configurações / trocar organização / sair. 2. Lista de Formulários Cards listando formulários com: Título do formulário Nome de quem criou (colaborador) Data de criação Total de respostas Ações: Visualizar, Editar, Compartilhar, Excluir Estado vazio com ilustração e call-to-action “Você ainda não criou formulários”. Paginação ou scroll infinito. 3. Colaboração Badge com a quantidade de colaboradores ativos por formulário. Botão ou ícone para abrir modal de gerenciamento de permissões. Suporte visual a ícones de perfil/avatares com acesso ao formulário. 4. Filtros e Pesquisa Campo de busca com debounce. Filtros: Por status: “Todos”, “Ativos”, “Arquivados” Por autor: Lista de colaboradores Por tenant (caso usuário pertença a múltiplas orgs) 5. Dados Capturados Botão: “Visualizar respostas” Leva a uma subpágina ou modal com visualização de dados: Tabela com colunas = campos do formulário Suporte a exportação (CSV, XLSX) Gráficos simples para dados estruturados (respostas fechadas) Filtros por data de envio Indicador de número total de respostas + última recebida. 👥 Gestão Multi-Tenant Dropdown ou botão fixo de troca de tenant/organização Exibir nome da organização ativa no header Indicar permissões do usuário (Ex: Admin, Editor, Leitor) Modal ou tela de “Configurações da Organização” com: Nome da organização Lista de membros Convite de usuários Papéis e permissões Opção de sair ou excluir organização (se permitido)
2
+ Crie uma página de gerenciamento de formulários para uma aplicação no-code builder, seguindo este estilo e padrão visual: Contexto da Aplicação A aplicação é multi-tenant (cada organização possui seu próprio espaço isolado) Os formulários são colaborativos: membros da organização podem criar, editar e gerenciar formulários em conjunto. A página deve permitir a visualização e análise das respostas capturadas pelos formulários. 🎨 Estilo e Layout Use um layout centralizado e espaçado, com foco na clareza visual, semelhante a uma dashboard leve. Fundo da página com gradiente horizontal from-blue-500 to-indigo-600. Use um cartão branco com bordas arredondadas (rounded-xl), sombra sutil (shadow-lg) e espaçamento interno (p-8) para o conteúdo principal. Utilize tipografia moderna, espaçamentos generosos e alto contraste para melhorar legibilidade. 🧩 Componentes esperados na página Header da página Título grande: “Meus formulários” Botão de ação primária no canto direito: “Criar novo formulário” Estilo com gradiente from-indigo-600 to-blue-500 Ícone de "+" Lista de formulários existentes Cada formulário exibido como um cartão individual: Nome do formulário Data de criação Quantidade de respostas Ações rápidas: Visualizar, Editar, Compartilhar, Excluir Os cartões devem ter bordas arredondadas, ícones sutis e sombra leve. Ações podem estar visíveis ou em um menu de 3 pontos ("..."). Indicadores e feedback Mensagem do tipo “Você ainda não criou nenhum formulário” quando vazio Use um icon outline ilustrativo (ex: clipboard ou form) Botão de criar com destaque nesse estado vazio Pesquisa e filtros Campo de busca com ícone de lupa Filtros por status: “Todos”, “Ativos”, “Arquivados” Dropdown para ordenar por “Mais recente”, “Mais respondido”, etc. Responsividade Adaptar os cartões e botões para visualização em dispositivos móveis Os elementos devem ocupar largura total (w-full) em telas menores Tipografia adaptável (text-sm, sm:text-base) 🌈 Estética e UX Cores principais: indigo-600, blue-500, gray-100, white Componentes com estados visuais (hover, foco, desativado) Interações suaves com hover:scale-105, transition-all duration-200 Ícones outline e minimalistas (Heroicons ou similares) Tipografia consistente com títulos font-extrabold e descrições text-gray-600 🧠 Extras sugeridos para IA Inclusão de spinner/loader quando estiver carregando os dados Toasts para ações de sucesso/erro (ex: ao excluir um formulário) Tooltip nos ícones de ação com descrição breve Paginação ou scroll infinito se houver muitos formulários Estilo Visual Layout limpo, espaçado, com foco na clareza visual e responsividade. Fundo com gradiente horizontal from-blue-500 to-indigo-600. Cartões e seções com fundo branco, cantos arredondados (rounded-xl), sombra sutil (shadow-lg), e padding generoso (p-8). Tipografia moderna e legível (font-extrabold para títulos, text-gray-600 para descrições). Ícones minimalistas (outline) no estilo Heroicons ou Lucide. 🧩 Elementos da Página 1. Header da Página Título: “Meus Formulários” Botão primário: “Criar novo formulário” com ícone de "+". Dropdown de seleção do tenant atual (organização ativa). Avatar de usuário com menu de configurações / trocar organização / sair. 2. Lista de Formulários Cards listando formulários com: Título do formulário Nome de quem criou (colaborador) Data de criação Total de respostas Ações: Visualizar, Editar, Compartilhar, Excluir Estado vazio com ilustração e call-to-action “Você ainda não criou formulários”. Paginação ou scroll infinito. 3. Colaboração Badge com a quantidade de colaboradores ativos por formulário. Botão ou ícone para abrir modal de gerenciamento de permissões. Suporte visual a ícones de perfil/avatares com acesso ao formulário. 4. Filtros e Pesquisa Campo de busca com debounce. Filtros: Por status: “Todos”, “Ativos”, “Arquivados” Por autor: Lista de colaboradores Por tenant (caso usuário pertença a múltiplas orgs) 5. Dados Capturados Botão: “Visualizar respostas” Leva a uma subpágina ou modal com visualização de dados: Tabela com colunas = campos do formulário Suporte a exportação (CSV, XLSX) Gráficos simples para dados estruturados (respostas fechadas) Filtros por data de envio Indicador de número total de respostas + última recebida. 👥 Gestão Multi-Tenant Dropdown ou botão fixo de troca de tenant/organização Exibir nome da organização ativa no header Indicar permissões do usuário (Ex: Admin, Editor, Leitor) Modal ou tela de “Configurações da Organização” com: Nome da organização Lista de membros Convite de usuários Papéis e permissões Opção de sair ou excluir organização (se permitido)
3
+ Crie uma página de gerenciamento de formulários para uma aplicação no-code builder, seguindo este estilo e padrão visual: Contexto da Aplicação A aplicação é multi-tenant (cada organização possui seu próprio espaço isolado) Os formulários são colaborativos: membros da organização podem criar, editar e gerenciar formulários em conjunto. A página deve permitir a visualização e análise das respostas capturadas pelos formulários. 🎨 Estilo e Layout Use um layout centralizado e espaçado, com foco na clareza visual, semelhante a uma dashboard leve. Fundo da página com gradiente horizontal from-blue-500 to-indigo-600. Use um cartão branco com bordas arredondadas (rounded-xl), sombra sutil (shadow-lg) e espaçamento interno (p-8) para o conteúdo principal. Utilize tipografia moderna, espaçamentos generosos e alto contraste para melhorar legibilidade. 🧩 Componentes esperados na página Header da página Título grande: “Meus formulários” Botão de ação primária no canto direito: “Criar novo formulário” Estilo com gradiente from-indigo-600 to-blue-500 Ícone de "+" Lista de formulários existentes Cada formulário exibido como um cartão individual: Nome do formulário Data de criação Quantidade de respostas Ações rápidas: Visualizar, Editar, Compartilhar, Excluir Os cartões devem ter bordas arredondadas, ícones sutis e sombra leve. Ações podem estar visíveis ou em um menu de 3 pontos ("..."). Indicadores e feedback Mensagem do tipo “Você ainda não criou nenhum formulário” quando vazio Use um icon outline ilustrativo (ex: clipboard ou form) Botão de criar com destaque nesse estado vazio Pesquisa e filtros Campo de busca com ícone de lupa Filtros por status: “Todos”, “Ativos”, “Arquivados” Dropdown para ordenar por “Mais recente”, “Mais respondido”, etc. Responsividade Adaptar os cartões e botões para visualização em dispositivos móveis Os elementos devem ocupar largura total (w-full) em telas menores Tipografia adaptável (text-sm, sm:text-base) 🌈 Estética e UX Cores principais: indigo-600, blue-500, gray-100, white Componentes com estados visuais (hover, foco, desativado) Interações suaves com hover:scale-105, transition-all duration-200 Ícones outline e minimalistas (Heroicons ou similares) Tipografia consistente com títulos font-extrabold e descrições text-gray-600 🧠 Extras sugeridos para IA Inclusão de spinner/loader quando estiver carregando os dados Toasts para ações de sucesso/erro (ex: ao excluir um formulário) Tooltip nos ícones de ação com descrição breve Paginação ou scroll infinito se houver muitos formulários Estilo Visual Layout limpo, espaçado, com foco na clareza visual e responsividade. Fundo com gradiente horizontal from-blue-500 to-indigo-600. Cartões e seções com fundo branco, cantos arredondados (rounded-xl), sombra sutil (shadow-lg), e padding generoso (p-8). Tipografia moderna e legível (font-extrabold para títulos, text-gray-600 para descrições). Ícones minimalistas (outline) no estilo Heroicons ou Lucide. 🧩 Elementos da Página 1. Header da Página Título: “Meus Formulários” Botão primário: “Criar novo formulário” com ícone de "+". Dropdown de seleção do tenant atual (organização ativa). Avatar de usuário com menu de configurações / trocar organização / sair. 2. Lista de Formulários Cards listando formulários com: Título do formulário Nome de quem criou (colaborador) Data de criação Total de respostas Ações: Visualizar, Editar, Compartilhar, Excluir Estado vazio com ilustração e call-to-action “Você ainda não criou formulários”. Paginação ou scroll infinito. 3. Colaboração Badge com a quantidade de colaboradores ativos por formulário. Botão ou ícone para abrir modal de gerenciamento de permissões. Suporte visual a ícones de perfil/avatares com acesso ao formulário. 4. Filtros e Pesquisa Campo de busca com debounce. Filtros: Por status: “Todos”, “Ativos”, “Arquivados” Por autor: Lista de colaboradores Por tenant (caso usuário pertença a múltiplas orgs) 5. Dados Capturados Botão: “Visualizar respostas” Leva a uma subpágina ou modal com visualização de dados: Tabela com colunas = campos do formulário Suporte a exportação (CSV, XLSX) Gráficos simples para dados estruturados (respostas fechadas) Filtros por data de envio Indicador de número total de respostas + última recebida. 👥 Gestão Multi-Tenant Dropdown ou botão fixo de troca de tenant/organização Exibir nome da organização ativa no header Indicar permissões do usuário (Ex: Admin, Editor, Leitor) Modal ou tela de “Configurações da Organização” com: Nome da organização Lista de membros Convite de usuários Papéis e permissões Opção de sair ou excluir organização (se permitido)
4
+ Crie uma página de gerenciamento de formulários para uma aplicação no-code builder, seguindo este estilo e padrão visual: Contexto da Aplicação A aplicação é multi-tenant (cada organização possui seu próprio espaço isolado) Os formulários são colaborativos: membros da organização podem criar, editar e gerenciar formulários em conjunto. A página deve permitir a visualização e análise das respostas capturadas pelos formulários. 🎨 Estilo e Layout Use um layout centralizado e espa��ado, com foco na clareza visual, semelhante a uma dashboard leve. Fundo da página com gradiente horizontal from-blue-500 to-indigo-600. Os elementos da página devem sempre em container com fundo claro criando contraste fortes em a cor dos elementos e a cor de fundo do container Use um cartão branco com bordas arredondadas (rounded-xl), sombra sutil (shadow-lg) e espaçamento interno (p-8) para o conteúdo principal. Utilize tipografia moderna, espaçamentos generosos e alto contraste para melhorar legibilidade. 🧩 Componentes esperados na página Header da página Título grande: “Meus formulários” Botão de ação primária no canto direito: “Criar novo formulário” Estilo com gradiente from-indigo-600 to-blue-500 Ícone de "+" Lista de formulários existentes Cada formulário exibido como um cartão individual: Nome do formulário Data de criação Quantidade de respostas Ações rápidas: Visualizar, Editar, Compartilhar, Excluir Os cartões devem ter bordas arredondadas, ícones sutis e sombra leve. Ações podem estar visíveis ou em um menu de 3 pontos ("..."). Indicadores e feedback Mensagem do tipo “Você ainda não criou nenhum formulário” quando vazio Use um icon outline ilustrativo (ex: clipboard ou form) Botão de criar com destaque nesse estado vazio Pesquisa e filtros Campo de busca com ícone de lupa Filtros por status: “Todos”, “Ativos”, “Arquivados” Dropdown para ordenar por “Mais recente”, “Mais respondido”, etc. Responsividade Adaptar os cartões e botões para visualização em dispositivos móveis Os elementos devem ocupar largura total (w-full) em telas menores Tipografia adaptável (text-sm, sm:text-base) 🌈 Estética e UX Cores principais: indigo-600, blue-500, gray-100, white Componentes com estados visuais (hover, foco, desativado) Interações suaves com hover:scale-105, transition-all duration-200 Ícones outline e minimalistas (Heroicons ou similares) Tipografia consistente com títulos font-extrabold e descrições text-gray-600
5
+ Inclusão de spinner/loader quando estiver carregando os dados Toasts para ações de sucesso/erro (ex: ao excluir um formulário) Tooltip nos ícones de ação com descrição breve Paginação ou scroll infinito se houver muitos formulários Estilo Visual Layout limpo, espaçado, com foco na clareza visual e responsividade. Fundo com gradiente horizontal from-blue-500 to-indigo-600. Cartões e seções com fundo branco, cantos arredondados (rounded-xl), sombra sutil (shadow-lg), e padding generoso (p-8). Tipografia moderna e legível (font-extrabold para títulos, text-gray-600 para descrições). Ícones minimalistas (outline) no estilo Heroicons ou Lucide.
6
+ vatar de usuário com menu de configurações / trocar organização / sair. 2. Lista de Formulários Cards listando formulários com: Título do formulário Nome de quem criou (colaborador) Data de criação Total de respostas Ações: Visualizar, Editar, Compartilhar, Excluir Estado vazio com ilustração e call-to-action “Você ainda não criou formulários”. Paginação ou scroll infinito. 3. Colaboração Badge com a quantidade de colaboradores ativos por formulário. Botão ou ícone para abrir modal de gerenciamento de permissões. Suporte visual a ícones de perfil/avatares com acesso ao formulário.
7
+ Crie uma página de gerenciamento de formulários para uma aplicação no-code builder, seguindo este estilo e padrão visual: Contexto da Aplicação A aplicação é multi-tenant (cada organização possui seu próprio espaço isolado) Os formulários são colaborativos: membros da organização podem criar, editar e gerenciar formulários em conjunto. A página deve permitir a visualização e análise das respostas capturadas pelos formulários. 🎨 Estilo e Layout Use um layout centralizado e espaçado, com foco na clareza visual, semelhante a uma dashboard leve. Fundo da página com gradiente horizontal from-blue-500 to-indigo-600. Os elementos da página devem sempre em container com fundo claro criando contraste fortes em a cor dos elementos e a cor de fundo do container Use um cartão branco com bordas arredondadas (rounded-xl), sombra sutil (shadow-lg) e espaçamento interno (p-8) para o conteúdo principal. Utilize tipografia moderna, espaçamentos generosos e alto contraste para melhorar legibilidade. 🧩 Componentes esperados na página Header da página Título grande: “Meus formulários” Botão de ação primária no canto direito: “Criar novo formulário”, não deve ficar no header principal Estilo com gradiente from-indigo-600 to-blue-500 Ícone de "+" Lista de formulários existentes Cada formulário exibido como um cartão individual: Nome do formulário Data de criação Quantidade de respostas Ações rápidas: Visualizar, Editar, Compartilhar, Excluir Os cartões devem ter bordas arredondadas, ícones sutis e sombra leve. Ações podem estar visíveis ou em um menu de 3 pontos ("..."). Indicadores e feedback Mensagem do tipo “Você ainda não criou nenhum formulário” quando vazio Use um icon outline ilustrativo (ex: clipboard ou form) Botão de criar com destaque nesse estado vazio Pesquisa e filtros Campo de busca com ícone de lupa Filtros por status: “Todos”, “Ativos”, “Arquivados” Dropdown para ordenar por “Mais recente”, “Mais respondido”, etc. Responsividade Adaptar os cartões e botões para visualização em dispositivos móveis Os elementos devem ocupar largura total (w-full) em telas menores Tipografia adaptável (text-sm, sm:text-base) 🌈 Estética e UX Cores principais: indigo-600, blue-500, gray-100, white Componentes com estados visuais (hover, foco, desativado) Interações suaves com hover:scale-105, transition-all duration-200 Ícones outline e minimalistas (Heroicons ou similares) Tipografia consistente com títulos font-extrabold e descrições text-gray-600 🧠 Extras sugeridos para IA Inclusão de spinner/loader quando estiver carregando os dados Toasts para ações de sucesso/erro (ex: ao excluir um formulário) Tooltip nos ícones de ação com descrição breve Paginação ou scroll infinito se houver muitos formulários Estilo Visual Layout limpo, espaçado, com foco na clareza visual e responsividade. Fundo com gradiente horizontal from-blue-500 to-indigo-600. Cartões e seções com fundo branco, cantos arredondados (rounded-xl), sombra sutil (shadow-lg), e padding generoso (p-8). Tipografia moderna e legível (font-extrabold para títulos, text-gray-600 para descrições). Ícones minimalistas (outline) no estilo Heroicons ou Lucide. Botão primário: “Criar novo formulário” com ícone de "+". Dropdown de seleção do tenant atual (organização ativa). Avatar de usuário com menu de configurações / trocar organização / sair. 🧩 Elementos da Página 1. Header da Página Título: “Meus Formulários” Botão primário: “Criar novo formulário” com ícone de "+". Dropdown de seleção do tenant atual (organização ativa). Avatar de usuário com menu de configurações / trocar organização / sair. 2. Lista de Formulários Cards listando formulários com: Título do formulário Nome de quem criou (colaborador) Data de criação Total de respostas Ações: Visualizar, Editar, Compartilhar, Excluir Estado vazio com ilustração e call-to-action “Você ainda não criou formulários”. Paginação ou scroll infinito. 3. Colaboração Badge com a quantidade de colaboradores ativos por formulário. Botão ou ícone para abrir modal de gerenciamento de permissões. Suporte visual a ícones de perfil/avatares com acesso ao formulário. 4. Filtros e Pesquisa Campo de busca com debounce. Filtros: Por status: “Todos”, “Ativos”, “Arquivados” Por autor: Lista de colaboradores Por tenant (caso usuário pertença a múltiplas orgs) 5. Dados Capturados Botão: “Visualizar respostas” Leva a uma subpágina ou modal com visualização de dados: Tabela com colunas = campos do formulário Suporte a exportação (CSV, XLSX) Gráficos simples para dados estruturados (respostas fechadas) Filtros por data de envio Indicador de número total de respostas + última recebida. 👥 Gestão Multi-Tenant Dropdown ou botão fixo de troca de tenant/organização Exibir nome da organização ativa no header Indicar permissões do usuário (Ex: Admin, Editor, Leitor) Modal ou tela de “Configurações da Organização” com: Nome da organização Lista de membros Convite de usuários Papéis e permissões Opção de sair ou excluir organização (se permitido)
8
+ melhore o layout, adicone imagem nos icones de avatar
9
+ melhore o layout
10
+ ajuste o layout inspirado no layout do figma
11
+ ajuste Sidebar para quando ele for recolhido mostre os icones do menu com popovers descritivos
12
+ adicione tooltips
13
+ adicione tooltip no botão sidebar-collapsed e nos botões do menu quando o siderbar estiver fechado