Hugging Face's logo

Spaces:
ksdeexith
/
my-generative-test-project
Running

App Files Community
my-generative-test-project / index.html
ksdeexith's picture
ksdeexith
Add 3 files
588a1e5 verified
Raw
History Blame Contribute Delete
71.4 kB
<<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Smart Calendar - Auto Schedule from Emails</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .calendar-day:hover .day-number {
 transform: scale(1.2);
 background-color: #3b82f6;
 color: white;
 }
 .event-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 display: inline-block;
 margin-right: 4px;
 }
 .email-preview {
 transition: all 0.2s ease;
 }
 .email-preview:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 .scheduling-animation {
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { opacity: 0.6; }
 50% { opacity: 1; }
 100% { opacity: 0.6; }
 }
 </style>
</head>
<body class="bg-gray-100 font-sans">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="hidden md:flex md:flex-shrink-0">
 <div class="flex flex-col w-64 bg-indigo-700 text-white">
 <div class="flex items-center justify-center h-16 px-4 bg-indigo-800">
 <div class="flex items-center">
 <i class="fas fa-calendar-alt text-2xl mr-2"></i>
 <span class="text-xl font-bold">Smart Calendar</span>
 </div>
 </div>
 <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
 <div class="space-y-1">
 <button id="today-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-800 rounded-md">
 <i class="fas fa-calendar-day mr-3"></i>
 Today
 </button>
 <button id="schedule-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
 <i class="fas fa-robot mr-3"></i>
 Auto Schedule
 </button>
 <button id="email-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
 <i class="fas fa-envelope mr-3"></i>
 Email Integration
 </button>
 <button id="settings-btn" class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
 <i class="fas fa-cog mr-3"></i>
 Settings
 </button>
 </div>
<div class="mt-8">
 <h3 class="px-4 text-xs font-semibold text-indigo-200 uppercase tracking-wider">
 Calendars
 </h3>
 <div class="mt-2 space-y-1">
 <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
 <span class="w-3 h-3 mr-3 bg-red-500 rounded-full"></span>
 Work
 </div>
 <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
 <span class="w-3 h-3 mr-3 bg-blue-500 rounded-full"></span>
 Personal
 </div>
 <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
 <span class="w-3 h-3 mr-3 bg-green-500 rounded-full"></span>
 Meetings
 </div>
 </div>
 </div>
<div class="mt-auto mb-4 px-4">
 <div class="bg-indigo-800 rounded-lg p-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <i class="fas fa-lightbulb text-yellow-300 text-xl"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium text-indigo-100">
 <span id="ai-tip">AI Tip: Click "Auto Schedule" to analyze your emails and create events</span>
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Main content -->
 <div class="flex flex-col flex-1 overflow-hidden">
 <!-- Top navigation -->
 <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
 <div class="flex items-center">
 <button id="mobile-menu-btn" class="md:hidden text-gray-500 focus:outline-none">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <h1 class="ml-4 text-xl font-semibold text-gray-900" id="current-month-year">June 2023</h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <button id="view-dropdown-btn" class="flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
 <span id="current-view">Week</span>
 <i class="fas fa-chevron-down ml-2 text-xs"></i>
 </button>
 <div id="view-dropdown" class="hidden absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg z-10">
 <div class="py-1">
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 view-option" data-view="day">Day</a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 view-option" data-view="week">Week</a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 view-option" data-view="month">Month</a>
 </div>
 </div>
 </div>
 <div class="flex space-x-2">
 <button id="prev-btn" class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none">
 <i class="fas fa-chevron-left"></i>
 </button>
 <button id="next-btn" class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none">
 <i class="fas fa-chevron-right"></i>
 </button>
 </div>
 <button id="add-event-btn" class="flex items-center px-3 py-1 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">
 <i class="fas fa-plus mr-1"></i>
 Add Event
 </button>
 </div>
 </div>
<!-- Calendar content -->
 <div class="flex flex-1 overflow-hidden">
 <!-- Calendar view -->
 <div class="flex-1 overflow-y-auto p-4" id="calendar-container">
 <div class="bg-white rounded-lg shadow overflow-hidden">
 <!-- Month view -->
 <div id="month-view" class="">
 <div class="grid grid-cols-7 gap-px bg-gray-200">
 <!-- Day headers -->
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sun</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Mon</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Tue</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Wed</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Thu</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Fri</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sat</div>
 </div>
 <div class="grid grid-cols-7 gap-px bg-gray-200" id="month-days">
 <!-- Days will be populated by JavaScript -->
 </div>
 </div>
<!-- Week view (hidden by default) -->
 <div id="week-view" class="hidden">
 <div class="grid grid-cols-8 gap-px bg-gray-200">
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Time</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sun</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Mon</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Tue</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Wed</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Thu</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Fri</div>
 <div class="bg-gray-100 py-2 text-center text-xs font-medium text-gray-500 uppercase">Sat</div>
 </div>
 <div class="grid grid-cols-8 gap-px bg-gray-200" id="week-hours">
 <!-- Hours will be populated by JavaScript -->
 </div>
 </div>
<!-- Day view (hidden by default) -->
 <div id="day-view" class="hidden">
 <div class="bg-gray-100 py-2 text-center text-sm font-medium text-gray-700" id="day-view-header">
 Sunday, June 4, 2023
 </div>
 <div class="divide-y divide-gray-200" id="day-hours">
 <!-- Hours will be populated by JavaScript -->
 </div>
 </div>
 </div>
 </div>
<!-- Email sidebar (hidden by default) -->
 <div id="email-sidebar" class="hidden w-96 border-l border-gray-200 bg-white overflow-y-auto">
 <div class="p-4 border-b border-gray-200">
 <div class="flex items-center justify-between">
 <h2 class="text-lg font-medium text-gray-900">Email Integration</h2>
 <button id="close-email-btn" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="mt-4">
 <div class="flex items-center">
 <div class="flex-1">
 <div class="relative rounded-md shadow-sm">
 <input type="text" id="email-search" class="block w-full pr-10 sm:text-sm border-gray-300 rounded-md" placeholder="Search emails...">
 <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
 <i class="fas fa-search text-gray-400"></i>
 </div>
 </div>
 </div>
 <button id="refresh-emails-btn" class="ml-2 p-2 text-blue-600 hover:text-blue-800">
 <i class="fas fa-sync-alt"></i>
 </button>
 </div>
 </div>
 </div>
<div class="divide-y divide-gray-200" id="email-list">
 <!-- Email preview items will be added here -->
 <div class="email-preview p-4 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-start">
 <div class="flex-shrink-0 pt-1">
 <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-blue-500">
 <span class="text-sm font-medium leading-none text-white">JD</span>
 </span>
 </div>
 <div class="ml-3 flex-1">
 <div class="flex items-center justify-between">
 <h3 class="text-sm font-medium text-gray-900">John Doe</h3>
 <span class="text-xs text-gray-500">10:30 AM</span>
 </div>
 <p class="text-sm text-gray-900 font-medium mt-1">Meeting about project timeline</p>
 <p class="text-sm text-gray-500 mt-1">Hi, let's meet tomorrow at 2pm to discuss the project timeline. Please bring your...</p>
 <div class="mt-2 flex items-center">
 <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
 <i class="fas fa-clock mr-1"></i> Schedule suggested
 </span>
 </div>
 </div>
 </div>
 </div>
<div class="email-preview p-4 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-start">
 <div class="flex-shrink-0 pt-1">
 <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-purple-500">
 <span class="text-sm font-medium leading-none text-white">AS</span>
 </span>
 </div>
 <div class="ml-3 flex-1">
 <div class="flex items-center justify-between">
 <h3 class="text-sm font-medium text-gray-900">Acme Suppliers</h3>
 <span class="text-xs text-gray-500">Yesterday</span>
 </div>
 <p class="text-sm text-gray-900 font-medium mt-1">Your order #45678 is ready</p>
 <p class="text-sm text-gray-500 mt-1">Dear customer, your order is ready for pickup between 9am-5pm this Friday...</p>
 <div class="mt-2 flex items-center">
 <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
 <i class="fas fa-check-circle mr-1"></i> Event created
 </span>
 </div>
 </div>
 </div>
 </div>
<div class="email-preview p-4 hover:bg-gray-50 cursor-pointer">
 <div class="flex items-start">
 <div class="flex-shrink-0 pt-1">
 <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-red-500">
 <span class="text-sm font-medium leading-none text-white">TM</span>
 </span>
 </div>
 <div class="ml-3 flex-1">
 <div class="flex items-center justify-between">
 <h3 class="text-sm font-medium text-gray-900">Team Meeting</h3>
 <span class="text-xs text-gray-500">Jun 1</span>
 </div>
 <p class="text-sm text-gray-900 font-medium mt-1">Weekly team sync</p>
 <p class="text-sm text-gray-500 mt-1">Reminder: We have our weekly team sync every Wednesday at 11am. This week we'll...</p>
 <div class="mt-2 flex items-center">
 <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
 <i class="fas fa-exclamation-circle mr-1"></i> Needs review
 </span>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="p-4 border-t border-gray-200">
 <button id="connect-email-btn" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
 <i class="fab fa-google mr-2"></i> Connect Gmail Account
 </button>
 </div>
 </div>
<!-- Auto-schedule panel (hidden by default) -->
 <div id="schedule-panel" class="hidden w-96 border-l border-gray-200 bg-white overflow-y-auto">
 <div class="p-4 border-b border-gray-200">
 <div class="flex items-center justify-between">
 <h2 class="text-lg font-medium text-gray-900">Auto Schedule</h2>
 <button id="close-schedule-btn" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <p class="mt-1 text-sm text-gray-500">AI-powered scheduling from your emails</p>
 </div>
<div class="p-4">
 <div class="rounded-lg bg-blue-50 p-4">
 <div class="flex">
 <div class="flex-shrink-0">
 <i class="fas fa-robot text-blue-400 text-xl"></i>
 </div>
 <div class="ml-3">
 <h3 class="text-sm font-medium text-blue-800">How it works</h3>
 <div class="mt-2 text-sm text-blue-700">
 <p>Our AI will analyze your emails for:</p>
 <ul class="list-disc pl-5 mt-1 space-y-1">
 <li>Meeting requests</li>
 <li>Appointments</li>
 <li>Deadlines</li>
 <li>Time-sensitive tasks</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<div class="mt-6">
 <label class="block text-sm font-medium text-gray-700">Schedule preferences</label>
 <div class="mt-2 space-y-4">
 <div class="flex items-start">
 <div class="flex items-center h-5">
 <input id="pref-meetings" name="pref-meetings" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
 </div>
 <div class="ml-3 text-sm">
 <label for="pref-meetings" class="font-medium text-gray-700">Create events for meetings</label>
 <p class="text-gray-500">Automatically add calendar events for meeting requests</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex items-center h-5">
 <input id="pref-deadlines" name="pref-deadlines" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
 </div>
 <div class="ml-3 text-sm">
 <label for="pref-deadlines" class="font-medium text-gray-700">Create reminders for deadlines</label>
 <p class="text-gray-500">Add reminders for project deadlines and deliverables</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex items-center h-5">
 <input id="pref-confirm" name="pref-confirm" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
 </div>
 <div class="ml-3 text-sm">
 <label for="pref-confirm" class="font-medium text-gray-700">Confirm before scheduling</label>
 <p class="text-gray-500">Show me events before they're added to my calendar</p>
 </div>
 </div>
 </div>
 </div>
<div class="mt-6">
 <label for="work-hours" class="block text-sm font-medium text-gray-700">Preferred work hours</label>
 <div class="mt-2 grid grid-cols-2 gap-4">
 <div>
 <label for="start-time" class="block text-xs font-medium text-gray-500">Start time</label>
 <select id="start-time" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
 <option>8:00 AM</option>
 <option selected>9:00 AM</option>
 <option>10:00 AM</option>
 </select>
 </div>
 <div>
 <label for="end-time" class="block text-xs font-medium text-gray-500">End time</label>
 <select id="end-time" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
 <option>4:00 PM</option>
 <option>5:00 PM</option>
 <option selected>6:00 PM</option>
 </select>
 </div>
 </div>
 </div>
 </div>
<div class="p-4 border-t border-gray-200 mt-auto">
 <button id="run-schedule-btn" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 scheduling-animation">
 <i class="fas fa-magic mr-2"></i> Run Auto Schedule
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Event modal (hidden by default) -->
 <div id="event-modal" class="hidden fixed inset-0 overflow-y-auto z-50">
 <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 transition-opacity" aria-hidden="true">
 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 </div>
 <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
 <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
 <div>
 <div class="mt-3 text-center sm:mt-0 sm:text-left">
 <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
 Add New Event
 </h3>
 <div class="mt-4">
 <div class="mb-4">
 <label for="event-title" class="block text-sm font-medium text-gray-700">Event title</label>
 <input type="text" id="event-title" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
 </div>
 <div class="grid grid-cols-2 gap-4 mb-4">
 <div>
 <label for="event-start" class="block text-sm font-medium text-gray-700">Start</label>
 <input type="datetime-local" id="event-start" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
 </div>
 <div>
 <label for="event-end" class="block text-sm font-medium text-gray-700">End</label>
 <input type="datetime-local" id="event-end" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
 </div>
 </div>
 <div class="mb-4">
 <label for="event-description" class="block text-sm font-medium text-gray-700">Description</label>
 <textarea id="event-description" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"></textarea>
 </div>
 <div class="mb-4">
 <label for="event-color" class="block text-sm font-medium text-gray-700">Color</label>
 <select id="event-color" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
 <option value="blue" class="text-blue-600">Blue</option>
 <option value="red" class="text-red-600">Red</option>
 <option value="green" class="text-green-600">Green</option>
 <option value="purple" class="text-purple-600">Purple</option>
 <option value="yellow" class="text-yellow-600">Yellow</option>
 </select>
 </div>
 </div>
 </div>
 </div>
 <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
 <button type="button" id="save-event-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
 Save
 </button>
 <button type="button" id="cancel-event-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm">
 Cancel
 </button>
 <button type="button" id="delete-event-btn" class="hidden mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
 Delete
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Mobile menu (hidden by default) -->
 <div id="mobile-menu" class="hidden fixed inset-0 z-40 md:hidden">
 <div class="fixed inset-0 bg-gray-600 bg-opacity-75" aria-hidden="true"></div>
 <div class="fixed inset-y-0 left-0 max-w-xs w-full bg-indigo-700">
 <div class="flex items-center justify-center h-16 px-4 bg-indigo-800">
 <div class="flex items-center">
 <i class="fas fa-calendar-alt text-2xl mr-2 text-white"></i>
 <span class="text-xl font-bold text-white">Smart Calendar</span>
 </div>
 </div>
 <div class="flex flex-col h-full py-4 overflow-y-auto">
 <div class="space-y-1 px-4">
 <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-800 rounded-md">
 <i class="fas fa-calendar-day mr-3"></i>
 Today
 </button>
 <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
 <i class="fas fa-robot mr-3"></i>
 Auto Schedule
 </button>
 <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
 <i class="fas fa-envelope mr-3"></i>
 Email Integration
 </button>
 <button class="flex items-center w-full px-4 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-600 rounded-md">
 <i class="fas fa-cog mr-3"></i>
 Settings
 </button>
 </div>
<div class="mt-8 px-4">
 <h3 class="text-xs font-semibold text-indigo-200 uppercase tracking-wider">
 Calendars
 </h3>
 <div class="mt-2 space-y-1">
 <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
 <span class="w-3 h-3 mr-3 bg-red-500 rounded-full"></span>
 Work
 </div>
 <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
 <span class="w-3 h-3 mr-3 bg-blue-500 rounded-full"></span>
 Personal
 </div>
 <div class="flex items-center px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-600 rounded-md cursor-pointer">
 <span class="w-3 h-3 mr-3 bg-green-500 rounded-full"></span>
 Meetings
 </div>
 </div>
 </div>
<div class="mt-auto mb-4 px-4">
 <div class="bg-indigo-800 rounded-lg p-4">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <i class="fas fa-lightbulb text-yellow-300 text-xl"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium text-indigo-100">
 AI Tip: Click "Auto Schedule" to analyze your emails and create events
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Current date and view state
 let currentDate = new Date();
 let currentView = 'month';
 let events = [
 {
 id: 1,
 title: 'Team Meeting',
 start: new Date(2023, 5, 5, 11, 0),
 end: new Date(2023, 5, 5, 12, 0),
 color: 'blue',
 description: 'Weekly team sync with all departments'
 },
 {
 id: 2,
 title: 'Lunch with Sarah',
 start: new Date(2023, 5, 7, 12, 30),
 end: new Date(2023, 5, 7, 13, 30),
 color: 'green',
 description: 'Discuss new project collaboration'
 },
 {
 id: 3,
 title: 'Project Deadline',
 start: new Date(2023, 5, 10, 17, 0),
 end: new Date(2023, 5, 10, 17, 0),
 color: 'red',
 description: 'Submit final report to client'
 },
 {
 id: 4,
 title: 'Conference Call',
 start: new Date(2023, 5, 12, 14, 0),
 end: new Date(2023, 5, 12, 15, 0),
 color: 'purple',
 description: 'With international partners'
 }
 ];
 // DOM elements
 const currentMonthYearEl = document.getElementById('current-month-year');
 const monthDaysEl = document.getElementById('month-days');
 const weekHoursEl = document.getElementById('week-hours');
 const dayHoursEl = document.getElementById('day-hours');
 const dayViewHeaderEl = document.getElementById('day-view-header');
 const currentViewEl = document.getElementById('current-view');
 const viewDropdownBtn = document.getElementById('view-dropdown-btn');
 const viewDropdown = document.getElementById('view-dropdown');
 const viewOptions = document.querySelectorAll('.view-option');
 const monthViewEl = document.getElementById('month-view');
 const weekViewEl = document.getElementById('week-view');
 const dayViewEl = document.getElementById('day-view');
 const prevBtn = document.getElementById('prev-btn');
 const nextBtn = document.getElementById('next-btn');
 const todayBtn = document.getElementById('today-btn');
 const addEventBtn = document.getElementById('add-event-btn');
 const eventModal = document.getElementById('event-modal');
 const saveEventBtn = document.getElementById('save-event-btn');
 const cancelEventBtn = document.getElementById('cancel-event-btn');
 const deleteEventBtn = document.getElementById('delete-event-btn');
 const eventTitleEl = document.getElementById('event-title');
 const eventStartEl = document.getElementById('event-start');
 const eventEndEl = document.getElementById('event-end');
 const eventDescriptionEl = document.getElementById('event-description');
 const eventColorEl = document.getElementById('event-color');
 const emailSidebar = document.getElementById('email-sidebar');
 const emailBtn = document.getElementById('email-btn');
 const closeEmailBtn = document.getElementById('close-email-btn');
 const schedulePanel = document.getElementById('schedule-panel');
 const scheduleBtn = document.getElementById('schedule-btn');
 const closeScheduleBtn = document.getElementById('close-schedule-btn');
 const runScheduleBtn = document.getElementById('run-schedule-btn');
 const mobileMenuBtn = document.getElementById('mobile-menu-btn');
 const mobileMenu = document.getElementById('mobile-menu');
 const connectEmailBtn = document.getElementById('connect-email-btn');
 const refreshEmailsBtn = document.getElementById('refresh-emails-btn');
 const emailSearchEl = document.getElementById('email-search');
 // Initialize calendar
 function initCalendar() {
 updateMonthYearDisplay();
 renderMonthView();
 renderWeekView();
 renderDayView();
 }
 // Update month/year display
 function updateMonthYearDisplay() {
 const options = { year: 'numeric', month: 'long' };
 currentMonthYearEl.textContent = currentDate.toLocaleDateString('en-US', options);
 }
 // Render month view
 function renderMonthView() {
 monthDaysEl.innerHTML = '';
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
 const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
// Get the day of the week for the first day of the month (0-6, where 0 is Sunday)
 const firstDayOfWeek = firstDayOfMonth.getDay();
// Get the day of the week for the last day of the month
 const lastDayOfWeek = lastDayOfMonth.getDay();
// Calculate the number of days from the previous month to show
 const daysFromPrevMonth = firstDayOfWeek;
// Calculate the number of days from the next month to show
 const daysFromNextMonth = 6 - lastDayOfWeek;
// Calculate the total number of days to show (always 6 weeks)
 const totalDays = daysFromPrevMonth + lastDayOfMonth.getDate() + daysFromNextMonth;
// Previous month
 const prevMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
 const daysInPrevMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
// Next month
 const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
// Current date for comparison
 const today = new Date();
 const isCurrentMonth = currentDate.getMonth() === today.getMonth() && currentDate.getFullYear() === today.getFullYear();
for (let i = 0; i < totalDays; i++) {
 const dayEl = document.createElement('div');
 dayEl.className = 'calendar-day bg-white py-2 px-1 h-24 overflow-y-auto';
// Determine if this day is from previous, current, or next month
 let day, month, year, isCurrentMonthDay, isToday = false;
if (i < daysFromPrevMonth) {
 // Previous month
 day = daysInPrevMonth - daysFromPrevMonth + i + 1;
 month = prevMonth.getMonth();
 year = prevMonth.getFullYear();
 isCurrentMonthDay = false;
 } else if (i < daysFromPrevMonth + lastDayOfMonth.getDate()) {
 // Current month
 day = i - daysFromPrevMonth + 1;
 month = currentDate.getMonth();
 year = currentDate.getFullYear();
 isCurrentMonthDay = true;
// Check if this is today
 if (isCurrentMonth && day === today.getDate()) {
 isToday = true;
 }
 } else {
 // Next month
 day = i - (daysFromPrevMonth + lastDayOfMonth.getDate()) + 1;
 month = nextMonth.getMonth();
 year = nextMonth.getFullYear();
 isCurrentMonthDay = false;
 }
const date = new Date(year, month, day);
// Day number
 const dayNumberEl = document.createElement('div');
 dayNumberEl.className = `day-number text-right text-sm font-medium rounded-full w-6 h-6 flex items-center justify-center ml-auto ${isToday ? 'bg-blue-600 text-white' : isCurrentMonthDay ? 'text-gray-900' : 'text-gray-400'}`;
 dayNumberEl.textContent = day;
// Events for this day
 const dayEvents = events.filter(event => {
 const eventDate = new Date(event.start);
 return eventDate.getDate() === day &&
eventDate.getMonth() === month &&
eventDate.getFullYear() === year;
 });
// Events container
 const eventsEl = document.createElement('div');
 eventsEl.className = 'mt-1 space-y-1';
dayEvents.forEach(event => {
 const eventEl = document.createElement('div');
 eventEl.className = 'text-xs truncate px-1 py-0.5 rounded';
// Set color based on event color
 let bgColor, textColor;
 switch(event.color) {
 case 'blue':
 bgColor = 'bg-blue-100';
 textColor = 'text-blue-800';
 break;
 case 'red':
 bgColor = 'bg-red-100';
 textColor = 'text-red-800';
 break;
 case 'green':
 bgColor = 'bg-green-100';
 textColor = 'text-green-800';
 break;
 case 'purple':
 bgColor = 'bg-purple-100';
 textColor = 'text-purple-800';
 break;
 case 'yellow':
 bgColor = 'bg-yellow-100';
 textColor = 'text-yellow-800';
 break;
 default:
 bgColor = 'bg-gray-100';
 textColor = 'text-gray-800';
 }
eventEl.className += ` ${bgColor} ${textColor}`;
// Add time if it's not an all-day event
 let timeText = '';
 if (event.start.getHours() !== 0 || event.start.getMinutes() !== 0) {
 timeText = event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' ';
 }
eventEl.textContent = timeText + event.title;
 eventEl.dataset.eventId = event.id;
 eventEl.addEventListener('click', (e) => {
 e.stopPropagation();
 openEditEventModal(event.id);
 });
eventsEl.appendChild(eventEl);
 });
dayEl.appendChild(dayNumberEl);
 dayEl.appendChild(eventsEl);
// Add click event to create new event
 dayEl.addEventListener('click', () => {
 openNewEventModal(date);
 });
monthDaysEl.appendChild(dayEl);
 }
 }
 // Render week view
 function renderWeekView() {
 weekHoursEl.innerHTML = '';
// Get the start of the week (Sunday)
 const startOfWeek = new Date(currentDate);
 startOfWeek.setDate(currentDate.getDate() - currentDate.getDay());
// Create time column
 for (let hour = 0; hour < 24; hour++) {
 const timeCell = document.createElement('div');
 timeCell.className = 'bg-gray-100 py-1 px-2 text-xs text-gray-500 text-right';
 timeCell.textContent = hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`;
 weekHoursEl.appendChild(timeCell);
// Create day cells for this hour
 for (let day = 0; day < 7; day++) {
 const dayCell = document.createElement('div');
 dayCell.className = 'bg-white py-1 px-1 h-12 overflow-hidden border-b border-gray-200';
const dayDate = new Date(startOfWeek);
 dayDate.setDate(startOfWeek.getDate() + day);
 dayDate.setHours(hour);
// Find events for this hour
 const hourEvents = events.filter(event => {
 const eventStart = new Date(event.start);
 return eventStart.getDate() === dayDate.getDate() &&
 eventStart.getMonth() === dayDate.getMonth() &&
 eventStart.getFullYear() === dayDate.getFullYear() &&
 eventStart.getHours() === hour;
 });
hourEvents.forEach(event => {
 const eventEl = document.createElement('div');
 eventEl.className = 'text-xs truncate px-1 py-0.5 rounded mb-1';
// Set color based on event color
 let bgColor, textColor;
 switch(event.color) {
 case 'blue':
 bgColor = 'bg-blue-100';
 textColor = 'text-blue-800';
 break;
 case 'red':
 bgColor = 'bg-red-100';
 textColor = 'text-red-800';
 break;
 case 'green':
 bgColor = 'bg-green-100';
 textColor = 'text-green-800';
 break;
 case 'purple':
 bgColor = 'bg-purple-100';
 textColor = 'text-purple-800';
 break;
 case 'yellow':
 bgColor = 'bg-yellow-100';
 textColor = 'text-yellow-800';
 break;
 default:
 bgColor = 'bg-gray-100';
 textColor = 'text-gray-800';
 }
eventEl.className += ` ${bgColor} ${textColor}`;
 eventEl.textContent = event.title;
 eventEl.dataset.eventId = event.id;
 eventEl.addEventListener('click', (e) => {
 e.stopPropagation();
 openEditEventModal(event.id);
 });
dayCell.appendChild(eventEl);
 });
// Add click event to create new event
 dayCell.addEventListener('click', () => {
 openNewEventModal(dayDate);
 });
weekHoursEl.appendChild(dayCell);
 }
 }
 }
 // Render day view
 function renderDayView() {
 dayHoursEl.innerHTML = '';
// Set day header
 const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
 dayViewHeaderEl.textContent = currentDate.toLocaleDateString('en-US', options);
for (let hour = 0; hour < 24; hour++) {
 const hourRow = document.createElement('div');
 hourRow.className = 'flex';
// Time label
 const timeLabel = document.createElement('div');
 timeLabel.className = 'w-16 py-2 px-2 text-xs text-gray-500 text-right';
 timeLabel.textContent = hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`;
 hourRow.appendChild(timeLabel);
// Hour content
 const hourContent = document.createElement('div');
 hourContent.className = 'flex-1 py-2 px-2 border-t border-gray-200 h-16';
const hourDate = new Date(currentDate);
 hourDate.setHours(hour, 0, 0, 0);
// Find events for this hour
 const hourEvents = events.filter(event => {
 const eventStart = new Date(event.start);
 return eventStart.getDate() === hourDate.getDate() &&
 eventStart.getMonth() === hourDate.getMonth() &&
 eventStart.getFullYear() === hourDate.getFullYear() &&
 eventStart.getHours() === hour;
 });
hourEvents.forEach(event => {
 const eventEl = document.createElement('div');
 eventEl.className = 'text-sm px-2 py-1 rounded mb-1';
// Set color based on event color
 let bgColor, textColor;
 switch(event.color) {
 case 'blue':
 bgColor = 'bg-blue-100';
 textColor = 'text-blue-800';
 break;
 case 'red':
 bgColor = 'bg-red-100';
 textColor = 'text-red-800';
 break;
 case 'green':
 bgColor = 'bg-green-100';
 textColor = 'text-green-800';
 break;
 case 'purple':
 bgColor = 'bg-purple-100';
 textColor = 'text-purple-800';
 break;
 case 'yellow':
 bgColor = 'bg-yellow-100';
 textColor = 'text-yellow-800';
 break;
 default:
 bgColor = 'bg-gray-100';
 textColor = 'text-gray-800';
 }
eventEl.className += ` ${bgColor} ${textColor}`;
// Add time if it's not an all-day event
 let timeText = '';
 if (event.start.getHours() !== 0 || event.start.getMinutes() !== 0) {
 timeText = event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' ';
 }
eventEl.textContent = timeText + event.title;
 eventEl.dataset.eventId = event.id;
 eventEl.addEventListener('click', (e) => {
 e.stopPropagation();
 openEditEventModal(event.id);
 });
hourContent.appendChild(eventEl);
 });
// Add click event to create new event
 hourContent.addEventListener('click', () => {
 openNewEventModal(hourDate);
 });
hourRow.appendChild(hourContent);
 dayHoursEl.appendChild(hourRow);
 }
 }
 // Switch calendar view
 function switchView(view) {
 currentView = view;
 currentViewEl.textContent = view.charAt(0).toUpperCase() + view.slice(1);
monthViewEl.classList.add('hidden');
 weekViewEl.classList.add('hidden');
 dayViewEl.classList.add('hidden');
if (view === 'month') {
 monthViewEl.classList.remove('hidden');
 } else if (view === 'week') {
 weekViewEl.classList.remove('hidden');
 } else if (view === 'day') {
 dayViewEl.classList.remove('hidden');
 }
 }
 // Open new event modal
 function openNewEventModal(date) {
 // Reset modal
 document.getElementById('modal-title').textContent = 'Add New Event';
 eventTitleEl.value = '';
 eventDescriptionEl.value = '';
 eventColorEl.value = 'blue';
 deleteEventBtn.classList.add('hidden');
// Set default times
 const startDate = new Date(date);
 startDate.setHours(9, 0, 0, 0);
const endDate = new Date(startDate);
 endDate.setHours(10, 0, 0, 0);
// Format for datetime-local input
 const formatDateTimeLocal = (date) => {
 const year = date.getFullYear();
 const month = String(date.getMonth() + 1).padStart(2, '0');
 const day = String(date.getDate()).padStart(2, '0');
 const hours = String(date.getHours()).padStart(2, '0');
 const minutes = String(date.getMinutes()).padStart(2, '0');
 return `${year}-${month}-${day}T${hours}:${minutes}`;
 };
eventStartEl.value = formatDateTimeLocal(startDate);
 eventEndEl.value = formatDateTimeLocal(endDate);
// Show modal
 eventModal.classList.remove('hidden');
 }
 // Open edit event modal
 function openEditEventModal(eventId) {
 const event = events.find(e => e.id === eventId);
 if (!event) return;
document.getElementById('modal-title').textContent = 'Edit Event';
 eventTitleEl.value = event.title;
 eventDescriptionEl.value = event.description;
 eventColorEl.value = event.color;
 deleteEventBtn.classList.remove('hidden');
// Format for datetime-local input
 const formatDateTimeLocal = (date) => {
 const year = date.getFullYear();
 const month = String(date.getMonth() + 1).padStart(2, '0');
 const day = String(date.getDate()).padStart(2, '0');
 const hours = String(date.getHours()).padStart(2, '0');
 const minutes = String(date.getMinutes()).padStart(2, '0');
 return `${year}-${month}-${day}T${hours}:${minutes}`;
 };
eventStartEl.value = formatDateTimeLocal(event.start);
 eventEndEl.value = formatDateTimeLocal(event.end);
// Set up delete button
 deleteEventBtn.onclick = () => {
 if (confirm('Are you sure you want to delete this event?')) {
 events = events.filter(e => e.id !== eventId);
 renderCalendar();
 eventModal.classList.add('hidden');
 }
 };
// Show modal
 eventModal.classList.remove('hidden');
 }
 // Save event
 function saveEvent() {
 const title = eventTitleEl.value.trim();
 if (!title) {
 alert('Please enter an event title');
 return;
 }
const start = new Date(eventStartEl.value);
 const end = new Date(eventEndEl.value);
if (start >= end) {
 alert('End time must be after start time');
 return;
 }
const description = eventDescriptionEl.value;
 const color = eventColorEl.value;
// Check if we're editing an existing event
 const modalTitle = document.getElementById('modal-title').textContent;
 if (modalTitle === 'Edit Event') {
 // Find the event being edited
 const eventId = parseInt(deleteEventBtn.dataset.eventId);
 const eventIndex = events.findIndex(e => e.id === eventId);
if (eventIndex !== -1) {
 events[eventIndex] = {
 ...events[eventIndex],
 title,
 start,
 end,
 description,
 color
 };
 }
 } else {
 // Create new event
 const newId = events.length > 0 ? Math.max(...events.map(e => e.id)) + 1 : 1;
 events.push({
 id: newId,
 title,
 start,
 end,
 description,
 color
 });
 }
renderCalendar();
 eventModal.classList.add('hidden');
 }
 // Render calendar based on current view
 function renderCalendar() {
 updateMonthYearDisplay();
if (currentView === 'month') {
 renderMonthView();
 } else if (currentView === 'week') {
 renderWeekView();
 } else if (currentView === 'day') {
 renderDayView();
 }
 }
 // Event listeners
 prevBtn.addEventListener('click', () => {
 if (currentView === 'month') {
 currentDate.setMonth(currentDate.getMonth() - 1);
 } else if (currentView === 'week') {
 currentDate.setDate(currentDate.getDate() - 7);
 } else if (currentView === 'day') {
 currentDate.setDate(currentDate.getDate() - 1);
 }
 renderCalendar();
 });
 nextBtn.addEventListener('click', () => {
 if (currentView === 'month') {
 currentDate.setMonth(currentDate.getMonth() + 1);
 } else if (currentView === 'week') {
 currentDate.setDate(currentDate.getDate() + 7);
 } else if (currentView === 'day') {
 currentDate.setDate(currentDate.getDate() + 1);
 }
 renderCalendar();
 });
 todayBtn.addEventListener('click', () => {
 currentDate = new Date();
 renderCalendar();
 });
 viewDropdownBtn.addEventListener('click', () => {
 viewDropdown.classList.toggle('hidden');
 });
 viewOptions.forEach(option => {
 option.addEventListener('click', (e) => {
 e.preventDefault();
 const view = option.dataset.view;
 switchView(view);
 viewDropdown.classList.add('hidden');
 });
 });
 saveEventBtn.addEventListener('click', saveEvent);
 cancelEventBtn.addEventListener('click', () => {
 eventModal.classList.add('hidden');
 });
 addEventBtn.addEventListener('click', () => {
 openNewEventModal(currentDate);
 });
 emailBtn.addEventListener('click', () => {
 emailSidebar.classList.remove('hidden');
 schedulePanel.classList.add('hidden');
 });
 closeEmailBtn.addEventListener('click', () => {
 emailSidebar.classList.add('hidden');
 });
 scheduleBtn.addEventListener('click', () => {
 schedulePanel.classList.remove('hidden');
 emailSidebar.classList.add('hidden');
 });
 closeScheduleBtn.addEventListener('click', () => {
 schedulePanel.classList.add('hidden');
 });
 runScheduleBtn.addEventListener('click', () => {
 // Simulate AI scheduling
 runScheduleBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing emails...';
setTimeout(() => {
 // Create some sample events from "emails"
 events.push({
 id: events.length + 1,
 title: 'Client Call with John',
 start: new Date(2023, 5, 14, 14, 0),
 end: new Date(2023, 5, 14, 15, 0),
 color: 'blue',
 description: 'Discuss project requirements'
 });
events.push({
 id: events.length + 1,
 title: 'Deadline: Project Proposal',
 start: new Date(2023, 5, 16, 17, 0),
 end: new Date(2023, 5, 16, 17, 0),
 color: 'red',
 description: 'Submit final project proposal to client'
 });
runScheduleBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Scheduling complete!';
setTimeout(() => {
 runScheduleBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Run Auto Schedule';
 renderCalendar();
 }, 1500);
 }, 2000);
 });
 mobileMenuBtn.addEventListener('click', () => {
 mobileMenu.classList.remove('hidden');
 });
 document.addEventListener('click', (e) => {
 if (!viewDropdownBtn.contains(e.target) && !viewDropdown.contains(e.target)) {
 viewDropdown.classList.add('hidden');
 }
if (!mobileMenuBtn.contains(e.target) && !mobileMenu.contains(e.target)) {
 mobileMenu.classList.add('hidden');
 }
 });
 connectEmailBtn.addEventListener('click', () => {
 connectEmailBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
setTimeout(() => {
 connectEmailBtn.innerHTML = '<i class="fab fa-google mr-2"></i> Gmail Connected';
 connectEmailBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
 connectEmailBtn.classList.add('bg-green-600', 'hover:bg-green-700');
// Add some sample emails
 const emailList = document.getElementById('email-list');
const newEmails = [
 {
 sender: 'Jane Smith',
 initials: 'JS',
 time: '2 hours ago',
 subject: 'Follow-up on our meeting',
 preview: 'Hi, just following up on our conversation yesterday about the marketing campaign. When would be a good time...',
 status: 'schedule suggested',
 statusColor: 'blue'
 },
 {
 sender: 'Tech Conference',
 initials: 'TC',
 time: '1 day ago',
 subject: 'Your ticket confirmation',
 preview: 'Thank you for registering for TechConf 2023! Your ticket is confirmed for June 20-22. We look forward...',
 status: 'event created',
 statusColor: 'green'
 }
 ];
newEmails.forEach(email => {
 const emailEl = document.createElement('div');
 emailEl.className = 'email-preview p-4 hover:bg-gray-50 cursor-pointer';
 emailEl.innerHTML = `
 <div class="flex items-start">
 <div class="flex-shrink-0 pt-1">
 <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-${email.statusColor}-500">
 <span class="text-sm font-medium leading-none text-white">${email.initials}</span>
 </span>
 </div>
 <div class="ml-3 flex-1">
 <div class="flex items-center justify-between">
 <h3 class="text-sm font-medium text-gray-900">${email.sender}</h3>
 <span class="text-xs text-gray-500">${email.time}</span>
 </div>
 <p class="text-sm text-gray-900 font-medium mt-1">${email.subject}</p>
 <p class="text-sm text-gray-500 mt-1">${email.preview}</p>
 <div class="mt-2 flex items-center">
 <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-${email.statusColor}-100 text-${email.statusColor}-800">
 <i class="fas fa-${email.status === 'event created' ? 'check-circle' : email.status === 'schedule suggested' ? 'clock' : 'exclamation-circle'} mr-1"></i> ${email.status}
 </span>
 </div>
 </div>
 </div>
 `;
emailList.prepend(emailEl);
 });
 }, 1500);
 });
 refreshEmailsBtn.addEventListener('click', () => {
 refreshEmailsBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
setTimeout(() => {
 refreshEmailsBtn.innerHTML = '<i class="fas fa-sync-alt"></i>';
// In a real app, this would fetch new emails
 const notification = document.createElement('div');
 notification.className = 'bg-blue-50 border-l-4 border-blue-400 p-4 mb-4';
 notification.innerHTML = `
 <div class="flex">
 <div class="flex-shrink-0">
 <i class="fas fa-info-circle text-blue-400"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm text-blue-700">No new emails found. Last checked: ${new Date().toLocaleTimeString()}</p>
 </div>
 </div>
 `;
const emailList = document.getElementById('email-list');
 emailList.prepend(notification);
setTimeout(() => {
 notification.remove();
 }, 3000);
 }, 1000);
 });
 emailSearchEl.addEventListener('input', (e) => {
 const searchTerm = e.target.value.toLowerCase();
 const emailPreviews = document.querySelectorAll('.email-preview');
emailPreviews.forEach(preview => {
 const text = preview.textContent.toLowerCase();
 if (text.includes(searchTerm)) {
 preview.classList.remove('hidden');
 } else {
 preview.classList.add('hidden');
 }
 });
 });
 // Initialize the calendar
 initCalendar();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ksdeexith/my-generative-test-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>