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>