My very own WebOS

Added reusable draggable-window behavior to GreenSpace WebOS. All application windows can now be moved using their title bars with mouse, touch, or pen input. Added pointer capture, active-window focus during movement, safe desktop boundaries, visual dragging feedback, and automatic position correction when the browser is resized.

Built a reusable multi-window system for GreenSpace WebOS. Added working Welcome, Notes, and Nature applications that can be opened from desktop icons, closed using window controls, and brought to the front when selected. Added dynamic taskbar buttons for each open application, active-window highlighting, and automatic window stacking using z-index. Also refined the Welcome window layout, improved scrolling behavior, and replaced temporary alerts with an in-desktop status message.

Goal
Create the visual foundation for the WebOS project.
Work completed

Created the initial project structure

Created a custom environmental desktop theme

Added three desktop application icons

Created the first application window

Added a taskbar and Start button

Added a running application indicator

Added internet and sound indicators

Added a live clock and date

Added responsive behavior for smaller screens

Added placeholder feedback for features planned in later hours

Technical decisions
The desktop uses CSS gradients rather than an external wallpaper image. This keeps the project lightweight and prevents the interface from depending on an external image host.
CSS custom properties store shared colors and dimensions. This will make future theme and layout changes easier.
The clock logic is isolated inside an updateClock function. It runs once when the page loads and then updates every second.
The window control buttons are visible but disabled. Their functionality will be introduced gradually rather than placing unfinished behavior into the first version.
Challenges
The main challenge was keeping the desktop usable on both large and small screens. A media query changes the desktop icon arrangement, application window position, and taskbar labels on smaller screens.
Next development hour
The next hour will introduce a reusable window system with multiple application windows and working open and close controls.