mirror of
https://github.com/thecyberlearn/Victor-AI-Hub.git
synced 2026-08-18 06:33:03 +00:00
666 lines
31 KiB
HTML
666 lines
31 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>
|
|
<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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.meeting-upcoming { border-left: 4px solid #3b82f6; background: rgba(59, 130, 246, 0.1); }
|
|
.meeting-current { border-left: 4px solid #ef4444; background: rgba(239, 68, 68, 0.1); }
|
|
.meeting-completed { border-left: 4px solid #10b981; background: rgba(16, 185, 129, 0.1); }
|
|
|
|
.time-slot-available { background: rgba(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.3); }
|
|
.time-slot-busy { background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.3); }
|
|
.time-slot-selected { background: rgba(59, 130, 246, 0.3); border: 2px solid #3b82f6; }
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.4s ease-out;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.calendar-day {
|
|
aspect-ratio: 1;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.calendar-day:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.calendar-day.today {
|
|
background: rgba(59, 130, 246, 0.3);
|
|
border: 2px solid #3b82f6;
|
|
}
|
|
|
|
.calendar-day.has-events {
|
|
background: rgba(16, 185, 129, 0.2);
|
|
}
|
|
</style>
|
|
</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>
|
|
|
|
<script>
|
|
// Navigation function
|
|
function goHome() {
|
|
if (confirm('Return to AI Services Hub?')) {
|
|
alert('Navigating to AI Services Hub...\n\nIn production, this would load: index.html');
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateLastSync();
|
|
initializeEventListeners();
|
|
});
|
|
|
|
function initializeEventListeners() {
|
|
document.getElementById('calendarCommand').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
executeCalendarCommand();
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateLastSync() {
|
|
document.getElementById('lastSync').textContent = new Date().toLocaleTimeString();
|
|
}
|
|
|
|
function setCalendarCommand(command) {
|
|
document.getElementById('calendarCommand').value = command;
|
|
executeCalendarCommand();
|
|
}
|
|
|
|
async function executeCalendarCommand() {
|
|
const command = document.getElementById('calendarCommand').value.trim();
|
|
if (!command) {
|
|
alert('Please enter a command');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('calendarAiBtn');
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
// Simulate AI processing
|
|
await new Promise(resolve => setTimeout(resolve, 1500));
|
|
|
|
const response = generateCalendarAIResponse(command);
|
|
showAIModal(response);
|
|
|
|
// Update stats
|
|
updateCalendarStats();
|
|
updateLastSync();
|
|
|
|
} catch (error) {
|
|
alert('Error processing command: ' + error.message);
|
|
} finally {
|
|
btn.innerHTML = '<i class="fas fa-robot"></i> <span>Execute</span>';
|
|
btn.disabled = false;
|
|
document.getElementById('calendarCommand').value = '';
|
|
}
|
|
}
|
|
|
|
function generateCalendarAIResponse(command) {
|
|
const lowerCommand = command.toLowerCase();
|
|
|
|
if (lowerCommand.includes('schedule') && lowerCommand.includes('meeting')) {
|
|
return `
|
|
<div class="space-y-4">
|
|
<h4 class="text-lg font-semibold text-gray-800">📅 Schedule Meeting</h4>
|
|
<div class="bg-green-50 border border-green-200 p-4 rounded-lg">
|
|
<h5 class="font-medium text-green-800 mb-2">✅ Optimal Time Found</h5>
|
|
<p class="text-sm text-green-700 mb-3">Best time for all attendees: <strong>Tomorrow 3:30 PM - 4:30 PM</strong></p>
|
|
<div class="space-y-2 text-sm text-green-700">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-users text-green-600"></i>
|
|
<span>5 attendees available</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-map-marker-alt text-green-600"></i>
|
|
<span>Conference Room B reserved</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i class="fas fa-video text-green-600"></i>
|
|
<span>Zoom link generated</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-blue-50 border border-blue-200 p-4 rounded-lg">
|
|
<h5 class="font-medium text-blue-800 mb-2">📋 Meeting Details</h5>
|
|
<div class="space-y-2 text-sm text-blue-700">
|
|
<p><strong>Title:</strong> Team Strategy Discussion</p>
|
|
<p><strong>Duration:</strong> 1 hour</p>
|
|
<p><strong>Attendees:</strong> Sarah, John, Mike, Lisa, David</p>
|
|
<p><strong>Agenda:</strong> Q1 planning and resource allocation</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition-colors">Confirm & Send Invites</button>
|
|
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Modify Details</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return `
|
|
<div class="space-y-4">
|
|
<h4 class="text-lg font-semibold text-gray-800">🤖 Calendar AI Response</h4>
|
|
<div class="bg-green-50 border border-green-200 p-4 rounded-lg">
|
|
<p class="text-green-700">Processing your request: "<em>${command}</em>"</p>
|
|
<p class="text-sm text-green-600 mt-2">I can help you with:</p>
|
|
<ul class="mt-3 space-y-1 text-sm text-green-700">
|
|
<li>• Smart meeting scheduling and optimization</li>
|
|
<li>• Finding optimal free time slots</li>
|
|
<li>• Conflict detection and resolution</li>
|
|
<li>• Focus time blocking and protection</li>
|
|
<li>• Calendar analysis and insights</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function showAIModal(content) {
|
|
document.getElementById('aiResponse').innerHTML = content;
|
|
document.getElementById('aiModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeAIModal() {
|
|
document.getElementById('aiModal').classList.add('hidden');
|
|
}
|
|
|
|
function updateCalendarStats() {
|
|
const aiScheduled = document.getElementById('aiScheduled');
|
|
const current = parseInt(aiScheduled.textContent);
|
|
aiScheduled.textContent = current + 1;
|
|
}
|
|
|
|
// Quick action functions
|
|
function scheduleMeeting() {
|
|
showAIModal(`
|
|
<div class="space-y-4">
|
|
<h4 class="text-lg font-semibold text-gray-800">📅 Schedule New 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 Strategy Discussion">
|
|
</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">Duration:</label>
|
|
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
|
|
<option value="30">30 minutes</option>
|
|
<option value="60" selected>1 hour</option>
|
|
<option value="90">1.5 hours</option>
|
|
<option value="120">2 hours</option>
|
|
</select>
|
|
</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="sarah@company.com, john@company.com">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Meeting Type:</label>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
|
|
<input type="radio" name="meetingType" value="inPerson" class="mr-2">
|
|
<span class="text-sm">In-Person</span>
|
|
</label>
|
|
<label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
|
|
<input type="radio" name="meetingType" value="virtual" class="mr-2" checked>
|
|
<span class="text-sm">Virtual</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button class="w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 transition-colors font-medium">
|
|
🤖 Find Optimal Time & Schedule
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
function findFreeTime() {
|
|
updateCalendarStats();
|
|
alert('🔍 Found 3 optimal time slots this week for your requirements');
|
|
}
|
|
|
|
function blockFocusTime() {
|
|
updateCalendarStats();
|
|
alert('🧠 Protected 2-hour focus block scheduled for tomorrow 10-12 AM');
|
|
}
|
|
|
|
function optimizeSchedule() {
|
|
if (confirm('Let AI optimize your schedule for maximum productivity?')) {
|
|
updateCalendarStats();
|
|
alert('✨ Schedule optimized! Moved 3 meetings to create better focus blocks and reduced meeting fragmentation by 40%.');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |