Devlog #1
Make the system boot. Not instantly appear. Actually boot.
(P.S. it took me 1 hour and 14 minutes to write this 💀)
I used VS Code because it just makes life easier—autocomplete, structure, everything.
Created a folder called:
StardustOS
Inside it:

• index.html
• style.css
• script.js
• assets/icons/pixel-star.svg
  Everything runs inside one element:
  <div id="root"></div>
  Instead of switching pages, I just replace the content inside root using JavaScript.
  So technically…
  The entire OS is just one div having identity crisis.
• Connected Google Fonts (VT323) just in case I want retro vibes later
• Linked CSS and JS normally
• Nothing fancy—just a clean entry point
  I wanted a MacBook-like UI
• Sleek
• Minimal
• Soft
• Not loud

Key Design Choices:

• Black base (#000) → clean boot feel
• White + grey tones → UI structure
• Blur + transparency → glass effect
• Accent colors:
• Blue (#4ea1ff) → highlights / identity
• Orange (#ff9f43) → alias accent

Fonts:

• System fonts (-apple-system, Segoe UI, etc.) for that native feel
  Boot Screen
  First thing you see:
• Black screen
• A space emoji 🌌 as the “logo”
• A thin loading bar

What’s actually happening:

• Progress increases every ~80ms
• Width of bar updates
• At 100% → small delay → login screen
  Fake loading? Yes.
  Feels real? Also yes.

Login System
First time:

• Create password
• Confirm password
• Stored using localStorage
  Returning user:
• Shows login screen (with my name for now)
• Checks password
• Correct then continue
• Wrong then error message

Background & UI Feel

• Login screen uses a space wallpaper
• Overlay blur + dark tint → makes everything soft
• Avatar uses a blue-purple gradient
• Inputs are translucent with blur
  Basically:
  trying to make it look expensive without actually being expensive
  Intro Screen
  After login:
• Dark grey background (#1c1c1e)
• Floating pixel star (from assets)
• Glow effect + animation
• Smooth fade-in
  Text introduces:
• Me (Yuvraj)
• My alias (Singhularity)
  Then a button:
  Continue
  And when you click it?

Continue clicked! (Desktop not built yet and ps this is just a placeholder i am gonna remove this intro screen when my desktop is built)

That’s it.
No fake desktop yet.

What I Learned Toda

• How to simulate screens using one root container
• How to manage flow: boot, login, intro
• How localStorage can act like memory
• How small UI details change the whole feel

The Funny Bug (aka “I Broke My Own OS”)
At one point… nothing worked.Boot screen? Gone. Login? Gone. Just a blank screen staring back at me like I offended it.

Turns out… I wrote:

const root = document.getElementByID("root");

Notice it?
getElementByID
Capital D
Yeah… that one letter.
So JavaScript basically said:
“I have no idea what you’re talking about.”

And since root became null, the next line:

root.innerHTML = ...

Boom. Entire OS refused to exist. For a solid 5 minutes I thought I broke everything. Then I fixed the “D”… and suddenly my OS decided to come back to life like nothing happened.