PixelOS

HI!
in this devlog i built the boot animation.set up array of boot steps where each step has a message, a progress percentage, and a delay in ms. a recursive setTimeout function go thro them one by one updating the loading bar and status text. the start logo spins using a CSS keyframe animation. when all steps get finished it hides the boot screen and shows the login page. restart also goes through the full boot sequence!!!

HI!!!
in this devlog i built the boot and login system
the page now starts with a login screen instead of jumping straight to the desktop
built a tryLogin function that checks the credentials and either dismisses the screen or shakes the form and shows an error. the shutdown button triggers a black overlay saying restarting, user has to reload to get back in. restart does the same black screen but after 2.5 seconds it would) automatically brings the login screen back. empty fields also count as valid so you can just hit enter and get in quickly.

HI!!!
in this devlog i rebuilt the window management system
the old code just toggled a class and had no concept of which window was on top.
so, i replaced it with a z-index counter that increments every time a window is focused so the last clicked window is always on top. minimize now hides the window but keeps the taskbar button visible and grayed out. clicking that grayed button restores the window to its exact last position.
the taskbar button also now correctly toggles!!!!

hi!! in this devlog i setup2 the start menu for PixelOS.
so the structure was already there from last session so this was mostly about getting the interactions right. clicking the start button toggles the menu open and closed and adds a glow to the button so you know its active. clicking any app in the menu opens that window and closes the menu at the same time. i also added a listener on the desktop so clicking anywhere outside the menu closes it. the shut down and restart buttons trigger a toast notification saying restarting and shutting down.
I also changed the wallpaper!

Browser window
hi!! in this devlog i built the Browser window for PixelOS!
i set up a pages object where each key is a pixel url and value is a function that returns html.
this made it really easy to add new pages later on… i also built a proper browser history array with a current index ptr so back and forward work correctly. clicking links inside pages navigates too.

hi!!
in this devlog i built the text editor window for PixelOS!
double clicking a txt file now opens it with the content loaded instead of browser alert that i had set before.
i wrote an openEditor function that takes a file object and populates the textarea. also added live word and character counting that updates on every keystroke, and replaced all alerts with a proper toast notification. the save button and new button r also working!

hi!!
in this devlog i built the file explorer window for PixelOS!
i set up a fake file system as a javascript object with folders and files nested inside each other. clicking the desktop icon or taskbar button opens the window, and you can double click folders to go inside them. i also built a navigation history stack so the back button remembers where you came from. dragging the window also works!!!

hi!!
in this devlog i set up the static website for PixelOS! Just put static icons there for now!well, took me alot of time searching for right wallpaper and icons TT and then i also had to remove the backgrounds of icon using canva :”) wallpaper is in png while all icons are in svg format!
for now, i styled the taskbar with the start button, app shortcuts, and a live clock!!!
i will work in increements and set more things in my webos!