Spaces:

maxxxi100
/

My_health_chatbot

Running

App Files Files Community

maxxxi100 commited on 16 days ago

Commit

b861a93

verified ·

1 Parent(s): 0d8ffe1

Update My_health.html

Browse files

Files changed (1) hide show

My_health.html +91 -168

My_health.html CHANGED Viewed

@@ -1,183 +1,106 @@
 <!DOCTYPE html>
 <html lang="ca">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>My Health Dashboard</title>
-<style>
-  body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: #f5f7fa;
-    margin: 0;
-    padding: 0;
-  }
-  h1 { text-align: center; margin-top: 20px; color: #333; }
-  p { text-align:center; color: #555; }
-  #chat-widget {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    width: 320px;
-    max-height: 450px;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    font-size: 14px;
-    z-index: 9999;
-    transition: all 0.3s ease;
-  }
-  #chat-header {
-    background: #4e9af1;
-    color: white;
-    padding: 12px;
-    font-weight: bold;
-    cursor: pointer;
-    user-select: none;
-  }
-  #chat-messages {
-    flex: 1;
-    padding: 10px;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-    display: flex;
-    flex-direction: column;
-  }
-  .message {
-    margin-bottom: 10px;
-    padding: 8px 12px;
-    border-radius: 16px;
-    max-width: 75%;
-    opacity: 0;
-    transform: translateY(10px);
-    animation: slideIn 0.3s forwards;
-    word-wrap: break-word;
-  }
-  .message.user {
-    background: #d1e7ff;
-    align-self: flex-end;
-  }
-  .message.bot {
-    background: #f1f1f1;
-    align-self: flex-start;
-  }
-  @keyframes slideIn {
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  #chat-input {
-    display: flex;
-    border-top: 1px solid #ccc;
-  }
-  #chat-input input {
-    flex: 1;
-    padding: 10px;
-    border: none;
-    outline: none;
-    font-size: 14px;
-  }
-  #chat-input button {
-    background: #4e9af1;
-    color: white;
-    border: none;
-    padding: 0 15px;
-    cursor: pointer;
-    transition: background 0.2s;
-  }
-  #chat-input button:hover {
-    background: #3b7ed0;
-  }
-  .typing {
-    font-style: italic;
-    color: #888;
-  }
-</style>
 </head>
 <body>
-<h1>🏥 My Health Dashboard</h1>
-<p>Interactua amb l'assistent de salut directament des d'aquí.</p>
-<div id="chat-widget">
-  <div id="chat-header">Chat Assistència</div>
-  <div id="chat-messages"></div>
-  <div id="chat-input">
-    <input type="text" id="message" placeholder="Escriu la teva pregunta...">
-    <button onclick="sendMessage()">Enviar</button>
-  </div>
-</div>
-<script>
-const chatMessages = document.getElementById("chat-messages");
-const input = document.getElementById("message");
-async function sendMessage() {
-  const msg = input.value.trim();
-  if (!msg) return;
-  appendMessage(msg, "user");
-  input.value = "";
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-  // Mostrar "escrivint..."
-  const typingEl = appendMessage("📝 Escrivint...", "bot", true);
-  try {
-    const res = await fetch("/chat", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        message: msg,
-        system_message: "Ets un assistent de salut. Respon en català de manera concisa i útil."
-      })
-    });
-    const data = await res.json();
-    // Remplaza el mensaje de typing
-    typingEl.textContent = data.response;
-    typingEl.classList.remove("typing");
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-  } catch (err) {
-    typingEl.textContent = "⚠️ Error al connectar amb el servidor";
-    typingEl.classList.remove("typing");
-  }
-}
-function appendMessage(msg, sender, typing=false) {
-  const div = document.createElement("div");
-  div.className = `message ${sender}`;
-  if(typing) div.classList.add("typing");
-  div.textContent = msg;
-  chatMessages.appendChild(div);
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-  return div;
-}
-// Enviar con Enter
-input.addEventListener("keydown", function(e){
-  if(e.key === "Enter") sendMessage();
-});
-// Permitir plegar el chat
-const chatWidget = document.getElementById("chat-widget");
-const chatHeader = document.getElementById("chat-header");
-chatHeader.addEventListener("click", () => {
-  chatWidget.classList.toggle("collapsed");
-  if(chatWidget.classList.contains("collapsed")){
-    chatMessages.style.display = "none";
-    document.getElementById("chat-input").style.display = "none";
-    chatWidget.style.height = "50px";
-  } else {
-    chatMessages.style.display = "flex";
-    document.getElementById("chat-input").style.display = "flex";
-    chatWidget.style.height = "450px";
-  }
-});
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ca">
 <head>
+    <meta charset="UTF-8">
+    <title>My Health Dashboard</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        #chat-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 300px;
+            max-height: 400px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            background: #f9f9f9;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        #chat-messages {
+            flex: 1;
+            padding: 10px;
+            overflow-y: auto;
+        }
+        .message { margin-bottom: 10px; }
+        .user { font-weight: bold; color: #007bff; }
+        .bot { font-weight: bold; color: #28a745; }
+        #chat-input {
+            display: flex;
+            border-top: 1px solid #ccc;
+        }
+        #chat-input input {
+            flex: 1;
+            padding: 10px;
+            border: none;
+            border-radius: 0 0 0 8px;
+        }
+        #chat-input button {
+            padding: 10px;
+            border: none;
+            background: #007bff;
+            color: white;
+            cursor: pointer;
+            border-radius: 0 0 8px 0;
+        }
+        #chat-input button:hover { background: #0056b3; }
+    </style>
 </head>
 <body>
+    <h1>Benvingut a My Health Dashboard</h1>
+    <p>Aquesta és la interfície de prova amb chat flotant integrat.</p>
+    <div id="chat-container">
+        <div id="chat-messages"></div>
+        <div id="chat-input">
+            <input type="text" id="message" placeholder="Escriu la teva pregunta...">
+            <button onclick="sendMessage()">Enviar</button>
+        </div>
+    </div>
+    <script>
+        const messagesDiv = document.getElementById("chat-messages");
+        const input = document.getElementById("message");
+        async function sendMessage() {
+            const message = input.value.trim();
+            if (!message) return;
+            // Mostrar mensaje del usuario
+            const userMsg = document.createElement("div");
+            userMsg.classList.add("message", "user");
+            userMsg.innerText = "Tu: " + message;
+            messagesDiv.appendChild(userMsg);
+            // Limpiar input
+            input.value = "";
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            // Enviar al backend
+            try {
+                const response = await fetch("/chat", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ message: message })
+                });
+                const data = await response.json();
+                // Mostrar respuesta del bot
+                const botMsg = document.createElement("div");
+                botMsg.classList.add("message", "bot");
+                botMsg.innerText = "Bot: " + data.response;
+                messagesDiv.appendChild(botMsg);
+                messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            } catch (err) {
+                console.error("Error enviant missatge:", err);
+            }
+        }
+        // Permitir enviar con Enter
+        input.addEventListener("keypress", function(e) {
+            if (e.key === "Enter") sendMessage();
+        });
+    </script>
 </body>
 </html>