|
|
<!DOCTYPE html>
|
|
|
<html lang="en" class="dark">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>MultiDom RAG</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script src="tailwind.config.css"></script>
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
|
<script>
|
|
|
tailwind.config = {
|
|
|
darkMode: 'class',
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
primary: {
|
|
|
dark: '#579be8',
|
|
|
light: '#3B82F6',
|
|
|
},
|
|
|
secondary: {
|
|
|
dark: '#9F1239',
|
|
|
light: '#EC4899',
|
|
|
},
|
|
|
accent: {
|
|
|
dark: '#047857',
|
|
|
light: '#10B981',
|
|
|
},
|
|
|
dark: {
|
|
|
900: '#0F172A',
|
|
|
800: '#1E293B',
|
|
|
700: '#334155',
|
|
|
600: '#475569',
|
|
|
},
|
|
|
},
|
|
|
fontFamily: {
|
|
|
sans: ['Inter', 'sans-serif'],
|
|
|
mono: ['Fira Code', 'monospace'],
|
|
|
},
|
|
|
animation: {
|
|
|
'float': 'float 6s ease-in-out infinite',
|
|
|
'float-fast': 'float 4s ease-in-out infinite',
|
|
|
'spin-slow': 'spin 10s linear infinite',
|
|
|
'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
|
'bounce-slow': 'bounce 3s infinite',
|
|
|
'wiggle': 'wiggle 1s ease-in-out infinite',
|
|
|
'wave': 'wave 2s linear infinite',
|
|
|
'blink': 'blink 1.5s step-end infinite',
|
|
|
'scroll': 'scroll 40s linear infinite',
|
|
|
},
|
|
|
keyframes: {
|
|
|
float: {
|
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
|
'50%': { transform: 'translateY(-10px)' },
|
|
|
},
|
|
|
wiggle: {
|
|
|
'0%, 100%': { transform: 'rotate(-3deg)' },
|
|
|
'50%': { transform: 'rotate(3deg)' },
|
|
|
},
|
|
|
wave: {
|
|
|
'0%': { transform: 'rotate(0deg)' },
|
|
|
'10%': { transform: 'rotate(14deg)' },
|
|
|
'20%': { transform: 'rotate(-8deg)' },
|
|
|
'30%': { transform: 'rotate(14deg)' },
|
|
|
'40%': { transform: 'rotate(-4deg)' },
|
|
|
'50%': { transform: 'rotate(10deg)' },
|
|
|
'60%': { transform: 'rotate(0deg)' },
|
|
|
'100%': { transform: 'rotate(0deg)' },
|
|
|
},
|
|
|
blink: {
|
|
|
'0%, 100%': { opacity: '1' },
|
|
|
'50%': { opacity: '0' },
|
|
|
},
|
|
|
scroll: {
|
|
|
'0%': { transform: 'translateX(0)' },
|
|
|
'100%': { transform: 'translateX(-30%)' },
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
|
|
body {
|
|
|
font-family: 'Inter', sans-serif;
|
|
|
transition: all 0.3s ease;
|
|
|
scroll-behavior: smooth;
|
|
|
}
|
|
|
|
|
|
.gradient-bg {
|
|
|
background: linear-gradient(135deg, #1E40AF 0%, #9F1239 50%, #047857 100%);
|
|
|
}
|
|
|
|
|
|
.card-hover {
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.card-hover:hover {
|
|
|
transform: translateY(-5px);
|
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.pulse-animation {
|
|
|
animation: pulse 2s infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes pulse {
|
|
|
0% {
|
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
|
|
}
|
|
|
70% {
|
|
|
box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
|
|
|
}
|
|
|
100% {
|
|
|
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chat-bubble {
|
|
|
border-radius: 1.5rem;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.chat-bubble:after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 20%;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
border: 10px solid transparent;
|
|
|
border-top-color: #3B82F6;
|
|
|
border-bottom: 0;
|
|
|
margin-left: -10px;
|
|
|
margin-bottom: -10px;
|
|
|
}
|
|
|
|
|
|
.dark .chat-bubble:after {
|
|
|
border-top-color: #1E40AF;
|
|
|
}
|
|
|
|
|
|
.glow {
|
|
|
filter: drop-shadow(0 0 8px currentColor);
|
|
|
}
|
|
|
|
|
|
.feature-icon {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.feature-card:hover .feature-icon {
|
|
|
transform: scale(1.2) rotate(10deg);
|
|
|
}
|
|
|
|
|
|
.swarm-particle {
|
|
|
position: absolute;
|
|
|
border-radius: 50%;
|
|
|
opacity: 0.7;
|
|
|
animation: swarm-move 15s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes swarm-move {
|
|
|
0%, 100% {
|
|
|
transform: translate(0, 0);
|
|
|
}
|
|
|
25% {
|
|
|
transform: translate(20px, 20px);
|
|
|
}
|
|
|
50% {
|
|
|
transform: translate(10px, -20px);
|
|
|
}
|
|
|
75% {
|
|
|
transform: translate(-20px, 10px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.typing-indicator {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.typing-dot {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
margin: 0 2px;
|
|
|
background-color: currentColor;
|
|
|
border-radius: 50%;
|
|
|
display: inline-block;
|
|
|
animation: typing-dot 1.4s infinite ease-in-out;
|
|
|
}
|
|
|
|
|
|
.typing-dot:nth-child(1) {
|
|
|
animation-delay: 0s;
|
|
|
}
|
|
|
|
|
|
.typing-dot:nth-child(2) {
|
|
|
animation-delay: 0.2s;
|
|
|
}
|
|
|
|
|
|
.typing-dot:nth-child(3) {
|
|
|
animation-delay: 0.4s;
|
|
|
}
|
|
|
|
|
|
@keyframes typing-dot {
|
|
|
0%, 60%, 100% {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
30% {
|
|
|
transform: translateY(-5px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.progress-bar {
|
|
|
height: 4px;
|
|
|
width: 0;
|
|
|
background: linear-gradient(90deg, #3B82F6, #EC4899, #10B981);
|
|
|
transition: width 0.4s ease;
|
|
|
}
|
|
|
|
|
|
.scroll-indicator {
|
|
|
position: fixed;
|
|
|
bottom: 30px;
|
|
|
right: 30px;
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
border-radius: 50%;
|
|
|
background-color: #3B82F6;
|
|
|
color: white;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
cursor: pointer;
|
|
|
opacity: 0;
|
|
|
transform: translateY(20px);
|
|
|
transition: all 0.3s ease;
|
|
|
z-index: 999;
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.scroll-indicator.visible {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
.scroll-indicator:hover {
|
|
|
transform: translateY(-5px) scale(1.1);
|
|
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
.tooltip {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.tooltip-text {
|
|
|
visibility: hidden;
|
|
|
width: 120px;
|
|
|
background-color: #1E293B;
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
border-radius: 6px;
|
|
|
padding: 5px;
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
bottom: 125%;
|
|
|
left: 50%;
|
|
|
margin-left: -60px;
|
|
|
opacity: 0;
|
|
|
transition: opacity 0.3s;
|
|
|
}
|
|
|
|
|
|
.tooltip:hover .tooltip-text {
|
|
|
visibility: visible;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.parallax {
|
|
|
background-attachment: fixed;
|
|
|
background-position: center;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
|
|
|
.floating-label {
|
|
|
position: relative;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.floating-label input,
|
|
|
.floating-label textarea {
|
|
|
font-size: 16px;
|
|
|
padding: 20px 16px 10px;
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
border: 1px solid #CBD5E1;
|
|
|
border-radius: 8px;
|
|
|
background: #F8FAFC;
|
|
|
}
|
|
|
|
|
|
.floating-label input:focus,
|
|
|
.floating-label textarea:focus {
|
|
|
outline: none;
|
|
|
border-color: #3B82F6;
|
|
|
}
|
|
|
|
|
|
.floating-label label {
|
|
|
color: #64748B;
|
|
|
font-size: 16px;
|
|
|
position: absolute;
|
|
|
pointer-events: none;
|
|
|
left: 16px;
|
|
|
top: 16px;
|
|
|
transition: 0.2s ease all;
|
|
|
}
|
|
|
|
|
|
.floating-label input:focus ~ label,
|
|
|
.floating-label input:valid ~ label,
|
|
|
.floating-label textarea:focus ~ label,
|
|
|
.floating-label textarea:valid ~ label {
|
|
|
top: 6px;
|
|
|
font-size: 12px;
|
|
|
color: #3B82F6;
|
|
|
}
|
|
|
|
|
|
.dark .floating-label input,
|
|
|
.dark .floating-label textarea {
|
|
|
background: #1E293B;
|
|
|
border-color: #334155;
|
|
|
color: #F8FAFC;
|
|
|
}
|
|
|
|
|
|
.dark .floating-label label {
|
|
|
color: #94A3B8;
|
|
|
}
|
|
|
|
|
|
.dark .floating-label input:focus ~ label,
|
|
|
.dark .floating-label input:valid ~ label,
|
|
|
.dark .floating-label textarea:focus ~ label,
|
|
|
.dark .floating-label textarea:valid ~ label {
|
|
|
color: #60A5FA;
|
|
|
}
|
|
|
|
|
|
.toggle-switch {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
width: 60px;
|
|
|
height: 34px;
|
|
|
}
|
|
|
|
|
|
.toggle-switch input {
|
|
|
opacity: 0;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
}
|
|
|
|
|
|
.toggle-slider {
|
|
|
position: absolute;
|
|
|
cursor: pointer;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
background-color: #CBD5E1;
|
|
|
transition: .4s;
|
|
|
border-radius: 34px;
|
|
|
}
|
|
|
|
|
|
.toggle-slider:before {
|
|
|
position: absolute;
|
|
|
content: "";
|
|
|
height: 26px;
|
|
|
width: 26px;
|
|
|
left: 4px;
|
|
|
bottom: 4px;
|
|
|
background-color: white;
|
|
|
transition: .4s;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
input:checked + .toggle-slider {
|
|
|
background-color: #3B82F6;
|
|
|
}
|
|
|
|
|
|
input:checked + .toggle-slider:before {
|
|
|
transform: translateX(26px);
|
|
|
}
|
|
|
|
|
|
.ripple {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.ripple-effect {
|
|
|
position: absolute;
|
|
|
border-radius: 50%;
|
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
|
transform: scale(0);
|
|
|
animation: ripple 0.6s linear;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
|
|
|
@keyframes ripple {
|
|
|
to {
|
|
|
transform: scale(4);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.scroll-progress {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 0%;
|
|
|
height: 4px;
|
|
|
background: linear-gradient(90deg, #3B82F6, #EC4899, #10B981);
|
|
|
z-index: 1000;
|
|
|
transition: width 0.1s;
|
|
|
}
|
|
|
|
|
|
.confetti {
|
|
|
position: fixed;
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
background-color: #3B82F6;
|
|
|
opacity: 0;
|
|
|
z-index: 9999;
|
|
|
animation: confetti-fall 5s linear forwards;
|
|
|
}
|
|
|
|
|
|
@keyframes confetti-fall {
|
|
|
0% {
|
|
|
transform: translateY(-100px) rotate(0deg);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
100% {
|
|
|
transform: translateY(100vh) rotate(360deg);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<head>
|
|
|
<body class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen">
|
|
|
|
|
|
<div class="scroll-progress"></div>
|
|
|
|
|
|
|
|
|
<nav class="bg-white dark:bg-dark-800 shadow-lg sticky top-0 z-50">
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div class="flex justify-between h-16 items-center relative">
|
|
|
<div class="flex items-center">
|
|
|
<i class="fa-solid fa-file-medical text-primary-light dark:text-primary-dark text-2xl mr-5"></i>
|
|
|
<span class="text-2xl font-bold text-primary-light dark:text-primary-dark">MultiDom RAG</span>
|
|
|
</div>
|
|
|
<div class="hidden sm:flex flex-1 justify-center space-x-8">
|
|
|
<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>
|
|
|
|
|
|
<div class="relative group">
|
|
|
<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">
|
|
|
Demo
|
|
|
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
|
</svg>
|
|
|
</button>
|
|
|
|
|
|
|
|
|
<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">
|
|
|
<div class="py-1" role="menu" aria-orientation="vertical">
|
|
|
<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>
|
|
|
<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>
|
|
|
<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>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<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>
|
|
|
</div>
|
|
|
|
|
|
<div class="hidden sm:flex items-center space-x-4">
|
|
|
<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">
|
|
|
<i class="fas fa-moon dark:hidden"></i>
|
|
|
<i class="fas fa-sun hidden dark:block"></i>
|
|
|
</button>
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="-mr-2 flex items-center sm:hidden">
|
|
|
<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">
|
|
|
<span class="sr-only">Open main menu</span>
|
|
|
<i class="fas fa-bars"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
<div id="about" class="sm:text-center py-12 bg-gray-100 dark:bg-dark-900">
|
|
|
<div class=" sm:text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div class="lg:text-center">
|
|
|
<h2 class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase">About the Project</h2>
|
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
|
|
|
Final Year Research Initiative
|
|
|
</p>
|
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
|
|
|
Developing cutting-edge AI solutions for medical and Islamic information retrieval and decision support.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-10">
|
|
|
<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
|
|
|
|
|
|
<div class="bg-white dark:bg-dark-700 p-6 rounded-lg shadow card-hover">
|
|
|
<h3 class="text-xl leading-6 font-medium text-gray-900 dark:text-white">Project Objectives</h3>
|
|
|
<div class="mt-4">
|
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-600 dark:text-gray-400">
|
|
|
<li>Develop a Swarm-Based Multi-Agent architecture capable of querying medical knowledge bases</li>
|
|
|
<li>Implement Multimodal processing of medical and Islamic data</li>
|
|
|
<li>Create a dynamic knowledge updating mechanism</li>
|
|
|
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white dark:bg-dark-700 p-6 rounded-lg shadow card-hover">
|
|
|
<h3 class="text-xl leading-6 font-medium text-gray-900 dark:text-white">Expected Outcomes</h3>
|
|
|
<div class="mt-4">
|
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-600 dark:text-gray-400">
|
|
|
<li>Improved accuracy and depth in retrieval for both medical and Islamic queries</li>
|
|
|
<li>Better handling of complex, multimodal queries</li>
|
|
|
<li>Open-source components for academic research</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mt-16">
|
|
|
<h3 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-8">Project Timeline</h3>
|
|
|
<div class="relative">
|
|
|
|
|
|
<div class="h-1 bg-gray-200 dark:bg-gray-700 absolute top-1/2 left-0 right-0 -translate-y-1/2"></div>
|
|
|
<div class="progress-bar"></div>
|
|
|
|
|
|
<div class="relative flex justify-between">
|
|
|
|
|
|
<div class="flex flex-col items-center">
|
|
|
<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">
|
|
|
1
|
|
|
<span class="tooltip-text">Research Phase</span>
|
|
|
</div>
|
|
|
<div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Research</div>
|
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">March 2025</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center">
|
|
|
<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">
|
|
|
2
|
|
|
<span class="tooltip-text">Development Phase</span>
|
|
|
</div>
|
|
|
<div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Development</div>
|
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">Apr 2025</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center">
|
|
|
<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">
|
|
|
3
|
|
|
<span class="tooltip-text">Testing Phase</span>
|
|
|
</div>
|
|
|
<div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Testing</div>
|
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">May 2025</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="flex flex-col items-center">
|
|
|
<div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white font-bold shadow-lg tooltip">
|
|
|
4
|
|
|
<span class="tooltip-text">Deployment Phase</span>
|
|
|
</div>
|
|
|
<div class="mt-2 text-sm font-medium text-gray-900 dark:text-white">Deployment</div>
|
|
|
<div class="text-xs text-gray-500 dark:text-gray-400">June 2025</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="references" class="py-12 bg-gray-50 dark:bg-dark-800">
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div class="lg:text-center">
|
|
|
<h2 class="text-base text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase">Datasets</h2>
|
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
|
|
|
Knowledge Sources
|
|
|
</p>
|
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
|
|
|
Islamic Knowledge
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<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%)]">
|
|
|
<ul id="reference-scroller" class="flex items-center justify-center md:justify-start [&_li]:mx-20 [&_img]:max-w-none animate-scroll">
|
|
|
|
|
|
|
|
|
<li class="flex-shrink-0 text-center">
|
|
|
|
|
|
<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'">
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Al-Muwatta'</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">Imam Malik</p>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="flex-shrink-0 text-center">
|
|
|
|
|
|
<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">
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Umdat Al-Salik</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">J Ahmad ibn Naqib al-Misri</p>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="flex-shrink-0 text-center">
|
|
|
|
|
|
<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">
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Minhaj Al-Talibin</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">Imam An-Nawawi</p>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="flex-shrink-0 text-center">
|
|
|
|
|
|
<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">
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Sahih Bukhari</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">Imam Al-Bukhari</p>
|
|
|
</li>
|
|
|
|
|
|
|
|
|
<li class="flex-shrink-0 text-center">
|
|
|
|
|
|
<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">
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">Sahih Muslim</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">Imam Muslim</p>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div id="medical-knowledge" class="py-4 bg-gray-50 dark:bg-dark-800">
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div class="lg:text-center">
|
|
|
<p class="py-2 mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
|
|
|
Medical Knowledge
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="mt-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
|
|
|
|
|
|
|
|
|
<div class="text-center group relative">
|
|
|
<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">
|
|
|
<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">
|
|
|
|
|
|
<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">
|
|
|
<i class="fas fa-link text-white text-3xl"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">HealthCare Magic</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">Lavita Dataset</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="text-center group relative">
|
|
|
<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">
|
|
|
<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">
|
|
|
|
|
|
<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">
|
|
|
<i class="fas fa-link text-white text-3xl"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">MedQuad</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">Medical QnA Dataset</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="text-center group relative">
|
|
|
<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">
|
|
|
<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">
|
|
|
|
|
|
<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">
|
|
|
<i class="fas fa-link text-white text-3xl"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">iCliniq</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">Lavita Dataset</p>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="Insurance-knowledge" class="py-4 bg-gray-50 dark:bg-dark-800">
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div class="lg:text-center">
|
|
|
<p class="py-2 mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
|
|
|
Insurance Knowledge
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="mt-5 grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 gap-8 justify-items-center">
|
|
|
|
|
|
|
|
|
<div class="text-center group relative">
|
|
|
<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">
|
|
|
<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">
|
|
|
|
|
|
<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">
|
|
|
<i class="fas fa-link text-white text-3xl"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
<h4 class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">eTiQa</h4>
|
|
|
<p class="text-medium text-gray-500 dark:text-gray-400">eTiQa Insurance</p>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="contact" class=" py-16 bg-gray-100 dark:bg-dark-800">
|
|
|
<div class=" max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div class="sm:text-center">
|
|
|
<h2 class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase">Contact</h2>
|
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
|
|
|
Get In Touch
|
|
|
</p>
|
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto">
|
|
|
Interested in learning more about our Medical and Islamic RAG system? Reach out to us.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-10">
|
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
|
<div class="bg-gray-50 dark:bg-dark-600 p-6 rounded-lg shadow card-hover">
|
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Send us a message</h3>
|
|
|
<form class="mt-6 space-y-6">
|
|
|
<div class="floating-label">
|
|
|
<input type="text" id="name" name="name" required>
|
|
|
<label for="name">Name</label>
|
|
|
</div>
|
|
|
|
|
|
<div class="floating-label">
|
|
|
<input type="email" id="email" name="email" required>
|
|
|
<label for="email">Email</label>
|
|
|
</div>
|
|
|
|
|
|
<div class="floating-label">
|
|
|
<textarea id="message" name="message" rows="4" required></textarea>
|
|
|
<label for="message">Message</label>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
<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">
|
|
|
Send Message
|
|
|
</button>
|
|
|
<div class="ml-4 flex items-center">
|
|
|
<span class="text-sm text-gray-500 dark:text-gray-400 mr-2">Dark Mode</span>
|
|
|
<label class="toggle-switch">
|
|
|
<input type="checkbox" id="contact-dark-mode">
|
|
|
<span class="toggle-slider"></span>
|
|
|
</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-gray-50 dark:bg-dark-600 p-6 rounded-lg shadow card-hover">
|
|
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Project Information</h3>
|
|
|
<div class="mt-6 space-y-4">
|
|
|
<div class="flex">
|
|
|
<div class="flex-shrink-0">
|
|
|
<i class="fas fa-university text-primary-light dark:text-primary-dark text-xl"></i>
|
|
|
</div>
|
|
|
<div class="ml-3 text-base text-gray-600 dark:text-gray-300">
|
|
|
<p>Computer Science Department</p>
|
|
|
<p class="mt-1">Final Year Project</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex">
|
|
|
<div class="flex-shrink-0">
|
|
|
<i class="fas fa-user-graduate text-secondary-light dark:text-secondary-dark text-xl"></i>
|
|
|
</div>
|
|
|
<div class="ml-3 text-base text-gray-600 dark:text-gray-300">
|
|
|
<p>Students</p>
|
|
|
<p class="mt-1">Muhammad Izzmir Danish bin Zulkilfi</p>
|
|
|
<p class="mt-1">Muhammad Ridhwan Irfan bin Nur Rashid</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex">
|
|
|
<div class="flex-shrink-0">
|
|
|
<i class="fas fa-chalkboard-teacher text-accent-light dark:text-accent-dark text-xl"></i>
|
|
|
</div>
|
|
|
<div class="ml-3 text-base text-gray-600 dark:text-gray-300">
|
|
|
<p>Supervisor</p>
|
|
|
<p class="mt-1">Assoc Prof. Dr Amelia Ritahani binti Ismail</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex">
|
|
|
<div class="flex-shrink-0">
|
|
|
<i class="fas fa-calendar-alt text-indigo-500 text-xl"></i>
|
|
|
</div>
|
|
|
<div class="ml-3 text-base text-gray-600 dark:text-gray-300">
|
|
|
<p>Academic Year</p>
|
|
|
<p class="mt-1">2025-2026</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="mt-8">
|
|
|
<h4 class="text-sm font-medium text-gray-900 dark:text-white">Follow the Project</h4>
|
|
|
<div class="mt-2 flex space-x-4">
|
|
|
<a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
|
|
|
<i class="fab fa-github text-2xl"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
|
|
|
<i class="fab fa-researchgate text-2xl"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
|
|
|
<i class="fab fa-linkedin text-2xl"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition ripple">
|
|
|
<i class="fab fa-twitter text-2xl"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<footer class="bg-white dark:bg-dark-800">
|
|
|
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
|
|
|
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
|
|
|
<div class="px-5 py-2">
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="px-5 py-2">
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="px-5 py-2">
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="px-5 py-2">
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="px-5 py-2">
|
|
|
<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>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<div class="mt-8 flex justify-center space-x-6">
|
|
|
<a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
|
|
|
<span class="sr-only">GitHub</span>
|
|
|
<i class="fab fa-github text-xl"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
|
|
|
<span class="sr-only">Twitter</span>
|
|
|
<i class="fab fa-twitter text-xl"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
|
|
|
<span class="sr-only">LinkedIn</span>
|
|
|
<i class="fab fa-linkedin text-xl"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition duration-300 ripple">
|
|
|
<span class="sr-only">ResearchGate</span>
|
|
|
<i class="fab fa-researchgate text-xl"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
<p class="mt-8 text-center text-base text-gray-400 dark:text-gray-500">
|
|
|
© 2025 MediRAG - Multimodal Swarm-Based Medical RAG System. All rights reserved.
|
|
|
</p>
|
|
|
</div>
|
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-indicator ripple" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
|
|
|
<i class="fas fa-arrow-up"></i>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
|
const html = document.documentElement;
|
|
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
|
html.classList.toggle('dark');
|
|
|
localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
|
|
|
});
|
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
|
html.classList.add('dark');
|
|
|
} else {
|
|
|
html.classList.remove('dark');
|
|
|
}
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
const heroSection = document.querySelector('.lg\\:absolute.lg\\:inset-y-0.lg\\:right-0.lg\\:w-1\\/2');
|
|
|
if (heroSection) {
|
|
|
for (let i = 0; i < 10; i++) {
|
|
|
const particle = document.createElement('div');
|
|
|
particle.className = 'swarm-particle';
|
|
|
particle.style.width = `${Math.random() * 6 + 2}px`;
|
|
|
particle.style.height = particle.style.width;
|
|
|
particle.style.top = `${Math.random() * 100}%`;
|
|
|
particle.style.left = `${Math.random() * 100}%`;
|
|
|
particle.style.animationDelay = `${Math.random() * 10}s`;
|
|
|
|
|
|
|
|
|
const colors = ['bg-primary-light', 'bg-secondary-light', 'bg-accent-light',
|
|
|
'bg-primary-dark', 'bg-secondary-dark', 'bg-accent-dark'];
|
|
|
const color = colors[Math.floor(Math.random() * colors.length)];
|
|
|
particle.classList.add(color);
|
|
|
|
|
|
heroSection.appendChild(particle);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => {
|
|
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
|
|
const scrollProgress = (scrollTop / scrollHeight) * 100;
|
|
|
document.querySelector('.scroll-progress').style.width = scrollProgress + '%';
|
|
|
|
|
|
|
|
|
const scrollIndicator = document.querySelector('.scroll-indicator');
|
|
|
if (scrollTop > 300) {
|
|
|
scrollIndicator.classList.add('visible');
|
|
|
} else {
|
|
|
scrollIndicator.classList.remove('visible');
|
|
|
}
|
|
|
|
|
|
|
|
|
const timelineProgress = Math.min(scrollTop / 1000, 1) * 100;
|
|
|
document.querySelector('.progress-bar').style.width = timelineProgress + '%';
|
|
|
});
|
|
|
|
|
|
|
|
|
document.querySelectorAll('.ripple').forEach(button => {
|
|
|
button.addEventListener('click', function(e) {
|
|
|
const rect = this.getBoundingClientRect();
|
|
|
const x = e.clientX - rect.left;
|
|
|
const y = e.clientY - rect.top;
|
|
|
|
|
|
const ripple = document.createElement('span');
|
|
|
ripple.className = 'ripple-effect';
|
|
|
ripple.style.left = x + 'px';
|
|
|
ripple.style.top = y + 'px';
|
|
|
|
|
|
this.appendChild(ripple);
|
|
|
|
|
|
setTimeout(() => {
|
|
|
ripple.remove();
|
|
|
}, 600);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
|
|
|
document.querySelector('button[class*="Try Demo"]').addEventListener('click', function() {
|
|
|
for (let i = 0; i < 50; i++) {
|
|
|
const confetti = document.createElement('div');
|
|
|
confetti.className = 'confetti';
|
|
|
confetti.style.left = Math.random() * 100 + 'vw';
|
|
|
confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
|
|
|
confetti.style.animationDuration = Math.random() * 3 + 2 + 's';
|
|
|
document.body.appendChild(confetti);
|
|
|
|
|
|
setTimeout(() => {
|
|
|
confetti.remove();
|
|
|
}, 5000);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
document.querySelectorAll('.floating-label input, .floating-label textarea').forEach(input => {
|
|
|
input.addEventListener('focus', () => {
|
|
|
input.nextElementSibling.classList.add('active');
|
|
|
});
|
|
|
|
|
|
input.addEventListener('blur', () => {
|
|
|
if (!input.value) {
|
|
|
input.nextElementSibling.classList.remove('active');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
if (input.value) {
|
|
|
input.nextElementSibling.classList.add('active');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
const contactDarkMode = document.getElementById('contact-dark-mode');
|
|
|
contactDarkMode.addEventListener('change', () => {
|
|
|
const contactSection = document.getElementById('contact');
|
|
|
if (contactDarkMode.checked) {
|
|
|
contactSection.classList.add('dark');
|
|
|
} else {
|
|
|
contactSection.classList.remove('dark');
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
const scroller = document.querySelector("#reference-scroller");
|
|
|
if (scroller) {
|
|
|
const scrollerContent = Array.from(scroller.children);
|
|
|
|
|
|
scrollerContent.forEach(item => {
|
|
|
const duplicatedItem = item.cloneNode(true);
|
|
|
duplicatedItem.setAttribute("aria-hidden", true);
|
|
|
scroller.appendChild(duplicatedItem);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</head> |
