Em Canva
Lembre-se do aplicativo "Gerador de Popup Avançado" e gere-o completo
Preciso que você crie um aplicativo web completo chamado "Gerador de Popup Avançado" que é uma ferramenta para criar popups personalizados com animações, estilos e configurações avançadas. O objetivo principal é permitir que usuários criem popups atrativos para seus sites sem precisar escrever código.
Funcionalidades Principais
Interface visual para personalizar popups
Edição de título, conteúdo e botões
Personalização de cores, bordas e sombras
Seleção de animações de entrada
Visualização em tempo real das alterações
Geração automática do código HTML/CSS/JS
Funcionalidades Adicionais
Opção de tema claro/escuro na interface
Seleção de ícones para o popup
Diferentes estilos de botões
Configuração de tempo de exibição e fechamento automático
Opção para overlay escuro
Posicionamento do popup por arrastar e soltar
Botão para copiar o código gerado
Opção para mostrar apenas uma vez por sessão
Design e Interface
Estilo visual: Moderno e Profissional
Esquema de cores: Tons de roxo/indigo (#4f46e5) com interface limpa
Layout dividido em painel de configuração e área de visualização
Sistema de abas para organizar as diferentes seções de configuração
Seletores de cores devem aparecer ao lado dos campos de código de cor
Organizar todas as configurações em abas por seção (Conteúdo, Estilo, Animação, Avançado)
Especificações Técnicas
Tecnologias preferidas: HTML, CSS, JavaScript puro (sem dependências externas)
Requisitos específicos: Código gerado deve ser autocontido e funcional em qualquer site
Instruções Adicionais
A interface deve ser intuitiva e responsiva
O código gerado deve ser limpo e bem comentado
Inclua seletores de cores com paletas predefinidas que aparecem ao lado dos campos
Todas as alterações devem ser refletidas instantaneamente na visualização
Organize a interface em abas bem definidas para melhor usabilidade
Por favor, gere o código HTML, CSS e JavaScript completo para este aplicativo, garantindo que todas as funcionalidades estejam implementadas e funcionando corretamente. O código deve ser bem estruturado, comentado e pronto para uso.