|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CareBuddy - Seu Assistente Pessoal</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
.chat-container { |
|
|
height: calc(100vh - 200px); |
|
|
} |
|
|
.typing-indicator::after { |
|
|
content: '...'; |
|
|
display: inline-block; |
|
|
width: 20px; |
|
|
text-align: left; |
|
|
animation: typing 1s steps(5, end) infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
0% { content: '.'; } |
|
|
33% { content: '..'; } |
|
|
66% { content: '...'; } |
|
|
} |
|
|
.message-enter { |
|
|
animation: messageEnter 0.3s ease-out; |
|
|
} |
|
|
@keyframes messageEnter { |
|
|
from { transform: translateY(20px); opacity: 0; } |
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-indigo-600 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-heart text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold text-indigo-900">CareBuddy</h1> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="p-2 rounded-full bg-white shadow-md text-indigo-600 hover:bg-indigo-100 transition"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-white shadow-md text-indigo-600 hover:bg-indigo-100 transition"> |
|
|
<i class="fas fa-user"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex flex-col lg:flex-row gap-6"> |
|
|
|
|
|
<div class="lg:w-1/3 bg-white rounded-2xl shadow-lg p-6 flex flex-col items-center"> |
|
|
<div class="relative mb-6"> |
|
|
<div class="w-40 h-40 rounded-full bg-gradient-to-r from-purple-400 to-indigo-500 flex items-center justify-center floating"> |
|
|
<div class="w-36 h-36 rounded-full bg-white flex items-center justify-center"> |
|
|
<img src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png" alt="AI Avatar" class="w-32 h-32"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-2 -right-2 bg-green-400 rounded-full w-8 h-8 flex items-center justify-center border-2 border-white"> |
|
|
<i class="fas fa-check text-white text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-xl font-semibold text-indigo-900 mb-2">CareBuddy</h2> |
|
|
<p class="text-gray-500 text-sm mb-4">Seu assistente pessoal de cuidados</p> |
|
|
|
|
|
<div class="w-full bg-indigo-50 rounded-lg p-4 mb-6"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-xs font-medium text-indigo-700">Status emocional</span> |
|
|
<span class="text-xs text-indigo-400">85% positivo</span> |
|
|
</div> |
|
|
<div class="w-full bg-white rounded-full h-2"> |
|
|
<div class="bg-gradient-to-r from-green-400 to-blue-500 h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-3 w-full mb-6"> |
|
|
<div class="bg-indigo-50 rounded-lg p-3 text-center"> |
|
|
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-moon text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium text-indigo-900">Sono</span> |
|
|
</div> |
|
|
<div class="bg-indigo-50 rounded-lg p-3 text-center"> |
|
|
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-utensils text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium text-indigo-900">Alimentação</span> |
|
|
</div> |
|
|
<div class="bg-indigo-50 rounded-lg p-3 text-center"> |
|
|
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-heartbeat text-indigo-600"></i> |
|
|
</div> |
|
|
<span class="text-xs font-medium text-indigo-900">Exercícios</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="quickHelpBtn" class="w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center"> |
|
|
<i class="fas fa-plus-circle mr-2"></i> Ajuda Rápida |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:w-2/3 bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col"> |
|
|
|
|
|
<div class="bg-indigo-600 text-white p-4 flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-comment-dots"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Conversa com CareBuddy</h3> |
|
|
<p class="text-xs text-indigo-200">Online agora</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chatMessages" class="chat-container p-4 overflow-y-auto flex-grow"> |
|
|
<div class="message-enter mb-4 flex"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-indigo-50 rounded-lg p-3 max-w-xs lg:max-w-md"> |
|
|
<p class="text-indigo-900">Olá! Eu sou o CareBuddy, seu assistente pessoal. Como posso te ajudar hoje? 😊</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t p-4 bg-gray-50"> |
|
|
<div class="flex items-center"> |
|
|
<button class="p-2 text-indigo-600 hover:bg-indigo-100 rounded-full mr-2"> |
|
|
<i class="fas fa-paperclip"></i> |
|
|
</button> |
|
|
<input id="userInput" type="text" placeholder="Digite sua mensagem..." class="flex-grow border rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-300"> |
|
|
<button id="sendBtn" class="ml-2 p-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-center mt-2 space-x-4"> |
|
|
<button class="quick-option text-xs bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full hover:bg-indigo-100">Dicas de sono</button> |
|
|
<button class="quick-option text-xs bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full hover:bg-indigo-100">Alimentação</button> |
|
|
<button class="quick-option text-xs bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full hover:bg-indigo-100">Exercícios</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="quickHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> |
|
|
<div class="bg-white rounded-xl p-6 max-w-md w-full mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold text-indigo-900">Ajuda Rápida</h3> |
|
|
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center"> |
|
|
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bed text-indigo-600"></i> |
|
|
</div> |
|
|
<span>Problemas para dormir</span> |
|
|
</button> |
|
|
<button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center"> |
|
|
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-apple-alt text-indigo-600"></i> |
|
|
</div> |
|
|
<span>Plano alimentar</span> |
|
|
</button> |
|
|
<button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center"> |
|
|
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-running text-indigo-600"></i> |
|
|
</div> |
|
|
<span>Rotina de exercícios</span> |
|
|
</button> |
|
|
<button class="w-full text-left p-3 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition flex items-center"> |
|
|
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-brain text-indigo-600"></i> |
|
|
</div> |
|
|
<span>Saúde mental</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const userInput = document.getElementById('userInput'); |
|
|
const sendBtn = document.getElementById('sendBtn'); |
|
|
const quickHelpBtn = document.getElementById('quickHelpBtn'); |
|
|
const quickHelpModal = document.getElementById('quickHelpModal'); |
|
|
const closeModalBtn = document.getElementById('closeModalBtn'); |
|
|
const quickOptions = document.querySelectorAll('.quick-option'); |
|
|
|
|
|
|
|
|
const responses = { |
|
|
"oi": "Olá! Como você está se sentindo hoje? 😊", |
|
|
"olá": "Olá! Como você está se sentindo hoje? 😊", |
|
|
"bom dia": "Bom dia! Que seu dia seja cheio de energia positiva! ☀️", |
|
|
"boa tarde": "Boa tarde! Espero que seu dia esteja sendo produtivo! 🌞", |
|
|
"boa noite": "Boa noite! Hora de relaxar e preparar para um ótimo descanso! 🌙", |
|
|
"como você está": "Estou ótimo, obrigado por perguntar! Pronto para te ajudar com seus cuidados pessoais. 💙", |
|
|
"dicas de sono": "Aqui estão algumas dicas para melhorar seu sono:\n1. Mantenha um horário regular\n2. Evite telas antes de dormir\n3. Crie um ambiente escuro e fresco\n4. Evite cafeína à noite\n5. Pratique relaxamento antes de dormir", |
|
|
"alimentação": "Para uma alimentação saudável:\n1. Consuma frutas e vegetais\n2. Beba água regularmente\n3. Prefira alimentos integrais\n4. Modere no açúcar e sal\n5. Faça refeições balanceadas", |
|
|
"exercícios": "Dicas para se exercitar:\n1. Encontre uma atividade que goste\n2. Comece devagar e aumente gradualmente\n3. Pratique pelo menos 30min/dia\n4. Alongue-se antes e depois\n5. Mantenha a regularidade", |
|
|
"saúde mental": "Cuidados com saúde mental:\n1. Pratique mindfulness\n2. Mantenha conexões sociais\n3. Reserve tempo para hobbies\n4. Aprenda a dizer não\n5. Peça ajuda quando precisar", |
|
|
"obrigado": "De nada! Estou aqui para te ajudar sempre que precisar. 💜", |
|
|
"obrigada": "De nada! Estou aqui para te ajudar sempre que precisar. 💜", |
|
|
"default": "Desculpe, não entendi. Poderia reformular? Estou aqui para ajudar com cuidados pessoais como sono, alimentação, exercícios e saúde mental." |
|
|
}; |
|
|
|
|
|
|
|
|
function addMessage(message, isUser = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message-enter mb-4 flex ${isUser ? 'justify-end' : ''}`; |
|
|
|
|
|
if (!isUser) { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-indigo-50 rounded-lg p-3 max-w-xs lg:max-w-md"> |
|
|
<p class="text-indigo-900">${message}</p> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg p-3 max-w-xs lg:max-w-md"> |
|
|
<p class="text-white">${message}</p> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center ml-3 flex-shrink-0"> |
|
|
<i class="fas fa-user text-purple-600"></i> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
chatMessages.appendChild(messageDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
function showTyping() { |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'mb-4 flex'; |
|
|
typingDiv.innerHTML = ` |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="bg-indigo-50 rounded-lg p-3 max-w-xs lg:max-w-md"> |
|
|
<p class="text-indigo-900 typing-indicator"></p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
chatMessages.appendChild(typingDiv); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
return typingDiv; |
|
|
} |
|
|
|
|
|
|
|
|
function processInput() { |
|
|
const message = userInput.value.trim(); |
|
|
if (message === '') return; |
|
|
|
|
|
addMessage(message, true); |
|
|
userInput.value = ''; |
|
|
|
|
|
const typing = showTyping(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
chatMessages.removeChild(typing); |
|
|
|
|
|
const lowerMessage = message.toLowerCase(); |
|
|
let response = responses.default; |
|
|
|
|
|
for (const key in responses) { |
|
|
if (lowerMessage.includes(key)) { |
|
|
response = responses[key]; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
response = response.replace(/\n/g, '<br>'); |
|
|
addMessage(response); |
|
|
}, 1000 + Math.random() * 1000); |
|
|
} |
|
|
|
|
|
|
|
|
sendBtn.addEventListener('click', processInput); |
|
|
|
|
|
userInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
processInput(); |
|
|
} |
|
|
}); |
|
|
|
|
|
quickHelpBtn.addEventListener('click', () => { |
|
|
quickHelpModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeModalBtn.addEventListener('click', () => { |
|
|
quickHelpModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
quickOptions.forEach(option => { |
|
|
option.addEventListener('click', function() { |
|
|
userInput.value = this.textContent; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const typing = showTyping(); |
|
|
setTimeout(() => { |
|
|
chatMessages.removeChild(typing); |
|
|
addMessage("Eu posso te ajudar com dicas sobre sono, alimentação, exercícios e saúde mental. Por onde gostaria de começar?"); |
|
|
}, 1500); |
|
|
}, 1000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Eduardasilva/meu-assistente-pessoal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
