<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clinical Recruitment & Enrollment Speed Model</title>
<script src="[Link]
<script src="[Link]
<link rel="stylesheet" href="[Link]
[Link]">
<link href="[Link]
family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.card-shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.glass-effect { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); }
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100%
{ transform: translateY(0px); } }
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="gradient-bg text-white py-16">
<div class="container mx-auto px-6">
<div class="text-center">
<h1 class="text-5xl font-bold mb-4">Clinical Recruitment & Enrollment Speed Model</h1>
<p class="text-xl opacity-90">Accelerating Phase II/III Clinical Trial Enrollment Through AI-
Powered Predictive Analytics</p>
<div class="mt-8 flex justify-center space-x-4">
<div class="bg-white bg-opacity-20 rounded-lg px-6 py-3">
<span class="text-sm">Project by</span>
<p class="font-semibold">Patil Vaibhav & Chaudhari Bhushan</p>
</div>
</div>
</div>
</div>
</header>
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-6">
<div class="flex justify-center space-x-8 py-4">
<a href="#business-model" class="text-gray-600 hover:text-purple-600 font-
medium">Business Model</a>
<a href="#data-structure" class="text-gray-600 hover:text-purple-600 font-medium">Data
Structure</a>
<a href="#user-flow" class="text-gray-600 hover:text-purple-600 font-medium">User
Flow</a>
<a href="#monetization" class="text-gray-600 hover:text-purple-600 font-
medium">Monetization</a>
<a href="#ai-methods" class="text-gray-600 hover:text-purple-600 font-medium">AI
Methods</a>
<a href="#validation" class="text-gray-600 hover:text-purple-600 font-
medium">Validation</a>
</div>
</div>
</nav>
<!-- Business Model Section -->
<section id="business-model" class="py-16">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12 text-gray-800">Business Model</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="card-shadow rounded-xl p-8 bg-white">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-lightbulb text-purple-600 text-xl"></i>
</div>
<h3 class="text-2xl font-semibold">Value Proposition</h3>
</div>
<p class="text-gray-600 mb-4">Predictive analytics platform to accelerate clinical trial
enrollment by 30-50% through intelligent site/patient matching</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Reduces time-to-enrollment significantly</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Optimizes trial site selection</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Improves patient recruitment efficiency</span>
</li>
</ul>
</div>
<div class="card-shadow rounded-xl p-8 bg-white">
<div class="flex items-center mb-4">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-users text-blue-600 text-xl"></i>
</div>
<h3 class="text-2xl font-semibold">Target Customers</h3>
</div>
<div class="space-y-3">
<div class="flex items-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-600">Pharmaceutical Companies</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-600">Clinical Research Organizations (CROs)</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-600">Academic Medical Centers</span>
</div>
<div class="flex items-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-3"></div>
<span class="text-gray-600">Site Management Organizations</span>
</div>
</div>
</div>
</div>
<!-- Revenue Streams Chart -->
<div class="card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6 text-center">Revenue Streams</h3>
<div class="h-80">
<canvas id="revenueChart"></canvas>
</div>
</div>
</div>
</section>
<!-- Data Structure Section -->
<section id="data-structure" class="py-16 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12 text-gray-800">Data Structure</h2>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="card-shadow rounded-xl p-6 bg-white">
<div class="text-center mb-4">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-
auto mb-4">
<i class="fas fa-user text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold">Patient Data</h3>
</div>
<div class="text-left text-sm text-gray-600 space-y-2">
<p><strong>Patient ID:</strong> Unique identifier</p>
<p><strong>Demographics:</strong> Age, Gender, Ethnicity</p>
<p><strong>Location:</strong> Zip code, Distance to sites</p>
<p><strong>Medical History:</strong> Diagnoses, Medications</p>
<p><strong>EHR Data:</strong> Structured & Unstructured</p>
</div>
</div>
<div class="card-shadow rounded-xl p-6 bg-white">
<div class="text-center mb-4">
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-
auto mb-4">
<i class="fas fa-flask text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold">Trial Data</h3>
</div>
<div class="text-left text-sm text-gray-600 space-y-2">
<p><strong>Trial ID:</strong> Unique identifier</p>
<p><strong>Eligibility Criteria:</strong> Inclusion/Exclusion</p>
<p><strong>Site Data:</strong> Historical performance</p>
<p><strong>Specialties:</strong> Medical specialties</p>
<p><strong>Patient Volume:</strong> Target enrollment</p>
</div>
</div>
<div class="card-shadow rounded-xl p-6 bg-white">
<div class="text-center mb-4">
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-
auto mb-4">
<i class="fas fa-chart-line text-orange-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold">Predictions</h3>
</div>
<div class="text-left text-sm text-gray-600 space-y-2">
<p><strong>Prediction ID:</strong> Unique identifier</p>
<p><strong>Enrollment Probability:</strong> 0-100%</p>
<p><strong>Site Recommendations:</strong> Ranked list</p>
<p><strong>Time to Enrollment:</strong> Estimated days</p>
<p><strong>Confidence Score:</strong> Model certainty</p>
</div>
</div>
</div>
<!-- Data Sources Table -->
<div class="card-shadow rounded-xl overflow-hidden bg-white">
<div class="px-6 py-4 bg-gradient-to-r from-purple-500 to-purple-600 text-white">
<h3 class="text-xl font-semibold">Key Data Sources</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Source</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Data Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Access Method</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Frequency</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-globe text-blue-500 mr-2"></i>
<span class="font-medium">[Link]</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Trial metadata,
eligibility criteria</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">API, Web
scraping</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Daily</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-database text-green-500 mr-2"></i>
<span class="font-medium">Trialtrove</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Comprehensive
trial database</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">API,
Subscription</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Real-time</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<i class="fas fa-hospital text-red-500 mr-2"></i>
<span class="font-medium">EHR Systems</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Patient records,
medical history</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">API
Integration</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">Continuous</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- User Flow Section -->
<section id="user-flow" class="py-16">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12 text-gray-800">User Flow</h2>
<div class="card-shadow rounded-xl p-8 bg-white">
<div class="grid md:grid-cols-3 gap-8">
<!-- Sponsor/CRO User -->
<div class="text-center">
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto
mb-4">
<i class="fas fa-briefcase text-blue-600 text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">Sponsor/CRO User</h3>
<div class="space-y-3 text-sm text-gray-600">
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
<span>Upload trial protocol</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
<span>Generate patient/site scoring</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
<span>View top recommendations</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
<span>Monitor enrollment progress</span>
</div>
</div>
</div>
<!-- Site Coordinator -->
<div class="text-center">
<div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-
auto mb-4">
<i class="fas fa-users text-green-600 text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">Site Coordinator</h3>
<div class="space-y-3 text-sm text-gray-600">
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span>Access dashboard</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span>View assigned patients</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span>Track screening status</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span>Update enrollment status</span>
</div>
</div>
</div>
<!-- Researcher -->
<div class="text-center">
<div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-
auto mb-4">
<i class="fas fa-search text-purple-600 text-3xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">Researcher</h3>
<div class="space-y-3 text-sm text-gray-600">
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
<span>Search patient database</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
<span>Apply trial filters</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
<span>View patient eligibility scores</span>
</div>
<div class="flex items-center justify-center">
<div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
<span>Export candidate lists</span>
</div>
</div>
</div>
</div>
</div>
<!-- User Journey Chart -->
<div class="mt-12 card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6 text-center">User Journey Analysis</h3>
<div class="h-80">
<canvas id="userJourneyChart"></canvas>
</div>
</div>
</div>
</section>
<!-- Monetization Section -->
<section id="monetization" class="py-16 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12 text-gray-800">Monetization Plan</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<!-- Pricing Tiers -->
<div class="card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6">Pricing Tiers</h3>
<div class="space-y-6">
<div class="border-l-4 border-blue-500 pl-4">
<h4 class="font-semibold text-lg">Basic - $5,000/month</h4>
<ul class="mt-2 text-sm text-gray-600 space-y-1">
<li>• 1 trial</li>
<li>• 5 sites</li>
<li>• 500 patients</li>
<li>• Standard support</li>
</ul>
</div>
<div class="border-l-4 border-purple-500 pl-4">
<h4 class="font-semibold text-lg">Professional - $15,000/month</h4>
<ul class="mt-2 text-sm text-gray-600 space-y-1">
<li>• 5 trials</li>
<li>• 20 sites</li>
<li>• 2,500 patients</li>
<li>• Priority support</li>
</ul>
</div>
<div class="border-l-4 border-green-500 pl-4">
<h4 class="font-semibold text-lg">Enterprise - $50,000/month</h4>
<ul class="mt-2 text-sm text-gray-600 space-y-1">
<li>• Unlimited trials</li>
<li>• Custom integration</li>
<li>• Dedicated account manager</li>
<li>• 24/7 premium support</li>
</ul>
</div>
</div>
</div>
<!-- Additional Revenue -->
<div class="card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6">Additional Revenue Streams</h3>
<div class="space-y-4">
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
<div>
<h4 class="font-semibold">Data Enrichment Services</h4>
<p class="text-sm text-gray-600">Enhanced patient data analysis</p>
</div>
<span class="text-lg font-bold text-green-600">$2,000/trial</span>
</div>
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
<div>
<h4 class="font-semibold">Custom API Access</h4>
<p class="text-sm text-gray-600">Full integration capabilities</p>
</div>
<span class="text-lg font-bold text-green-600">$10,000/month</span>
</div>
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
<div>
<h4 class="font-semibold">Training & Support</h4>
<p class="text-sm text-gray-600">Implementation packages</p>
</div>
<span class="text-lg font-bold text-green-600">Custom</span>
</div>
</div>
</div>
</div>
<!-- Revenue Forecast -->
<div class="card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6 text-center">5-Year Revenue Forecast</h3>
<div class="h-80">
<canvas id="revenueForecastChart"></canvas>
</div>
</div>
</div>
</section>
<!-- AI Methods Section -->
<section id="ai-methods" class="py-16">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12 text-gray-800">AI Methods & Technology
Stack</h2>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<div class="card-shadow rounded-xl p-6 bg-white text-center">
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto
mb-4">
<i class="fas fa-brain text-yellow-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">XGBoost</h3>
<p class="text-gray-600 text-sm">Gradient boosting algorithm for predictive modeling and
site performance scoring</p>
</div>
<div class="card-shadow rounded-xl p-6 bg-white text-center">
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto
mb-4">
<i class="fas fa-clock text-red-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Survival Analysis</h3>
<p class="text-gray-600 text-sm">Time-to-event modeling for enrollment prediction and
risk assessment</p>
</div>
<div class="card-shadow rounded-xl p-6 bg-white text-center">
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto
mb-4">
<i class="fas fa-robot text-indigo-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Transformers</h3>
<p class="text-gray-600 text-sm">NLP for eligibility criteria matching and unstructured
data processing</p>
</div>
</div>
<!-- Tech Stack Matrix -->
<div class="card-shadow rounded-xl overflow-hidden bg-white">
<div class="px-6 py-4 bg-gradient-to-r from-indigo-500 to-indigo-600 text-white">
<h3 class="text-xl font-semibold">Technology Stack</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Component</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Technology</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Purpose</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-
wider">Version</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium">Frontend</td>
<td class="px-6 py-4 whitespace-nowrap">React + Flutter</td>
<td class="px-6 py-4 whitespace-nowrap">Cross-platform UI</td>
<td class="px-6 py-4 whitespace-nowrap">React 18, Flutter 3</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium">Backend</td>
<td class="px-6 py-4 whitespace-nowrap">Python (FastAPI)</td>
<td class="px-6 py-4 whitespace-nowrap">API Services</td>
<td class="px-6 py-4 whitespace-nowrap">Python 3.9</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium">ML Framework</td>
<td class="px-6 py-4 whitespace-nowrap">TensorFlow/PyTorch</td>
<td class="px-6 py-4 whitespace-nowrap">AI Model Development</td>
<td class="px-6 py-4 whitespace-nowrap">TF 2.10, PyTorch 1.13</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium">Database</td>
<td class="px-6 py-4 whitespace-nowrap">PostgreSQL + Redis</td>
<td class="px-6 py-4 whitespace-nowrap">Data Storage & Caching</td>
<td class="px-6 py-4 whitespace-nowrap">PG 14, Redis 7</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap font-medium">Cloud</td>
<td class="px-6 py-4 whitespace-nowrap">AWS/Azure</td>
<td class="px-6 py-4 whitespace-nowrap">Scalability & Deployment</td>
<td class="px-6 py-4 whitespace-nowrap">Latest</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- Validation Strategy Section -->
<section id="validation" class="py-16 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-12 text-gray-800">Validation Strategy</h2>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6">Prospective Enrollment Time Comparison</h3>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg">
<div>
<h4 class="font-semibold">Traditional Method</h4>
<p class="text-sm text-gray-600">Current industry standard</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold text-blue-600">18.5</p>
<p class="text-sm text-gray-600">Months</p>
</div>
</div>
<div class="flex items-center justify-between p-4 bg-green-50 rounded-lg">
<div>
<h4 class="font-semibold">AI-Powered Method</h4>
<p class="text-sm text-gray-600">Our predictive model</p>
</div>
<div class="text-right">
<p class="text-2xl font-bold text-green-600">9.2</p>
<p class="text-sm text-gray-600">Months</p>
</div>
</div>
<div class="text-center p-4 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg">
<p class="text-3xl font-bold text-purple-600">50.3%</p>
<p class="text-sm text-gray-600">Reduction in enrollment time</p>
</div>
</div>
</div>
<div class="card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6">Model Performance Metrics</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-gray-600">Accuracy</span>
<div class="flex items-center">
<div class="w-32 bg-gray-200 rounded-full h-2 mr-3">
<div class="bg-green-500 h-2 rounded-full" style="width: 87%"></div>
</div>
<span class="font-semibold">87%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600">Precision</span>
<div class="flex items-center">
<div class="w-32 bg-gray-200 rounded-full h-2 mr-3">
<div class="bg-blue-500 h-2 rounded-full" style="width: 82%"></div>
</div>
<span class="font-semibold">82%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600">Recall</span>
<div class="flex items-center">
<div class="w-32 bg-gray-200 rounded-full h-2 mr-3">
<div class="bg-purple-500 h-2 rounded-full" style="width: 89%"></div>
</div>
<span class="font-semibold">89%</span>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-600">F1 Score</span>
<div class="flex items-center">
<div class="w-32 bg-gray-200 rounded-full h-2 mr-3">
<div class="bg-orange-500 h-2 rounded-full" style="width: 85%"></div>
</div>
<span class="font-semibold">85%</span>
</div>
</div>
</div>
</div>
</div>
<!-- Validation Process Chart -->
<div class="card-shadow rounded-xl p-8 bg-white">
<h3 class="text-2xl font-semibold mb-6 text-center">Validation Process Timeline</h3>
<div class="h-80">
<canvas id="validationChart"></canvas>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-6 text-center">
<p class="text-lg mb-4">Clinical Recruitment & Enrollment Speed Model</p>
<p class="text-gray-400">Project by Patil Vaibhav & Chaudhari Bhushan</p>
<div class="mt-6 flex justify-center space-x-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-github text-2xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin text-2xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fas fa-envelope text-2xl"></i>
</a>
</div>
</div>
</footer>
<script>
// Revenue Streams Chart
const revenueCtx = [Link]('revenueChart').getContext('2d');
new Chart(revenueCtx, {
type: 'doughnut',
data: {
labels: ['Subscription', 'Pay-per-use', 'Enterprise', 'Consulting'],
datasets: [{
data: [45, 25, 20, 10],
backgroundColor: [
'#667eea',
'#764ba2',
'#f093fb',
'#f5576c'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20,
font: {
size: 14
}
});
// User Journey Chart
const userJourneyCtx = [Link]('userJourneyChart').getContext('2d');
new Chart(userJourneyCtx, {
type: 'line',
data: {
labels: ['Week 1', 'Week 2', 'Week 4', 'Week 8', 'Week 12', 'Week 16'],
datasets: [{
label: 'Sponsor/CRO',
data: [20, 45, 65, 78, 85, 92],
borderColor: '#667eea',
backgroundColor: 'rgba(102, 126, 234, 0.1)',
tension: 0.4,
fill: true
}, {
label: 'Site Coordinator',
data: [15, 38, 58, 72, 80, 88],
borderColor: '#764ba2',
backgroundColor: 'rgba(118, 75, 162, 0.1)',
tension: 0.4,
fill: true
}, {
label: 'Researcher',
data: [25, 50, 70, 82, 90, 95],
borderColor: '#f093fb',
backgroundColor: 'rgba(240, 147, 251, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top'
},
scales: {
y: {
beginAtZero: true,
max: 100,
title: {
display: true,
text: 'User Engagement (%)'
});
// Revenue Forecast Chart
const revenueForecastCtx =
[Link]('revenueForecastChart').getContext('2d');
new Chart(revenueForecastCtx, {
type: 'bar',
data: {
labels: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
datasets: [{
label: 'Revenue (USD)',
data: [720000, 2160000, 4320000, 7200000, 10800000],
backgroundColor: 'rgba(102, 126, 234, 0.8)',
borderColor: '#667eea',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
return '$' + ([Link].y / 1000000).toFixed(1) + 'M';
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return '$' + (value / 1000000) + 'M';
}
});
// Validation Chart
const validationCtx = [Link]('validationChart').getContext('2d');
new Chart(validationCtx, {
type: 'bar',
data: {
labels: ['Data Collection', 'Model Training', 'Validation', 'Prospective Testing', 'Deployment'],
datasets: [{
label: 'Duration (Weeks)',
data: [4, 6, 3, 8, 2],
backgroundColor: [
'#667eea',
'#764ba2',
'#f093fb',
'#f5576c',
'#4facfe'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Duration (Weeks)'
});
</script>
</body>
</html>