My very own WebOS

Week 5: Tearing down the CSS and giving RetroOS a real look

After the last submission, reviewer feedback said basically this: the JS and the 17 apps were solid, but the styling read like a generic dark-mode template. Soft glows, rounded glass cards, the kind of thing you get when you ask AI for a modern clean OS UI. Nothing you’d actually want to click.

So this week I tore out the template styling and rebuilt the look by hand, and reworked a big chunk of the backend myself.

The theme I Redesigned:

• Real 3D bevels instead of glow shadows. Windows, the start menu, taskbar tabs, calculator keys, memory cards, and the window controls (_, [], X) all use light-on-top / dark-on-bottom borders so they read as raised. Press one and the borders flip to inset and everything shifts down-right a pixel. Clicking finally feels like pushing a physical key.
• Pinstriped titlebars. Focused windows get a scanline drag-grip across the titlebar; unfocused ones dim way down so you always know what’s in front.
• Dithered wallpaper + pixel selection. The desktop got a retro dot-matrix grid and dashed selection marquees instead of the old rounded-glow look.
• Sunken panels. The clock, File Explorer path bar, and Notepad text area are inset 3D fields, the way a 90s OS treated text boxes.
• Tidied the variables down to one set of tokens so there aren’t six places to hunt for a color.

The back end (partially rebuilt by me): I replaced the clean AI template app structure (arrow-function IIFEs everywhere) with plain var App object definitions across all the apps, including the two new ones from the browser and system properties features. Same logic, much more human code. I also converted the two new apps that were still on the old pattern.

RetroOS is live: https://shritej-koneru.github.io/retroos/

Devlog 4 — The Expansion: New Apps, a Boot Sequence & a Full RedesignWeek 4 was a big one for RetroOS. What started as a 13-app demo has now grown into a 17-app ecosystem, with four new apps, a proper retro boot sequence, a wallpaper picker, and a complete visual redesign that finally makes the OS feel like something uniquely mine.I added File Explorer, with a navigable virtual file system containing folders like Documents, Pictures, Games, and System. You can double-click through folders, open text files in Notepad, and view images directly. I also built a Music Player that generates five retro chiptune tracks live using the Web Audio API, so there are no audio files or network dependencies. On the fun side, there’s now Memory, a 12-pair card-matching game with a move counter and win screen, and Tic-Tac-Toe, where you play against a minimax AI that’s surprisingly difficult to beat. All four apps follow the same open() contract as the original 13, which meant I could keep extending the ecosystem without touching the window manager.I also brought back the original BIOS-style boot sequence. It now types out RETRO BIOS v1.0, runs a memory test, detects hardware like the RetroChip CPU and PixelVGA GPU, loads system components, and fills a progress bar to 100% before revealing the desktop. The important part was making the boot sequence non-gating: the OS initializes underneath it, while the boot screen has a hard fallback timer to remove itself. That gives RetroOS the nostalgic boot experience without bringing back the blank-page bug I had struggled with earlier.There were a few smaller quality improvements too. Icon positions are no longer persisted to localStorage, so dragging still works during a session, but refreshing the page restores the default grid. Settings also gained a wallpaper picker with six options—Classic, Forest, Sunset, Ocean, Matrix, and Midnight—which are persisted alongside the rest of the theme.The biggest change, though, was the visual redesign. I wanted RetroOS to feel unmistakably mine instead of looking like another green-on-black retro template, so I introduced a new “Velvet Orchid” theme built around muted shades of Velvet Orchid, Dusty Grape, Steel Blue, Ash Grey, and Sand Dune. I added the VT323 pixel font alongside Press Start 2P, redesigned the wallpapers and UI gradients, and introduced clearer active-window focus states. The focused window now gets a brighter border and title while background windows dim, and minimizing a window correctly hands focus to the next one. I even carried the new aesthetic into the worldbuilding details—the terminal’s color command now supports the new palette, neofetch reports Theme: Velvet Orchid & Steel Blue, and Paint has been given a matching palette.Finally, I spent time on stability. I removed the service worker that was causing issues in some privacy-focused browsers and disabled the full-screen CRT flicker animation that could trigger compositing problems in Firefox-based browsers. All 17 apps are now rendering cleanly across Chromium, Firefox, and WebKit with zero errors.RetroOS is now live: https://shritej-koneru.github.io/retroos/17 apps, a proper boot sequence, a completely new visual identity—and still no build tools, no frameworks, and no password. RetroOS is starting to feel less like a demo and more like a real little operating system.

RetroOS Dev Log #3 — Game Fixes & ImprovementsAll 7 games got a round of bug fixes, a tutorial system, and event listener cleanup.Event Listener Leaks FixedEvery game was leaking keydown and setInterval handlers when the window closed. If you opened Snake, played a bit, closed it, then opened it again — you’d have two game loops running simultaneously. Fixed by adding proper destroy() methods to every game that clean up intervals and remove keyboard listeners on window close.Tutorial SystemAdded a first-time “HOW TO PLAY” overlay for each game. Shows control instructions when you open a game for the first time, with a “GOT IT!” button. Uses localStorage to remember which tutorials you’ve seen, so they only appear once. Fixed a bug where the GOT IT button was replacing the entire overlay innerHTML instead of appending — the tutorial layer now sits on top of the game overlay without destroying it.Game-Specific FixesTetris — Fixed a speed scaling bug caused by a const closure in the interval callback. Level progression now correctly adjusts speed (50ms at max, scaling down from 500ms). Hard drop scoring fixed.Pong — Fixed keyboard controls bleeding between windows. Added focus management so arrow keys don’t scroll the page. Prevented default key behavior during gameplay. AI paddle smoothing adjusted for more natural movement.Snake — Fixed game-over overlay not rendering properly. Cleaned up interval cleanup on close. Speed increase now properly floors at 60ms minimum.Breakout — Fixed ball getting stuck in infinite bounce loops at edge cases. Brick collision now uses minimum overlap detection for correct directional bounce. Side panel layout fixed for smaller screens.Minesweeper — Fixed first-click mine placement to guarantee a safe 3x3 starting area. Win detection now correctly counts unrevealed cells vs mine count.2048 — Fixed tile merge logic preventing double-merges in a single move. Win overlay now shows without blocking continued play.Flappy Bird — Fixed pipe spawning overlap on fast refresh. Added state machine to prevent movement before first flap. Touch event support added for mobile.

RetroOS Dev Log #2 — The AppsAfter getting the core OS shell running, it was time to fill it with actual software. Here’s everything that went in.Music PlayerAdded a background music system with 3 chiptune tracks (all CC0 licensed). Auto-loops, auto-advances to the next track on end, and gracefully skips broken files. Volume sits at 0.3 so it doesn’t fight with the sound effects. Toggleable from Settings or via Ctrl+M.TerminalBuilt a full command-line emulator with 11 commands. Supports command history (arrow keys), Ctrl+L to clear, and auto-scroll. Commands include the basics (help, clear, echo, date, whoami) plus some fun ones:ls / cat — Virtual filesystem with 4 readable filescolor — Change terminal text color (8 options)calc — Evaluate math expressions inlinefortune — Random quote from a pool of 8neofetch — ASCII art logo with system info (resolution, uptime since boot)shutdown — Triggers the OS shutdown sequenceNotepadSimple text editor with word wrap toggle, tab key support (inserts 2 spaces), and a statusbar showing character/line count. Every keystroke plays a typing sound for that retro feel.PaintPixel art canvas with a 24-color palette and 3 brush sizes. Drawing uses line interpolation so fast strokes don’t leave gaps. Includes eraser, fill, clear, and save as PNG. Touch support for tablets. Everything renders pixel-perfect with imageSmoothingEnabled = false.CalculatorStandard calculator with chained operations. Color-coded buttons — green for functions, blue for operators, purple for equals. Handles decimals, negation, percent, and division by zero gracefully.SettingsThe theme engine. 6 CRT color themes (Green, Amber, Blue, Cyan, Red, White) that dynamically restyle the entire OS. 5 toggle switches for scanlines, flicker, curvature, glow, and music. Music section shows the current track with a next button. All settings persist to localStorage.7 GamesEvery game renders on , handles keyboard input, and cleans up properly when the window closes.Snake — Classic grid-based movement. Speed ramps up as you eat. Head drawn with eyes.Tetris — Full implementation with rotation, wall-kicks, ghost piece, next-piece preview, scoring (100/300/500/800 per lines cleared × level), and level progression.Pong — Ball physics with increasing speed per hit. 2-player (W/S vs ↑/↓) or vs AI with smooth interpolation chasing. First to 7 wins.Breakout — 6 rows of colored bricks, mouse/keyboard/touch paddle, side panel with lives and score. Brick collision uses minimum overlap detection for correct bounce direction.Minesweeper — 12×12 grid with 20 mines. Safe first click guaranteed. Recursive flood-fill on zero cells. Right-click to flag.2048 — Slide and merge tiles. Handles all 4 directions via transpose/reverse tricks. Win at 2048 but game continues. Dynamic font scaling for large numbers.Flappy Bird — Gravity simulation with pipe scrolling. Space/click/tap to flap. Yellow bird with beak and eye. State machine prevents movement before first flap.App-Specific StylingAdded comprehensive CSS for all 12 apps — terminal output colors, notepad toolbar, paint swatches, game canvas overlays, calculator grid with color-coded buttons, custom settings toggles, clock widget positioning, and breakout’s side panel layout.What’s in: 12 apps, 7 games, 1 music player, full theme system Stack: Still zero dependencies. All vanilla.

RetroOS Dev Log #1 — The First HourBuilt a retro-themed OS that runs in the browser. In one hour, got the core shell running: CRT monitor effects (scanlines, flicker, phosphor glow), a BIOS boot sequence, draggable/resizable windows with edge-snapping, 4 virtual desktops, taskbar with start menu, keyboard shortcuts, and localStorage persistence. All vanilla HTML/CSS/JS — zero dependencies.The full version ships with 12 apps (terminal, notepad, paint, calculator, 7 games), but the first hour was all about making the OS feel real. Every window opens with a sound effect, the boot screen counts up memory like it’s 1995, and the whole thing glows green like a CRT monitor. More apps incoming.Stack: Vanilla JS, CSS3, Web Audio API, Canvas Repo: https://github.com/shritej-koneru/WebOS