| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EventSync - Calendar Synchronization</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> |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| @keyframes slideIn { |
| from { transform: translateX(100%); } |
| to { transform: translateX(0); } |
| } |
| |
| .notification { |
| animation: slideIn 0.3s ease-out; |
| } |
| |
| |
| .calendar-day:hover { |
| transform: scale(1.05); |
| transition: transform 0.2s; |
| } |
| |
| |
| .spinner { |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <header class="bg-indigo-600 text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-calendar-alt text-2xl"></i> |
| <h1 class="text-2xl font-bold">EventSync</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-indigo-200 transition">Dashboard</a> |
| <a href="#" class="hover:text-indigo-200 transition">Calendar</a> |
| <a href="#" class="hover:text-indigo-200 transition">Settings</a> |
| <a href="#" class="hover:text-indigo-200 transition">Help</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="md:hidden text-white focus:outline-none"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <div class="relative"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer border-2 border-white"> |
| <div class="absolute -top-1 -right-1 bg-green-400 w-3 h-3 rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="md:hidden bg-indigo-700 text-white hidden" id="mobileMenu"> |
| <div class="container mx-auto px-4 py-2 flex flex-col space-y-3"> |
| <a href="#" class="py-2 border-b border-indigo-600">Dashboard</a> |
| <a href="#" class="py-2 border-b border-indigo-600">Calendar</a> |
| <a href="#" class="py-2 border-b border-indigo-600">Settings</a> |
| <a href="#" class="py-2">Help</a> |
| </div> |
| </div> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <aside class="lg:w-1/4 bg-white rounded-lg shadow-md p-6 h-fit"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Connected Calendars</h2> |
| |
| <div class="space-y-4 mb-6"> |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <i class="fab fa-google text-red-500 text-xl"></i> |
| <span class="font-medium">Google Calendar</span> |
| </div> |
| <span class="text-green-500 text-sm font-medium">Connected</span> |
| </div> |
| |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <i class="fab fa-microsoft text-blue-600 text-xl"></i> |
| <span class="font-medium">Outlook</span> |
| </div> |
| <span class="text-green-500 text-sm font-medium">Connected</span> |
| </div> |
| |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <i class="fab fa-apple text-gray-800 text-xl"></i> |
| <span class="font-medium">iCloud</span> |
| </div> |
| <button class="text-indigo-600 text-sm font-medium hover:underline">Connect</button> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-medium mb-3 text-gray-800">Sync Settings</h3> |
| <div class="space-y-3"> |
| <label class="flex items-center space-x-2 cursor-pointer"> |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded" checked> |
| <span>Auto-sync every 15 minutes</span> |
| </label> |
| <label class="flex items-center space-x-2 cursor-pointer"> |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded" checked> |
| <span>Notify about conflicts</span> |
| </label> |
| <label class="flex items-center space-x-2 cursor-pointer"> |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded"> |
| <span>Auto-resolve simple conflicts</span> |
| </label> |
| </div> |
| </div> |
| |
| <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center space-x-2"> |
| <i class="fas fa-sync-alt"></i> |
| <span>Sync Now</span> |
| </button> |
| </aside> |
|
|
| |
| <div class="lg:w-3/4"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-white rounded-lg shadow p-6 flex items-center space-x-4"> |
| <div class="bg-green-100 p-3 rounded-full"> |
| <i class="fas fa-calendar-check text-green-600 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">Synced Events</p> |
| <h3 class="text-2xl font-bold">142</h3> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6 flex items-center space-x-4"> |
| <div class="bg-blue-100 p-3 rounded-full"> |
| <i class="fas fa-exclamation-triangle text-blue-600 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">Current Conflicts</p> |
| <h3 class="text-2xl font-bold">3</h3> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow p-6 flex items-center space-x-4"> |
| <div class="bg-purple-100 p-3 rounded-full"> |
| <i class="fas fa-clock text-purple-600 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">Last Sync</p> |
| <h3 class="text-xl font-bold">2 min ago</h3> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8"> |
| <div class="bg-indigo-600 text-white px-6 py-4 flex justify-between items-center"> |
| <h2 class="text-xl font-semibold">Event Conflicts</h2> |
| <span class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-medium">3 New</span> |
| </div> |
| |
| <div class="divide-y divide-gray-200"> |
| |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-medium text-lg text-gray-800">Team Meeting Conflict</h3> |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">High Priority</span> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
| <div class="border-l-4 border-blue-500 pl-3"> |
| <p class="text-sm text-gray-500">Google Calendar</p> |
| <p class="font-medium">Mon, Jun 5 • 2:00-3:30 PM</p> |
| </div> |
| <div class="border-l-4 border-red-500 pl-3"> |
| <p class="text-sm text-gray-500">Outlook</p> |
| <p class="font-medium">Mon, Jun 5 • 2:30-4:00 PM</p> |
| </div> |
| <div class="border-l-4 border-gray-500 pl-3"> |
| <p class="text-sm text-gray-500">Suggested Resolution</p> |
| <p class="font-medium">Mon, Jun 5 • 4:00-5:30 PM</p> |
| </div> |
| </div> |
| |
| <div class="flex flex-wrap gap-3"> |
| <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition flex items-center space-x-2"> |
| <i class="fas fa-check"></i> |
| <span>Accept Suggestion</span> |
| </button> |
| <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition flex items-center space-x-2"> |
| <i class="fas fa-pencil-alt"></i> |
| <span>Custom Time</span> |
| </button> |
| <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition flex items-center space-x-2"> |
| <i class="fas fa-times"></i> |
| <span>Ignore Conflict</span> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <h3 class="font-medium text-lg text-gray-800">Dentist Appointment</h3> |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Medium Priority</span> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
| <div class="border-l-4 border-blue-500 pl-3"> |
| <p class="text-sm text-gray-500">Google Calendar</p> |
| <p class="font-medium">Wed, Jun 7 • 9:00-10:00 AM</p> |
| </div> |
| <div class="border-l-4 border-gray-500 pl-3"> |
| <p class="text-sm text-gray-500">iCloud</p> |
| <p class="font-medium">Wed, Jun 7 • 10:30-11:30 AM</p> |
| </div> |
| <div class="border-l-4 border-gray-500 pl-3"> |
| <p class="text-sm text-gray-500">Suggested Resolution</p> |
| <p class="font-medium">Wed, Jun 7 • 10:30-11:30 AM</p> |
| </div> |
| </div> |
| |
| <div class="flex flex-wrap gap-3"> |
| <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition flex items-center space-x-2"> |
| <i class="fas fa-check"></i> |
| <span>Accept Suggestion</span> |
| </button> |
| <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition flex items-center space-x-2"> |
| <i class="fas fa-pencil-alt"></i> |
| <span>Custom Time</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="bg-indigo-600 text-white px-6 py-4"> |
| <h2 class="text-xl font-semibold">Upcoming Events</h2> |
| </div> |
| |
| <div class="p-6"> |
| |
| <div class="flex justify-between items-center mb-6"> |
| <button class="text-indigo-600 hover:text-indigo-800 transition"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <h3 class="text-xl font-semibold text-gray-800">June 2023</h3> |
| <button class="text-indigo-600 hover:text-indigo-800 transition"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| |
| |
| <div class="grid grid-cols-7 gap-2 mb-4"> |
| <div class="text-center font-medium text-gray-500 py-2">Sun</div> |
| <div class="text-center font-medium text-gray-500 py-2">Mon</div> |
| <div class="text-center font-medium text-gray-500 py-2">Tue</div> |
| <div class="text-center font-medium text-gray-500 py-2">Wed</div> |
| <div class="text-center font-medium text-gray-500 py-2">Thu</div> |
| <div class="text-center font-medium text-gray-500 py-2">Fri</div> |
| <div class="text-center font-medium text-gray-500 py-2">Sat</div> |
| </div> |
| |
| <div class="grid grid-cols-7 gap-2"> |
| |
| |
| <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">28</div> |
| <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">29</div> |
| <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">30</div> |
| <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">31</div> |
| <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition"> |
| 1 |
| <div class="text-left text-xs mt-1 space-y-1 overflow-hidden"> |
| <div class="bg-blue-100 text-blue-800 px-1 rounded truncate">Meeting 9am</div> |
| </div> |
| </div> |
| <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition"> |
| 2 |
| <div class="text-left text-xs mt-1 space-y-1 overflow-hidden"> |
| <div class="bg-green-100 text-green-800 px-1 rounded truncate">Lunch 12pm</div> |
| </div> |
| </div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">3</div> |
| |
| |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">4</div> |
| <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition"> |
| 5 |
| <div class="text-left text-xs mt-1 space-y-1 overflow-hidden"> |
| <div class="bg-red-100 text-red-800 px-1 rounded truncate">Team Meeting 2pm</div> |
| <div class="bg-purple-100 text-purple-800 px-1 rounded truncate">Call 4pm</div> |
| </div> |
| </div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">6</div> |
| <div class="calendar-day bg-white border border-indigo-200 rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition"> |
| 7 |
| <div class="text-left text-xs mt-1 space-y-1 overflow-hidden"> |
| <div class="bg-yellow-100 text-yellow-800 px-1 rounded truncate">Dentist 10am</div> |
| </div> |
| </div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">8</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">9</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">10</div> |
| |
| |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">11</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">12</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">13</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">14</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">15</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">16</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">17</div> |
| |
| |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">18</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">19</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">20</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">21</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">22</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">23</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">24</div> |
| |
| |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">25</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">26</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">27</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">28</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">29</div> |
| <div class="calendar-day bg-white rounded-lg p-2 h-24 text-right cursor-pointer hover:bg-indigo-50 transition">30</div> |
| <div class="calendar-day bg-gray-100 rounded-lg p-2 h-24 text-right">1</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div class="fixed bottom-4 right-4 space-y-3" id="notificationArea"> |
| <div class="notification bg-white rounded-lg shadow-lg p-4 w-80 border-l-4 border-green-500 flex justify-between items-start"> |
| <div> |
| <p class="font-medium text-gray-800">Sync Completed</p> |
| <p class="text-sm text-gray-600">3 events updated across all calendars</p> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-100 border-t border-gray-200 py-6 mt-12"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> |
| <i class="fas fa-calendar-alt text-indigo-600 text-xl"></i> |
| <span class="text-lg font-semibold text-gray-800">EventSync</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Privacy</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Contact</a> |
| </div> |
| </div> |
| <div class="mt-4 text-center md:text-left text-sm text-gray-500"> |
| © 2023 EventSync. All rights reserved. |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.querySelector('.md\\:hidden button').addEventListener('click', function() { |
| const menu = document.getElementById('mobileMenu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelector('#notificationArea button').addEventListener('click', function() { |
| this.closest('.notification').style.opacity = '0'; |
| setTimeout(() => { |
| this.closest('.notification').remove(); |
| }, 300); |
| }); |
| |
| |
| document.querySelectorAll('.calendar-day').forEach(day => { |
| day.addEventListener('click', function() { |
| |
| console.log('Day clicked:', this.textContent.trim()); |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.flex-wrap button').forEach(button => { |
| button.addEventListener('click', function() { |
| const action = this.textContent.trim(); |
| const conflictTitle = this.closest('.p-6').querySelector('h3').textContent; |
| |
| if (action === 'Accept Suggestion') { |
| showToast(`Accepted resolution for: ${conflictTitle}`); |
| } else if (action === 'Custom Time') { |
| |
| showToast(`Opening custom time selector for: ${conflictTitle}`); |
| } else if (action === 'Ignore Conflict') { |
| showToast(`Ignored conflict for: ${conflictTitle}`); |
| } |
| }); |
| }); |
| |
| |
| function showToast(message) { |
| const toast = document.createElement('div'); |
| toast.className = 'notification bg-white rounded-lg shadow-lg p-4 w-80 border-l-4 border-blue-500 flex justify-between items-start'; |
| toast.innerHTML = ` |
| <div> |
| <p class="font-medium text-gray-800">Action Taken</p> |
| <p class="text-sm text-gray-600">${message}</p> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-times"></i> |
| </button> |
| `; |
| |
| document.getElementById('notificationArea').prepend(toast); |
| |
| |
| setTimeout(() => { |
| toast.style.opacity = '0'; |
| setTimeout(() => toast.remove(), 300); |
| }, 5000); |
| |
| |
| toast.querySelector('button').addEventListener('click', function() { |
| toast.style.opacity = '0'; |
| setTimeout(() => toast.remove(), 300); |
| }); |
| } |
| </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=kizashix/eventsync" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
