zeekamu / index.html
Xynqax11's picture
Add 3 files
2622c32 verified
<!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">
<!-- Sidebar -->
<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>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Header -->
<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>
<!-- Dashboard Content -->
<main class="p-6">
<!-- Stats Cards -->
<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>
<!-- Charts Row -->
<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>
<!-- Recent Research & Quick Actions -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Recent Research -->
<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>
<!-- Quick Actions -->
<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>
// Toggle sidebar
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('collapsed');
});
// Toggle user menu
document.getElementById('userMenuButton').addEventListener('click', function() {
document.getElementById('userMenu').classList.toggle('hidden');
});
// Close user menu when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.closest('#userMenuButton') && !event.target.closest('#userMenu')) {
document.getElementById('userMenu').classList.add('hidden');
}
});
// Charts
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>