I added a simple window that will be my bio, made of the main window, the header, and a close button.
I added functionality to drag the window, and I did it without the HC guide or any other! I reinvented it for myself, which is probably why it’s so janky, but still cool.
Also made it so I can close the window with the X button, but haven’t made the icon to reopen it work yet.
So I mostly just did aesthetics on this one.
First, I added an info icon, which will serve as a bio app for me
Then, what took up most if this time was making a fade animation. Now, when you click on the profile in the login page, a spinner appears, then the desktop slowly fades in from a black image. The reason this took so long is because I had to go through so many ways of doing it. At first I tried to set the opacity of the entire object, which made the desktop canvas and top bar fade in, but not the background picture. Then I tried to wrap the into a div and fade that div, but that didn’t work, then I tried to wrap everything INSIDE of into a div, which also didn’t work, but after a while (including spending like 15 minutes debugging because I misspelled “getElementById” as “getElementsById”), I made a div that ACTUALLY is overlayed on top of everything, made the JS opacity fading, and disabled interaction. Also, I made it so that if anything on the desktop is clicked while the fading is still happening, then it just snaps to 0 opacity so it’s not too obstructive.
Next, I basically copy-pasted some code to make a loader animation on the login page, then wrote the JS to make it appear when login is clicked.
This was my first use of AI so far: Claude telling me that opacity can’t be changed for an animation because CSS keeps it opaque.
That’s it for now, I’m actually gonna get started on functionality now :D
I’ve learned from Flavortown that I should post devlogs more often, so here is another one.
I added a royalty-free calculator icon to the canvas with some transparency, though it doesn’t do anything yet.
I also made it show the current Date (and update when the clock rolls over to the next day at midnight)
Alright, first devlog.
I’m not using the WebOS guide at all, since that’s not the best way to learn for ME.
For now, I’ve added a simple login page where you just click on a profile. I’m planning on doing a fade out then fade in to the desktop. On the desktop, I have a top bar div set up, along with a clock (padded with 0s, if any of the values are < 10). I’ve also made the entire desktop into a canvas, which will allow me to add icons and check if they have been clicked on, without fumbling around with elements. That’s it so far.
So far, I’ve managed to do this all without AI help, only stackoverflow, w3schools, code I made in the past, etc; and I hope I can keep it that way.