clinic-connect-widget 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +119 -119
- package/dist/clinic-widget.es.js +344 -344
- package/dist/clinic-widget.umd.js +1 -1
- package/package.json +32 -31
package/dist/clinic-widget.es.js
CHANGED
|
@@ -105,354 +105,354 @@ const CONFIG = {
|
|
|
105
105
|
LIVEKIT_URL: "wss://livekit.longvan.vn"
|
|
106
106
|
};
|
|
107
107
|
const styles = ':host{--td-primary: #0e65f1;--td-primary-hover: #0b50c0;--td-bg-light: #ffffff;--td-bg-dark: #1a202c;--td-text-main: #0d131c;--td-text-sub: #49699c;--td-border: #e7ecf4;--td-success: #22c55e;--td-danger: #ef4444;--font-family: "Inter", system-ui, -apple-system, sans-serif;--z-index: 9999;font-family:var(--font-family);color:var(--td-text-main)}*{box-sizing:border-box;margin:0;padding:0}.hidden{display:none!important}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr}.td-widget-fab{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:12px;z-index:var(--z-index);cursor:pointer;font-family:var(--font-family)}.td-fab-card{background:var(--td-bg-light);border:1px solid var(--td-border);border-radius:12px;box-shadow:0 8px 30px #0000001f;display:flex;align-items:center;padding:6px 16px 6px 6px;transition:transform .2s ease,box-shadow .2s ease;max-width:320px;position:relative;overflow:hidden}.td-fab-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px #00000026}.td-avatar-container{width:64px;height:64px;border-radius:8px;overflow:hidden;position:relative;flex-shrink:0}.td-avatar{width:100%;height:100%;background-size:cover;background-position:center}.td-status-dot{position:absolute;bottom:4px;right:4px;width:14px;height:14px;background:var(--td-success);border:2px solid #fff;border-radius:50%}.td-info{margin-left:12px;display:flex;flex-direction:column}.td-brand{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--td-primary);letter-spacing:.05em}.td-cta{font-size:15px;font-weight:700;color:var(--td-text-main);margin-top:2px}.td-sub{font-size:12px;color:var(--td-text-sub);margin-top:2px}.td-close-fab{position:absolute;top:4px;right:4px;opacity:0;cursor:pointer;background:none;border:none;color:#94a3b8;transition:opacity .2s;padding:4px}.td-fab-card:hover .td-close-fab{opacity:1}.td-widget-expanded{position:fixed;bottom:100px;right:24px;width:380px;max-height:80vh;background:var(--td-bg-light);border-radius:12px;box-shadow:0 25px 50px -12px #00000040;border:1px solid var(--td-border);display:flex;flex-direction:column;overflow:hidden;z-index:var(--z-index);animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.td-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--td-border)}.td-header-title{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px}.td-icon-box{width:32px;height:32px;background:#0e65f11a;color:var(--td-primary);border-radius:8px;display:flex;align-items:center;justify-content:center}.td-close-btn{background:transparent;border:none;cursor:pointer;color:#64748b;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center}.td-close-btn:hover{background:#f1f5f9}.td-content{flex:1;overflow-y:auto;padding:0}.td-doctor-profile{display:flex;flex-direction:column;align-items:center;padding:32px 24px 24px}.td-online-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:#f0fdf4;border:1px solid #dcfce7;border-radius:999px}.td-pulse{width:8px;height:8px;background:var(--td-success);border-radius:50%}.td-badge-text{font-size:12px;font-weight:600;color:#15803d;text-transform:uppercase}.td-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px 24px}.td-trust-item{background:#f8f9fc;border:1px solid var(--td-border);border-radius:12px;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.td-trust-title{font-size:12px;font-weight:700}.td-actions{padding:0 24px 24px;display:flex;flex-direction:column;gap:12px}.td-btn{width:100%;height:48px;border-radius:8px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border:none}.td-btn-primary{background:var(--td-primary);color:#fff;box-shadow:0 10px 15px -3px #0e65f133}.td-btn-primary:hover{background:var(--td-primary-hover)}.td-btn-outline{background:transparent;border:1px solid var(--td-border);color:var(--td-text-main);font-size:14px}.td-btn-outline:hover{background:#f8f9fc}.td-footer{padding:12px;text-align:center;background:#f8f9fc;border-top:1px solid var(--td-border);font-size:12px;color:var(--td-text-sub)}.td-consultation-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;max-width:1200px;max-height:800px;background:var(--td-bg-light);border-radius:16px;box-shadow:0 25px 50px -12px #00000080;border:1px solid var(--td-border);display:flex;overflow:hidden;z-index:var(--z-index);animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}.td-video-panel{flex:1;background:#000;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.td-main-video{width:100%;height:100%;background-size:cover;background-position:center}.td-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,rgba(0,0,0,.3),transparent,rgba(0,0,0,.6))}.td-video-header{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:10}.td-badge-glass{background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:500}.td-pip{position:absolute;top:24px;right:24px;width:160px;aspect-ratio:16/9;background:#333;border-radius:8px;border:2px solid rgba(255,255,255,.2);overflow:hidden;z-index:20;background-size:cover;background-position:center;box-shadow:0 4px 6px #0000004d}.td-pip-label{position:absolute;bottom:4px;left:4px;background:#0009;color:#fff;font-size:10px;padding:2px 6px;border-radius:4px}.td-controls{position:absolute;bottom:32px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px;z-index:20}.td-ctrl-btn{width:48px;height:48px;border-radius:50%;background:#fff3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.td-ctrl-btn:hover{background:#fff;color:var(--td-primary)}.td-ctrl-end{height:48px;padding:0 24px;border-radius:24px;background:var(--td-danger);color:#fff;display:flex;align-items:center;gap:8px;font-weight:600;border:none;cursor:pointer}.td-ctrl-end:hover{background:#dc2626}.td-chat-panel{width:400px;background:var(--td-bg-light);border-left:1px solid var(--td-border);display:flex;flex-direction:column}.td-chat-header{padding:16px;border-bottom:1px solid var(--td-border)}.td-chat-doc-info{display:flex;gap:12px;align-items:center;margin-bottom:12px}.td-chat-avatar{width:48px;height:48px;border-radius:50%;background-size:cover;background-position:center}.td-chat-timer{background:#f8f9fc;padding:8px 12px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}.td-timer-val{font-family:monospace;font-weight:700;font-size:16px}.td-chat-messages{flex:1;overflow-y:auto;padding:16px;background:#f8f9fc;display:flex;flex-direction:column;gap:16px}.td-msg-system{text-align:center;font-size:12px;color:var(--td-text-sub);background:#e2e8f0;padding:4px 12px;border-radius:12px;align-self:center;max-width:90%}.td-msg-row{display:flex;gap:8px}.td-msg-row.own{flex-direction:row-reverse}.td-msg-bubble{padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;max-width:85%}.td-msg-row.doctor .td-msg-bubble{background:#fff;border:1px solid var(--td-border);border-top-left-radius:2px}.td-msg-row.own .td-msg-bubble{background:#e0f2fe;color:var(--td-text-main);border:1px solid #bae6fd;border-top-right-radius:2px}.td-msg-time{font-size:10px;color:var(--td-text-sub);margin-top:2px}.td-chat-input-area{padding:16px;border-top:1px solid var(--td-border);background:var(--td-bg-light)}.td-input-wrapper{display:flex;gap:8px;align-items:flex-end}.td-chat-input{flex:1;border:1px solid var(--td-border);border-radius:8px;padding:10px;font-family:inherit;font-size:14px;resize:none;height:48px}.td-send-btn{width:48px;height:48px;background:var(--td-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}.td-send-btn:hover{background:var(--td-primary-hover)}@media (max-width: 768px){.td-consultation-modal{width:100vw;height:100vh;border-radius:0;flex-direction:column}.td-video-panel{height:40vh}.td-chat-panel{width:100%;flex:1}}.td-form-container{display:flex;flex-direction:column;height:100%;padding:0 24px}.td-form-page-header{padding:24px 0 16px}.td-form-title{font-size:24px;font-weight:700;color:var(--td-text-main);margin-bottom:8px}.td-form-desc{font-size:14px;color:var(--td-text-sub);line-height:normal}.td-form{display:flex;flex-direction:column;gap:20px;padding-bottom:24px}.td-input-group{display:flex;flex-direction:column;gap:8px}.td-label{font-size:14px;font-weight:500;color:var(--td-text-main)}.td-input{width:100%;height:48px;padding:0 16px;border-radius:8px;border:1px solid var(--td-border);background:#f8f9fc;font-family:inherit;font-size:16px;color:var(--td-text-main);transition:all .2s}.td-input:focus{outline:none;border-color:var(--td-primary);box-shadow:0 0 0 2px #0e65f133}.td-textarea{width:100%;min-height:100px;padding:16px;border-radius:8px;border:1px solid var(--td-border);background:#f8f9fc;font-family:inherit;font-size:16px;color:var(--td-text-main);resize:none}.td-textarea:focus{outline:none;border-color:var(--td-primary)}.td-chips-group{display:flex;flex-wrap:wrap;gap:8px}.td-chip{padding:8px 16px;border-radius:99px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--td-border);background:#fff;color:var(--td-text-sub);transition:all .2s}.td-chip:hover{border-color:var(--td-primary);color:var(--td-primary);background:#0e65f10d}.td-chip.active{border-color:var(--td-primary);background:#0e65f11a;color:var(--td-primary);display:flex;align-items:center;gap:6px}.td-secure-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--td-text-sub);opacity:.8;margin-top:8px}.td-summary-container{display:flex;flex-direction:column;height:100%}.td-success-header{display:flex;flex-direction:column;align-items:center;padding:32px 24px;text-align:center}.td-success-icon{width:80px;height:80px;background:#0e65f11a;color:var(--td-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.td-summary-title{font-size:24px;font-weight:700;margin-bottom:8px}.td-summary-desc{font-size:14px;color:var(--td-text-sub);max-width:360px;margin:0 auto}.td-summary-card{margin:0 24px;padding:16px;border-radius:12px;border:1px solid var(--td-border);background:#f8f9fc;display:flex;align-items:center;gap:16px}.td-summary-details{padding:8px 24px}.td-detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--td-border);font-size:14px}.td-note-box{margin:16px 24px;padding:16px;background:#0e65f10d;border:1px solid rgba(14,101,241,.1);border-radius:8px}.td-note-title{font-size:14px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}.td-grid-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}';
|
|
108
|
-
const collapsedHtml = `<div class="td-widget-fab" id="td-widget-fab"
|
|
109
|
-
<div class="td-fab-card"
|
|
110
|
-
<button class="td-close-fab" id="td-fab-close"
|
|
111
|
-
<span class="material-symbols-outlined" style="font-size: 16px;">close</span
|
|
112
|
-
</button
|
|
113
|
-
<div class="td-avatar-container"
|
|
114
|
-
<div class="td-avatar" style="background-image: url('{{doctorAvatar}}');"></div
|
|
115
|
-
<div class="td-status-dot" style="background: #22c55e;"></div
|
|
116
|
-
</div
|
|
117
|
-
<div class="td-info"
|
|
118
|
-
<div class="td-brand"
|
|
119
|
-
<span class="material-symbols-outlined" style="font-size: 14px;">local_hospital</span
|
|
120
|
-
<span>Clinic</span
|
|
121
|
-
</div
|
|
122
|
-
<h3 class="td-cta">Khám online ngay</h3
|
|
123
|
-
<p class="td-sub">Bác sĩ đang Online</p
|
|
124
|
-
</div
|
|
125
|
-
</div
|
|
108
|
+
const collapsedHtml = `<div class="td-widget-fab" id="td-widget-fab">\r
|
|
109
|
+
<div class="td-fab-card">\r
|
|
110
|
+
<button class="td-close-fab" id="td-fab-close">\r
|
|
111
|
+
<span class="material-symbols-outlined" style="font-size: 16px;">close</span>\r
|
|
112
|
+
</button>\r
|
|
113
|
+
<div class="td-avatar-container">\r
|
|
114
|
+
<div class="td-avatar" style="background-image: url('{{doctorAvatar}}');"></div>\r
|
|
115
|
+
<div class="td-status-dot" style="background: #22c55e;"></div>\r
|
|
116
|
+
</div>\r
|
|
117
|
+
<div class="td-info">\r
|
|
118
|
+
<div class="td-brand">\r
|
|
119
|
+
<span class="material-symbols-outlined" style="font-size: 14px;">local_hospital</span>\r
|
|
120
|
+
<span>Clinic</span>\r
|
|
121
|
+
</div>\r
|
|
122
|
+
<h3 class="td-cta">Khám online ngay</h3>\r
|
|
123
|
+
<p class="td-sub">Bác sĩ đang Online</p>\r
|
|
124
|
+
</div>\r
|
|
125
|
+
</div>\r
|
|
126
126
|
</div>`;
|
|
127
|
-
const expandedHtml = `<div class="td-widget-expanded" id="td-widget-expanded"
|
|
128
|
-
<header class="td-header"
|
|
129
|
-
<div class="td-header-title"
|
|
130
|
-
<div class="td-icon-box"
|
|
131
|
-
<span class="material-symbols-outlined">medical_services</span
|
|
132
|
-
</div
|
|
133
|
-
<span>Clinic</span
|
|
134
|
-
</div
|
|
135
|
-
<button class="td-close-btn" id="td-expanded-close"
|
|
136
|
-
<span class="material-symbols-outlined">close</span
|
|
137
|
-
</button
|
|
138
|
-
</header
|
|
139
|
-
|
|
140
|
-
<div class="td-content"
|
|
141
|
-
<div class="td-doctor-profile"
|
|
142
|
-
<div class="td-doctor-avatar" style="background-image: url('{{doctorAvatar}}');"
|
|
143
|
-
<div class="td-status-dot"
|
|
144
|
-
style="width: 20px; height: 20px; border-width: 3px; bottom: 4px; right: 4px; background: #22c55e;"
|
|
145
|
-
</div
|
|
146
|
-
</div
|
|
147
|
-
<h1 class="td-doctor-name">{{doctorName}}</h1
|
|
148
|
-
<p class="td-doctor-specialty">{{doctorSpecialty}}</p
|
|
149
|
-
|
|
150
|
-
<div class="td-online-badge"
|
|
151
|
-
<span class="td-pulse"></span
|
|
152
|
-
<span class="td-badge-text">Đang trực tuyến</span
|
|
153
|
-
</div
|
|
154
|
-
</div
|
|
155
|
-
|
|
156
|
-
<div class="td-trust-grid"
|
|
157
|
-
<div class="td-trust-item"
|
|
158
|
-
<div class="td-icon-box"
|
|
159
|
-
<span class="material-symbols-outlined">verified</span
|
|
160
|
-
</div
|
|
161
|
-
<h3 class="td-trust-title">Bác sĩ được xác thực</h3
|
|
162
|
-
</div
|
|
163
|
-
<div class="td-trust-item"
|
|
164
|
-
<div class="td-icon-box"
|
|
165
|
-
<span class="material-symbols-outlined">security</span
|
|
166
|
-
</div
|
|
167
|
-
<h3 class="td-trust-title">Bảo mật thông tin</h3
|
|
168
|
-
</div
|
|
169
|
-
</div
|
|
170
|
-
|
|
171
|
-
<div class="td-actions"
|
|
172
|
-
<button class="td-btn td-btn-primary" id="td-btn-consult"
|
|
173
|
-
<span class="material-symbols-outlined" style="margin-right: 8px;">videocam</span
|
|
174
|
-
Bắt đầu tư vấn ngay
|
|
175
|
-
</button
|
|
176
|
-
<button class="td-btn td-btn-outline" id="td-btn-schedule"
|
|
177
|
-
Đặt lịch hẹn sau
|
|
178
|
-
</button
|
|
179
|
-
</div
|
|
180
|
-
</div
|
|
181
|
-
|
|
182
|
-
<div class="td-footer"
|
|
183
|
-
Powered by <b>Clinic Connect</b
|
|
184
|
-
</div
|
|
127
|
+
const expandedHtml = `<div class="td-widget-expanded" id="td-widget-expanded">\r
|
|
128
|
+
<header class="td-header">\r
|
|
129
|
+
<div class="td-header-title">\r
|
|
130
|
+
<div class="td-icon-box">\r
|
|
131
|
+
<span class="material-symbols-outlined">medical_services</span>\r
|
|
132
|
+
</div>\r
|
|
133
|
+
<span>Clinic</span>\r
|
|
134
|
+
</div>\r
|
|
135
|
+
<button class="td-close-btn" id="td-expanded-close">\r
|
|
136
|
+
<span class="material-symbols-outlined">close</span>\r
|
|
137
|
+
</button>\r
|
|
138
|
+
</header>\r
|
|
139
|
+
\r
|
|
140
|
+
<div class="td-content">\r
|
|
141
|
+
<div class="td-doctor-profile">\r
|
|
142
|
+
<div class="td-doctor-avatar" style="background-image: url('{{doctorAvatar}}');">\r
|
|
143
|
+
<div class="td-status-dot"\r
|
|
144
|
+
style="width: 20px; height: 20px; border-width: 3px; bottom: 4px; right: 4px; background: #22c55e;">\r
|
|
145
|
+
</div>\r
|
|
146
|
+
</div>\r
|
|
147
|
+
<h1 class="td-doctor-name">{{doctorName}}</h1>\r
|
|
148
|
+
<p class="td-doctor-specialty">{{doctorSpecialty}}</p>\r
|
|
149
|
+
\r
|
|
150
|
+
<div class="td-online-badge">\r
|
|
151
|
+
<span class="td-pulse"></span>\r
|
|
152
|
+
<span class="td-badge-text">Đang trực tuyến</span>\r
|
|
153
|
+
</div>\r
|
|
154
|
+
</div>\r
|
|
155
|
+
\r
|
|
156
|
+
<div class="td-trust-grid">\r
|
|
157
|
+
<div class="td-trust-item">\r
|
|
158
|
+
<div class="td-icon-box">\r
|
|
159
|
+
<span class="material-symbols-outlined">verified</span>\r
|
|
160
|
+
</div>\r
|
|
161
|
+
<h3 class="td-trust-title">Bác sĩ được xác thực</h3>\r
|
|
162
|
+
</div>\r
|
|
163
|
+
<div class="td-trust-item">\r
|
|
164
|
+
<div class="td-icon-box">\r
|
|
165
|
+
<span class="material-symbols-outlined">security</span>\r
|
|
166
|
+
</div>\r
|
|
167
|
+
<h3 class="td-trust-title">Bảo mật thông tin</h3>\r
|
|
168
|
+
</div>\r
|
|
169
|
+
</div>\r
|
|
170
|
+
\r
|
|
171
|
+
<div class="td-actions">\r
|
|
172
|
+
<button class="td-btn td-btn-primary" id="td-btn-consult">\r
|
|
173
|
+
<span class="material-symbols-outlined" style="margin-right: 8px;">videocam</span>\r
|
|
174
|
+
Bắt đầu tư vấn ngay\r
|
|
175
|
+
</button>\r
|
|
176
|
+
<button class="td-btn td-btn-outline" id="td-btn-schedule">\r
|
|
177
|
+
Đặt lịch hẹn sau\r
|
|
178
|
+
</button>\r
|
|
179
|
+
</div>\r
|
|
180
|
+
</div>\r
|
|
181
|
+
\r
|
|
182
|
+
<div class="td-footer">\r
|
|
183
|
+
Powered by <b>Clinic Connect</b>\r
|
|
184
|
+
</div>\r
|
|
185
185
|
</div>`;
|
|
186
|
-
const consultationHtml = `<div class="td-consultation-modal"
|
|
187
|
-
<!-- Left: Video Panel
|
|
188
|
-
<div class="td-video-panel"
|
|
189
|
-
<div class="td-main-video"
|
|
190
|
-
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC54B68xwAiOWZFQNVMIVKNBTKwo-nPCTsEgkaekhx9PbGDRCwcy18cFeALhbiaeOyaIS88c9RZst2sRWUyKTeSif-HqEfgU5Aoht-mk6Tjtuts2M4XmoMaxNSAi7qjKoQRYx61I4MolGfjCkxRN0lW5rlSlQfMwY0T8K1440SLM9hW_4u0N1Vg6kQTcSUitouGRmWktBHr-yH5QTu78AC1IOZLd5-HyWw0NUb6uESPpNZoZHoIEKIjFhsGBnCRmzHCUP9Ex6mP0XvW');"
|
|
191
|
-
</div
|
|
192
|
-
<div class="td-overlay"></div
|
|
193
|
-
|
|
194
|
-
<div class="td-video-header"
|
|
195
|
-
<div class="td-badge-glass"
|
|
196
|
-
<span class="material-symbols-outlined"
|
|
197
|
-
style="color: #ef4444; font-size: 16px;">radio_button_checked</span
|
|
198
|
-
REC
|
|
199
|
-
</div
|
|
200
|
-
<div class="td-badge-glass"
|
|
201
|
-
<span class="material-symbols-outlined" style="font-size: 16px;">signal_cellular_alt</span
|
|
202
|
-
HD Quality
|
|
203
|
-
</div
|
|
204
|
-
</div
|
|
205
|
-
|
|
206
|
-
<div class="td-pip"
|
|
207
|
-
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDnITTxxwp-J6t7xkVqnh6C9NPQS8i_k6_4F4IfzTfDM_ZgdX2HRvc947W1BU0LJYKOAA8qtHglPXseoj0Vk4sLfoRnKDOz88bUmK_ytSEvP_oYeeDKGRCfcEa6ugQO6aKR2l9W8glr63dswTODHe4am5IB3FRknTxNnZ0XuDU0z1xzkDMGpspRrXWwdoi8j9teleBeRsmkCdSe8dVb0q1r5eS8YjQ-nzo5f3qBB2-Eo9zyegUSaOCXhuaqSmqpVyICmTLvoIppbKNo');"
|
|
208
|
-
<span class="td-pip-label">You</span
|
|
209
|
-
</div
|
|
210
|
-
|
|
211
|
-
<div class="td-controls"
|
|
212
|
-
<button class="td-ctrl-btn"
|
|
213
|
-
<span class="material-symbols-outlined">mic</span
|
|
214
|
-
</button
|
|
215
|
-
<button class="td-ctrl-btn"
|
|
216
|
-
<span class="material-symbols-outlined">videocam</span
|
|
217
|
-
</button
|
|
218
|
-
<button class="td-ctrl-end" id="td-consult-end"
|
|
219
|
-
<span class="material-symbols-outlined">call_end</span
|
|
220
|
-
Kết thúc
|
|
221
|
-
</button
|
|
222
|
-
<button class="td-ctrl-btn"
|
|
223
|
-
<span class="material-symbols-outlined">settings</span
|
|
224
|
-
</button
|
|
225
|
-
</div
|
|
226
|
-
</div
|
|
227
|
-
|
|
228
|
-
<!-- Right: Chat Panel
|
|
229
|
-
<div class="td-chat-panel"
|
|
230
|
-
<div class="td-chat-header"
|
|
231
|
-
<div class="td-chat-doc-info"
|
|
232
|
-
<div class="td-chat-avatar" style="background-image: url('{{doctorAvatar}}');"></div
|
|
233
|
-
<div
|
|
234
|
-
<h3 style="font-size: 16px; font-weight: 700;">{{doctorName}}</h3
|
|
235
|
-
<p style="font-size: 12px; color: var(--td-text-sub);">Online • Verified</p
|
|
236
|
-
</div
|
|
237
|
-
</div
|
|
238
|
-
<div class="td-chat-timer"
|
|
239
|
-
<div style="display: flex; align-items: center; gap: 4px; font-size: 12px;"
|
|
240
|
-
<span class="material-symbols-outlined"
|
|
241
|
-
style="font-size: 16px; color: var(--td-primary);">timer</span
|
|
242
|
-
SESSION
|
|
243
|
-
</div
|
|
244
|
-
<div class="td-timer-val">00:03:12</div
|
|
245
|
-
</div
|
|
246
|
-
</div
|
|
247
|
-
|
|
248
|
-
<div class="td-chat-messages"
|
|
249
|
-
<div class="td-msg-system"
|
|
250
|
-
Consultation started
|
|
251
|
-
</div
|
|
252
|
-
<div class="td-msg-row doctor"
|
|
253
|
-
<div class="td-msg-bubble"
|
|
254
|
-
Xin chào. Tôi có thể giúp gì cho bạn hôm nay
|
|
255
|
-
<div class="td-msg-time">14:01</div
|
|
256
|
-
</div
|
|
257
|
-
</div
|
|
258
|
-
<div class="td-msg-row own"
|
|
259
|
-
<div class="td-msg-bubble"
|
|
260
|
-
Chào bác sĩ, tôi bị đau đầu
|
|
261
|
-
<div class="td-msg-time">14:02</div
|
|
262
|
-
</div
|
|
263
|
-
</div
|
|
264
|
-
</div
|
|
265
|
-
|
|
266
|
-
<div class="td-chat-input-area"
|
|
267
|
-
<div class="td-input-wrapper"
|
|
268
|
-
<textarea class="td-chat-input" placeholder="Nhập tin nhắn..."></textarea
|
|
269
|
-
<button class="td-send-btn"
|
|
270
|
-
<span class="material-symbols-outlined">send</span
|
|
271
|
-
</button
|
|
272
|
-
</div
|
|
273
|
-
<div style="text-align: center; margin-top: 8px; font-size: 10px; color: var(--td-text-sub);"
|
|
274
|
-
<span class="material-symbols-outlined" style="font-size: 10px; vertical-align: middle;">lock</span
|
|
275
|
-
Mã hóa đầu cuối
|
|
276
|
-
</div
|
|
277
|
-
</div
|
|
278
|
-
</div
|
|
186
|
+
const consultationHtml = `<div class="td-consultation-modal">\r
|
|
187
|
+
<!-- Left: Video Panel -->\r
|
|
188
|
+
<div class="td-video-panel">\r
|
|
189
|
+
<div class="td-main-video"\r
|
|
190
|
+
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC54B68xwAiOWZFQNVMIVKNBTKwo-nPCTsEgkaekhx9PbGDRCwcy18cFeALhbiaeOyaIS88c9RZst2sRWUyKTeSif-HqEfgU5Aoht-mk6Tjtuts2M4XmoMaxNSAi7qjKoQRYx61I4MolGfjCkxRN0lW5rlSlQfMwY0T8K1440SLM9hW_4u0N1Vg6kQTcSUitouGRmWktBHr-yH5QTu78AC1IOZLd5-HyWw0NUb6uESPpNZoZHoIEKIjFhsGBnCRmzHCUP9Ex6mP0XvW');">\r
|
|
191
|
+
</div>\r
|
|
192
|
+
<div class="td-overlay"></div>\r
|
|
193
|
+
\r
|
|
194
|
+
<div class="td-video-header">\r
|
|
195
|
+
<div class="td-badge-glass">\r
|
|
196
|
+
<span class="material-symbols-outlined"\r
|
|
197
|
+
style="color: #ef4444; font-size: 16px;">radio_button_checked</span>\r
|
|
198
|
+
REC\r
|
|
199
|
+
</div>\r
|
|
200
|
+
<div class="td-badge-glass">\r
|
|
201
|
+
<span class="material-symbols-outlined" style="font-size: 16px;">signal_cellular_alt</span>\r
|
|
202
|
+
HD Quality\r
|
|
203
|
+
</div>\r
|
|
204
|
+
</div>\r
|
|
205
|
+
\r
|
|
206
|
+
<div class="td-pip"\r
|
|
207
|
+
style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDnITTxxwp-J6t7xkVqnh6C9NPQS8i_k6_4F4IfzTfDM_ZgdX2HRvc947W1BU0LJYKOAA8qtHglPXseoj0Vk4sLfoRnKDOz88bUmK_ytSEvP_oYeeDKGRCfcEa6ugQO6aKR2l9W8glr63dswTODHe4am5IB3FRknTxNnZ0XuDU0z1xzkDMGpspRrXWwdoi8j9teleBeRsmkCdSe8dVb0q1r5eS8YjQ-nzo5f3qBB2-Eo9zyegUSaOCXhuaqSmqpVyICmTLvoIppbKNo');">\r
|
|
208
|
+
<span class="td-pip-label">You</span>\r
|
|
209
|
+
</div>\r
|
|
210
|
+
\r
|
|
211
|
+
<div class="td-controls">\r
|
|
212
|
+
<button class="td-ctrl-btn">\r
|
|
213
|
+
<span class="material-symbols-outlined">mic</span>\r
|
|
214
|
+
</button>\r
|
|
215
|
+
<button class="td-ctrl-btn">\r
|
|
216
|
+
<span class="material-symbols-outlined">videocam</span>\r
|
|
217
|
+
</button>\r
|
|
218
|
+
<button class="td-ctrl-end" id="td-consult-end">\r
|
|
219
|
+
<span class="material-symbols-outlined">call_end</span>\r
|
|
220
|
+
Kết thúc\r
|
|
221
|
+
</button>\r
|
|
222
|
+
<button class="td-ctrl-btn">\r
|
|
223
|
+
<span class="material-symbols-outlined">settings</span>\r
|
|
224
|
+
</button>\r
|
|
225
|
+
</div>\r
|
|
226
|
+
</div>\r
|
|
227
|
+
\r
|
|
228
|
+
<!-- Right: Chat Panel -->\r
|
|
229
|
+
<div class="td-chat-panel">\r
|
|
230
|
+
<div class="td-chat-header">\r
|
|
231
|
+
<div class="td-chat-doc-info">\r
|
|
232
|
+
<div class="td-chat-avatar" style="background-image: url('{{doctorAvatar}}');"></div>\r
|
|
233
|
+
<div>\r
|
|
234
|
+
<h3 style="font-size: 16px; font-weight: 700;">{{doctorName}}</h3>\r
|
|
235
|
+
<p style="font-size: 12px; color: var(--td-text-sub);">Online • Verified</p>\r
|
|
236
|
+
</div>\r
|
|
237
|
+
</div>\r
|
|
238
|
+
<div class="td-chat-timer">\r
|
|
239
|
+
<div style="display: flex; align-items: center; gap: 4px; font-size: 12px;">\r
|
|
240
|
+
<span class="material-symbols-outlined"\r
|
|
241
|
+
style="font-size: 16px; color: var(--td-primary);">timer</span>\r
|
|
242
|
+
SESSION\r
|
|
243
|
+
</div>\r
|
|
244
|
+
<div class="td-timer-val">00:03:12</div>\r
|
|
245
|
+
</div>\r
|
|
246
|
+
</div>\r
|
|
247
|
+
\r
|
|
248
|
+
<div class="td-chat-messages">\r
|
|
249
|
+
<div class="td-msg-system">\r
|
|
250
|
+
Consultation started\r
|
|
251
|
+
</div>\r
|
|
252
|
+
<div class="td-msg-row doctor">\r
|
|
253
|
+
<div class="td-msg-bubble">\r
|
|
254
|
+
Xin chào. Tôi có thể giúp gì cho bạn hôm nay?\r
|
|
255
|
+
<div class="td-msg-time">14:01</div>\r
|
|
256
|
+
</div>\r
|
|
257
|
+
</div>\r
|
|
258
|
+
<div class="td-msg-row own">\r
|
|
259
|
+
<div class="td-msg-bubble">\r
|
|
260
|
+
Chào bác sĩ, tôi bị đau đầu...\r
|
|
261
|
+
<div class="td-msg-time">14:02</div>\r
|
|
262
|
+
</div>\r
|
|
263
|
+
</div>\r
|
|
264
|
+
</div>\r
|
|
265
|
+
\r
|
|
266
|
+
<div class="td-chat-input-area">\r
|
|
267
|
+
<div class="td-input-wrapper">\r
|
|
268
|
+
<textarea class="td-chat-input" placeholder="Nhập tin nhắn..."></textarea>\r
|
|
269
|
+
<button class="td-send-btn">\r
|
|
270
|
+
<span class="material-symbols-outlined">send</span>\r
|
|
271
|
+
</button>\r
|
|
272
|
+
</div>\r
|
|
273
|
+
<div style="text-align: center; margin-top: 8px; font-size: 10px; color: var(--td-text-sub);">\r
|
|
274
|
+
<span class="material-symbols-outlined" style="font-size: 10px; vertical-align: middle;">lock</span>\r
|
|
275
|
+
Mã hóa đầu cuối\r
|
|
276
|
+
</div>\r
|
|
277
|
+
</div>\r
|
|
278
|
+
</div>\r
|
|
279
279
|
</div>`;
|
|
280
|
-
const patientFormHtml = '<div class="td-widget-expanded" id="td-patient-form">\n <header class="td-header">\n <div class="td-header-title">\n <div class="td-icon-box">\n <span class="material-symbols-outlined">medical_services</span>\n </div>\n <span>Clinic</span>\n </div>\n <button class="td-close-btn" id="td-form-close">\n <span class="material-symbols-outlined">close</span>\n </button>\n </header>\n\n <div class="td-content">\n <div class="td-form-container">\n <div class="td-form-page-header">\n <h1 class="td-form-title">Kết nối với Bác sĩ</h1>\n <p class="td-form-desc">Vui lòng nhập thông tin để bắt đầu tư vấn trực tuyến.</p>\n </div>\n\n <form class="td-form" id="td-info-form">\n <div class="td-input-group">\n <label class="td-label">Họ và tên</label>\n <input type="text" class="td-input" name="name" placeholder="VD: Nguyễn Văn A" required />\n </div>\n\n <div class="td-input-group">\n <label class="td-label">Số điện thoại</label>\n <div style="position: relative;">\n <input type="tel" class="td-input" name="phone" placeholder="VD: 0912 345 678" required />\n <div\n style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--td-primary);">\n <span class="material-symbols-outlined" style="font-size: 20px;">smartphone</span>\n </div>\n </div>\n </div>\n\n <div class="td-input-group">\n <label class="td-label">Triệu chứng của bạn?</label>\n <div class="td-chips-group">\n <button type="button" class="td-chip active">Sốt <span class="material-symbols-outlined"\n style="font-size: 16px;">check</span></button>\n <button type="button" class="td-chip">Ho / Cảm cúm</button>\n <button type="button" class="td-chip">Đau đầu</button>\n <button type="button" class="td-chip">Đau bụng</button>\n </div>\n </div>\n\n <div class="td-input-group">\n <label class="td-label">Mô tả thêm <span style="color: var(--td-text-sub); font-weight: 400;">(Tùy\n chọn)</span></label>\n <textarea class="td-textarea" name="symptoms"\n placeholder="Bạn đang cảm thấy như thế nào?"></textarea>\n </div>\n\n <div style="margin-top: 8px;">\n <button type="submit" class="td-btn td-btn-primary" id="td-form-submit">\n Bắt đầu tư vấn\n <span class="material-symbols-outlined" style="margin-left: 8px;">arrow_forward</span>\n </button>\n </div>\n\n <div class="td-secure-note">\n <span class="material-symbols-outlined" style="font-size: 14px;">lock</span>\n Thông tin y tế được bảo mật 100%\n </div>\n </form>\n </div>\n </div>\n</div>';
|
|
281
|
-
const postConsultationHtml = `<div class="td-widget-expanded" id="td-summary-view"
|
|
282
|
-
<header class="td-header"
|
|
283
|
-
<h2 class="td-header-title" style="font-size: 16px;">Tổng kết tư vấn</h2
|
|
284
|
-
<button class="td-close-btn" id="td-summary-close"
|
|
285
|
-
<span class="material-symbols-outlined">close</span
|
|
286
|
-
</button
|
|
287
|
-
</header
|
|
288
|
-
|
|
289
|
-
<div class="td-content"
|
|
290
|
-
<div class="td-summary-container"
|
|
291
|
-
<div class="td-success-header"
|
|
292
|
-
<div class="td-success-icon"
|
|
293
|
-
<span class="material-symbols-outlined" style="font-size: 48px;">check_circle</span
|
|
294
|
-
</div
|
|
295
|
-
<h3 class="td-summary-title">Tư vấn Hoàn tất</h3
|
|
296
|
-
<p class="td-summary-desc">Cuộc hẹn đã được ghi nhận vào hồ sơ sức khỏe của bạn.</p
|
|
297
|
-
</div
|
|
298
|
-
|
|
299
|
-
<div class="td-summary-card"
|
|
300
|
-
<div class="td-chat-avatar"
|
|
301
|
-
style="background-image: url('{{doctorAvatar}}'); width: 56px; height: 56px;"></div
|
|
302
|
-
<div
|
|
303
|
-
<div style="font-weight: 700;">{{doctorName}}</div
|
|
304
|
-
<div style="color: var(--td-text-sub); font-size: 14px;">{{doctorSpecialty}}</div
|
|
305
|
-
</div
|
|
306
|
-
<div style="margin-left: auto; color: var(--td-primary);"
|
|
307
|
-
<span class="material-symbols-outlined">verified_user</span
|
|
308
|
-
</div
|
|
309
|
-
</div
|
|
310
|
-
|
|
311
|
-
<div class="td-summary-details"
|
|
312
|
-
<div class="td-detail-row"
|
|
313
|
-
<span style="color: var(--td-text-sub); display: flex; gap: 6px;"
|
|
314
|
-
<span class="material-symbols-outlined" style="font-size: 18px;">tag</span> Mã tư vấn
|
|
315
|
-
</span
|
|
316
|
-
<span style="font-weight: 600;">#TD-93821</span
|
|
317
|
-
</div
|
|
318
|
-
<div class="td-detail-row"
|
|
319
|
-
<span style="color: var(--td-text-sub); display: flex; gap: 6px;"
|
|
320
|
-
<span class="material-symbols-outlined" style="font-size: 18px;">schedule</span> Thời gian
|
|
321
|
-
</span
|
|
322
|
-
<span style="font-weight: 600;">10:00 AM, Today</span
|
|
323
|
-
</div
|
|
324
|
-
</div
|
|
325
|
-
|
|
326
|
-
<div class="td-note-box"
|
|
327
|
-
<div class="td-note-title"
|
|
328
|
-
<span class="material-symbols-outlined"
|
|
329
|
-
style="font-size: 16px; color: var(--td-primary);">clinical_notes</span
|
|
330
|
-
Ghi chú bác
|
|
331
|
-
</div
|
|
332
|
-
<p style="font-size: 14px; line-height: 1.5;">Bệnh nhân cần nghỉ ngơi và uống nhiều nước. Hạn chế vận
|
|
333
|
-
động mạnh trong 2 ngày tới.</p
|
|
334
|
-
</div
|
|
335
|
-
|
|
336
|
-
<div class="td-actions"
|
|
337
|
-
<div class="td-grid-actions"
|
|
338
|
-
<button class="td-btn td-btn-outline" style="font-size: 12px; height: 40px; margin-bottom: 0;"
|
|
339
|
-
Xem kết luận
|
|
340
|
-
</button
|
|
341
|
-
<button class="td-btn td-btn-outline" style="font-size: 12px; height: 40px; margin-bottom: 0;"
|
|
342
|
-
Tải đơn thuốc
|
|
343
|
-
</button
|
|
344
|
-
</div
|
|
345
|
-
<button class="td-btn td-btn-primary"
|
|
346
|
-
<span class="material-symbols-outlined" style="margin-right: 8px;">calendar_month</span
|
|
347
|
-
Đặt lịch tái khám
|
|
348
|
-
</button
|
|
349
|
-
</div
|
|
350
|
-
</div
|
|
351
|
-
</div
|
|
280
|
+
const patientFormHtml = '<div class="td-widget-expanded" id="td-patient-form">\r\n <header class="td-header">\r\n <div class="td-header-title">\r\n <div class="td-icon-box">\r\n <span class="material-symbols-outlined">medical_services</span>\r\n </div>\r\n <span>Clinic</span>\r\n </div>\r\n <button class="td-close-btn" id="td-form-close">\r\n <span class="material-symbols-outlined">close</span>\r\n </button>\r\n </header>\r\n\r\n <div class="td-content">\r\n <div class="td-form-container">\r\n <div class="td-form-page-header">\r\n <h1 class="td-form-title">Kết nối với Bác sĩ</h1>\r\n <p class="td-form-desc">Vui lòng nhập thông tin để bắt đầu tư vấn trực tuyến.</p>\r\n </div>\r\n\r\n <form class="td-form" id="td-info-form">\r\n <div class="td-input-group">\r\n <label class="td-label">Họ và tên</label>\r\n <input type="text" class="td-input" name="name" placeholder="VD: Nguyễn Văn A" required />\r\n </div>\r\n\r\n <div class="td-input-group">\r\n <label class="td-label">Số điện thoại</label>\r\n <div style="position: relative;">\r\n <input type="tel" class="td-input" name="phone" placeholder="VD: 0912 345 678" required />\r\n <div\r\n style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--td-primary);">\r\n <span class="material-symbols-outlined" style="font-size: 20px;">smartphone</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class="td-input-group">\r\n <label class="td-label">Triệu chứng của bạn?</label>\r\n <div class="td-chips-group">\r\n <button type="button" class="td-chip active">Sốt <span class="material-symbols-outlined"\r\n style="font-size: 16px;">check</span></button>\r\n <button type="button" class="td-chip">Ho / Cảm cúm</button>\r\n <button type="button" class="td-chip">Đau đầu</button>\r\n <button type="button" class="td-chip">Đau bụng</button>\r\n </div>\r\n </div>\r\n\r\n <div class="td-input-group">\r\n <label class="td-label">Mô tả thêm <span style="color: var(--td-text-sub); font-weight: 400;">(Tùy\r\n chọn)</span></label>\r\n <textarea class="td-textarea" name="symptoms"\r\n placeholder="Bạn đang cảm thấy như thế nào?"></textarea>\r\n </div>\r\n\r\n <div style="margin-top: 8px;">\r\n <button type="submit" class="td-btn td-btn-primary" id="td-form-submit">\r\n Bắt đầu tư vấn\r\n <span class="material-symbols-outlined" style="margin-left: 8px;">arrow_forward</span>\r\n </button>\r\n </div>\r\n\r\n <div class="td-secure-note">\r\n <span class="material-symbols-outlined" style="font-size: 14px;">lock</span>\r\n Thông tin y tế được bảo mật 100%\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n</div>';
|
|
281
|
+
const postConsultationHtml = `<div class="td-widget-expanded" id="td-summary-view">\r
|
|
282
|
+
<header class="td-header">\r
|
|
283
|
+
<h2 class="td-header-title" style="font-size: 16px;">Tổng kết tư vấn</h2>\r
|
|
284
|
+
<button class="td-close-btn" id="td-summary-close">\r
|
|
285
|
+
<span class="material-symbols-outlined">close</span>\r
|
|
286
|
+
</button>\r
|
|
287
|
+
</header>\r
|
|
288
|
+
\r
|
|
289
|
+
<div class="td-content">\r
|
|
290
|
+
<div class="td-summary-container">\r
|
|
291
|
+
<div class="td-success-header">\r
|
|
292
|
+
<div class="td-success-icon">\r
|
|
293
|
+
<span class="material-symbols-outlined" style="font-size: 48px;">check_circle</span>\r
|
|
294
|
+
</div>\r
|
|
295
|
+
<h3 class="td-summary-title">Tư vấn Hoàn tất</h3>\r
|
|
296
|
+
<p class="td-summary-desc">Cuộc hẹn đã được ghi nhận vào hồ sơ sức khỏe của bạn.</p>\r
|
|
297
|
+
</div>\r
|
|
298
|
+
\r
|
|
299
|
+
<div class="td-summary-card">\r
|
|
300
|
+
<div class="td-chat-avatar"\r
|
|
301
|
+
style="background-image: url('{{doctorAvatar}}'); width: 56px; height: 56px;"></div>\r
|
|
302
|
+
<div>\r
|
|
303
|
+
<div style="font-weight: 700;">{{doctorName}}</div>\r
|
|
304
|
+
<div style="color: var(--td-text-sub); font-size: 14px;">{{doctorSpecialty}}</div>\r
|
|
305
|
+
</div>\r
|
|
306
|
+
<div style="margin-left: auto; color: var(--td-primary);">\r
|
|
307
|
+
<span class="material-symbols-outlined">verified_user</span>\r
|
|
308
|
+
</div>\r
|
|
309
|
+
</div>\r
|
|
310
|
+
\r
|
|
311
|
+
<div class="td-summary-details">\r
|
|
312
|
+
<div class="td-detail-row">\r
|
|
313
|
+
<span style="color: var(--td-text-sub); display: flex; gap: 6px;">\r
|
|
314
|
+
<span class="material-symbols-outlined" style="font-size: 18px;">tag</span> Mã tư vấn\r
|
|
315
|
+
</span>\r
|
|
316
|
+
<span style="font-weight: 600;">#TD-93821</span>\r
|
|
317
|
+
</div>\r
|
|
318
|
+
<div class="td-detail-row">\r
|
|
319
|
+
<span style="color: var(--td-text-sub); display: flex; gap: 6px;">\r
|
|
320
|
+
<span class="material-symbols-outlined" style="font-size: 18px;">schedule</span> Thời gian\r
|
|
321
|
+
</span>\r
|
|
322
|
+
<span style="font-weight: 600;">10:00 AM, Today</span>\r
|
|
323
|
+
</div>\r
|
|
324
|
+
</div>\r
|
|
325
|
+
\r
|
|
326
|
+
<div class="td-note-box">\r
|
|
327
|
+
<div class="td-note-title">\r
|
|
328
|
+
<span class="material-symbols-outlined"\r
|
|
329
|
+
style="font-size: 16px; color: var(--td-primary);">clinical_notes</span>\r
|
|
330
|
+
Ghi chú bác sĩ\r
|
|
331
|
+
</div>\r
|
|
332
|
+
<p style="font-size: 14px; line-height: 1.5;">Bệnh nhân cần nghỉ ngơi và uống nhiều nước. Hạn chế vận\r
|
|
333
|
+
động mạnh trong 2 ngày tới.</p>\r
|
|
334
|
+
</div>\r
|
|
335
|
+
\r
|
|
336
|
+
<div class="td-actions">\r
|
|
337
|
+
<div class="td-grid-actions">\r
|
|
338
|
+
<button class="td-btn td-btn-outline" style="font-size: 12px; height: 40px; margin-bottom: 0;">\r
|
|
339
|
+
Xem kết luận\r
|
|
340
|
+
</button>\r
|
|
341
|
+
<button class="td-btn td-btn-outline" style="font-size: 12px; height: 40px; margin-bottom: 0;">\r
|
|
342
|
+
Tải đơn thuốc\r
|
|
343
|
+
</button>\r
|
|
344
|
+
</div>\r
|
|
345
|
+
<button class="td-btn td-btn-primary">\r
|
|
346
|
+
<span class="material-symbols-outlined" style="margin-right: 8px;">calendar_month</span>\r
|
|
347
|
+
Đặt lịch tái khám\r
|
|
348
|
+
</button>\r
|
|
349
|
+
</div>\r
|
|
350
|
+
</div>\r
|
|
351
|
+
</div>\r
|
|
352
352
|
</div>`;
|
|
353
|
-
const inlineTriggerHtml = `<style
|
|
354
|
-
@keyframes td-pulse-animation {
|
|
355
|
-
0% {
|
|
356
|
-
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4)
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
70% {
|
|
360
|
-
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0)
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
100% {
|
|
364
|
-
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0)
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
.td-inline-container {
|
|
369
|
-
display: flex
|
|
370
|
-
flex-direction: column
|
|
371
|
-
padding: 14px
|
|
372
|
-
background: #f8faff
|
|
373
|
-
border: 1px solid #e2e8f0
|
|
374
|
-
border-radius: 10px
|
|
375
|
-
font-family: system-ui, -apple-system, sans-serif
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
.td-inline-row {
|
|
379
|
-
display: flex
|
|
380
|
-
align-items: center
|
|
381
|
-
gap: 12px
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
.td-inline-footer {
|
|
385
|
-
display: flex
|
|
386
|
-
align-items: center
|
|
387
|
-
justify-content: space-between
|
|
388
|
-
margin-top: 14px
|
|
389
|
-
padding-top: 12px
|
|
390
|
-
border-top: 1px solid #e5e7eb
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
.td-inline-status {
|
|
394
|
-
display: flex
|
|
395
|
-
align-items: center
|
|
396
|
-
gap: 8px
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.td-inline-pulse {
|
|
400
|
-
width: 8px
|
|
401
|
-
height: 8px
|
|
402
|
-
background: #22c55e
|
|
403
|
-
border-radius: 50
|
|
404
|
-
animation: td-pulse-animation 2s infinite
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
.td-inline-text {
|
|
408
|
-
color: #16a34a
|
|
409
|
-
font-weight: 600
|
|
410
|
-
font-size: 13px
|
|
411
|
-
}
|
|
412
|
-
</style
|
|
413
|
-
<div class="td-inline-container"
|
|
414
|
-
<!-- Top: Doctor Info
|
|
415
|
-
<div class="td-inline-row"
|
|
416
|
-
<div
|
|
417
|
-
style="width: 48px; height: 48px; border-radius: 50%; background-image: url('{{doctorAvatar}}'); background-size: cover; background-position: center; flex-shrink: 0; background-color: #e5e7eb; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.05);"
|
|
418
|
-
</div
|
|
419
|
-
<div style="flex: 1; min-width: 0;"
|
|
420
|
-
<div
|
|
421
|
-
style="font-weight: 700; font-size: 15px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
|
422
|
-
{{doctorName}}</div
|
|
423
|
-
<div
|
|
424
|
-
style="font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
|
425
|
-
{{doctorSpecialty}}</div
|
|
426
|
-
</div
|
|
427
|
-
</div
|
|
428
|
-
|
|
429
|
-
<!-- Bottom: Status & Action
|
|
430
|
-
<div class="td-inline-footer"
|
|
431
|
-
<div class="td-inline-status"
|
|
432
|
-
<span class="td-inline-pulse"></span
|
|
433
|
-
<span class="td-inline-text">Bác sĩ đang Online</span
|
|
434
|
-
</div
|
|
435
|
-
|
|
436
|
-
<button id="td-inline-btn" style="
|
|
437
|
-
background: #0066ff;
|
|
438
|
-
color: white;
|
|
439
|
-
border: none;
|
|
440
|
-
padding: 8px 16px;
|
|
441
|
-
border-radius: 6px;
|
|
442
|
-
font-weight: 600;
|
|
443
|
-
font-size: 13px;
|
|
444
|
-
cursor: pointer;
|
|
445
|
-
display: flex;
|
|
446
|
-
align-items: center;
|
|
447
|
-
gap: 6px
|
|
448
|
-
white-space: nowrap
|
|
449
|
-
transition: all 0.2s
|
|
450
|
-
box-shadow: 0 2px 5px rgba(0,102,255,0.2)
|
|
451
|
-
" onmouseover="this.style.background='#0052cc'" onmouseout="this.style.background='#0066ff'"
|
|
452
|
-
<span class="material-symbols-outlined" style="font-size: 18px;">videocam</span
|
|
453
|
-
Tư vấn ngay
|
|
454
|
-
</button
|
|
455
|
-
</div
|
|
353
|
+
const inlineTriggerHtml = `<style>\r
|
|
354
|
+
@keyframes td-pulse-animation {\r
|
|
355
|
+
0% {\r
|
|
356
|
+
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);\r
|
|
357
|
+
}\r
|
|
358
|
+
\r
|
|
359
|
+
70% {\r
|
|
360
|
+
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);\r
|
|
361
|
+
}\r
|
|
362
|
+
\r
|
|
363
|
+
100% {\r
|
|
364
|
+
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);\r
|
|
365
|
+
}\r
|
|
366
|
+
}\r
|
|
367
|
+
\r
|
|
368
|
+
.td-inline-container {\r
|
|
369
|
+
display: flex;\r
|
|
370
|
+
flex-direction: column;\r
|
|
371
|
+
padding: 14px;\r
|
|
372
|
+
background: #f8faff;\r
|
|
373
|
+
border: 1px solid #e2e8f0;\r
|
|
374
|
+
border-radius: 10px;\r
|
|
375
|
+
font-family: system-ui, -apple-system, sans-serif;\r
|
|
376
|
+
}\r
|
|
377
|
+
\r
|
|
378
|
+
.td-inline-row {\r
|
|
379
|
+
display: flex;\r
|
|
380
|
+
align-items: center;\r
|
|
381
|
+
gap: 12px;\r
|
|
382
|
+
}\r
|
|
383
|
+
\r
|
|
384
|
+
.td-inline-footer {\r
|
|
385
|
+
display: flex;\r
|
|
386
|
+
align-items: center;\r
|
|
387
|
+
justify-content: space-between;\r
|
|
388
|
+
margin-top: 14px;\r
|
|
389
|
+
padding-top: 12px;\r
|
|
390
|
+
border-top: 1px solid #e5e7eb;\r
|
|
391
|
+
}\r
|
|
392
|
+
\r
|
|
393
|
+
.td-inline-status {\r
|
|
394
|
+
display: flex;\r
|
|
395
|
+
align-items: center;\r
|
|
396
|
+
gap: 8px;\r
|
|
397
|
+
}\r
|
|
398
|
+
\r
|
|
399
|
+
.td-inline-pulse {\r
|
|
400
|
+
width: 8px;\r
|
|
401
|
+
height: 8px;\r
|
|
402
|
+
background: #22c55e;\r
|
|
403
|
+
border-radius: 50%;\r
|
|
404
|
+
animation: td-pulse-animation 2s infinite;\r
|
|
405
|
+
}\r
|
|
406
|
+
\r
|
|
407
|
+
.td-inline-text {\r
|
|
408
|
+
color: #16a34a;\r
|
|
409
|
+
font-weight: 600;\r
|
|
410
|
+
font-size: 13px;\r
|
|
411
|
+
}\r
|
|
412
|
+
</style>\r
|
|
413
|
+
<div class="td-inline-container">\r
|
|
414
|
+
<!-- Top: Doctor Info -->\r
|
|
415
|
+
<div class="td-inline-row">\r
|
|
416
|
+
<div\r
|
|
417
|
+
style="width: 48px; height: 48px; border-radius: 50%; background-image: url('{{doctorAvatar}}'); background-size: cover; background-position: center; flex-shrink: 0; background-color: #e5e7eb; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">\r
|
|
418
|
+
</div>\r
|
|
419
|
+
<div style="flex: 1; min-width: 0;">\r
|
|
420
|
+
<div\r
|
|
421
|
+
style="font-weight: 700; font-size: 15px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">\r
|
|
422
|
+
{{doctorName}}</div>\r
|
|
423
|
+
<div\r
|
|
424
|
+
style="font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">\r
|
|
425
|
+
{{doctorSpecialty}}</div>\r
|
|
426
|
+
</div>\r
|
|
427
|
+
</div>\r
|
|
428
|
+
\r
|
|
429
|
+
<!-- Bottom: Status & Action -->\r
|
|
430
|
+
<div class="td-inline-footer">\r
|
|
431
|
+
<div class="td-inline-status">\r
|
|
432
|
+
<span class="td-inline-pulse"></span>\r
|
|
433
|
+
<span class="td-inline-text">Bác sĩ đang Online</span>\r
|
|
434
|
+
</div>\r
|
|
435
|
+
\r
|
|
436
|
+
<button id="td-inline-btn" style="\r
|
|
437
|
+
background: #0066ff; \r
|
|
438
|
+
color: white; \r
|
|
439
|
+
border: none; \r
|
|
440
|
+
padding: 8px 16px; \r
|
|
441
|
+
border-radius: 6px; \r
|
|
442
|
+
font-weight: 600; \r
|
|
443
|
+
font-size: 13px; \r
|
|
444
|
+
cursor: pointer; \r
|
|
445
|
+
display: flex; \r
|
|
446
|
+
align-items: center; \r
|
|
447
|
+
gap: 6px;\r
|
|
448
|
+
white-space: nowrap;\r
|
|
449
|
+
transition: all 0.2s;\r
|
|
450
|
+
box-shadow: 0 2px 5px rgba(0,102,255,0.2);\r
|
|
451
|
+
" onmouseover="this.style.background='#0052cc'" onmouseout="this.style.background='#0066ff'">\r
|
|
452
|
+
<span class="material-symbols-outlined" style="font-size: 18px;">videocam</span>\r
|
|
453
|
+
Tư vấn ngay\r
|
|
454
|
+
</button>\r
|
|
455
|
+
</div>\r
|
|
456
456
|
</div>`;
|
|
457
457
|
const render = (template, data) => {
|
|
458
458
|
var _a, _b, _c;
|