tag:blogger.com,1999:blog-5758097497847680785Mon, 06 Apr 2026 18:09:28 +0000Tiagossauro Rexhttp://tiagossaurorex.blogspot.com/noreply@blogger.com (Unknown)Blogger1125en-usnoDinossauro,Tiago,EngraçadoBem esse blog relata coisas encraçadas sobre todas as coisas de desenho animado a coisas que nos acontece dia-a-dia.Tiagossaurotiagoshoryu@yahoo.com.brtag:blogger.com,1999:blog-5758097497847680785.post-6010518309366303969Mon, 06 Apr 2026 18:08:00 +00002026-04-06T11:08:56.922-07:00<description><!DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Hortinha: Inteligência Escolar EMJMH</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@latest"></script> <style> :root { --primary: #4f46e5; } body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8fafc; color: #1e293b; overflow: hidden; height: 100vh; } .fredoka { font-family: 'Fredoka', sans-serif; } .glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-radius: 32px; border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05); } .animate-float { animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .school-desk { background: linear-gradient(180deg, #64748b 0%, #334155 100%); height: 40px; width: 100%; position: absolute; bottom: 0; z-index: 10; } #ai-text::after { content: ' ●'; animation: blink 1s infinite; color: var(--primary); } @keyframes blink { 50% { opacity: 0; } } .thinking-pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } ::-webkit-scrollbar { width: 0px; } .quiz-option:hover { transform: scale(1.02); background: #f1f5f9; } </style> </head> <body class="flex flex-col"> <header class="p-4 flex items-center justify-between z-50"> <div class="flex items-center gap-3 bg-white/80 p-1.5 pr-4 rounded-full border border-slate-200 shadow-sm"> <div class="w-9 h-9 rounded-full bg-indigo-600 flex items-center justify-center text-white"> <i data-lucide="bot" class="w-5 h-5"></i> </div> <input id="user-name-input" type="text" placeholder="Teu nome..." class="bg-transparent border-none outline-none font-bold text-slate-700 w-28 text-sm fredoka"> </div> <div class="flex gap-2"> <button onclick="quickAsk('Quem é a direção?')" class="bg-white px-4 py-2 rounded-full font-bold text-[10px] uppercase tracking-wider flex items-center gap-2 border border-slate-200 hover:bg-slate-50 transition-all"> <i data-lucide="users" class="w-3.5 h-3.5 text-indigo-500"></i> Equipa </button> </div> </header> <main class="flex-grow flex flex-col items-center justify-center px-4 relative"> <div id="hero-zone" class="flex flex-col items-center transition-all duration-500"> <div id="robot" class="animate-float"> <svg width="140" height="160" viewBox="0 0 160 200"> <rect x="0" y="30" width="160" height="170" rx="64" fill="url(#grad)" stroke="#fff" stroke-width="6"/> <path d="M80 0C80 0 115 10 115 35C115 60 80 70 80 70C80 70 45 60 45 35C45 10 80 0 80 0Z" fill="#4f46e5" stroke="#fff" stroke-width="4"/> <circle cx="55" cy="100" r="10" fill="#1e1b4b"/> <circle cx="105" cy="100" r="10" fill="#1e1b4b"/> <rect id="mouth" x="60" y="145" width="40" height="6" rx="3" fill="#1e1b4b"/> <defs><linearGradient id="grad" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#818cf8"/><stop offset="1" stop-color="#4f46e5"/></linearGradient></defs> </svg> </div> <div id="thinking" class="hidden mt-4 bg-indigo-50 text-indigo-600 px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest thinking-pulse"> Hortinha está a pensar... </div> </div> <div id="chat-panel" class="hidden w-full max-w-2xl mt-6 z-40 glass-panel p-6 md:p-8 flex flex-col max-h-[65vh]"> <div class="overflow-y-auto pr-2" id="scroll-box"> <p id="ai-text" class="text-slate-800 font-bold text-xl md:text-2xl leading-snug fredoka text-center mb-8"></p> <div id="quiz-box" class="hidden bg-slate-50 p-6 rounded-3xl border border-slate-100"> <h4 id="quiz-q" class="text-indigo-950 font-black text-lg mb-4 fredoka"></h4> <div id="quiz-options" class="grid grid-cols-1 gap-3"></div> </div> </div> <button onclick="resetApp()" class="mt-6 self-center px-6 py-2 text-slate-400 font-bold text-[10px] uppercase tracking-widest hover:text-indigo-600 transition-all flex items-center gap-2"> <i data-lucide="rotate-ccw" class="w-4 h-4"></i> Voltar </button> </div> <div id="input-area" class="w-full max-w-xl mt-auto mb-12 z-50"> <div class="flex items-center bg-white rounded-full p-1.5 shadow-xl border border-slate-200 focus-within:ring-2 ring-indigo-100 transition-all"> <input id="user-input" type="text" placeholder="Faz uma pergunta, sô..." class="flex-grow bg-transparent outline-none px-6 font-bold text-slate-700 fredoka text-sm" onkeydown="if(event.key==='Enter') handleSend()"> <button id="send-btn" onclick="handleSend()" class="w-11 h-11 bg-indigo-600 text-white rounded-full flex items-center justify-center shadow-lg hover:scale-105 transition-all"> <i data-lucide="send-horizontal" class="w-5 h-5"></i> </button> </div> </div> <div class="school-desk"></div> </main> <script> lucide.createIcons(); // Esta chave será preenchida automaticamente pelo sistema se estiveres no modo Canvas. // Se estiveres a testar fora do Canvas, precisas de colocar aqui a tua API KEY do Google AI Studio. const apiKey = ""; let state = { user: "amiguinho", busy: false, isSpeaking: false }; function setBusy(b) { state.busy = b; document.getElementById('thinking').classList.toggle('hidden', !b); document.getElementById('send-btn').style.opacity = b ? '0.5' : '1'; } async function handleSend() { const input = document.getElementById('user-input'); const text = input.value.trim(); if (!text || state.busy) return; if (!apiKey) { renderResponse("Uai, sô! Parece que a chave da API não foi configurada. Coloca a tua API Key no código para eu poder responder!"); return; } setBusy(true); try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: text }] }], systemInstruction: { parts: [{ text: "És o Hortinha, robô da escola EMJMH. Fala com sotaque mineiro carinhoso." }] } }) }); const data = await response.json(); const aiMsg = data.candidates[0].content.parts[0].text; renderResponse(aiMsg); } catch (e) { renderResponse("Ixi, deu um erro aqui no sistema. Tenta de novo mais tarde!"); } finally { setBusy(false); input.value = ""; } } function renderResponse(msg) { document.getElementById('hero-zone').classList.add('hidden'); document.getElementById('chat-panel').classList.remove('hidden'); document.getElementById('ai-text').innerText = msg; } function resetApp() { document.getElementById('chat-panel').classList.add('hidden'); document.getElementById('hero-zone').classList.remove('hidden'); } function quickAsk(t) { document.getElementById('user-input').value = t; handleSend(); } </script> </body> </html><div class="blogger-post-footer">Tiago´s Shoryu´s Art´s</div></description><link>http://tiagossaurorex.blogspot.com/2026/04/hortinha-inteligencia-escolar-emjmh.html</link><thr:total>0</thr:total><author>tiagoshoryu@yahoo.com.br (Unknown)</author></item></channel></rss>