@mirabror_numonov

Devlog #1 – Building a Browser-Based OS

Today I continued developing WebOS, a browser-based operating system designed to recreate a desktop experience entirely within a web browser. My goal was to make the system feel as close as possible to a real operating system while remaining lightweight and interactive.

One of the biggest improvements was expanding the desktop environment. The window manager now supports draggable and resizable windows, allowing users to interact with applications naturally. I also implemented minimize, maximize, and close controls, along with proper window focus management so active applications always stay on top.

The application ecosystem grew significantly. WebOS now includes a Files app for navigating a virtual file system, a Browser with multiple built-in pages, a Text Editor for creating and saving documents, a Terminal with commands such as ls, pwd, date, whoami, neofetch, echo, and clear, a Calculator, and a Settings application. Integrating all of these tools into a unified desktop environment was one of the most challenging and rewarding parts of development.

To improve usability, I added a taskbar with application switching, a live clock, a Start menu, and toast notifications. These features make the operating system feel more polished and responsive. Managing multiple windows simultaneously required careful handling of focus states, window layering, and user interactions.

I also added a fun easter egg to the Terminal. Users can type the command nevergiveup, which launches a fullscreen Rick Astley video directly inside WebOS. The video opens in an overlay and can be closed using a dedicated button. Small details like this help make the project more enjoyable and give users unexpected features to discover while exploring the system.

By the end of the session, WebOS had evolved into a fully interactive browser-based desktop environment capable of multitasking across multiple applications. Future plans include expanding the virtual file system, adding more applications, improving performance, and introducing additional operating-system-inspired features.

Polished the UI, fixed window focus and minimize/maximize behavior. Added a secret terminal easter egg (nevergiveup) that rickrolls you. Deployed to GitHub Pages and wrote the README.

Overall there have been several changes on WebOS Tarnished Edition

Further changes had been added:

1. Ability to change wallpaper
2. User can upload their own wallpaper
3. Livewallpaper is available
4. Updated rune system
5. Stamina bar for user (after 4 hours of using the OS , system notifies about stamina running out, it was set 10 second in order to check the function faster)
6. Draggable icons

DevLog — Tarnished Edition Launch
What Changed
Completely redesigned WebOS with an Elden Ring aesthetic. Swapped out the cosmic purple gradient for a medieval gold and dark brown color scheme (#d4af37 primary, #8b4513 accents). Updated every component - window borders now have that aged parchment feel, the taskbar has a weathered gradient, and the entire palette conveys “cursed browser OS in the Lands Between” .
New Status App
Built a fully functional character sheet that displays:

Vigor / Mind / Endurance - fictional stats with progress bars
Runes Collected - live counter tracking user interactions
System Uptime - real elapsed time since OS boot
Windows Open - dynamically counts active app windows

This is the killer feature that makes Tarnished Edition unique. It turns a browser OS into a game-like experience where users can track their “progress” through the system.
Rune Economy
Implemented a rune counter that increments throughout the session:

+10 runes when opening an app
+3 runes per terminal command executed
+5 runes when opening a file
+1 rune per calculator press
+8 runes when saving in the editor
+50 bonus runes when typing nevergiveup

The counter appears in the taskbar (◊ symbol) and feeds into the Status app’s “Runes Collected” display.
Themed Apps
Renamed all apps to match Elden Ring lore:

Files -> Archive
Browser -> Mirror (grace sites instead of web pages)
Text Editor -> Quill
Terminal -> Incant
Calculator -> Compute
Settings -> Status (replaced with the new character sheet)

Three new apps + real browser

Anthem (music player) - Wanted the OS to feel alive when you’re just sitting on the desktop. Added a music player that generates ambient Elden Ring-style audio entirely in the browser — no mp3 files, no external requests. Four tracks built from layered oscillators: Erdtree’s Glow, Limgrave at Dawn, Night of the Black Knife, Grace’s Embrace. The rotating rune ring animation in the player UI was a nice touch — it spins while music plays and the note pulses in time.

Codex (task manager) - Needed something more intentional than the Quill text editor. Codex is a minimal task list styled as a lore journal — you “inscribe edicts” and “fulfill” them. Completing a task awards runes, which feeds into the existing rune system. Tasks persist in localStorage so they survive page reloads. Pending tasks sort to the top automatically; there’s a one-click “expunge fulfilled” to clear done items.

Seer (camera) - Straightforward getUserMedia camera app. The main thing I had to be careful about was cleaning up the stream on window close — browsers keep the camera indicator light on until every track is explicitly stopped. Added three filters (Natural, Ashen grayscale, Golden Age sepia) that apply both to the live preview and get baked into the canvas snapshot on capture.

Mirror upgrade - The original Mirror app only served static grace:// internal pages. Updated it to load real URLs in a sandboxed iframe, with auto https:// prepending for bare domains. The tricky part was that most big sites (Google, YouTube, Reddit) set X-Frame-Options headers that silently produce a blank frame — which looks broken. Fixed by maintaining a known-blocked list: those sites immediately show a styled fallback with a direct external link instead of loading an empty iframe.