Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>A Dieta dos Sucos Saudáveis - WebBook App</title> | |
| <link rel="manifest" href="manifest.json"> | |
| <meta name="theme-color" content="#00ff99"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(to bottom, #000000, #1a1a1a); | |
| color: #ffffff; | |
| } | |
| .neon-glow { | |
| box-shadow: 0 0 15px #00ff99, 0 0 30px rgba(0, 255, 153, 0.3); | |
| } | |
| .chapter-card { | |
| transition: all 0.3s ease; | |
| } | |
| .chapter-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 255, 153, 0.2); | |
| } | |
| .floating-btn { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background: linear-gradient(90deg, #00ff99 0%, #00cc77 100%); | |
| } | |
| .chatbot-container { | |
| transform: translateY(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .chatbot-container.active { | |
| transform: translateY(0); | |
| } | |
| .chat-message { | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Progress Bar --> | |
| <div class="fixed top-0 left-0 right-0 z-50"> | |
| <div id="progressBar" class="progress-bar" style="width: 0%"></div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-green-400 to-teal-500 py-8 px-4 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">A Dieta dos Sucos Saudáveis</h1> | |
| <p class="text-lg text-gray-800 font-medium">Descubra o poder da nutrição natural e transforme sua saúde!</p> | |
| <div class="mt-6"> | |
| <span class="inline-block bg-black text-green-400 px-4 py-2 rounded-full text-sm font-semibold mr-3"> | |
| <i class="fas fa-star mr-1"></i> E-book Premium | |
| </span> | |
| <span class="inline-block bg-black text-green-400 px-4 py-2 rounded-full text-sm font-semibold"> | |
| <i class="fas fa-certificate mr-1"></i> Edição Limitada | |
| </span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Author Info --> | |
| <div class="bg-gray-800 shadow-lg py-4 px-6 flex items-center justify-center max-w-md mx-auto -mt-6 rounded-lg neon-glow"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Edvan Gonçalves" class="w-12 h-12 rounded-full border-2 border-green-400 shadow-md"> | |
| <div class="ml-4"> | |
| <h3 class="font-semibold text-green-400">Edvan Gonçalves</h3> | |
| <p class="text-sm text-gray-400">EdvanClickConquista🦅</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-12 max-w-4xl"> | |
| <!-- Chapter 1 --> | |
| <div class="chapter-card bg-gray-800 rounded-xl overflow-hidden mb-10 neon-glow"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-center mb-4"> | |
| <span class="flex items-center justify-center w-10 h-10 rounded-full bg-green-900 text-green-400 font-bold mr-4">1</span> | |
| <h2 class="text-2xl font-bold text-green-400">Começando Sua Jornada Detox</h2> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Detox Natural" | |
| class="w-full h-64 md:h-80 object-cover rounded-lg mb-6"> | |
| <div class="prose max-w-none text-gray-300"> | |
| <p class="mb-4">Aprenda como os sucos naturais ajudam na desintoxicação do organismo e no ganho de energia para o seu dia a dia.</p> | |
| <div class="bg-gray-700 p-4 rounded-lg border-l-4 border-green-400 mb-6"> | |
| <h4 class="font-bold text-green-400 mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Dica do especialista: | |
| </h4> | |
| <p class="text-gray-300">Comece seu dia com um suco de limão com água morna para ativar seu sistema digestivo.</p> | |
| </div> | |
| <button onclick="alert('Capítulo 1 em leitura...')" class="bg-green-500 hover:bg-green-600 text-black font-bold py-3 px-8 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fas fa-book-open mr-2"></i> Ler agora | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chapter 2 --> | |
| <div class="chapter-card bg-gray-800 rounded-xl overflow-hidden mb-10 neon-glow"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-center mb-4"> | |
| <span class="flex items-center justify-center w-10 h-10 rounded-full bg-green-900 text-green-400 font-bold mr-4">2</span> | |
| <h2 class="text-2xl font-bold text-green-400">Os Ingredientes Essenciais</h2> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1453&q=80" | |
| alt="Ingredientes Naturais" | |
| class="w-full h-64 md:h-80 object-cover rounded-lg mb-6"> | |
| <div class="prose max-w-none text-gray-300"> | |
| <p class="mb-6">Conheça os melhores ingredientes para turbinar seus sucos e obter o máximo de nutrientes em cada copo.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold text-green-400 mb-2 flex items-center"> | |
| <i class="fas fa-apple-alt mr-2"></i> Frutas Detox | |
| </h4> | |
| <ul class="text-gray-300"> | |
| <li class="mb-1">• Limão - Alcalinizante</li> | |
| <li class="mb-1">• Maçã - Fibras solúveis</li> | |
| <li class="mb-1">• Abacaxi - Digestivo</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold text-green-400 mb-2 flex items-center"> | |
| <i class="fas fa-leaf mr-2"></i> Vegetais Curativos | |
| </h4> | |
| <ul class="text-gray-300"> | |
| <li class="mb-1">• Couve - Anti-inflamatório</li> | |
| <li class="mb-1">• Pepino - Hidratante</li> | |
| <li class="mb-1">• Gengibre - Termogênico</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <button onclick="alert('Capítulo 2 em leitura...')" class="bg-green-500 hover:bg-green-600 text-black font-bold py-3 px-8 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fas fa-book-open mr-2"></i> Ler agora | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chapter 3 --> | |
| <div class="chapter-card bg-gray-800 rounded-xl overflow-hidden mb-10 neon-glow"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-center mb-4"> | |
| <span class="flex items-center justify-center w-10 h-10 rounded-full bg-green-900 text-green-400 font-bold mr-4">3</span> | |
| <h2 class="text-2xl font-bold text-green-400">Receitas Energéticas para o Dia</h2> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d35e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Receitas Energéticas" | |
| class="w-full h-64 md:h-80 object-cover rounded-lg mb-6"> | |
| <div class="prose max-w-none text-gray-300"> | |
| <p class="mb-6">Sucos que vão dar aquele gás na sua manhã e manter sua disposição ao longo do dia.</p> | |
| <div class="bg-gray-700 border border-gray-600 rounded-lg overflow-hidden mb-6"> | |
| <div class="bg-green-900 text-green-400 px-4 py-2 font-bold flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> Receita Energética | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-green-400">Suco Verde Energético</h3> | |
| <p class="text-sm text-gray-400 mb-3">Ingredientes: 1 maçã, 1 folha de couve, 1/2 limão, 1 pedaço de gengibre e 200ml de água</p> | |
| <p class="text-gray-300">Modo de preparo: Bata todos os ingredientes no liquidificador e coe se necessário. Consuma imediatamente.</p> | |
| </div> | |
| </div> | |
| <button onclick="alert('Capítulo 3 em leitura...')" class="bg-green-500 hover:bg-green-600 text-black font-bold py-3 px-8 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fas fa-book-open mr-2"></i> Ler agora | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chapter 4 --> | |
| <div class="chapter-card bg-gray-800 rounded-xl overflow-hidden mb-10 neon-glow"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-center mb-4"> | |
| <span class="flex items-center justify-center w-10 h-10 rounded-full bg-green-900 text-green-400 font-bold mr-4">4</span> | |
| <h2 class="text-2xl font-bold text-green-400">Detox Profundo</h2> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" | |
| alt="Detox Profundo" | |
| class="w-full h-64 md:h-80 object-cover rounded-lg mb-6"> | |
| <div class="prose max-w-none text-gray-300"> | |
| <p class="mb-6">Sucos ideais para eliminar toxinas acumuladas e promover um reinício completo no seu organismo.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-gray-700 border border-gray-600 rounded-lg overflow-hidden hover:border-green-400 transition-colors"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Suco Detox" | |
| class="w-full h-40 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-black text-xs font-bold px-2 py-1 rounded-full"> | |
| <i class="fas fa-recycle mr-1"></i> Detox | |
| </span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-green-400">Suco Detox Completo</h3> | |
| <p class="text-sm text-gray-400 mb-3">Beterraba, cenoura, gengibre e limão</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 border border-gray-600 rounded-lg overflow-hidden hover:border-green-400 transition-colors"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Suco Desintoxicante" | |
| class="w-full h-40 object-cover"> | |
| <span class="absolute top-2 right-2 bg-purple-500 text-black text-xs font-bold px-2 py-1 rounded-full"> | |
| <i class="fas fa-leaf mr-1"></i> Verde | |
| </span> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 text-green-400">Suco Verde Desintoxicante</h3> | |
| <p class="text-sm text-gray-400 mb-3">Couve, pepino, maçã e limão</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="alert('Capítulo 4 em leitura...')" class="bg-green-500 hover:bg-green-600 text-black font-bold py-3 px-8 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fas fa-book-open mr-2"></i> Ler agora | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chapter 5 --> | |
| <div class="chapter-card bg-gray-800 rounded-xl overflow-hidden mb-10 neon-glow"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-center mb-4"> | |
| <span class="flex items-center justify-center w-10 h-10 rounded-full bg-green-900 text-green-400 font-bold mr-4">5</span> | |
| <h2 class="text-2xl font-bold text-green-400">Receitas Anti-inflamatórias</h2> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Anti-inflamatórios" | |
| class="w-full h-64 md:h-80 object-cover rounded-lg mb-6"> | |
| <div class="prose max-w-none text-gray-300"> | |
| <p class="mb-6">Receitas que ajudam a combater inflamações e aumentar sua imunidade de forma natural.</p> | |
| <div class="bg-gradient-to-r from-green-900 to-gray-800 p-6 rounded-xl border border-green-400 mb-8"> | |
| <h3 class="text-xl font-bold text-green-400 mb-4 flex items-center"> | |
| <i class="fas fa-shield-virus mr-3"></i> Suco Imunológico | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 bg-green-400 text-black p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </span> | |
| <span class="text-gray-300">1 cenoura média</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 bg-green-400 text-black p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </span> | |
| <span class="text-gray-300">1 pedaço de gengibre (2cm)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 bg-green-400 text-black p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </span> | |
| <span class="text-gray-300">1/2 limão com casca</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 bg-green-400 text-black p-1 rounded-full mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </span> | |
| <span class="text-gray-300">1 colher de sopa de mel (opcional)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <button onclick="alert('Capítulo 5 em leitura...')" class="bg-green-500 hover:bg-green-600 text-black font-bold py-3 px-8 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fas fa-book-open mr-2"></i> Ler agora | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Future Updates --> | |
| <div class="chapter-card bg-gray-800 rounded-xl overflow-hidden mb-10 neon-glow"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex items-center mb-4"> | |
| <span class="flex items-center justify-center w-10 h-10 rounded-full bg-green-900 text-green-400 font-bold mr-4"> | |
| <i class="fas fa-sync-alt"></i> | |
| </span> | |
| <h2 class="text-2xl font-bold text-green-400">Atualizações Futuras</h2> | |
| </div> | |
| <div class="prose max-w-none text-gray-300"> | |
| <p class="mb-6">Fique atento! Novas receitas, planos de exercícios e dicas saudáveis serão adicionadas aqui. Este WebBook está sempre evoluindo para transformar sua saúde com leveza e sabor.</p> | |
| <div class="bg-gray-700 p-4 rounded-lg mb-6"> | |
| <h4 class="font-bold text-green-400 mb-3 flex items-center"> | |
| <i class="fas fa-calendar-plus mr-2"></i> Próximas Atualizações | |
| </h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 text-green-400 mr-2">→</span> | |
| <span class="text-gray-300">Sucos para dormir melhor</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 text-green-400 mr-2">→</span> | |
| <span class="text-gray-300">Receitas para atletas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="flex-shrink-0 text-green-400 mr-2">→</span> | |
| <span class="text-gray-300">Combinações para cada estação</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <button onclick="alert('Você será notificado sobre as atualizações!')" class="bg-green-500 hover:bg-green-600 text-black font-bold py-3 px-8 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fas fa-bell mr-2"></i> Receber Atualizações | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="flex justify-between mt-12 mb-8"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-gray-300 font-bold py-3 px-6 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fas fa-arrow-left mr-2"></i> Capítulo Anterior | |
| </button> | |
| <button class="bg-green-500 hover:bg-green-600 text-black font-bold py-3 px-6 rounded-full inline-flex items-center transition-colors"> | |
| Próximo Capítulo <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chatbot --> | |
| <div id="chatbotContainer" class="fixed bottom-4 right-4 w-72 bg-gray-800 rounded-lg shadow-xl border border-green-400 overflow-hidden z-50 transform translate-y-full"> | |
| <div class="bg-green-500 text-black px-4 py-3 font-bold flex justify-between items-center"> | |
| <span><i class="fas fa-robot mr-2"></i> NutriBot IA</span> | |
| <button id="closeChatbot" class="text-black hover:text-gray-800"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="chatMessages" class="p-3 h-64 overflow-y-auto bg-gray-700"> | |
| <div class="chat-message mb-3 bg-gray-600 p-3 rounded-lg"> | |
| <p class="text-sm text-green-400">Olá! Sou o NutriBot. Posso te ajudar com informações sobre sucos saudáveis. Experimente perguntar: "Qual suco ajuda na imunidade?"</p> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-gray-800 border-t border-gray-700"> | |
| <input id="chatInput" type="text" placeholder="Digite sua pergunta..." class="w-full px-3 py-2 bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:border-green-400"> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button --> | |
| <div class="fixed bottom-8 right-8 z-40"> | |
| <button id="chatbotButton" class="floating-btn bg-green-500 hover:bg-green-600 text-black w-14 h-14 rounded-full flex items-center justify-center shadow-xl neon-glow"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 px-4 text-gray-400"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-2xl font-bold text-green-400 mb-2">A Dieta dos Sucos Saudáveis</h3> | |
| <p>Transforme sua saúde com o poder da natureza</p> | |
| </div> | |
| <div class="flex flex-wrap justify-center items-center mb-8 gap-4"> | |
| <a href="https://www.youtube.com/@MenteInovadora6" target="_blank" class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fab fa-youtube mr-2 text-red-500"></i> YouTube | |
| </a> | |
| <a href="https://www.tiktok.com/@menteinovadora81" target="_blank" class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fab fa-tiktok mr-2"></i> TikTok | |
| </a> | |
| <a href="https://www.facebook.com/share/199FhwumgX/" target="_blank" class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fab fa-facebook-f mr-2 text-blue-500"></i> Facebook | |
| </a> | |
| <a href="https://t.me/MktPower" target="_blank" class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-full inline-flex items-center transition-colors"> | |
| <i class="fab fa-telegram mr-2 text-blue-400"></i> Telegram | |
| </a> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center"> | |
| <div class="mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Edvan Gonçalves" class="w-16 h-16 rounded-full border-2 border-green-400 mx-auto"> | |
| </div> | |
| <p class="font-medium text-green-400">Edvan Gonçalves</p> | |
| <p class="text-sm">EdvanClickConquista🦅</p> | |
| <p class="text-sm mt-4">© 2025 A Dieta dos Sucos Saudáveis. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Progress bar functionality | |
| window.addEventListener('scroll', function() { | |
| const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; | |
| const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; | |
| const scrollPercentage = (scrollTop / scrollHeight) * 100; | |
| document.getElementById('progressBar').style.width = scrollPercentage + '%'; | |
| }); | |
| // Chatbot functionality | |
| const chatbotButton = document.getElementById('chatbotButton'); | |
| const chatbotContainer = document.getElementById('chatbotContainer'); | |
| const closeChatbot = document.getElementById('closeChatbot'); | |
| const chatInput = document.getElementById('chatInput'); | |
| const chatMessages = document.getElementById('chatMessages'); | |
| let chatbotOpen = false; | |
| chatbotButton.addEventListener('click', () => { | |
| chatbotOpen = !chatbotOpen; | |
| if (chatbotOpen) { | |
| chatbotContainer.classList.add('active'); | |
| } else { | |
| chatbotContainer.classList.remove('active'); | |
| } | |
| }); | |
| closeChatbot.addEventListener('click', () => { | |
| chatbotOpen = false; | |
| chatbotContainer.classList.remove('active'); | |
| }); | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter' && chatInput.value.trim() !== '') { | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'chat-message mb-3 bg-gray-800 p-3 rounded-lg self-end ml-8'; | |
| userMessage.innerHTML = `<p class="text-sm text-white">${chatInput.value}</p>`; | |
| chatMessages.appendChild(userMessage); | |
| // Bot response | |
| setTimeout(() => { | |
| const botMessage = document.createElement('div'); | |
| botMessage.className = 'chat-message mb-3 bg-gray-600 p-3 rounded-lg'; | |
| let response = "Desculpe, não entendi sua pergunta. Você pode reformular?"; | |
| if (chatInput.value.toLowerCase().includes('imunidade')) { | |
| response = "Para imunidade, recomendo sucos com: limão, gengibre, laranja, cenoura e cúrcuma. Uma boa receita é: 1 laranja, 1 cenoura, 1 pedaço de gengibre e 1 pitada de cúrcuma."; | |
| } else if (chatInput.value.toLowerCase().includes('energia')) { | |
| response = "Para energia, sucos verdes são ótimos! Tente: 1 maçã, 1 folha de couve, 1/2 limão e 1 colher de chia. Bata com água e beba pela manhã."; | |
| } else if (chatInput.value.toLowerCase().includes('detox')) { | |
| response = "Para detox, recomendo: 1/2 beterraba, 1 pepino, 1 maçã e 1 pedaço de gengibre. Bata com água e coe se necessário. Consuma em jejum."; | |
| } | |
| botMessage.innerHTML = `<p class="text-sm text-green-400">${response}</p>`; | |
| chatMessages.appendChild(botMessage); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1000); | |
| chatInput.value = ''; | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| }); | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=RicodeFe81/edvanclickconquista" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |