Hugging Face's logo

Spaces:
Renderlib-dev
/
CodeVed
Running

App Files Community
1
Vedika commited on
Commit
287b588
·
verified ·
1 Parent(s): 6f50e96

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +28 -26
index.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -49,7 +50,6 @@
49
  display: flex; overflow: hidden; -webkit-font-smoothing: antialiased;
50
  }
51
 
52
- /* --- UI EFFECT: Video Background Gradient --- */
53
  body {
54
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #e3ecfa 100%);
55
  }
@@ -68,8 +68,6 @@
68
  @keyframes pulseOpacity { 0% { opacity: 0.4; } 100% { opacity: 1; } }
69
  @keyframes spin { 100% { transform: rotate(360deg); } }
70
  @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
71
-
72
- /* UI EFFECT: Mic Recording Pulse */
73
  @keyframes recordPulse {
74
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.4); }
75
  50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(179, 38, 30, 0); }
@@ -125,7 +123,6 @@
125
  scroll-behavior: smooth;
126
  }
127
 
128
- /* --- UI EFFECT: Welcome Screen matched to Video --- */
129
  .welcome-center {
130
  margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center;
131
  animation: fadeInUp 0.6s ease; width: 100%; justify-content: center; flex: 1;
@@ -142,7 +139,6 @@
142
  animation: fadeInUp 0.3s ease;
143
  }
144
 
145
- /* ---------- USER MESSAGE ---------- */
146
  .user-message {
147
  align-self: flex-end; max-width: 85%;
148
  background: var(--bg-user-msg);
@@ -152,10 +148,19 @@
152
  word-wrap: break-word; overflow-wrap: break-word;
153
  }
154
 
155
- /* ---------- BOT MESSAGE ---------- */
156
  .bot-message {
157
- align-self: flex-start; max-width: 100%; display: flex; gap: 16px; width: 100%;
158
- background: transparent; padding: 0; border: none; box-shadow: none; margin-top: 4px;
 
 
 
 
 
 
 
 
 
159
  }
160
 
161
  .bot-avatar {
@@ -165,23 +170,20 @@
165
  }
166
  .bot-avatar img { width: 100%; height: 100%; object-fit: cover; }
167
 
168
- /* ---------- BUG FIX: NO MORE VERTICAL LINE TEXT ---------- */
169
  .bot-content-wrapper {
170
- flex: 1;
171
- min-width: 0; /* CRITICAL FIX: Forces flex item to respect boundaries */
172
- max-width: 100%;
173
- overflow-wrap: break-word;
174
- word-wrap: break-word;
175
- word-break: break-word;
176
  }
177
 
178
  .bot-content {
179
- font-size: 15.5px; line-height: 1.7; color: var(--text-primary);
 
 
180
  word-wrap: break-word;
181
- overflow-wrap: break-word;
182
  word-break: normal;
183
- white-space: pre-wrap; /* CRITICAL FIX: PREVENTS TEXT DROPPING VERTICALLY */
184
- max-width: 100%;
185
  }
186
 
187
  .bot-content p { margin-bottom: 16px; }
@@ -199,7 +201,7 @@
199
  width: 12px; height: 12px; border-radius: 50%;
200
  background: #ff5f56; box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
201
  }
202
- .bot-content pre code { background: none; padding: 0; color: #e2e8f0; font-size: 13.5px; text-shadow: none; }
203
 
204
  .chat-attachment-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
205
  .chat-file-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border: 1px solid var(--border-light); padding: 8px 14px; border-radius: var(--radius-lg); font-size: 13px; font-weight: 500; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
@@ -210,13 +212,18 @@
210
  .qwen-think-box summary::-webkit-details-marker { display: none; }
211
  .qwen-think-box summary svg.arrow { width: 14px; height: 14px; transition: transform var(--transition-default); }
212
  .qwen-think-box[open] summary svg.arrow { transform: rotate(90deg); }
213
- .qwen-think-content { padding: 16px; border-top: 1px solid var(--border-light); font-size: 13.5px; color: var(--text-secondary); font-style: italic; line-height: 1.6; opacity: 0.8; }
214
 
215
  .action-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(255,255,255,0.7); border-radius: 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 16px; border: 1px solid var(--border-light); cursor: default; user-select: none; backdrop-filter: blur(8px); }
216
  .action-status.active { background: rgba(227, 236, 250, 0.8); border-color: rgba(168, 199, 250, 0.5); color: var(--brand-accent); }
217
  .flicker-text { animation: pulseOpacity 1.2s infinite alternate; }
218
  .spin-icon { animation: spin 1s linear infinite; }
219
 
 
 
 
 
 
220
  .msg-actions { display: flex; gap: 8px; margin-top: 14px; opacity: 0; transition: opacity var(--transition-default); align-items: center; flex-wrap: wrap; }
221
  .message-wrapper:hover .msg-actions { opacity: 1; }
222
  @media (hover: none) { .msg-actions { opacity: 1; } }
@@ -260,7 +267,6 @@
260
 
261
  .loc-toast { display: none; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 12px; background: rgba(255,255,255,0.85); padding: 6px 14px; border-radius: 16px; border: 1px solid var(--border-light); box-shadow: 0 4px 12px rgba(0,0,0,0.05); backdrop-filter: blur(12px); }
262
 
263
- /* --- UI EFFECT: Pill Shaped Input box --- */
264
  .input-container {
265
  width: 100%; max-width: 850px;
266
  background: #ffffff;
@@ -298,7 +304,6 @@
298
  .tool-btn.active-think-high { color: var(--brand-accent); background: #e3ecfa; }
299
  .tool-btn.active-search { color: var(--brand-success); background: #e6f4ea; }
300
 
301
- /* UI EFFECT: Mic Pulse class */
302
  .btn-mic.recording {
303
  color: var(--brand-danger);
304
  background: #fce8e8;
@@ -665,7 +670,6 @@
665
  document.getElementById('voiceMenu').classList.remove('active');
666
  },
667
  cleanTextForTTS(text) {
668
- // Bug Fix: Replaced literal backticks with regex constructor to prevent markdown parser breaks
669
  const codeBlockRegex = new RegExp('`{3}[\\s\\S]*?`{3}', 'g');
670
  return text.replace(/<think>[\s\S]*?<\/think>/gi, '').replace(codeBlockRegex, '').replace(/https?:\/\/[^\s]+/g, '').replace(/[*_#`~>]/g, '').trim();
671
  },
@@ -730,7 +734,6 @@
730
  document.getElementById('uSub').innerText = email;
731
  document.getElementById('btnLogout').style.display = 'flex';
732
 
733
- // Set English dynamic greeting
734
  document.getElementById('welcomeTitle').innerHTML = `Hello, ${dispName}!<br>How can I help you today?`;
735
  },
736
  updateWelcomeScreen() {
@@ -770,7 +773,6 @@
770
  document.getElementById('uName').innerText = "Guest Mode";
771
  document.getElementById('uSub').innerText = `Queries: ${State.guestCount}/10`;
772
  document.getElementById('btnLogout').style.display = 'none';
773
- // Set English default greeting
774
  document.getElementById('welcomeTitle').innerHTML = `Hello, Guest!<br>How can I help you today?`;
775
  }
776
  },
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
50
  display: flex; overflow: hidden; -webkit-font-smoothing: antialiased;
51
  }
52
 
 
53
  body {
54
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #e3ecfa 100%);
55
  }
 
68
  @keyframes pulseOpacity { 0% { opacity: 0.4; } 100% { opacity: 1; } }
69
  @keyframes spin { 100% { transform: rotate(360deg); } }
70
  @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
 
 
71
  @keyframes recordPulse {
72
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.4); }
73
  50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(179, 38, 30, 0); }
 
123
  scroll-behavior: smooth;
124
  }
125
 
 
126
  .welcome-center {
127
  margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center;
128
  animation: fadeInUp 0.6s ease; width: 100%; justify-content: center; flex: 1;
 
139
  animation: fadeInUp 0.3s ease;
140
  }
141
 
 
142
  .user-message {
143
  align-self: flex-end; max-width: 85%;
144
  background: var(--bg-user-msg);
 
148
  word-wrap: break-word; overflow-wrap: break-word;
149
  }
150
 
151
+ /* ---------- BUG FIX: VERTICAL TEXT ---------- */
152
  .bot-message {
153
+ align-self: flex-start;
154
+ max-width: 100%;
155
+ display: flex;
156
+ gap: 16px;
157
+ width: 100%;
158
+ box-sizing: border-box;
159
+ background: transparent;
160
+ padding: 0;
161
+ border: none;
162
+ box-shadow: none;
163
+ margin-top: 4px;
164
  }
165
 
166
  .bot-avatar {
 
170
  }
171
  .bot-avatar img { width: 100%; height: 100%; object-fit: cover; }
172
 
 
173
  .bot-content-wrapper {
174
+ flex: 1 1 0%;
175
+ min-width: 0;
176
+ width: 100%;
 
 
 
177
  }
178
 
179
  .bot-content {
180
+ font-size: 15.5px;
181
+ line-height: 1.7;
182
+ color: var(--text-primary);
183
  word-wrap: break-word;
184
+ overflow-wrap: anywhere;
185
  word-break: normal;
186
+ white-space: normal;
 
187
  }
188
 
189
  .bot-content p { margin-bottom: 16px; }
 
201
  width: 12px; height: 12px; border-radius: 50%;
202
  background: #ff5f56; box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
203
  }
204
+ .bot-content pre code { background: none; padding: 0; color: #e2e8f0; font-size: 13.5px; text-shadow: none; white-space: pre;}
205
 
206
  .chat-attachment-container { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
207
  .chat-file-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border: 1px solid var(--border-light); padding: 8px 14px; border-radius: var(--radius-lg); font-size: 13px; font-weight: 500; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
 
212
  .qwen-think-box summary::-webkit-details-marker { display: none; }
213
  .qwen-think-box summary svg.arrow { width: 14px; height: 14px; transition: transform var(--transition-default); }
214
  .qwen-think-box[open] summary svg.arrow { transform: rotate(90deg); }
215
+ .qwen-think-content { padding: 16px; border-top: 1px solid var(--border-light); font-size: 13.5px; color: var(--text-secondary); font-style: italic; line-height: 1.6; opacity: 0.8; white-space: normal;}
216
 
217
  .action-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(255,255,255,0.7); border-radius: 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 16px; border: 1px solid var(--border-light); cursor: default; user-select: none; backdrop-filter: blur(8px); }
218
  .action-status.active { background: rgba(227, 236, 250, 0.8); border-color: rgba(168, 199, 250, 0.5); color: var(--brand-accent); }
219
  .flicker-text { animation: pulseOpacity 1.2s infinite alternate; }
220
  .spin-icon { animation: spin 1s linear infinite; }
221
 
222
+ .typing-indicator { display: inline-flex; gap: 4px; padding: 8px 0; align-items: center; }
223
+ .typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); animation: typingBounce 1.2s infinite; }
224
+ .typing-dot:nth-child(2) { animation-delay: 0.15s; }
225
+ .typing-dot:nth-child(3) { animation-delay: 0.3s; }
226
+
227
  .msg-actions { display: flex; gap: 8px; margin-top: 14px; opacity: 0; transition: opacity var(--transition-default); align-items: center; flex-wrap: wrap; }
228
  .message-wrapper:hover .msg-actions { opacity: 1; }
229
  @media (hover: none) { .msg-actions { opacity: 1; } }
 
267
 
268
  .loc-toast { display: none; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); margin-bottom: 12px; background: rgba(255,255,255,0.85); padding: 6px 14px; border-radius: 16px; border: 1px solid var(--border-light); box-shadow: 0 4px 12px rgba(0,0,0,0.05); backdrop-filter: blur(12px); }
269
 
 
270
  .input-container {
271
  width: 100%; max-width: 850px;
272
  background: #ffffff;
 
304
  .tool-btn.active-think-high { color: var(--brand-accent); background: #e3ecfa; }
305
  .tool-btn.active-search { color: var(--brand-success); background: #e6f4ea; }
306
 
 
307
  .btn-mic.recording {
308
  color: var(--brand-danger);
309
  background: #fce8e8;
 
670
  document.getElementById('voiceMenu').classList.remove('active');
671
  },
672
  cleanTextForTTS(text) {
 
673
  const codeBlockRegex = new RegExp('`{3}[\\s\\S]*?`{3}', 'g');
674
  return text.replace(/<think>[\s\S]*?<\/think>/gi, '').replace(codeBlockRegex, '').replace(/https?:\/\/[^\s]+/g, '').replace(/[*_#`~>]/g, '').trim();
675
  },
 
734
  document.getElementById('uSub').innerText = email;
735
  document.getElementById('btnLogout').style.display = 'flex';
736
 
 
737
  document.getElementById('welcomeTitle').innerHTML = `Hello, ${dispName}!<br>How can I help you today?`;
738
  },
739
  updateWelcomeScreen() {
 
773
  document.getElementById('uName').innerText = "Guest Mode";
774
  document.getElementById('uSub').innerText = `Queries: ${State.guestCount}/10`;
775
  document.getElementById('btnLogout').style.display = 'none';
 
776
  document.getElementById('welcomeTitle').innerHTML = `Hello, Guest!<br>How can I help you today?`;
777
  }
778
  },