Web-Based OS Documentation
Welcome to the documentation for the Web-Based OS project! This project simulates a modern desktop operating system within your browser. It provides a desktop environment, taskbar, start menu, windowed applications, widgets, and more, closely emulating the look and feel of Windows/macOS.
Below you'll find in-depth details and explanations for each code file: index.html, style.css, and os.js.
index.html - Main Application Shell
This HTML file acts as the structure and entry point for the Web-Based OS. It defines all major UI containers, overlays, and core desktop zones. The file is tightly coupled with style.css for appearance and os.js for dynamic functionality.
Main Sections
- Screen Brightness Overlay: For simulating software-based screen dimming.
- Loading Overlay: Displays a boot-like animation and progress bar.
- Mobile Overlay: Shows a notice if the user opens the OS on a mobile device.
- Desktop (
#desktop): The main workspace for icons and windows. - Taskbar (
#taskbar): Windows/macOS style bar at the bottom for running apps, Start menu, widgets, and system status. - Start Menu & Context Menu: Hidden until triggered.
- Quick Settings Panel: A slide-out for toggles and sliders (brightness, volume, etc).
- Windows: Windows for App Store, Weather, Stocks, Spotify, etc.
Key Elements
| Element ID | Purpose |
|---|---|
#screen-brightness-overlay |
Simulate brightness adjustments. |
#loading-overlay |
Initial boot animation and progress. |
#desktop |
Background area where icons and windows reside. |
#my-computer-icon |
Default desktop icon, draggable. |
#taskbar |
Main horizontal bar: widgets, running apps, center (start/search), system tray. |
#start-menu |
Popup Start Menu, hidden by default. |
#start-menu-window |
Richer, windowed version of Start Menu. |
#context-menu |
Right-click menu for desktop/folders. |
#calendar-popup |
Calendar popup, shown when clicking the clock. |
#widgets-panel |
Slide-out panel with system widgets. |
#weather-side-window |
Weather widget side window. |
#stocks-side-window |
Customizable theme/wallpaper widget side window. |
#spotify-player-window |
Spotify widget/player. |
#quick-settings-panel |
Quick toggles for system settings. |
Notable UI Features
- SVG Icons: Most graphical elements are vector SVGs for crisp visuals.
- Desktop Experience Only: Mobile users see a friendly overlay and are instructed to use a desktop.
- App Store Window: macOS-style, draggable, resizable, and with sidebar navigation.
- Storage View: Simulated drives with usage bars and upgrade CTA.
- Taskbar: Centered Start, search input, system tray, connection status, quick settings, and taskbar icons for active/minimized apps.
Example: Desktop Markup
<div id="desktop">
<div id="my-computer-icon" class="desktop-icon" draggable="true">
<div class="icon-image">
div>
<div class="icon-label">My Computerdiv>
div>
div>
<div id="my-computer-icon" class="desktop-icon" draggable="true">
<div class="icon-image">
div>
<div class="icon-label">My Computerdiv>
div>
div>
App Store Window Example
<div id="app-store-window" class="app-window" style="display: none;">
<div class="window-header">
<div class="traffic-lights">
<div class="light red" id="app-window-close">div>
<div class="light yellow" id="app-window-minimize">div>
<div class="light green" id="app-window-maximize">div>
div>
div>
<div class="window-body">
<div class="sidebar">
div>
<div class="main-content">
div>
div>
<div class="resize-handle-se">div>
div>
<div class="window-header">
<div class="traffic-lights">
<div class="light red" id="app-window-close">div>
<div class="light yellow" id="app-window-minimize">div>
<div class="light green" id="app-window-maximize">div>
div>
div>
<div class="window-body">
<div class="sidebar">
div>
<div class="main-content">
div>
div>
<div class="resize-handle-se">div>
div>
Process Flow: Application Boot
flowchart TD
A[User opens app] --> B{Is on mobile?}
B -- Yes --> C[Show mobile overlay]
B -- No --> D[Show loading overlay]
D --> E[Initialize desktop]
E --> F[Display desktop, taskbar, windows]
F --> G[User interacts]
A[User opens app] --> B{Is on mobile?}
B -- Yes --> C[Show mobile overlay]
B -- No --> D[Show loading overlay]
D --> E[Initialize desktop]
E --> F[Display desktop, taskbar, windows]
F --> G[User interacts]
style.css - UI Styling & Theming
This file provides the look and feel of the OS environment using modern CSS techniques.
Styling Highlights
- Font-Faces: Uses "SF Pro Display" for a modern, Apple-like feel.
- Colors & Variables: CSS custom properties (
:root) manage theme colors for backgrounds, accents, and UI surfaces. - Responsive UI: Ensures key overlays behave well on desktop and mobile screens.
- Glassmorphism: Taskbar, windows, and quick settings use transparency and blur effects.
Key UI Areas
| CSS Selector | UI Area / Purpose |
|---|---|
#screen-brightness-overlay |
Fullscreen overlay for brightness simulation. |
#desktop |
Main desktop background. |
.desktop-icon |
Icon size, padding, drag state. |
#taskbar |
Sticky bottom bar, glass effect. |
#start-menu, #start-menu-window |
Popup and windowed Start menu. |
#context-menu |
Right-click menu. |
#loading-overlay |
Boot animation overlay. |
#widgets-panel |
Widget panel slide-out. |
.app-window |
Generic window styling (App Store, etc). |
.traffic-lights |
macOS window control icons. |
.resize-handle-se |
Resizable window handle. |
#mobile-overlay |
Fullscreen overlay for mobile users. |
.quick-settings-* |
Tiles, sliders, actions for quick settings. |
Example: Taskbar Styling
#taskbar {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
width: 96vw;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgb(60 60 60 / 10%) 100%);
color: var(--taskbar-fg);
z-index: 1000;
/* ... */
}
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
width: 96vw;
height: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgb(60 60 60 / 10%) 100%);
color: var(--taskbar-fg);
z-index: 1000;
/* ... */
}
Example: App Window (macOS Style)
.app-window {
position: absolute;
width: 80vw;
max-width: 1000px;
background-color: rgba(40, 40, 40, 0.75);
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px) saturate(180%);
display: flex;
flex-direction: column;
/* ... */
}
position: absolute;
width: 80vw;
max-width: 1000px;
background-color: rgba(40, 40, 40, 0.75);
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px) saturate(180%);
display: flex;
flex-direction: column;
/* ... */
}
Feature Table
| Feature | Provided By |
|---|---|
| Modern fonts and fallback | @font-face |
| Drag-and-drop icon support | .desktop-icon |
| Taskbar app indicators | .taskbar-app-icon |
| Animated loading screen | #loading-overlay |
| Resizable, draggable windows | .app-window |
| Quick settings sliders (brightness, etc.) | .quick-settings-* |
| Widgets and side-windows | #widgets-panel, #weather-side-window, etc. |
| Mobile overlay for unsupported devices | #mobile-overlay |
Example: Mobile Overlay
#mobile-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
/* ... */
}
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
/* ... */
}
os.js - Operating System Logic
The main JavaScript file implements the desktop environment's logic, including window management, widgets, apps, storage simulation, and UI behaviors.
Major Functional Areas
- Desktop Boot/Loading: Handles animated loading screen and session logic.
- Desktop Icons: Draggable, persistent (via
localStorage), double-click to open apps/folders. - Window System: App windows (App Store, Notepad, Spotify, Camera, etc.) can be moved, resized, minimized, maximized, and closed. Each window is managed by a
windowManager. - Taskbar: Shows running/minimized windows as icons. Clicking restores/minimizes associated windows.
- Start Menu: Rich, dynamic start menu with pinned apps, recommended items, user info, and settings.
- Right-Click Context Menu: For desktop and folder icons, supports refresh, new, delete, and rename actions.
- Widgets: Weather, Spotify, Stocks (wallpaper/theme), and News widgets, each with animated side panels.
- Quick Settings: Panel for toggles (art, bluetooth, flight mode, etc.), sliders (brightness, volume), and connection status.
- Calendar Popup: Shows an interactive monthly calendar on clicking the clock.
- Mobile Detection: Overlay disables all desktop features on mobile devices.
- Simulated Storage: Fake storage with named "drives", progress bars, and upgrade button.
- Apps: Notepad, Camera, Chrome (Bing search), Image Viewer, etc., each windowed and feature-rich.
- Persistent State: Positions and settings are saved via
localStoragefor icons, folders, and brightness. - Spotify API (optional): Integration for track search and playback (requires developer credentials).
Component Interaction
flowchart LR
subgraph Desktop
DesktopIcons
Windows
ContextMenu
Widgets
QuickSettings
Taskbar
StartMenu
end
DesktopIcons --> Windows
StartMenu -- Launch app --> Windows
Taskbar -- Click icon --> Windows
Widgets -- Open/close --> Windows
Windows -- Minimize/restore --> Taskbar
ContextMenu -- Actions --> DesktopIcons
QuickSettings -- Toggles/Sliders --> Desktop, Overlay
subgraph Desktop
DesktopIcons
Windows
ContextMenu
Widgets
QuickSettings
Taskbar
StartMenu
end
DesktopIcons --> Windows
StartMenu -- Launch app --> Windows
Taskbar -- Click icon --> Windows
Widgets -- Open/close --> Windows
Windows -- Minimize/restore --> Taskbar
ContextMenu -- Actions --> DesktopIcons
QuickSettings -- Toggles/Sliders --> Desktop, Overlay
Key Functions & Classes
| Function/Class | Purpose |
|---|---|
updateClock |
Real-time taskbar clock. |
updateConnectionStatus |
Online/offline detection and notification. |
renderStartMenu |
Generates dynamic Start menu window. |
toggleStartMenuWindow |
Opens/closes Start menu. |
renderCalendar |
Builds monthly calendar popup. |
toggleCalendar |
Shows/hides calendar window. |
renderWidgetsPanel |
Generates widgets panel UI. |
toggleWidgetsPanel |
Opens/closes widgets slide-out. |
windowManager (object) |
Central registry for app windows (z-index, state, etc). |
minimizeWindow, restoreWindow |
Minimize/restore logic for windows. |
openAppStoreWindow, closeAppStoreWindow |
Show/hide App Store window. |
createTaskbarIcon |
Adds/removes icons to the taskbar for running apps. |
getTaskbarIconSVG |
Returns SVG markup for each taskbar app icon. |
createNewFolderOnDesktop |
Adds a new folder icon (persistent). |
renderFolder |
Places a folder icon at given position. |
createFolderWindow |
Simulates a folder's window UI. |
createChromeSearchWindow |
Opens a Chrome-like search window with Bing integration. |
createNotepadWindow |
Opens a notepad window with font and color controls. |
createCameraWindow |
Opens a camera app, saves photos to User Cloud/Pictures. |
createImageViewerWindow |
Opens an image viewer with zoom/rotate controls. |
renderAppStoreFolderContents |
Simulated file system for App Store storage. |
attach*Handler |
Utility for binding event handlers to dynamic elements. |
Example: Taskbar App Window Management
function minimizeWindow(id) {
const windowState = windowManager.get(id);
if (!windowState || windowState.isMinimized) return;
// Animate and hide window, add taskbar icon
}
function restoreWindow(id) {
const windowState = windowManager.get(id);
if (!windowState || !windowState.isMinimized) return;
// Restore window, remove taskbar icon
}
const windowState = windowManager.get(id);
if (!windowState || windowState.isMinimized) return;
// Animate and hide window, add taskbar icon
}
function restoreWindow(id) {
const windowState = windowManager.get(id);
if (!windowState || !windowState.isMinimized) return;
// Restore window, remove taskbar icon
}
Example: Weather Widget with Geolocation
function toggleWeatherWindow() {
if (weatherSideWindow.classList.contains('open')) {
weatherSideWindow.classList.remove('open');
} else {
// Show loading
// Use geolocation and Open-Meteo API to fetch temperature/weather
// Render weather info in side window
}
}
if (weatherSideWindow.classList.contains('open')) {
weatherSideWindow.classList.remove('open');
} else {
// Show loading
// Use geolocation and Open-Meteo API to fetch temperature/weather
// Render weather info in side window
}
}
Example: Creating a New Folder
function createNewFolderOnDesktop() {
const left = '120px';
const top = '20px';
const name = getUniqueFolderName();
// Save to localStorage and render on desktop
}
const left = '120px';
const top = '20px';
const name = getUniqueFolderName();
// Save to localStorage and render on desktop
}
Example: Simulated File System Navigation
const appStoreFileSystem = {
"Applications": { /* ... */ },
"User Cloud": {
"Pratik Personal": { "Documents": {}, "Pictures": {} },
"Music": {}, "Videos": {}
}
};
let appStoreCurrentPath = [];
function renderAppStoreFolderContents() {
// Traverse appStoreCurrentPath to get current folder
// Render subfolders/files
}
"Applications": { /* ... */ },
"User Cloud": {
"Pratik Personal": { "Documents": {}, "Pictures": {} },
"Music": {}, "Videos": {}
}
};
let appStoreCurrentPath = [];
function renderAppStoreFolderContents() {
// Traverse appStoreCurrentPath to get current folder
// Render subfolders/files
}
Example: Bing Search Integration (Chrome App Window)
function createChromeSearchWindow() {
// Creates window with input box and iframe for Bing results
function performBingSearch(query) {
const searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(query)}`;
resultsContainer.innerHTML = `
// Creates window with input box and iframe for Bing results
function performBingSearch(query) {
const searchUrl = `https://www.bing.com/search?q=${encodeURIComponent(query)}`;
resultsContainer.innerHTML = `