Spaces:
Running
Running
-
1.52 kB
initial commit
-
211 Bytes
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
-
29.7 kB
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
-
388 Bytes
initial commit