Hugging Face's logo

Spaces:
Ntecdeve
/
prompt-lovable
Running

App Files Community
Ntecdeve commited on
Commit
79b68a9
·
verified ·
1 Parent(s): 84b76c5

Adicione outros tipos de projetos no menu exemplo : catálogo whatapp , webplayer de rádio e etc - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +679 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Prompt Lovable
3
- emoji: 💻
4
- colorFrom: yellow
5
  colorTo: pink
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: prompt-lovable
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: pink
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,679 @@
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>Gerador de Prompts - Lovable.dev</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ min-height: 100vh;
17
+ }
18
+
19
+ .glass-morphism {
20
+ background: rgba(255, 255, 255, 0.1);
21
+ backdrop-filter: blur(10px);
22
+ border: 1px solid rgba(255, 255, 255, 0.2);
23
+ }
24
+
25
+ .prompt-box {
26
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
27
+ background-clip: text;
28
+ -webkit-background-clip: text;
29
+ -webkit-text-fill-color: transparent;
30
+ }
31
+
32
+ .copy-btn {
33
+ transition: all 0.3s ease;
34
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
35
+ }
36
+
37
+ .copy-btn:hover {
38
+ transform: translateY(-2px);
39
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
40
+ }
41
+
42
+ .tag {
43
+ transition: all 0.3s ease;
44
+ cursor: pointer;
45
+ }
46
+
47
+ .tag:hover {
48
+ transform: scale(1.05);
49
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
50
+ }
51
+
52
+ .tag.selected {
53
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
54
+ color: white;
55
+ }
56
+
57
+ .pulse {
58
+ animation: pulse 2s infinite;
59
+ }
60
+
61
+ @keyframes pulse {
62
+ 0% { transform: scale(1); }
63
+ 50% { transform: scale(1.05); }
64
+ 100% { transform: scale(1); }
65
+ }
66
+
67
+ .floating {
68
+ animation: floating 3s ease-in-out infinite;
69
+ }
70
+
71
+ @keyframes floating {
72
+ 0%, 100% { transform: translateY(0px); }
73
+ 50% { transform: translateY(-10px); }
74
+ }
75
+
76
+ .gradient-border {
77
+ position: relative;
78
+ border-radius: 1rem;
79
+ overflow: hidden;
80
+ }
81
+
82
+ .gradient-border::before {
83
+ content: '';
84
+ position: absolute;
85
+ top: 0;
86
+ left: 0;
87
+ right: 0;
88
+ bottom: 0;
89
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
90
+ z-index: -1;
91
+ padding: 2px;
92
+ border-radius: inherit;
93
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
94
+ mask-composite: exclude;
95
+ }
96
+ </style>
97
+ </head>
98
+ <body class="min-h-screen p-4 md:p-8">
99
+ <div class="max-w-6xl mx-auto">
100
+ <!-- Header -->
101
+ <div class="text-center mb-8">
102
+ <div class="floating mb-4">
103
+ <i class="fas fa-heart text-6xl text-pink-400"></i>
104
+ </div>
105
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">
106
+ Gerador de Prompts
107
+ <span class="text-pink-300">Lovable.dev</span>
108
+ </h1>
109
+ <p class="text-xl text-gray-200">Crie prompts perfeitos para o Lovable.dev em segundos</p>
110
+ </div>
111
+
112
+ <!-- Main Container -->
113
+ <div class="grid lg:grid-cols-2 gap-8">
114
+ <!-- Input Section -->
115
+ <div class="glass-morphism rounded-2xl p-6 md:p-8">
116
+ <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
117
+ <i class="fas fa-cogs mr-3 text-pink-400"></i>
118
+ Configurar Prompt
119
+ </h2>
120
+
121
+ <!-- Project Type -->
122
+ <div class="mb-6">
123
+ <label class="block text-white font-semibold mb-3">Tipo de Projeto</label>
124
+ <select id="projectType" class="w-full p-3 rounded-lg bg-white/10 text-white border border-white/20 focus:outline-none focus:border-pink-400">
125
+ <option value="web-app">Aplicação Web</option>
126
+ <option value="mobile-app">Aplicativo Mobile</option>
127
+ <option value="landing-page">Landing Page</option>
128
+ <option value="dashboard">Dashboard</option>
129
+ <option value="ecommerce">E-commerce</option>
130
+ <option value="portfolio">Portfólio</option>
131
+ <option value="header">Header Completo</option>
132
+ <option value="hero-banner">Hero/Banner</option>
133
+ <option value="main-content">Conteúdo Principal</option>
134
+ <option value="sidebar">Sidebar</option>
135
+ <option value="footer">Footer</option>
136
+ <option value="whatsapp-catalog">Catálogo WhatsApp</option>
137
+ <option value="radio-player">WebPlayer de Rádio</option>
138
+ <option value="blog">Blog Moderno</option>
139
+ <option value="forum">Fórum Online</option>
140
+ <option value="booking">Sistema de Reservas</option>
141
+ <option value="food-delivery">App de Delivery</option>
142
+ </select>
143
+ </div>
144
+
145
+ <!-- Features -->
146
+ <div class="mb-6">
147
+ <label class="block text-white font-semibold mb-3">Funcionalidades</label>
148
+ <div class="flex flex-wrap gap-2">
149
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="auth">Autenticação</span>
150
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="database">Banco de Dados</span>
151
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="api">API REST</span>
152
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="payment">Pagamento</span>
153
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="realtime">Tempo Real</span>
154
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="ai">Integração AI</span>
155
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="voice">Comandos de Voz</span>
156
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="blockchain">Blockchain</span>
157
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="web3">Web3</span>
158
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="metaverse">Metaverso</span>
159
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="iot">IoT</span>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Style -->
164
+ <div class="mb-6">
165
+ <label class="block text-white font-semibold mb-3">Estilo de Design</label>
166
+ <select id="style" class="w-full p-3 rounded-lg bg-white/10 text-white border border-white/20 focus:outline-none focus:border-pink-400">
167
+ <option value="modern">Moderno e Clean</option>
168
+ <option value="minimal">Minimalista</option>
169
+ <option value="creative">Criativo e Vibrante</option>
170
+ <option value="professional">Profissional Corporativo</option>
171
+ <option value="dark">Dark Theme</option>
172
+ <option value="glass">Glassmorphism</option>
173
+ </select>
174
+ </div>
175
+
176
+ <!-- Modern Effects -->
177
+ <div class="mb-6">
178
+ <label class="block text-white font-semibold mb-3">Efeitos Modernos</label>
179
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
180
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="micro">Microinterações</span>
181
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="scroll">Scroll Interativo</span>
182
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="typography">Tipografia Dinâmica</span>
183
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="cards">Cards Interativos</span>
184
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="lottie">Lottie Animations</span>
185
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="lighting">Iluminação 3D</span>
186
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="gamification">Gamificação</span>
187
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="gradients">Gradientes Animados</span>
188
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="darkmode">Modo Escuro</span>
189
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="cursor">Cursor Interativo</span>
190
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="ai">UI com IA</span>
191
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="mobile">Mobile-Friendly</span>
192
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="ar">Realidade Aumentada</span>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Tech Stack -->
197
+ <div class="mb-6">
198
+ <label class="block text-white font-semibold mb-3">Tecnologias</label>
199
+ <div class="flex flex-wrap gap-2">
200
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="react19">React 19</span>
201
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="astro">Astro</span>
202
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="nuxt4">Nuxt 4</span>
203
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="sveltekit">SvelteKit</span>
204
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="solidstart">SolidStart</span>
205
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="tailwind4">Tailwind CSS 4</span>
206
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="materialui8">Material UI 8</span>
207
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="nextjs">Next.js</span>
208
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="supabase">Supabase</span>
209
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="prisma">Prisma</span>
210
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="stripe">Stripe</span>
211
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="framer">Framer Motion</span>
212
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="threejs">Three.js</span>
213
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="ethers">Ethers.js</span>
214
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="hardhat">Hardhat</span>
215
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="web3js">Web3.js</span>
216
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="rust">Rust/WASM</span>
217
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="deno">Deno</span>
218
+ <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="bun">Bun</span>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Description -->
223
+ <div class="mb-6">
224
+ <label class="block text-white font-semibold mb-3">Descrição do Projeto</label>
225
+ <textarea id="description" rows="4"
226
+ class="w-full p-3 rounded-lg bg-white/10 text-white border border-white/20 focus:outline-none focus:border-pink-400 resize-none"
227
+ placeholder="Descreva brevemente o que você quer construir..."></textarea>
228
+ </div>
229
+
230
+ <!-- Generate Button -->
231
+ <button id="generateBtn"
232
+ class="w-full py-3 px-6 rounded-lg bg-gradient-to-r from-pink-500 to-purple-600 text-white font-semibold hover:from-pink-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105">
233
+ <i class="fas fa-magic mr-2"></i>
234
+ Gerar Prompt
235
+ </button>
236
+ </div>
237
+
238
+ <!-- Output Section -->
239
+ <div class="glass-morphism rounded-2xl p-6 md:p-8">
240
+ <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
241
+ <i class="fas fa-code mr-3 text-pink-400"></i>
242
+ Prompt Gerado
243
+ </h2>
244
+
245
+ <div class="gradient-border mb-4">
246
+ <div class="bg-gray-900/50 p-4 rounded-lg">
247
+ <pre id="generatedPrompt" class="text-gray-300 text-sm whitespace-pre-wrap">
248
+ Selecione as opções e clique em "Gerar Prompt" para começar...
249
+ </pre>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Action Buttons -->
254
+ <div class="flex gap-4">
255
+ <button id="copyBtn"
256
+ class="copy-btn flex-1 py-3 px-6 rounded-lg text-white font-semibold transition-all">
257
+ <i class="fas fa-copy mr-2"></i>
258
+ Copiar
259
+ </button>
260
+ <button id="resetBtn"
261
+ class="flex-1 py-3 px-6 rounded-lg bg-white/20 text-white font-semibold hover:bg-white/30 transition-all">
262
+ <i class="fas fa-refresh mr-2"></i>
263
+ Resetar
264
+ </button>
265
+ </div>
266
+
267
+ <!-- Tips -->
268
+ <div class="mt-6 p-4 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-lg">
269
+ <h3 class="text-white font-semibold mb-2 flex items-center">
270
+ <i class="fas fa-lightbulb mr-2 text-yellow-400"></i>
271
+ Dica do Dia
272
+ </h3>
273
+ <p class="text-gray-300 text-sm" id="dailyTip">
274
+ Use prompts específicos e detalhados para melhores resultados no Lovable.dev
275
+ </p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Examples Section -->
281
+ <div class="mt-8 glass-morphism rounded-2xl p-6">
282
+ <h3 class="text-xl font-bold text-white mb-4 flex items-center">
283
+ <i class="fas fa-star mr-3 text-yellow-400"></i>
284
+ Exemplos de Prompts
285
+ </h3>
286
+ <div class="grid md:grid-cols-3 gap-4">
287
+ <button class="example-btn p-4 bg-white/10 rounded-lg text-left hover:bg-white/20 transition-all"
288
+ data-example="ecommerce">
289
+ <h4 class="text-white font-semibold mb-2">E-commerce Completo</h4>
290
+ <p class="text-gray-300 text-sm">Marketplace com carrinho, pagamento e gestão de produtos</p>
291
+ </button>
292
+ <button class="example-btn p-4 bg-white/10 rounded-lg text-left hover:bg-white/20 transition-all"
293
+ data-example="dashboard">
294
+ <h4 class="text-white font-semibold mb-2">Dashboard Analytics</h4>
295
+ <p class="text-gray-300 text-sm">Painel de controle com gráficos e dados em tempo real</p>
296
+ </button>
297
+ <button class="example-btn p-4 bg-white/10 rounded-lg text-left hover:bg-white/20 transition-all"
298
+ data-example="portfolio">
299
+ <h4 class="text-white font-semibold mb-2">Portfólio Criativo</h4>
300
+ <p class="text-gray-300 text-sm">Site pessoal com animações e interações modernas</p>
301
+ </button>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Back to Top Button -->
306
+ <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 opacity-0 invisible flex items-center justify-center hover:shadow-xl hover:scale-110">
307
+ <i class="fas fa-arrow-up text-lg"></i>
308
+ </button>
309
+ </div>
310
+
311
+ <script>
312
+ // State management
313
+ let selectedFeatures = new Set();
314
+ let selectedTech = new Set();
315
+ let selectedEffects = new Set();
316
+
317
+ // Event listeners for effects
318
+ document.querySelectorAll('.tag[data-effect]').forEach(tag => {
319
+ tag.addEventListener('click', () => {
320
+ const effect = tag.getAttribute('data-effect');
321
+ if (selectedEffects.has(effect)) {
322
+ selectedEffects.delete(effect);
323
+ tag.classList.remove('selected');
324
+ } else {
325
+ selectedEffects.add(effect);
326
+ tag.classList.add('selected');
327
+ }
328
+ });
329
+ });
330
+
331
+ // Tips array
332
+ const tips = [
333
+ "Use prompts específicos e detalhados para melhores resultados no Lovable.dev",
334
+ "Adicione restrições técnicas para respostas mais precisas",
335
+ "Inclua exemplos de design que você gosta para referência visual",
336
+ "Mencione o público-alvo para personalização adequada",
337
+ "Especifique requisitos de performance e responsividade"
338
+ ];
339
+
340
+ // GSAP Animations
341
+ gsap.from('.glass-morphism', {
342
+ duration: 1,
343
+ y: 50,
344
+ opacity: 0,
345
+ stagger: 0.2,
346
+ ease: "power3.out"
347
+ });
348
+
349
+ // Tag selection
350
+ document.querySelectorAll('.tag[data-feature]').forEach(tag => {
351
+ tag.addEventListener('click', () => {
352
+ const feature = tag.getAttribute('data-feature');
353
+ if (selectedFeatures.has(feature)) {
354
+ selectedFeatures.delete(feature);
355
+ tag.classList.remove('selected');
356
+ } else {
357
+ selectedFeatures.add(feature);
358
+ tag.classList.add('selected');
359
+ }
360
+ });
361
+ });
362
+
363
+ document.querySelectorAll('.tag[data-tech]').forEach(tag => {
364
+ tag.addEventListener('click', () => {
365
+ const tech = tag.getAttribute('data-tech');
366
+ if (selectedTech.has(tech)) {
367
+ selectedTech.delete(tech);
368
+ tag.classList.remove('selected');
369
+ } else {
370
+ selectedTech.add(tech);
371
+ tag.classList.add('selected');
372
+ }
373
+ });
374
+ });
375
+
376
+ // Generate prompt
377
+ document.getElementById('generateBtn').addEventListener('click', generatePrompt);
378
+
379
+ function generatePrompt() {
380
+ const projectType = document.getElementById('projectType').value;
381
+ const style = document.getElementById('style').value;
382
+ const description = document.getElementById('description').value;
383
+
384
+ let prompt = `Crie uma ${getProjectTypeName(projectType)} com as seguintes características:\n\n`;
385
+
386
+ if (selectedFeatures.size > 0) {
387
+ prompt += `Funcionalidades necessárias:\n`;
388
+ selectedFeatures.forEach(feature => {
389
+ prompt += `- ${getFeatureDescription(feature)}\n`;
390
+ });
391
+ prompt += '\n';
392
+ }
393
+
394
+ if (selectedTech.size > 0) {
395
+ prompt += `Tecnologias a utilizar:\n`;
396
+ selectedTech.forEach(tech => {
397
+ prompt += `- ${getTechName(tech)}\n`;
398
+ });
399
+ prompt += '\n';
400
+ }
401
+
402
+ if (selectedEffects.size > 0) {
403
+ prompt += `Efeitos especiais:\n`;
404
+ selectedEffects.forEach(effect => {
405
+ prompt += `- ${getEffectDescription(effect)}\n`;
406
+ });
407
+ prompt += '\n';
408
+ }
409
+
410
+ prompt += `Estilo de design: ${getStyleDescription(style)}\n\n`;
411
+
412
+ if (description.trim()) {
413
+ prompt += `Descrição adicional: ${description}\n\n`;
414
+ }
415
+
416
+ prompt += `Requisitos técnicos:\n`;
417
+ prompt += `- Totalmente responsivo\n`;
418
+ prompt += `- Performance otimizada\n`;
419
+ prompt += `- Código limpo e bem documentado\n`;
420
+ prompt += `- Design moderno e intuitivo\n`;
421
+
422
+ document.getElementById('generatedPrompt').textContent = prompt;
423
+
424
+ // Animate the prompt box
425
+ gsap.from('#generatedPrompt', {
426
+ duration: 0.5,
427
+ opacity: 0,
428
+ y: 20,
429
+ ease: "power2.out"
430
+ });
431
+ }
432
+
433
+ // Copy to clipboard
434
+ document.getElementById('copyBtn').addEventListener('click', async () => {
435
+ const prompt = document.getElementById('generatedPrompt').textContent;
436
+ if (prompt.includes('Selecione as opções')) return;
437
+
438
+ try {
439
+ await navigator.clipboard.writeText(prompt);
440
+
441
+ const btn = document.getElementById('copyBtn');
442
+ const originalText = btn.innerHTML;
443
+ btn.innerHTML = '<i class="fas fa-check mr-2"></i>Copiado!';
444
+ btn.classList.add('pulse');
445
+
446
+ setTimeout(() => {
447
+ btn.innerHTML = originalText;
448
+ btn.classList.remove('pulse');
449
+ }, 2000);
450
+ } catch (err) {
451
+ console.error('Erro ao copiar:', err);
452
+ }
453
+ });
454
+
455
+ // Reset
456
+ document.getElementById('resetBtn').addEventListener('click', () => {
457
+ document.getElementById('projectType').value = 'web-app';
458
+ document.getElementById('style').value = 'modern';
459
+ document.getElementById('description').value = '';
460
+
461
+ selectedFeatures.clear();
462
+ selectedTech.clear();
463
+ selectedEffects.clear();
464
+
465
+ document.querySelectorAll('.tag').forEach(tag => {
466
+ tag.classList.remove('selected');
467
+ });
468
+
469
+ document.getElementById('generatedPrompt').textContent = 'Selecione as opções e clique em "Gerar Prompt" para começar...';
470
+ });
471
+
472
+ // Example prompts
473
+ document.querySelectorAll('.example-btn').forEach(btn => {
474
+ btn.addEventListener('click', () => {
475
+ const example = btn.getAttribute('data-example');
476
+ loadExample(example);
477
+ });
478
+ });
479
+
480
+ function loadExample(type) {
481
+ const examples = {
482
+ ecommerce: {
483
+ projectType: 'ecommerce',
484
+ features: ['auth', 'database', 'payment', 'api'],
485
+ style: 'modern',
486
+ tech: ['react', 'nextjs', 'tailwind', 'stripe', 'supabase'],
487
+ description: 'Marketplace completo com gestão de produtos, carrinho de compras, checkout seguro, sistema de avaliações e painel administrativo'
488
+ },
489
+ dashboard: {
490
+ projectType: 'dashboard',
491
+ features: ['auth', 'database', 'realtime', 'api', 'ai'],
492
+ style: 'modern',
493
+ tech: ['react', 'nextjs', 'tailwind', 'supabase'],
494
+ description: 'Dashboard de analytics com gráficos interativos, KPIs em tempo real, relatórios personalizáveis e insights com IA'
495
+ },
496
+ portfolio: {
497
+ projectType: 'portfolio',
498
+ features: [],
499
+ style: 'creative',
500
+ tech: ['react', 'nextjs', 'tailwind'],
501
+ description: 'Portfólio criativo com animações suaves, transições elegantes, seção de projetos, blog integrado e formulário de contato'
502
+ }
503
+ };
504
+
505
+ const ex = examples[type];
506
+
507
+ // Set values
508
+ document.getElementById('projectType').value = ex.projectType;
509
+ document.getElementById('style').value = ex.style;
510
+ document.getElementById('description').value = ex.description;
511
+
512
+ // Clear and set features
513
+ selectedFeatures.clear();
514
+ selectedTech.clear();
515
+
516
+ document.querySelectorAll('.tag').forEach(tag => {
517
+ tag.classList.remove('selected');
518
+ });
519
+
520
+ ex.features.forEach(f => {
521
+ const tag = document.querySelector(`[data-feature="${f}"]`);
522
+ if (tag) {
523
+ tag.classList.add('selected');
524
+ selectedFeatures.add(f);
525
+ }
526
+ });
527
+
528
+ ex.tech.forEach(t => {
529
+ const tag = document.querySelector(`[data-tech="${t}"]`);
530
+ if (tag) {
531
+ tag.classList.add('selected');
532
+ selectedTech.add(t);
533
+ }
534
+ });
535
+
536
+ generatePrompt();
537
+ }
538
+
539
+ // Helper functions
540
+ function getProjectTypeName(type) {
541
+ const types = {
542
+ 'web-app': 'aplicação web completa',
543
+ 'mobile-app': 'aplicativo mobile responsivo',
544
+ 'landing-page': 'landing page profissional',
545
+ 'dashboard': 'dashboard administrativo',
546
+ 'ecommerce': 'loja virtual completa',
547
+ 'portfolio': 'portfólio online',
548
+ 'header': 'header completo com logo, menu, CTA, busca e contatos',
549
+ 'hero-banner': 'hero/banner com título chamativo e imagem/vídeo',
550
+ 'main-content': 'conteúdo principal com seções de serviços, produtos, blog, depoimentos, formulários e galerias',
551
+ 'sidebar': 'sidebar com posts recentes, anúncios e newsletter',
552
+ 'footer': 'footer com links rápidos, contato e redes sociais',
553
+ 'whatsapp-catalog': 'catálogo de produtos para WhatsApp com carrinho e pedidos via chat',
554
+ 'radio-player': 'web player de rádio com lista de estações, favoritos e equalizador',
555
+ 'blog': 'blog moderno com sistema de comentários e newsletter',
556
+ 'forum': 'fórum online com categorias, threads e sistema de reputação',
557
+ 'booking': 'sistema de reservas com calendário e pagamento integrado',
558
+ 'food-delivery': 'aplicativo de delivery com mapa de restaurantes e rastreamento'
559
+ };
560
+ return types[type] || type;
561
+ }
562
+
563
+ function getFeatureDescription(feature) {
564
+ const features = {
565
+ 'auth': 'Sistema completo de autenticação (registro, login, recuperação de senha)',
566
+ 'database': 'Banco de dados relacional com modelos otimizados',
567
+ 'api': 'API RESTful com endpoints bem estruturados',
568
+ 'payment': 'Integração com Stripe para pagamentos seguros',
569
+ 'realtime': 'Funcionalidades em tempo real com WebSockets',
570
+ 'ai': 'Integração de IA para assistente interativo e FAQ inteligente',
571
+ 'voice': 'Comandos de voz via Web Speech API (opcional)',
572
+ 'blockchain': 'Integração com blockchain para contratos inteligentes e NFTs',
573
+ 'web3': 'Funcionalidades Web3 com carteira digital e tokens',
574
+ 'metaverse': 'Elementos 3D e interativos para experiências de metaverso',
575
+ 'iot': 'Integração com dispositivos IoT e sensores'
576
+ };
577
+ return features[feature] || feature;
578
+ }
579
+
580
+ function getTechName(tech) {
581
+ const techs = {
582
+ 'react19': 'React 19 com Server Components e interatividade moderna',
583
+ 'nextjs': 'Next.js 14 com App Router',
584
+ 'tailwind4': 'Tailwind CSS 4 com utilitários para animações e responsividade',
585
+ 'materialui8': 'Material UI 8 para componentes acessíveis',
586
+ 'supabase': 'Supabase para backend e banco de dados',
587
+ 'prisma': 'Prisma ORM para modelagem de dados',
588
+ 'stripe': 'Stripe para processamento de pagamentos',
589
+ 'astro': 'Astro para páginas ultra-rápidas e estáticas',
590
+ 'nuxt4': 'Nuxt 4 com Vue 3 e SSR',
591
+ 'sveltekit': 'SvelteKit para apps reativos e leves',
592
+ 'solidstart': 'SolidStart para componentes altamente responsivos',
593
+ 'framer': 'Framer Motion para animações',
594
+ 'threejs': 'Three.js para gráficos 3D',
595
+ 'ethers': 'Ethers.js para interação com blockchain',
596
+ 'hardhat': 'Hardhat para desenvolvimento de smart contracts',
597
+ 'web3js': 'Web3.js para aplicações descentralizadas',
598
+ 'rust': 'Rust compilado para WASM para performance crítica',
599
+ 'deno': 'Deno runtime para JavaScript/TypeScript moderno',
600
+ 'bun': 'Bun runtime ultra-rápido para JavaScript'
601
+ };
602
+ return techs[tech] || tech;
603
+ }
604
+
605
+ function getEffectDescription(effect) {
606
+ const effects = {
607
+ 'micro': 'Microinterações e animações sutis (hover effects, feedback visual)',
608
+ 'scroll': 'Scroll interativo com parallax, scroll-telling e fade in/out entre seções',
609
+ 'typography': 'Tipografia expressiva com movimento sutil e animações de texto',
610
+ 'cards': 'Cards interativos com flip, expansão e efeitos glassmorphism',
611
+ 'lottie': 'Lottie animations e vídeos curtos em loop para demonstrações',
612
+ 'lighting': 'Efeitos de iluminação 3D com sombras realistas e perspectiva',
613
+ 'gamification': 'Elementos gamificados como barras de progresso e quizzes',
614
+ 'gradients': 'Gradientes animados e transições de cor suaves entre seções',
615
+ 'darkmode': 'Modo escuro adaptável com transição animada e acessibilidade',
616
+ 'cursor': 'Efeitos interativos com cursor (magnet effect, zoom em imagens)',
617
+ 'ai': 'UI com IA integrada (chatbots animados, recomendações em tempo real)',
618
+ 'mobile': 'Design mobile-friendly com gestos touch e transições fluidas',
619
+ 'ar': 'Realidade aumentada para visualização imersiva de produtos'
620
+ };
621
+ return effects[effect] || effect;
622
+ }
623
+
624
+ function getStyleDescription(style) {
625
+ const styles = {
626
+ 'modern': 'Design moderno com micro-interações suaves, dark mode automático e tipografia expressiva',
627
+ 'minimal': 'Estilo minimalista com foco em simplicidade e performance',
628
+ 'creative': 'Design criativo com formas orgânicas, fluididade e efeitos visuais imersivos',
629
+ 'professional': 'Estilo corporativo com neomorfismo sutil e gamificação leve',
630
+ 'dark': 'Tema escuro adaptável com partículas animadas e contraste acessível',
631
+ 'glass': 'Glassmorphism moderno com blur, transparências e prefers-reduced-motion'
632
+ };
633
+ return styles[style] || style;
634
+ }
635
+
636
+ // Change daily tip
637
+ let tipIndex = 0;
638
+ setInterval(() => {
639
+ tipIndex = (tipIndex + 1) % tips.length;
640
+ document.getElementById('dailyTip').textContent = tips[tipIndex];
641
+ gsap.from('#dailyTip', {
642
+ duration: 0.5,
643
+ opacity: 0,
644
+ y: -10,
645
+ ease: "power2.out"
646
+ });
647
+ }, 10000);
648
+
649
+ // Back to Top Button
650
+ const backToTopBtn = document.getElementById('backToTop');
651
+
652
+ window.addEventListener('scroll', () => {
653
+ if (window.pageYOffset > 300) {
654
+ gsap.to(backToTopBtn, {
655
+ duration: 0.3,
656
+ opacity: 1,
657
+ visibility: 'visible',
658
+ ease: "power2.out"
659
+ });
660
+ } else {
661
+ gsap.to(backToTopBtn, {
662
+ duration: 0.3,
663
+ opacity: 0,
664
+ visibility: 'hidden',
665
+ ease: "power2.out"
666
+ });
667
+ }
668
+ });
669
+
670
+ backToTopBtn.addEventListener('click', () => {
671
+ gsap.to(window, {
672
+ duration: 0.8,
673
+ scrollTo: 0,
674
+ ease: "power2.inOut"
675
+ });
676
+ });
677
+ </script>
678
+ <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=Ntecdeve/prompt-lovable" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
679
+ </html>