System-1 Mac Inspired WebOS

Now in this 20mins i made the opening and closing modal for a desk top icon. The UI is from SYSTEM CSS so it is easy to use as i need to copy the code from there and by writing a function boom now you can open and close functionality. The closing function is pretty simple as it finds the nearest parent with the class named window and will change the display to none. For opening it is where i used 200% of my brain i named desk top icons id as system-floder-icons so when double clicked i will take the id and remove the -icons from the id and i will end up with system-floder so with this id i can nvaigate another id same exact id which is the window itself so i can change it style from none to block some big brain time hehehe.

So i came to know about hack club rules about making a webOS and changed my changed my previous drag and drop code to the new hack club code so my net ai usage becomes 0% yayayay. And my friend who is also doing webOS gave a code i pasted it as a good boy it is just a animation that will make the website looks similar to cathode ray tube TV kinda brings back the retro vibe. Now i am trying to add a working folder structure init.

So in this devlog i have did two jobs one it to add a border-shadow since sometimes the text overlaps to the navbar and made the destop icons draggable which is the worst part i just iterate over and over until it looks good i have used claude for it tho. So basically when i click the icons i trigger the pointerdown so with that i know where is my icon relative to the cursor then i can move while moving i update the x and y pos to know where the user might drop it and i use grid system to put in place and that is it.

Added a current time in the top right corner or at the navbar which i had used a js function to extract current date into time and set an setinterval to update every 1 sec and added a trash can right now it is in center but will make a grid thing to store it. And i took so much try to finally get the macos font cause i am using tailwind css which is overriding the font in index.css so i said fuck it and i add the font to the body using the class in html itself no problem anymore,

I have created a navbar with tailwind CSS and macOS system 1 CSS. The macOS CSS has inbuilt functionality so i don’t need to reinvent the wheel instead i can call the function whenever i want so it behaves as intended without much hassle. Now need to design a basic homepage like placing icons and ability to move in a grid snap methd.