Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Analytics Dashboard | DeepChat Pro</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white">Analytics Dashboard</h1> | |
| <p class="text-gray-300">Monitor your research performance and AI interactions</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-gray-800/50 px-4 py-2 rounded-lg border border-gray-700"> | |
| <span class="text-gray-300 text-sm">Last 30 days</span> | |
| </div> | |
| <button class="px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all"> | |
| <i data-feather="download" class="w-4 h-4 mr-2 inline"></i> | |
| Export Report | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Total Queries</p> | |
| <p class="text-3xl font-bold text-white">1,247</p> | |
| </div> | |
| <div class="p-3 bg-blue-500/20 rounded-full"> | |
| <i data-feather="message-square" class="text-blue-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-400 text-sm">↑ 12% from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Research Hours</p> | |
| <p class="text-3xl font-bold text-white">89.5</p> | |
| </div> | |
| <div class="p-3 bg-green-500/20 rounded-full"> | |
| <i data-feather="clock" class="text-green-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-400 text-sm">↑ 8% from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Sources Analyzed</p> | |
| <p class="text-3xl font-bold text-white">3,842</p> | |
| </div> | |
| <div class="p-3 bg-purple-500/20 rounded-full"> | |
| <i data-feather="database" class="text-purple-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-400 text-sm">↑ 23% from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Accuracy Rate</p> | |
| <p class="text-3xl font-bold text-white">94.2%</p> | |
| </div> | |
| <div class="p-3 bg-yellow-500/20 rounded-full"> | |
| <i data-feather="target" class="text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-400 text-sm">↑ 2.3% from last month</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> | |
| <!-- Query Volume Chart --> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <h3 class="text-lg font-semibold text-white mb-4">Query Volume Trends</h3> | |
| <canvas id="queryChart" height="300"></canvas> | |
| </div> | |
| <!-- Topic Distribution --> | |
| <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg"> | |
| <h3 class="text-lg font-semibold text-white mb-4">Research Topics</h3> | |
| <canvas id="topicChart" height="300"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-gray-800/30 rounded-xl border border-gray-700 backdrop-blur-lg overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-700"> | |
| <h3 class="text-lg font-semibold text-white">Recent Research Activity</h3> | |
| </div> | |
| <div class="divide-y divide-gray-700"> | |
| <div class="p-6 hover:bg-gray-700/20 transition-colors"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="p-2 bg-blue-500/20 rounded-lg"> | |
| <i data-feather="search" class="text-blue-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-white font-medium">AI Ethics Research</p> | |
| <p class="text-gray-400 text-sm">Analyzed 12 sources on ethical AI development</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-white">45 min ago</p> | |
| <p class="text-green-400 text-sm">Completed</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 hover:bg-gray-700/20 transition-colors"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="p-2 bg-green-500/20 rounded-lg"> | |
| <i data-feather="bar-chart-2" class="text-green-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-white font-medium">Market Analysis</p> | |
| <p class="text-gray-400 text-sm">Processed Q3 financial data for tech sector</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-white">2 hours ago</p> | |
| <p class="text-yellow-400 text-sm">In Progress</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6 hover:bg-gray-700/20 transition-colors"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="p-2 bg-purple-500/20 rounded-lg"> | |
| <i data-feather="code" class="text-purple-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-white font-medium">Code Optimization</p> | |
| <p class="text-gray-400 text-sm">Improved algorithm efficiency by 40%</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-white">5 hours ago</p> | |
| <p class="text-green-400 text-sm">Completed</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Query Volume Chart | |
| const queryCtx = document.getElementById('queryChart').getContext('2d'); | |
| new Chart(queryCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'], | |
| datasets: [{ | |
| label: 'Queries', | |
| data: [45, 52, 48, 67], | |
| borderColor: '#6366f1', | |
| backgroundColor: 'rgba(99, 102, 241, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| labels: { | |
| color: '#e5e7eb' | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#9ca3af' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| color: 'rgba(255, 255, 255, 0.1)' | |
| }, | |
| ticks: { | |
| color: '#9ca3af' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Topic Distribution Chart | |
| const topicCtx = document.getElementById('topicChart').getContext('2d'); | |
| new Chart(topicCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['AI Research', 'Data Analysis', 'Code Development', 'Market Research', 'Academic Papers'], | |
| datasets: [{ | |
| data: [35, 25, 20, 15, 5], | |
| backgroundColor: [ | |
| '#6366f1', | |
| '#10b981', | |
| '#f59e0b', | |
| '#8b5cf6', | |
| '#ef4444' | |
| ] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| labels: { | |
| color: '#e5e7eb', | |
| padding: 20 | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |