Spaces:

triton7777
/

calender

Running

App Files Files Community

triton7777 commited on Jul 5, 2025

Commit

d8c0e75

verified ·

1 Parent(s): 133277a

Develop a React-based interactive web application that visualizes a 24-hour daily schedule using a circular radial timeline. The timeline acts as a full-day planner where users can view, add, modify, and delete events directly on a clock-like circular interface. Tech Stack: React (TypeScript) SVG or Canvas for rendering the circular timeline TailwindCSS or styled-components for styling Framer Motion for smooth transitions Optional: Zustand or Redux for state management Core Functional Requirements: Circular Time Representation: SVG-based full circle representing 24 hours. Tick marks at each hour; minor ticks for 15/30 min intervals. Time starts at top center (00:00), proceeds clockwise. Schedule Display: Activities visualized as colored arc segments along the circle. Each segment: start time, end time, activity label. Color-coded by category: Sleep, Routine, Work, Meals, Exercise, Custom. Interactivity: Hover on a segment: tooltip with full info. Click: open modal for edit/delete. Click empty space: add new event (start and duration picker). Drag start/end handles to adjust duration live. Drag segment to shift time. Center Display: Shows date (e.g., “Tuesday”) and summary info (e.g., total planned hours). Central "Add Task" button opens time/category input modal. UX/UI Enhancements: Smooth transitions on interaction (Framer Motion). Responsive for mobile and desktop views. Custom themes (dark/light mode). Data Features: Save/load from localStorage or backend. Export to image (PNG) or printable format. Sync with Google Calendar or ICS. Structure Example (TypeScript + React): type ScheduleEntry = { id: string; label: string; start: number; // in hours (e.g., 22.5 for 10:30 PM) end: number; color: string; }; Component Outline: CircularTimeline.tsx – renders the SVG-based timeline. ScheduleSegment.tsx – visual arc for one activity. ScheduleEditorModal.tsx – add/edit UI. useScheduleStore.ts – state logic. Goal: An aesthetically clean, tactile circular scheduler that’s intuitive for managing daily time visually, optimized for both structured planning and spontaneous editing. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +630 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Calender
-emoji: 👀
-colorFrom: indigo
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: calender
+emoji: 🐳
+colorFrom: green
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,630 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Circular Daily Scheduler</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <style>
+        .circle-container {
+            position: relative;
+            width: 100%;
+            max-width: 600px;
+            aspect-ratio: 1/1;
+            margin: 0 auto;
+        }
+        .time-tick {
+            position: absolute;
+            width: 2px;
+            height: 12px;
+            background-color: #64748b;
+            transform-origin: bottom center;
+        }
+        .time-tick.minor {
+            height: 6px;
+            background-color: #94a3b8;
+        }
+        .time-label {
+            position: absolute;
+            font-size: 0.8rem;
+            color: #64748b;
+            transform: translate(-50%, -50%);
+        }
+        .segment {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            clip-path: circle(50% at 50% 50%);
+        }
+        .segment-arc {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%);
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+        .segment-arc:hover {
+            opacity: 0.9;
+        }
+        .segment-handle {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: white;
+            border: 2px solid #334155;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .segment-label {
+            position: absolute;
+            font-size: 0.7rem;
+            font-weight: 500;
+            color: white;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+            pointer-events: none;
+            transform-origin: center;
+        }
+        .dark .segment-label {
+            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+        }
+        @media (max-width: 640px) {
+            .segment-label {
+                font-size: 0.6rem;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="flex justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold">Circular Scheduler</h1>
+            <div class="flex items-center space-x-4">
+                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                    </svg>
+                </button>
+                <button id="add-event" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+                    </svg>
+                    Add Event
+                </button>
+            </div>
+        </header>
+        <div class="flex flex-col lg:flex-row gap-8">
+            <div class="lg:w-2/3">
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-xl font-semibold">Daily Schedule</h2>
+                        <div class="text-sm">
+                            <span id="current-date" class="font-medium"></span>
+                        </div>
+                    </div>
+                    <div class="circle-container">
+                        <div id="timeline-circle" class="segment">
+                            <!-- Time ticks will be added here by JS -->
+                        </div>
+                        <div id="segments-container" class="segment">
+                            <!-- Event segments will be added here by JS -->
+                        </div>
+                        <div id="center-info" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-full w-32 h-32 flex flex-col items-center justify-center shadow-inner border border-gray-200 dark:border-gray-700">
+                            <div id="day-name" class="text-lg font-bold"></div>
+                            <div id="total-hours" class="text-sm text-gray-500 dark:text-gray-400 mt-1"></div>
+                            <button id="add-center" class="mt-2 bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 rounded-full">
+                                Add Event
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="lg:w-1/3">
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 h-full">
+                    <h2 class="text-xl font-semibold mb-4">Today's Events</h2>
+                    <div id="events-list" class="space-y-3">
+                        <!-- Events will be listed here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Event Modal -->
+    <div id="event-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-md">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-semibold" id="modal-title">Add New Event</h3>
+                <button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+            <form id="event-form" class="space-y-4">
+                <input type="hidden" id="event-id">
+                <div>
+                    <label for="event-name" class="block text-sm font-medium mb-1">Event Name</label>
+                    <input type="text" id="event-name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700">
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label for="start-time" class="block text-sm font-medium mb-1">Start Time</label>
+                        <input type="time" id="start-time" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700">
+                    </div>
+                    <div>
+                        <label for="end-time" class="block text-sm font-medium mb-1">End Time</label>
+                        <input type="time" id="end-time" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700">
+                    </div>
+                </div>
+                <div>
+                    <label for="event-category" class="block text-sm font-medium mb-1">Category</label>
+                    <select id="event-category" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700">
+                        <option value="sleep">Sleep</option>
+                        <option value="routine">Routine</option>
+                        <option value="work">Work</option>
+                        <option value="meals">Meals</option>
+                        <option value="exercise">Exercise</option>
+                        <option value="custom">Custom</option>
+                    </select>
+                </div>
+                <div class="flex justify-end space-x-3 pt-4">
+                    <button type="button" id="delete-event" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg hidden">Delete</button>
+                    <button type="button" id="cancel-event" class="px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">Cancel</button>
+                    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script>
+        // Initialize theme
+        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+        // Theme toggle
+        document.getElementById('theme-toggle').addEventListener('click', function() {
+            if (localStorage.getItem('color-theme')) {
+                if (localStorage.getItem('color-theme') === 'light') {
+                    document.documentElement.classList.add('dark');
+                    localStorage.setItem('color-theme', 'dark');
+                } else {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.setItem('color-theme', 'light');
+                }
+            } else {
+                if (document.documentElement.classList.contains('dark')) {
+                    document.documentElement.classList.remove('dark');
+                    localStorage.setItem('color-theme', 'light');
+                } else {
+                    document.documentElement.classList.add('dark');
+                    localStorage.setItem('color-theme', 'dark');
+                }
+            }
+        });
+        // Current date display
+        const now = new Date();
+        const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+        document.getElementById('current-date').textContent = `${days[now.getDay()]}, ${months[now.getMonth()]} ${now.getDate()}, ${now.getFullYear()}`;
+        document.getElementById('day-name').textContent = days[now.getDay()];
+        // Event categories and colors
+        const categories = {
+            sleep: { name: 'Sleep', color: '#3b82f6', darkColor: '#1d4ed8' },
+            routine: { name: 'Routine', color: '#10b981', darkColor: '#047857' },
+            work: { name: 'Work', color: '#f59e0b', darkColor: '#b45309' },
+            meals: { name: 'Meals', color: '#ef4444', darkColor: '#b91c1c' },
+            exercise: { name: 'Exercise', color: '#8b5cf6', darkColor: '#7e22ce' },
+            custom: { name: 'Custom', color: '#64748b', darkColor: '#475569' }
+        };
+        // Sample events data
+        let events = JSON.parse(localStorage.getItem('circular-scheduler-events')) || [
+            { id: '1', label: 'Sleep', start: 0, end: 7, category: 'sleep' },
+            { id: '2', label: 'Breakfast', start: 7, end: 7.5, category: 'meals' },
+            { id: '3', label: 'Work', start: 8, end: 12, category: 'work' },
+            { id: '4', label: 'Lunch', start: 12, end: 13, category: 'meals' },
+            { id: '5', label: 'Work', start: 13, end: 17, category: 'work' },
+            { id: '6', label: 'Exercise', start: 17.5, end: 18.5, category: 'exercise' },
+            { id: '7', label: 'Dinner', start: 19, end: 20, category: 'meals' },
+            { id: '8', label: 'Relax', start: 20, end: 22, category: 'routine' },
+            { id: '9', label: 'Sleep', start: 22, end: 24, category: 'sleep' }
+        ];
+        // Save events to localStorage
+        function saveEvents() {
+            localStorage.setItem('circular-scheduler-events', JSON.stringify(events));
+        }
+        // Generate unique ID
+        function generateId() {
+            return Math.random().toString(36).substr(2, 9);
+        }
+        // Convert time string (HH:MM) to decimal hours
+        function timeToDecimal(time) {
+            const [hours, minutes] = time.split(':').map(Number);
+            return hours + minutes / 60;
+        }
+        // Convert decimal hours to time string (HH:MM)
+        function decimalToTime(decimal) {
+            const hours = Math.floor(decimal);
+            const minutes = Math.round((decimal - hours) * 60);
+            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+        }
+        // Draw the circular timeline
+        function drawTimeline() {
+            const container = document.getElementById('timeline-circle');
+            container.innerHTML = '';
+            // Draw hour ticks
+            for (let i = 0; i < 24; i++) {
+                // Major tick (hour)
+                const tick = document.createElement('div');
+                tick.className = 'time-tick';
+                tick.style.transform = `rotate(${i * 15}deg) translateY(-50%)`;
+                tick.style.left = '50%';
+                tick.style.top = '0';
+                container.appendChild(tick);
+                // Hour label
+                const label = document.createElement('div');
+                label.className = 'time-label';
+                label.textContent = i === 0 ? '12 AM' : i < 12 ? `${i} AM` : i === 12 ? '12 PM' : `${i - 12} PM`;
+                // Position label
+                const angle = i * 15;
+                const radius = 45;
+                const x = 50 + radius * Math.sin(angle * Math.PI / 180);
+                const y = 50 - radius * Math.cos(angle * Math.PI / 180);
+                label.style.left = `${x}%`;
+                label.style.top = `${y}%`;
+                container.appendChild(label);
+                // Minor ticks (15 and 45 minutes)
+                for (let j = 1; j < 4; j++) {
+                    const minorTick = document.createElement('div');
+                    minorTick.className = 'time-tick minor';
+                    minorTick.style.transform = `rotate(${i * 15 + j * 15}deg) translateY(-50%)`;
+                    minorTick.style.left = '50%';
+                    minorTick.style.top = '0';
+                    container.appendChild(minorTick);
+                }
+            }
+        }
+        // Draw event segments
+        function drawSegments() {
+            const container = document.getElementById('segments-container');
+            container.innerHTML = '';
+            // Calculate total planned hours
+            let totalHours = 0;
+            events.forEach(event => {
+                const duration = event.end - event.start;
+                totalHours += duration;
+                const startAngle = event.start * 15;
+                const endAngle = event.end * 15;
+                const midAngle = (startAngle + endAngle) / 2;
+                // Create arc segment
+                const arc = document.createElement('div');
+                arc.className = 'segment-arc';
+                arc.style.backgroundColor = document.documentElement.classList.contains('dark')
+                    ? categories[event.category].darkColor
+                    : categories[event.category].color;
+                // Position the arc
+                arc.style.transform = `rotate(${startAngle}deg)`;
+                arc.style.clipPath = `polygon(50% 50%, 50% 0%, ${startAngle < 180 ? '100%' : '0%'} 0%, ${startAngle < 180 ? '100%' : '0%'} 100%, 50% 100%)`;
+                arc.style.width = `${100 - (duration / 24 * 20)}%`;
+                arc.style.height = `${100 - (duration / 24 * 20)}%`;
+                arc.style.left = `${(duration / 24 * 10)}%`;
+                arc.style.top = `${(duration / 24 * 10)}%`;
+                // Add event data as attributes
+                arc.setAttribute('data-event-id', event.id);
+                // Add click handler
+                arc.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    openEditModal(event.id);
+                });
+                container.appendChild(arc);
+                // Add start handle
+                const startHandle = document.createElement('div');
+                startHandle.className = 'segment-handle';
+                startHandle.setAttribute('data-event-id', event.id);
+                startHandle.setAttribute('data-handle-type', 'start');
+                const startRadius = 45;
+                const startX = 50 + startRadius * Math.sin(startAngle * Math.PI / 180);
+                const startY = 50 - startRadius * Math.cos(startAngle * Math.PI / 180);
+                startHandle.style.left = `${startX}%`;
+                startHandle.style.top = `${startY}%`;
+                // Add drag functionality
+                makeDraggable(startHandle, 'start', event.id);
+                container.appendChild(startHandle);
+                // Add end handle
+                const endHandle = document.createElement('div');
+                endHandle.className = 'segment-handle';
+                endHandle.setAttribute('data-event-id', event.id);
+                endHandle.setAttribute('data-handle-type', 'end');
+                const endRadius = 45;
+                const endX = 50 + endRadius * Math.sin(endAngle * Math.PI / 180);
+                const endY = 50 - endRadius * Math.cos(endAngle * Math.PI / 180);
+                endHandle.style.left = `${endX}%`;
+                endHandle.style.top = `${endY}%`;
+                // Add drag functionality
+                makeDraggable(endHandle, 'end', event.id);
+                container.appendChild(endHandle);
+                // Add label
+                if (duration >= 0.5) { // Only show label if duration is at least 30 minutes
+                    const label = document.createElement('div');
+                    label.className = 'segment-label';
+                    label.textContent = event.label;
+                    label.setAttribute('data-event-id', event.id);
+                    const labelRadius = 30;
+                    const labelX = 50 + labelRadius * Math.sin(midAngle * Math.PI / 180);
+                    const labelY = 50 - labelRadius * Math.cos(midAngle * Math.PI / 180);
+                    label.style.left = `${labelX}%`;
+                    label.style.top = `${labelY}%`;
+                    label.style.transform = `rotate(${midAngle > 90 && midAngle < 270 ? midAngle + 180 : midAngle}deg)`;
+                    container.appendChild(label);
+                }
+            });
+            // Update total hours display
+            document.getElementById('total-hours').textContent = `${totalHours.toFixed(1)}h planned`;
+            // Update events list
+            updateEventsList();
+        }
+        // Make handles draggable
+        function makeDraggable(handle, type, eventId) {
+            let isDragging = false;
+            let startX, startY;
+            handle.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                startX = e.clientX;
+                startY = e.clientY;
+                e.preventDefault();
+            });
+            document.addEventListener('mousemove', (e) => {
+                if (!isDragging) return;
+                const container = document.querySelector('.circle-container');
+                const rect = container.getBoundingClientRect();
+                const centerX = rect.left + rect.width / 2;
+                const centerY = rect.top + rect.height / 2;
+                // Calculate angle from center to mouse position
+                const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI + 90;
+                const normalizedAngle = (angle + 360) % 360;
+                // Convert angle to time (0-24 hours)
+                const time = normalizedAngle / 15;
+                // Update the event
+                const eventIndex = events.findIndex(e => e.id === eventId);
+                if (eventIndex !== -1) {
+                    if (type === 'start') {
+                        // Don't allow start time to be after end time
+                        if (time < events[eventIndex].end) {
+                            events[eventIndex].start = Math.max(0, Math.min(24, time));
+                        }
+                    } else {
+                        // Don't allow end time to be before start time
+                        if (time > events[eventIndex].start) {
+                            events[eventIndex].end = Math.max(0, Math.min(24, time));
+                        }
+                    }
+                    // Redraw segments
+                    drawSegments();
+                }
+            });
+            document.addEventListener('mouseup', () => {
+                if (isDragging) {
+                    isDragging = false;
+                    saveEvents();
+                }
+            });
+        }
+        // Update events list
+        function updateEventsList() {
+            const listContainer = document.getElementById('events-list');
+            listContainer.innerHTML = '';
+            // Sort events by start time
+            const sortedEvents = [...events].sort((a, b) => a.start - b.start);
+            sortedEvents.forEach(event => {
+                const eventElement = document.createElement('div');
+                eventElement.className = 'flex items-start p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer';
+                eventElement.style.borderLeft = `4px solid ${document.documentElement.classList.contains('dark')
+                    ? categories[event.category].darkColor
+                    : categories[event.category].color}`;
+                eventElement.setAttribute('data-event-id', event.id);
+                eventElement.innerHTML = `
+                    <div class="flex-1">
+                        <div class="font-medium">${event.label}</div>
+                        <div class="text-sm text-gray-500 dark:text-gray-400">${decimalToTime(event.start)} - ${decimalToTime(event.end)}</div>
+                    </div>
+                    <div class="text-xs px-2 py-1 rounded-full" style="background-color: ${document.documentElement.classList.contains('dark')
+                        ? categories[event.category].darkColor
+                        : categories[event.category].color}; color: white;">
+                        ${categories[event.category].name}
+                    </div>
+                `;
+                eventElement.addEventListener('click', () => {
+                    openEditModal(event.id);
+                });
+                listContainer.appendChild(eventElement);
+            });
+        }
+        // Modal functions
+        function openAddModal() {
+            document.getElementById('modal-title').textContent = 'Add New Event';
+            document.getElementById('event-id').value = '';
+            document.getElementById('event-name').value = '';
+            document.getElementById('start-time').value = '08:00';
+            document.getElementById('end-time').value = '09:00';
+            document.getElementById('event-category').value = 'work';
+            document.getElementById('delete-event').classList.add('hidden');
+            document.getElementById('event-modal').classList.remove('hidden');
+            document.getElementById('event-name').focus();
+        }
+        function openEditModal(eventId) {
+            const event = events.find(e => e.id === eventId);
+            if (!event) return;
+            document.getElementById('modal-title').textContent = 'Edit Event';
+            document.getElementById('event-id').value = event.id;
+            document.getElementById('event-name').value = event.label;
+            document.getElementById('start-time').value = decimalToTime(event.start);
+            document.getElementById('end-time').value = decimalToTime(event.end);
+            document.getElementById('event-category').value = event.category;
+            document.getElementById('delete-event').classList.remove('hidden');
+            document.getElementById('event-modal').classList.remove('hidden');
+            document.getElementById('event-name').focus();
+        }
+        function closeModal() {
+            document.getElementById('event-modal').classList.add('hidden');
+        }
+        // Event handlers
+        document.getElementById('add-event').addEventListener('click', openAddModal);
+        document.getElementById('add-center').addEventListener('click', openAddModal);
+        document.getElementById('close-modal').addEventListener('click', closeModal);
+        document.getElementById('cancel-event').addEventListener('click', closeModal);
+        document.getElementById('delete-event').addEventListener('click', function() {
+            const eventId = document.getElementById('event-id').value;
+            events = events.filter(e => e.id !== eventId);
+            saveEvents();
+            drawSegments();
+            closeModal();
+        });
+        document.getElementById('event-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const eventId = document.getElementById('event-id').value;
+            const label = document.getElementById('event-name').value.trim();
+            const startTime = document.getElementById('start-time').value;
+            const endTime = document.getElementById('end-time').value;
+            const category = document.getElementById('event-category').value;
+            if (!label) {
+                Swal.fire('Error', 'Please enter an event name', 'error');
+                return;
+            }
+            const start = timeToDecimal(startTime);
+            const end = timeToDecimal(endTime);
+            if (start >= end) {
+                Swal.fire('Error', 'End time must be after start time', 'error');
+                return;
+            }
+            if (eventId) {
+                // Update existing event
+                const eventIndex = events.findIndex(e => e.id === eventId);
+                if (eventIndex !== -1) {
+                    events[eventIndex] = {
+                        id: eventId,
+                        label,
+                        start,
+                        end,
+                        category
+                    };
+                }
+            } else {
+                // Add new event
+                events.push({
+                    id: generateId(),
+                    label,
+                    start,
+                    end,
+                    category
+                });
+            }
+            saveEvents();
+            drawSegments();
+            closeModal();
+        });
+        // Click on empty space to add event
+        document.getElementById('segments-container').addEventListener('click', function(e) {
+            if (e.target === this) {
+                openAddModal();
+            }
+        });
+        // Initialize
+        drawTimeline();
+        drawSegments();
+    </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=triton7777/calender" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>