mirror of
https://github.com/thecyberlearn/victor-dashboard.git
synced 2026-08-18 14:33:04 +00:00
957 lines
44 KiB
HTML
957 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI Email & Task Assistant</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.glass-effect {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.card-hover {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
@keyframes fadeUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.fade-up {
|
||
animation: fadeUp 0.4s ease-out;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
.pulse-animation {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
.agent-card {
|
||
background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
|
||
backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.priority-high { border-left: 4px solid #ef4444; }
|
||
.priority-medium { border-left: 4px solid #f59e0b; }
|
||
.priority-low { border-left: 4px solid #10b981; }
|
||
|
||
.status-completed { background: #dcfce7; color: #166534; }
|
||
.status-pending { background: #fef3c7; color: #92400e; }
|
||
.status-overdue { background: #fee2e2; color: #991b1b; }
|
||
|
||
/* Mobile responsiveness */
|
||
@media (max-width: 768px) {
|
||
.mobile-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.mobile-stats {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 0.75rem;
|
||
}
|
||
}
|
||
|
||
/* Custom scrollbar */
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background: #f1f5f9;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background: #cbd5e1;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background: #94a3b8;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-gray-50">
|
||
<!-- Mobile Header -->
|
||
<div class="lg:hidden bg-white shadow-sm border-b sticky top-0 z-50">
|
||
<div class="px-4 py-3 flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
|
||
<i class="fas fa-brain text-white text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-lg font-bold text-gray-800">AI Assistant</h1>
|
||
<p class="text-xs text-gray-500">Email & Task Manager</p>
|
||
</div>
|
||
</div>
|
||
<button id="mobileMenuBtn" class="p-2 rounded-lg hover:bg-gray-100">
|
||
<i class="fas fa-bars text-gray-600"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="min-h-screen flex">
|
||
<!-- Sidebar -->
|
||
<div id="sidebar" class="hidden lg:flex fixed lg:relative z-40 w-64 bg-white shadow-xl border-r border-gray-200 flex-col">
|
||
<div class="p-6 border-b border-gray-100">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
|
||
<i class="fas fa-brain text-white text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-xl font-bold gradient-text">AI Assistant</h1>
|
||
<p class="text-sm text-gray-500">Email & Task Manager</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="flex-1 p-4 space-y-2">
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
|
||
<i class="fas fa-tachometer-alt w-4"></i>
|
||
<span>Dashboard</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||
<i class="fas fa-envelope w-4"></i>
|
||
<span>Email Manager</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||
<i class="fas fa-calendar w-4"></i>
|
||
<span>Calendar</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||
<i class="fas fa-tasks w-4"></i>
|
||
<span>Tasks</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||
<i class="fas fa-chart-bar w-4"></i>
|
||
<span>Analytics</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||
<i class="fas fa-cog w-4"></i>
|
||
<span>Settings</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="p-4 border-t border-gray-100">
|
||
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-xl">
|
||
<h3 class="font-semibold text-gray-800 mb-2">AI Status</h3>
|
||
<p class="text-sm text-gray-600 mb-3">All agents active</p>
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-2 h-2 bg-green-500 rounded-full pulse-animation"></div>
|
||
<span class="text-xs text-green-600 font-medium">Online</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Sidebar Overlay -->
|
||
<div id="sidebarOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"></div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="flex-1 lg:ml-0">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-8">
|
||
|
||
<!-- Desktop Header -->
|
||
<div class="hidden lg:block mb-8">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-3xl font-bold text-gray-800 mb-2">AI Email & Task Dashboard</h1>
|
||
<p class="text-white">Manage your emails, calendar, and tasks with AI assistance</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-white">Last sync</p>
|
||
<p class="font-semibold text-gray-800" id="lastSync">Just now</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI Agent Command Center -->
|
||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 lg:p-6 mb-6 lg:mb-8">
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-robot text-white"></i>
|
||
</div>
|
||
<h2 class="text-xl font-bold text-gray-800">AI Command Center</h2>
|
||
</div>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-3">
|
||
<div class="flex-1">
|
||
<input
|
||
id="aiCommand"
|
||
type="text"
|
||
placeholder="Ask AI: 'Summarize today's emails', 'Schedule meeting with John', 'Show overdue tasks'"
|
||
class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-sm lg:text-base"
|
||
/>
|
||
</div>
|
||
<button
|
||
onclick="executeAICommand()"
|
||
class="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 min-w-[120px]"
|
||
id="aiBtn"
|
||
>
|
||
<i class="fas fa-brain"></i>
|
||
<span>Execute</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Quick Commands -->
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<span class="text-sm text-gray-500 mr-2">Quick commands:</span>
|
||
<button onclick="setQuickCommand('Summarize today\'s emails')" class="text-xs bg-indigo-100 hover:bg-indigo-200 text-indigo-700 px-3 py-1 rounded-full transition-colors">
|
||
Email Summary
|
||
</button>
|
||
<button onclick="setQuickCommand('Show today\'s schedule')" class="text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 px-3 py-1 rounded-full transition-colors">
|
||
Today's Schedule
|
||
</button>
|
||
<button onclick="setQuickCommand('List overdue tasks')" class="text-xs bg-orange-100 hover:bg-orange-200 text-orange-700 px-3 py-1 rounded-full transition-colors">
|
||
Overdue Tasks
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats Cards -->
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-6 lg:mb-8 mobile-stats">
|
||
<div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-500">Unread Emails</p>
|
||
<p class="text-xl lg:text-2xl font-bold text-gray-800" id="unreadEmails">23</p>
|
||
</div>
|
||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-envelope text-blue-600"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-500">Today's Meetings</p>
|
||
<p class="text-xl lg:text-2xl font-bold text-gray-800" id="todayMeetings">5</p>
|
||
</div>
|
||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-calendar text-green-600"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-500">Pending Tasks</p>
|
||
<p class="text-xl lg:text-2xl font-bold text-gray-800" id="pendingTasks">12</p>
|
||
</div>
|
||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-tasks text-orange-600"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-gray-200">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm text-gray-500">AI Actions</p>
|
||
<p class="text-xl lg:text-2xl font-bold text-gray-800" id="aiActions">47</p>
|
||
</div>
|
||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-robot text-purple-600"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI Agents Grid -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||
|
||
<!-- Email Summary Agent -->
|
||
<div class="agent-card rounded-2xl p-6 card-hover">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-envelope-open-text text-blue-600 text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">Email Agent</h3>
|
||
<p class="text-sm text-gray-200">Smart email management</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-3 h-3 bg-green-400 rounded-full pulse-animation"></div>
|
||
</div>
|
||
|
||
<div class="space-y-3 mb-4">
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
|
||
<div class="flex items-center justify-between text-sm">
|
||
<span class="text-gray-200">Priority Emails</span>
|
||
<span class="text-white font-semibold">5</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
|
||
<div class="flex items-center justify-between text-sm">
|
||
<span class="text-gray-200">Auto-Sorted</span>
|
||
<span class="text-white font-semibold">18</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button onclick="openEmailAgent()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition-colors">
|
||
Open Email Manager
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Calendar Agent -->
|
||
<div class="agent-card rounded-2xl p-6 card-hover">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-calendar-alt text-green-600 text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">Calendar Agent</h3>
|
||
<p class="text-sm text-gray-200">Smart scheduling</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-3 h-3 bg-green-400 rounded-full pulse-animation"></div>
|
||
</div>
|
||
|
||
<div class="space-y-3 mb-4">
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
|
||
<div class="flex items-center justify-between text-sm">
|
||
<span class="text-gray-200">Next Meeting</span>
|
||
<span class="text-white font-semibold">2:30 PM</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
|
||
<div class="flex items-center justify-between text-sm">
|
||
<span class="text-gray-200">Free Slots</span>
|
||
<span class="text-white font-semibold">3</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button onclick="openCalendarAgent()" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition-colors">
|
||
Open Calendar
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Task Agent -->
|
||
<div class="agent-card rounded-2xl p-6 card-hover">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-clipboard-list text-orange-600 text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-white">Task Agent</h3>
|
||
<p class="text-sm text-gray-200">Intelligent task management</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-3 h-3 bg-green-400 rounded-full pulse-animation"></div>
|
||
</div>
|
||
|
||
<div class="space-y-3 mb-4">
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
|
||
<div class="flex items-center justify-between text-sm">
|
||
<span class="text-gray-200">Due Today</span>
|
||
<span class="text-white font-semibold">4</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3">
|
||
<div class="flex items-center justify-between text-sm">
|
||
<span class="text-gray-200">Completed</span>
|
||
<span class="text-white font-semibold">8</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button onclick="openTaskAgent()" class="w-full bg-orange-600 hover:bg-orange-700 text-white py-2 px-4 rounded-lg font-medium transition-colors">
|
||
Open Task Manager
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recent Activity & Quick Actions -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
||
<!-- Recent AI Actions -->
|
||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="text-lg font-bold text-gray-800">Recent AI Actions</h3>
|
||
<button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button>
|
||
</div>
|
||
|
||
<div class="space-y-3 custom-scrollbar max-h-64 overflow-y-auto">
|
||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
|
||
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||
<i class="fas fa-envelope text-blue-600 text-sm"></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium text-gray-800">Summarized 15 emails</p>
|
||
<p class="text-xs text-gray-500">2 minutes ago</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
|
||
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||
<i class="fas fa-calendar text-green-600 text-sm"></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium text-gray-800">Scheduled team meeting</p>
|
||
<p class="text-xs text-gray-500">5 minutes ago</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
|
||
<div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||
<i class="fas fa-tasks text-orange-600 text-sm"></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium text-gray-800">Created 3 task reminders</p>
|
||
<p class="text-xs text-gray-500">10 minutes ago</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
|
||
<div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||
<i class="fas fa-robot text-purple-600 text-sm"></i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium text-gray-800">Auto-archived old emails</p>
|
||
<p class="text-xs text-gray-500">15 minutes ago</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Actions -->
|
||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
|
||
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<button onclick="quickAction('compose')" class="p-4 bg-blue-50 hover:bg-blue-100 rounded-xl border border-blue-200 transition-colors group">
|
||
<div class="w-8 h-8 bg-blue-100 group-hover:bg-blue-200 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<i class="fas fa-edit text-blue-600"></i>
|
||
</div>
|
||
<p class="text-sm font-medium text-blue-700">Compose Email</p>
|
||
</button>
|
||
|
||
<button onclick="quickAction('schedule')" class="p-4 bg-green-50 hover:bg-green-100 rounded-xl border border-green-200 transition-colors group">
|
||
<div class="w-8 h-8 bg-green-100 group-hover:bg-green-200 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<i class="fas fa-plus text-green-600"></i>
|
||
</div>
|
||
<p class="text-sm font-medium text-green-700">Schedule Meeting</p>
|
||
</button>
|
||
|
||
<button onclick="quickAction('task')" class="p-4 bg-orange-50 hover:bg-orange-100 rounded-xl border border-orange-200 transition-colors group">
|
||
<div class="w-8 h-8 bg-orange-100 group-hover:bg-orange-200 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<i class="fas fa-plus-circle text-orange-600"></i>
|
||
</div>
|
||
<p class="text-sm font-medium text-orange-700">Add Task</p>
|
||
</button>
|
||
|
||
<button onclick="quickAction('analyze')" class="p-4 bg-purple-50 hover:bg-purple-100 rounded-xl border border-purple-200 transition-colors group">
|
||
<div class="w-8 h-8 bg-purple-100 group-hover:bg-purple-200 rounded-lg flex items-center justify-center mx-auto mb-2">
|
||
<i class="fas fa-chart-bar text-purple-600"></i>
|
||
</div>
|
||
<p class="text-sm font-medium text-purple-700">Analyze Trends</p>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI Response Modal -->
|
||
<div id="aiModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
|
||
<div class="bg-white rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden">
|
||
<div class="p-6 border-b border-gray-200">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-brain text-indigo-600"></i>
|
||
</div>
|
||
<h3 class="text-lg font-bold text-gray-800">AI Response</h3>
|
||
</div>
|
||
<button onclick="closeAIModal()" class="text-gray-400 hover:text-gray-600">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 overflow-y-auto custom-scrollbar" id="aiResponse">
|
||
<!-- AI response content will be loaded here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Global variables
|
||
let aiActionCount = 47;
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
updateLastSync();
|
||
initializeMobileMenu();
|
||
initializeEventListeners();
|
||
});
|
||
|
||
// Mobile menu functionality
|
||
function initializeMobileMenu() {
|
||
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
||
const sidebar = document.getElementById('sidebar');
|
||
const overlay = document.getElementById('sidebarOverlay');
|
||
|
||
mobileMenuBtn.addEventListener('click', function() {
|
||
sidebar.classList.toggle('hidden');
|
||
overlay.classList.toggle('hidden');
|
||
});
|
||
|
||
overlay.addEventListener('click', function() {
|
||
sidebar.classList.add('hidden');
|
||
overlay.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
// Event listeners
|
||
function initializeEventListeners() {
|
||
document.getElementById('aiCommand').addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
executeAICommand();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Update last sync time
|
||
function updateLastSync() {
|
||
const now = new Date();
|
||
document.getElementById('lastSync').textContent = now.toLocaleTimeString();
|
||
}
|
||
|
||
// Set quick command
|
||
function setQuickCommand(command) {
|
||
document.getElementById('aiCommand').value = command;
|
||
executeAICommand();
|
||
}
|
||
|
||
// Execute AI command
|
||
async function executeAICommand() {
|
||
const command = document.getElementById('aiCommand').value.trim();
|
||
if (!command) {
|
||
alert('Please enter a command');
|
||
return;
|
||
}
|
||
|
||
const btn = document.getElementById('aiBtn');
|
||
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
|
||
btn.disabled = true;
|
||
|
||
try {
|
||
// Simulate AI processing
|
||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||
|
||
// Generate response based on command
|
||
const response = generateAIResponse(command);
|
||
showAIModal(response);
|
||
|
||
// Update stats
|
||
aiActionCount++;
|
||
document.getElementById('aiActions').textContent = aiActionCount;
|
||
updateLastSync();
|
||
|
||
} catch (error) {
|
||
alert('Error processing command: ' + error.message);
|
||
} finally {
|
||
btn.innerHTML = '<i class="fas fa-brain"></i> <span>Execute</span>';
|
||
btn.disabled = false;
|
||
document.getElementById('aiCommand').value = '';
|
||
}
|
||
}
|
||
|
||
// Generate AI response based on command
|
||
function generateAIResponse(command) {
|
||
const lowerCommand = command.toLowerCase();
|
||
|
||
if (lowerCommand.includes('email') && lowerCommand.includes('summary')) {
|
||
return `
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">📧 Email Summary</h4>
|
||
<div class="bg-blue-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-blue-800 mb-2">Priority Emails (5)</h5>
|
||
<ul class="space-y-2 text-sm text-blue-700">
|
||
<li>• Meeting request from Sarah Johnson - Project Kickoff</li>
|
||
<li>• Invoice approval needed - $2,500 vendor payment</li>
|
||
<li>• Client feedback on proposal - Urgent response required</li>
|
||
<li>• Security alert - Password reset request</li>
|
||
<li>• Team update from Marketing - Q4 campaign results</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-gray-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-gray-800 mb-2">Other Emails (18)</h5>
|
||
<p class="text-sm text-gray-600">Newsletters (8), Social notifications (5), Automated reports (3), Other (2)</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
if (lowerCommand.includes('schedule') || lowerCommand.includes('calendar')) {
|
||
return `
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">📅 Today's Schedule</h4>
|
||
<div class="space-y-3">
|
||
<div class="border-l-4 border-green-500 bg-green-50 p-4 rounded-r-lg">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h5 class="font-medium text-green-800">Team Standup</h5>
|
||
<p class="text-sm text-green-600">Daily sync with development team</p>
|
||
</div>
|
||
<span class="text-sm font-medium text-green-700">9:00 AM</span>
|
||
</div>
|
||
</div>
|
||
<div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded-r-lg">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h5 class="font-medium text-blue-800">Client Presentation</h5>
|
||
<p class="text-sm text-blue-600">Q4 strategy review with ABC Corp</p>
|
||
</div>
|
||
<span class="text-sm font-medium text-blue-700">2:30 PM</span>
|
||
</div>
|
||
</div>
|
||
<div class="border-l-4 border-orange-500 bg-orange-50 p-4 rounded-r-lg">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h5 class="font-medium text-orange-800">Budget Review</h5>
|
||
<p class="text-sm text-orange-600">Monthly financial planning session</p>
|
||
</div>
|
||
<span class="text-sm font-medium text-orange-700">4:00 PM</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
if (lowerCommand.includes('task') && lowerCommand.includes('overdue')) {
|
||
return `
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">⚠️ Overdue Tasks</h4>
|
||
<div class="space-y-3">
|
||
<div class="bg-red-50 border border-red-200 p-4 rounded-lg">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h5 class="font-medium text-red-800">Website Security Audit</h5>
|
||
<p class="text-sm text-red-600">Complete security assessment and report</p>
|
||
<span class="inline-block mt-2 px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">High Priority</span>
|
||
</div>
|
||
<span class="text-sm text-red-600">Due: 2 days ago</span>
|
||
</div>
|
||
</div>
|
||
<div class="bg-orange-50 border border-orange-200 p-4 rounded-lg">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h5 class="font-medium text-orange-800">Update Employee Handbook</h5>
|
||
<p class="text-sm text-orange-600">Revise policies and procedures section</p>
|
||
<span class="inline-block mt-2 px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded-full">Medium Priority</span>
|
||
</div>
|
||
<span class="text-sm text-orange-600">Due: 1 day ago</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-blue-50 p-4 rounded-lg">
|
||
<p class="text-sm text-blue-700">💡 <strong>AI Suggestion:</strong> I can automatically reschedule these tasks and send reminder notifications to relevant team members.</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Default response
|
||
return `
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">🤖 AI Assistant Response</h4>
|
||
<div class="bg-indigo-50 p-4 rounded-lg">
|
||
<p class="text-indigo-700">I understand you want to: "<em>${command}</em>"</p>
|
||
<p class="text-sm text-indigo-600 mt-2">I'm processing your request and will provide a detailed response shortly. Here are some things I can help you with:</p>
|
||
<ul class="mt-3 space-y-1 text-sm text-indigo-700">
|
||
<li>• Summarize and prioritize emails</li>
|
||
<li>• Schedule meetings and manage calendar</li>
|
||
<li>• Create, organize, and track tasks</li>
|
||
<li>• Analyze productivity patterns</li>
|
||
<li>• Send automated reminders</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Show AI modal
|
||
function showAIModal(content) {
|
||
document.getElementById('aiResponse').innerHTML = content;
|
||
document.getElementById('aiModal').classList.remove('hidden');
|
||
}
|
||
|
||
// Close AI modal
|
||
function closeAIModal() {
|
||
document.getElementById('aiModal').classList.add('hidden');
|
||
}
|
||
|
||
// Agent functions
|
||
function openEmailAgent() {
|
||
showAIModal(`
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">📧 Email Management Center</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="bg-blue-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-blue-800 mb-3">Quick Actions</h5>
|
||
<div class="space-y-2">
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📩 Compose New Email</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📋 Bulk Archive</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">🔍 Smart Search</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">⚙️ Auto-Reply Setup</button>
|
||
</div>
|
||
</div>
|
||
<div class="bg-green-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-green-800 mb-3">AI Features</h5>
|
||
<div class="space-y-2">
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">🧠 Smart Categorization</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">📊 Sentiment Analysis</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">⚡ Quick Responses</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">📅 Schedule from Email</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`);
|
||
}
|
||
|
||
function openCalendarAgent() {
|
||
showAIModal(`
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">📅 Calendar Management Center</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="bg-green-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-green-800 mb-3">Schedule Management</h5>
|
||
<div class="space-y-2">
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">➕ Schedule Meeting</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">🔄 Reschedule Events</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">🎯 Find Optimal Times</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-green-100 transition-colors">📋 Block Focus Time</button>
|
||
</div>
|
||
</div>
|
||
<div class="bg-purple-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-purple-800 mb-3">AI Insights</h5>
|
||
<div class="space-y-2">
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">📈 Meeting Analytics</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">⚡ Smart Suggestions</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">🔔 Intelligent Reminders</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-purple-100 transition-colors">🎨 Calendar Optimization</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`);
|
||
}
|
||
|
||
function openTaskAgent() {
|
||
showAIModal(`
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">✅ Task Management Center</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="bg-orange-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-orange-800 mb-3">Task Operations</h5>
|
||
<div class="space-y-2">
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">➕ Create Task</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">📋 Bulk Edit</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">🔄 Auto-Assign</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-orange-100 transition-colors">⏰ Set Reminders</button>
|
||
</div>
|
||
</div>
|
||
<div class="bg-blue-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-blue-800 mb-3">Smart Features</h5>
|
||
<div class="space-y-2">
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">🎯 Priority Scoring</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📊 Progress Tracking</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">🤖 Auto-Categorization</button>
|
||
<button class="w-full text-left p-2 bg-white rounded text-sm hover:bg-blue-100 transition-colors">📈 Productivity Insights</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`);
|
||
}
|
||
|
||
// Quick action functions
|
||
function quickAction(action) {
|
||
switch(action) {
|
||
case 'compose':
|
||
showAIModal(`
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">✍️ Compose Email</h4>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">To:</label>
|
||
<input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="recipient@example.com">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Subject:</label>
|
||
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Email subject">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Message:</label>
|
||
<textarea rows="6" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Type your message here..."></textarea>
|
||
</div>
|
||
<div class="flex gap-3">
|
||
<button class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition-colors">Send Email</button>
|
||
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Save Draft</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`);
|
||
break;
|
||
case 'schedule':
|
||
showAIModal(`
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">📅 Schedule Meeting</h4>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Meeting Title:</label>
|
||
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Team sync meeting">
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Date:</label>
|
||
<input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Time:</label>
|
||
<input type="time" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Attendees:</label>
|
||
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="john@company.com, sarah@company.com">
|
||
</div>
|
||
<button class="w-full bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition-colors">Schedule Meeting</button>
|
||
</div>
|
||
</div>
|
||
`);
|
||
break;
|
||
case 'task':
|
||
showAIModal(`
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">✅ Add New Task</h4>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Task Title:</label>
|
||
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500" placeholder="Complete project documentation">
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Description:</label>
|
||
<textarea rows="3" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500" placeholder="Task details and requirements..."></textarea>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Priority:</label>
|
||
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500">
|
||
<option value="low">Low</option>
|
||
<option value="medium" selected>Medium</option>
|
||
<option value="high">High</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">Due Date:</label>
|
||
<input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500">
|
||
</div>
|
||
</div>
|
||
<button class="w-full bg-orange-600 text-white py-2 px-4 rounded-lg hover:bg-orange-700 transition-colors">Create Task</button>
|
||
</div>
|
||
</div>
|
||
`);
|
||
break;
|
||
case 'analyze':
|
||
showAIModal(`
|
||
<div class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-gray-800">📊 Productivity Analysis</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div class="bg-blue-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-blue-800 mb-2">Email Trends</h5>
|
||
<ul class="text-sm text-blue-700 space-y-1">
|
||
<li>• Peak email hours: 9-11 AM</li>
|
||
<li>• Average response time: 2.3 hours</li>
|
||
<li>• Most productive day: Tuesday</li>
|
||
<li>• Email volume down 15% this week</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-green-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-green-800 mb-2">Meeting Insights</h5>
|
||
<ul class="text-sm text-green-700 space-y-1">
|
||
<li>• Total meeting time: 12.5 hours/week</li>
|
||
<li>• Average meeting length: 45 minutes</li>
|
||
<li>• Most meetings on: Wednesday</li>
|
||
<li>• Focus time blocks: 65% utilized</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-orange-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-orange-800 mb-2">Task Performance</h5>
|
||
<ul class="text-sm text-orange-700 space-y-1">
|
||
<li>• Completion rate: 87%</li>
|
||
<li>• Average task duration: 2.1 days</li>
|
||
<li>• Overdue tasks: 8%</li>
|
||
<li>• High priority completion: 95%</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-purple-50 p-4 rounded-lg">
|
||
<h5 class="font-medium text-purple-800 mb-2">AI Recommendations</h5>
|
||
<ul class="text-sm text-purple-700 space-y-1">
|
||
<li>• Schedule focus time in mornings</li>
|
||
<li>• Reduce meeting frequency by 20%</li>
|
||
<li>• Automate routine email responses</li>
|
||
<li>• Break large tasks into smaller ones</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`);
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Make functions global
|
||
window.executeAICommand = executeAICommand;
|
||
window.setQuickCommand = setQuickCommand;
|
||
window.openEmailAgent = openEmailAgent;
|
||
window.openCalendarAgent = openCalendarAgent;
|
||
window.openTaskAgent = openTaskAgent;
|
||
window.quickAction = quickAction;
|
||
window.closeAIModal = closeAIModal;
|
||
</script>
|
||
</body>
|
||
</html>
|