<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Chatbot de Biologia</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background:#f2f2f2;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.chat-container{
width:420px;
background:white;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
overflow:hidden;
}
.chat-header{
background:#2c7be5;
color:white;
padding:15px;
text-align:center;
font-weight:bold;
}
.chat-box{
height:380px;
padding:15px;
overflow-y:auto;
background:#fafafa;
}
.bot{
background:#e4e6eb;
padding:10px;
border-radius:10px;
margin-bottom:10px;
max-width:80%;
}
.user{
background:#2c7be5;
color:white;
padding:10px;
border-radius:10px;
margin-bottom:10px;
max-width:80%;
margin-left:auto;
}
.options{
padding:10px;
border-top:1px solid #ddd;
}
.options button{
width:100%;
margin:5px 0;
padding:10px;
border:none;
border-radius:5px;
background:#2c7be5;
color:white;
cursor:pointer;
}
.options button:hover{
background:#1a5dcc;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
Assistente de Biologia
</div>
<div id="chat" class="chat-box"></div>
<div id="options" class="options"></div>
</div>
<script>
const chat = document.getElementById("chat")
const options = document.getElementById("options")
function botMessage(text){
const div = document.createElement("div")
div.className="bot"
div.innerText=text
chat.appendChild(div)
chat.scrollTop=chat.scrollHeight
}
function userMessage(text){
const div = document.createElement("div")
div.className="user"
div.innerText=text
chat.appendChild(div)
chat.scrollTop=chat.scrollHeight
}
function showOptions(list){
options.innerHTML=""
list.forEach(op=>{
const btn=document.createElement("button")
btn.innerText=op.text
btn.onclick=()=>op.action()
options.appendChild(btn)
})
}
function start(){
botMessage("Olá, em que posso ajudar? Marque a opção da sua dúvida:")
showOptions([
{ text:"1) DNA", action:dnaMenu },
{ text:"2) RNA", action:rnaMenu },
{ text:"3) Proteína", action:proteinaMenu }
])
}
function dnaMenu(){
userMessage("DNA")
botMessage("Escolha uma opção sobre DNA:")
showOptions([
{
text:"1.1) O que é o DNA?",
action(){
userMessage("O que é o DNA?")
botMessage("É formado por duas longas fitas helicoidais entrelaçadas, formando uma dupla hélice.")
restart()
}
},
{
text:"1.2) Qual a função do DNA?",
action(){
userMessage("Função do DNA")
botMessage("Fornece as instruções (genes) para a produção de proteínas, fundamentais para a estrutura e funcionamento das células.")
restart()
}
}
])
}
function rnaMenu(){
userMessage("RNA")
botMessage("Escolha uma opção sobre RNA:")
showOptions([
{
text:"2.1) O que é o RNA?",
action(){
userMessage("O que é o RNA?")
botMessage("Geralmente é uma fita única, o que o torna mais versátil e menos estável que o DNA.")
restart()
}
},
{
text:"2.2) Qual a função do RNA?",
action(){
userMessage("Função do RNA")
botMessage("Atua como intermediário que copia as instruções genéticas do DNA e as transporta para o citoplasma para produção de proteínas.")
restart()
}
}
])
}
function proteinaMenu(){
userMessage("Proteína")
botMessage("Escolha uma opção sobre proteínas:")
showOptions([
{
text:"3.1) O que é proteína?",
action(){
userMessage("O que é proteína?")
botMessage("As proteínas são macromoléculas biológicas grandes e complexas formadas por longas cadeias de aminoácidos ligados por ligações peptídicas. São essenciais para a estrutura e funcionamento das células.")
restart()
}
},
{
text:"3.2) Qual a função da proteína?",
action(){
userMessage("Função da proteína")
botMessage("Função estrutural: construção e reparação de tecidos.")
botMessage("Ação enzimática: catalisam reações químicas do metabolismo.")
botMessage("Defesa imunológica: produção de anticorpos contra infecções.")
restart()
}
}
])
}
function restart(){
showOptions([
{
text:"Voltar ao menu principal",
action:start
}
])
}
start()
</script>
</body>
</html>