@shivar07

🚀 Devlog #9: Final Feature Showcase & Deployment

Here is the complete summary of all features built into WebOS:

• Windows 11 Boot Animation & Spinning Ring Sequence
• Terminal Handshake CLI with Authentication & startx Command
• Frosted Glass Lock Screen & Desktop Auth Handshake
• Dual-Pane Start Menu with Pinned Apps & Device Link Panel
• Taskbar Dock with Active App Indicators & System Tray
• Windows 11 Quick Settings Flyout (WiFi, Bluetooth, Brightness, Volume)
• Interactive Calendar & Digital Clock Flyout Widget
• Glassmorphic Calculator with Click Audio Feedback
• Hackatime Analytics Console with Live Coding Hours & Language Charts
• Hackatime Global Leaderboards with Real-Time Ranking & Country Filtering
• Netlify Serverless Proxy Functions with Fast Auto-Redirect Scraping
• Custom Music Player with 14 Tracks, Playlists & Seek Bar
• Simulated Chrome Browser with Wikipedia Integration
• Atmospheric Weather Forecast Telemetry HUD
• Draggable Desktop Grid Icons with Saved Position Persistence
• Achievements Gallery Hub & Image Viewer
• J.A.R.V.I.S. Sci-Fi Audio Synthesizer & Interface Sound Effects

Live Website -> https://jarvis-hud-os.netlify.app/
Github Repo Open Source for u guys -> https://github.com/shivar07/J.A.R.V.I.S.-OS

Let me know any feature to add will do it ..

🌐 Devlog #8: Chrome Browser & Expanded Music Library

Today I added a built-in Chrome Browser window complete with an address bar, navigation controls, and an embedded Wikipedia search and article reader interface. I also expanded the music player library with additional music tracks, custom album art thumbnails, and playlist queue controls.

🖥️ Devlog #7: Dual-Pane Start Menu & Calculator

I built a dual-pane Windows 11 style Start Menu. The left pane holds pinned apps and recommended files, while the right pane has a mobile link settings configuration for Android and iOS devices. I also built a glassmorphic floating calculator with click sounds and clear operations, and updated the taskbar icons to show an active neon dot whenever an application window is open.

📊 Devlog #6: Hackatime Stats & Leaderboards

I wanted to show my actual coding metrics, so today I connected the Hack Club Hackatime API to the desktop. I had to build a simple proxy to fetch the public JSON data so it wouldn’t get blocked by browser CORS restrictions. Once that was done, I designed charts showing my top languages and coding hours, and built a global leaderboard that automatically finds my profile and highlights it in a bright hot-pink glow at Rank #3.

I wanted a quick way to browse different days. I added ‘PREV SOL’ and ‘NEXT SOL’ chevron buttons and set the date boundary rules—you can’t step earlier than NASA’s first post (June 16, 1995) or past today’s date. I also hooked up browser keydown listeners so you can page through days using the Left and Right Arrow keys. After that, I built an ‘Auto-Scan’ mode that cycles random space pictures every 15 seconds. If you manually select a date, the scanner pauses so it doesn’t interrupt your reading.

🔐🎶 Devlog #5: Lock Screen, Taskbar & Music Player

Today I worked on lock screens and music! I built a frosted glass lock screen that transitions into the desktop when you sign in, and designed a taskbar dock at the bottom of the screen. I also built a fully custom music player with play queues, seeker bars, and actual song timing updates. I loaded up 20 actual tracks instead of just chimes, and it plays really nicely.

💻 Devlog #4: Terminal Handshake & Boot CLI

Right after the boot loop finishes, I made it drop into a terminal boot sequence before you can log in. I simulated scrolling text lines that look like drivers checking out and system drivers initializing, and then built a keyboard login prompt. You have to type your username, enter a password, and run a startx command to load the main desktop. It adds a really cool hacker vibe to the project.

🌀 Devlog #3: Boot Sequence & Loading Loop

I wanted the WebOS to wake up with style, so today I built a loading screen that mimics a classic Windows 11 boot sequence. I designed a custom square grid logo and wrote keyframe animations in CSS to handle the spinning dot ring. In JavaScript, I added stage timers so the system boots into the next screen after a few seconds. It actually looks like a real computer booting up now.

While testing various dates, I noticed a big bug: the APOD API doesn’t just return images. On some days, they post YouTube video streams or interactive space maps. Trying to render a video inside an tag broke the site. I wrote a helper function buildMediaHTML(data) to inspect media_type. If it’s a video, it parses the YouTube ID and loads it inside a clean, autoplaying, and muted container.

🎨 Devlog #2: Stark Calendar

Since my time management is pretty non-existent, I decided to build a custom calendar widget today. I wrote some JS logic that dynamically maps dates, and then styled the calendar grid in CSS with a frosted glass look. Hovering over a date triggers a soft cyan neon glow behind it. It looks really clean and calibrated now.

Sometimes the high-resolution images from NASA take a few seconds to load. Having a blank screen during the fetch looked terrible, so I built a glowing, circular radar loader. I wrote a CSS animation that handles both the rotation and a glowing shadow pulse. In main.js, I added a showLoading state that replaces the container HTML during fetching, removing layout shifts.

Today I focused entirely on design. I didn’t want a generic grid list, so I went for a retro-futuristic spaceship HUD (Heads-Up Display) aesthetic. I imported three custom fonts from Google Fonts (Orbitron, Space Grotesk, and Black Ops One) and set up high-contrast neon CSS variables. I also added three layers of parallax stars using pure CSS translation loops to make the background feel like scrolling deep space.

Devlog #1: Base Chassis UI

Today I started working on my web-based desktop called WebOS, inspired by a sci-fi command center or HUD. I spent the day structuring the HTML layout and designing the core CSS grid so everything sits nicely. I replaced the standard background color with a glowing neon repulsor-style wallpaper to make it feel more immersive, and wrote some initial JavaScript setup code to handle showing and hiding windows later.

First day of the project! My goal was simple: connect my code to NASA’s public database and pull the daily picture metadata. I registered for a NASA developer API key, created a local .env file in Vite to store it safely, and wrote a clean JavaScript fetch wrapper. The fetch handles network errors and successfully outputs raw JSON data in the console.