Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediChat - Medical Assistant</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| } | |
| .chat-container { | |
| width: 100%; | |
| max-width: 420px; | |
| height: 90vh; | |
| max-height: 700px; | |
| background: #ffffff; | |
| border-radius: 24px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| animation: slideUp 0.5s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Header */ | |
| .chat-header { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| padding: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .medical-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| .medical-icon svg { | |
| width: 28px; | |
| height: 28px; | |
| fill: white; | |
| } | |
| .header-info h1 { | |
| color: white; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .header-info p { | |
| color: rgba(255, 255, 255, 0.85); | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .online-dot { | |
| width: 8px; | |
| height: 8px; | |
| background: #4ade80; | |
| border-radius: 50%; | |
| animation: blink 1.5s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| /* Chat Messages Area */ | |
| .chat-messages { | |
| flex: 1; | |
| padding: 20px; | |
| overflow-y: auto; | |
| background: #f8fafc; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .message { | |
| display: flex; | |
| flex-direction: column; | |
| max-width: 85%; | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .message.bot { | |
| align-self: flex-start; | |
| } | |
| .message.user { | |
| align-self: flex-end; | |
| } | |
| .message-content { | |
| padding: 12px 16px; | |
| border-radius: 18px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| position: relative; | |
| } | |
| .message.bot .message-content { | |
| background: white; | |
| color: #1f2937; | |
| border-bottom-left-radius: 4px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); | |
| } | |
| .message.user .message-content { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| color: white; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .message-time { | |
| font-size: 11px; | |
| color: #9ca3af; | |
| margin-top: 5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .message.user .message-time { | |
| align-self: flex-end; | |
| } | |
| .message.bot .message-time { | |
| align-self: flex-start; | |
| } | |
| /* Question Options */ | |
| .question-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .question-btn { | |
| background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); | |
| border: 1px solid #a7f3d0; | |
| padding: 12px 16px; | |
| border-radius: 12px; | |
| font-size: 13px; | |
| color: #047857; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: all 0.2s ease; | |
| font-family: 'Inter', sans-serif; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .question-btn:hover { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| color: white; | |
| border-color: #10b981; | |
| transform: translateX(5px); | |
| } | |
| .question-btn .icon { | |
| font-size: 16px; | |
| } | |
| /* Typing Indicator */ | |
| .typing-indicator { | |
| display: none; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 12px 16px; | |
| background: white; | |
| border-radius: 18px; | |
| border-bottom-left-radius: 4px; | |
| width: fit-content; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); | |
| } | |
| .typing-indicator.show { | |
| display: flex; | |
| } | |
| .typing-indicator span { | |
| width: 8px; | |
| height: 8px; | |
| background: #10b981; | |
| border-radius: 50%; | |
| animation: typing 1.4s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typing { | |
| 0%, 60%, 100% { | |
| transform: translateY(0); | |
| opacity: 0.4; | |
| } | |
| 30% { | |
| transform: translateY(-8px); | |
| opacity: 1; | |
| } | |
| } | |
| /* Input Area */ | |
| .chat-input { | |
| padding: 15px 20px; | |
| background: white; | |
| border-top: 1px solid #e5e7eb; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .input-wrapper { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| background: #f3f4f6; | |
| border-radius: 25px; | |
| padding: 0 20px; | |
| transition: all 0.2s ease; | |
| } | |
| .input-wrapper:focus-within { | |
| background: #e5e7eb; | |
| box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); | |
| } | |
| .chat-input input { | |
| flex: 1; | |
| border: none; | |
| background: transparent; | |
| padding: 14px 0; | |
| font-size: 14px; | |
| font-family: 'Inter', sans-serif; | |
| outline: none; | |
| color: #1f2937; | |
| } | |
| .chat-input input::placeholder { | |
| color: #9ca3af; | |
| } | |
| .send-btn { | |
| width: 48px; | |
| height: 48px; | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| } | |
| .send-btn:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); | |
| } | |
| .send-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .send-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| fill: white; | |
| transform: translateX(1px); | |
| } | |
| /* Date Separator */ | |
| .date-separator { | |
| text-align: center; | |
| margin: 10px 0; | |
| } | |
| .date-separator span { | |
| background: #e5e7eb; | |
| padding: 5px 12px; | |
| border-radius: 10px; | |
| font-size: 12px; | |
| color: #6b7280; | |
| } | |
| /* Scrollbar Styling */ | |
| .chat-messages::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat-messages::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb { | |
| background: #d1d5db; | |
| border-radius: 3px; | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb:hover { | |
| background: #9ca3af; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <!-- Header --> | |
| <div class="chat-header"> | |
| <div class="medical-icon"> | |
| <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/> | |
| </svg> | |
| </div> | |
| <div class="header-info"> | |
| <h1>MediChat Assistant</h1> | |
| <p><span class="online-dot"></span> Online • Ready to help</p> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="date-separator"> | |
| <span id="currentDate"></span> | |
| </div> | |
| <div class="message bot"> | |
| <div class="message-content"> | |
| 👋 Hello! I'm your MediChat Assistant. How can I help you today? | |
| <br><br> | |
| Please select a topic below or type your question: | |
| <div class="question-options" id="questionOptions"> | |
| <button class="question-btn" data-question="headache"> | |
| <span class="icon">🤕</span> | |
| How to relieve a headache? | |
| </button> | |
| <button class="question-btn" data-question="fever"> | |
| <span class="icon">🌡️</span> | |
| What should I do if I have a fever? | |
| </button> | |
| <button class="question-btn" data-question="sleep"> | |
| <span class="icon">😴</span> | |
| Tips for better sleep? | |
| </button> | |
| <button class="question-btn" data-question="stress"> | |
| <span class="icon">🧘</span> | |
| How to manage stress and anxiety? | |
| </button> | |
| </div> | |
| </div> | |
| <span class="message-time" id="initialTime"></span> | |
| </div> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="chat-input"> | |
| <div class="input-wrapper"> | |
| <input type="text" id="messageInput" placeholder="Type your health question..."> | |
| </div> | |
| <button class="send-btn" id="sendBtn"> | |
| <svg viewBox="0 0 24 24"> | |
| <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| const chatMessages = document.getElementById('chatMessages'); | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| const questionOptions = document.getElementById('questionOptions'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| // Set current date and time on page load | |
| function getCurrentTime() { | |
| const now = new Date(); | |
| let hours = now.getHours(); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| const ampm = hours >= 12 ? 'PM' : 'AM'; | |
| hours = hours % 12; | |
| hours = hours ? hours : 12; | |
| return `${hours}:${minutes} ${ampm}`; | |
| } | |
| function getCurrentDate() { | |
| const now = new Date(); | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| return now.toLocaleDateString('en-US', options); | |
| } | |
| // Initialize date and time | |
| document.getElementById('currentDate').textContent = getCurrentDate(); | |
| document.getElementById('initialTime').textContent = getCurrentTime(); | |
| const responses = { | |
| headache: { | |
| question: "How to relieve a headache?", | |
| answer: `Here are some effective ways to relieve a headache: 💊 | |
| • <b>Stay hydrated</b> - Drink plenty of water | |
| • <b>Rest in a quiet, dark room</b> - Reduce light and noise | |
| • <b>Apply a cold or warm compress</b> - On forehead or neck | |
| • <b>Try gentle massage</b> - Temples and neck area | |
| • <b>Take a break from screens</b> - Reduce eye strain | |
| ⚠️ If headaches persist for more than 3 days or are severe, please consult a doctor.` | |
| }, | |
| fever: { | |
| question: "What should I do if I have a fever?", | |
| answer: `Here's what you should do if you have a fever: 🌡️ | |
| • <b>Rest well</b> - Your body needs energy to fight infection | |
| • <b>Stay hydrated</b> - Water, herbal teas, and clear broths | |
| • <b>Use a light blanket</b> - Don't bundle up too much | |
| • <b>Take lukewarm baths</b> - Helps regulate body temperature | |
| • <b>Monitor your temperature</b> - Keep track of changes | |
| 🚨 Seek immediate medical attention if fever exceeds 103°F (39.4°C) or lasts more than 3 days.` | |
| }, | |
| sleep: { | |
| question: "Tips for better sleep?", | |
| answer: `Here are proven tips for better sleep: 😴 | |
| • <b>Stick to a schedule</b> - Same bedtime and wake time daily | |
| • <b>Create a restful environment</b> - Dark, quiet, and cool | |
| • <b>Limit screen time</b> - No devices 1 hour before bed | |
| • <b>Avoid caffeine after 2 PM</b> - It stays in your system | |
| • <b>Exercise regularly</b> - But not too close to bedtime | |
| • <b>Try relaxation techniques</b> - Deep breathing or meditation | |
| 💤 Aim for 7-9 hours of quality sleep each night.` | |
| }, | |
| stress: { | |
| question: "How to manage stress and anxiety?", | |
| answer: `Here are effective ways to manage stress and anxiety: 🧘 | |
| • <b>Practice deep breathing</b> - 4-7-8 breathing technique | |
| • <b>Exercise regularly</b> - Even a 15-minute walk helps | |
| • <b>Limit caffeine and alcohol</b> - They can increase anxiety | |
| • <b>Connect with others</b> - Talk to friends or family | |
| • <b>Practice mindfulness</b> - Stay present in the moment | |
| • <b>Get enough sleep</b> - Rest is crucial for mental health | |
| 💚 If anxiety significantly impacts your daily life, consider speaking with a mental health professional.` | |
| } | |
| }; | |
| function addMessage(content, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${isUser ? 'user' : 'bot'}`; | |
| messageDiv.innerHTML = ` | |
| <div class="message-content">${content}</div> | |
| <span class="message-time">${getCurrentTime()}</span> | |
| `; | |
| chatMessages.insertBefore(messageDiv, typingIndicator); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function showTyping() { | |
| typingIndicator.classList.add('show'); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function hideTyping() { | |
| typingIndicator.classList.remove('show'); | |
| } | |
| function handleQuestionClick(questionKey) { | |
| const response = responses[questionKey]; | |
| if (!response) return; | |
| // Hide question options after first click | |
| questionOptions.classList.add('hidden'); | |
| // Add user message | |
| addMessage(response.question, true); | |
| // Show typing indicator | |
| showTyping(); | |
| // Add bot response after delay | |
| setTimeout(() => { | |
| hideTyping(); | |
| addMessage(response.answer); | |
| }, 1500); | |
| } | |
| // Event listeners for question buttons | |
| document.querySelectorAll('.question-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| handleQuestionClick(btn.dataset.question); | |
| }); | |
| }); | |
| // Send button and enter key | |
| function sendMessage() { | |
| const text = messageInput.value.trim(); | |
| if (!text) return; | |
| addMessage(text, true); | |
| messageInput.value = ''; | |
| showTyping(); | |
| setTimeout(() => { | |
| hideTyping(); | |
| addMessage("Thank you for your question! 🏥<br><br>For personalized medical advice, please consult with a healthcare professional. I can provide general health information, but I'm not a substitute for professional medical care.<br><br>Is there anything else I can help you with?"); | |
| }, 1500); | |
| } | |
| sendBtn.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |