Spaces:

asd1asd1
/

deepchat-explorer

Running

App Files Files Community

asd1asd1 commited on Oct 23, 2025

Commit

418ecc4

verified ·

1 Parent(s): fd72e7e

es muy basica debe ser mas potente trata de igual y mejorar a grok

Browse files

Files changed (5) hide show

analytics.html +160 -246
components/navbar.js +63 -50
index.html +228 -253
script.js +214 -5
style.css +108 -131

analytics.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Analytics | DeepChat Explorer</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -15,183 +15,158 @@
     <div class="container mx-auto px-4 py-8">
         <!-- Header -->
-        <div class="text-center mb-12">
-            <h1 class="text-4xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent mb-4">
-                Research Analytics
-            </h1>
-            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
-                Advanced insights and performance metrics for your AI research activities
-            </p>
         </div>
-        <!-- Analytics Dashboard -->
-        <div class="max-w-7xl mx-auto space-y-8">
-            <!-- Stats Overview -->
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p class="text-gray-400 text-sm">Total Research</p>
-                            <p class="text-3xl font-bold text-white">1,247</p>
-                        </div>
-                        <div class="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
-                            <i data-feather="search" class="text-purple-400"></i>
-                        </div>
                     </div>
-                    <div class="mt-4">
-                        <span class="text-green-400 text-sm flex items-center">
-                            <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
-                            +12% this week
-                        </span>
                     </div>
                 </div>
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <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">8,932</p>
-                        </div>
-                        <div class="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
-                            <i data-feather="database" class="text-blue-400"></i>
-                        </div>
                     </div>
-                    <div class="mt-4">
-                        <span class="text-green-400 text-sm flex items-center">
-                            <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
-                            +23% this week
-                        </span>
                     </div>
                 </div>
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p class="text-gray-400 text-sm">AI Accuracy</p>
-                            <p class="text-3xl font-bold text-white">94.7%</p>
-                        </div>
-                        <div class="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
-                            <i data-feather="check-circle" class="text-green-400"></i>
-                        </div>
                     </div>
-                    <div class="mt-4">
-                        <span class="text-green-400 text-sm flex items-center">
-                            <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>
-                            +2.3% this week
-                        </span>
                     </div>
                 </div>
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p class="text-gray-400 text-sm">Response Time</p>
-                            <p class="text-3xl font-bold text-white">1.2s</p>
-                        </div>
-                        <div class="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center">
-                            <i data-feather="clock" class="text-yellow-400"></i>
-                        </div>
                     </div>
-                    <div class="mt-4">
-                        <span class="text-green-400 text-sm flex items-center">
-                            <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>
-                            -0.3s this week
-                        </span>
                     </div>
                 </div>
             </div>
-            <!-- Charts Grid -->
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                <!-- Research Activity Chart -->
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
-                        <i data-feather="activity" class="mr-2 text-purple-400"></i>
-                        Research Activity (Last 30 Days)
-                    </h3>
-                    <canvas id="activityChart" height="300"></canvas>
-                </div>
-                <!-- Topic Distribution -->
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
-                        <i data-feather="pie-chart" class="mr-2 text-blue-400"></i>
-                        Topic Distribution
-                    </h3>
-                    <canvas id="topicChart" height="300"></canvas>
-                </div>
-                <!-- Source Quality -->
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
-                        <i data-feather="bar-chart" class="mr-2 text-green-400"></i>
-                        Source Quality Analysis
-                    </h3>
-                    <canvas id="qualityChart" height="300"></canvas>
                 </div>
-                <!-- Performance Metrics -->
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
-                        <i data-feather="target" class="mr-2 text-yellow-400"></i>
-                        AI Performance Metrics
-                    </h3>
-                    <canvas id="performanceChart" height="300"></canvas>
                 </div>
-            </div>
-            <!-- Recent Research Table -->
-            <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl border border-gray-700 overflow-hidden">
-                <div class="px-6 py-4 border-b border-gray-700">
-                    <h3 class="text-lg font-semibold text-white flex items-center">
-                        <i data-feather="list" class="mr-2 text-purple-400"></i>
-                        Recent Research Sessions
-                    </h3>
-                </div>
-                <div class="overflow-x-auto">
-                    <table class="w-full">
-                        <thead>
-                            <tr class="bg-gray-700/50">
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Topic</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Sources</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Duration</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Accuracy</th>
-                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Date</th>
-                            </tr>
-                        </thead>
-                        <tbody class="divide-y divide-gray-700">
-                            <tr class="hover:bg-gray-700/30 transition-colors">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-sm font-medium text-white">Quantum Computing</div>
-                                    <div class="text-sm text-gray-400">Advanced algorithms</div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">47 sources</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.3 minutes</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">96.2%</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2 hours ago</td>
-                            </tr>
-                            <tr class="hover:bg-gray-700/30 transition-colors">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-sm font-medium text-white">AI in Healthcare</div>
-                                    <div class="text-sm text-gray-400">Diagnostic tools</div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">32 sources</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.8 minutes</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-400">94.7%</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">5 hours ago</td>
-                            </tr>
-                            <tr class="hover:bg-gray-700/30 transition-colors">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-sm font-medium text-white">Blockchain Security</div>
-                                    <div class="text-sm text-gray-400">Encryption methods</div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">28 sources</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">3.1 minutes</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-400">89.3%</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1 day ago</td>
-                            </tr>
-                        </tbody>
-                    </table>
                 </div>
             </div>
         </div>
@@ -207,17 +182,17 @@
         // Initialize Charts
         document.addEventListener('DOMContentLoaded', function() {
-            // Activity Chart
-            const activityCtx = document.getElementById('activityChart').getContext('2d');
-            new Chart(activityCtx, {
                 type: 'line',
                 data: {
-                    labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
                     datasets: [{
-                        label: 'Research Sessions',
-                        data: [45, 52, 38, 61, 55, 68, 72],
-                        borderColor: '#8b5cf6',
-                        backgroundColor: 'rgba(139, 92, 246, 0.1)',
                         tension: 0.4,
                         fill: true
                     }]
@@ -226,18 +201,27 @@
                     responsive: true,
                     plugins: {
                         legend: {
-                            labels: { color: '#e5e7eb' }
                         }
                     },
                     scales: {
                         y: {
-                            beginAtZero: true,
-                            grid: { color: 'rgba(255,255,255,0.1)' },
-                            ticks: { color: '#9ca3af' }
                         },
                         x: {
-                            grid: { color: 'rgba(255,255,255,0.1)' },
-                            ticks: { color: '#9ca3af' }
                         }
                     }
                 }
@@ -248,15 +232,15 @@
             new Chart(topicCtx, {
                 type: 'doughnut',
                 data: {
-                    labels: ['Technology', 'Science', 'Healthcare', 'Business', 'Other'],
                     datasets: [{
                         data: [35, 25, 20, 15, 5],
                         backgroundColor: [
-                            '#8b5cf6',
-                            '#3b82f6',
                             '#10b981',
                             '#f59e0b',
-                            '#6b7280'
                         ]
                     }]
                 },
@@ -264,81 +248,11 @@
                     responsive: true,
                     plugins: {
                         legend: {
-                            labels: { color: '#e5e7eb' }
-                        }
-                    }
-                }
-            });
-            // Quality Chart
-            const qualityCtx = document.getElementById('qualityChart').getContext('2d');
-            new Chart(qualityCtx, {
-                type: 'bar',
-                data: {
-                    labels: ['Academic', 'News', 'Research', 'Government', 'Industry'],
-                    datasets: [{
-                        label: 'Quality Score',
-                        data: [92, 85, 88, 90, 87],
-                        backgroundColor: '#10b981'
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            labels: { color: '#e5e7eb' }
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            max: 100,
-                            grid: { color: 'rgba(255,255,255,0.1)' },
-                            ticks: { color: '#9ca3af' }
-                        },
-                        x: {
-                            grid: { color: 'rgba(255,255,255,0.1)' },
-                            ticks: { color: '#9ca3af' }
-                        }
-                    }
-                }
-            });
-            // Performance Chart
-            const performanceCtx = document.getElementById('performanceChart').getContext('2d');
-            new Chart(performanceCtx, {
-                type: 'radar',
-                data: {
-                    labels: ['Accuracy', 'Speed', 'Depth', 'Relevance', 'Completeness'],
-                    datasets: [{
-                        label: 'Current Week',
-                        data: [94, 88, 92, 90, 86],
-                        fill: true,
-                        backgroundColor: 'rgba(139, 92, 246, 0.2)',
-                        borderColor: '#8b5cf6',
-                        pointBackgroundColor: '#8b5cf6'
-                    }, {
-                        label: 'Previous Week',
-                        data: [91, 85, 89, 87, 82],
-                        fill: true,
-                        backgroundColor: 'rgba(59, 130, 246, 0.2)',
-                        borderColor: '#3b82f6',
-                        pointBackgroundColor: '#3b82f6'
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            labels: { color: '#e5e7eb' }
-                        }
-                    },
-                    scales: {
-                        r: {
-                            angleLines: { color: 'rgba(255,255,255,0.1)' },
-                            grid: { color: 'rgba(255,255,255,0.1)' },
-                            pointLabels: { color: '#9ca3af' },
-                            ticks: { color: '#9ca3af', backdropColor: 'transparent' }
                         }
                     }
                 }

 <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>
     <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>
         // 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
                     }]
                     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'
+                            }
                         }
                     }
                 }
             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'
                         ]
                     }]
                 },
                     responsive: true,
                     plugins: {
                         legend: {
+                            position: 'bottom',
+                            labels: {
+                                color: '#e5e7eb',
+                                padding: 20
+                            }
                         }
                     }
                 }

components/navbar.js CHANGED Viewed

@@ -10,9 +10,8 @@ class CustomNavbar extends HTMLElement {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-          backdrop-filter: blur(10px);
         }
         .logo {
           color: white;
@@ -21,9 +20,10 @@ class CustomNavbar extends HTMLElement {
           display: flex;
           align-items: center;
           gap: 0.75rem;
-          background: linear-gradient(45deg, #f0abfc, #a5b4fc);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         }
         .nav-content {
           display: flex;
@@ -40,54 +40,52 @@ class CustomNavbar extends HTMLElement {
           padding: 0;
         }
         a {
-          color: #e0e7ff;
           text-decoration: none;
           transition: all 0.3s ease;
           font-weight: 500;
-          padding: 0.75rem 1.5rem;
-          border-radius: 0.75rem;
           position: relative;
-          overflow: hidden;
         }
-        a::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: -100%;
-          width: 100%;
-          height: 100%;
-          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-          transition: left 0.5s;
         }
-        a:hover::before {
-          left: 100%;
         }
-        a:hover {
-          background: rgba(255, 255, 255, 0.1);
           color: white;
-          transform: translateY(-2px);
-          box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
         }
-        .status-indicator {
           display: flex;
           align-items: center;
-          gap: 0.5rem;
-          background: rgba(34, 197, 94, 0.2);
-          padding: 0.5rem 1rem;
-          border-radius: 2rem;
-          border: 1px solid rgba(34, 197, 94, 0.3);
         }
-        .status-dot {
-          width: 8px;
-          height: 8px;
-          background: #22c55e;
-          border-radius: 50%;
-          animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-          0% { opacity: 1; }
-          50% { opacity: 0.5; }
-          100% { opacity: 1; }
         }
         @media (max-width: 768px) {
           nav {
@@ -101,31 +99,46 @@ class CustomNavbar extends HTMLElement {
             flex-wrap: wrap;
             justify-content: center;
           }
-          a {
-            padding: 0.5rem 1rem;
-            font-size: 0.9rem;
           }
         }
       </style>
       <nav>
         <div class="nav-content">
           <div class="logo">
-            <i data-feather="brain"></i>
-            <span>DeepChat Explorer</span>
           </div>
           <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/research.html">Research Hub</a></li>
-            <li><a href="/analytics.html">Analytics</a></li>
-            <li><a href="/settings.html">Settings</a></li>
           </ul>
-          <div class="status-indicator">
-            <div class="status-dot"></div>
-            <span class="text-green-300 text-sm font-medium">AI Online</span>
           </div>
         </div>
       </nav>
     `;
   }
 }
 customElements.define('custom-navbar', CustomNavbar);

           display: flex;
           justify-content: space-between;
           align-items: center;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         .logo {
           color: white;
           display: flex;
           align-items: center;
           gap: 0.75rem;
+          background: linear-gradient(135deg, #60a5fa 0%, #c084fc 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
+          background-clip: text;
         }
         .nav-content {
           display: flex;
           padding: 0;
         }
         a {
+          color: #c7d2fe;
           text-decoration: none;
           transition: all 0.3s ease;
           font-weight: 500;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
           position: relative;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
         }
+        a:hover {
+          color: white;
+          background: rgba(99, 102, 241, 0.2);
+          transform: translateY(-1px);
         }
+        a.active {
+          color: white;
+          background: rgba(99, 102, 241, 0.3);
         }
+        .badge {
+          background: linear-gradient(135deg, #10b981, #3b82f6);
           color: white;
+          padding: 0.25rem 0.5rem;
+          border-radius: 1rem;
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin-left: 0.5rem;
         }
+        .nav-actions {
           display: flex;
           align-items: center;
+          gap: 1rem;
         }
+        .upgrade-btn {
+          background: linear-gradient(135deg, #f59e0b, #d946ef);
+          color: white;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          text-decoration: none;
+          transition: all 0.3s ease;
         }
+        .upgrade-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(217, 70, 239, 0.4);
         }
         @media (max-width: 768px) {
           nav {
             flex-wrap: wrap;
             justify-content: center;
           }
+          .nav-actions {
+            justify-content: center;
           }
         }
       </style>
       <nav>
         <div class="nav-content">
           <div class="logo">
+            <i data-feather="zap"></i>
+            <span>DeepChat Pro</span>
           </div>
           <ul>
+            <li><a href="/" class="active"><i data-feather="home"></i>Home</a></li>
+            <li><a href="/research.html"><i data-feather="search"></i>Research <span class="badge">AI</span></a></li>
+            <li><a href="/analytics.html"><i data-feather="bar-chart-2"></i>Analytics</a></li>
+            <li><a href="/settings.html"><i data-feather="settings"></i>Settings</a></li>
           </ul>
+          <div class="nav-actions">
+            <a href="#" class="upgrade-btn">
+              <i data-feather="star"></i>
+              Upgrade to Elite
+            </a>
           </div>
         </div>
       </nav>
     `;
+    // Update active link based on current page
+    setTimeout(() => {
+      const currentPath = window.location.pathname;
+      const links = this.shadowRoot.querySelectorAll('a');
+      links.forEach(link => {
+        if (link.getAttribute('href') === currentPath ||
+            (currentPath === '/' && link.getAttribute('href') === '/')) {
+          link.classList.add('active');
+        } else {
+          link.classList.remove('active');
+        }
+      });
+    }, 100);
   }
 }
 customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DeepChat Explorer - AI Research Assistant</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -14,157 +14,162 @@
     <custom-navbar></custom-navbar>
     <div class="container mx-auto px-4 py-8">
-        <!-- Hero Section -->
-        <div class="text-center mb-12">
-            <h1 class="text-5xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent mb-4">
-                DeepChat Explorer
             </h1>
-            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
-                Advanced AI research assistant with real-time web search, multi-source analysis, and intelligent insights
             </p>
         </div>
         <!-- Main Chat Interface -->
-        <div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-6">
-            <!-- Sidebar - Research Tools -->
-            <div class="lg:col-span-1 space-y-6">
-                <!-- Quick Actions -->
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
-                        <i data-feather="zap" class="mr-2 text-yellow-400"></i>
-                        Quick Actions
-                    </h3>
-                    <div class="space-y-3">
-                        <button class="w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white px-4 py-3 rounded-lg hover:from-purple-700 hover:to-blue-700 transition-all duration-200 flex items-center justify-center">
-                            <i data-feather="search" class="mr-2"></i>
-                            Web Search
-                        </button>
-                        <button class="w-full bg-gradient-to-r from-green-600 to-teal-600 text-white px-4 py-3 rounded-lg hover:from-green-700 hover:to-teal-700 transition-all duration-200 flex items-center justify-center">
-                            <i data-feather="file-text" class="mr-2"></i>
-                            Analyze Document
-                        </button>
-                        <button class="w-full bg-gradient-to-r from-red-600 to-pink-600 text-white px-4 py-3 rounded-lg hover:from-red-700 hover:to-pink-700 transition-all duration-200 flex items-center justify-center">
-                            <i data-feather="trending-up" class="mr-2"></i>
-                            Real-time Data
-                        </button>
                     </div>
                 </div>
-                <!-- Research History -->
-                <div class="bg-gray-800/50 backdrop-blur-lg rounded-xl p-6 border border-gray-700">
-                    <h3 class="text-lg font-semibold text-white mb-4 flex items-center">
-                        <i data-feather="clock" class="mr-2 text-blue-400"></i>
-                        Recent Research
-                    </h3>
-                    <div class="space-y-3">
-                        <div class="bg-gray-700/50 p-3 rounded-lg cursor-pointer hover:bg-gray-600/50 transition-colors">
-                            <p class="text-white font-medium text-sm">Quantum Computing Breakthroughs</p>
-                            <p class="text-gray-400 text-xs">2 hours ago</p>
                         </div>
-                        <div class="bg-gray-700/50 p-3 rounded-lg cursor-pointer hover:bg-gray-600/50 transition-colors">
-                            <p class="text-white font-medium text-sm">AI in Healthcare 2024</p>
-                            <p class="text-gray-400 text-xs">1 day ago</p>
                         </div>
-                        <div class="bg-gray-700/50 p-3 rounded-lg cursor-pointer hover:bg-gray-600/50 transition-colors">
-                            <p class="text-white font-medium text-sm">Blockchain Security Analysis</p>
-                            <p class="text-gray-400 text-xs">3 days ago</p>
                         </div>
                     </div>
                 </div>
             </div>
-            <!-- Main Chat Area -->
-            <div class="lg:col-span-3">
-                <div class="bg-gray-800/30 backdrop-blur-lg rounded-xl shadow-2xl border border-gray-700 overflow-hidden">
-                    <!-- Chat Header -->
-                    <div class="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 px-6 py-4 flex items-center justify-between">
-                        <div class="flex items-center">
-                            <i data-feather="brain" class="text-white mr-3 w-6 h-6"></i>
-                            <h2 class="text-xl font-bold text-white">AI Research Assistant</h2>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm font-medium flex items-center">
-                                <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
-                                Online
-                            </span>
-                        </div>
                     </div>
-                    <!-- Chat Container -->
-                    <div class="h-96 overflow-y-auto p-6 bg-gradient-to-b from-gray-900/50 to-gray-800/30" id="chat-container">
-                        <!-- Welcome Message -->
-                        <div class="text-center py-8">
-                            <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
-                                <i data-feather="compass" class="text-white w-8 h-8"></i>
-                            </div>
-                            <h3 class="text-2xl font-bold text-white mb-2">Welcome to DeepChat Explorer</h3>
-                            <p class="text-gray-300 max-w-md mx-auto">
-                                I can help you research any topic with real-time web search, multi-source analysis, and intelligent insights.
-                            </p>
-                            <div class="mt-6 grid grid-cols-2 gap-3 max-w-sm mx-auto">
-                                <button class="bg-gray-700/50 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600/50 transition-colors">
-                                    Recent AI News
-                                </button>
-                                <button class="bg-gray-700/50 text-white px-4 py-2 rounded-lg text-sm hover:bg-gray-600/50 transition-colors">
-                                    Tech Trends
-                                </button>
-                            </div>
                         </div>
                     </div>
-                    <!-- Enhanced Input Area -->
-                    <div class="border-t border-gray-700 p-6 bg-gray-900/50">
-                        <form id="chat-form" class="space-y-4">
-                            <!-- Mode Selection -->
-                            <div class="flex space-x-4">
-                                <label class="flex items-center">
-                                    <input type="radio" name="mode" value="standard" checked class="mr-2 text-purple-600">
-                                    <span class="text-gray-300">Standard</span>
-                                </label>
-                                <label class="flex items-center">
-                                    <input type="radio" name="mode" value="research" class="mr-2 text-purple-600">
-                                    <span class="text-gray-300">Deep Research</span>
-                                </label>
-                                <label class="flex items-center">
-                                    <input type="radio" name="mode" value="creative" class="mr-2 text-purple-600">
-                                    <span class="text-gray-300">Creative</span>
-                                </label>
-                            </div>
-                            <!-- Input Group -->
-                            <div class="flex gap-3">
-                                <div class="flex-1 relative">
-                                    <input
-                                        type="text"
-                                        id="message-input"
-                                        placeholder="Ask me anything... (Try 'Research quantum computing advancements in 2024')"
-                                        class="w-full px-6 py-4 bg-gray-800 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-lg"
-                                        autocomplete="off"
-                                    >
-                                    <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex space-x-2">
-                                        <button type="button" class="text-gray-400 hover:text-white">
-                                            <i data-feather="mic" class="w-5 h-5"></i>
-                                        </button>
-                                        <button type="button" class="text-gray-400 hover:text-white">
-                                            <i data-feather="paperclip" class="w-5 h-5"></i>
-                                        </button>
-                                    </div>
-                                </div>
-                                <button
-                                    type="submit"
-                                    class="px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-xl hover:from-purple-700 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-200 flex items-center justify-center"
-                                >
-                                    <i data-feather="send" class="w-5 h-5 mr-2"></i>
-                                    Send
-                                </button>
-                            </div>
-                        </form>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
@@ -178,7 +183,6 @@
             e.preventDefault();
             const input = document.getElementById('message-input');
             const message = input.value.trim();
-            const mode = document.querySelector('input[name="mode"]:checked').value;
             if (message) {
                 addMessage(message, 'user');
@@ -187,114 +191,55 @@
                 // Show typing indicator
                 showTypingIndicator();
-                // Simulate AI response with enhanced capabilities
                 setTimeout(() => {
                     hideTypingIndicator();
-                    // Enhanced responses based on mode
-                    let response;
-                    switch(mode) {
-                        case 'research':
-                            response = generateResearchResponse(message);
-                            break;
-                        case 'creative':
-                            response = generateCreativeResponse(message);
-                            break;
-                        default:
-                            response = generateStandardResponse(message);
-                    }
-                    response.forEach((msg, index) => {
                         setTimeout(() => {
-                            addMessage(msg.text, 'ai', msg.type);
                         }, index * 800);
                     });
                 }, 2000);
             }
         });
-        function generateResearchResponse(query) {
-            return [
-                {
-                    text: `🔍 **Researching:** "${query}"`,
-                    type: 'info'
-                },
-                {
-                    text: `📊 **Search Strategy:** Analyzing 15+ sources including academic papers, news articles, and real-time data`,
-                    type: 'info'
-                },
-                {
-                    text: `🌐 **Web Search Results:** Found 23 relevant sources from Google Scholar, arXiv, and industry reports`,
-                    type: 'info'
-                },
-                {
-                    text: `🤖 **AI Analysis:** Based on my analysis of current trends and data, here are the key insights about ${query}:`,
-                    type: 'message'
-                },
-                {
-                    text: `💡 **Key Findings:**\n• Major breakthrough in quantum computing announced last week\n• 3X improvement in qubit stability\n• Commercial applications expected within 2 years\n• Investment increased by 45% in Q1 2024`,
-                    type: 'message'
-                },
-                {
-                    text: `📈 **Trend Analysis:** The field is growing exponentially with significant government and private investment. Would you like me to dive deeper into any specific aspect?`,
-                    type: 'message'
-                }
-            ];
-        }
-        function generateCreativeResponse(query) {
-            return [
-                {
-                    text: `🎨 **Creative Mode Activated:** Let me explore "${query}" from unique perspectives`,
-                    type: 'info'
-                },
-                {
-                    text: `✨ **Innovative Insights:** What if we combine ${query} with emerging technologies like neural interfaces?`,
-                    type: 'message'
-                },
-                {
-                    text: `🚀 **Future Projection:** Based on current trajectory, ${query} could revolutionize how we approach problem-solving by 2030`,
-                    type: 'message'
-                },
-                {
-                    text: `💭 **Thought Experiment:** Imagine a world where ${query} is integrated with AI assistants - the possibilities are endless!`,
-                    type: 'message'
-                }
-            ];
-        }
-        function generateStandardResponse(query) {
-            return [
-                {
-                    text: `🤖 **Analyzing:** "${query}"`,
-                    type: 'info'
-                },
-                {
-                    text: `📋 **Summary:** Based on current information, ${query} represents a significant area of development with applications across multiple industries.`,
-                    type: 'message'
-                },
-                {
-                    text: `🔬 **Technical Overview:** The technology involves advanced algorithms and data processing techniques that enable new capabilities.`,
-                    type: 'message'
-                },
-                {
-                    text: `💼 **Practical Applications:** From healthcare to finance, the implications are substantial and worth exploring further.`,
-                    type: 'message'
-                }
-            ];
-        }
         function showTypingIndicator() {
             const container = document.getElementById('chat-container');
             const typingDiv = document.createElement('div');
-            typingDiv.className = 'mb-4 flex justify-start';
             typingDiv.id = 'typing-indicator';
             typingDiv.innerHTML = `
-                <div class="bg-gray-700 rounded-lg py-3 px-4 max-w-xs">
-                    <div class="flex space-x-1">
-                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
-                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                     </div>
                 </div>
             `;
@@ -309,48 +254,78 @@
             }
         }
-        function addMessage(text, sender, type = 'message') {
             const container = document.getElementById('chat-container');
             const messageDiv = document.createElement('div');
             messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
-            let bgColor, textColor;
             if (sender === 'user') {
-                bgColor = 'bg-gradient-to-r from-purple-600 to-blue-600';
-                textColor = 'text-white';
             } else {
-                switch(type) {
-                    case 'info':
-                        bgColor = 'bg-yellow-500/20 border border-yellow-500/30';
-                        textColor = 'text-yellow-300';
-                        break;
-                    case 'warning':
-                        bgColor = 'bg-red-500/20 border border-red-500/30';
-                        textColor = 'text-red-300';
-                        break;
-                    default:
-                        bgColor = 'bg-gray-700/50 border border-gray-600';
-                        textColor = 'text-white';
-                }
             }
-            messageDiv.innerHTML = `
-                <div class="${bgColor} ${textColor} rounded-xl py-3 px-4 max-w-2xl backdrop-blur-sm">
-                    <div class="whitespace-pre-wrap">${text}</div>
-                </div>
-            `;
             container.appendChild(messageDiv);
             container.scrollTop = container.scrollHeight;
         }
-        // Add quick action button functionality
-        document.querySelectorAll('.bg-gradient-to-r').forEach(button => {
             button.addEventListener('click', function() {
-                const action = this.querySelector('span').textContent;
-                const input = document.getElementById('message-input');
-                input.value = action;
-                input.focus();
             });
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepChat Pro - Advanced AI Research Assistant</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <custom-navbar></custom-navbar>
     <div class="container mx-auto px-4 py-8">
+        <!-- Enhanced Header -->
+        <div class="text-center mb-8">
+            <div class="inline-flex items-center bg-gradient-to-r from-purple-600 to-blue-600 px-6 py-3 rounded-full mb-4">
+                <i data-feather="zap" class="text-yellow-300 mr-2"></i>
+                <span class="text-white font-semibold">PRO VERSION</span>
+            </div>
+            <h1 class="text-4xl md:text-6xl font-bold text-white mb-4 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
+                DeepChat Pro
             </h1>
+            <p class="text-gray-300 text-lg max-w-2xl mx-auto">
+                Advanced AI research assistant with real-time web search, multi-source analysis, and intelligent reasoning
             </p>
         </div>
         <!-- Main Chat Interface -->
+        <div class="max-w-6xl mx-auto bg-gray-800/50 backdrop-blur-lg rounded-2xl shadow-2xl border border-gray-700 overflow-hidden">
+            <!-- Enhanced Chat Header -->
+            <div class="bg-gradient-to-r from-purple-600 to-blue-600 px-6 py-4 flex items-center justify-between">
+                <div class="flex items-center">
+                    <i data-feather="brain" class="text-white mr-3 text-xl"></i>
+                    <div>
+                        <h1 class="text-xl font-bold text-white">DeepChat Pro</h1>
+                        <div class="flex items-center text-blue-100 text-sm">
+                            <div class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></div>
+                            <span>Online - Ready for complex research</span>
+                        </div>
                     </div>
                 </div>
+                <div class="flex items-center space-x-3">
+                    <button class="p-2 text-white/80 hover:text-white transition-colors" title="Web Search">
+                        <i data-feather="search"></i>
+                    </button>
+                    <button class="p-2 text-white/80 hover:text-white transition-colors" title="Attach Files">
+                        <i data-feather="paperclip"></i>
+                    </button>
+                    <button class="p-2 text-white/80 hover:text-white transition-colors" title="Settings">
+                        <i data-feather="settings"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Advanced Chat Container -->
+            <div class="h-96 overflow-y-auto p-6 bg-gradient-to-b from-gray-900/50 to-gray-800/30" id="chat-container">
+                <!-- Welcome Message with Capabilities -->
+                <div class="text-center py-8">
+                    <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full mb-4">
+                        <i data-feather="zap" class="text-white text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-white mb-2">Welcome to DeepChat Pro</h3>
+                    <p class="text-gray-300 mb-6">I can help you with advanced research, data analysis, and complex problem-solving</p>
+                    <!-- Capabilities Grid -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
+                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
+                            <i data-feather="search" class="text-blue-400 mb-2"></i>
+                            <h4 class="text-white font-medium mb-1">Real-time Search</h4>
+                            <p class="text-gray-400 text-sm">Access latest information from multiple sources</p>
                         </div>
+                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
+                            <i data-feather="bar-chart-2" class="text-green-400 mb-2"></i>
+                            <h4 class="text-white font-medium mb-1">Data Analysis</h4>
+                            <p class="text-gray-400 text-sm">Process and analyze complex datasets</p>
                         </div>
+                        <div class="bg-gray-700/50 p-4 rounded-lg border border-gray-600">
+                            <i data-feather="code" class="text-purple-400 mb-2"></i>
+                            <h4 class="text-white font-medium mb-1">Code Generation</h4>
+                            <p class="text-gray-400 text-sm">Create and debug programming solutions</p>
                         </div>
                     </div>
                 </div>
             </div>
+            <!-- Advanced Input Area -->
+            <div class="border-t border-gray-700 p-6 bg-gray-900/30">
+                <div class="flex items-center mb-3">
+                    <div class="flex space-x-2">
+                        <button class="p-2 text-gray-400 hover:text-white transition-colors rounded-lg hover:bg-gray-700/50" title="Web Search">
+                            <i data-feather="globe" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 text-gray-400 hover:text-white transition-colors rounded-lg hover:bg-gray-700/50" title="Upload Files">
+                            <i data-feather="upload" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-2 text-gray-400 hover:text-white transition-colors rounded-lg hover:bg-gray-700/50" title="Code Mode">
+                            <i data-feather="terminal" class="w-4 h-4"></i>
+                        </button>
                     </div>
+                </div>
+                <form id="chat-form" class="flex gap-3">
+                    <div class="flex-1 relative">
+                        <input
+                            type="text"
+                            id="message-input"
+                            placeholder="Ask me anything... I can search the web, analyze data, write code, or help with research"
+                            class="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-white placeholder-gray-400"
+                            autocomplete="off"
+                        >
+                        <div class="absolute right-3 top-3 text-gray-400">
+                            <i data-feather="mic" class="w-4 h-4 cursor-pointer hover:text-white"></i>
                         </div>
                     </div>
+                    <button
+                        type="submit"
+                        class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-200 flex items-center"
+                    >
+                        <i data-feather="send" class="mr-2"></i>
+                        Send
+                    </button>
+                </form>
+                <!-- Quick Action Buttons -->
+                <div class="flex flex-wrap gap-2 mt-3">
+                    <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors">
+                        Research latest AI trends
+                    </button>
+                    <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors">
+                        Analyze market data
+                    </button>
+                    <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors">
+                        Write Python code
+                    </button>
+                    <button class="px-3 py-1 text-xs bg-gray-700/50 text-gray-300 rounded-full hover:bg-gray-600 transition-colors">
+                        Explain complex topic
+                    </button>
                 </div>
             </div>
         </div>
     </div>
+    <!-- Features Section -->
+    <div class="max-w-6xl mx-auto mt-12 px-4">
+        <h2 class="text-2xl font-bold text-white text-center mb-8">Advanced Capabilities</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg">
+                <i data-feather="database" class="text-blue-400 text-2xl mb-4"></i>
+                <h3 class="text-white font-semibold mb-2">Multi-source Research</h3>
+                <p class="text-gray-300 text-sm">Access and cross-reference information from academic papers, news, and databases</p>
+            </div>
+            <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg">
+                <i data-feather="trending-up" class="text-green-400 text-2xl mb-4"></i>
+                <h3 class="text-white font-semibold mb-2">Real-time Analysis</h3>
+                <p class="text-gray-300 text-sm">Process live data streams and provide up-to-the-minute insights</p>
+            </div>
+            <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg">
+                <i data-feather="code" class="text-purple-400 text-2xl mb-4"></i>
+                <h3 class="text-white font-semibold mb-2">Code Intelligence</h3>
+                <p class="text-gray-300 text-sm">Write, debug, and optimize code across multiple programming languages</p>
+            </div>
+            <div class="bg-gray-800/30 p-6 rounded-xl border border-gray-700 backdrop-blur-lg">
+                <i data-feather="file-text" class="text-yellow-400 text-2xl mb-4"></i>
+                <h3 class="text-white font-semibold mb-2">Document Processing</h3>
+                <p class="text-gray-300 text-sm">Analyze and summarize documents, PDFs, and complex reports</p>
+            </div>
+        </div>
+    </div>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
             e.preventDefault();
             const input = document.getElementById('message-input');
             const message = input.value.trim();
             if (message) {
                 addMessage(message, 'user');
                 // Show typing indicator
                 showTypingIndicator();
+                // Simulate advanced AI response with multiple capabilities
                 setTimeout(() => {
                     hideTypingIndicator();
+                    // Enhanced response simulation
+                    const responses = [
+                        {
+                            type: 'analysis',
+                            content: `I'm analyzing your query about "${message}" across multiple data sources...`,
+                            icon: 'search'
+                        },
+                        {
+                            type: 'insight',
+                            content: `Based on current research trends and real-time data, here are the key findings:`,
+                            icon: 'trending-up'
+                        },
+                        {
+                            type: 'sources',
+                            content: `I've referenced 12+ sources including academic papers, recent news articles, and industry reports.`,
+                            icon: 'database'
+                        },
+                        {
+                            type: 'recommendation',
+                            content: `Would you like me to dive deeper into any specific aspect or provide code examples?`,
+                            icon: 'code'
+                        }
+                    ];
+                    responses.forEach((response, index) => {
                         setTimeout(() => {
+                            addEnhancedMessage(response.content, 'ai', response.type, response.icon);
                         }, index * 800);
                     });
                 }, 2000);
             }
         });
         function showTypingIndicator() {
             const container = document.getElementById('chat-container');
             const typingDiv = document.createElement('div');
             typingDiv.id = 'typing-indicator';
+            typingDiv.className = 'flex justify-start mb-4';
             typingDiv.innerHTML = `
+                <div class="bg-gray-700 rounded-lg py-2 px-4 max-w-xs">
+                    <div class="flex items-center space-x-1">
+                        <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce"></div>
+                        <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
+                        <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                        <span class="text-gray-300 ml-2">DeepChat Pro is thinking...</span>
                     </div>
                 </div>
             `;
             }
         }
+        function addEnhancedMessage(text, sender, messageType = 'default', icon = 'message-circle') {
             const container = document.getElementById('chat-container');
             const messageDiv = document.createElement('div');
+            let typeClass = 'bg-gray-700 border-l-4';
+            let iconColor = 'text-blue-400';
+            switch(messageType) {
+                case 'analysis':
+                    typeClass += ' border-blue-500';
+                    iconColor = 'text-blue-400';
+                    break;
+                case 'insight':
+                    typeClass += ' border-green-500';
+                    iconColor = 'text-green-400';
+                    break;
+                case 'sources':
+                    typeClass += ' border-purple-500';
+                    iconColor = 'text-purple-400';
+                    break;
+                case 'recommendation':
+                    typeClass += ' border-yellow-500';
+                    iconColor = 'text-yellow-400';
+                    break;
+                default:
+                    typeClass += ' border-gray-500';
+            }
             messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
             if (sender === 'user') {
+                messageDiv.innerHTML = `
+                    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg py-3 px-4 max-w-xs md:max-w-md shadow-lg">
+                        <p class="text-white">${text}</p>
+                    </div>
+                `;
             } else {
+                messageDiv.innerHTML = `
+                    <div class="${typeClass} rounded-lg py-3 px-4 max-w-xs md:max-w-md shadow-lg">
+                        <div class="flex items-start mb-2">
+                            <i data-feather="${icon}" class="${iconColor} mr-2 mt-1"></i>
+                            <p class="text-white">${text}</p>
+                        </div>
+                        <div class="flex justify-between items-center mt-2 text-xs text-gray-400">
+                            <span>${new Date().toLocaleTimeString()}</span>
+                            <div class="flex space-x-2">
+                                <button class="hover:text-blue-400 transition-colors" title="Copy">
+                                    <i data-feather="copy" class="w-3 h-3"></i>
+                                </button>
+                                <button class="hover:text-green-400 transition-colors" title="Save">
+                                    <i data-feather="bookmark" class="w-3 h-3"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                `;
             }
             container.appendChild(messageDiv);
             container.scrollTop = container.scrollHeight;
+            feather.replace();
+        }
+        function addMessage(text, sender) {
+            addEnhancedMessage(text, sender);
         }
+        // Quick action buttons functionality
+        document.querySelectorAll('.quick-action').forEach(button => {
             button.addEventListener('click', function() {
+                document.getElementById('message-input').value = this.textContent;
+                document.getElementById('chat-form').dispatchEvent(new Event('submit'));
             });
         });
     </script>

script.js CHANGED Viewed

@@ -1,10 +1,219 @@
-// Shared JavaScript across all pages
-console.log('DeepChat Explorer loaded');
-// Initialize tooltips for icons
 document.addEventListener('DOMContentLoaded', function() {
     const icons = document.querySelectorAll('[data-feather]');
     icons.forEach(icon => {
-        icon.setAttribute('title', icon.getAttribute('data-feather'));
     });
-});

+// Enhanced JavaScript for DeepChat Pro
+console.log('DeepChat Pro - Advanced AI Assistant Loaded');
+// Initialize enhanced tooltips and interactions
 document.addEventListener('DOMContentLoaded', function() {
+    // Enhanced icon tooltips
     const icons = document.querySelectorAll('[data-feather]');
     icons.forEach(icon => {
+        const iconName = icon.getAttribute('data-feather');
+        icon.setAttribute('title', iconName.charAt(0).toUpperCase() + iconName.slice(1));
+        icon.setAttribute('aria-label', iconName);
+    });
+    // Initialize keyboard shortcuts
+    initializeKeyboardShortcuts();
+    // Initialize real-time capabilities indicator
+    initializeCapabilitiesIndicator();
+    // Initialize performance monitoring
+    initializePerformanceMonitor();
+});
+// Keyboard Shortcuts
+function initializeKeyboardShortcuts() {
+    document.addEventListener('keydown', function(e) {
+        // Ctrl + / for focus on input
+        if (e.ctrlKey && e.key === '/') {
+            e.preventDefault();
+            const input = document.getElementById('message-input');
+            if (input) input.focus();
+        }
+        // Escape to clear input
+        if (e.key === 'Escape') {
+            const input = document.getElementById('message-input');
+            if (input) input.value = '';
+        }
+        // Enter to send (with Ctrl for new line)
+        if (e.key === 'Enter' && !e.ctrlKey) {
+            const input = document.getElementById('message-input');
+            if (input && input === document.activeElement && input.value.trim()) {
+                document.getElementById('chat-form').dispatchEvent(new Event('submit'));
+            }
+        }
+    });
+}
+// Real-time Capabilities Indicator
+function initializeCapabilitiesIndicator() {
+    const capabilities = [
+        'Analyzing real-time data...',
+        'Searching academic databases...',
+        'Processing natural language...',
+        'Generating insights...',
+        'Cross-referencing sources...'
+    ];
+    let currentCapability = 0;
+    setInterval(() => {
+        const indicator = document.querySelector('.capability-indicator');
+        if (indicator) {
+            indicator.style.opacity = '0';
+            setTimeout(() => {
+                indicator.textContent = capabilities[currentCapability];
+                indicator.style.opacity = '1';
+                currentCapability = (currentCapability + 1) % capabilities.length;
+            }, 300);
+        }
+    }, 3000);
+}
+// Performance Monitoring
+function initializePerformanceMonitor() {
+    const startTime = performance.now();
+    window.addEventListener('load', () => {
+        const loadTime = performance.now() - startTime;
+        console.log(`DeepChat Pro loaded in ${loadTime.toFixed(2)}ms`);
+        // Send performance metrics (in a real app, this would go to analytics)
+        if (loadTime < 1000) {
+            console.log('🚀 Excellent performance!');
+        }
     });
+}
+// Enhanced Message Management
+class MessageManager {
+    constructor() {
+        this.messages = [];
+        this.maxMessages = 100; // Prevent memory issues
+    }
+    addMessage(content, sender, type = 'text') {
+        const message = {
+            id: Date.now(),
+            content,
+            sender,
+            type,
+            timestamp: new Date().toISOString(),
+            metadata: {}
+        };
+        this.messages.push(message);
+        // Keep only the last maxMessages
+        if (this.messages.length > this.maxMessages) {
+            this.messages = this.messages.slice(-this.maxMessages);
+        }
+        return message;
+    }
+    getConversationHistory() {
+        return this.messages.slice(-10); // Last 10 messages for context
+    }
+    clearMessages() {
+        this.messages = [];
+    }
+}
+// Initialize message manager
+const messageManager = new MessageManager();
+// Enhanced API Integration (simulated for now)
+class AIClient {
+    constructor() {
+        this.baseURL = 'https://api.deepchat.pro/v1';
+        this.isOnline = true;
+    }
+    async sendMessage(message, context = []) {
+        // Simulate API call with enhanced capabilities
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                const responses = this.generateEnhancedResponse(message, context);
+                resolve(responses);
+            }, 1500 + Math.random() * 1000); // Simulate network delay
+        });
+    }
+    generateEnhancedResponse(message, context) {
+        // Enhanced response generation simulation
+        const responseTypes = [
+            {
+                type: 'analysis',
+                content: `I've analyzed "${message}" across multiple dimensions...`,
+                confidence: 0.92
+            },
+            {
+                type: 'insight',
+                content: `Key insight: This topic shows strong correlation with recent developments in AI research.`,
+                confidence: 0.88
+            },
+            {
+                type: 'recommendation',
+                content: `Based on my analysis, I recommend exploring these 3 areas for deeper understanding.`,
+                confidence: 0.85
+            }
+        ];
+        return responseTypes;
+    }
+}
+// Initialize AI Client
+const aiClient = new AIClient();
+// Utility Functions
+const Utils = {
+    // Format timestamps
+    formatTime: (date) => {
+        return new Date(date).toLocaleTimeString('en-US', {
+            hour12: true,
+            hour: 'numeric',
+            minute: '2-digit'
+        });
+    },
+    // Truncate long text
+    truncate: (text, length = 100) => {
+        return text.length > length ? text.substring(0, length) + '...' : text;
+    },
+    // Copy to clipboard
+    copyToClipboard: async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            return true;
+        } catch (err) {
+            console.error('Failed to copy text: ', err);
+            return false;
+        }
+    },
+    // Download content
+    downloadContent: (content, filename) => {
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+};
+// Export for global access
+window.DeepChatPro = {
+    messageManager,
+    aiClient,
+    Utils,
+    version: '2.0.0'
+};

style.css CHANGED Viewed

@@ -1,5 +1,5 @@
-/* Enhanced Shared Styles */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 body {
@@ -7,217 +7,194 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
 }
-/* Enhanced Scrollbar */
 #chat-container::-webkit-scrollbar {
-    width: 12px;
 }
 #chat-container::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
-    margin: 4px;
 }
 #chat-container::-webkit-scrollbar-thumb {
-    background: linear-gradient(180deg, #8b5cf6, #6366f1);
     border-radius: 10px;
-    border: 2px solid rgba(255, 255, 255, 0.1);
 }
 #chat-container::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(180deg, #a78bfa, #818cf8);
 }
 /* Enhanced Animations */
 @keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px) scale(0.95);
     }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
     }
 }
 @keyframes slideInRight {
-    from {
-        opacity: 0;
-        transform: translateX(30px);
     }
-    to {
-        opacity: 1;
-        transform: translateX(0);
     }
 }
-@keyframes slideInLeft {
-    from {
-        opacity: 0;
-        transform: translateX(-30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
 }
 @keyframes glow {
-    0% {
-        box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
-    }
-    50% {
-        box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
-    }
-    100% {
-        box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
-    }
 }
-@keyframes float {
-    0% {
-        transform: translateY(0px);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
-    100% {
-        transform: translateY(0px);
-    }
-}
-/* Enhanced Message Animations */
 #chat-container div {
-    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .user-message {
-    animation: slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.ai-message {
-    animation: slideInLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-/* Enhanced UI Elements */
-.glass-effect {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
 }
-.gradient-border {
-    position: relative;
-    background: linear-gradient(45deg, #8b5cf6, #ec4899, #3b82f6);
-    padding: 2px;
-    border-radius: 12px;
-}
-.gradient-border::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 12px;
-    padding: 2px;
-    background: linear-gradient(45deg, #8b5cf6, #ec4899, #3b82f6);
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
 }
-/* Enhanced Button Styles */
-.btn-glow {
-    animation: glow 2s ease-in-out infinite;
-    transition: all 0.3s ease;
 }
-.btn-glow:hover {
-    animation: none;
-    transform: scale(1.05);
-    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
 }
-/* Floating Animation */
-.float-animation {
-    animation: float 3s ease-in-out infinite;
 }
-/* Text Selection */
-::selection {
-    background: rgba(139, 92, 246, 0.3);
-    color: white;
 }
-/* Focus States */
-input:focus, button:focus {
-    outline: none;
-    ring: 2px solid rgba(139, 92, 246, 0.5);
 }
-/* Loading Spinner */
-.spinner {
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    border-radius: 50%;
-    border-top: 2px solid #8b5cf6;
-    width: 20px;
     height: 20px;
-    animation: spin 1s linear infinite;
 }
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
 }
-/* Enhanced Typography */
-.text-gradient {
-    background: linear-gradient(45deg, #f0abfc, #a5b4fc, #67e8f9);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 200% 200%;
-    animation: gradientShift 3s ease infinite;
 }
-@keyframes gradientShift {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
 }
-/* Responsive Design Enhancements */
 @media (max-width: 768px) {
     .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }
-    .grid {
         gap: 1rem;
     }
 }
-/* Dark Mode Enhancements */
-.dark-mode {
-    color-scheme: dark;
 }
 /* Smooth Transitions */
 * {
-    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
 }
-/* Enhanced Backdrop Effects */
-.backdrop-blur-lg {
-    backdrop-filter: blur(20px);
 }
-.backdrop-blur-xl {
-    backdrop-filter: blur(40px);
 }

+/* Shared styles across all pages */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #3730a3 100%);
 }
+/* Enhanced Chat container scrollbar */
 #chat-container::-webkit-scrollbar {
+    width: 6px;
 }
 #chat-container::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
 }
 #chat-container::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
     border-radius: 10px;
 }
 #chat-container::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
 }
 /* Enhanced Animations */
 @keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
     }
+    to {
+        opacity: 1;
+        transform: translateY(0);
     }
 }
 @keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
     }
+    to {
+        opacity: 1;
+        transform: translateX(0);
     }
 }
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
 }
 @keyframes glow {
+    0% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
+    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
+    100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5); }
 }
 #chat-container div {
+    animation: fadeInUp 0.4s ease-out;
 }
 .user-message {
+    animation: slideInRight 0.4s ease-out;
 }
+/* Enhanced Typing Indicator */
+.typing-dots {
+    display: flex;
+    gap: 4px;
 }
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #6366f1;
+    animation: typing 1.4s infinite ease-in-out;
 }
+.typing-dot:nth-child(1) { animation-delay: -0.32s; }
+.typing-dot:nth-child(2) { animation-delay: -0.16s; }
+@keyframes typing {
+    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+    40% { transform: scale(1); opacity: 1; }
 }
+/* Glass Morphism Effect */
+.glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
+/* Gradient Text */
+.gradient-text {
+    background: linear-gradient(135deg, #60a5fa 0%, #c084fc 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
+/* Enhanced Button Styles */
+.btn-gradient {
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    transition: all 0.3s ease;
 }
+.btn-gradient:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
 }
+/* Loading Animation */
+.loading-wave {
+    display: flex;
+    gap: 4px;
 }
+.loading-bar {
+    width: 4px;
     height: 20px;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    animation: wave 1.2s infinite ease-in-out;
 }
+.loading-bar:nth-child(1) { animation-delay: 0s; }
+.loading-bar:nth-child(2) { animation-delay: 0.1s; }
+.loading-bar:nth-child(3) { animation-delay: 0.2s; }
+.loading-bar:nth-child(4) { animation-delay: 0.3s; }
+@keyframes wave {
+    0%, 40%, 100% { transform: scaleY(0.4); }
+    20% { transform: scaleY(1); }
 }
+/* Enhanced Card Hover Effects */
+.feature-card {
+    transition: all 0.3s ease;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
+.feature-card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(99, 102, 241, 0.5);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }
+/* Responsive Design Improvements */
 @media (max-width: 768px) {
     .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }
+    .chat-input {
+        flex-direction: column;
         gap: 1rem;
     }
+    .quick-actions {
+        justify-content: center;
+    }
 }
+/* Enhanced Focus States */
+input:focus, button:focus {
+    outline: none;
+    ring: 2px solid rgba(99, 102, 241, 0.5);
 }
 /* Smooth Transitions */
 * {
+    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
 }
+/* Enhanced Message Bubbles */
+.message-bubble {
+    position: relative;
+    overflow: hidden;
 }
+.message-bubble::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+    pointer-events: none;
 }