|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>SecureTrack - Social Security Research Platform</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
.gradient-bg { |
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
|
} |
|
.card-hover:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
} |
|
.sidebar { |
|
transition: all 0.3s ease; |
|
} |
|
.sidebar.collapsed { |
|
width: 70px; |
|
} |
|
.sidebar.collapsed .sidebar-text { |
|
display: none; |
|
} |
|
.sidebar.collapsed .logo-text { |
|
display: none; |
|
} |
|
.sidebar.collapsed .nav-item { |
|
justify-content: center; |
|
} |
|
.chart-container { |
|
height: 300px; |
|
} |
|
.data-table { |
|
max-height: 400px; |
|
overflow-y: auto; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 font-sans"> |
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
<div class="sidebar bg-white w-64 shadow-lg flex flex-col"> |
|
<div class="p-4 flex items-center border-b"> |
|
<div class="bg-blue-600 p-2 rounded-lg"> |
|
<i class="fas fa-shield-alt text-white text-xl"></i> |
|
</div> |
|
<h1 class="logo-text text-xl font-bold ml-3 text-blue-800">SecureTrack</h1> |
|
</div> |
|
|
|
<div class="flex-1 overflow-y-auto py-4"> |
|
<div class="px-4 mb-6"> |
|
<div class="relative"> |
|
<input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
</div> |
|
</div> |
|
|
|
<nav class="px-2"> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-blue-700 bg-blue-50 rounded-lg mb-1"> |
|
<i class="fas fa-home mr-3 text-blue-600"></i> |
|
<span class="sidebar-text">Dashboard</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-1"> |
|
<i class="fas fa-database mr-3"></i> |
|
<span class="sidebar-text">Research Data</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-1"> |
|
<i class="fas fa-chart-line mr-3"></i> |
|
<span class="sidebar-text">Analytics</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-1"> |
|
<i class="fas fa-user-shield mr-3"></i> |
|
<span class="sidebar-text">Vulnerabilities</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-1"> |
|
<i class="fas fa-file-alt mr-3"></i> |
|
<span class="sidebar-text">Reports</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-1"> |
|
<i class="fas fa-users mr-3"></i> |
|
<span class="sidebar-text">Collaboration</span> |
|
</a> |
|
</nav> |
|
|
|
<div class="px-4 mt-8"> |
|
<h3 class="text-xs uppercase font-semibold text-gray-500 mb-2 sidebar-text">Tools</h3> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-1"> |
|
<i class="fas fa-search-dollar mr-3"></i> |
|
<span class="sidebar-text">Benefit Calculator</span> |
|
</a> |
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-1"> |
|
<i class="fas fa-project-diagram mr-3"></i> |
|
<span class="sidebar-text">Policy Simulator</span> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
<div class="p-4 border-t"> |
|
<div class="flex items-center"> |
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full"> |
|
<div class="ml-3 sidebar-text"> |
|
<p class="font-medium">Dr. Sarah Johnson</p> |
|
<p class="text-sm text-gray-500">Senior Researcher</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
<header class="bg-white shadow-sm"> |
|
<div class="flex items-center justify-between px-6 py-4"> |
|
<div class="flex items-center"> |
|
<button id="sidebarToggle" class="mr-4 text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-bars text-xl"></i> |
|
</button> |
|
<h1 class="text-xl font-semibold text-gray-800">Social Security Research Dashboard</h1> |
|
</div> |
|
<div class="flex items-center space-x-4"> |
|
<button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> |
|
<i class="fas fa-bell"></i> |
|
<span class="sr-only">Notifications</span> |
|
</button> |
|
<button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> |
|
<i class="fas fa-question-circle"></i> |
|
<span class="sr-only">Help</span> |
|
</button> |
|
<div class="relative"> |
|
<button id="userMenuButton" class="flex items-center space-x-2 focus:outline-none"> |
|
<span class="text-sm font-medium">Dr. Johnson</span> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> |
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a> |
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> |
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="p-6"> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
<div class="bg-white rounded-lg shadow p-6 card-hover"> |
|
<div class="flex items-center"> |
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> |
|
<i class="fas fa-users text-xl"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm text-gray-500">Beneficiaries</p> |
|
<h3 class="text-2xl font-bold">62.4M</h3> |
|
<p class="text-sm text-green-500">+2.1% from last year</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow p-6 card-hover"> |
|
<div class="flex items-center"> |
|
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> |
|
<i class="fas fa-dollar-sign text-xl"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm text-gray-500">Annual Payments</p> |
|
<h3 class="text-2xl font-bold">$1.2T</h3> |
|
<p class="text-sm text-red-500">+4.3% from last year</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow p-6 card-hover"> |
|
<div class="flex items-center"> |
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> |
|
<i class="fas fa-exclamation-triangle text-xl"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm text-gray-500">Vulnerabilities</p> |
|
<h3 class="text-2xl font-bold">1,248</h3> |
|
<p class="text-sm text-yellow-500">+12 this month</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow p-6 card-hover"> |
|
<div class="flex items-center"> |
|
<div class="p-3 rounded-full bg-orange-100 text-orange-600 mr-4"> |
|
<i class="fas fa-file-alt text-xl"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm text-gray-500">Active Research</p> |
|
<h3 class="text-2xl font-bold">87</h3> |
|
<p class="text-sm text-blue-500">5 new this week</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
<div class="bg-white rounded-lg shadow p-6"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-lg font-semibold">Benefit Distribution by Age</h2> |
|
<div class="flex space-x-2"> |
|
<button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded">Year</button> |
|
<button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">Quarter</button> |
|
<button class="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded">Month</button> |
|
</div> |
|
</div> |
|
<div class="chart-container"> |
|
<canvas id="benefitChart"></canvas> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-lg font-semibold">Fraud Cases by Type</h2> |
|
<button class="text-blue-600 text-sm font-medium">View All</button> |
|
</div> |
|
<div class="chart-container"> |
|
<canvas id="fraudChart"></canvas> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow"> |
|
<div class="p-6 border-b"> |
|
<h2 class="text-lg font-semibold">Recent Research Projects</h2> |
|
</div> |
|
<div class="data-table"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Team</th> |
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</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="font-medium text-blue-600">SSI Fraud Patterns</div> |
|
<div class="text-sm text-gray-500">Analyzing emerging fraud techniques</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 members</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td> |
|
</tr> |
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="font-medium text-blue-600">Disability Claim Analysis</div> |
|
<div class="text-sm text-gray-500">Regional variations in approval rates</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 members</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 30, 2023</td> |
|
</tr> |
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="font-medium text-blue-600">Retirement Age Impact</div> |
|
<div class="text-sm text-gray-500">Effects of raising retirement age</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Review</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7 members</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 28, 2023</td> |
|
</tr> |
|
<tr class="hover:bg-gray-50"> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<div class="font-medium text-blue-600">System Vulnerabilities</div> |
|
<div class="text-sm text-gray-500">IT security assessment</div> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Completed</span> |
|
</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 members</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mar 15, 2023</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
<div class="p-4 border-t text-center"> |
|
<button class="text-blue-600 font-medium">View All Projects</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow"> |
|
<div class="p-6 border-b"> |
|
<h2 class="text-lg font-semibold">Quick Actions</h2> |
|
</div> |
|
<div class="p-6"> |
|
<button class="w-full flex items-center justify-between p-4 mb-4 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-plus-circle mr-3 text-xl"></i> |
|
<span>New Research Project</span> |
|
</div> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
|
|
<button class="w-full flex items-center justify-between p-4 mb-4 bg-green-50 text-green-700 rounded-lg hover:bg-green-100"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-chart-pie mr-3 text-xl"></i> |
|
<span>Generate Report</span> |
|
</div> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
|
|
<button class="w-full flex items-center justify-between p-4 mb-4 bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-bug mr-3 text-xl"></i> |
|
<span>Report Vulnerability</span> |
|
</div> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
|
|
<button class="w-full flex items-center justify-between p-4 bg-orange-50 text-orange-700 rounded-lg hover:bg-orange-100"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-users mr-3 text-xl"></i> |
|
<span>Request Collaboration</span> |
|
</div> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="p-6 border-t"> |
|
<h3 class="text-sm font-medium text-gray-500 mb-3">Upcoming Events</h3> |
|
<div class="space-y-4"> |
|
<div class="flex"> |
|
<div class="flex-shrink-0 mr-3"> |
|
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 text-blue-600"> |
|
<i class="fas fa-calendar-alt"></i> |
|
</div> |
|
</div> |
|
<div> |
|
<p class="font-medium">Policy Review Meeting</p> |
|
<p class="text-sm text-gray-500">Tomorrow, 10:00 AM</p> |
|
</div> |
|
</div> |
|
<div class="flex"> |
|
<div class="flex-shrink-0 mr-3"> |
|
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-100 text-green-600"> |
|
<i class="fas fa-graduation-cap"></i> |
|
</div> |
|
</div> |
|
<div> |
|
<p class="font-medium">Research Symposium</p> |
|
<p class="text-sm text-gray-500">May 15, 1:30 PM</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
</div> |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<script> |
|
|
|
document.getElementById('sidebarToggle').addEventListener('click', function() { |
|
document.querySelector('.sidebar').classList.toggle('collapsed'); |
|
}); |
|
|
|
|
|
document.getElementById('userMenuButton').addEventListener('click', function() { |
|
document.getElementById('userMenu').classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
document.addEventListener('click', function(event) { |
|
if (!event.target.closest('#userMenuButton') && !event.target.closest('#userMenu')) { |
|
document.getElementById('userMenu').classList.add('hidden'); |
|
} |
|
}); |
|
|
|
|
|
const benefitCtx = document.getElementById('benefitChart').getContext('2d'); |
|
const benefitChart = new Chart(benefitCtx, { |
|
type: 'bar', |
|
data: { |
|
labels: ['Under 18', '18-25', '26-35', '36-45', '46-55', '56-65', '66-75', '76+'], |
|
datasets: [{ |
|
label: 'Beneficiaries (millions)', |
|
data: [4.3, 5.1, 7.8, 9.2, 12.4, 15.7, 18.2, 9.7], |
|
backgroundColor: [ |
|
'rgba(59, 130, 246, 0.7)', |
|
'rgba(59, 130, 246, 0.7)', |
|
'rgba(59, 130, 246, 0.7)', |
|
'rgba(59, 130, 246, 0.7)', |
|
'rgba(59, 130, 246, 0.7)', |
|
'rgba(59, 130, 246, 0.7)', |
|
'rgba(59, 130, 246, 0.7)', |
|
'rgba(59, 130, 246, 0.7)' |
|
], |
|
borderColor: [ |
|
'rgba(59, 130, 246, 1)', |
|
'rgba(59, 130, 246, 1)', |
|
'rgba(59, 130, 246, 1)', |
|
'rgba(59, 130, 246, 1)', |
|
'rgba(59, 130, 246, 1)', |
|
'rgba(59, 130, 246, 1)', |
|
'rgba(59, 130, 246, 1)', |
|
'rgba(59, 130, 246, 1)' |
|
], |
|
borderWidth: 1 |
|
}] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
scales: { |
|
y: { |
|
beginAtZero: true |
|
} |
|
} |
|
} |
|
}); |
|
|
|
const fraudCtx = document.getElementById('fraudChart').getContext('2d'); |
|
const fraudChart = new Chart(fraudCtx, { |
|
type: 'doughnut', |
|
data: { |
|
labels: ['Identity Theft', 'False Claims', 'Payment Diversion', 'Document Fraud', 'Other'], |
|
datasets: [{ |
|
data: [35, 25, 20, 15, 5], |
|
backgroundColor: [ |
|
'rgba(239, 68, 68, 0.7)', |
|
'rgba(249, 115, 22, 0.7)', |
|
'rgba(234, 179, 8, 0.7)', |
|
'rgba(20, 184, 166, 0.7)', |
|
'rgba(139, 92, 246, 0.7)' |
|
], |
|
borderColor: [ |
|
'rgba(239, 68, 68, 1)', |
|
'rgba(249, 115, 22, 1)', |
|
'rgba(234, 179, 8, 1)', |
|
'rgba(20, 184, 166, 1)', |
|
'rgba(139, 92, 246, 1)' |
|
], |
|
borderWidth: 1 |
|
}] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
plugins: { |
|
legend: { |
|
position: 'right', |
|
} |
|
} |
|
} |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Xynqax11/zeekamu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |