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 de Prompts - Lovable.dev</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <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, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-morphism { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .prompt-box { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .copy-btn { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .copy-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .tag { | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .tag:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .tag.selected { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .gradient-border { | |
| position: relative; | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| } | |
| .gradient-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| z-index: -1; | |
| padding: 2px; | |
| border-radius: inherit; | |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| mask-composite: exclude; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen p-4 md:p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <!-- Header --> | |
| <div class="text-center mb-8"> | |
| <div class="floating mb-4"> | |
| <i class="fas fa-heart text-6xl text-pink-400"></i> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-4"> | |
| Gerador de Prompts | |
| <span class="text-pink-300">Lovable.dev</span> | |
| </h1> | |
| <p class="text-xl text-gray-200">Crie prompts perfeitos para o Lovable.dev em segundos</p> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <!-- Input Section --> | |
| <div class="glass-morphism rounded-2xl p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold text-white mb-6 flex items-center"> | |
| <i class="fas fa-cogs mr-3 text-pink-400"></i> | |
| Configurar Prompt | |
| </h2> | |
| <!-- Project Type --> | |
| <div class="mb-6"> | |
| <label class="block text-white font-semibold mb-3">Tipo de Projeto</label> | |
| <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 bg-gray-800"> | |
| <option value="web-app" class="bg-gray-800 text-white">Aplicação Web</option> | |
| <option value="mobile-app" class="bg-gray-800 text-white">Aplicativo Mobile</option> | |
| <option value="landing-page" class="bg-gray-800 text-white">Landing Page</option> | |
| <option value="dashboard" class="bg-gray-800 text-white">Dashboard</option> | |
| <option value="ecommerce" class="bg-gray-800 text-white">E-commerce</option> | |
| <option value="portfolio" class="bg-gray-800 text-white">Portfólio</option> | |
| <option value="header" class="bg-gray-800 text-white">Header Completo</option> | |
| <option value="hero-banner" class="bg-gray-800 text-white">Hero/Banner</option> | |
| <option value="main-content" class="bg-gray-800 text-white">Conteúdo Principal</option> | |
| <option value="sidebar" class="bg-gray-800 text-white">Sidebar</option> | |
| <option value="footer" class="bg-gray-800 text-white">Footer</option> | |
| <option value="whatsapp-catalog" class="bg-gray-800 text-white">Catálogo WhatsApp</option> | |
| <option value="radio-player" class="bg-gray-800 text-white">WebPlayer de Rádio</option> | |
| <option value="blog" class="bg-gray-800 text-white">Blog Moderno</option> | |
| <option value="forum" class="bg-gray-800 text-white">Fórum Online</option> | |
| <option value="booking" class="bg-gray-800 text-white">Sistema de Reservas</option> | |
| <option value="food-delivery" class="bg-gray-800 text-white">App de Delivery</option> | |
| <option value="crm" class="bg-gray-800 text-white">CRM Corporativo</option> | |
| <option value="edu-platform" class="bg-gray-800 text-white">Plataforma de Cursos</option> | |
| <option value="task-manager" class="bg-gray-800 text-white">Gerenciador de Tarefas</option> | |
| <option value="chat-app" class="bg-gray-800 text-white">Aplicativo de Chat</option> | |
| <option value="crypto-wallet" class="bg-gray-800 text-white">Carteira de Criptomoedas</option> | |
| <option value="news-portal" class="bg-gray-800 text-white">Portal de Notícias</option> | |
| <option value="fitness-app" class="bg-gray-800 text-white">App Fitness & Saúde</option> | |
| <option value="event-ticket" class="bg-gray-800 text-white">Sistema de Ingressos</option> | |
| <option value="job-board" class="bg-gray-800 text-white">Plataforma de Empregos</option> | |
| <option value="social-network" class="bg-gray-800 text-white">Rede Social Minimalista</option> | |
| <option value="weather-app" class="bg-gray-800 text-white">App de Previsão do Tempo</option> | |
| <option value="qr-generator" class="bg-gray-800 text-white">Gerador de QR Code</option> | |
| <option value="music-player" class="bg-gray-800 text-white">Player de Música</option> | |
| <option value="video-streaming" class="bg-gray-800 text-white">Plataforma de Vídeo</option> | |
| <option value="survey-tool" class="bg-gray-800 text-white">Criador de Formulários</option> | |
| <option value="invoice-system" class="bg-gray-800 text-white">Sistema de Faturamento</option> | |
| <option value="ai-assistant" class="bg-gray-800 text-white">Assistente de IA</option> | |
| <option value="marketplace" class="bg-gray-800 text-white">Marketplace de Serviços</option> | |
| <option value="recipe-app" class="bg-gray-800 text-white">App de Receitas</option> | |
| <option value="crowdfunding" class="bg-gray-800 text-white">Plataforma de Crowdfunding</option> | |
| <option value="mobile-ui" class="bg-gray-800 text-white">App Mobile UI</option> | |
| </select> | |
| </div> | |
| <!-- Features --> | |
| <div class="mb-6"> | |
| <label class="block text-white font-semibold mb-3">Funcionalidades</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="auth">Autenticação</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="database">Banco de Dados</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="api">API REST</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="payment">Pagamento</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="realtime">Tempo Real</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="ai">Integração AI</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="voice">Comandos de Voz</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="blockchain">Blockchain</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="web3">Web3</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="metaverse">Metaverso</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="iot">IoT</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="mercadopago">Mercado Pago</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="pix">PIX Instantâneo</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="boleto">Boleto Bancário</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="newsletter">Newsletter</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="multilingual">Multi-idioma</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="seo">SEO Avançado</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="push">Notificações Push</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="analytics">Analytics</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="social-login">Login Social</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="reviews">Avaliações</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="wishlist">Lista de Desejos</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="coupons">Cupons de Desconto</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="referral">Programa de Indicação</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-feature="pwa">PWA</span> | |
| </div> | |
| </div> | |
| <!-- Style --> | |
| <div class="mb-6"> | |
| <label class="block text-white font-semibold mb-3">Estilo de Design</label> | |
| <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"> | |
| <option value="modern" class="bg-gray-800 text-white">Moderno e Clean</option> | |
| <option value="minimal" class="bg-gray-800 text-white">Minimalista</option> | |
| <option value="creative" class="bg-gray-800 text-white">Criativo e Vibrante</option> | |
| <option value="professional" class="bg-gray-800 text-white">Profissional Corporativo</option> | |
| <option value="dark" class="bg-gray-800 text-white">Dark Theme</option> | |
| <option value="glass" class="bg-gray-800 text-white">Glassmorphism</option> | |
| <option value="mobile" class="bg-gray-800 text-white">UI Mobile</option> | |
| </select> | |
| </div> | |
| <!-- Estrutura --> | |
| <div class="mb-6"> | |
| <label class="block text-white font-semibold mb-3">Estrutura de Site</label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="hero">Hero</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="social-proof">Provas sociais</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="benefits">Benefícios</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="features">Features</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="portfolio">Casos/Portfólio</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="cta">CTA</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="faq">FAQ</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="footer">Footer</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="manifesto">Manifesto</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="timeline">Linha do tempo</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="team">Equipe</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="awards">Prêmios</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="cards">Cards</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="differentials">Diferenciais</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="process">Processo</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="plans">Tabela de planos</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="comparison">Comparativo</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="guarantee">Garantia</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="posts">Lista de posts</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="categories">Categorias</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="search">Busca</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="highlights">Destaques</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="title">Título</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="meta">Meta</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="summary">Sumário</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="content">Conteúdo</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="form">Form</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="links">Links</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="map">Mapa/WhatsApp</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="short-faq">FAQ curta</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="legal">Texto legal</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="updates">Atualizações</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="message">Mensagem</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="useful-links">Links úteis</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="home">Home</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="about">Sobre</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="services">Serviços/Produtos</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="pricing">Preços/Planos</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="blog">Blog (/blog)</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="post">Post (/blog/:slug)</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="contact">Contato (/contato)</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="privacy">Políticas (/privacidade, /termos)</span> | |
| <span class="structure-tag tag px-3 py-1 rounded-full bg-white/20 text-white" data-structure="404">404/Erro (/404)</span> | |
| </div> | |
| </div> | |
| <!-- Modern Effects --> | |
| <div class="mb-6"> | |
| <label class="block text-white font-semibold mb-3 hovered-element">Efeitos Modernos</label> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-2"> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="micro">Microinterações</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="scroll">Scroll Interativo</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="typography">Tipografia Dinâmica</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="cards">Cards Interativos</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="lottie">Lottie Animations</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="lighting">Iluminação 3D</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="gamification">Gamificação</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="gradients">Gradientes Animados</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="darkmode">Modo Escuro</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="cursor">Cursor Interativo</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="ai">UI com IA</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="mobile">Mobile-Friendly</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="ar">Realidade Aumentada</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="navbar">Navbar sticky/auto-hide</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="megamenu">Mega-menu com previews</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="breadcrumbs">Breadcrumbs dinâmicos</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="tabs">Tabs/Accordion smooth</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="hover">Hover states ricos</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="press">Press/drag physics</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="reveal">Reveal-on-scroll</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="parallax">Parallax sutil</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="glass">Glassmorphism/Blur</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="neumorphism">Neumorphism leve</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="particles">Particles/vídeo hero</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="noise">Grain/Noise texture</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-effect="back-to-top">Back to top / Scroll to top</span> | |
| </div> | |
| </div> | |
| <!-- Tech Stack --> | |
| <div class="mb-6"> | |
| <label class="block text-white font-semibold mb-3">Tecnologias</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="react19">React 19</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="astro">Astro</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="nuxt4">Nuxt 4</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="sveltekit">SvelteKit</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="solidstart">SolidStart</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="tailwind4">Tailwind CSS 4</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="materialui8">Material UI 8</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="nextjs">Next.js</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="supabase">Supabase</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="prisma">Prisma</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="stripe">Stripe</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="framer">Framer Motion</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="threejs">Three.js</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="ethers">Ethers.js</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="hardhat">Hardhat</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="web3js">Web3.js</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="rust">Rust/WASM</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="deno">Deno</span> | |
| <span class="tag px-3 py-1 rounded-full bg-white/20 text-white" data-tech="bun">Bun</span> | |
| </div> | |
| </div> | |
| <!-- Description --> | |
| <div class="mb-6"> | |
| <label class="block text-white font-semibold mb-3">Descrição do Projeto</label> | |
| <textarea id="description" rows="4" | |
| 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" | |
| placeholder="Descreva brevemente o que você quer construir..."></textarea> | |
| </div> | |
| <!-- Generate Button --> | |
| <button id="generateBtn" | |
| 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"> | |
| <i class="fas fa-magic mr-2"></i> | |
| Gerar Prompt | |
| </button> | |
| </div> | |
| <!-- Output Section --> | |
| <div class="glass-morphism rounded-2xl p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold text-white mb-6 flex items-center"> | |
| <i class="fas fa-code mr-3 text-pink-400"></i> | |
| Prompt Gerado | |
| </h2> | |
| <div class="gradient-border mb-4"> | |
| <div class="bg-gray-900/50 p-4 rounded-lg"> | |
| <pre id="generatedPrompt" class="text-gray-300 text-sm whitespace-pre-wrap"> | |
| Selecione as opções e clique em "Gerar Prompt" para começar... | |
| </pre> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex gap-4"> | |
| <button id="copyBtn" | |
| class="copy-btn flex-1 py-3 px-6 rounded-lg text-white font-semibold transition-all"> | |
| <i class="fas fa-copy mr-2"></i> | |
| Copiar | |
| </button> | |
| <button id="resetBtn" | |
| class="flex-1 py-3 px-6 rounded-lg bg-white/20 text-white font-semibold hover:bg-white/30 transition-all"> | |
| <i class="fas fa-refresh mr-2"></i> | |
| Resetar | |
| </button> | |
| </div> | |
| <!-- Tips --> | |
| <div class="mt-6 p-4 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded-lg"> | |
| <h3 class="text-white font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2 text-yellow-400"></i> | |
| Dica do Dia | |
| </h3> | |
| <p class="text-gray-300 text-sm" id="dailyTip"> | |
| Use prompts específicos e detalhados para melhores resultados no Lovable.dev | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Examples Section --> | |
| <div class="mt-8 glass-morphism rounded-2xl p-6"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center"> | |
| <i class="fas fa-star mr-3 text-yellow-400"></i> | |
| Exemplos de Prompts | |
| </h3> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <button class="example-btn p-4 bg-white/10 rounded-lg text-left hover:bg-white/20 transition-all" | |
| data-example="ecommerce"> | |
| <h4 class="text-white font-semibold mb-2">E-commerce Completo</h4> | |
| <p class="text-gray-300 text-sm">Marketplace com carrinho, pagamento e gestão de produtos</p> | |
| </button> | |
| <button class="example-btn p-4 bg-white/10 rounded-lg text-left hover:bg-white/20 transition-all" | |
| data-example="dashboard"> | |
| <h4 class="text-white font-semibold mb-2">Dashboard Analytics</h4> | |
| <p class="text-gray-300 text-sm">Painel de controle com gráficos e dados em tempo real</p> | |
| </button> | |
| <button class="example-btn p-4 bg-white/10 rounded-lg text-left hover:bg-white/20 transition-all" | |
| data-example="portfolio"> | |
| <h4 class="text-white font-semibold mb-2">Portfólio Criativo</h4> | |
| <p class="text-gray-300 text-sm">Site pessoal com animações e interações modernas</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Back to Top Button --> | |
| <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"> | |
| <i class="fas fa-arrow-up text-lg"></i> | |
| </button> | |
| </div> | |
| <script> | |
| // State management | |
| let selectedFeatures = new Set(); | |
| let selectedTech = new Set(); | |
| let selectedEffects = new Set(); | |
| let selectedStructures = new Set(); | |
| // Tips array | |
| const tips = [ | |
| "Use prompts específicos e detalhados para melhores resultados no Lovable.dev", | |
| "Adicione restrições técnicas para respostas mais precisas", | |
| "Inclua exemplos de design que você gosta para referência visual", | |
| "Mencione o público-alvo para personalização adequada", | |
| "Especifique requisitos de performance e responsividade" | |
| ]; | |
| // GSAP Animations | |
| gsap.from('.glass-morphism', { | |
| duration: 1, | |
| y: 50, | |
| opacity: 0, | |
| stagger: 0.2, | |
| ease: "power3.out" | |
| }); | |
| // Event listeners | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Tag selection - Features | |
| document.querySelectorAll('.tag[data-feature]').forEach(tag => { | |
| tag.addEventListener('click', () => { | |
| const feature = tag.getAttribute('data-feature'); | |
| if (selectedFeatures.has(feature)) { | |
| selectedFeatures.delete(feature); | |
| tag.classList.remove('selected'); | |
| } else { | |
| selectedFeatures.add(feature); | |
| tag.classList.add('selected'); | |
| } | |
| }); | |
| }); | |
| // Tag selection - Tech | |
| document.querySelectorAll('.tag[data-tech]').forEach(tag => { | |
| tag.addEventListener('click', () => { | |
| const tech = tag.getAttribute('data-tech'); | |
| if (selectedTech.has(tech)) { | |
| selectedTech.delete(tech); | |
| tag.classList.remove('selected'); | |
| } else { | |
| selectedTech.add(tech); | |
| tag.classList.add('selected'); | |
| } | |
| }); | |
| }); | |
| // Tag selection - Effects | |
| document.querySelectorAll('.tag[data-effect]').forEach(tag => { | |
| tag.addEventListener('click', () => { | |
| const effect = tag.getAttribute('data-effect'); | |
| if (selectedEffects.has(effect)) { | |
| selectedEffects.delete(effect); | |
| tag.classList.remove('selected'); | |
| } else { | |
| selectedEffects.add(effect); | |
| tag.classList.add('selected'); | |
| } | |
| }); | |
| }); | |
| // Structure selection (multiple choice) | |
| document.querySelectorAll('.structure-tag').forEach(tag => { | |
| tag.addEventListener('click', () => { | |
| const structure = tag.getAttribute('data-structure'); | |
| if (selectedStructures.has(structure)) { | |
| selectedStructures.delete(structure); | |
| tag.classList.remove('selected'); | |
| } else { | |
| selectedStructures.add(structure); | |
| tag.classList.add('selected'); | |
| } | |
| }); | |
| }); | |
| // Generate prompt | |
| document.getElementById('generateBtn').addEventListener('click', generatePrompt); | |
| // Copy to clipboard | |
| document.getElementById('copyBtn').addEventListener('click', async () => { | |
| const prompt = document.getElementById('generatedPrompt').textContent; | |
| if (prompt.includes('Selecione as opções')) return; | |
| try { | |
| await navigator.clipboard.writeText(prompt); | |
| const btn = document.getElementById('copyBtn'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-check mr-2"></i>Copiado!'; | |
| btn.classList.add('pulse'); | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.classList.remove('pulse'); | |
| }, 2000); | |
| } catch (err) { | |
| console.error('Erro ao copiar:', err); | |
| } | |
| }); | |
| // Reset | |
| document.getElementById('resetBtn').addEventListener('click', () => { | |
| document.getElementById('projectType').value = 'web-app'; | |
| document.getElementById('style').value = 'modern'; | |
| document.getElementById('description').value = ''; | |
| selectedFeatures.clear(); | |
| selectedTech.clear(); | |
| selectedEffects.clear(); | |
| selectedStructures.clear(); | |
| document.querySelectorAll('.tag, .structure-tag').forEach(tag => { | |
| tag.classList.remove('selected'); | |
| }); | |
| document.getElementById('generatedPrompt').textContent = 'Selecione as opções e clique em "Gerar Prompt" para começar...'; | |
| }); | |
| }); | |
| function generatePrompt() { | |
| const projectType = document.getElementById('projectType').value; | |
| const style = document.getElementById('style').value; | |
| const description = document.getElementById('description').value; | |
| let prompt = `Crie uma ${getProjectTypeName(projectType)} com as seguintes características:\n\n`; | |
| if (selectedFeatures.size > 0) { | |
| prompt += `Funcionalidades necessárias:\n`; | |
| selectedFeatures.forEach(feature => { | |
| prompt += `- ${getFeatureDescription(feature)}\n`; | |
| }); | |
| prompt += '\n'; | |
| } | |
| if (selectedTech.size > 0) { | |
| prompt += `Tecnologias a utilizar:\n`; | |
| selectedTech.forEach(tech => { | |
| prompt += `- ${getTechName(tech)}\n`; | |
| }); | |
| prompt += '\n'; | |
| } | |
| if (selectedEffects.size > 0) { | |
| prompt += `Efeitos especiais:\n`; | |
| selectedEffects.forEach(effect => { | |
| prompt += `- ${getEffectDescription(effect)}\n`; | |
| }); | |
| prompt += '\n'; | |
| } | |
| prompt += `Estilo de design: ${getStyleDescription(style)}\n\n`; | |
| if (description.trim()) { | |
| prompt += `Descrição adicional: ${description}\n\n`; | |
| } | |
| prompt += `Requisitos técnicos:\n`; | |
| prompt += `- Totalmente responsivo\n`; | |
| prompt += `- Performance otimizada\n`; | |
| prompt += `- Código limpo e bem documentado\n`; | |
| prompt += `- Design moderno e intuitivo\n`; | |
| if (selectedStructures.size > 0) { | |
| prompt += `\nEstruturas do site:\n`; | |
| selectedStructures.forEach(structure => { | |
| prompt += `- ${getStructureDescription(structure)}\n`; | |
| }); | |
| } | |
| document.getElementById('generatedPrompt').textContent = prompt; | |
| // Animate the prompt box | |
| gsap.from('#generatedPrompt', { | |
| duration: 0.5, | |
| opacity: 0, | |
| y: 20, | |
| ease: "power2.out" | |
| }); | |
| } | |
| // Copy to clipboard | |
| document.getElementById('copyBtn').addEventListener('click', async () => { | |
| const prompt = document.getElementById('generatedPrompt').textContent; | |
| if (prompt.includes('Selecione as opções')) return; | |
| try { | |
| await navigator.clipboard.writeText(prompt); | |
| const btn = document.getElementById('copyBtn'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-check mr-2"></i>Copiado!'; | |
| btn.classList.add('pulse'); | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.classList.remove('pulse'); | |
| }, 2000); | |
| } catch (err) { | |
| console.error('Erro ao copiar:', err); | |
| } | |
| }); | |
| // Reset | |
| document.getElementById('resetBtn').addEventListener('click', () => { | |
| document.getElementById('projectType').value = 'web-app'; | |
| document.getElementById('style').value = 'modern'; | |
| document.getElementById('description').value = ''; | |
| selectedFeatures.clear(); | |
| selectedTech.clear(); | |
| selectedEffects.clear(); | |
| selectedStructure = null; | |
| document.querySelectorAll('.tag, .structure-tag').forEach(tag => { | |
| tag.classList.remove('selected'); | |
| }); | |
| document.getElementById('generatedPrompt').textContent = 'Selecione as opções e clique em "Gerar Prompt" para começar...'; | |
| }); | |
| // Example prompts | |
| document.querySelectorAll('.example-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const example = btn.getAttribute('data-example'); | |
| loadExample(example); | |
| }); | |
| }); | |
| function loadExample(type) { | |
| const examples = { | |
| ecommerce: { | |
| projectType: 'ecommerce', | |
| features: ['auth', 'database', 'payment', 'api'], | |
| style: 'modern', | |
| tech: ['react', 'nextjs', 'tailwind', 'stripe', 'supabase'], | |
| description: 'Marketplace completo com gestão de produtos, carrinho de compras, checkout seguro, sistema de avaliações e painel administrativo' | |
| }, | |
| dashboard: { | |
| projectType: 'dashboard', | |
| features: ['auth', 'database', 'realtime', 'api', 'ai'], | |
| style: 'modern', | |
| tech: ['react', 'nextjs', 'tailwind', 'supabase'], | |
| description: 'Dashboard de analytics com gráficos interativos, KPIs em tempo real, relatórios personalizáveis e insights com IA' | |
| }, | |
| portfolio: { | |
| projectType: 'portfolio', | |
| features: [], | |
| style: 'creative', | |
| tech: ['react', 'nextjs', 'tailwind'], | |
| description: 'Portfólio criativo com animações suaves, transições elegantes, seção de projetos, blog integrado e formulário de contato' | |
| } | |
| }; | |
| const ex = examples[type]; | |
| // Set values | |
| document.getElementById('projectType').value = ex.projectType; | |
| document.getElementById('style').value = ex.style; | |
| document.getElementById('description').value = ex.description; | |
| // Clear and set features | |
| selectedFeatures.clear(); | |
| selectedTech.clear(); | |
| selectedStructures.clear(); | |
| document.querySelectorAll('.tag, .structure-tag').forEach(tag => { | |
| tag.classList.remove('selected'); | |
| }); | |
| ex.features.forEach(f => { | |
| const tag = document.querySelector(`[data-feature="${f}"]`); | |
| if (tag) { | |
| tag.classList.add('selected'); | |
| selectedFeatures.add(f); | |
| } | |
| }); | |
| ex.tech.forEach(t => { | |
| const tag = document.querySelector(`[data-tech="${t}"]`); | |
| if (tag) { | |
| tag.classList.add('selected'); | |
| selectedTech.add(t); | |
| } | |
| }); | |
| generatePrompt(); | |
| } | |
| // Helper functions | |
| function getStructureDescription(structure) { | |
| const structures = { | |
| home: 'Home – Hero, Provas sociais, Benefícios, Features, Casos/Portfólio, CTA, FAQ, Footer', | |
| about: 'Sobre – Manifesto, Linha do tempo, Equipe, Prêmios, CTA', | |
| services: 'Serviços/Produtos – Cards, Diferenciais, Processo, Preços, CTA', | |
| pricing: 'Preços/Planos – Tabela de planos, Comparativo, FAQ, Garantia, CTA', | |
| blog: 'Blog – Lista de posts, Categorias, Busca, Destaques', | |
| post: 'Post – Título, Meta, Sumário, Conteúdo, CTA final', | |
| contact: 'Contato – Form, Links, Mapa/WhatsApp, FAQ curta', | |
| privacy: 'Políticas – Texto legal, Atualizações', | |
| 404: '404/Erro – Mensagem, Busca, Links úteis' | |
| }; | |
| return structures[structure] || structure; | |
| } | |
| function getProjectTypeName(type) { | |
| const types = { | |
| 'web-app': 'aplicação web completa', | |
| 'mobile-app': 'aplicativo mobile responsivo', | |
| 'landing-page': 'landing page profissional', | |
| 'dashboard': 'dashboard administrativo', | |
| 'ecommerce': 'loja virtual completa', | |
| 'portfolio': 'portfólio online', | |
| 'header': 'header completo com logo, menu, CTA, busca e contatos', | |
| 'hero-banner': 'hero/banner com título chamativo e imagem/vídeo', | |
| 'main-content': 'conteúdo principal com seções de serviços, produtos, blog, depoimentos, formulários e galerias', | |
| 'sidebar': 'sidebar com posts recentes, anúncios e newsletter', | |
| 'footer': 'footer com links rápidos, contato e redes sociais', | |
| 'whatsapp-catalog': 'catálogo de produtos para WhatsApp com carrinho e pedidos via chat', | |
| 'radio-player': 'web player de rádio com lista de estações, favoritos e equalizador', | |
| 'blog': 'blog moderno com sistema de comentários e newsletter', | |
| 'forum': 'fórum online com categorias, threads e sistema de reputação', | |
| 'booking': 'sistema de reservas com calendário e pagamento integrado', | |
| 'food-delivery': 'aplicativo de delivery com mapa de restaurantes e rastreamento' | |
| }; | |
| return types[type] || type; | |
| } | |
| function getFeatureDescription(feature) { | |
| const features = { | |
| 'auth': 'Sistema completo de autenticação (registro, login, recuperação de senha)', | |
| 'database': 'Banco de dados relacional com modelos otimizados', | |
| 'api': 'API RESTful com endpoints bem estruturados', | |
| 'payment': 'Integração com Stripe para pagamentos seguros', | |
| 'realtime': 'Funcionalidades em tempo real com WebSockets', | |
| 'ai': 'Integração de IA para assistente interativo e FAQ inteligente', | |
| 'voice': 'Comandos de voz via Web Speech API (opcional)', | |
| 'blockchain': 'Integração com blockchain para contratos inteligentes e NFTs', | |
| 'web3': 'Funcionalidades Web3 com carteira digital e tokens', | |
| 'metaverse': 'Elementos 3D e interativos para experiências de metaverso', | |
| 'iot': 'Integração com dispositivos IoT e sensores' | |
| }; | |
| return features[feature] || feature; | |
| } | |
| function getTechName(tech) { | |
| const techs = { | |
| 'react19': 'React 19 com Server Components e interatividade moderna', | |
| 'nextjs': 'Next.js 14 com App Router', | |
| 'tailwind4': 'Tailwind CSS 4 com utilitários para animações e responsividade', | |
| 'materialui8': 'Material UI 8 para componentes acessíveis', | |
| 'supabase': 'Supabase para backend e banco de dados', | |
| 'prisma': 'Prisma ORM para modelagem de dados', | |
| 'stripe': 'Stripe para processamento de pagamentos', | |
| 'astro': 'Astro para páginas ultra-rápidas e estáticas', | |
| 'nuxt4': 'Nuxt 4 com Vue 3 e SSR', | |
| 'sveltekit': 'SvelteKit para apps reativos e leves', | |
| 'solidstart': 'SolidStart para componentes altamente responsivos', | |
| 'framer': 'Framer Motion para animações', | |
| 'threejs': 'Three.js para gráficos 3D', | |
| 'ethers': 'Ethers.js para interação com blockchain', | |
| 'hardhat': 'Hardhat para desenvolvimento de smart contracts', | |
| 'web3js': 'Web3.js para aplicações descentralizadas', | |
| 'rust': 'Rust compilado para WASM para performance crítica', | |
| 'deno': 'Deno runtime para JavaScript/TypeScript moderno', | |
| 'bun': 'Bun runtime ultra-rápido para JavaScript' | |
| }; | |
| return techs[tech] || tech; | |
| } | |
| function getEffectDescription(effect) { | |
| const effects = { | |
| 'micro': 'Microinterações e animações sutis (hover effects, feedback visual)', | |
| 'scroll': 'Scroll interativo com parallax, scroll-telling e fade in/out entre seções', | |
| 'typography': 'Tipografia expressiva com movimento sutil e animações de texto', | |
| 'cards': 'Cards interativos com flip, expansão e efeitos glassmorphism', | |
| 'lottie': 'Lottie animations e vídeos curtos em loop para demonstrações', | |
| 'lighting': 'Efeitos de iluminação 3D com sombras realistas e perspectiva', | |
| 'gamification': 'Elementos gamificados como barras de progresso e quizzes', | |
| 'gradients': 'Gradientes animados e transições de cor suaves entre seções', | |
| 'darkmode': 'Modo escuro adaptável com transição animada e acessibilidade', | |
| 'cursor': 'Efeitos interativos com cursor (magnet effect, zoom em imagens)', | |
| 'ai': 'UI com IA integrada (chatbots animados, recomendações em tempo real)', | |
| 'mobile': 'Design mobile-friendly com gestos touch e transições fluidas', | |
| 'ar': 'Realidade aumentada para visualização imersiva de produtos' | |
| }; | |
| return effects[effect] || effect; | |
| } | |
| function getStyleDescription(style) { | |
| const styles = { | |
| 'modern': 'Design moderno com micro-interações suaves, dark mode automático e tipografia expressiva', | |
| 'minimal': 'Estilo minimalista com foco em simplicidade e performance', | |
| 'creative': 'Design criativo com formas orgânicas, fluididade e efeitos visuais imersivos', | |
| 'professional': 'Estilo corporativo com neomorfismo sutil e gamificação leve', | |
| 'dark': 'Tema escuro adaptável com partículas animadas e contraste acessível', | |
| 'glass': 'Glassmorphism moderno com blur, transparências e prefers-reduced-motion' | |
| }; | |
| return styles[style] || style; | |
| } | |
| // Change daily tip | |
| let tipIndex = 0; | |
| setInterval(() => { | |
| tipIndex = (tipIndex + 1) % tips.length; | |
| document.getElementById('dailyTip').textContent = tips[tipIndex]; | |
| gsap.from('#dailyTip', { | |
| duration: 0.5, | |
| opacity: 0, | |
| y: -10, | |
| ease: "power2.out" | |
| }); | |
| }, 10000); | |
| // Back to Top Button | |
| const backToTopBtn = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| gsap.to(backToTopBtn, { | |
| duration: 0.3, | |
| opacity: 1, | |
| visibility: 'visible', | |
| ease: "power2.out" | |
| }); | |
| } else { | |
| gsap.to(backToTopBtn, { | |
| duration: 0.3, | |
| opacity: 0, | |
| visibility: 'hidden', | |
| ease: "power2.out" | |
| }); | |
| } | |
| }); | |
| backToTopBtn.addEventListener('click', () => { | |
| gsap.to(window, { | |
| duration: 0.8, | |
| scrollTo: 0, | |
| ease: "power2.inOut" | |
| }); | |
| }); | |
| </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/prompt-lovable" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |