|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Quantum Miner - Advanced Data Mining Platform</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.data-mining-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.algorithm-card { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.algorithm-card:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
.node { |
|
|
cursor: move; |
|
|
user-select: none; |
|
|
} |
|
|
.connection { |
|
|
stroke: #4f46e5; |
|
|
stroke-width: 2px; |
|
|
fill: none; |
|
|
} |
|
|
#dataCanvas { |
|
|
background-color: #f8fafc; |
|
|
border-radius: 0.5rem; |
|
|
} |
|
|
.dark #dataCanvas { |
|
|
background-color: #1e293b; |
|
|
} |
|
|
.progress-ring__circle { |
|
|
transition: stroke-dashoffset 0.35s; |
|
|
transform: rotate(-90deg); |
|
|
transform-origin: 50% 50%; |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
.tooltip .tooltiptext { |
|
|
visibility: hidden; |
|
|
width: 200px; |
|
|
background-color: #333; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -100px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.tooltip:hover .tooltiptext { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
.glow { |
|
|
box-shadow: 0 0 10px rgba(79, 70, 229, 0.7); |
|
|
} |
|
|
.node-highlight { |
|
|
animation: glow-pulse 1.5s infinite alternate; |
|
|
} |
|
|
@keyframes glow-pulse { |
|
|
from { box-shadow: 0 0 5px rgba(79, 70, 229, 0.5); } |
|
|
to { box-shadow: 0 0 15px rgba(79, 70, 229, 0.9); } |
|
|
} |
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.scrollbar-hide { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div id="sidebar" class="sidebar w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col transition-all duration-300"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold">QM</div> |
|
|
<div class="ml-3"> |
|
|
<h1 class="font-bold text-lg">Quantum Miner</h1> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">v3.2.1</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-4 scrollbar-hide"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Data Sources</h2> |
|
|
<div class="space-y-1"> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-database mr-2 text-indigo-500"></i> Databases |
|
|
<span class="ml-auto bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-xs px-2 py-0.5 rounded-full">12</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-file-csv mr-2 text-green-500"></i> CSV/Excel |
|
|
<span class="ml-auto bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-0.5 rounded-full">8</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-cloud mr-2 text-blue-500"></i> Cloud Storage |
|
|
<span class="ml-auto bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded-full">5</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-globe mr-2 text-purple-500"></i> Web Scraping |
|
|
<span class="ml-auto bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs px-2 py-0.5 rounded-full">3</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-stream mr-2 text-yellow-500"></i> API Integration |
|
|
<span class="ml-auto bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs px-2 py-0.5 rounded-full">7</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Algorithms</h2> |
|
|
<div class="space-y-1"> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-project-diagram mr-2 text-red-500"></i> Association Rules |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-sitemap mr-2 text-pink-500"></i> Decision Trees |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-chart-line mr-2 text-orange-500"></i> Regression |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-layer-group mr-2 text-teal-500"></i> Clustering |
|
|
<span class="ml-auto bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200 text-xs px-2 py-0.5 rounded-full">Active</span> |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-brain mr-2 text-indigo-500"></i> Neural Networks |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Visualization</h2> |
|
|
<div class="space-y-1"> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-chart-bar mr-2 text-blue-500"></i> Charts |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-map mr-2 text-green-500"></i> Geospatial |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-network-wired mr-2 text-purple-500"></i> Network Graphs |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Projects</h2> |
|
|
<div class="space-y-1"> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-200 border border-indigo-100 dark:border-indigo-800"> |
|
|
<i class="fas fa-chart-pie mr-2 text-indigo-500"></i> Customer Segmentation |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-shopping-cart mr-2 text-yellow-500"></i> Market Basket |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-robot mr-2 text-red-500"></i> Fraud Detection |
|
|
</button> |
|
|
<button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> |
|
|
<i class="fas fa-bolt mr-2 text-green-500"></i> Real-time Analytics |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Quick Actions</h2> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-plus mr-1 text-indigo-500"></i> New |
|
|
</button> |
|
|
<button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-upload mr-1 text-blue-500"></i> Import |
|
|
</button> |
|
|
<button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-share-alt mr-1 text-green-500"></i> Share |
|
|
</button> |
|
|
<button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-cog mr-1 text-purple-500"></i> Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-white text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Admin User</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Premium License</p> |
|
|
</div> |
|
|
<button class="ml-auto text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"> |
|
|
<i class="fas fa-cog"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<button id="sidebarToggle" class="mr-4 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<div class="flex items-center"> |
|
|
<h2 class="text-xl font-bold">Customer Segmentation Analysis</h2> |
|
|
<span class="ml-2 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-xs px-2 py-0.5 rounded-full">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative hidden md:block"> |
|
|
<input type="text" placeholder="Search datasets..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent w-64 transition-all"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 relative transition-colors"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
<button id="darkModeToggle" class="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
<button class="hidden md:flex items-center px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors text-sm"> |
|
|
<i class="fas fa-plus mr-2"></i> New Project |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Records</p> |
|
|
<h3 class="text-2xl font-bold mt-1">1,248,753</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> |
|
|
<i class="fas fa-database text-indigo-600 dark:text-indigo-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm text-green-500"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> |
|
|
<span>12.5% from last week</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Attributes</p> |
|
|
<h3 class="text-2xl font-bold mt-1">47</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center"> |
|
|
<i class="fas fa-columns text-blue-600 dark:text-blue-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm text-yellow-500"> |
|
|
<i class="fas fa-info-circle mr-1"></i> |
|
|
<span>8 categorical, 39 numerical</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Processing Time</p> |
|
|
<h3 class="text-2xl font-bold mt-1">3.2s</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> |
|
|
<i class="fas fa-bolt text-green-600 dark:text-green-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm text-indigo-500"> |
|
|
<i class="fas fa-robot mr-1"></i> |
|
|
<span>AI-optimized pipeline</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Model Accuracy</p> |
|
|
<h3 class="text-2xl font-bold mt-1">94.7%</h3> |
|
|
</div> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line text-purple-600 dark:text-purple-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center text-sm text-red-500"> |
|
|
<i class="fas fa-exclamation-triangle mr-1"></i> |
|
|
<span>Needs improvement</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-bold">Customer Segmentation Clusters</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
<option>2D View</option> |
|
|
<option>3D View</option> |
|
|
<option>PCA Projection</option> |
|
|
</select> |
|
|
<i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 text-xs"></i> |
|
|
</div> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors"> |
|
|
<i class="fas fa-sliders-h mr-1"></i> Adjust |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-download mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-96 relative"> |
|
|
<canvas id="clusterChart"></canvas> |
|
|
<div id="clusterLoading" class="absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 flex items-center justify-center hidden"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-circle-notch fa-spin text-indigo-500 text-2xl mb-2"></i> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">Rendering clusters...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200"> |
|
|
<span class="w-2 h-2 mr-1 rounded-full bg-indigo-500"></span> Cluster 1 |
|
|
</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"> |
|
|
<span class="w-2 h-2 mr-1 rounded-full bg-green-500"></span> Cluster 2 |
|
|
</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"> |
|
|
<span class="w-2 h-2 mr-1 rounded-full bg-yellow-500"></span> Cluster 3 |
|
|
</span> |
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"> |
|
|
<span class="w-2 h-2 mr-1 rounded-full bg-red-500"></span> Cluster 4 |
|
|
</span> |
|
|
</div> |
|
|
<button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors"> |
|
|
<i class="fas fa-plus mr-1"></i> Add Cluster |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-bold">Cluster Characteristics</h3> |
|
|
<div class="relative"> |
|
|
<select id="clusterSelect" class="appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
<option>Cluster 1</option> |
|
|
<option>Cluster 2</option> |
|
|
<option>Cluster 3</option> |
|
|
<option>Cluster 4</option> |
|
|
</select> |
|
|
<i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Size</span> |
|
|
<span class="font-medium">312,188 (25%)</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-indigo-500 h-2 rounded-full" style="width: 25%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Avg. Age</span> |
|
|
<span class="font-medium">34.2 years</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 68%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Avg. Income</span> |
|
|
<span class="font-medium">$72,450</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-yellow-500 h-2 rounded-full" style="width: 82%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Purchase Freq.</span> |
|
|
<span class="font-medium">3.2/month</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-red-500 h-2 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-200 dark:border-gray-700"> |
|
|
<h4 class="text-sm font-medium mb-2">Top Attributes</h4> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></div> |
|
|
<span class="text-sm flex-1">Urban residents</span> |
|
|
<span class="text-sm font-medium">89%</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="text-sm flex-1">College educated</span> |
|
|
<span class="text-sm font-medium">76%</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div> |
|
|
<span class="text-sm flex-1">Tech enthusiasts</span> |
|
|
<span class="text-sm font-medium">68%</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div> |
|
|
<span class="text-sm flex-1">Premium subscribers</span> |
|
|
<span class="text-sm font-medium">52%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-200 dark:border-gray-700"> |
|
|
<h4 class="text-sm font-medium mb-2">Recommended Actions</h4> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="text-xs px-2 py-1 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors"> |
|
|
Targeted Ads |
|
|
</button> |
|
|
<button class="text-xs px-2 py-1 rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800 transition-colors"> |
|
|
Loyalty Program |
|
|
</button> |
|
|
<button class="text-xs px-2 py-1 rounded bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors"> |
|
|
Upsell Products |
|
|
</button> |
|
|
<button class="text-xs px-2 py-1 rounded bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800 transition-colors"> |
|
|
Special Offers |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-bold">Algorithm Selection</h3> |
|
|
<button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors"> |
|
|
<i class="fas fa-random mr-1"></i> Auto-select |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-filter text-indigo-600 dark:text-indigo-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Data Preprocessing</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">StandardScaler, PCA</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-check-circle text-green-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-project-diagram text-blue-600 dark:text-blue-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Clustering</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">K-Means (k=4)</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-check-circle text-green-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-chart-bar text-purple-600 dark:text-purple-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Evaluation</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Silhouette Score</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs font-medium mr-2">Score: 0.72</span> |
|
|
<i class="fas fa-info-circle text-blue-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border-2 border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 transition-colors cursor-pointer"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-brain text-yellow-600 dark:text-yellow-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Advanced Options</h4> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">Add algorithm</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-plus text-indigo-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700"> |
|
|
<button id="runPipelineBtn" class="w-full py-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white rounded-lg font-medium transition-all shadow-md hover:shadow-lg"> |
|
|
<i class="fas fa-play mr-2"></i> Run Pipeline |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="font-bold">Data Mining Pipeline</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors"> |
|
|
<i class="fas fa-code-branch mr-1"></i> Branch |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-save mr-1"></i> Save |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-history mr-1"></i> Version |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-64 relative overflow-hidden rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600"> |
|
|
<svg id="dataCanvas" width="100%" height="100%"> |
|
|
|
|
|
<g class="node node-highlight" transform="translate(50, 100)"> |
|
|
<rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect> |
|
|
<text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Data Source</text> |
|
|
<text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">CSV Import</text> |
|
|
</g> |
|
|
|
|
|
<g class="node" transform="translate(220, 100)"> |
|
|
<rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect> |
|
|
<text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Preprocessing</text> |
|
|
<text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">StandardScaler</text> |
|
|
</g> |
|
|
|
|
|
<g class="node" transform="translate(390, 100)"> |
|
|
<rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect> |
|
|
<text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Dimensionality</text> |
|
|
<text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">PCA (n=5)</text> |
|
|
</g> |
|
|
|
|
|
<g class="node" transform="translate(560, 100)"> |
|
|
<rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect> |
|
|
<text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Clustering</text> |
|
|
<text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">K-Means (k=4)</text> |
|
|
</g> |
|
|
|
|
|
<g class="node" transform="translate(730, 100)"> |
|
|
<rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect> |
|
|
<text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Evaluation</text> |
|
|
<text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">Silhouette</text> |
|
|
</g> |
|
|
|
|
|
|
|
|
<path class="connection" d="M170,130 C195,130 195,130 220,130" marker-end="url(#arrowhead)"></path> |
|
|
<path class="connection" d="M340,130 C365,130 365,130 390,130" marker-end="url(#arrowhead)"></path> |
|
|
<path class="connection" d="M510,130 C535,130 535,130 560,130" marker-end="url(#arrowhead)"></path> |
|
|
<path class="connection" d="M680,130 C705,130 705,130 730,130" marker-end="url(#arrowhead)"></path> |
|
|
|
|
|
|
|
|
<defs> |
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> |
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#818cf8"></polygon> |
|
|
</marker> |
|
|
</defs> |
|
|
</svg> |
|
|
|
|
|
<div id="pipelineLoading" class="absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 flex items-center justify-center hidden"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-circle-notch fa-spin text-indigo-500 text-2xl mb-2"></i> |
|
|
<p class="text-sm text-gray-600 dark:text-gray-300">Building pipeline...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="text-sm">Pipeline valid</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-undo mr-1"></i> Reset |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors"> |
|
|
<i class="fas fa-rocket mr-1"></i> Execute |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between"> |
|
|
<h3 class="font-bold">Data Preview</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
<option>First 100 rows</option> |
|
|
<option>Random sample</option> |
|
|
<option>Cluster 1 only</option> |
|
|
<option>Cluster 2 only</option> |
|
|
<option>Cluster 3 only</option> |
|
|
<option>Cluster 4 only</option> |
|
|
</select> |
|
|
<i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 text-xs"></i> |
|
|
</div> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"> |
|
|
<i class="fas fa-filter mr-1"></i> Filter |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> Refresh |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<thead class="bg-gray-50 dark:bg-gray-700"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Age</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Income</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Spending</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cluster</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">32</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$68,200</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$1,250</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Cluster 1</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">45</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$92,500</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$2,780</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 dark:bg-green-900 text-green-800 dark:text-green-200">Cluster 2</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">28</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$52,300</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$890</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 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Cluster 3</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST004</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">38</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$112,000</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$3,450</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Cluster 4</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors"> |
|
|
<i class="fas fa-ellipsis-v"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
Previous |
|
|
</button> |
|
|
<button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
Next |
|
|
</button> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700 dark:text-gray-300"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">1,248,753</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<button aria-current="page" class="z-10 bg-indigo-50 dark:bg-indigo-900 border-indigo-500 dark:border-indigo-700 text-indigo-600 dark:text-indigo-300 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> |
|
|
1 |
|
|
</button> |
|
|
<button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors"> |
|
|
2 |
|
|
</button> |
|
|
<button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors"> |
|
|
3 |
|
|
</button> |
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300"> |
|
|
... |
|
|
</span> |
|
|
<button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors"> |
|
|
8 |
|
|
</button> |
|
|
<button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors"> |
|
|
9 |
|
|
</button> |
|
|
<button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors"> |
|
|
10 |
|
|
</button> |
|
|
<button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('sidebarToggle').addEventListener('click', function() { |
|
|
document.querySelector('.sidebar').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
darkModeToggle.addEventListener('click', function() { |
|
|
const isDark = document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('darkMode', isDark); |
|
|
|
|
|
|
|
|
const icon = this.querySelector('i'); |
|
|
icon.classList.toggle('fa-moon'); |
|
|
icon.classList.toggle('fa-sun'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'true') { |
|
|
document.documentElement.classList.add('dark'); |
|
|
document.getElementById('darkModeToggle').querySelector('i').classList.remove('fa-moon'); |
|
|
document.getElementById('darkModeToggle').querySelector('i').classList.add('fa-sun'); |
|
|
} |
|
|
|
|
|
|
|
|
const clusterCtx = document.getElementById('clusterChart').getContext('2d'); |
|
|
const clusterChart = new Chart(clusterCtx, { |
|
|
type: 'scatter', |
|
|
data: { |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Cluster 1', |
|
|
data: Array.from({length: 50}, () => ({ |
|
|
x: Math.random() * 30 + 10, |
|
|
y: Math.random() * 40 + 20 |
|
|
})), |
|
|
backgroundColor: '#6366f1', |
|
|
borderColor: '#4338ca', |
|
|
pointRadius: 6, |
|
|
pointHoverRadius: 8 |
|
|
}, |
|
|
{ |
|
|
label: 'Cluster 2', |
|
|
data: Array.from({length: 50}, () => ({ |
|
|
x: Math.random() * 30 + 40, |
|
|
y: Math.random() * 40 + 60 |
|
|
})), |
|
|
backgroundColor: '#10b981', |
|
|
borderColor: '#047857', |
|
|
pointRadius: 6, |
|
|
pointHoverRadius: 8 |
|
|
}, |
|
|
{ |
|
|
label: 'Cluster 3', |
|
|
data: Array.from({length: 50}, () => ({ |
|
|
x: Math.random() * 30 + 70, |
|
|
y: Math.random() * 40 + 30 |
|
|
})), |
|
|
backgroundColor: '#f59e0b', |
|
|
borderColor: '#b45309', |
|
|
pointRadius: 6, |
|
|
pointHoverRadius: 8 |
|
|
}, |
|
|
{ |
|
|
label: 'Cluster 4', |
|
|
data: Array.from({length: 50}, () => ({ |
|
|
x: Math.random() * 30 + 20, |
|
|
y: Math.random() * 40 + 70 |
|
|
})), |
|
|
backgroundColor: '#ef4444', |
|
|
borderColor: '#b91c1c', |
|
|
pointRadius: 6, |
|
|
pointHoverRadius: 8 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
x: { |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Spending Score (1-100)' |
|
|
}, |
|
|
min: 0, |
|
|
max: 100 |
|
|
}, |
|
|
y: { |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Annual Income (k$)' |
|
|
}, |
|
|
min: 0, |
|
|
max: 100 |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
return `Customer ${context.dataIndex + 1}: |
|
|
Income: $${(context.parsed.y * 1000).toFixed(0)}, |
|
|
Score: ${context.parsed.x.toFixed(0)}`; |
|
|
} |
|
|
} |
|
|
}, |
|
|
legend: { |
|
|
position: 'bottom', |
|
|
labels: { |
|
|
boxWidth: 12, |
|
|
padding: 20 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const nodes = document.querySelectorAll('.node'); |
|
|
nodes.forEach(node => { |
|
|
node.setAttribute('draggable', 'true'); |
|
|
|
|
|
node.addEventListener('dragstart', function(e) { |
|
|
e.dataTransfer.setData('text/plain', this.id); |
|
|
this.classList.add('opacity-50'); |
|
|
}); |
|
|
|
|
|
node.addEventListener('dragend', function() { |
|
|
this.classList.remove('opacity-50'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const canvas = document.getElementById('dataCanvas'); |
|
|
canvas.addEventListener('dragover', function(e) { |
|
|
e.preventDefault(); |
|
|
this.classList.add('bg-indigo-50', 'dark:bg-gray-700'); |
|
|
}); |
|
|
|
|
|
canvas.addEventListener('dragleave', function() { |
|
|
this.classList.remove('bg-indigo-50', 'dark:bg-gray-700'); |
|
|
}); |
|
|
|
|
|
canvas.addEventListener('drop', function(e) { |
|
|
e.preventDefault(); |
|
|
this.classList.remove('bg-indigo-50', 'dark:bg-gray-700'); |
|
|
|
|
|
const id = e.dataTransfer.getData('text/plain'); |
|
|
const draggedElement = document.getElementById(id); |
|
|
|
|
|
if (draggedElement) { |
|
|
const rect = this.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
|
|
|
|
|
|
const newNode = draggedElement.cloneNode(true); |
|
|
newNode.removeAttribute('id'); |
|
|
newNode.setAttribute('transform', `translate(${x}, ${y})`); |
|
|
this.appendChild(newNode); |
|
|
|
|
|
|
|
|
newNode.setAttribute('draggable', 'true'); |
|
|
newNode.addEventListener('dragstart', function(e) { |
|
|
e.dataTransfer.setData('text/plain', 'node'); |
|
|
this.classList.add('opacity-50'); |
|
|
}); |
|
|
|
|
|
newNode.addEventListener('dragend', function() { |
|
|
this.classList.remove('opacity-50'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('clusterSelect').addEventListener('change', function() { |
|
|
const clusterIndex = this.selectedIndex; |
|
|
const pipelineNodes = document.querySelectorAll('#dataCanvas .node'); |
|
|
|
|
|
|
|
|
pipelineNodes.forEach(node => { |
|
|
node.classList.remove('node-highlight'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (clusterIndex >= 0 && pipelineNodes.length > 3) { |
|
|
pipelineNodes[3].classList.add('node-highlight'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('runPipelineBtn').addEventListener('click', function() { |
|
|
const btn = this; |
|
|
const originalHTML = btn.innerHTML; |
|
|
|
|
|
|
|
|
document.getElementById('clusterLoading').classList.remove('hidden'); |
|
|
document.getElementById('pipelineLoading').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const originalText = this.innerHTML; |
|
|
this.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Processing...'; |
|
|
this.classList.add('opacity-75'); |
|
|
this.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
document.getElementById('clusterLoading').classList.add('hidden'); |
|
|
document.getElementById('pipelineLoading').classList.add('hidden'); |
|
|
|
|
|
|
|
|
this.innerHTML = originalText; |
|
|
this.classList.remove('opacity-75'); |
|
|
this.disabled = false; |
|
|
|
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'fixed bottom-4 right-4 px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg flex items-center transition-all transform translate-y-2 opacity-0'; |
|
|
notification.innerHTML = ` |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span>Pipeline executed successfully! Updated 1,248,753 records.</span> |
|
|
`; |
|
|
document.body.appendChild(notification); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('translate-y-2', 'opacity-0'); |
|
|
notification.classList.add('translate-y-0', 'opacity-100'); |
|
|
}, 10); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.add('translate-y-2', 'opacity-0'); |
|
|
setTimeout(() => notification.remove(), 300); |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
clusterChart.data.datasets.forEach(dataset => { |
|
|
dataset.data = Array.from({length: 50}, () => ({ |
|
|
x: Math.random() * 100, |
|
|
y: Math.random() * 100 |
|
|
})); |
|
|
}); |
|
|
clusterChart.update(); |
|
|
|
|
|
|
|
|
const clusteringNode = document.querySelectorAll('.node')[3]; |
|
|
clusteringNode.classList.add('node-highlight'); |
|
|
|
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('tbody tr').forEach(row => { |
|
|
row.addEventListener('mouseenter', function() { |
|
|
const badge = this.querySelector('span'); |
|
|
if (!badge) return; |
|
|
|
|
|
const colorMap = { |
|
|
'bg-indigo-100': 'bg-indigo-50 dark:bg-indigo-900/20', |
|
|
'bg-green-100': 'bg-green-50 dark:bg-green-900/20', |
|
|
'bg-yellow-100': 'bg-yellow-50 dark:bg-yellow-900/20', |
|
|
'bg-red-100': 'bg-red-50 dark:bg-red-900/20' |
|
|
}; |
|
|
|
|
|
for (const [original, hover] of Object.entries(colorMap)) { |
|
|
if (badge.classList.contains(original)) { |
|
|
this.classList.add(...hover.split(' ')); |
|
|
break; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
row.addEventListener('mouseleave', function() { |
|
|
this.className = this.className.replace(/(bg-\w+-50|dark:bg-\w+-900\/20)/g, '').trim(); |
|
|
}); |
|
|
}); |
|
|
</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=Breadwinner79/data-mining-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
