FunBot AI
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FunBot AI Studio</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
/* Personalização das barras de deslocamento */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(156, 163, 175, 0.5);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(107, 114, 128, 0.8);
}
.bg-custom-wallpaper {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.glass-panel {
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.dark .glass-panel {
background: rgba(17, 24, 39, 0.88);
}
.glass-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
}
.dark .glass-card {
background: rgba(31, 41, 55, 0.7);
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
50% { box-shadow: 0 0 25px rgba(6, 182, 212, 0.6); }
}
.bot-avatar-glow {
animation: pulse-glow 3s infinite;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100 font-sans h-screen flex flex-col overflow-hidden transition-colors duration-200">
<!-- Container Principal -->
<div id="mainApp" class="flex-1 flex h-full relative bg-custom-wallpaper">
<!-- Camada de sobreposição visual -->
<div id="bgOverlay" class="absolute inset-0 bg-gray-900/30 dark:bg-black/60 backdrop-blur-[2px] transition-all pointer-events-none"></div>
<!-- Sidebar / Barra Lateral -->
<aside id="sidebar" class="w-80 glass-panel border-r border-gray-200/50 dark:border-gray-800/50 flex flex-col z-20 transition-all duration-300 absolute md:relative inset-y-0 left-0 -translate-x-full md:translate-x-0 shadow-xl md:shadow-none">
<!-- Cabeçalho do Robot Avatar -->
<div class="p-4 border-b border-gray-200/50 dark:border-gray-800/50 flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="relative group">
<img id="botAvatar" src="1786194392710.png" onerror="this.onerror=null; this.src=DEFAULT_ROBOT_AVATAR" alt="FunBot Avatar" class="w-12 h-12 rounded-2xl object-cover border-2 border-yellow-400 shadow-md bot-avatar-glow transition-transform group-hover:scale-105">
<span class="absolute -bottom-1 -right-1 w-4 h-4 bg-emerald-500 border-2 border-white dark:border-gray-900 rounded-full" title="Online"></span>
</div>
<div>
<h1 class="font-bold text-lg leading-tight flex items-center gap-1.5">
FunBot AI <span class="text-[10px] px-2 py-0.5 rounded-full font-black uppercase tracking-wider text-black" style="background-color: var(--theme-color, #f59e0b);">PRO</span>
</h1>
<p class="text-xs text-gray-500 dark:text-gray-400">GPT-5.6 & Nano Banana 🍌</p>
</div>
</div>
<button id="closeSidebarBtn" class="md:hidden p-1.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<!-- Ações Principais e Seleção de Modos -->
<div class="p-3 space-y-2">
<button id="btnNewChat" class="w-full py-2.5 px-4 rounded-xl text-white font-medium shadow-md flex items-center justify-center gap-2 hover:opacity-95 transition active:scale-[0.98]" style="background-color: var(--theme-color, #f59e0b);">
<i data-lucide="plus" class="w-5 h-5"></i>
<span>Nova Conversa</span>
</button>
<!-- Ferramentas Principais -->
<div class="grid grid-cols-3 gap-1 pt-1">
<button id="modeChatTab" onclick="switchMode('chat')" class="mode-tab active p-2 rounded-xl border border-gray-200 dark:border-gray-700/60 bg-white dark:bg-gray-800 flex flex-col items-center text-[11px] font-semibold gap-1 text-center hover:bg-white dark:hover:bg-gray-800 transition">
<i data-lucide="message-square" class="w-4 h-4 text-cyan-500"></i>
<span>Chat IA</span>
</button>
<button id="modeImageTab" onclick="switchMode('image')" class="mode-tab p-2 rounded-xl border border-gray-200 dark:border-gray-700/60 bg-white/50 dark:bg-gray-800/50 flex flex-col items-center text-[11px] font-semibold gap-1 text-center hover:bg-white dark:hover:bg-gray-800 transition">
<i data-lucide="sparkles" class="w-4 h-4 text-yellow-500"></i>
<span>Imagens</span>
</button>
<button id="modeVideoTab" onclick="switchMode('video')" class="mode-tab p-2 rounded-xl border border-gray-200 dark:border-gray-700/60 bg-white/50 dark:bg-gray-800/50 flex flex-col items-center text-[11px] font-semibold gap-1 text-center hover:bg-white dark:hover:bg-gray-800 transition">
<i data-lucide="clapperboard" class="w-4 h-4 text-purple-500"></i>
<span>Vídeos</span>
</button>
</div>
</div>
<!-- Histórico de Conversas -->
<div class="flex-1 overflow-y-auto px-3 py-2 space-y-1" id="chatList">
<div class="text-xs font-semibold px-2 py-1 text-gray-400 uppercase tracking-wider">Histórico de Conversas</div>
</div>
<!-- Rodapé da Barra Lateral -->
<div class="p-3 border-t border-gray-200/50 dark:border-gray-800/50 space-y-2">
<button id="btnOpenTheme" class="w-full py-2 px-3 rounded-xl bg-gray-200/70 dark:bg-gray-800/70 hover:bg-gray-300 dark:hover:bg-gray-700 text-xs font-medium flex items-center justify-between transition">
<span class="flex items-center gap-2">
<i data-lucide="palette" class="w-4 h-4 text-purple-500"></i>
<span>Mudar Tema e Cores</span>
</span>
<i data-lucide="chevron-right" class="w-4 h-4"></i>
</button>
<div class="flex items-center justify-between px-2 pt-1 text-xs text-gray-500">
<span id="storageInfo">Conversas ilimitadas</span>
<button id="btnClearAll" title="Eliminar Tudo" class="hover:text-red-500 transition">
<i data-lucide="trash-2" class="w-4 h-4"></i>
</button>
</div>
</div>
</aside>
<!-- Área Principal de Conteúdo -->
<main class="flex-1 flex flex-col h-full z-10 relative overflow-hidden">
<!-- Barra Superior -->
<header class="glass-panel h-16 border-b border-gray-200/50 dark:border-gray-800/50 flex items-center justify-between px-4">
<div class="flex items-center gap-3">
<button id="openSidebarBtn" class="md:hidden p-2 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-800">
<i data-lucide="menu" class="w-5 h-5"></i>
</button>
<div>
<h2 id="currentChatTitle" class="font-bold text-base line-clamp-1">Conversa com FunBot</h2>
<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
<div class="relative inline-block">
<select id="modelSelector" class="bg-transparent font-medium text-xs border-none focus:ring-0 cursor-pointer py-0 pr-6 pl-0 text-cyan-600 dark:text-cyan-400 font-semibold">
<option value="gpt-5.6">🤖 FunBot GPT-5.6 Ultra</option>
<option value="nano-banana">🍌 Nano Banana Pro (Arte & Visão)</option>
<option value="gemini-2.5" selected>⚡ Gemini 2.5 Flash Ultra</option>
</select>
</div>
<span>•</span>
<span class="flex items-center gap-1 text-emerald-500">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> On-line
</span>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<button id="themeToggleBtn" class="p-2.5 rounded-xl hover:bg-gray-200/60 dark:hover:bg-gray-800/60 transition" title="Alternar Modo Escuro/Claro">
<i data-lucide="moon" class="w-5 h-5 dark:hidden text-gray-700"></i>
<i data-lucide="sun" class="w-5 h-5 hidden dark:block text-yellow-400"></i>
</button>
<button id="quickCustomizeBtn" class="p-2.5 rounded-xl bg-gray-200/70 dark:bg-gray-800/70 hover:opacity-80 transition" title="Personalizar Visual">
<i data-lucide="sliders" class="w-5 h-5 text-yellow-500"></i>
</button>
</div>
</header>
<!-- SECÇÃO 1: Chat de Conversa IA -->
<section id="chatSection" class="flex-1 flex flex-col overflow-hidden relative">
<div id="messagesContainer" class="flex-1 overflow-y-auto p-4 md:p-6 space-y-4">
<!-- Boas-Vindas Inicial -->
<div id="welcomeMessage" class="max-w-xl mx-auto my-8 text-center space-y-4 p-6 glass-card rounded-3xl border border-white/40 dark:border-gray-700/40 shadow-lg">
<div class="relative w-20 h-20 mx-auto">
<img id="welcomeAvatar" src="1786194392710.png" onerror="this.onerror=null; this.src=DEFAULT_ROBOT_AVATAR" class="w-full h-full rounded-3xl object-cover border-4 border-yellow-400 shadow-xl">
<div class="absolute -bottom-2 -right-2 bg-yellow-400 text-black text-xs font-black px-2 py-0.5 rounded-full shadow">
🤖 Olá!
</div>
</div>
<h3 class="text-xl font-bold">Olá! Eu sou o <span class="text-yellow-500">FunBot</span> 💡🧠</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">
Estou pronto para conversar sem limites, criar ideias, sintetizar voz, gerar imagens incríveis com <b>Nano Banana 🍌</b> e personalizar tudo a teu gosto!
</p>
<div class="flex flex-wrap justify-center gap-2 pt-2">
<button onclick="sendQuickPrompt('Conta-me uma piada super divertida de robôs!')" class="px-3 py-1.5 rounded-full text-xs bg-white/80 dark:bg-gray-800/80 hover:scale-105 border border-yellow-500/30 transition shadow-sm">
🤖 Piada de Robô
</button>
<button onclick="sendQuickPrompt('Cria uma história mágica de ficção científica em poucas linhas')" class="px-3 py-1.5 rounded-full text-xs bg-white/80 dark:bg-gray-800/80 hover:scale-105 border border-cyan-500/30 transition shadow-sm">
📖 História Mágica
</button>
<button onclick="sendQuickPrompt('Dá-me 5 ideias criativas para publicar no TikTok!')" class="px-3 py-1.5 rounded-full text-xs bg-white/80 dark:bg-gray-800/80 hover:scale-105 border border-purple-500/30 transition shadow-sm">
💡 Ideias Criativas
</button>
<button onclick="switchMode('image')" class="px-3 py-1.5 rounded-full text-xs bg-yellow-400 text-black font-semibold hover:scale-105 transition shadow-sm">
🎨 Criar Imagem IA
</button>
</div>
</div>
</div>
<!-- Pré-visualização de Imagem Anexada -->
<div id="imagePreviewContainer" class="hidden px-4 py-2 bg-gray-100/90 dark:bg-gray-800/90 border-t border-gray-200 dark:border-gray-700 flex items-center gap-3">
<div class="relative">
<img id="imagePreview" class="w-12 h-12 rounded-lg object-cover border border-gray-300 dark:border-gray-600">
<button id="removeImageBtn" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-0.5 shadow">
<i data-lucide="x" class="w-3 h-3"></i>
</button>
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">Imagem anexada para o FunBot analisar!</span>
</div>
<!-- Formulário de Envio -->
<div class="p-3 md:p-4 glass-panel border-t border-gray-200/50 dark:border-gray-800/50">
<form id="chatForm" class="max-w-4xl mx-auto flex items-end gap-2 bg-white/80 dark:bg-gray-800/80 p-2 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-inner">
<label title="Anexar imagem" class="p-2.5 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer text-gray-500 dark:text-gray-400 hover:text-yellow-500 transition">
<i data-lucide="image-plus" class="w-5 h-5"></i>
<input type="file" id="chatImageInput" accept="image/*" class="hidden">
</label>
<textarea id="chatInput" rows="1" placeholder="Escreve uma mensagem ao FunBot..." class="flex-1 bg-transparent border-none focus:ring-0 text-sm py-2 px-1 resize-none max-h-32 text-gray-800 dark:text-gray-100 placeholder-gray-400"></textarea>
<button type="submit" id="sendBtn" class="p-3 rounded-xl text-white shadow-md hover:opacity-90 active:scale-95 transition flex items-center justify-center" style="background-color: var(--theme-color, #f59e0b);">
<i data-lucide="send" class="w-5 h-5"></i>
</button>
</form>
</div>
</section>
<!-- SECÇÃO 2: Criador de Imagens IA -->
<section id="imageSection" class="hidden flex-1 overflow-y-auto p-4 md:p-6 space-y-6">
<div class="max-w-3xl mx-auto glass-card p-6 rounded-3xl border border-white/50 dark:border-gray-700/50 shadow-xl space-y-4">
<div class="flex items-center gap-3">
<div class="p-3 rounded-2xl bg-yellow-400/20 text-yellow-600 dark:text-yellow-400">
<i data-lucide="palette" class="w-7 h-7"></i>
</div>
<div>
<h3 class="text-xl font-bold flex items-center gap-2">
Estúdio de Criatividade Nano Banana 🍌
</h3>
<p class="text-xs text-gray-500 dark:text-gray-400">Gera imagens incríveis sem limites utilizando Inteligência Artificial!</p>
</div>
</div>
<div class="space-y-3">
<div>
<label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">O que pretendes criar?</label>
<textarea id="imagePrompt" rows="3" placeholder="Ex: Um robô fofo parecido com o FunBot no espaço sideral com luzes néon, estilo animação 3D Pixar, ultra detalhado..." class="w-full rounded-2xl border border-gray-300 dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 p-3 text-sm focus:ring-2 focus:ring-yellow-400 outline-none"></textarea>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Estilo Artístico</label>
<select id="imageStyle" class="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 p-2.5 text-xs font-medium">
<option value="3D Pixar Digital Art">🎨 Animação 3D / Pixar</option>
<option value="Photorealistic 8k highly detailed">📸 Fotorrealista 8K</option>
<option value="Anime Cyberpunk Neon">⚡ Anime Cyberpunk Néon</option>
<option value="Watercolor Illustration">🖌️ Pintura a Aguarela</option>
<option value="Pixel Art 16-bit retro">🎮 Pixel Art Retrô</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold text-gray-600 dark:text-gray-300 mb-1">Modelo da IA</label>
<select id="imageEngine" class="w-full rounded-xl border border-gray-300 dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 p-2.5 text-xs font-medium">
<option value="imagen-4">🍌 Nano Banana Pro (Imagen 4.0)</option>
</select>
</div>
</div>
<button id="generateImgBtn" onclick="generateImage()" class="w-full py-3 rounded-2xl text-white font-bold shadow-lg hover:opacity-95 active:scale-[0.99] transition flex items-center justify-center gap-2" style="background-color: var(--theme-color, #f59e0b);">
<i data-lucide="wand-2" class="w-5 h-5"></i>
<span>Gerar Imagem Agora</span>
</button>
</div>
</div>
<!-- Galeria de Imagens -->
<div class="max-w-4xl mx-auto space-y-3">
<h4 class="font-bold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 flex items-center gap-2">
<i data-lucide="image" class="w-4 h-4"></i> As Minhas Criações Recentes
</h4>
<div id="generatedGallery" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="col-span-full text-center py-12 text-gray-400 text-sm glass-card rounded-2xl">
Nenhuma imagem criada ainda nesta sessão. Utiliza o formulário acima para criar!
</div>
</div>
</div>
</section>
<!-- SECÇÃO 3: Gerador de Vídeos/Roteiros -->
<section id="videoSection" class="hidden flex-1 overflow-y-auto p-4 md:p-6 space-y-6">
<div class="max-w-3xl mx-auto glass-car
Public Last updated: 2026-08-08 01:41:36 PM