<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot de Biologia - Escola Dionísio</title>
<style>
:root {
--dark: #0c0c0c;
--white: #ffffff;
--purple: #5959ff;
--gray-bg: #f4f7f6;
--user-msg: #e1ffc7;
--bot-msg: #ffffff;
--border-radius: 18px;
}
* {
box-sizing: border-box;
}
body {
background: var(--dark);
font-family: 'Segoe UI', system-ui, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.chat-container {
width: 100%;
max-width: 520px;
height: 92vh;
background: var(--gray-bg);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 14px 40px rgba(0,0,0,0.55);
display: flex;
flex-direction: column;
}
.chat-header {
background: var(--purple);
color: white;
padding: 18px;
text-align: center;
font-weight: 600;
font-size: 1.35rem;
letter-spacing: 0.5px;
}
#chat-window {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 16px;
background: linear-gradient(to bottom, #f8fafc, #f4f7f6);
}
.message {
padding: 12px 18px;
border-radius: var(--border-radius);
max-width: 82%;
font-size: 0.97rem;
line-height: 1.45;
position: relative;
word-wrap: break-word;
}
.bot-message {
align-self: flex-start;
background: var(--bot-msg);
color: #222;
border-bottom-left-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.user-message {
align-self: flex-end;
background: var(--purple);
color: white;
border-bottom-right-radius: 4px;
}
.options-container {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
padding-left: 4px;
}
.option-btn {
background: white;
border: 1.5px solid var(--purple);
color: var(--purple);
padding: 11px 16px;
border-radius: 12px;
cursor: pointer;
text-align: left;
font-size: 0.94rem;
transition: all 0.25s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.option-btn:hover {
background: var(--purple);
color: white;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(89,89,255,0.3);
}
/* Scrollbar customizada */
#chat-window::-webkit-scrollbar {
width: 6px;
}
#chat-window::-webkit-scrollbar-track {
background: #e9ecef;
}
#chat-window::-webkit-scrollbar-thumb {
background: #adb5bd;
border-radius: 10px;
}
#chat-window::-webkit-scrollbar-thumb:hover {
background: #868e96;
}
.dna-svg-container {
margin: 14px 0 8px 0;
text-align: center;
}
.dna-svg-container svg {
max-width: 260px;
height: auto;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">Monitor de Biologia</div>
<div id="chat-window"></div>
</div>
<script>
const chatWindow = document.getElementById('chat-window');
// Estrutura de dados corrigida e organizada
const botLogic = {
main: {
text: "Olá! Em que posso ajudar hoje?",
options: [
{ text: "1) DNA", next: "dna_menu" },
{ text: "2) RNA", next: "rna_menu" },
{ text: "3) Proteína", next: "proteina_menu" }
]
},
dna_menu: {
text: "Sobre o **DNA**, o que você deseja saber?",
options: [
{ text: "1.1) O que é o DNA?", next: "dna_def" },
{ text: "1.2) Qual a função do DNA?", next: "dna_fun" },
{ text: "⬅️ Voltar", next: "main" }
]
},
dna_def: {
text: "O DNA (ácido desoxirribonucleico) é uma molécula em forma de dupla hélice que contém as informações genéticas de todos os seres vivos conhecidos.",
hasImage: true, // vamos inserir o SVG aqui
options: [{ text: "⬅️ Voltar ao menu principal", next: "main" }]
},
dna_fun: {
text: "O DNA armazena e transmite as instruções genéticas (genes) que orientam a síntese de proteínas — as moléculas responsáveis pela estrutura e funcionamento das células.",
options: [{ text: "⬅️ Voltar ao menu principal", next: "main" }]
},
rna_menu: {
text: "Sobre o **RNA**, qual é a sua dúvida?",
options: [
{ text: "2.1) O que é o RNA?", next: "rna_def" },
{ text: "2.2) Qual a função do RNA?", next: "rna_fun" },
{ text: "⬅️ Voltar", next: "main" }
]
},
rna_def: {
text: "O RNA (ácido ribonucleico) é geralmente uma molécula de fita simples, mais versátil e menos estável que o DNA.",
options: [{ text: "⬅️ Voltar ao menu principal", next: "main" }]
},
rna_fun: {
text: "O RNA atua como mensageiro: copia as instruções do DNA (transcrição) e as leva até os ribossomos para a produção de proteínas (tradução).",
options: [{ text: "⬅️ Voltar ao menu principal", next: "main" }]
},
proteina_menu: {
text: "Sobre as **Proteínas**, o que gostaria de aprender?",
options: [
{ text: "3.1) O que é proteína?", next: "prot_def" },
{ text: "3.2) Qual a função da proteína?", next: "prot_fun" },
{ text: "⬅️ Voltar", next: "main" }
]
},
prot_def: {
text: "As proteínas são grandes moléculas formadas por cadeias de aminoácidos. São os principais componentes estruturais e funcionais das células.",
options: [{ text: "⬅️ Voltar ao menu principal", next: "main" }]
},
prot_fun: {
text: "As proteínas têm diversas funções:\n• Estrutural (ex.: colágeno, queratina)\n• Enzimática (aceleram reações químicas)\n• Defesa (anticorpos)\n• Transporte (hemoglobina)\n• Hormonal (insulina)",
options: [{ text: "⬅️ Voltar ao menu principal", next: "main" }]
}
};
// SVG do DNA (movido para fora da string)
const dnaSvg = `
<svg version="1.1" viewBox="0 0 602 881" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- seu SVG completo aqui (copie todo o conteúdo do <svg> que estava no seu código) -->
<!-- ... (coloquei resumido aqui, mas você deve colar o SVG inteiro) ... -->
</svg>`;
function addMessage(text, side = 'bot', extraHtml = '') {
const msgDiv = document.createElement('div');
msgDiv.className = `message ${side}-message`;
msgDiv.innerHTML = text + extraHtml;
chatWindow.appendChild(msgDiv);
chatWindow.scrollTo({ top: chatWindow.scrollHeight, behavior: 'smooth' });
}
function showOptions(key) {
const step = botLogic[key];
if (!step) return;
// Adiciona mensagem do bot
let extra = '';
if (step.hasImage) {
extra = `<div class="dna-svg-container">${dnaSvg}</div>`;
}
addMessage(step.text, 'bot', extra);
// Cria container de opções
const optionsDiv = document.createElement('div');
optionsDiv.className = 'options-container';
step.options.forEach(opt => {
const btn = document.createElement('button');
btn.className = 'option-btn';
btn.textContent = opt.text;
btn.onclick = () => {
optionsDiv.remove(); // remove botões antigos
addMessage(opt.text, 'user'); // mostra escolha do usuário
setTimeout(() => {
showOptions(opt.next);
}, 600); // pequeno delay natural
};
optionsDiv.appendChild(btn);
});
chatWindow.appendChild(optionsDiv);
chatWindow.scrollTo({ top: chatWindow.scrollHeight, behavior: 'smooth' });
}
// Inicia o chat
showOptions('main');
</script>
</body>
</html>