<!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: #fff;
--purple: #5959ff;
--gray-bg: #f4f7f6;
--user-msg: #dcf8c6;
--bot-msg: #ffffff;
}
body {
background-color: var(--dark);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.chat-container {
width: 100%;
max-width: 500px;
height: 80vh;
background-color: var(--gray-bg);
display: flex;
flex-direction: column;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.chat-header {
background-color: var(--purple);
color: white;
padding: 20px;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
}
#chat-window {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.message {
padding: 12px 16px;
border-radius: 15px;
max-width: 85%;
font-size: 0.95rem;
line-height: 1.4;
position: relative;
}
.bot-message {
align-self: flex-start;
background-color: var(--bot-msg);
color: #333;
border-bottom-left-radius: 2px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}
.user-message {
align-self: flex-end;
background-color: var(--purple);
color: white;
border-bottom-right-radius: 2px;
}
.options-container {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.option-btn {
background-color: #fff;
border: 1px solid var(--purple);
color: var(--purple);
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: 0.3s;
font-size: 0.9rem;
}
.option-btn:hover {
background-color: var(--purple);
color: white;
}
/* Esconder scrollbar */
#chat-window::-webkit-scrollbar { width: 5px; }
#chat-window::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
</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 com a sua lógica
const botLogic = {
main: {
text: "Olá, em que posso ajudar? Escolha uma opção:",
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 é formado por duas longas fitas helicoidais entrelaçadas, formando uma dupla hélice.",
options: [{ text: "⬅️ Voltar ao início", next: "main" }]
},
dna_fun: {
text: "O DNA fornece as instruções (genes) para a produção de proteínas, que são moléculas fundamentais para a estrutura e o funcionamento das células.",
options: [{ text: "⬅️ Voltar ao início", next: "main" }]
},
rna_menu: {
text: "Sobre o RNA, qual 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: "Geralmente é uma fita única, o que o torna mais versátil e menos estável que o DNA.",
options: [{ text: "⬅️ Voltar ao início", next: "main" }]
},
rna_fun: {
text: "O RNA atua como um intermediário que copia as instruções genéticas do DNA e as transporta para o citoplasma para a produção de proteínas.",
options: [{ text: "⬅️ Voltar ao início", next: "main" }]
},
proteina_menu: {
text: "Sobre as Proteínas, o que quer 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 macromoléculas formadas por cadeias de aminoácidos. São o componente estrutural principal das células e tecidos.",
options: [{ text: "⬅️ Voltar ao início", next: "main" }]
},
prot_fun: {
text: "As proteínas possuem várias funções: \n• Estrutural (músculos, colágeno);\n• Enzimática (metabolismo);\n• Defesa (anticorpos).",
options: [{ text: "⬅️ Voltar ao início", next: "main" }]
}
};
function addMessage(text, side) {
const msgDiv = document.createElement('div');
msgDiv.className = `message ${side}-message`;
msgDiv.innerText = text;
chatWindow.appendChild(msgDiv);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
function showOptions(key) {
const step = botLogic[key];
addMessage(step.text, 'bot');
const optionsDiv = document.createElement('div');
optionsDiv.className = 'options-container';
step.options.forEach(opt => {
const btn = document.createElement('button');
btn.className = 'option-btn';
btn.innerText = opt.text;
btn.onclick = () => {
// Remove os botões após clicar
optionsDiv.remove();
addMessage(opt.text, 'user');
// Pequeno atraso para parecer natural
setTimeout(() => showOptions(opt.next), 500);
};
optionsDiv.appendChild(btn);
});
chatWindow.appendChild(optionsDiv);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
// Iniciar chat
showOptions('main');
</script>
</body>
</html>