Hugging Face's logo

Spaces:
WanIrfan
/
Atlas
Sleeping

App Files Community
WanIrfan commited on
Commit
d71426b
·
verified ·
1 Parent(s): 974ef11

Upload 5 files

Browse files
Files changed (5) hide show
  1. templates/about.html +1035 -0
  2. templates/homePage.html +1095 -0
  3. templates/insurance_page.html +398 -0
  4. templates/islamic_page.html +600 -0
  5. templates/medical_page.html +507 -0
templates/about.html ADDED
@@ -0,0 +1,1035 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MultiDom RAG</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="tailwind.config.css"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ dark: '#579be8',
19
+ light: '#3B82F6',
20
+ },
21
+ secondary: {
22
+ dark: '#9F1239',
23
+ light: '#EC4899',
24
+ },
25
+ accent: {
26
+ dark: '#047857',
27
+ light: '#10B981',
28
+ },
29
+ dark: {
30
+ 900: '#0F172A',
31
+ 800: '#1E293B',
32
+ 700: '#334155',
33
+ 600: '#475569',
34
+ },
35
+ },
36
+ fontFamily: {
37
+ sans: ['Inter', 'sans-serif'],
38
+ mono: ['Fira Code', 'monospace'],
39
+ },
40
+ animation: {
41
+ 'float': 'float 6s ease-in-out infinite',
42
+ 'float-fast': 'float 4s ease-in-out infinite',
43
+ 'spin-slow': 'spin 10s linear infinite',
44
+ 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
45
+ 'bounce-slow': 'bounce 3s infinite',
46
+ 'wiggle': 'wiggle 1s ease-in-out infinite',
47
+ 'wave': 'wave 2s linear infinite',
48
+ 'blink': 'blink 1.5s step-end infinite',
49
+ 'scroll': 'scroll 40s linear infinite',
50
+ },
51
+ keyframes: {
52
+ float: {
53
+ '0%, 100%': { transform: 'translateY(0)' },
54
+ '50%': { transform: 'translateY(-10px)' },
55
+ },
56
+ wiggle: {
57
+ '0%, 100%': { transform: 'rotate(-3deg)' },
58
+ '50%': { transform: 'rotate(3deg)' },
59
+ },
60
+ wave: {
61
+ '0%': { transform: 'rotate(0deg)' },
62
+ '10%': { transform: 'rotate(14deg)' },
63
+ '20%': { transform: 'rotate(-8deg)' },
64
+ '30%': { transform: 'rotate(14deg)' },
65
+ '40%': { transform: 'rotate(-4deg)' },
66
+ '50%': { transform: 'rotate(10deg)' },
67
+ '60%': { transform: 'rotate(0deg)' },
68
+ '100%': { transform: 'rotate(0deg)' },
69
+ },
70
+ blink: {
71
+ '0%, 100%': { opacity: '1' },
72
+ '50%': { opacity: '0' },
73
+ },
74
+ scroll: {
75
+ '0%': { transform: 'translateX(0)' },
76
+ '100%': { transform: 'translateX(-30%)' },
77
+ }
78
+
79
+ }
80
+ }
81
+
82
+ }
83
+ }
84
+ </script>
85
+ <style>
86
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
87
+
88
+ body {
89
+ font-family: 'Inter', sans-serif;
90
+ transition: all 0.3s ease;
91
+ scroll-behavior: smooth;
92
+ }
93
+
94
+ .gradient-bg {
95
+ background: linear-gradient(135deg, #1E40AF 0%, #9F1239 50%, #047857 100%);
96
+ }
97
+
98
+ .card-hover {
99
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
100
+ }
101
+
102
+ .card-hover:hover {
103
+ transform: translateY(-5px);
104
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
105
+ }
106
+
107
+ .pulse-animation {
108
+ animation: pulse 2s infinite;
109
+ }
110
+
111
+ @keyframes pulse {
112
+ 0% {
113
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
114
+ }
115
+ 70% {
116
+ box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
117
+ }
118
+ 100% {
119
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
120
+ }
121
+ }
122
+
123
+ .chat-bubble {
124
+ border-radius: 1.5rem;
125
+ position: relative;
126
+ }
127
+
128
+ .chat-bubble:after {
129
+ content: '';
130
+ position: absolute;
131
+ bottom: 0;
132
+ left: 20%;
133
+ width: 0;
134
+ height: 0;
135
+ border: 10px solid transparent;
136
+ border-top-color: #3B82F6;
137
+ border-bottom: 0;
138
+ margin-left: -10px;
139
+ margin-bottom: -10px;
140
+ }
141
+
142
+ .dark .chat-bubble:after {
143
+ border-top-color: #1E40AF;
144
+ }
145
+
146
+ .glow {
147
+ filter: drop-shadow(0 0 8px currentColor);
148
+ }
149
+
150
+ .feature-icon {
151
+ transition: all 0.3s ease;
152
+ }
153
+
154
+ .feature-card:hover .feature-icon {
155
+ transform: scale(1.2) rotate(10deg);
156
+ }
157
+
158
+ .swarm-particle {
159
+ position: absolute;
160
+ border-radius: 50%;
161
+ opacity: 0.7;
162
+ animation: swarm-move 15s linear infinite;
163
+ }
164
+
165
+ @keyframes swarm-move {
166
+ 0%, 100% {
167
+ transform: translate(0, 0);
168
+ }
169
+ 25% {
170
+ transform: translate(20px, 20px);
171
+ }
172
+ 50% {
173
+ transform: translate(10px, -20px);
174
+ }
175
+ 75% {
176
+ transform: translate(-20px, 10px);
177
+ }
178
+ }
179
+
180
+ .typing-indicator {
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ }
185
+
186
+ .typing-dot {
187
+ width: 8px;
188
+ height: 8px;
189
+ margin: 0 2px;
190
+ background-color: currentColor;
191
+ border-radius: 50%;
192
+ display: inline-block;
193
+ animation: typing-dot 1.4s infinite ease-in-out;
194
+ }
195
+
196
+ .typing-dot:nth-child(1) {
197
+ animation-delay: 0s;
198
+ }
199
+
200
+ .typing-dot:nth-child(2) {
201
+ animation-delay: 0.2s;
202
+ }
203
+
204
+ .typing-dot:nth-child(3) {
205
+ animation-delay: 0.4s;
206
+ }
207
+
208
+ @keyframes typing-dot {
209
+ 0%, 60%, 100% {
210
+ transform: translateY(0);
211
+ }
212
+ 30% {
213
+ transform: translateY(-5px);
214
+ }
215
+ }
216
+
217
+ .progress-bar {
218
+ height: 4px;
219
+ width: 0;
220
+ background: linear-gradient(90deg, #3B82F6, #EC4899, #10B981);
221
+ transition: width 0.4s ease;
222
+ }
223
+
224
+ .scroll-indicator {
225
+ position: fixed;
226
+ bottom: 30px;
227
+ right: 30px;
228
+ width: 50px;
229
+ height: 50px;
230
+ border-radius: 50%;
231
+ background-color: #3B82F6;
232
+ color: white;
233
+ display: flex;
234
+ align-items: center;
235
+ justify-content: center;
236
+ cursor: pointer;
237
+ opacity: 0;
238
+ transform: translateY(20px);
239
+ transition: all 0.3s ease;
240
+ z-index: 999;
241
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
242
+ }
243
+
244
+ .scroll-indicator.visible {
245
+ opacity: 1;
246
+ transform: translateY(0);
247
+ }
248
+
249
+ .scroll-indicator:hover {
250
+ transform: translateY(-5px) scale(1.1);
251
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
252
+ }
253
+
254
+ .tooltip {
255
+ position: relative;
256
+ }
257
+
258
+ .tooltip-text {
259
+ visibility: hidden;
260
+ width: 120px;
261
+ background-color: #1E293B;
262
+ color: #fff;
263
+ text-align: center;
264
+ border-radius: 6px;
265
+ padding: 5px;
266
+ position: absolute;
267
+ z-index: 1;
268
+ bottom: 125%;
269
+ left: 50%;
270
+ margin-left: -60px;
271
+ opacity: 0;
272
+ transition: opacity 0.3s;
273
+ }
274
+
275
+ .tooltip:hover .tooltip-text {
276
+ visibility: visible;
277
+ opacity: 1;
278
+ }
279
+
280
+ .parallax {
281
+ background-attachment: fixed;
282
+ background-position: center;
283
+ background-repeat: no-repeat;
284
+ background-size: cover;
285
+ }
286
+
287
+ .floating-label {
288
+ position: relative;
289
+ margin-bottom: 20px;
290
+ }
291
+
292
+ .floating-label input,
293
+ .floating-label textarea {
294
+ font-size: 16px;
295
+ padding: 20px 16px 10px;
296
+ display: block;
297
+ width: 100%;
298
+ border: 1px solid #CBD5E1;
299
+ border-radius: 8px;
300
+ background: #F8FAFC;
301
+ }
302
+
303
+ .floating-label input:focus,
304
+ .floating-label textarea:focus {
305
+ outline: none;
306
+ border-color: #3B82F6;
307
+ }
308
+
309
+ .floating-label label {
310
+ color: #64748B;
311
+ font-size: 16px;
312
+ position: absolute;
313
+ pointer-events: none;
314
+ left: 16px;
315
+ top: 16px;
316
+ transition: 0.2s ease all;
317
+ }
318
+
319
+ .floating-label input:focus ~ label,
320
+ .floating-label input:valid ~ label,
321
+ .floating-label textarea:focus ~ label,
322
+ .floating-label textarea:valid ~ label {
323
+ top: 6px;
324
+ font-size: 12px;
325
+ color: #3B82F6;
326
+ }
327
+
328
+ .dark .floating-label input,
329
+ .dark .floating-label textarea {
330
+ background: #1E293B;
331
+ border-color: #334155;
332
+ color: #F8FAFC;
333
+ }
334
+
335
+ .dark .floating-label label {
336
+ color: #94A3B8;
337
+ }
338
+
339
+ .dark .floating-label input:focus ~ label,
340
+ .dark .floating-label input:valid ~ label,
341
+ .dark .floating-label textarea:focus ~ label,
342
+ .dark .floating-label textarea:valid ~ label {
343
+ color: #60A5FA;
344
+ }
345
+
346
+ .toggle-switch {
347
+ position: relative;
348
+ display: inline-block;
349
+ width: 60px;
350
+ height: 34px;
351
+ }
352
+
353
+ .toggle-switch input {
354
+ opacity: 0;
355
+ width: 0;
356
+ height: 0;
357
+ }
358
+
359
+ .toggle-slider {
360
+ position: absolute;
361
+ cursor: pointer;
362
+ top: 0;
363
+ left: 0;
364
+ right: 0;
365
+ bottom: 0;
366
+ background-color: #CBD5E1;
367
+ transition: .4s;
368
+ border-radius: 34px;
369
+ }
370
+
371
+ .toggle-slider:before {
372
+ position: absolute;
373
+ content: "";
374
+ height: 26px;
375
+ width: 26px;
376
+ left: 4px;
377
+ bottom: 4px;
378
+ background-color: white;
379
+ transition: .4s;
380
+ border-radius: 50%;
381
+ }
382
+
383
+ input:checked + .toggle-slider {
384
+ background-color: #3B82F6;
385
+ }
386
+
387
+ input:checked + .toggle-slider:before {
388
+ transform: translateX(26px);
389
+ }
390
+
391
+ .ripple {
392
+ position: relative;
393
+ overflow: hidden;
394
+ }
395
+
396
+ .ripple-effect {
397
+ position: absolute;
398
+ border-radius: 50%;
399
+ background-color: rgba(255, 255, 255, 0.4);
400
+ transform: scale(0);
401
+ animation: ripple 0.6s linear;
402
+ pointer-events: none;
403
+ }
404
+
405
+ @keyframes ripple {
406
+ to {
407
+ transform: scale(4);
408
+ opacity: 0;
409
+ }
410
+ }
411
+
412
+ .scroll-progress {
413
+ position: fixed;
414
+ top: 0;
415
+ left: 0;
416
+ width: 0%;
417
+ height: 4px;
418
+ background: linear-gradient(90deg, #3B82F6, #EC4899, #10B981);
419
+ z-index: 1000;
420
+ transition: width 0.1s;
421
+ }
422
+
423
+ .confetti {
424
+ position: fixed;
425
+ width: 10px;
426
+ height: 10px;
427
+ background-color: #3B82F6;
428
+ opacity: 0;
429
+ z-index: 9999;
430
+ animation: confetti-fall 5s linear forwards;
431
+ }
432
+
433
+ @keyframes confetti-fall {
434
+ 0% {
435
+ transform: translateY(-100px) rotate(0deg);
436
+ opacity: 1;
437
+ }
438
+ 100% {
439
+ transform: translateY(100vh) rotate(360deg);
440
+ opacity: 0;
441
+ }
442
+ }
443
+ </style>
444
+ <head>
445
+ <body class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen">
446
+ <!-- Scroll Progress Bar -->
447
+ <div class="scroll-progress"></div>
448
+
449
+ <!-- Navigation -->
450
+ <nav class="bg-white dark:bg-dark-800 shadow-lg sticky top-0 z-50">
451
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
452
+ <div class="flex justify-between h-16 items-center relative">
453
+ <div class="flex items-center">
454
+ <i class="fa-solid fa-file-medical text-primary-light dark:text-primary-dark text-2xl mr-5"></i>
455
+ <span class="text-2xl font-bold text-primary-light dark:text-primary-dark">MultiDom RAG</span>
456
+ </div>
457
+ <div class="hidden sm:flex flex-1 justify-center space-x-8">
458
+ <a href="{{ url_for('homePage') }}" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse">Home</a>
459
+
460
+ <div class="relative group">
461
+ <button class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse">
462
+ Demo
463
+ <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
464
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
465
+ </svg>
466
+ </button>
467
+
468
+ <!-- Dropdown menu -->
469
+ <div class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-dark-700 ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out z-50">
470
+ <div class="py-1" role="menu" aria-orientation="vertical">
471
+ <a href="{{ url_for('medical_page') }}" class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600" role="menuitem">Medical</a>
472
+ <a href="{{ url_for('islamic_page') }}" class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600" role="menuitem">Islamic</a>
473
+ <a href="{{ url_for('medical_page') }}" class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600" role="menuitem">Insurance</a>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <a href="{{ url_for('about') }}" class="border-primary-light dark:border-primary-dark text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse">About</a>
479
+ </div>
480
+
481
+ <div class="hidden sm:flex items-center space-x-4">
482
+ <button id="theme-toggle" type="button" class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light dark:focus:ring-primary-dark ripple">
483
+ <i class="fas fa-moon dark:hidden"></i>
484
+ <i class="fas fa-sun hidden dark:block"></i>
485
+ </button>
486
+ <button onclick = "window.location.href = '{{ url_for('medical_page') }}'" class="ml-4 bg-primary-light dark:bg-primary-dark hover:bg-primary-dark dark:hover:bg-primary-light text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 hover:scale-105 transform ripple" >Try Demo</button>
487
+ </div>
488
+ <div class="-mr-2 flex items-center sm:hidden">
489
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-light dark:focus:ring-primary-dark ripple" aria-controls="mobile-menu" aria-expanded="false">
490
+ <span class="sr-only">Open main menu</span>
491
+ <i class="fas fa-bars"></i>
492
+ </button>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </nav>
497
+
498
+ <!-- About Section -->
499
+ <div id="about" class="sm:text-center py-12 bg-gray-100 dark:bg-dark-900">
500
+ <div class=" sm:text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
501
+ <div class="lg:text-center">
502
+ <h2 class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase">About the Project</h2>
503
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
504
+ Final Year Research Initiative
505
+ </p>
506
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
507
+ Developing cutting-edge AI solutions for medical and Islamic information retrieval and decision support.
508
+ </p>
509
+ </div>
510
+
511
+ <div class="mt-10">
512
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
513
+
514
+ <div class="bg-white dark:bg-dark-700 p-6 rounded-lg shadow card-hover">
515
+ <h3 class="text-xl leading-6 font-medium text-gray-900 dark:text-white">Project Objectives</h3>
516
+ <div class="mt-4">
517
+ <ul class="list-disc pl-5 space-y-2 text-gray-600 dark:text-gray-400">
518
+ <li>Develop a Swarm-Based Multi-Agent architecture capable of querying medical knowledge bases</li>
519
+ <li>Implement Multimodal processing of medical and Islamic data</li>
520
+ <li>Create a dynamic knowledge updating mechanism</li>
521
+
522
+ </ul>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="bg-white dark:bg-dark-700 p-6 rounded-lg shadow card-hover">
527
+ <h3 class="text-xl leading-6 font-medium text-gray-900 dark:text-white">Expected Outcomes</h3>
528
+ <div class="mt-4">
529
+ <ul class="list-disc pl-5 space-y-2 text-gray-600 dark:text-gray-400">
530
+ <li>Improved accuracy and depth in retrieval for both medical and Islamic queries</li>
531
+ <li>Better handling of complex, multimodal queries</li>
532
+ <li>Open-source components for academic research</li>
533
+ </ul>
534
+ </div>
535
+ </div>
536
+ </div>
537
+
538
+ <!-- Timeline -->
539
+ <div class="mt-16">
540
+ <h3 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-8">Project Timeline</h3>
541
+ <div class="relative">
542
+ <!-- Progress line -->
543
+ <div class="h-1 bg-gray-200 dark:bg-gray-700 absolute top-1/2 left-0 right-0 -translate-y-1/2"></div>
544
+ <div class="progress-bar"></div>
545
+
546
+ <div class="relative flex justify-between">
547
+ <!-- Milestone 1 -->
548
+ <div class="flex flex-col items-center">
549
+ <div class="w-8 h-8 rounded-full bg-primary-light dark:bg-primary-dark flex items-center justify-center text-white font-bold shadow-lg tooltip">
550
+ 1
551
+ <span class="tooltip-text">Research Phase</span>
552
+ </div>
553
+ <div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Research</div>
554
+ <div class="text-xs text-gray-500 dark:text-gray-400">March 2025</div>
555
+ </div>
556
+
557
+ <!-- Milestone 2 -->
558
+ <div class="flex flex-col items-center">
559
+ <div class="w-8 h-8 rounded-full bg-secondary-light dark:bg-secondary-dark flex items-center justify-center text-white font-bold shadow-lg tooltip">
560
+ 2
561
+ <span class="tooltip-text">Development Phase</span>
562
+ </div>
563
+ <div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Development</div>
564
+ <div class="text-xs text-gray-500 dark:text-gray-400">Apr 2025</div>
565
+ </div>
566
+
567
+ <!-- Milestone 3 -->
568
+ <div class="flex flex-col items-center">
569
+ <div class="w-8 h-8 rounded-full bg-accent-light dark:bg-accent-dark flex items-center justify-center text-white font-bold shadow-lg tooltip">
570
+ 3
571
+ <span class="tooltip-text">Testing Phase</span>
572
+ </div>
573
+ <div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Testing</div>
574
+ <div class="text-xs text-gray-500 dark:text-gray-400">May 2025</div>
575
+ </div>
576
+
577
+ <!-- Milestone 4 -->
578
+ <div class="flex flex-col items-center">
579
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold shadow-lg tooltip">
580
+ 4
581
+ <span class="tooltip-text">Deployment Phase</span>
582
+ </div>
583
+ <div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Deployment</div>
584
+ <div class="text-xs text-gray-500 dark:text-gray-400">June 2025</div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+
594
+ <!-- DATASETS -->
595
+ <div id="references" class="py-12 bg-gray-50 dark:bg-dark-800">
596
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
597
+ <div class="lg:text-center">
598
+ <h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">Datasets</h2>
599
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
600
+ Knowledge Sources
601
+ </p>
602
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
603
+ Islamic Knowledge
604
+ </p>
605
+ </div>
606
+ </div>
607
+ <!-- Scroller Container -->
608
+ <div class="mt-10 w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-200px),transparent_100%)]">
609
+ <ul id="reference-scroller" class="flex items-center justify-center md:justify-start [&_li]:mx-20 [&_img]:max-w-none animate-scroll">
610
+
611
+ <!-- Book 1 -->
612
+ <li class="flex-shrink-0 text-center">
613
+ <!-- TODO: Replace with your book image path -->
614
+ <img class="h-56 w-auto rounded shadow-lg mx-auto" src="https://towardsmardhatillah.wordpress.com/wp-content/uploads/2010/08/muawatta-imam-malik.jpg" alt="Book Cover: Al-Muwatta'">
615
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Al-Muwatta'</h4>
616
+ <p class="text-medium text-gray-500 dark:text-gray-400">Imam Malik</p>
617
+ </li>
618
+
619
+ <!-- Book 2 -->
620
+ <li class="flex-shrink-0 text-center">
621
+ <!-- TODO: Replace with your book image path -->
622
+ <img class="h-56 w-auto rounded shadow-lg mx-auto" src="https://pictures.abebooks.com/isbn/9780915957729-us.jpg" alt="Book Cover: Umdat Al-Salik">
623
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Umdat Al-Salik</h4>
624
+ <p class="text-medium text-gray-500 dark:text-gray-400">J Ahmad ibn Naqib al-Misri</p>
625
+ </li>
626
+
627
+ <!-- Book 3 -->
628
+ <li class="flex-shrink-0 text-center">
629
+ <!-- TODO: Replace with your book image path -->
630
+ <img class="h-56 w-auto rounded shadow-lg mx-auto" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-eKFkgPWywqf1mVm4_DfH_wc6dQF0a0_B0A&s" alt="Book Cover: Minhaj Al-Talibin">
631
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Minhaj Al-Talibin</h4>
632
+ <p class="text-medium text-gray-500 dark:text-gray-400">Imam An-Nawawi</p>
633
+ </li>
634
+
635
+ <!-- Book 4 -->
636
+ <li class="flex-shrink-0 text-center">
637
+ <!-- TODO: Replace with your book image path -->
638
+ <img class="h-56 w-auto rounded shadow-lg mx-auto" src="https://m.media-amazon.com/images/I/914oHKdsbCL._UF1000,1000_QL80_.jpg" alt="Book Cover: Sahih Bukhari">
639
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Sahih Bukhari</h4>
640
+ <p class="text-medium text-gray-500 dark:text-gray-400">Imam Al-Bukhari</p>
641
+ </li>
642
+
643
+ <!-- Book 5 -->
644
+ <li class="flex-shrink-0 text-center">
645
+ <!-- TODO: Replace with your book image path -->
646
+ <img class="h-56 w-auto rounded shadow-lg mx-auto" src="https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1333150690i/8118290.jpg" alt="Book Cover: Sahih Muslim">
647
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Sahih Muslim</h4>
648
+ <p class="text-medium text-gray-500 dark:text-gray-400">Imam Muslim</p>
649
+ </li>
650
+
651
+ </ul>
652
+ </div>
653
+
654
+ <div id="medical-knowledge" class="py-4 bg-gray-50 dark:bg-dark-800">
655
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
656
+ <div class="lg:text-center">
657
+ <p class="py-2 mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
658
+ Medical Knowledge
659
+ </p>
660
+ </div>
661
+ <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
662
+
663
+
664
+ <div class="text-center group relative">
665
+ <a href="https://huggingface.co/datasets/lavita/ChatDoctor-HealthCareMagic-100k" target="_blank" rel="noopener noreferrer" class="block w-full max-w-sm mx-auto overflow-hidden rounded shadow-lg cursor-pointer">
666
+ <img class="h-56 w-auto object-cover mx-auto transition-transform duration-300 ease-in-out group-hover:scale-105" src="https://media.istockphoto.com/id/1471850955/video/reception-in-the-modern-hospital-head-nurse-talking-to-doctors-and-using-digital-tablet.jpg?s=640x640&k=20&c=aohvRMIaZ6R-GGJqjSu7mHdE4mq85d3VjpQRsOZ6LPE=" alt="HealthCare Magic">
667
+ <!-- Overlay Div -->
668
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 hover-overlay"> <!-- Overlay styling -->
669
+ <i class="fas fa-link text-white text-3xl"></i> <!-- Link Icon -->
670
+ </div>
671
+ </a>
672
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">HealthCare Magic</h4>
673
+ <p class="text-medium text-gray-500 dark:text-gray-400">Lavita Dataset</p>
674
+ </div>
675
+
676
+ <div class="text-center group relative">
677
+ <a href="https://www.kaggle.com/datasets/pythonafroz/medquad-medical-question-answer-for-ai-research" target="_blank" rel="noopener noreferrer" class="block w-full max-w-sm mx-auto overflow-hidden rounded shadow-lg cursor-pointer">
678
+ <img class="h-56 w-auto object-cover mx-auto transition-transform duration-300 ease-in-out group-hover:scale-105" src="https://www.expatgo.com/my/wp-content/uploads/2018/09/Monash-University-Malaysia-smart-table-DSC00983.jpg" alt="MedQuad Dataset Cover">
679
+ <!-- Overlay Div -->
680
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 hover-overlay"> <!-- Overlay styling -->
681
+ <i class="fas fa-link text-white text-3xl"></i> <!-- Link Icon -->
682
+ </div>
683
+ </a>
684
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">MedQuad</h4>
685
+ <p class="text-medium text-gray-500 dark:text-gray-400">Medical QnA Dataset</p>
686
+ </div>
687
+
688
+ <div class="text-center group relative">
689
+ <a href="https://huggingface.co/datasets/lavita/ChatDoctor-iCliniq/viewer?row=0" target="_blank" rel="noopener noreferrer" class="block w-full max-w-sm mx-auto overflow-hidden rounded shadow-lg cursor-pointer">
690
+ <img class="h-56 w-auto object-cover mx-auto transition-transform duration-300 ease-in-out group-hover:scale-105" src="https://www.dailyexpress.com.my/uploads/interestNews2/2025/02/Hospital_nurses_FMT.jpg" alt="iCliniq">
691
+ <!-- Overlay Div -->
692
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 hover-overlay"> <!-- Overlay styling -->
693
+ <i class="fas fa-link text-white text-3xl"></i> <!-- Link Icon -->
694
+ </div>
695
+ </a>
696
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">iCliniq</h4>
697
+ <p class="text-medium text-gray-500 dark:text-gray-400">Lavita Dataset</p>
698
+ </div>
699
+
700
+ </div>
701
+ </div>
702
+ </div>
703
+
704
+ <div id="Insurance-knowledge" class="py-4 bg-gray-50 dark:bg-dark-800">
705
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
706
+ <div class="lg:text-center">
707
+ <p class="py-2 mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
708
+ Insurance Knowledge
709
+ </p>
710
+ </div>
711
+ <div class="mt-5 grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 gap-8 justify-items-center">
712
+
713
+
714
+ <div class="text-center group relative">
715
+ <a href="https://www.etiqa.com.my/" target="_blank" rel="noopener noreferrer" class="block w-full max-w-sm mx-auto overflow-hidden rounded shadow-lg cursor-pointer">
716
+ <img class="h-56 w-auto object-cover mx-auto transition-transform duration-300 ease-in-out group-hover:scale-105" src="https://media.superadrianme.com/wp-content/uploads/2023/08/23234221/Screenshot-2023-08-23-at-11.42.05-PM.png" alt="eTiQa">
717
+ <!-- Overlay Div -->
718
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 hover-overlay"> <!-- Overlay styling -->
719
+ <i class="fas fa-link text-white text-3xl"></i> <!-- Link Icon -->
720
+ </div>
721
+ </a>
722
+ <h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">eTiQa</h4>
723
+ <p class="text-medium text-gray-500 dark:text-gray-400">eTiQa Insurance</p>
724
+ </div>
725
+
726
+ </div>
727
+ </div>
728
+ </div>
729
+ </div>
730
+
731
+
732
+ <!-- Contact Section -->
733
+ <div id="contact" class=" py-16 bg-gray-100 dark:bg-dark-800">
734
+ <div class=" max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
735
+ <div class="sm:text-center">
736
+ <h2 class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase">Contact</h2>
737
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
738
+ Get In Touch
739
+ </p>
740
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
741
+ Interested in learning more about our Medical and Islamic RAG system? Reach out to us.
742
+ </p>
743
+ </div>
744
+
745
+ <div class="mt-10">
746
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
747
+ <div class="bg-gray-50 dark:bg-dark-600 p-6 rounded-lg shadow card-hover">
748
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Send us a message</h3>
749
+ <form class="mt-6 space-y-6">
750
+ <div class="floating-label">
751
+ <input type="text" id="name" name="name" required>
752
+ <label for="name">Name</label>
753
+ </div>
754
+
755
+ <div class="floating-label">
756
+ <input type="email" id="email" name="email" required>
757
+ <label for="email">Email</label>
758
+ </div>
759
+
760
+ <div class="floating-label">
761
+ <textarea id="message" name="message" rows="4" required></textarea>
762
+ <label for="message">Message</label>
763
+ </div>
764
+
765
+ <div class="flex items-center">
766
+ <button type="submit" class="px-6 py-3 bg-primary-light hover:bg-primary-dark text-white font-medium rounded-md shadow hover:shadow-lg transition ripple">
767
+ Send Message
768
+ </button>
769
+ <div class="ml-4 flex items-center">
770
+ <span class="text-sm text-gray-500 dark:text-gray-400 mr-2">Dark Mode</span>
771
+ <label class="toggle-switch">
772
+ <input type="checkbox" id="contact-dark-mode">
773
+ <span class="toggle-slider"></span>
774
+ </label>
775
+ </div>
776
+ </div>
777
+ </form>
778
+ </div>
779
+
780
+ <div class="bg-gray-50 dark:bg-dark-600 p-6 rounded-lg shadow card-hover">
781
+ <h3 class="text-lg font-medium text-gray-900 dark:text-white">Project Information</h3>
782
+ <div class="mt-6 space-y-4">
783
+ <div class="flex">
784
+ <div class="flex-shrink-0">
785
+ <i class="fas fa-university text-primary-light dark:text-primary-dark text-xl"></i>
786
+ </div>
787
+ <div class="ml-3 text-base text-gray-600 dark:text-gray-300">
788
+ <p>Computer Science Department</p>
789
+ <p class="mt-1">Final Year Project</p>
790
+ </div>
791
+ </div>
792
+
793
+ <div class="flex">
794
+ <div class="flex-shrink-0">
795
+ <i class="fas fa-user-graduate text-secondary-light dark:text-secondary-dark text-xl"></i>
796
+ </div>
797
+ <div class="ml-3 text-base text-gray-600 dark:text-gray-300">
798
+ <p>Students</p>
799
+ <p class="mt-1">Muhammad Izzmir Danish bin Zulkilfi</p>
800
+ <p class="mt-1">Muhammad Ridhwan Irfan bin Nur Rashid</p>
801
+ </div>
802
+ </div>
803
+
804
+ <div class="flex">
805
+ <div class="flex-shrink-0">
806
+ <i class="fas fa-chalkboard-teacher text-accent-light dark:text-accent-dark text-xl"></i>
807
+ </div>
808
+ <div class="ml-3 text-base text-gray-600 dark:text-gray-300">
809
+ <p>Supervisor</p>
810
+ <p class="mt-1">Assoc Prof. Dr Amelia Ritahani binti Ismail</p>
811
+ </div>
812
+ </div>
813
+
814
+ <div class="flex">
815
+ <div class="flex-shrink-0">
816
+ <i class="fas fa-calendar-alt text-indigo-500 text-xl"></i>
817
+ </div>
818
+ <div class="ml-3 text-base text-gray-600 dark:text-gray-300">
819
+ <p>Academic Year</p>
820
+ <p class="mt-1">2025-2026</p>
821
+ </div>
822
+ </div>
823
+ </div>
824
+
825
+ <div class="mt-8">
826
+ <h4 class="text-sm font-medium text-gray-900 dark:text-white">Follow the Project</h4>
827
+ <div class="mt-2 flex space-x-4">
828
+ <a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
829
+ <i class="fab fa-github text-2xl"></i>
830
+ </a>
831
+ <a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
832
+ <i class="fab fa-researchgate text-2xl"></i>
833
+ </a>
834
+ <a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
835
+ <i class="fab fa-linkedin text-2xl"></i>
836
+ </a>
837
+ <a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
838
+ <i class="fab fa-twitter text-2xl"></i>
839
+ </a>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+ </div>
846
+ </div>
847
+
848
+ <!-- Footer -->
849
+ <footer class="bg-white dark:bg-dark-800">
850
+ <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
851
+ <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
852
+ <div class="px-5 py-2">
853
+ <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300 ripple">About</a>
854
+ </div>
855
+ <div class="px-5 py-2">
856
+ <a href="#features" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300 ripple">Features</a>
857
+ </div>
858
+ <div class="px-5 py-2">
859
+ <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300 ripple">Documentation</a>
860
+ </div>
861
+ <div class="px-5 py-2">
862
+ <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300 ripple">Privacy</a>
863
+ </div>
864
+ <div class="px-5 py-2">
865
+ <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300 ripple">Terms</a>
866
+ </div>
867
+ </nav>
868
+ <div class="mt-8 flex justify-center space-x-6">
869
+ <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
870
+ <span class="sr-only">GitHub</span>
871
+ <i class="fab fa-github text-xl"></i>
872
+ </a>
873
+ <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
874
+ <span class="sr-only">Twitter</span>
875
+ <i class="fab fa-twitter text-xl"></i>
876
+ </a>
877
+ <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
878
+ <span class="sr-only">LinkedIn</span>
879
+ <i class="fab fa-linkedin text-xl"></i>
880
+ </a>
881
+ <a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
882
+ <span class="sr-only">ResearchGate</span>
883
+ <i class="fab fa-researchgate text-xl"></i>
884
+ </a>
885
+ </div>
886
+ <p class="mt-8 text-center text-base text-gray-400 dark:text-gray-500">
887
+ &copy; 2025 MediRAG - Multimodal Swarm-Based Medical RAG System. All rights reserved.
888
+ </p>
889
+ </div>
890
+ </footer>
891
+ <!-- Scroll to Top Button -->
892
+ <div class="scroll-indicator ripple" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
893
+ <i class="fas fa-arrow-up"></i>
894
+ </div>
895
+
896
+ <script>
897
+ // Theme toggle functionality
898
+ const themeToggle = document.getElementById('theme-toggle');
899
+ const html = document.documentElement;
900
+
901
+ themeToggle.addEventListener('click', () => {
902
+ html.classList.toggle('dark');
903
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
904
+ });
905
+
906
+ // Check for saved theme preference
907
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
908
+ html.classList.add('dark');
909
+ } else {
910
+ html.classList.remove('dark');
911
+ }
912
+
913
+ // Create additional swarm particles dynamically
914
+ document.addEventListener('DOMContentLoaded', () => {
915
+ const heroSection = document.querySelector('.lg\\:absolute.lg\\:inset-y-0.lg\\:right-0.lg\\:w-1\\/2');
916
+ if (heroSection) {
917
+ for (let i = 0; i < 10; i++) {
918
+ const particle = document.createElement('div');
919
+ particle.className = 'swarm-particle';
920
+ particle.style.width = `${Math.random() * 6 + 2}px`;
921
+ particle.style.height = particle.style.width;
922
+ particle.style.top = `${Math.random() * 100}%`;
923
+ particle.style.left = `${Math.random() * 100}%`;
924
+ particle.style.animationDelay = `${Math.random() * 10}s`;
925
+
926
+ // Randomly assign a color class
927
+ const colors = ['bg-primary-light', 'bg-secondary-light', 'bg-accent-light',
928
+ 'bg-primary-dark', 'bg-secondary-dark', 'bg-accent-dark'];
929
+ const color = colors[Math.floor(Math.random() * colors.length)];
930
+ particle.classList.add(color);
931
+
932
+ heroSection.appendChild(particle);
933
+ }
934
+ }
935
+
936
+ // Scroll progress indicator
937
+ window.addEventListener('scroll', () => {
938
+ const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
939
+ const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
940
+ const scrollProgress = (scrollTop / scrollHeight) * 100;
941
+ document.querySelector('.scroll-progress').style.width = scrollProgress + '%';
942
+
943
+ // Show/hide scroll to top button
944
+ const scrollIndicator = document.querySelector('.scroll-indicator');
945
+ if (scrollTop > 300) {
946
+ scrollIndicator.classList.add('visible');
947
+ } else {
948
+ scrollIndicator.classList.remove('visible');
949
+ }
950
+
951
+ // Update timeline progress
952
+ const timelineProgress = Math.min(scrollTop / 1000, 1) * 100;
953
+ document.querySelector('.progress-bar').style.width = timelineProgress + '%';
954
+ });
955
+
956
+ // Ripple effect for buttons
957
+ document.querySelectorAll('.ripple').forEach(button => {
958
+ button.addEventListener('click', function(e) {
959
+ const rect = this.getBoundingClientRect();
960
+ const x = e.clientX - rect.left;
961
+ const y = e.clientY - rect.top;
962
+
963
+ const ripple = document.createElement('span');
964
+ ripple.className = 'ripple-effect';
965
+ ripple.style.left = x + 'px';
966
+ ripple.style.top = y + 'px';
967
+
968
+ this.appendChild(ripple);
969
+
970
+ setTimeout(() => {
971
+ ripple.remove();
972
+ }, 600);
973
+ });
974
+ });
975
+
976
+ // Confetti effect for demo button
977
+ document.querySelector('button[class*="Try Demo"]').addEventListener('click', function() {
978
+ for (let i = 0; i < 50; i++) {
979
+ const confetti = document.createElement('div');
980
+ confetti.className = 'confetti';
981
+ confetti.style.left = Math.random() * 100 + 'vw';
982
+ confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
983
+ confetti.style.animationDuration = Math.random() * 3 + 2 + 's';
984
+ document.body.appendChild(confetti);
985
+
986
+ setTimeout(() => {
987
+ confetti.remove();
988
+ }, 5000);
989
+ }
990
+ });
991
+
992
+ // Floating label functionality
993
+ document.querySelectorAll('.floating-label input, .floating-label textarea').forEach(input => {
994
+ input.addEventListener('focus', () => {
995
+ input.nextElementSibling.classList.add('active');
996
+ });
997
+
998
+ input.addEventListener('blur', () => {
999
+ if (!input.value) {
1000
+ input.nextElementSibling.classList.remove('active');
1001
+ }
1002
+ });
1003
+
1004
+ // Initialize if already has value
1005
+ if (input.value) {
1006
+ input.nextElementSibling.classList.add('active');
1007
+ }
1008
+ });
1009
+
1010
+ // Contact form dark mode toggle
1011
+ const contactDarkMode = document.getElementById('contact-dark-mode');
1012
+ contactDarkMode.addEventListener('change', () => {
1013
+ const contactSection = document.getElementById('contact');
1014
+ if (contactDarkMode.checked) {
1015
+ contactSection.classList.add('dark');
1016
+ } else {
1017
+ contactSection.classList.remove('dark');
1018
+ }
1019
+ });
1020
+ });
1021
+ // Duplicate scroller items for seamless looping
1022
+ document.addEventListener('DOMContentLoaded', () => {
1023
+ const scroller = document.querySelector("#reference-scroller");
1024
+ if (scroller) {
1025
+ const scrollerContent = Array.from(scroller.children);
1026
+
1027
+ scrollerContent.forEach(item => {
1028
+ const duplicatedItem = item.cloneNode(true);
1029
+ duplicatedItem.setAttribute("aria-hidden", true);
1030
+ scroller.appendChild(duplicatedItem);
1031
+ });
1032
+ }
1033
+ });
1034
+ </script>
1035
+ </head>
templates/homePage.html ADDED
@@ -0,0 +1,1095 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>MultiDom RAG</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11
+ />
12
+ <link rel="stylesheet" href="style.css" />
13
+ <script>
14
+ tailwind.config = {
15
+ darkMode: "class",
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ primary: {
20
+ dark: "#579be8",
21
+ light: "#3B82F6",
22
+ },
23
+ secondary: {
24
+ dark: "#9F1239",
25
+ light: "#EC4899",
26
+ },
27
+ accent: {
28
+ dark: "#047857",
29
+ light: "#10B981",
30
+ },
31
+ dark: {
32
+ 900: "#0F172A",
33
+ 800: "#1E293B",
34
+ 700: "#334155",
35
+ 600: "#475569",
36
+ },
37
+ },
38
+ fontFamily: {
39
+ sans: ["Inter", "sans-serif"],
40
+ mono: ["Fira Code", "monospace"],
41
+ },
42
+ animation: {
43
+ float: "float 6s ease-in-out infinite",
44
+ "float-fast": "float 4s ease-in-out infinite",
45
+ "spin-slow": "spin 10s linear infinite",
46
+ "pulse-slow": "pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
47
+ "bounce-slow": "bounce 3s infinite",
48
+ wiggle: "wiggle 1s ease-in-out infinite",
49
+ wave: "wave 2s linear infinite",
50
+ blink: "blink 1.5s step-end infinite",
51
+ },
52
+ keyframes: {
53
+ float: {
54
+ "0%, 100%": { transform: "translateY(0)" },
55
+ "50%": { transform: "translateY(-10px)" },
56
+ },
57
+ wiggle: {
58
+ "0%, 100%": { transform: "rotate(-3deg)" },
59
+ "50%": { transform: "rotate(3deg)" },
60
+ },
61
+ wave: {
62
+ "0%": { transform: "rotate(0deg)" },
63
+ "10%": { transform: "rotate(14deg)" },
64
+ "20%": { transform: "rotate(-8deg)" },
65
+ "30%": { transform: "rotate(14deg)" },
66
+ "40%": { transform: "rotate(-4deg)" },
67
+ "50%": { transform: "rotate(10deg)" },
68
+ "60%": { transform: "rotate(0deg)" },
69
+ "100%": { transform: "rotate(0deg)" },
70
+ },
71
+ blink: {
72
+ "0%, 100%": { opacity: "1" },
73
+ "50%": { opacity: "0" },
74
+ },
75
+ },
76
+ },
77
+ },
78
+ };
79
+ </script>
80
+ <style>
81
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
82
+
83
+ body {
84
+ font-family: "Inter", sans-serif;
85
+ transition: all 0.3s ease;
86
+ scroll-behavior: smooth;
87
+ }
88
+
89
+ .gradient-bg {
90
+ background: linear-gradient(
91
+ 135deg,
92
+ #1e40af 0%,
93
+ #9f1239 50%,
94
+ #047857 100%
95
+ );
96
+ }
97
+
98
+ .card-hover {
99
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
100
+ }
101
+
102
+ .card-hover:hover {
103
+ transform: translateY(-5px);
104
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
105
+ 0 10px 10px -5px rgba(0, 0, 0, 0.1);
106
+ }
107
+
108
+ .pulse-animation {
109
+ animation: pulse 2s infinite;
110
+ }
111
+
112
+ @keyframes pulse {
113
+ 0% {
114
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
115
+ }
116
+ 70% {
117
+ box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
118
+ }
119
+ 100% {
120
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
121
+ }
122
+ }
123
+
124
+ .chat-bubble {
125
+ border-radius: 1.5rem;
126
+ position: relative;
127
+ }
128
+
129
+ .chat-bubble:after {
130
+ content: "";
131
+ position: absolute;
132
+ bottom: 0;
133
+ left: 20%;
134
+ width: 0;
135
+ height: 0;
136
+ border: 10px solid transparent;
137
+ border-top-color: #3b82f6;
138
+ border-bottom: 0;
139
+ margin-left: -10px;
140
+ margin-bottom: -10px;
141
+ }
142
+
143
+ .dark .chat-bubble:after {
144
+ border-top-color: #1e40af;
145
+ }
146
+
147
+ .glow {
148
+ filter: drop-shadow(0 0 8px currentColor);
149
+ }
150
+
151
+ .feature-icon {
152
+ transition: all 0.3s ease;
153
+ }
154
+
155
+ .feature-card:hover .feature-icon {
156
+ transform: scale(1.2) rotate(10deg);
157
+ }
158
+
159
+ .swarm-particle {
160
+ position: absolute;
161
+ border-radius: 50%;
162
+ opacity: 0.7;
163
+ animation: swarm-move 15s linear infinite;
164
+ }
165
+
166
+ @keyframes swarm-move {
167
+ 0%,
168
+ 100% {
169
+ transform: translate(0, 0);
170
+ }
171
+ 25% {
172
+ transform: translate(20px, 20px);
173
+ }
174
+ 50% {
175
+ transform: translate(10px, -20px);
176
+ }
177
+ 75% {
178
+ transform: translate(-20px, 10px);
179
+ }
180
+ }
181
+
182
+ .typing-indicator {
183
+ display: flex;
184
+ align-items: center;
185
+ justify-content: center;
186
+ }
187
+
188
+ .typing-dot {
189
+ width: 8px;
190
+ height: 8px;
191
+ margin: 0 2px;
192
+ background-color: currentColor;
193
+ border-radius: 50%;
194
+ display: inline-block;
195
+ animation: typing-dot 1.4s infinite ease-in-out;
196
+ }
197
+
198
+ .typing-dot:nth-child(1) {
199
+ animation-delay: 0s;
200
+ }
201
+
202
+ .typing-dot:nth-child(2) {
203
+ animation-delay: 0.2s;
204
+ }
205
+
206
+ .typing-dot:nth-child(3) {
207
+ animation-delay: 0.4s;
208
+ }
209
+
210
+ @keyframes typing-dot {
211
+ 0%,
212
+ 60%,
213
+ 100% {
214
+ transform: translateY(0);
215
+ }
216
+ 30% {
217
+ transform: translateY(-5px);
218
+ }
219
+ }
220
+
221
+ .progress-bar {
222
+ height: 4px;
223
+ width: 0;
224
+ background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);
225
+ transition: width 0.4s ease;
226
+ }
227
+
228
+ .scroll-indicator {
229
+ position: fixed;
230
+ bottom: 30px;
231
+ right: 30px;
232
+ width: 50px;
233
+ height: 50px;
234
+ border-radius: 50%;
235
+ background-color: #3b82f6;
236
+ color: white;
237
+ display: flex;
238
+ align-items: center;
239
+ justify-content: center;
240
+ cursor: pointer;
241
+ opacity: 0;
242
+ transform: translateY(20px);
243
+ transition: all 0.3s ease;
244
+ z-index: 999;
245
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
246
+ }
247
+
248
+ .scroll-indicator.visible {
249
+ opacity: 1;
250
+ transform: translateY(0);
251
+ }
252
+
253
+ .scroll-indicator:hover {
254
+ transform: translateY(-5px) scale(1.1);
255
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
256
+ }
257
+
258
+ .tooltip {
259
+ position: relative;
260
+ }
261
+
262
+ .tooltip-text {
263
+ visibility: hidden;
264
+ width: 120px;
265
+ background-color: #1e293b;
266
+ color: #fff;
267
+ text-align: center;
268
+ border-radius: 6px;
269
+ padding: 5px;
270
+ position: absolute;
271
+ z-index: 1;
272
+ bottom: 125%;
273
+ left: 50%;
274
+ margin-left: -60px;
275
+ opacity: 0;
276
+ transition: opacity 0.3s;
277
+ }
278
+
279
+ .tooltip:hover .tooltip-text {
280
+ visibility: visible;
281
+ opacity: 1;
282
+ }
283
+
284
+ .parallax {
285
+ background-attachment: fixed;
286
+ background-position: center;
287
+ background-repeat: no-repeat;
288
+ background-size: cover;
289
+ }
290
+
291
+ .floating-label {
292
+ position: relative;
293
+ margin-bottom: 20px;
294
+ }
295
+
296
+ .floating-label input,
297
+ .floating-label textarea {
298
+ font-size: 16px;
299
+ padding: 20px 16px 10px;
300
+ display: block;
301
+ width: 100%;
302
+ border: 1px solid #cbd5e1;
303
+ border-radius: 8px;
304
+ background: #f8fafc;
305
+ }
306
+
307
+ .floating-label input:focus,
308
+ .floating-label textarea:focus {
309
+ outline: none;
310
+ border-color: #3b82f6;
311
+ }
312
+
313
+ .floating-label label {
314
+ color: #64748b;
315
+ font-size: 16px;
316
+ position: absolute;
317
+ pointer-events: none;
318
+ left: 16px;
319
+ top: 16px;
320
+ transition: 0.2s ease all;
321
+ }
322
+
323
+ .floating-label input:focus ~ label,
324
+ .floating-label input:valid ~ label,
325
+ .floating-label textarea:focus ~ label,
326
+ .floating-label textarea:valid ~ label {
327
+ top: 6px;
328
+ font-size: 12px;
329
+ color: #3b82f6;
330
+ }
331
+
332
+ .dark .floating-label input,
333
+ .dark .floating-label textarea {
334
+ background: #1e293b;
335
+ border-color: #334155;
336
+ color: #f8fafc;
337
+ }
338
+
339
+ .dark .floating-label label {
340
+ color: #94a3b8;
341
+ }
342
+
343
+ .dark .floating-label input:focus ~ label,
344
+ .dark .floating-label input:valid ~ label,
345
+ .dark .floating-label textarea:focus ~ label,
346
+ .dark .floating-label textarea:valid ~ label {
347
+ color: #60a5fa;
348
+ }
349
+
350
+ .toggle-switch {
351
+ position: relative;
352
+ display: inline-block;
353
+ width: 60px;
354
+ height: 34px;
355
+ }
356
+
357
+ .toggle-switch input {
358
+ opacity: 0;
359
+ width: 0;
360
+ height: 0;
361
+ }
362
+
363
+ .toggle-slider {
364
+ position: absolute;
365
+ cursor: pointer;
366
+ top: 0;
367
+ left: 0;
368
+ right: 0;
369
+ bottom: 0;
370
+ background-color: #cbd5e1;
371
+ transition: 0.4s;
372
+ border-radius: 34px;
373
+ }
374
+
375
+ .toggle-slider:before {
376
+ position: absolute;
377
+ content: "";
378
+ height: 26px;
379
+ width: 26px;
380
+ left: 4px;
381
+ bottom: 4px;
382
+ background-color: white;
383
+ transition: 0.4s;
384
+ border-radius: 50%;
385
+ }
386
+
387
+ input:checked + .toggle-slider {
388
+ background-color: #3b82f6;
389
+ }
390
+
391
+ input:checked + .toggle-slider:before {
392
+ transform: translateX(26px);
393
+ }
394
+
395
+ .ripple {
396
+ position: relative;
397
+ overflow: hidden;
398
+ }
399
+
400
+ .ripple-effect {
401
+ position: absolute;
402
+ border-radius: 50%;
403
+ background-color: rgba(255, 255, 255, 0.4);
404
+ transform: scale(0);
405
+ animation: ripple 0.6s linear;
406
+ pointer-events: none;
407
+ }
408
+
409
+ @keyframes ripple {
410
+ to {
411
+ transform: scale(4);
412
+ opacity: 0;
413
+ }
414
+ }
415
+
416
+ .scroll-progress {
417
+ position: fixed;
418
+ top: 0;
419
+ left: 0;
420
+ width: 0%;
421
+ height: 4px;
422
+ background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);
423
+ z-index: 1000;
424
+ transition: width 0.1s;
425
+ }
426
+
427
+ .confetti {
428
+ position: fixed;
429
+ width: 10px;
430
+ height: 10px;
431
+ background-color: #3b82f6;
432
+ opacity: 0;
433
+ z-index: 9999;
434
+ animation: confetti-fall 5s linear forwards;
435
+ }
436
+
437
+ @keyframes confetti-fall {
438
+ 0% {
439
+ transform: translateY(-100px) rotate(0deg);
440
+ opacity: 1;
441
+ }
442
+ 100% {
443
+ transform: translateY(100vh) rotate(360deg);
444
+ opacity: 0;
445
+ }
446
+ }
447
+ .hero-slide {
448
+ position: absolute;
449
+ inset: 0;
450
+ width: 100%;
451
+ height: 100%;
452
+ object-fit: cover;
453
+ opacity: 0;
454
+ transition: opacity 1.5s ease-in-out;
455
+ /* This animation adds a subtle zoom effect to the images */
456
+ animation: kenBurns 15s ease-out forwards;
457
+ }
458
+
459
+ .hero-slide.active {
460
+ opacity: 1;
461
+ }
462
+
463
+ @keyframes kenBurns {
464
+ 0% {
465
+ transform: scale(1.1);
466
+ }
467
+ 100% {
468
+ transform: scale(1);
469
+ }
470
+ }
471
+ </style>
472
+ </head>
473
+ <body
474
+ class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen"
475
+ >
476
+ <!-- Scroll Progress Bar -->
477
+ <div class="scroll-progress"></div>
478
+
479
+ <!-- Navigation -->
480
+ <nav class="bg-white dark:bg-dark-800 shadow-lg sticky top-0 z-50">
481
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
482
+ <div class="flex justify-between h-16 items-center relative">
483
+ <div class="flex items-center">
484
+ <i
485
+ class="fa-solid fa-file-medical text-primary-light dark:text-primary-dark text-2xl mr-5"
486
+ ></i>
487
+ <span
488
+ class="text-2xl font-bold text-primary-light dark:text-primary-dark"
489
+ >MultiDom RAG</span
490
+ >
491
+ </div>
492
+ <div class="hidden sm:flex flex-1 justify-center space-x-8">
493
+ <a
494
+ href="{{ url_for('homePage') }}"
495
+ class="border-primary-light dark:border-primary-dark text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse"
496
+ >Home</a
497
+ >
498
+
499
+ <div class="relative group">
500
+ <button
501
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse"
502
+ >
503
+ Demo
504
+ <svg
505
+ class="w-4 h-4 ml-1"
506
+ fill="none"
507
+ stroke="currentColor"
508
+ viewBox="0 0 24 24"
509
+ xmlns="http://www.w3.org/2000/svg"
510
+ >
511
+ <path
512
+ stroke-linecap="round"
513
+ stroke-linejoin="round"
514
+ stroke-width="2"
515
+ d="M19 9l-7 7-7-7"
516
+ ></path>
517
+ </svg>
518
+ </button>
519
+
520
+ <!-- Dropdown menu -->
521
+ <div
522
+ class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-dark-700 ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out z-50"
523
+ >
524
+ <div class="py-1" role="menu" aria-orientation="vertical">
525
+ <a
526
+ href="{{ url_for('medical_page') }}"
527
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
528
+ role="menuitem"
529
+ >Medical</a
530
+ >
531
+ <a
532
+ href="{{ url_for('islamic_page') }}"
533
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
534
+ role="menuitem"
535
+ >Islamic</a
536
+ >
537
+ <a
538
+ href="{{ url_for('insurance_page') }}"
539
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
540
+ role="menuitem"
541
+ >Insurance</a
542
+ >
543
+ </div>
544
+ </div>
545
+ </div>
546
+
547
+ <a
548
+ href="{{ url_for('about') }}"
549
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse"
550
+ >About</a
551
+ >
552
+ </div>
553
+
554
+ <div class="hidden sm:flex items-center space-x-4">
555
+ <button
556
+ id="theme-toggle"
557
+ type="button"
558
+ class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light dark:focus:ring-primary-dark ripple"
559
+ >
560
+ <i class="fas fa-moon dark:hidden"></i>
561
+ <i class="fas fa-sun hidden dark:block"></i>
562
+ </button>
563
+ <button
564
+ onclick="window.location.href = '{{ url_for('medical_page') }}'"
565
+ class="ml-4 bg-primary-light dark:bg-primary-dark hover:bg-primary-dark dark:hover:bg-primary-light text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 hover:scale-105 transform ripple"
566
+ >
567
+ Try Demo
568
+ </button>
569
+ </div>
570
+ <div class="-mr-2 flex items-center sm:hidden">
571
+ <button
572
+ type="button"
573
+ class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-light dark:focus:ring-primary-dark ripple"
574
+ aria-controls="mobile-menu"
575
+ aria-expanded="false"
576
+ >
577
+ <span class="sr-only">Open main menu</span>
578
+ <i class="fas fa-bars"></i>
579
+ </button>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </nav>
584
+
585
+ <!-- Wrapper for the hero section to create white space on the sides -->
586
+ <div class="bg-gray-100 px-4 py-4 dark:bg-dark-900">
587
+ <!-- New Hero Section (Constrained width and centered) -->
588
+ <div
589
+ id="home"
590
+ class="relative h-[70vh] max-w-8xl mx-auto flex items-center justify-center text-center text-white overflow-hidden rounded-xl shadow-2xl"
591
+ >
592
+ <!-- Slideshow Container -->
593
+ <!-- This container will now fill its parent -->
594
+ <div id="hero-slideshow" class="absolute inset-0 w-full h-full z-0">
595
+ <!-- Slide 1: Medical -->
596
+ <img
597
+ src="https://apicms.thestar.com.my/uploads/images/2019/11/20/397347.jpg"
598
+ alt="MedicalBg"
599
+ class="hero-slide active object-top"
600
+ />
601
+ <!-- Slide 2: Islamic -->
602
+ <img
603
+ src="https://images.unsplash.com/photo-1579305796288-c534f6cf17ab?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG1lY2NhJTIwa2FhYmF8ZW58MHx8MHx8fDA%3D&fm=jpg&q=60&w=3000"
604
+ alt="IslamicBg"
605
+ class="hero-slide object-center"
606
+ />
607
+ <!-- Slide 3: Insurance -->
608
+ <img
609
+ src="https://www.worldfinance.com/wp-content/uploads/2015/01/Etiqa-Insurance.jpg"
610
+ alt="InsuranceBg"
611
+ class="hero-slide object-top"
612
+ />
613
+ </div>
614
+
615
+ <!-- Dark Overlay -->
616
+ <div class="absolute inset-0 bg-black/65 z-10"></div>
617
+
618
+ <!-- Centered Content (Adjusted for new height) -->
619
+ <div class="relative z-20 px-4 animate-fade-in">
620
+ <h1
621
+ class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl"
622
+ >
623
+ <span class="block">Multimodal Swarm-Based RAG</span>
624
+ <span class="block text-blue-400 mt-2">for Domains Specific</span>
625
+ </h1>
626
+ <p
627
+ class="mt-4 max-w-2xl mx-auto text-lg text-gray-200 sm:text-xl md:mt-6"
628
+ >
629
+ A versatile, multi-agent system combining text and images to provide
630
+ deep, accurate, and context-aware information for a wide range of
631
+ fields.
632
+ </p>
633
+ <div class="mt-8 flex justify-center gap-4">
634
+ <a
635
+ href="{{ url_for('medical_page') }}"
636
+ class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 hover:bg-blue-800 md:text-lg transition-transform transform hover:scale-105"
637
+ >
638
+ Get Started
639
+ </a>
640
+ <a
641
+ href="{{ url_for('about') }}"
642
+ class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-primary hover:bg-blue-200 hover:text-blue-800 md:text-lg transition-transform transform hover:scale-105"
643
+ >
644
+ Learn More
645
+ </a>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+
651
+ <!-- START: New Domains Section -->
652
+ <div id="domains" class="py-16 bg-white dark:bg-dark-900">
653
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
654
+ <div class="lg:text-center">
655
+ <h2
656
+ class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase"
657
+ >
658
+ Domains
659
+ </h2>
660
+ <p
661
+ class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
662
+ >
663
+ Multiple Fields of Expertise
664
+ </p>
665
+ <p
666
+ class="mt-4 max-w-3xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto"
667
+ >
668
+ Our RAG system is trained to navigate the unique terminologies and
669
+ complex data of distinct, high-stakes domains. Click any domain to
670
+ try the demo.
671
+ </p>
672
+ </div>
673
+
674
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-20">
675
+ <!-- Domain 1: Medical -->
676
+ <a
677
+ href="{{ url_for('medical_page') }}"
678
+ class="block rounded-lg shadow-lg bg-white dark:bg-dark-800 overflow-hidden transition-all duration-300 ease-in-out hover:shadow-2xl hover:shadow-primary-light/20 dark:hover:shadow-primary-dark/20 hover:-translate-y-2"
679
+ >
680
+ <img
681
+ class="w-full h-48 object-cover"
682
+ src="https://www.malaymail.com/malaymail/uploads/images/2023/09/05/144179.jpg"
683
+ alt="Medical Domain"
684
+ />
685
+ <div class="p-6">
686
+ <div class="flex items-center space-x-3">
687
+ <i
688
+ class="fa-solid fa-heart-pulse text-2xl text-primary-light dark:text-primary-dark"
689
+ ></i>
690
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
691
+ Medical
692
+ </h3>
693
+ </div>
694
+ <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
695
+ Analyze medical records, and diagnostic images with high
696
+ accuracy.
697
+ </p>
698
+ </div>
699
+ </a>
700
+
701
+ <!-- Domain 2: Islamic -->
702
+ <a
703
+ href="{{ url_for('islamic_page') }}"
704
+ class="block rounded-lg shadow-lg bg-white dark:bg-dark-800 overflow-hidden transition-all duration-300 ease-in-out hover:shadow-2xl hover:shadow-accent-light/20 dark:hover:shadow-accent-dark/20 hover:-translate-y-2"
705
+ >
706
+ <img
707
+ class="w-full h-48 object-cover"
708
+ src="https://alwisequranacademy.com/wp-content/uploads/2025/09/Quran-reading-classes-in-Malaysia.jpg"
709
+ alt="Islamic Domain"
710
+ />
711
+ <div class="p-6">
712
+ <div class="flex items-center space-x-3">
713
+ <i
714
+ class="fa-solid fa-moon text-2xl text-accent-light dark:text-accent-dark"
715
+ ></i>
716
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
717
+ Islamic
718
+ </h3>
719
+ </div>
720
+ <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
721
+ Retrieve and synthesize knowledge from vast libraries of
722
+ historical texts and scholarly interpretations.
723
+ </p>
724
+ </div>
725
+ </a>
726
+
727
+ <!-- Domain 3: Insurance -->
728
+ <a
729
+ href="{{ url_for('insurance_page') }}"
730
+ class="block rounded-lg shadow-lg bg-white dark:bg-dark-800 overflow-hidden transition-all duration-300 ease-in-out hover:shadow-2xl hover:shadow-secondary-light/20 dark:hover:shadow-secondary-dark/20 hover:-translate-y-2"
731
+ >
732
+ <img
733
+ class="w-full h-48 object-bottom"
734
+ src="https://theedgemalaysia.com/_next/image?url=https%3A%2F%2Fassets.theedgemarkets.com%2FEtiqa_TEM1464_20230321165006_theedgemarkets.jpg&w=1920&q=75"
735
+ alt="Insurance Domain"
736
+ />
737
+ <div class="p-6">
738
+ <div class="flex items-center space-x-3">
739
+ <i
740
+ class="fa-solid fa-shield-halved text-2xl text-amber-400 dark:text-amber-400"
741
+ ></i>
742
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
743
+ Insurance
744
+ </h3>
745
+ </div>
746
+ <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
747
+ Process claims, analyze policy documents, and assess risk with
748
+ multimodal data inputs.
749
+ </p>
750
+ </div>
751
+ </a>
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <!-- Features Section -->
757
+ <div
758
+ id="features"
759
+ class="sm:text-center py-12 bg-gray-100 dark:bg-dark-800"
760
+ >
761
+ <div class="sm:text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
762
+ <div class="lg:text-center">
763
+ <h2
764
+ class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase"
765
+ >
766
+ Features
767
+ </h2>
768
+ <p
769
+ class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
770
+ >
771
+ Advanced Information Retrieval System
772
+ </p>
773
+ <p
774
+ class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto"
775
+ >
776
+ Our system combines cutting-edge technologies to deliver
777
+ comprehensive insights across all fields.
778
+ </p>
779
+ </div>
780
+
781
+ <div class="mt-10">
782
+ <div
783
+ class="space-y-5"
784
+ >
785
+ <div
786
+ class="relative card-hover bg-white dark:bg-dark-700 p-6 rounded-lg shadow-lg feature-card"
787
+ >
788
+ <div
789
+ class="absolute -top-6 left-6 rounded-full p-4 bg-primary-light dark:bg-primary-dark text-white feature-icon animate-float"
790
+ >
791
+ <i class="fas fa-robot text-xl"></i>
792
+ </div>
793
+ <h3
794
+ class="mt-2 text-xl leading-6 font-medium text-gray-900 dark:text-white"
795
+ >
796
+ Swarm-Based Multi-Agent System
797
+ </h3>
798
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
799
+ Specialized agents collaboratively query diverse knowledge
800
+ bases from medical databases to classical Islamic texts to
801
+ retrieve and synthesize the most relevant information.
802
+ </p>
803
+ </div>
804
+
805
+ <div
806
+ class="relative card-hover bg-white dark:bg-dark-700 p-6 rounded-lg shadow-lg feature-card"
807
+ >
808
+ <div
809
+ class="absolute -top-6 left-6 rounded-full p-4 bg-secondary-light dark:bg-secondary-dark text-white feature-icon animate-float"
810
+ style="animation-delay: 1s"
811
+ >
812
+ <i class="fas fa-images text-xl animate-wiggle"></i>
813
+ </div>
814
+ <h3
815
+ class="mt-2 text-xl leading-6 font-medium text-gray-900 dark:text-white"
816
+ >
817
+ Multimodal Integration
818
+ </h3>
819
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
820
+ Processes both textual and visual data, including research
821
+ papers, notes, image, and documents for comprehensive
822
+ analysis.
823
+ </p>
824
+ </div>
825
+
826
+ <div
827
+ class="relative card-hover bg-white dark:bg-dark-700 p-6 rounded-lg shadow-lg feature-card"
828
+ >
829
+ <div
830
+ class="absolute -top-6 left-6 rounded-full p-4 bg-accent-light dark:bg-accent-dark text-white feature-icon animate-float"
831
+ style="animation-delay: 2s"
832
+ >
833
+ <i class="fas fa-book-medical text-xl animate-wave"></i>
834
+ </div>
835
+ <h3
836
+ class="mt-2 text-xl leading-6 font-medium text-gray-900 dark:text-white"
837
+ >
838
+ Retrieval-Augmented Generation
839
+ </h3>
840
+ <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
841
+ Combines information retrieval with generative AI to provide
842
+ accurate, context-aware answers with verifiable citations
843
+ from both medical journals and scholarly Islamic sources.
844
+ </p>
845
+ </div>
846
+ </div>
847
+ </div>
848
+
849
+ </div>
850
+ </div>
851
+ </div>
852
+
853
+ <!-- Technology Stack -->
854
+ <div class="sm:text-center py-12 bg-gray-50 dark:bg-dark-900">
855
+ <div class="sm:text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
856
+ <div class="lg:text-center">
857
+ <h2
858
+ class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase"
859
+ >
860
+ Technology Stack
861
+ </h2>
862
+ <p
863
+ class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
864
+ >
865
+ Powered by Cutting-Edge Technologies
866
+ </p>
867
+ </div>
868
+
869
+ <div class="mt-10 grid grid-cols-2 gap-8 md:grid-cols-4">
870
+ <div class="col-span-1 flex justify-center">
871
+ <div class="flex items-center">
872
+ <i
873
+ class="fab fa-python text-5xl text-blue-500 mr-3 animate-float"
874
+ style="animation-delay: 0s"
875
+ ></i>
876
+ <span class="text-lg font-medium text-gray-900 dark:text-white"
877
+ >Flask</span
878
+ >
879
+ </div>
880
+ </div>
881
+ <div class="col-span-1 flex justify-center">
882
+ <div class="flex items-center">
883
+ <i
884
+ class="fa-solid fa-users-between-lines text-5xl text-purple-500 mr-3 animate-float"
885
+ style="animation-delay: 0.5s"
886
+ ></i>
887
+ <span class="text-lg font-medium text-gray-900 dark:text-white"
888
+ >Swarm-Based Agent</span
889
+ >
890
+ </div>
891
+ </div>
892
+ <div class="col-span-1 flex justify-center">
893
+ <div class="flex items-center">
894
+ <i
895
+ class="fas fa-database text-5xl text-green-500 mr-3 animate-float"
896
+ style="animation-delay: 1s"
897
+ ></i>
898
+ <span class="text-lg font-medium text-gray-900 dark:text-white"
899
+ >ChromaDB</span
900
+ >
901
+ </div>
902
+ </div>
903
+ <div class="col-span-1 flex justify-center">
904
+ <div class="flex items-center">
905
+ <i
906
+ class="fas fa-robot text-5xl text-red-500 mr-3 animate-float"
907
+ style="animation-delay: 1.5s"
908
+ ></i>
909
+ <span class="text-lg font-medium text-gray-900 dark:text-white"
910
+ >Gemini</span
911
+ >
912
+ </div>
913
+ </div>
914
+ </div>
915
+ </div>
916
+ </div>
917
+
918
+ <!-- Scroll to Top Button -->
919
+ <div
920
+ class="scroll-indicator ripple"
921
+ onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
922
+ >
923
+ <i class="fas fa-arrow-up"></i>
924
+ </div>
925
+
926
+ <script>
927
+ // Theme toggle functionality
928
+ const themeToggle = document.getElementById("theme-toggle");
929
+ const html = document.documentElement;
930
+
931
+ themeToggle.addEventListener("click", () => {
932
+ html.classList.toggle("dark");
933
+ localStorage.setItem(
934
+ "theme",
935
+ html.classList.contains("dark") ? "dark" : "light"
936
+ );
937
+ });
938
+
939
+ // Check for saved theme preference
940
+ if (
941
+ localStorage.getItem("theme") === "dark" ||
942
+ (!localStorage.getItem("theme") &&
943
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
944
+ ) {
945
+ html.classList.add("dark");
946
+ } else {
947
+ html.classList.remove("dark");
948
+ }
949
+
950
+ // Create additional swarm particles dynamically
951
+ document.addEventListener("DOMContentLoaded", () => {
952
+ const heroSection = document.querySelector(
953
+ ".lg\\:absolute.lg\\:inset-y-0.lg\\:right-0.lg\\:w-1\\/2"
954
+ );
955
+ if (heroSection) {
956
+ for (let i = 0; i < 10; i++) {
957
+ const particle = document.createElement("div");
958
+ particle.className = "swarm-particle";
959
+ particle.style.width = `${Math.random() * 6 + 2}px`;
960
+ particle.style.height = particle.style.width;
961
+ particle.style.top = `${Math.random() * 100}%`;
962
+ particle.style.left = `${Math.random() * 100}%`;
963
+ particle.style.animationDelay = `${Math.random() * 10}s`;
964
+
965
+ // Randomly assign a color class
966
+ const colors = [
967
+ "bg-primary-light",
968
+ "bg-secondary-light",
969
+ "bg-accent-light",
970
+ "bg-primary-dark",
971
+ "bg-secondary-dark",
972
+ "bg-accent-dark",
973
+ ];
974
+ const color = colors[Math.floor(Math.random() * colors.length)];
975
+ particle.classList.add(color);
976
+
977
+ heroSection.appendChild(particle);
978
+ }
979
+ }
980
+
981
+ // Scroll progress indicator
982
+ window.addEventListener("scroll", () => {
983
+ const scrollTop =
984
+ document.documentElement.scrollTop || document.body.scrollTop;
985
+ const scrollHeight =
986
+ document.documentElement.scrollHeight -
987
+ document.documentElement.clientHeight;
988
+ const scrollProgress = (scrollTop / scrollHeight) * 100;
989
+ document.querySelector(".scroll-progress").style.width =
990
+ scrollProgress + "%";
991
+
992
+ // Show/hide scroll to top button
993
+ const scrollIndicator = document.querySelector(".scroll-indicator");
994
+ if (scrollTop > 300) {
995
+ scrollIndicator.classList.add("visible");
996
+ } else {
997
+ scrollIndicator.classList.remove("visible");
998
+ }
999
+
1000
+ // Update timeline progress
1001
+ const timelineProgress = Math.min(scrollTop / 3000, 1) * 100;
1002
+ document.querySelector(".progress-bar").style.width =
1003
+ timelineProgress + "%";
1004
+ });
1005
+
1006
+ // Ripple effect for buttons
1007
+ document.querySelectorAll(".ripple").forEach((button) => {
1008
+ button.addEventListener("click", function (e) {
1009
+ const rect = this.getBoundingClientRect();
1010
+ const x = e.clientX - rect.left;
1011
+ const y = e.clientY - rect.top;
1012
+
1013
+ const ripple = document.createElement("span");
1014
+ ripple.className = "ripple-effect";
1015
+ ripple.style.left = x + "px";
1016
+ ripple.style.top = y + "px";
1017
+
1018
+ this.appendChild(ripple);
1019
+
1020
+ setTimeout(() => {
1021
+ ripple.remove();
1022
+ }, 600);
1023
+ });
1024
+ });
1025
+
1026
+ // Confetti effect for demo button
1027
+ document
1028
+ .querySelector('button[class*="Try Demo"]')
1029
+ .addEventListener("click", function () {
1030
+ for (let i = 0; i < 50; i++) {
1031
+ const confetti = document.createElement("div");
1032
+ confetti.className = "confetti";
1033
+ confetti.style.left = Math.random() * 100 + "vw";
1034
+ confetti.style.backgroundColor = `hsl(${
1035
+ Math.random() * 360
1036
+ }, 100%, 50%)`;
1037
+ confetti.style.animationDuration = Math.random() * 3 + 2 + "s";
1038
+ document.body.appendChild(confetti);
1039
+
1040
+ setTimeout(() => {
1041
+ confetti.remove();
1042
+ }, 5000);
1043
+ }
1044
+ });
1045
+
1046
+ // Floating label functionality
1047
+ document
1048
+ .querySelectorAll(".floating-label input, .floating-label textarea")
1049
+ .forEach((input) => {
1050
+ input.addEventListener("focus", () => {
1051
+ input.nextElementSibling.classList.add("active");
1052
+ });
1053
+
1054
+ input.addEventListener("blur", () => {
1055
+ if (!input.value) {
1056
+ input.nextElementSibling.classList.remove("active");
1057
+ }
1058
+ });
1059
+
1060
+ // Initialize if already has value
1061
+ if (input.value) {
1062
+ input.nextElementSibling.classList.add("active");
1063
+ }
1064
+ });
1065
+
1066
+ // Contact form dark mode toggle
1067
+ const contactDarkMode = document.getElementById("contact-dark-mode");
1068
+ contactDarkMode.addEventListener("change", () => {
1069
+ const contactSection = document.getElementById("contact");
1070
+ if (contactDarkMode.checked) {
1071
+ contactSection.classList.add("dark");
1072
+ } else {
1073
+ contactSection.classList.remove("dark");
1074
+ }
1075
+ });
1076
+ });
1077
+ </script>
1078
+ <script>
1079
+ document.addEventListener("DOMContentLoaded", function () {
1080
+ const slideshow = document.getElementById("hero-slideshow");
1081
+ const slides = slideshow.querySelectorAll(".hero-slide");
1082
+ let currentSlide = 0;
1083
+
1084
+ function showNextSlide() {
1085
+ slides[currentSlide].classList.remove("active");
1086
+ currentSlide = (currentSlide + 1) % slides.length;
1087
+ slides[currentSlide].classList.add("active");
1088
+ }
1089
+
1090
+ // Change slide every 7 seconds
1091
+ setInterval(showNextSlide, 3000);
1092
+ });
1093
+ </script>
1094
+ </body>
1095
+ </html>
templates/insurance_page.html ADDED
@@ -0,0 +1,398 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>MultiDom RAG - Insurance</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11
+ />
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: "class",
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: { dark: "#579be8", light: "#3B82F6" },
19
+ secondary: { dark: "#9F1239", light: "#EC4899" },
20
+ accent: { dark: "#047857", light: "#10B981" },
21
+ dark: { 900: "#0F172A", 800: "#1E293B", 700: "#334155" },
22
+ },
23
+ fontFamily: { sans: ["Inter", "sans-serif"] },
24
+ animation: {
25
+ float: "float 6s ease-in-out infinite",
26
+ "spin-slow": "spin 10s linear infinite",
27
+ },
28
+ keyframes: {
29
+ float: {
30
+ "0%, 100%": { transform: "translateY(0)" },
31
+ "50%": { transform: "translateY(-10px)" },
32
+ },
33
+ },
34
+ },
35
+ },
36
+ };
37
+ </script>
38
+ <style>
39
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
40
+ body {
41
+ font-family: "Inter", sans-serif;
42
+ scroll-behavior: smooth;
43
+ }
44
+ details > summary {
45
+ list-style: none;
46
+ }
47
+ details > summary::-webkit-details-marker {
48
+ display: none;
49
+ }
50
+ details > summary::before {
51
+ content: "\f078";
52
+ font-family: "Font Awesome 6 Free";
53
+ font-weight: 900;
54
+ margin-right: 0.5rem;
55
+ display: inline-block;
56
+ transition: transform 0.2s ease-in-out;
57
+ }
58
+ details[open] > summary::before {
59
+ transform: rotate(-180deg);
60
+ }
61
+ .scroll-progress {
62
+ position: fixed;
63
+ top: 0;
64
+ left: 0;
65
+ width: 0%;
66
+ height: 4px;
67
+ background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);
68
+ z-index: 1000;
69
+ transition: width 0.1s;
70
+ }
71
+ .ripple {
72
+ position: relative;
73
+ overflow: hidden;
74
+ }
75
+ .ripple-effect {
76
+ position: absolute;
77
+ border-radius: 50%;
78
+ background-color: rgba(255, 255, 255, 0.4);
79
+ transform: scale(0);
80
+ animation: ripple 0.6s linear;
81
+ pointer-events: none;
82
+ }
83
+ @keyframes ripple {
84
+ to {
85
+ transform: scale(4);
86
+ opacity: 0;
87
+ }
88
+ }
89
+ </style>
90
+ </head>
91
+ <body
92
+ class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200"
93
+ id="insurance_page"
94
+ >
95
+ <div class="scroll-progress"></div>
96
+ <nav class="bg-white dark:bg-dark-800 shadow-lg sticky top-0 z-40">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="flex justify-between h-16 items-center">
99
+ <div class="flex items-center">
100
+ <i
101
+ class="fa-solid fa-file-medical text-amber-400 dark:text-amber-400 text-2xl mr-5"
102
+ ></i>
103
+ <span class="text-2xl font-bold text-amber-400 dark:text-amber-400"
104
+ >MultiDom RAG</span
105
+ >
106
+ </div>
107
+ <div class="hidden sm:flex flex-1 justify-center space-x-8">
108
+ <a
109
+ href="{{ url_for('homePage') }}"
110
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-xl hover:animate-pulse"
111
+ >Home</a
112
+ >
113
+ <div class="relative group">
114
+ <button
115
+ class="border-amber-400 dark:border-amber-400 text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-xl border-b-2"
116
+ >
117
+ Demo
118
+ <svg
119
+ class="w-4 h-4 ml-1"
120
+ fill="none"
121
+ stroke="currentColor"
122
+ viewBox="0 0 24 24"
123
+ >
124
+ <path
125
+ stroke-linecap="round"
126
+ stroke-linejoin="round"
127
+ stroke-width="2"
128
+ d="M19 9l-7 7-7-7"
129
+ ></path>
130
+ </svg>
131
+ </button>
132
+ <div
133
+ class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-52 rounded-md shadow-lg bg-white dark:bg-dark-700 ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"
134
+ >
135
+ <div class="py-1">
136
+ <a
137
+ href="{{ url_for('medical_page') }}"
138
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
139
+ >Medical</a
140
+ >
141
+ <a
142
+ href="{{ url_for('islamic_page') }}"
143
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
144
+ >Islamic</a
145
+ >
146
+ <a
147
+ href="{{ url_for('insurance_page') }}"
148
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600 font-semibold"
149
+ >Insurance (Active)</a
150
+ >
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <a
155
+ href="{{ url_for('about') }}"
156
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-xl hover:animate-pulse"
157
+ >About</a
158
+ >
159
+ </div>
160
+ <div class="hidden sm:flex items-center space-x-4">
161
+ <a
162
+ href="{{ url_for('clear_insurance_chat') }}"
163
+ class="p-2 text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-700 rounded-full transition-colors"
164
+ title="Clear Chat History"
165
+ >
166
+ <i class="fas fa-trash-alt"></i>
167
+ </a>
168
+ <button
169
+ id="theme-toggle"
170
+ type="button"
171
+ class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light dark:focus:ring-primary-dark ripple"
172
+ >
173
+ <i class="fas fa-moon dark:hidden"></i
174
+ ><i class="fas fa-sun hidden dark:block"></i>
175
+ </button>
176
+ <a
177
+ class="ml-4 bg-amber-400 dark:bg-amber-400 text-white text-md px-6 py-2 rounded-md font-medium"
178
+ >Insurance</a
179
+ >
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </nav>
184
+
185
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
186
+ <div
187
+ id="chat-history"
188
+ class="max-w-5xl mx-auto px-4 py-8 pt-12 pb-40 space-y-8"
189
+ >
190
+ {% if not history %}
191
+ <div class="text-center py-10">
192
+ <i
193
+ class="fa-solid fa-shield-halved text-amber-400 dark:text-amber-400 text-6xl mb-4 animate-float"
194
+ ></i>
195
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">
196
+ Insurance Assistant (RAG)
197
+ </h2>
198
+ <p class="text-lg text-gray-500 dark:text-gray-400">
199
+ Ask a question about Etiqa Takaful (Motor & Car policies).
200
+ </p>
201
+ </div>
202
+ {% endif %} {% for chat in history[:-1] %} {% if chat.type == 'human' %}
203
+ <div class="flex justify-end w-full">
204
+ <div
205
+ class="bg-amber-400 text-white p-4 rounded-xl shadow-md max-w-2xl"
206
+ >
207
+ <p>
208
+ {{ chat.content if chat.content is string else
209
+ chat.content.content }}
210
+ </p>
211
+ </div>
212
+ </div>
213
+
214
+ {% elif chat.type == 'ai' %}
215
+ <div class="w-full max-w-2xl space-y-4">
216
+ <div>
217
+ <div
218
+ class="flex items-center text-sm text-gray-800 dark:text-white mb-2 ml-1"
219
+ >
220
+ <i
221
+ class="fa-solid fa-file-medical text-amber-400 dark:text-amber-400 mr-2"
222
+ ></i>
223
+ <strong class="font-semibold">MultiDom RAG</strong>
224
+ </div>
225
+ <div
226
+ class="bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-xl shadow-md p-5"
227
+ >
228
+ <p
229
+ class="text-gray-800 dark:text-white whitespace-pre-wrap text-left"
230
+ >
231
+ {{ answer_text|safe }}
232
+ </p>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ {% endif %} {% endfor %} {% if answer %}
237
+ <div class="w-full max-w-2xl space-y-4">
238
+ <details class="w-full">
239
+ <summary
240
+ class="flex items-center text-sm text-gray-500 dark:text-gray-400 cursor-pointer mb-2 ml-1"
241
+ >
242
+ <i
243
+ class="fas fa-atom mr-2 animate-spin-slow text-amber-400 inline-block"
244
+ ></i>
245
+ <span>Thinking... view source & thoughts...</span>
246
+ </summary>
247
+ <div
248
+ class="bg-gray-100 dark:bg-dark-800 border dark:border-dark-700 rounded-xl shadow p-4 space-y-4 ml-1 mt-2"
249
+ >
250
+ {% if source %}
251
+ <div>
252
+ <h4 class="font-semibold text-gray-700 dark:text-gray-300">
253
+ Source:
254
+ </h4>
255
+ <p class="text-sm text-gray-600 dark:text-gray-400">
256
+ {{ source }}
257
+ </p>
258
+ </div>
259
+ {% endif %} {% if thoughts %}
260
+ <details>
261
+ <summary
262
+ class="font-semibold text-medium text-gray-700 dark:text-gray-400 cursor-pointer"
263
+ >
264
+ View Agent Thoughts (ReAct Process):
265
+ </summary>
266
+ <p
267
+ class="text-sm mt-2 p-2 bg-gray-200 dark:bg-dark-900 rounded whitespace-pre-line"
268
+ >
269
+ {{ thoughts | safe }}
270
+ </p>
271
+ </details>
272
+ {% endif %} {% if validation %}
273
+ <div>
274
+ <h4 class="font-semibold text-gray-700 dark:text-gray-300">
275
+ Validation:
276
+ </h4>
277
+ <p class="text-sm text-gray-600 dark:text-gray-400">
278
+ {{ validation[1] }}
279
+ <!-- Display the text part of the tuple -->
280
+ </p>
281
+ </div>
282
+ {% endif %}
283
+ </div>
284
+ </details>
285
+
286
+ <div>
287
+ <div
288
+ class="flex items-center text-sm text-gray-800 dark:text-white mb-2 ml-1"
289
+ >
290
+ <i
291
+ class="fa-solid fa-file-medical text-amber-400 dark:text-amber-400 mr-2"
292
+ ></i>
293
+ <strong class="font-semibold">MultiDom RAG</strong>
294
+ </div>
295
+ <div
296
+ class="bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-xl shadow-md p-5"
297
+ >
298
+ <p
299
+ class="text-gray-800 dark:text-white text-left whitespace-pre-line"
300
+ >
301
+ {{ answer|safe }}
302
+ </p>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ {% endif %}
307
+ </div>
308
+ </main>
309
+
310
+ <footer
311
+ class="fixed bottom-0 left-0 w-full z-20 bg-white/80 dark:bg-dark-900/80 backdrop-blur-sm border-t dark:border-dark-700"
312
+ >
313
+ <form
314
+ method="POST"
315
+ action="{{ url_for('insurance_page') }}"
316
+ enctype="multipart/form-data"
317
+ class="relative max-w-5xl mx-auto flex items-center space-x-3 p-4"
318
+ >
319
+ <!-- Removed upload button and file name display -->
320
+ <input
321
+ type="text"
322
+ id="query"
323
+ name="query"
324
+ required
325
+ class="flex-1 px-4 py-3 rounded-lg bg-gray-100 dark:bg-dark-700 border border-gray-300 dark:border-dark-600 focus:outline-none focus:ring-2 focus:ring-amber-400"
326
+ placeholder="Ask about Etiqa Motor & Car Takaful..."
327
+ />
328
+ <button
329
+ type="submit"
330
+ class="p-3 bg-amber-400 hover:bg-accent-light text-white rounded-full transition-colors shadow-lg hover:scale-105 transform ripple"
331
+ >
332
+ <i class="fas fa-paper-plane"></i>
333
+ </button>
334
+ </form>
335
+ </footer>
336
+
337
+ <script>
338
+ const themeToggle = document.getElementById("theme-toggle"),
339
+ html = document.documentElement;
340
+ themeToggle.addEventListener("click", () => {
341
+ html.classList.toggle("dark");
342
+ localStorage.setItem(
343
+ "theme",
344
+ html.classList.contains("dark") ? "dark" : "light"
345
+ );
346
+ });
347
+ if (
348
+ localStorage.getItem("theme") === "dark" ||
349
+ (!localStorage.getItem("theme") &&
350
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
351
+ ) {
352
+ html.classList.add("dark");
353
+ }
354
+
355
+ document.addEventListener("DOMContentLoaded", () => {
356
+ window.addEventListener("scroll", () => {
357
+ const scrollTop =
358
+ document.documentElement.scrollTop || document.body.scrollTop;
359
+ const scrollHeight =
360
+ document.documentElement.scrollHeight -
361
+ document.documentElement.clientHeight;
362
+ const scrollProgress =
363
+ scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
364
+ const progressBar = document.querySelector(".scroll-progress");
365
+ if (progressBar) progressBar.style.width = scrollProgress + "%";
366
+ });
367
+ document.querySelectorAll(".ripple").forEach((button) => {
368
+ button.addEventListener("click", function (e) {
369
+ const rect = this.getBoundingClientRect(),
370
+ x = e.clientX - rect.left,
371
+ y = e.clientY - rect.top;
372
+ const ripple = document.createElement("span");
373
+ ripple.className = "ripple-effect";
374
+ ripple.style.left = x + "px";
375
+ ripple.style.top = y + "px";
376
+ this.appendChild(ripple);
377
+ setTimeout(() => {
378
+ ripple.remove();
379
+ }, 600);
380
+ });
381
+ });
382
+
383
+ // --- All JavaScript related to upload button, menu, and file inputs has been removed ---
384
+
385
+ // Scroll to bottom on load
386
+ setTimeout(() => {
387
+ const chatHistoryDiv = document.getElementById("chat-history");
388
+ if (chatHistoryDiv) {
389
+ window.scrollTo({
390
+ top: chatHistoryDiv.scrollHeight,
391
+ behavior: "smooth",
392
+ });
393
+ }
394
+ }, 100);
395
+ });
396
+ </script>
397
+ </body>
398
+ </html>
templates/islamic_page.html ADDED
@@ -0,0 +1,600 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>MultiDom RAG</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11
+ />
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: "class",
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: { dark: "#579be8", light: "#3B82F6" },
19
+ secondary: { dark: "#9F1239", light: "#EC4899" },
20
+ accent: { dark: "#047857", light: "#10B981" },
21
+ dark: { 900: "#0F172A", 800: "#1E293B", 700: "#334155" },
22
+ },
23
+ fontFamily: { sans: ["Inter", "sans-serif"] },
24
+ animation: {
25
+ float: "float 6s ease-in-out infinite",
26
+ "spin-slow": "spin 10s linear infinite",
27
+ },
28
+ keyframes: {
29
+ float: {
30
+ "0%, 100%": { transform: "translateY(0)" },
31
+ "50%": { transform: "translateY(-10px)" },
32
+ },
33
+ },
34
+ },
35
+ },
36
+ };
37
+ </script>
38
+ <style>
39
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
40
+ body {
41
+ font-family: "Inter", sans-serif;
42
+ scroll-behavior: smooth;
43
+ }
44
+ details > summary {
45
+ list-style: none;
46
+ }
47
+ details > summary::-webkit-details-marker {
48
+ display: none;
49
+ }
50
+ details > summary::before {
51
+ content: "\f078";
52
+ font-family: "Font Awesome 6 Free";
53
+ font-weight: 900;
54
+ margin-right: 0.5rem;
55
+ display: inline-block;
56
+ transition: transform 0.2s ease-in-out;
57
+ }
58
+ details[open] > summary::before {
59
+ transform: rotate(-180deg);
60
+ }
61
+ .scroll-progress {
62
+ position: fixed;
63
+ top: 0;
64
+ left: 0;
65
+ width: 0%;
66
+ height: 4px;
67
+ background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);
68
+ z-index: 1000;
69
+ transition: width 0.1s;
70
+ }
71
+ .ripple {
72
+ position: relative;
73
+ overflow: hidden;
74
+ }
75
+ .ripple-effect {
76
+ position: absolute;
77
+ border-radius: 50%;
78
+ background-color: rgba(255, 255, 255, 0.4);
79
+ transform: scale(0);
80
+ animation: ripple 0.6s linear;
81
+ pointer-events: none;
82
+ }
83
+ @keyframes ripple {
84
+ to {
85
+ transform: scale(4);
86
+ opacity: 0;
87
+ }
88
+ }
89
+
90
+ /* --- ADDED METRICS CSS --- */
91
+ .metric-card {
92
+ background: white;
93
+ padding: 15px;
94
+ border-radius: 8px;
95
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
96
+ text-align: center;
97
+ }
98
+
99
+ .metric-card h4 {
100
+ margin: 0 0 10px 0;
101
+ font-size: 14px;
102
+ color: #666;
103
+ }
104
+ </style>
105
+ </head>
106
+ <body
107
+ class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200"
108
+ id="islamic_page"
109
+ >
110
+ <div class="scroll-progress"></div>
111
+ <nav class="bg-white dark:bg-dark-800 shadow-lg sticky top-0 z-40">
112
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
113
+ <div class="flex justify-between h-16 items-center">
114
+ <div class="flex items-center">
115
+ <i
116
+ class="fa-solid fa-file-medical text-accent-dark dark:text-accent-light text-2xl mr-5"
117
+ ></i>
118
+ <span
119
+ class="text-2xl font-bold text-accent-dark dark:text-accent-light"
120
+ >MultiDom RAG</span
121
+ >
122
+ </div>
123
+ <div class="hidden sm:flex flex-1 justify-center space-x-8">
124
+ <a
125
+ href="{{ url_for('homePage') }}"
126
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-xl hover:animate-pulse"
127
+ >Home</a
128
+ >
129
+ <div class="relative group">
130
+ <button
131
+ class="border-accent-dark dark:border-accent-dark text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-xl border-b-2"
132
+ >
133
+ Demo
134
+ <svg
135
+ class="w-4 h-4 ml-1"
136
+ fill="none"
137
+ stroke="currentColor"
138
+ viewBox="0 0 24 24"
139
+ >
140
+ <path
141
+ stroke-linecap="round"
142
+ stroke-linejoin="round"
143
+ stroke-width="2"
144
+ d="M19 9l-7 7-7-7"
145
+ ></path>
146
+ </svg>
147
+ </button>
148
+ <div
149
+ class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-52 rounded-md shadow-lg bg-white dark:bg-dark-700 ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"
150
+ >
151
+ <div class="py-1">
152
+ <a
153
+ href="{{ url_for('medical_page') }}"
154
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
155
+ >Medical</a
156
+ >
157
+ <a
158
+ href="{{ url_for('islamic_page') }}"
159
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600 font-semibold"
160
+ >Islamic (Active)</a
161
+ >
162
+ <a
163
+ href="{{ url_for('insurance_page') }}"
164
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
165
+ >Insurance</a
166
+ >
167
+ </div>
168
+ </div>
169
+ </div>
170
+ <a
171
+ href="{{ url_for('about') }}"
172
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-xl hover:animate-pulse"
173
+ >About</a
174
+ >
175
+ </div>
176
+ <div class="hidden sm:flex items-center space-x-4">
177
+ <a
178
+ href="{{ url_for('clear_islamic_chat') }}"
179
+ class="p-2 text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-700 rounded-full transition-colors"
180
+ title="Clear Chat History"
181
+ >
182
+ <i class="fas fa-trash-alt"></i>
183
+ </a>
184
+ <button
185
+ id="theme-toggle"
186
+ type="button"
187
+ class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light dark:focus:ring-primary-dark ripple"
188
+ >
189
+ <i class="fas fa-moon dark:hidden"></i
190
+ ><i class="fas fa-sun hidden dark:block"></i>
191
+ </button>
192
+ <a
193
+ class="ml-4 bg-accent-dark dark:bg-accent-light text-white text-md px-6 py-2 rounded-md font-medium"
194
+ >Islamic</a
195
+ >
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </nav>
200
+
201
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
202
+
203
+ <div class="metrics-dashboard" style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 8px;">
204
+ <h3>📊 System Metrics</h3>
205
+ <button onclick="loadMetrics()">Refresh Metrics</button>
206
+ <button onclick="resetMetrics()" style="background: #dc3545;">Reset Metrics</button>
207
+
208
+ <div id="metrics-content" style="margin-top: 15px;">
209
+ <p>Loading metrics...</p>
210
+ </div>
211
+ </div>
212
+ <div
213
+ id="chat-history"
214
+ class="max-w-5xl mx-auto px-4 py-8 pt-12 pb-40 space-y-8"
215
+ >
216
+ {% if not history %}
217
+ <div class="text-center py-10">
218
+ <i
219
+ class="fa-solid fa-mosque text-accent-dark dark:text-accent-dark text-6xl mb-4 animate-float"
220
+ ></i>
221
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">
222
+ Islamic Assistant (RAG)
223
+ </h2>
224
+ <p class="text-lg text-gray-500 dark:text-gray-400">
225
+ Ask a question about Fiqh (Shafi'i/Maliki) or Hadith.
226
+ </p>
227
+ </div>
228
+ {% endif %} {% for chat in history[:-1] %} {% if chat.type == 'human' %}
229
+ <div class="flex justify-end w-full">
230
+ <div
231
+ class="bg-accent-dark text-white p-4 rounded-xl shadow-md max-w-2xl"
232
+ >
233
+ <p>
234
+ {{ chat.content if chat.content is string else
235
+ chat.content.content }}
236
+ </p>
237
+ {% if chat.content and '[Document Uploaded]' in chat.content %}<span
238
+ class="text-xs text-blue-200 pt-2 block"
239
+ ><i class="fas fa-file-alt mr-1"></i> Document Uploaded</span
240
+ >{% endif %}
241
+ </div>
242
+ </div>
243
+
244
+ {% elif chat.type == 'ai' %}
245
+ <div class="w-full max-w-2xl space-y-4">
246
+ {% set answer_text = chat.content %}
247
+ <div>
248
+ <div
249
+ class="flex items-center text-sm text-gray-800 dark:text-white mb-2 ml-1"
250
+ >
251
+ <i
252
+ class="fa-solid fa-file-medical text-accent-dark dark:text-primary-dark mr-2"
253
+ ></i>
254
+ <strong class="font-semibold">MultiDom RAG</strong>
255
+ </div>
256
+ <div
257
+ class="bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-xl shadow-md p-5"
258
+ >
259
+ <p
260
+ class="text-gray-800 dark:text-white whitespace-pre-wrap text-left"
261
+ >
262
+ {{ answer_text|safe }}
263
+ </p>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ {% endif %} {% endfor %} {% if answer %}
268
+ <div class="w-full max-w-2xl space-y-4">
269
+ <details class="w-full">
270
+ <summary
271
+ class="flex items-center text-sm text-gray-500 dark:text-gray-400 cursor-pointer mb-2 ml-1"
272
+ >
273
+ <i
274
+ class="fas fa-atom mr-2 animate-spin-slow text-accent-dark inline-block"
275
+ ></i>
276
+ <span>Thinking... view source & thoughts...</span>
277
+ </summary>
278
+ <div
279
+ class="bg-gray-100 dark:bg-dark-800 border dark:border-dark-700 rounded-xl shadow p-4 space-y-4 ml-1 mt-2"
280
+ >
281
+ {% if source %}
282
+ <div>
283
+ <h4 class="font-semibold text-gray-700 dark:text-gray-300">
284
+ Source:
285
+ </h4>
286
+ <p class="text-sm text-gray-600 dark:text-gray-400">
287
+ {{ source }}
288
+ </p>
289
+ </div>
290
+ {% endif %} {% if thoughts %}
291
+ <details>
292
+ <summary
293
+ class="font-semibold text-medium text-gray-700 dark:text-gray-400 cursor-pointer"
294
+ >
295
+ View Agent Thoughts (ReAct Process):
296
+ </summary>
297
+ <p
298
+ class="text-sm mt-2 p-2 bg-gray-200 dark:bg-dark-900 rounded whitespace-pre-line"
299
+ >
300
+ {{ thoughts | safe }}
301
+ </p>
302
+ </details>
303
+ {% endif %} {% if validation %}
304
+ <div>
305
+ <h4 class="font-semibold text-gray-700 dark:text-gray-300">
306
+ Validation:
307
+ </h4>
308
+ <p class="text-sm text-gray-600 dark:text-gray-400">
309
+ {{ validation }}
310
+ </p>
311
+ </div>
312
+ {% endif %}
313
+ </div>
314
+ </details>
315
+
316
+ <div>
317
+ <div
318
+ class="flex items-center text-sm text-gray-800 dark:text-white mb-2 ml-1"
319
+ >
320
+ <i
321
+ class="fa-solid fa-file-medical text-accent-dark dark:text-primary-dark mr-2"
322
+ ></i>
323
+ <strong class="font-semibold">MultiDom RAG</strong>
324
+ </div>
325
+ <div
326
+ class="bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-xl shadow-md p-5"
327
+ >
328
+ <p
329
+ class="text-gray-800 dark:text-white text-left whitespace-pre-line"
330
+ >
331
+ {{ answer|safe }}
332
+ </p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ {% endif %}
337
+ </div>
338
+ </main>
339
+
340
+ <footer
341
+ class="fixed bottom-0 left-0 w-full z-20 bg-white/80 dark:bg-dark-900/80 backdrop-blur-sm border-t dark:border-dark-700"
342
+ >
343
+ <form
344
+ method="POST"
345
+ action="{{ url_for('islamic_page') }}"
346
+ enctype="multipart/form-data"
347
+ class="relative max-w-5xl mx-auto flex items-center space-x-3 p-4"
348
+ >
349
+ <div
350
+ id="upload-menu"
351
+ class="absolute bottom-20 left-0 w-52 bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-lg shadow-lg py-2 z-10 hidden"
352
+ >
353
+ <button
354
+ type="button"
355
+ id="upload-image-btn"
356
+ class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600 flex items-center"
357
+ >
358
+ <i class="fas fa-image mr-3"></i> Upload Image
359
+ </button>
360
+ </div>
361
+ <button
362
+ type="button"
363
+ id="upload-toggle"
364
+ class="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-dark-700 rounded-full transition-colors"
365
+ >
366
+ <i class="fas fa-plus text-xl"></i>
367
+ </button>
368
+ <input type="file" id="file-upload" name="image" class="hidden" />
369
+ <input
370
+ type="text"
371
+ id="query"
372
+ name="query"
373
+ required
374
+ class="flex-1 px-4 py-3 rounded-lg bg-gray-100 dark:bg-dark-700 border border-gray-300 dark:border-dark-600 focus:outline-none focus:ring-2 focus:ring-accent-dark"
375
+ placeholder="Ask a question about Islamic law or Hadith..."
376
+ />
377
+ <span
378
+ id="file-name-display"
379
+ class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs"
380
+ title=""
381
+ ></span>
382
+ <button
383
+ type="submit"
384
+ class="p-3 bg-accent-dark hover:bg-accent-light text-white rounded-full transition-colors shadow-lg hover:scale-105 transform ripple"
385
+ >
386
+ <i class="fas fa-paper-plane"></i>
387
+ </button>
388
+ </form>
389
+ </footer>
390
+
391
+ <script>
392
+ const themeToggle = document.getElementById("theme-toggle"),
393
+ html = document.documentElement;
394
+ themeToggle.addEventListener("click", () => {
395
+ html.classList.toggle("dark");
396
+ localStorage.setItem(
397
+ "theme",
398
+ html.classList.contains("dark") ? "dark" : "light"
399
+ );
400
+ });
401
+ if (
402
+ localStorage.getItem("theme") === "dark" ||
403
+ (!localStorage.getItem("theme") &&
404
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
405
+ ) {
406
+ html.classList.add("dark");
407
+ }
408
+
409
+ document.addEventListener("DOMContentLoaded", () => {
410
+ window.addEventListener("scroll", () => {
411
+ const scrollTop =
412
+ document.documentElement.scrollTop || document.body.scrollTop;
413
+ const scrollHeight =
414
+ document.documentElement.scrollHeight -
415
+ document.documentElement.clientHeight;
416
+ const scrollProgress =
417
+ scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
418
+ const progressBar = document.querySelector(".scroll-progress");
419
+ if (progressBar) progressBar.style.width = scrollProgress + "%";
420
+ });
421
+ document.querySelectorAll(".ripple").forEach((button) => {
422
+ button.addEventListener("click", function (e) {
423
+ const rect = this.getBoundingClientRect(),
424
+ x = e.clientX - rect.left,
425
+ y = e.clientY - rect.top;
426
+ const ripple = document.createElement("span");
427
+ ripple.className = "ripple-effect";
428
+ ripple.style.left = x + "px";
429
+ ripple.style.top = y + "px";
430
+ this.appendChild(ripple);
431
+ setTimeout(() => {
432
+ ripple.remove();
433
+ }, 600);
434
+ });
435
+ });
436
+
437
+ // --- START OF UPLOAD LOGIC (Simplified for Islamic page) ---
438
+ const uploadToggle = document.getElementById("upload-toggle"),
439
+ uploadMenu = document.getElementById("upload-menu"),
440
+ uploadImageBtn = document.getElementById("upload-image-btn"),
441
+ fileUploadInput = document.getElementById("file-upload"), // For images
442
+ fileNameDisplay = document.getElementById("file-name-display");
443
+
444
+ // Helper to clear inputs
445
+ const clearFileInputs = () => {
446
+ fileUploadInput.value = null;
447
+ fileNameDisplay.textContent = "";
448
+ fileNameDisplay.title = "";
449
+ };
450
+
451
+ if (uploadToggle)
452
+ uploadToggle.addEventListener("click", (e) => {
453
+ e.stopPropagation();
454
+ uploadMenu.classList.toggle("hidden");
455
+ });
456
+
457
+ if (uploadImageBtn)
458
+ uploadImageBtn.addEventListener("click", () => {
459
+ clearFileInputs();
460
+ fileUploadInput.accept = "image/*";
461
+ fileUploadInput.click();
462
+ uploadMenu.classList.add("hidden");
463
+ });
464
+
465
+ // Event listener for image input
466
+ if (fileUploadInput)
467
+ fileUploadInput.addEventListener("change", () => {
468
+ const file = fileUploadInput.files[0];
469
+ if (file) {
470
+ fileNameDisplay.textContent = file.name;
471
+ fileNameDisplay.title = file.name;
472
+ }
473
+ });
474
+
475
+ document.addEventListener("click", (e) => {
476
+ if (
477
+ uploadMenu &&
478
+ !uploadMenu.classList.contains("hidden") &&
479
+ !uploadToggle.contains(e.target)
480
+ ) {
481
+ uploadMenu.classList.add("hidden");
482
+ }
483
+ });
484
+
485
+ // Scroll to bottom on load
486
+ setTimeout(() => {
487
+ const chatHistoryDiv = document.getElementById("chat-history");
488
+ if (chatHistoryDiv) {
489
+ window.scrollTo({
490
+ top: chatHistoryDiv.scrollHeight,
491
+ behavior: "smooth",
492
+ });
493
+ }
494
+ }, 100);
495
+ });
496
+
497
+ // --- ADDED METRICS SCRIPT ---
498
+
499
+ function loadMetrics() {
500
+ const domain = "islamic"; // Set this based on your page (medical/islamic/insurance)
501
+
502
+ fetch(`/metrics/${domain}`)
503
+ .then(response => response.json())
504
+ .then(data => {
505
+ displayMetrics(data);
506
+ })
507
+ .catch(error => {
508
+ console.error('Error loading metrics:', error);
509
+ document.getElementById('metrics-content').innerHTML =
510
+ '<p style="color: red;">Error loading metrics</p>';
511
+ });
512
+ }
513
+
514
+ function displayMetrics(stats) {
515
+ const html = `
516
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
517
+ <div class="metric-card">
518
+ <h4>Total Queries</h4>
519
+ <p style="font-size: 24px; font-weight: bold;">${stats.total_queries}</p>
520
+ </div>
521
+
522
+ <div class="metric-card">
523
+ <h4>RAG Success Rate</h4>
524
+ <p style="font-size: 24px; font-weight: bold; color: #28a745;">${stats.rag_success_rate}%</p>
525
+ </div>
526
+
527
+ <div class="metric-card">
528
+ <h4>Web Search Rate</h4>
529
+ <p style="font-size: 24px; font-weight: bold; color: #ffc107;">${stats.web_search_rate}%</p>
530
+ </div>
531
+
532
+ <div class="metric-card">
533
+ <h4>Avg Response Time</h4>
534
+ <p style="font-size: 24px; font-weight: bold;">${stats.avg_response_time}s</p>
535
+ </div>
536
+ </div>
537
+
538
+ <div style="margin-top: 20px;">
539
+ <h4>🐝 Swarm Worker Contributions</h4>
540
+ <div style="display: flex; gap: 20px;">
541
+ <div>
542
+ <strong>Dense Semantic:</strong> ${stats.worker_contributions.dense_semantic} docs
543
+ </div>
544
+ <div>
545
+ <strong>BM25 Keyword:</strong> ${stats.worker_contributions.bm25_keyword} docs
546
+ </div>
547
+ </div>
548
+ </div>
549
+
550
+ <div style="margin-top: 20px;">
551
+ <h4>📈 Complexity Distribution</h4>
552
+ <div style="display: flex; gap: 20px;">
553
+ <div>Simple: ${stats.complexity_distribution.simple}</div>
554
+ <div>Moderate: ${stats.complexity_distribution.moderate}</div>
555
+ <div>Complex: ${stats.complexity_distribution.complex}</div>
556
+ </div>
557
+ </div>
558
+
559
+ <div style="margin-top: 20px;">
560
+ <h4>✅ Validation Stats</h4>
561
+ <div style="display: flex; gap: 20px;">
562
+ <div style="color: #28a745;">Valid: ${stats.validation_stats.valid}</div>
563
+ <div style="color: #dc3545;">Invalid: ${stats.validation_stats.invalid}</div>
564
+ <div style="color: #6c757d;">Skipped: ${stats.validation_stats.skipped}</div>
565
+ </div>
566
+ </div>
567
+ `;
568
+
569
+ document.getElementById('metrics-content').innerHTML = html;
570
+ }
571
+
572
+ function resetMetrics() {
573
+ if (!confirm('Are you sure you want to reset all metrics?')) {
574
+ return;
575
+ }
576
+
577
+ const domain = "islamic";
578
+
579
+ fetch(`/metrics/reset/${domain}`, { method: 'POST' })
580
+ .then(response => response.json())
581
+ .then(data => {
582
+ alert(data.message);
583
+ loadMetrics();
584
+ })
585
+ .catch(error => {
586
+ console.error('Error resetting metrics:', error);
587
+ alert('Error resetting metrics');
588
+ });
589
+ }
590
+
591
+ // Load metrics when page loads
592
+ window.addEventListener('load', loadMetrics);
593
+
594
+ // Auto-refresh metrics every 30 seconds
595
+ setInterval(loadMetrics, 30000);
596
+ // --- END OF METRICS SCRIPT ---
597
+
598
+ </script>
599
+ </body>
600
+ </html>
templates/medical_page.html ADDED
@@ -0,0 +1,507 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>MultiDom RAG</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11
+ />
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: "class",
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: { dark: "#579be8", light: "#3B82F6" },
19
+ secondary: { dark: "#9F1239", light: "#EC4899" },
20
+ accent: { dark: "#047857", light: "#10B981" },
21
+ dark: { 900: "#0F172A", 800: "#1E293B", 700: "#334155" },
22
+ },
23
+ fontFamily: { sans: ["Inter", "sans-serif"] },
24
+ animation: {
25
+ float: "float 6s ease-in-out infinite",
26
+ "spin-slow": "spin 10s linear infinite",
27
+ },
28
+ keyframes: {
29
+ float: {
30
+ "0%, 100%": { transform: "translateY(0)" },
31
+ "50%": { transform: "translateY(-10px)" },
32
+ },
33
+ },
34
+ },
35
+ },
36
+ };
37
+ </script>
38
+ <style>
39
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
40
+ body {
41
+ font-family: "Inter", sans-serif;
42
+ scroll-behavior: smooth;
43
+ }
44
+ details > summary {
45
+ list-style: none;
46
+ }
47
+ details > summary::-webkit-details-marker {
48
+ display: none;
49
+ }
50
+ details > summary::before {
51
+ content: "\f078";
52
+ font-family: "Font Awesome 6 Free";
53
+ font-weight: 900;
54
+ margin-right: 0.5rem;
55
+ display: inline-block;
56
+ transition: transform 0.2s ease-in-out;
57
+ }
58
+ details[open] > summary::before {
59
+ transform: rotate(-180deg);
60
+ }
61
+ .scroll-progress {
62
+ position: fixed;
63
+ top: 0;
64
+ left: 0;
65
+ width: 0%;
66
+ height: 4px;
67
+ background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);
68
+ z-index: 1000;
69
+ transition: width 0.1s;
70
+ }
71
+ .ripple {
72
+ position: relative;
73
+ overflow: hidden;
74
+ }
75
+ .ripple-effect {
76
+ position: absolute;
77
+ border-radius: 50%;
78
+ background-color: rgba(255, 255, 255, 0.4);
79
+ transform: scale(0);
80
+ animation: ripple 0.6s linear;
81
+ pointer-events: none;
82
+ }
83
+ @keyframes ripple {
84
+ to {
85
+ transform: scale(4);
86
+ opacity: 0;
87
+ }
88
+ }
89
+ </style>
90
+ </head>
91
+ <body
92
+ class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200"
93
+ id="medical_page"
94
+ >
95
+ <div class="scroll-progress"></div>
96
+ <nav class="bg-white dark:bg-dark-800 shadow-lg sticky top-0 z-40">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="flex justify-between h-16 items-center">
99
+ <div class="flex items-center">
100
+ <i
101
+ class="fa-solid fa-file-medical text-primary-light dark:text-primary-dark text-2xl mr-5"
102
+ ></i>
103
+ <span
104
+ class="text-2xl font-bold text-primary-light dark:text-primary-dark"
105
+ >MultiDom RAG</span
106
+ >
107
+ </div>
108
+ <div class="hidden sm:flex flex-1 justify-center space-x-8">
109
+ <a
110
+ href="{{ url_for('homePage') }}"
111
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-xl hover:animate-pulse"
112
+ >Home</a
113
+ >
114
+ <div class="relative group">
115
+ <button
116
+ class="border-primary-light dark:border-primary-dark text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-xl border-b-2"
117
+ >
118
+ Demo
119
+ <svg
120
+ class="w-4 h-4 ml-1"
121
+ fill="none"
122
+ stroke="currentColor"
123
+ viewBox="0 0 24 24"
124
+ >
125
+ <path
126
+ stroke-linecap="round"
127
+ stroke-linejoin="round"
128
+ stroke-width="2"
129
+ d="M19 9l-7 7-7-7"
130
+ ></path>
131
+ </svg>
132
+ </button>
133
+ <div
134
+ class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-52 rounded-md shadow-lg bg-white dark:bg-dark-700 ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50"
135
+ >
136
+ <div class="py-1">
137
+ <a
138
+ href="{{ url_for('medical_page') }}"
139
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600 font-semibold"
140
+ >Medical (Active)</a
141
+ >
142
+ <a
143
+ href="{{ url_for('islamic_page') }}"
144
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
145
+ >Islamic</a
146
+ >
147
+ <a
148
+ href="{{ url_for('insurance_page') }}"
149
+ class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
150
+ >Insurance</a
151
+ >
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <a
156
+ href="{{ url_for('about') }}"
157
+ class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-xl hover:animate-pulse"
158
+ >About</a
159
+ >
160
+ </div>
161
+ <div class="hidden sm:flex items-center space-x-4">
162
+ <a
163
+ href="{{ url_for('clear_medical_chat') }}"
164
+ class="p-2 text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-700 rounded-full transition-colors"
165
+ title="Clear Chat History"
166
+ >
167
+ <i class="fas fa-trash-alt"></i>
168
+ </a>
169
+ <button
170
+ id="theme-toggle"
171
+ type="button"
172
+ class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light dark:focus:ring-primary-dark ripple"
173
+ >
174
+ <i class="fas fa-moon dark:hidden"></i
175
+ ><i class="fas fa-sun hidden dark:block"></i>
176
+ </button>
177
+ <a
178
+ class="ml-4 bg-primary-light dark:bg-primary-dark text-white text-md px-6 py-2 rounded-md font-medium"
179
+ >Medical</a
180
+ >
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </nav>
185
+
186
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
187
+ <div
188
+ id="chat-history"
189
+ class="max-w-5xl mx-auto px-4 py-8 pt-12 pb-40 space-y-8"
190
+ >
191
+ {% if not history %}
192
+ <div class="text-center py-10">
193
+ <i
194
+ class="fa-solid fa-notes-medical text-primary-light dark:text-primary-dark text-6xl mb-4 animate-float"
195
+ ></i>
196
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">
197
+ Medical Assistant (RAG & Swarm)
198
+ </h2>
199
+ <p class="text-lg text-gray-500 dark:text-gray-400">
200
+ Ask a medical question, upload a medical image, or upload a document
201
+ for swarm analysis.
202
+ </p>
203
+ </div>
204
+ {% endif %} {% for chat in history[:-1] %} {% if chat.type == 'human' %}
205
+ <div class="flex justify-end w-full">
206
+ <div
207
+ class="bg-primary-light text-white p-4 rounded-xl shadow-md max-w-2xl"
208
+ >
209
+ <p>
210
+ {{ chat.content if chat.content is string else
211
+ chat.content.content }}
212
+ </p>
213
+ {% if chat.content and '[Document Uploaded]' in chat.content %}<span
214
+ class="text-xs text-blue-200 pt-2 block"
215
+ ><i class="fas fa-file-alt mr-1"></i> Document Uploaded</span
216
+ >{% endif %}
217
+ </div>
218
+ </div>
219
+
220
+ {% elif chat.type == 'ai' %}
221
+ <div class="w-full max-w-2xl space-y-4">
222
+ {% set answer_text = chat.content %}
223
+ <div>
224
+ <div
225
+ class="flex items-center text-sm text-gray-800 dark:text-white mb-2 ml-1"
226
+ >
227
+ <i
228
+ class="fa-solid fa-file-medical text-primary-light dark:text-primary-dark mr-2"
229
+ ></i>
230
+ <strong class="font-semibold">MultiDom RAG</strong>
231
+ </div>
232
+ <div
233
+ class="bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-xl shadow-md p-5"
234
+ >
235
+ <p
236
+ class="text-gray-800 dark:text-white whitespace-pre-wrap text-left"
237
+ >
238
+ {{ answer_text|safe }}
239
+ </p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ {% endif %} {% endfor %} {% if answer %}
244
+ <div class="w-full max-w-2xl space-y-4">
245
+ <details class="w-full">
246
+ <summary
247
+ class="flex items-center text-sm text-gray-500 dark:text-gray-400 cursor-pointer mb-2 ml-1"
248
+ >
249
+ <i
250
+ class="fas fa-atom mr-2 animate-spin-slow text-primary-light inline-block"
251
+ ></i>
252
+ <span>Thinking... view source & thoughts...</span>
253
+ </summary>
254
+ <div
255
+ class="bg-gray-100 dark:bg-dark-800 border dark:border-dark-700 rounded-xl shadow p-4 space-y-4 ml-1 mt-2"
256
+ >
257
+ {% if source %}
258
+ <div>
259
+ <h4 class="font-semibold text-gray-700 dark:text-gray-300">
260
+ Source:
261
+ </h4>
262
+ <p class="text-sm text-gray-600 dark:text-gray-400">
263
+ {{ source }}
264
+ </p>
265
+ </div>
266
+ {% endif %} {% if thoughts %}
267
+ <details>
268
+ <summary
269
+ class="font-semibold text-medium text-gray-700 dark:text-gray-400 cursor-pointer"
270
+ >
271
+ View Agent Thoughts (ReAct Process):
272
+ </summary>
273
+ <p
274
+ class="text-sm mt-2 p-2 bg-gray-200 dark:bg-dark-900 rounded whitespace-pre-line"
275
+ >
276
+ {{ thoughts | safe }}
277
+ </p>
278
+ </details>
279
+ {% endif %} {% if validation %}
280
+ <div>
281
+ <h4 class="font-semibold text-gray-700 dark:text-gray-300">
282
+ Validation:
283
+ </h4>
284
+ <p class="text-sm text-gray-600 dark:text-gray-400">
285
+ {{ validation }}
286
+ </p>
287
+ </div>
288
+ {% endif %}
289
+ </div>
290
+ </details>
291
+
292
+ <div>
293
+ <div
294
+ class="flex items-center text-sm text-gray-800 dark:text-white mb-2 ml-1"
295
+ >
296
+ <i
297
+ class="fa-solid fa-file-medical text-primary-light dark:text-primary-dark mr-2"
298
+ ></i>
299
+ <strong class="font-semibold">MultiDom RAG</strong>
300
+ </div>
301
+ <div
302
+ class="bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-xl shadow-md p-5"
303
+ >
304
+ <p
305
+ class="text-gray-800 dark:text-white text-left whitespace-pre-line"
306
+ >
307
+ {{ answer|safe }}
308
+ </p>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ {% endif %}
313
+ </div>
314
+ </main>
315
+
316
+ <footer
317
+ class="fixed bottom-0 left-0 w-full z-20 bg-white/80 dark:bg-dark-900/80 backdrop-blur-sm border-t dark:border-dark-700"
318
+ >
319
+ <form
320
+ method="POST"
321
+ action="{{ url_for('medical_page') }}"
322
+ enctype="multipart/form-data"
323
+ class="relative max-w-5xl mx-auto flex items-center space-x-3 p-4"
324
+ >
325
+ <div
326
+ id="upload-menu"
327
+ class="absolute bottom-20 left-0 w-52 bg-white dark:bg-dark-700 border dark:border-dark-600 rounded-lg shadow-lg py-2 z-10 hidden"
328
+ >
329
+ <button
330
+ type="button"
331
+ id="upload-image-btn"
332
+ class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600 flex items-center"
333
+ >
334
+ <i class="fas fa-image mr-3"></i> Upload Image
335
+ </button>
336
+ <button
337
+ type="button"
338
+ id="upload-doc-btn"
339
+ class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600 flex items-center"
340
+ >
341
+ <i class="fas fa-file-alt mr-3"></i> Upload Document
342
+ </button>
343
+ </div>
344
+ <button
345
+ type="button"
346
+ id="upload-toggle"
347
+ class="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-dark-700 rounded-full transition-colors"
348
+ >
349
+ <i class="fas fa-plus text-xl"></i>
350
+ </button>
351
+ <input type="file" id="file-upload" name="image" class="hidden" />
352
+ <!-- Renamed to image/document to match Python-->
353
+ <input type="file" id="doc-upload" name="document" class="hidden" />
354
+ <!-- Added hidden doc input -->
355
+ <input
356
+ type="text"
357
+ id="query"
358
+ name="query"
359
+ required
360
+ class="flex-1 px-4 py-3 rounded-lg bg-gray-100 dark:bg-dark-700 border border-gray-300 dark:border-dark-600 focus:outline-none focus:ring-2 focus:ring-primary-light"
361
+ placeholder="Ask a medical question or include an upload..."
362
+ />
363
+ <span
364
+ id="file-name-display"
365
+ class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs"
366
+ title=""
367
+ ></span>
368
+ <button
369
+ type="submit"
370
+ class="p-3 bg-primary-light hover:bg-primary-dark text-white rounded-full transition-colors shadow-lg hover:scale-105 transform ripple"
371
+ >
372
+ <i class="fas fa-paper-plane"></i>
373
+ </button>
374
+ </form>
375
+ </footer>
376
+
377
+ <script>
378
+ const themeToggle = document.getElementById("theme-toggle"),
379
+ html = document.documentElement;
380
+ themeToggle.addEventListener("click", () => {
381
+ html.classList.toggle("dark");
382
+ localStorage.setItem(
383
+ "theme",
384
+ html.classList.contains("dark") ? "dark" : "light"
385
+ );
386
+ });
387
+ if (
388
+ localStorage.getItem("theme") === "dark" ||
389
+ (!localStorage.getItem("theme") &&
390
+ window.matchMedia("(prefers-color-scheme: dark)").matches)
391
+ ) {
392
+ html.classList.add("dark");
393
+ }
394
+
395
+ document.addEventListener("DOMContentLoaded", () => {
396
+ window.addEventListener("scroll", () => {
397
+ const scrollTop =
398
+ document.documentElement.scrollTop || document.body.scrollTop;
399
+ const scrollHeight =
400
+ document.documentElement.scrollHeight -
401
+ document.documentElement.clientHeight;
402
+ const scrollProgress =
403
+ scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
404
+ const progressBar = document.querySelector(".scroll-progress");
405
+ if (progressBar) progressBar.style.width = scrollProgress + "%";
406
+ });
407
+ document.querySelectorAll(".ripple").forEach((button) => {
408
+ button.addEventListener("click", function (e) {
409
+ const rect = this.getBoundingClientRect(),
410
+ x = e.clientX - rect.left,
411
+ y = e.clientY - rect.top;
412
+ const ripple = document.createElement("span");
413
+ ripple.className = "ripple-effect";
414
+ ripple.style.left = x + "px";
415
+ ripple.style.top = y + "px";
416
+ this.appendChild(ripple);
417
+ setTimeout(() => {
418
+ ripple.remove();
419
+ }, 600);
420
+ });
421
+ });
422
+
423
+ // --- START OF UPLOAD LOGIC ---
424
+ const uploadToggle = document.getElementById("upload-toggle"),
425
+ uploadMenu = document.getElementById("upload-menu"),
426
+ uploadImageBtn = document.getElementById("upload-image-btn"),
427
+ uploadDocBtn = document.getElementById("upload-doc-btn"),
428
+ fileUploadInput = document.getElementById("file-upload"), // For images
429
+ docUploadInput = document.getElementById("doc-upload"), // For documents
430
+ fileNameDisplay = document.getElementById("file-name-display");
431
+
432
+ // Helper to clear both inputs
433
+ const clearFileInputs = () => {
434
+ fileUploadInput.value = null;
435
+ docUploadInput.value = null;
436
+ fileNameDisplay.textContent = "";
437
+ fileNameDisplay.title = "";
438
+ };
439
+
440
+ if (uploadToggle)
441
+ uploadToggle.addEventListener("click", (e) => {
442
+ e.stopPropagation();
443
+ uploadMenu.classList.toggle("hidden");
444
+ });
445
+
446
+ if (uploadImageBtn)
447
+ uploadImageBtn.addEventListener("click", () => {
448
+ clearFileInputs();
449
+ fileUploadInput.accept = "image/*";
450
+ fileUploadInput.click();
451
+ uploadMenu.classList.add("hidden");
452
+ });
453
+
454
+ if (uploadDocBtn)
455
+ uploadDocBtn.addEventListener("click", () => {
456
+ clearFileInputs();
457
+ docUploadInput.accept = ".pdf,.doc,.docx,.txt";
458
+ docUploadInput.click();
459
+ uploadMenu.classList.add("hidden");
460
+ });
461
+
462
+ // Event listener for image input
463
+ if (fileUploadInput)
464
+ fileUploadInput.addEventListener("change", () => {
465
+ const file = fileUploadInput.files[0];
466
+ if (file) {
467
+ fileNameDisplay.textContent = file.name;
468
+ fileNameDisplay.title = file.name;
469
+ docUploadInput.value = null; // Ensure the other input is cleared
470
+ }
471
+ });
472
+
473
+ // Event listener for document input
474
+ if (docUploadInput)
475
+ docUploadInput.addEventListener("change", () => {
476
+ const file = docUploadInput.files[0];
477
+ if (file) {
478
+ fileNameDisplay.textContent = file.name;
479
+ fileNameDisplay.title = file.name;
480
+ fileUploadInput.value = null; // Ensure the other input is cleared
481
+ }
482
+ });
483
+
484
+ document.addEventListener("click", (e) => {
485
+ if (
486
+ uploadMenu &&
487
+ !uploadMenu.classList.contains("hidden") &&
488
+ !uploadToggle.contains(e.target)
489
+ ) {
490
+ uploadMenu.classList.add("hidden");
491
+ }
492
+ });
493
+
494
+ // Scroll to bottom on load
495
+ setTimeout(() => {
496
+ const chatHistoryDiv = document.getElementById("chat-history");
497
+ if (chatHistoryDiv) {
498
+ window.scrollTo({
499
+ top: chatHistoryDiv.scrollHeight,
500
+ behavior: "smooth",
501
+ });
502
+ }
503
+ }, 100);
504
+ });
505
+ </script>
506
+ </body>
507
+ </html>