Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gerador Mestre de Prompts - Lovable Framework</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .framework-card { | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .framework-card:hover { | |
| transform: translateY(-5px); | |
| border-color: #667eea; | |
| box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); | |
| } | |
| .framework-card.selected { | |
| border-color: #667eea; | |
| background: rgba(102, 126, 234, 0.1); | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| width: 60px; | |
| height: 30px; | |
| background: #ccc; | |
| border-radius: 15px; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .toggle-switch.active { | |
| background: #667eea; | |
| } | |
| .toggle-switch::after { | |
| content: ''; | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 24px; | |
| height: 24px; | |
| background: white; | |
| border-radius: 50%; | |
| transition: transform 0.3s; | |
| } | |
| .toggle-switch.active::after { | |
| transform: translateX(30px); | |
| } | |
| .prompt-output { | |
| background: #1a1a1a; | |
| color: #f8f8f2; | |
| border-radius: 12px; | |
| padding: 20px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| overflow-x: auto; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .float-animation { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .tag { | |
| background: linear-gradient(135deg, #667eea, #764ba2); | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| margin: 2px; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <div class="float-animation"> | |
| <i data-lucide="sparkles" class="w-16 h-16 text-white mx-auto mb-4"></i> | |
| </div> | |
| <h1 class="text-5xl font-bold text-white mb-4"> | |
| Gerador Mestre de Prompts | |
| </h1> | |
| <p class="text-xl text-gray-200 max-w-2xl mx-auto"> | |
| Crie prompts otimizados para a plataforma Lovable com as principais frameworks e funcionalidades | |
| </p> | |
| </header> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <!-- Configurações --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Frameworks --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="code-2" class="w-6 h-6 mr-2"></i> | |
| Frameworks Disponíveis | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="framework-card bg-white/10 rounded-xl p-4 cursor-pointer" data-framework="nextjs"> | |
| <i data-lucide="nextjs" class="w-8 h-8 mb-2 text-white"></i> | |
| <h3 class="text-white font-semibold">Next.js</h3> | |
| <p class="text-gray-300 text-sm">Full-stack React</p> | |
| </div> | |
| <div class="framework-card bg-white/10 rounded-xl p-4 cursor-pointer" data-framework="react"> | |
| <i data-lucide="react" class="w-8 h-8 mb-2 text-white"></i> | |
| <h3 class="text-white font-semibold">React</h3> | |
| <p class="text-gray-300 text-sm">SPA Moderna</p> | |
| </div> | |
| <div class="framework-card bg-white/10 rounded-xl p-4 cursor-pointer" data-framework="vue"> | |
| <i data-lucide="vue" class="w-8 h-8 mb-2 text-white"></i> | |
| <h3 class="text-white font-semibold">Vue.js</h3> | |
| <p class="text-gray-300 text-sm">Progressive Framework</p> | |
| </div> | |
| <div class="framework-card bg-white/10 rounded-xl p-4 cursor-pointer" data-framework="svelte"> | |
| <i data-lucide="triangle" class="w-8 h-8 mb-2 text-white"></i> | |
| <h3 class="text-white font-semibold">Svelte</h3> | |
| <p class="text-gray-300 text-sm">Compilador Magico</p> | |
| </div> | |
| <div class="framework-card bg-white/10 rounded-xl p-4 cursor-pointer" data-framework="astro"> | |
| <i data-lucide="star" class="w-8 h-8 mb-2 text-white"></i> | |
| <h3 class="text-white font-semibold">Astro</h3> | |
| <p class="text-gray-300 text-sm">Static Site Generator</p> | |
| </div> | |
| <div class="framework-card bg-white/10 rounded-xl p-4 cursor-pointer" data-framework="tailwind"> | |
| <i data-lucide="wind" class="w-8 h-8 mb-2 text-white"></i> | |
| <h3 class="text-white font-semibold">TailwindCSS</h3> | |
| <p class="text-gray-300 text-sm">Utility First</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Funcionalidades --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="settings" class="w-6 h-6 mr-2"></i> | |
| Funcionalidades Avançadas | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-white font-semibold">Autenticação</h3> | |
| <p class="text-gray-300 text-sm">NextAuth.js, Auth0, Supabase Auth</p> | |
| </div> | |
| <div class="toggle-switch" data-feature="auth"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-white font-semibold">Banco de Dados</h3> | |
| <p class="text-gray-300 text-sm">PostgreSQL, MongoDB, SQLite</p> | |
| </div> | |
| <div class="toggle-switch" data-feature="database"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-white font-semibold">Pagamentos</h3> | |
| <p class="text-gray-300 text-sm">Stripe, PayPal, Mercado Pago</p> | |
| </div> | |
| <div class="toggle-switch" data-feature="payments"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-white font-semibold">Analytics</h3> | |
| <p class="text-gray-300 text-sm">Google Analytics, Mixpanel, PostHog</p> | |
| </div> | |
| <div class="toggle-switch" data-feature="analytics"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-white font-semibold">Chat/IA</h3> | |
| <p class="text-gray-300 text-sm">OpenAI, Claude, Gemini</p> | |
| </div> | |
| <div class="toggle-switch" data-feature="ai"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Estilo e Design --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="palette" class="w-6 h-6 mr-2"></i> | |
| Estilo e Design | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="text-white font-semibold block mb-2">Estilo de Design</label> | |
| <select id="designStyle" class="w-full bg-white/10 border border-white/20 rounded-lg p-3 text-white"> | |
| <option value="modern">Moderno e Minimalista</option> | |
| <option value="glass">Glass Morphism</option> | |
| <option value="neumorphic">Neumorphism</option> | |
| <option value="brutalist">Brutalista</option> | |
| <option value="dark">Dark Theme</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="text-white font-semibold block mb-2">Cor Primária</label> | |
| <input type="color" id="primaryColor" value="#667eea" class="w-full h-12 bg-white/10 border border-white/20 rounded-lg"> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="text-white font-semibold block mb-2">Animações</label> | |
| <div class="flex space-x-4"> | |
| <label class="text-white"> | |
| <input type="checkbox" id="animations" checked class="mr-2"> | |
| Transições suaves | |
| </label> | |
| <label class="text-white"> | |
| <input type="checkbox" id="microInteractions" checked class="mr-2"> | |
| Micro-interações | |
| </label> | |
| <label class="text-white"> | |
| <input type="checkbox" id="scrollEffects" class="mr-2"> | |
| Efeitos de scroll | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Base --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4 flex items-center"> | |
| <i data-lucide="edit-3" class="w-6 h-6 mr-2"></i> | |
| Descrição do Projeto | |
| </h2> | |
| <textarea | |
| id="projectDescription" | |
| placeholder="Descreva seu projeto em detalhes. Ex: Crie um dashboard financeiro com gráficos interativos, integração com APIs bancárias e sistema de alertas em tempo real..." | |
| class="w-full h-32 bg-white/10 border border-white/20 rounded-lg p-4 text-white placeholder-gray-300" | |
| ></textarea> | |
| </div> | |
| </div> | |
| <!-- Sidebar - Geração --> | |
| <div class="space-y-6"> | |
| <!-- Ações --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4">Ações</h2> | |
| <button id="generatePrompt" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:from-purple-700 hover:to-blue-700 transition-all duration-300 flex items-center justify-center"> | |
| <i data-lucide="wand2" class="w-5 h-5 mr-2"></i> | |
| Gerar Prompt Mestre | |
| </button> | |
| <button id="copyPrompt" class="w-full mt-3 bg-white/20 text-white font-bold py-3 px-6 rounded-lg hover:bg-white/30 transition-all duration-300 flex items-center justify-center"> | |
| <i data-lucide="copy" class="w-5 h-5 mr-2"></i> | |
| Copiar Prompt | |
| </button> | |
| <button id="saveTemplate" class="w-full mt-3 bg-white/20 text-white font-bold py-3 px-6 rounded-lg hover:bg-white/30 transition-all duration-300 flex items-center justify-center"> | |
| <i data-lucide="save" class="w-5 h-5 mr-2"></i> | |
| Salvar Template | |
| </button> | |
| </div> | |
| <!-- Tags --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4">Tags Geradas</h2> | |
| <div id="generatedTags" class="flex flex-wrap gap-2"> | |
| <span class="tag">#esperando</span> | |
| </div> | |
| </div> | |
| <!-- Prompt Output --> | |
| <div class="glass-effect rounded-2xl p-6"> | |
| <h2 class="text-2xl font-bold text-white mb-4">Preview</h2> | |
| <div id="promptOutput" class="prompt-output"> | |
| <p class="text-gray-400">Configure as opções e clique em "Gerar Prompt Mestre"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Templates Salvos Modal --> | |
| <div id="savedTemplatesModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center"> | |
| <div class="glass-effect rounded-2xl p-6 max-w-2xl w-full mx-4"> | |
| <h2 class="text-2xl font-bold text-white mb-4">Templates Salvos</h2> | |
| <div id="savedTemplatesList" class="space-y-2"> | |
| <!-- Templates serão adicionados aqui --> | |
| </div> | |
| <button onclick="closeModal()" class="mt-4 bg-red-500 text-white px-4 py-2 rounded-lg">Fechar</button> | |
| </div> | |
| </div> | |
| <script> | |
| // Inicializar ícones | |
| lucide.createIcons(); | |
| // Estado global | |
| let selectedFramework = null; | |
| let activeFeatures = new Set(); | |
| let savedTemplates = JSON.parse(localStorage.getItem('lovablePrompts') || '[]'); | |
| // Frameworks e suas descrições | |
| const frameworkDetails = { | |
| nextjs: { | |
| name: 'Next.js', | |
| description: 'Framework React full-stack com SSR/SSG', | |
| packages: ['next', 'react', 'react-dom', '@next/font'] | |
| }, | |
| react: { | |
| name: 'React', | |
| description: 'Biblioteca JavaScript para interfaces de usuário', | |
| packages: ['react', 'react-dom', 'react-router-dom'] | |
| }, | |
| vue: { | |
| name: 'Vue.js', | |
| description: 'Framework progressivo para construção de interfaces', | |
| packages: ['vue', 'vue-router', 'pinia'] | |
| }, | |
| svelte: { | |
| name: 'Svelte', | |
| description: 'Compilador que gera código JavaScript otimizado', | |
| packages: ['svelte', 'svelte-routing'] | |
| }, | |
| astro: { | |
| name: 'Astro', | |
| description: 'Framework para construção de sites estáticos rápidos', | |
| packages: ['astro', '@astrojs/tailwind'] | |
| }, | |
| tailwind: { | |
| name: 'TailwindCSS', | |
| description: 'Framework CSS utility-first', | |
| packages: ['tailwindcss', 'postcss', 'autoprefixer'] | |
| } | |
| }; | |
| // Funcionalidades e suas configurações | |
| const featureConfigs = { | |
| auth: { | |
| title: 'Sistema de Autenticação', | |
| description: 'Implementar autenticação segura com múltiplos provedores', | |
| packages: ['next-auth', '@auth0/nextjs-auth0', '@supabase/auth-helpers-nextjs'], | |
| code: ` | |
| // Configuração de autenticação | |
| import { signIn, signOut, useSession } from 'next-auth/react'; | |
| // Hook personalizado | |
| const useAuth = () => { | |
| const { data: session, status } = useSession(); | |
| return { session, status }; | |
| };` | |
| }, | |
| database: { | |
| title: 'Banco de Dados', | |
| description: 'Configuração completa com ORM e migrações', | |
| packages: ['@prisma/client', 'prisma', '@supabase/supabase-js'], | |
| code: ` | |
| // Schema Prisma | |
| model User { | |
| id Int @id @default(autoincrement()) | |
| email String @unique | |
| name String | |
| createdAt DateTime @default(now()) | |
| }` | |
| }, | |
| payments: { | |
| title: 'Sistema de Pagamentos', | |
| description: 'Integração completa com Stripe para pagamentos', | |
| packages: ['@stripe/stripe-js', '@stripe/react-stripe-js'], | |
| code: ` | |
| // Configuração Stripe | |
| import { loadStripe } from '@stripe/stripe-js'; | |
| const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);` | |
| }, | |
| analytics: { | |
| title: 'Analytics', | |
| description: 'Rastreamento de eventos e análise de usuários', | |
| packages: ['@vercel/analytics', '@vercel/speed-insights'], | |
| code: ` | |
| // Configuração Analytics | |
| import { Analytics } from '@vercel/analytics/react'; | |
| import { SpeedInsights } from '@vercel/speed-insights/next';` | |
| }, | |
| ai: { | |
| title: 'Integração IA', | |
| description: 'Chatbot inteligente com OpenAI', | |
| packages: ['openai', '@ai-sdk/openai', 'ai'], | |
| code: ` | |
| // Configuração OpenAI | |
| import OpenAI from 'openai'; | |
| const openai = new OpenAI({ | |
| apiKey: process.env.OPENAI_API_KEY, | |
| });` | |
| } | |
| }; | |
| // Event listeners | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Selecionar framework | |
| document.querySelectorAll('.framework-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| document.querySelectorAll('.framework-card').forEach(c => c.classList.remove('selected')); | |
| this.classList.add('selected'); | |
| selectedFramework = this.dataset.framework; | |
| updateTags(); | |
| }); | |
| }); | |
| // Toggle switches | |
| document.querySelectorAll('.toggle-switch').forEach(toggle => { | |
| toggle.addEventListener('click', function() { | |
| this.classList.toggle('active'); | |
| const feature = this.dataset.feature; | |
| if (this.classList.contains('active')) { | |
| activeFeatures.add(feature); | |
| } else { | |
| activeFeatures.delete(feature); | |
| } | |
| updateTags(); | |
| }); | |
| }); | |
| // Gerar prompt | |
| document.getElementById('generatePrompt').addEventListener('click', generateMasterPrompt); | |
| // Copiar prompt | |
| document.getElementById('copyPrompt').addEventListener('click', copyToClipboard); | |
| // Salvar template | |
| document.getElementById('saveTemplate').addEventListener('click', saveTemplate); | |
| // Atualizar quando digitar | |
| document.getElementById('projectDescription').addEventListener('input', updateTags); | |
| document.getElementById('designStyle').addEventListener('change', updateTags); | |
| document.getElementById('primaryColor').addEventListener('change', updateTags); | |
| document.getElementById('animations').addEventListener('change', updateTags); | |
| document.getElementById('microInteractions').addEventListener('change', updateTags); | |
| document.getElementById('scrollEffects').addEventListener('change', updateTags); | |
| }); | |
| // Atualizar tags | |
| function updateTags() { | |
| const tags = []; | |
| if (selectedFramework) { | |
| tags.push(`#${selectedFramework}`); | |
| } | |
| activeFeatures.forEach(feature => { | |
| tags.push(`#${feature}`); | |
| }); | |
| const designStyle = document.getElementById('designStyle').value; | |
| tags.push(`#${designStyle}`); | |
| if (document.getElementById('animations').checked) tags.push('#animations'); | |
| if (document.getElementById('microInteractions').checked) tags.push('#microInteractions'); | |
| if (document.getElementById('scrollEffects').checked) tags.push('#scrollEffects'); | |
| const tagsContainer = document.getElementById('generatedTags'); | |
| tagsContainer.innerHTML = tags.length > 0 ? | |
| tags.map(tag => `<span class="tag">${tag}</span>`).join('') : | |
| '<span class="tag">#esperando</span>'; | |
| } | |
| // Gerar prompt mestre | |
| function generateMasterPrompt() { | |
| const description = document.getElementById('projectDescription').value; | |
| const designStyle = document.getElementById('designStyle').value; | |
| const primaryColor = document.getElementById('primaryColor').value; | |
| if (!selectedFramework || !description) { | |
| alert('Por favor, selecione um framework e descreva seu projeto!'); | |
| return; | |
| } | |
| const framework = frameworkDetails[selectedFramework]; | |
| const features = Array.from(activeFeatures); | |
| let prompt = `Crie um projeto ${framework.name} com as seguintes especificações: | |
| ## 📋 Descrição do Projeto | |
| ${description} | |
| ## 🛠️ Stack Tecnológica | |
| - **Framework**: ${framework.name} - ${framework.description} | |
| - **Estilo de Design**: ${designStyle.charAt(0).toUpperCase() + designStyle.slice(1))} | |
| - **Cor Primária**: ${primaryColor} | |
| `; | |
| // Adicionar pacotes base | |
| prompt += `\n## 📦 Pacotes Base | |
| ${framework.packages.map(pkg => `- ${pkg}`).join('\n')}`; | |
| // Adicionar funcionalidades | |
| if (features.length > 0) { | |
| prompt += '\n\n## ⚡ Funcionalidades Avançadas'; | |
| features.forEach(feature => { | |
| const config = featureConfigs[feature]; | |
| prompt += `\n\n### ${config.title} | |
| ${config.description} | |
| \n**Pacotes necessários:** | |
| ${config.packages.map(pkg => `- ${pkg}`).join('\n')} | |
| \n**Exemplo de implementação:** | |
| ${config.code}`; | |
| }); | |
| } | |
| // Adicionar configurações de design | |
| prompt += `\n\n## 🎨 Configurações de Design | |
| - **Animações**: ${document.getElementById('animations').checked ? 'Ativadas' : 'Desativadas'} | |
| - **Micro-interações**: ${document.getElementById('microInteractions').checked ? 'Ativadas' : 'Desativadas'} | |
| - **Efeitos de scroll**: ${document.getElementById('scrollEffects').checked ? 'Ativados' : 'Desativados'} | |
| - **Cor primária**: ${primaryColor} | |
| ## 📁 Estrutura de Arquivos | |
| \`\`\` | |
| src/ | |
| ├── components/ | |
| │ ├── ui/ | |
| │ └── layout/ | |
| ├── pages/ | |
| ├── styles/ | |
| ├── utils/ | |
| ├── hooks/ | |
| ├── lib/ | |
| └── types/ | |
| \`\`\` | |
| ## 🚀 Comandos de Desenvolvimento | |
| \`\`\`bash | |
| # Instalação | |
| npm install | |
| # Desenvolvimento | |
| npm run dev | |
| # Build | |
| npm run build | |
| # Produção | |
| npm start | |
| \`\`\` | |
| ## 📋 Checklist de Implementação | |
| - [ ] Configurar ambiente de desenvolvimento | |
| - [ ] Instalar dependências principais | |
| - [ ] Configurar framework escolhido | |
| - [ ] Implementar design system | |
| - [ ] Adicionar funcionalidades avançadas | |
| - [ ] Otimizar para performance | |
| - [ ] Testar responsividade | |
| - [ ] Deploy para produção | |
| ## 🔍 Requisitos de Qualidade | |
| - Código limpo e bem documentado | |
| - Componentes reutilizáveis | |
| - Testes unitários | |
| - SEO otimizado | |
| - Performance score > 90 | |
| - Acessibilidade WCAG 2.1 | |
| Crie um projeto profissional seguindo as melhores práticas e padrões modernos de desenvolvimento.`; | |
| // Atualizar preview com highlight | |
| const output = document.getElementById('promptOutput'); | |
| output.innerHTML = `<pre><code>${prompt}</code></pre>`; | |
| hljs.highlightAll(); | |
| } | |
| // Copiar para clipboard | |
| function copyToClipboard() { | |
| const prompt = document.querySelector('#promptOutput pre code').textContent; | |
| navigator.clipboard.writeText(prompt).then(() => { | |
| const btn = document.getElementById('copyPrompt'); | |
| const original = btn.innerHTML; | |
| btn.innerHTML = '<i data-lucide="check" class="w-5 h-5 mr-2"></i>Copiado!'; | |
| setTimeout(() => { | |
| btn.innerHTML = original; | |
| lucide.createIcons(); | |
| }, 2000); | |
| }); | |
| } | |
| // Salvar template | |
| function saveTemplate() { | |
| const description = document.getElementById('projectDescription').value; | |
| if (!description || !selectedFramework) { | |
| alert('Por favor, preencha todos os campos antes de salvar!'); | |
| return; | |
| } | |
| const template = { | |
| id: Date.now(), | |
| name: description.substring(0, 50) + '...', | |
| framework: selectedFramework, | |
| features: Array.from(activeFeatures), | |
| description: description, | |
| designStyle: document.getElementById('designStyle').value, | |
| primaryColor: document.getElementById('primaryColor').value, | |
| date: new Date().toISOString() | |
| }; | |
| savedTemplates.unshift(template); | |
| localStorage.setItem('lovablePrompts', JSON.stringify(savedTemplates)); | |
| alert('Template salvo com sucesso!'); | |
| } | |
| // Fechar modal | |
| function closeModal() { | |
| document.getElementById('savedTemplatesModal').classList.add('hidden'); | |
| } | |
| // Mostrar templates salvos | |
| function showSavedTemplates() { | |
| const modal = document.getElementById('savedTemplatesModal'); | |
| const list = document.getElementById('savedTemplatesList'); | |
| list.innerHTML = savedTemplates.length > 0 | |
| ? savedTemplates.map(template => ` | |
| <div class="bg-white/10 rounded-lg p-4 mb-2"> | |
| <h3 class="text-white font-semibold">${template.name}</h3> | |
| <p class="text-gray-300 text-sm">${template.framework} • ${new Date(template.date).toLocaleDateString('pt-BR')}</p> | |
| <button onclick="loadTemplate(${template.id})" class="mt-2 text-purple-400 hover:text-purple-300"> | |
| Carregar template | |
| </button> | |
| </div> | |
| `).join('') | |
| : '<p class="text-gray-300">Nenhum template salvo ainda.</p>'; | |
| modal.classList.remove('hidden'); | |
| } | |
| // Carregar template | |
| function loadTemplate(id) { | |
| const template = savedTemplates.find(t => t.id === id); | |
| if (!template) return; | |
| // Preencher formulário | |
| document.getElementById('projectDescription').value = template.description; | |
| document.getElementById('designStyle').value = template.designStyle; | |
| document.getElementById('primaryColor').value = template.primaryColor; | |
| // Selecionar framework | |
| document.querySelectorAll('.framework-card').forEach(c => c.classList.remove('selected')); | |
| document.querySelector(`[data-framework="${template.framework}"]`).classList.add('selected'); | |
| selectedFramework = template.framework; | |
| // Ativar features | |
| document.querySelectorAll('.toggle-switch').forEach(toggle => { | |
| toggle.classList.remove('active'); | |
| activeFeatures.clear(); | |
| }); | |
| template.features.forEach(feature => { | |
| const toggle = document.querySelector(`[data-feature="${feature}"]`); | |
| if (toggle) { | |
| toggle.classList.add('active'); | |
| activeFeatures.add(feature); | |
| } | |
| }); | |
| updateTags(); | |
| closeModal(); | |
| } | |
| // Atalhos de teclado | |
| document.addEventListener('keydown', function(e) { | |
| if (e.ctrlKey || e.metaKey) { | |
| switch(e.key) { | |
| case 'g': | |
| e.preventDefault(); | |
| generateMasterPrompt(); | |
| break; | |
| case 'c': | |
| e.preventDefault(); | |
| copyToClipboard(); | |
| break; | |
| case 's': | |
| e.preventDefault(); | |
| saveTemplate(); | |
| break; | |
| } | |
| } | |
| }); | |
| </script> | |
| <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/mestre-prompt-lovable" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |