Spaces:
Sleeping
Sleeping
Update templates/chat-bot.html
Browse files- templates/chat-bot.html +85 -5
templates/chat-bot.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>FarmaBot - Endocaser</title>
|
| 7 |
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
|
@@ -309,6 +309,31 @@
|
|
| 309 |
color: var(--text-secondary);
|
| 310 |
line-height: 1.5;
|
| 311 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 312 |
.quick-actions {
|
| 313 |
display: flex;
|
| 314 |
flex-wrap: wrap;
|
|
@@ -621,7 +646,7 @@
|
|
| 621 |
<div class="header-logo"><i class="fas fa-pills"></i></div>
|
| 622 |
<div class="header-info">
|
| 623 |
<h2>FarmaBot</h2>
|
| 624 |
-
<span>Asistente de farmacolog铆a dental - Endocaser</span>
|
| 625 |
</div>
|
| 626 |
<div class="header-buttons">
|
| 627 |
</div>
|
|
@@ -631,8 +656,12 @@
|
|
| 631 |
<div class="welcome-card">
|
| 632 |
<div class="icon"><i class="fas fa-capsules"></i></div>
|
| 633 |
<h3>FarmaBot</h3>
|
| 634 |
-
<p>Tu asistente de farmacolog铆a dental. Consulta interacciones, dosis, protocolos de medicaci贸n y m谩s.</p>
|
| 635 |
-
<div class="
|
|
|
|
|
|
|
|
|
|
|
|
|
| 636 |
<button class="quick-action" onclick="sendQuickAction(this)">Interacciones medicamentosas</button>
|
| 637 |
<button class="quick-action" onclick="sendQuickAction(this)">Dosis de amoxicilina</button>
|
| 638 |
<button class="quick-action" onclick="sendQuickAction(this)">Analgesia post-endo</button>
|
|
@@ -642,7 +671,7 @@
|
|
| 642 |
</div>
|
| 643 |
|
| 644 |
<div class="chat-input">
|
| 645 |
-
<textarea id="user-input" placeholder="Escribe tu consulta farmacol贸gica..." rows="1" disabled></textarea>
|
| 646 |
<button id="send-button" class="send-btn" disabled><i class="fas fa-paper-plane"></i></button>
|
| 647 |
</div>
|
| 648 |
</div>
|
|
@@ -676,6 +705,57 @@
|
|
| 676 |
breaks: true,
|
| 677 |
gfm: true
|
| 678 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 679 |
function sendQuickAction(btn) {
|
| 680 |
const input = document.getElementById('user-input');
|
| 681 |
input.value = btn.textContent;
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>FarmaBot - Endocaser | Bilingual Dental Pharmacology Assistant</title>
|
| 7 |
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
|
|
|
| 309 |
color: var(--text-secondary);
|
| 310 |
line-height: 1.5;
|
| 311 |
}
|
| 312 |
+
.language-selector {
|
| 313 |
+
display: flex;
|
| 314 |
+
gap: 8px;
|
| 315 |
+
justify-content: center;
|
| 316 |
+
margin-top: 16px;
|
| 317 |
+
}
|
| 318 |
+
.lang-btn {
|
| 319 |
+
padding: 8px 16px;
|
| 320 |
+
border: 1px solid var(--primary);
|
| 321 |
+
background: transparent;
|
| 322 |
+
color: var(--primary);
|
| 323 |
+
border-radius: 20px;
|
| 324 |
+
cursor: pointer;
|
| 325 |
+
font-weight: 500;
|
| 326 |
+
font-size: 12px;
|
| 327 |
+
transition: all 0.2s;
|
| 328 |
+
}
|
| 329 |
+
.lang-btn.active {
|
| 330 |
+
background: var(--primary);
|
| 331 |
+
color: #fff;
|
| 332 |
+
}
|
| 333 |
+
.lang-btn:hover {
|
| 334 |
+
background: var(--primary);
|
| 335 |
+
color: #fff;
|
| 336 |
+
}
|
| 337 |
.quick-actions {
|
| 338 |
display: flex;
|
| 339 |
flex-wrap: wrap;
|
|
|
|
| 646 |
<div class="header-logo"><i class="fas fa-pills"></i></div>
|
| 647 |
<div class="header-info">
|
| 648 |
<h2>FarmaBot</h2>
|
| 649 |
+
<span id="header-subtitle">Asistente de farmacolog铆a dental - Endocaser</span>
|
| 650 |
</div>
|
| 651 |
<div class="header-buttons">
|
| 652 |
</div>
|
|
|
|
| 656 |
<div class="welcome-card">
|
| 657 |
<div class="icon"><i class="fas fa-capsules"></i></div>
|
| 658 |
<h3>FarmaBot</h3>
|
| 659 |
+
<p id="welcome-text">Tu asistente de farmacolog铆a dental. Consulta interacciones, dosis, protocolos de medicaci贸n y m谩s.</p>
|
| 660 |
+
<div class="language-selector">
|
| 661 |
+
<button class="lang-btn active" id="lang-es" onclick="setLanguage('es')">Espa帽ol</button>
|
| 662 |
+
<button class="lang-btn" id="lang-en" onclick="setLanguage('en')">English</button>
|
| 663 |
+
</div>
|
| 664 |
+
<div class="quick-actions" id="quick-actions-container">
|
| 665 |
<button class="quick-action" onclick="sendQuickAction(this)">Interacciones medicamentosas</button>
|
| 666 |
<button class="quick-action" onclick="sendQuickAction(this)">Dosis de amoxicilina</button>
|
| 667 |
<button class="quick-action" onclick="sendQuickAction(this)">Analgesia post-endo</button>
|
|
|
|
| 671 |
</div>
|
| 672 |
|
| 673 |
<div class="chat-input">
|
| 674 |
+
<textarea id="user-input" placeholder="Escribe tu consulta farmacol贸gica... / Write your pharmacological query..." rows="1" disabled></textarea>
|
| 675 |
<button id="send-button" class="send-btn" disabled><i class="fas fa-paper-plane"></i></button>
|
| 676 |
</div>
|
| 677 |
</div>
|
|
|
|
| 705 |
breaks: true,
|
| 706 |
gfm: true
|
| 707 |
});
|
| 708 |
+
|
| 709 |
+
// Traducci贸nes para soporte biling眉e
|
| 710 |
+
const translations = {
|
| 711 |
+
es: {
|
| 712 |
+
welcomeText: 'Tu asistente de farmacolog铆a dental. Consulta interacciones, dosis, protocolos de medicaci贸n y m谩s.',
|
| 713 |
+
quickActions: [
|
| 714 |
+
'Interacciones medicamentosas',
|
| 715 |
+
'Dosis de amoxicilina',
|
| 716 |
+
'Analgesia post-endo',
|
| 717 |
+
'Paciente al茅rgico a penicilina'
|
| 718 |
+
],
|
| 719 |
+
headerSubtitle: 'Asistente de farmacolog铆a dental - Endocaser',
|
| 720 |
+
placeholder: 'Escribe tu consulta farmacol贸gica...'
|
| 721 |
+
},
|
| 722 |
+
en: {
|
| 723 |
+
welcomeText: 'Your dental pharmacology assistant. Consult drug interactions, dosages, medication protocols and more.',
|
| 724 |
+
quickActions: [
|
| 725 |
+
'Drug interactions',
|
| 726 |
+
'Amoxicillin dosage',
|
| 727 |
+
'Post-endo analgesia',
|
| 728 |
+
'Penicillin-allergic patient'
|
| 729 |
+
],
|
| 730 |
+
headerSubtitle: 'Dental Pharmacology Assistant - Endocaser',
|
| 731 |
+
placeholder: 'Write your pharmacological query...'
|
| 732 |
+
}
|
| 733 |
+
};
|
| 734 |
+
|
| 735 |
+
let currentLanguage = 'es';
|
| 736 |
+
|
| 737 |
+
function setLanguage(lang) {
|
| 738 |
+
currentLanguage = lang;
|
| 739 |
+
const t = translations[lang];
|
| 740 |
+
|
| 741 |
+
// Actualizar UI
|
| 742 |
+
document.getElementById('welcome-text').textContent = t.welcomeText;
|
| 743 |
+
document.getElementById('header-subtitle').textContent = t.headerSubtitle;
|
| 744 |
+
document.getElementById('user-input').placeholder = t.placeholder;
|
| 745 |
+
|
| 746 |
+
// Actualizar botones de acci贸n r谩pida
|
| 747 |
+
const quickActionButtons = document.querySelectorAll('#quick-actions-container .quick-action');
|
| 748 |
+
quickActionButtons.forEach((btn, index) => {
|
| 749 |
+
if (index < t.quickActions.length) {
|
| 750 |
+
btn.textContent = t.quickActions[index];
|
| 751 |
+
}
|
| 752 |
+
});
|
| 753 |
+
|
| 754 |
+
// Actualizar botones de idioma
|
| 755 |
+
document.getElementById('lang-es').classList.toggle('active', lang === 'es');
|
| 756 |
+
document.getElementById('lang-en').classList.toggle('active', lang === 'en');
|
| 757 |
+
}
|
| 758 |
+
|
| 759 |
function sendQuickAction(btn) {
|
| 760 |
const input = document.getElementById('user-input');
|
| 761 |
input.value = btn.textContent;
|