|
|
<!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> |
