@lunois_vee

heyy people!!
i’m working on making a web piano. I named it Piano Sonic (i really love the ring this name has).
So I spent a while searching for inspiration on the internet, watching a few YouTube tutorials, exploring existing online piano websites.
Then I started making the basic layout for my own. I want the design to be classy and minimalist, so I went for a butter yellow shade for the background. I added a volume slider and a toggle button to show keys.

One thing I realllyyy reallly LOVE about what I’ve made till yet is the show keys toggle button. I really love interactive it looks when i click it, the circle turns white and when its off, its grey.

That’s it for now. Let’s get back to work.
See ya!

All done! Fixed a bug wherein the user was able to play on the same grid even after X or 0 won.

game win logic added and reset button functional!

Interactive game play enabled, so now we can click on any grid and it places either an X or a 0 depending on the turn.

Next, I will be working on the winning logic.

Worked on the basic overall layout and structure.

• 3x3 grid with initial placeholders
• hover styling - highlights the grid and cursor turns to pointer when you hover over a grid
• UI elements, a heading and an initial reset button to be precise

Spent 2.5 hours on learning Web Development and started working on my Tic Tac Toe game, and completed the navigation bar.

Added all the icons towards the left all the page. (Only the first icon, i.e. About, is functional as of now. Also added a live clock in the top right of the page.

Added the About button. Tried to make it interactive by making it slightly lift up when you hover over it, and when you click the button, the About Pop Up appears.

P.S.- The challenge I was talking about in the previous devlog did present itself. So the various icons i designed on canva were in the for ofm squares with their corners rounded and their background had been set to a certain transparency. When i was downloading them, the corners were white and the transparency was gone. I finally had to place the icons in the wallpaper in Canva and then export them :(
it took quite a while, but problem solved!

Restarting LunOS from Scratch!!
I wasn’t really satisfied with the first version I made - so I deleted that entire code. Now, I’m starting from Scratch to build a whimsical webOS that feels personal.

Spent some time designing three choices for the wallpaper, with the blue one being the default wallpaper.
Also designed the icons to be displayed.
Although I can sense a challenge with this coming up - will post the next devlog once i solve that challenge. Stay tuned to know what the challenge was and how I solved it!

woohooo draggable windows finally added!
LunOS is officially fully live, cozy, and interactive. Go check it out and let me know your thoughts!
I’d be more than happy to implement your suggestions 💌✨

Added a live clock widget in LunOS!
I styled the clock widget with a cozy translucent background, added a soft blur effect and pixel-inspired typography to match and add onto the overall cozy vibes.

Next challenge would making all the widgets draggable across the screen 🚀✨

Made my first ever OS - LunOS
The inspiration was to make a cute, whimsical, cozy space. It’s elementary as of now, and I will be adding more features soon. Let me know your thoughts!!