JavaScript Timeline Editor for LED Display (Drag-and-Drop Cards) Project Overview I am building a small LED display system (64×32 pixels) and need a simple browser-based timeline editor built in JavaScript. The goal is to create a drag-and-drop timeline interface where users can add different types of “cards,” rearrange them, edit their properties, and export the result as JSON. This is a front-end only project. No database or backend logic is required. The output will be JSON that my existing Flask backend will process. Core Requirements Timeline Editor The interface should include: A card palette with buttons to add: Color card Image card Text card Transition card A timeline area where: Cards appear in sequence Cards can be dragged to reorder Cards can be deleted Clicking a card opens its properties A properties panel for editing the selected card. An Export button that outputs the timeline as JSON. Card Types and Properties 1) Color Card Background color picker Duration (milliseconds) 2) Image Card Image upload or image reference field Auto-resize later (handled by backend, not required in this task) Fit mode: Contain Cover Background color for letterboxing Duration (milliseconds) 3) Text Card Up to 4 lines of text Max 25 characters per line Font size selector: Small Medium Large Full Text color Duration (milliseconds) No scrolling or animation required for text in this phase. 4) Transition Card This represents a transition between two cards. Properties: Transition type: Fade Scroll up Duration (milliseconds) Smoothness (step count) No visual rendering of the transition is required in this phase, only the data model. Required Functionality The user must be able to: Add cards to the timeline Reorder cards using drag-and-drop Delete cards Click a card to edit its properties Export the timeline to JSON JSON Output Format Exact structure is flexible, but should resemble: Json Copy code { "width": 64, "height": 32, "loop": true, "items": [ { "type": "color", "bgColor": "#000000", "durationMs": 10000 }, { "type": "text", "lines": ["HELLO", "WORLD"], "font": "medium", "color": "#ffffff", "durationMs": 8000 }, { "type": "transition", "transition": "fade", "durationMs": 1000, "steps": 10 } ] } You may propose a slightly different structure if it is cleaner. Technical Requirements Plain JavaScript, or a lightweight framework (Vue, React, or similar) Must run in a browser No backend required Deliverable should be: A single HTML page Associated JS and CSS files Code should be clean, readable, and commented Deliverables Working timeline editor with: Drag-and-drop cards Card editing panel JSON export Source code Short README with: How to open and run it How to integrate into an existing site Acceptance Criteria Cards can be added, reordered, edited, and deleted. JSON export reflects the exact timeline order and properties. Works in a modern browser (Chrome, Edge, Firefox). No console errors during normal use. Nice-to-Have (Optional, not required) If easy to include: Live preview of current card Frame count or duration summary Project Type Small, self-contained front-end tool Fixed price preferred Estimated size: small to medium task for an experienced JS developer