mirror of
https://github.com/thecyberlearn/victor-ai.git
synced 2026-08-18 13:53:03 +00:00
400 lines
20 KiB
HTML
400 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar Agent - AI Calendar Management</title>
|
|
<!-- External Dependencies -->
|
|
<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">
|
|
|
|
<!-- Your Custom Files -->
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navigation Header -->
|
|
<nav class="bg-white shadow-sm border-b sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center py-4">
|
|
<div class="flex items-center gap-3">
|
|
<button onclick="goHome()" class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center hover:bg-indigo-200 transition-colors">
|
|
<i class="fas fa-home text-indigo-600"></i>
|
|
</button>
|
|
<div class="w-10 h-10 bg-green-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
<i class="fas fa-calendar-alt text-white text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold text-gray-800">Calendar Agent</h1>
|
|
<p class="text-sm text-gray-500">AI Calendar Management</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center gap-6">
|
|
<div class="text-right">
|
|
<p class="text-sm text-gray-500">Last sync</p>
|
|
<p class="font-semibold text-gray-800" id="lastSync">Just now</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
<span class="text-sm text-green-600 font-medium">Synced</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 bg-gray-50 min-h-screen">
|
|
|
|
<!-- Header Section -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">AI Calendar Management</h1>
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Smart scheduling, optimal time finding, and intelligent meeting management powered by AI.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Calendar Command Center -->
|
|
<div class="bg-white rounded-2xl p-6 mb-8 shadow-lg border border-gray-200">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-green-600 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-brain text-white"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-gray-800">Calendar AI Command</h2>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="flex-1">
|
|
<input
|
|
id="calendarCommand"
|
|
type="text"
|
|
placeholder="Ask AI: 'Schedule team meeting tomorrow 2PM', 'Find free time this week', 'Reschedule conflicting meetings'"
|
|
class="w-full px-4 py-3 rounded-xl border border-gray-300 bg-white text-gray-800 placeholder-gray-500 focus:border-green-400 focus:ring-2 focus:ring-green-400/50 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<button
|
|
onclick="executeCalendarCommand()"
|
|
class="w-full sm:w-auto bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-xl font-semibold transition-all flex items-center justify-center gap-2 min-w-[120px]"
|
|
id="calendarAiBtn"
|
|
>
|
|
<i class="fas fa-robot"></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="setCalendarCommand('Show today\'s schedule')" class="text-xs bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-full transition-colors">
|
|
Today's Schedule
|
|
</button>
|
|
<button onclick="setCalendarCommand('Find free time this week')" class="text-xs bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-full transition-colors">
|
|
Find Free Time
|
|
</button>
|
|
<button onclick="setCalendarCommand('Schedule team meeting')" class="text-xs bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-full transition-colors">
|
|
Schedule Meeting
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Dashboard -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-calendar-day text-blue-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="todayMeetings">5</div>
|
|
<div class="text-sm text-gray-500">Today</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-clock text-orange-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="nextMeeting">2:30 PM</div>
|
|
<div class="text-sm text-gray-500">Next</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-check-circle text-green-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="freeSlots">3</div>
|
|
<div class="text-sm text-gray-500">Free Slots</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-lg border border-gray-200">
|
|
<div class="text-center">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-2">
|
|
<i class="fas fa-robot text-purple-600"></i>
|
|
</div>
|
|
<div class="text-2xl font-bold text-gray-800" id="aiScheduled">12</div>
|
|
<div class="text-sm text-gray-500">AI Scheduled</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Calendar Interface -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Calendar View & Today's Schedule -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
|
|
<!-- Mini Calendar -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-xl font-bold text-gray-800">December 2024</h3>
|
|
<div class="flex items-center gap-2">
|
|
<button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
|
|
<i class="fas fa-chevron-left text-gray-600"></i>
|
|
</button>
|
|
<button class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
|
|
<i class="fas fa-chevron-right text-gray-600"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 gap-1 mb-2">
|
|
<div class="text-center text-sm font-medium text-gray-500 py-2">Sun</div>
|
|
<div class="text-center text-sm font-medium text-gray-500 py-2">Mon</div>
|
|
<div class="text-center text-sm font-medium text-gray-500 py-2">Tue</div>
|
|
<div class="text-center text-sm font-medium text-gray-500 py-2">Wed</div>
|
|
<div class="text-center text-sm font-medium text-gray-500 py-2">Thu</div>
|
|
<div class="text-center text-sm font-medium text-gray-500 py-2">Fri</div>
|
|
<div class="text-center text-sm font-medium text-gray-500 py-2">Sat</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 gap-1">
|
|
<!-- Calendar days -->
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-500 bg-gray-50">1</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 today bg-blue-100 border-2 border-blue-500">2</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 has-events bg-green-100">3</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">4</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 has-events bg-green-100">5</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">6</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">7</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">8</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 has-events bg-green-100">9</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">10</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">11</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 has-events bg-green-100">12</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">13</div>
|
|
<div class="calendar-day rounded-lg p-2 text-center text-gray-800 hover:bg-gray-100">14</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Today's Schedule -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-xl font-bold text-gray-800">Today's Schedule</h3>
|
|
<span class="text-sm text-gray-500">Monday, Dec 2, 2024</span>
|
|
</div>
|
|
|
|
<div class="space-y-4 custom-scrollbar max-h-96 overflow-y-auto" id="scheduleList">
|
|
<!-- Current Meeting -->
|
|
<div class="meeting-current p-4 rounded-lg border border-red-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
|
|
<span class="font-semibold text-gray-800">Team Standup</span>
|
|
<span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">Live</span>
|
|
</div>
|
|
<span class="text-sm text-gray-500">9:00 - 9:30 AM</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-2">Daily sync with development team</p>
|
|
<div class="flex items-center gap-4 text-xs text-gray-500">
|
|
<span><i class="fas fa-users mr-1"></i>8 attendees</span>
|
|
<span><i class="fas fa-video mr-1"></i>Zoom Meeting</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upcoming Meetings -->
|
|
<div class="meeting-upcoming p-4 rounded-lg border border-blue-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="font-semibold text-gray-800">Client Presentation</span>
|
|
<span class="text-sm text-gray-500">2:30 - 3:30 PM</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-2">Q4 strategy review with ABC Corp</p>
|
|
<div class="flex items-center gap-4 text-xs text-gray-500 mb-2">
|
|
<span><i class="fas fa-users mr-1"></i>5 attendees</span>
|
|
<span><i class="fas fa-map-marker-alt mr-1"></i>Conference Room A</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="px-3 py-1 bg-blue-600 text-white text-xs rounded-lg hover:bg-blue-700 transition-colors">Join</button>
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-lg hover:bg-gray-200 transition-colors">Reschedule</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meeting-upcoming p-4 rounded-lg border border-blue-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="font-semibold text-gray-800">Budget Review</span>
|
|
<span class="text-sm text-gray-500">4:00 - 5:00 PM</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-2">Monthly financial planning session</p>
|
|
<div class="flex items-center gap-4 text-xs text-gray-500">
|
|
<span><i class="fas fa-users mr-1"></i>3 attendees</span>
|
|
<span><i class="fas fa-video mr-1"></i>Teams Meeting</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Free Time Block -->
|
|
<div class="p-4 rounded-lg border-2 border-dashed border-green-400 bg-green-50">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="font-semibold text-green-700">Focus Time</span>
|
|
<span class="text-sm text-green-600">10:00 - 12:00 PM</span>
|
|
</div>
|
|
<p class="text-sm text-green-600">2-hour block reserved for deep work</p>
|
|
<div class="flex items-center gap-2 text-xs text-green-600 mt-2">
|
|
<i class="fas fa-brain mr-1"></i>AI Protected Time
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Actions Panel -->
|
|
<div class="space-y-6">
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Quick Actions</h3>
|
|
<div class="space-y-3">
|
|
<button onclick="scheduleMeeting()" class="w-full p-3 bg-green-600 hover:bg-green-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-plus"></i>
|
|
<span>Schedule Meeting</span>
|
|
</button>
|
|
<button onclick="findFreeTime()" class="w-full p-3 bg-blue-600 hover:bg-blue-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-search"></i>
|
|
<span>Find Free Time</span>
|
|
</button>
|
|
<button onclick="blockFocusTime()" class="w-full p-3 bg-purple-600 hover:bg-purple-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-brain"></i>
|
|
<span>Block Focus Time</span>
|
|
</button>
|
|
<button onclick="optimizeSchedule()" class="w-full p-3 bg-orange-600 hover:bg-orange-700 rounded-lg text-white font-medium transition-colors flex items-center gap-3">
|
|
<i class="fas fa-magic"></i>
|
|
<span>Optimize Schedule</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Analysis -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Time Analysis</h3>
|
|
<div class="space-y-4">
|
|
<div class="bg-blue-50 rounded-lg p-3 border border-blue-200">
|
|
<h4 class="font-medium text-blue-700 mb-1">Meeting Load</h4>
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-1">
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div>
|
|
</div>
|
|
<p class="text-sm text-blue-600">65% of day in meetings</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-3 border border-green-200">
|
|
<h4 class="font-medium text-green-700 mb-1">Focus Time</h4>
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-1">
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: 35%"></div>
|
|
</div>
|
|
<p class="text-sm text-green-600">2.8 hours available</p>
|
|
</div>
|
|
<div class="bg-orange-50 rounded-lg p-3 border border-orange-200">
|
|
<h4 class="font-medium text-orange-700 mb-1">Efficiency Score</h4>
|
|
<p class="text-2xl font-bold text-orange-600">87%</p>
|
|
<p class="text-sm text-orange-600">Above average</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upcoming Conflicts -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">AI Insights</h3>
|
|
<div class="space-y-3">
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
|
|
<h4 class="font-medium text-yellow-700 mb-1">⚠️ Potential Conflict</h4>
|
|
<p class="text-sm text-yellow-600">Tomorrow 3PM: Two meetings scheduled</p>
|
|
</div>
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
<h4 class="font-medium text-blue-700 mb-1">💡 Suggestion</h4>
|
|
<p class="text-sm text-blue-600">Move standup to 8:30 AM for better flow</p>
|
|
</div>
|
|
<div class="bg-green-50 border border-green-200 rounded-lg p-3">
|
|
<h4 class="font-medium text-green-700 mb-1">✨ Opportunity</h4>
|
|
<p class="text-sm text-green-600">Friday 2-4 PM available for deep work</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent AI Actions -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-lg border border-gray-200">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">Recent AI Actions</h3>
|
|
<div class="space-y-3 custom-scrollbar max-h-48 overflow-y-auto">
|
|
<div class="flex items-start gap-3 p-2 bg-gray-50 rounded-lg">
|
|
<div class="w-6 h-6 bg-green-100 rounded flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fas fa-calendar-plus text-green-600 text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-gray-800">Scheduled team meeting</p>
|
|
<p class="text-xs text-gray-500">3 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-3 p-2 bg-gray-50 rounded-lg">
|
|
<div class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fas fa-search text-blue-600 text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-gray-800">Found optimal meeting time</p>
|
|
<p class="text-xs text-gray-500">8 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-3 p-2 bg-gray-50 rounded-lg">
|
|
<div class="w-6 h-6 bg-purple-100 rounded flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="fas fa-brain text-purple-600 text-xs"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm text-gray-800">Protected focus time</p>
|
|
<p class="text-xs text-gray-500">15 minutes ago</p>
|
|
</div>
|
|
</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-green-100 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-robot text-green-600"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800">Calendar 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>
|
|
|
|
<!-- Scripts at the end -->
|
|
<script src="assets/js/utils.js"></script>
|
|
<script src="assets/js/navigation.js"></script>
|
|
<script src="assets/js/calendar-agent.js"></script>
|
|
</body>
|
|
</html> |