Orbit

Prompt

Build a complete, polished web app called **Orbit** — a visual personal planning tool where goals are represented as solar systems and tasks are represented as planets orbiting them. I want this to feel like a real, distinctive product, not a generic dashboard. You are responsible for BOTH the product design and implementation. Make strong design decisions yourself. Do not ask me follow-up questions. ## Core concept The main screen is an interactive space/canvas. Each major goal is a large central object, for example: - University - Fitness - French - Personal Projects Tasks belonging to a goal appear as smaller objects orbiting around it. Examples: University → Finish Analysis problem set → Review lecture 8 → Study linear algebra Fitness → Bench session → Squats → Mobility The visual representation should make it immediately obvious: - what matters most - what is urgent - what is completed - which goal is overloaded - what I should probably work on next Do not literally make everything tiny unreadable planets. It must remain a highly usable productivity app. ## Interaction I should be able to: - create goals - create tasks - edit them - delete them - mark tasks complete - assign priority - assign due dates - drag tasks between goals - reorder things naturally - click a goal to focus on its system - zoom back out to see everything - search tasks - filter tasks - undo important actions Dragging should feel excellent. Interactions should have immediate visual feedback. ## Task creation Adding a task should be extremely fast. There should be a prominent quick-add interaction. For example, entering: Study Analysis tomorrow !high #university could intelligently interpret: Title: Study Analysis Due: tomorrow Priority: high Goal/tag: university A simpler manual editor should also exist. You do not need full NLP. Implement useful lightweight parsing yourself. ## Focus mode Double-clicking or otherwise focusing a goal should transition into a dedicated view for that goal. Show: - its tasks - completion progress - overdue work - upcoming work - completed tasks - useful summary information Allow returning smoothly to the full universe. ## Today mode Create a useful "Today" view. It should intelligently surface: - overdue tasks - tasks due today - high-priority tasks - a small number of relevant upcoming tasks Do NOT simply dump every task into a list. The page should help the user decide what to do. ## Visual system Make the application visually memorable. Design direction: dark space-inspired interface deep backgrounds subtle stars / depth beautiful typography restrained glow smooth motion high contrast excellent spacing premium feel Avoid: - cheesy galaxy stock images - excessive neon - generic purple gradients everywhere - giant glassmorphism cards - clutter - tiny text - excessive animations - generic SaaS dashboard design The "space" concept should influence the interaction model, not destroy usability. Think of something that could plausibly win a design showcase while still being practical every day. ## Motion Use polished motion for: - entering a goal - creating tasks - completing tasks - dragging - changing views - hover feedback - focus transitions Motion should feel physical and intentional. Respect prefers-reduced-motion. ## Completion interaction Make completing a task satisfying. Do something more interesting than simply adding a line-through. For example, the object could collapse, fade into the goal, leave an orbit, or perform another subtle spatial interaction. Do not make it slow or annoying. ## Command palette Add a command palette opened with: Ctrl/Cmd + K Useful actions might include: - Add task - Add goal - Search - Open Today - Focus a goal - Toggle completed tasks - Export data - Reset demo ## Keyboard support Implement useful shortcuts. Ctrl/Cmd + K → command palette N → new task G → new goal / → search Escape → close / go back Avoid triggering shortcuts while typing into inputs. ## Data Include realistic demo content when the app first opens so the experience immediately looks complete. Persist user changes locally. Use localStorage or IndexedDB. Include: - export to JSON - import from JSON - reset demo data ## Responsive behavior It must work properly on: - 1920px desktop - normal laptop - tablet - phone Do not merely shrink the desktop layout. On mobile, rethink interactions where necessary. Touch targets must be comfortable. Dragging should work with touch if practical. ## Accessibility Include: - keyboard accessibility - sensible focus states - semantic controls - readable contrast - reduced-motion support - accessible labels ## Engineering constraints Build the entire project as ONE self-contained `index.html`. Use: - HTML - CSS - vanilla JavaScript Do not require: - npm - build tools - frameworks - backend - API keys It should work by opening index.html directly in a browser. You may use inline SVG and CSS-generated graphics. Avoid external assets where possible. Do not rely on an internet connection. ## Quality bar This is not a prototype. Make it feel finished. Pay attention to: - typography - spacing - hierarchy - empty states - hover states - focus states - transitions - error handling - responsive behavior - interaction feedback - visual consistency Do not leave buttons that do nothing. Do not implement fake UI. If a feature appears in the interface, make it work. Avoid excessive explanatory text. The interface itself should communicate how it works. ## Important Do not give me a plan first. Do not explain what you are going to build. Do not ask questions. Build the complete application immediately. Return the finished `index.html`. The goal is to see how well you can independently turn a broad product idea into a beautiful, intuitive, functional application.

A system prompt was added to support web rendering