Spaces:

Ramesh-vani
/

nottri-os

Running

App Files Files Community

Ramesh-vani commited on Mar 6

Commit

9fc2761

verified ·

1 Parent(s): ba28a2b

Update index.html

Browse files

Files changed (1) hide show

index.html +579 -503

index.html CHANGED Viewed

@@ -3,13 +3,11 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Advanced Windows-like System with App Icons</title>
   <style>
-    /* Basic Reset & Fonts */
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body, html { width: 100%; height: 100%; overflow: hidden; font-family: Arial, sans-serif; }
-    /* Desktop */
     #desktop {
       position: absolute;
       width: 100%;
@@ -39,7 +37,6 @@
       font-size: 14px;
     }
-    /* Taskbar */
     #taskbar {
       position: absolute;
       bottom: 0;
@@ -49,7 +46,6 @@
       background: rgba(0,0,0,0.8);
       z-index: 1000;
     }
-    /* Left side of Taskbar (Start button & pinned apps) */
     #taskbar-left {
       display: flex;
       align-items: center;
@@ -64,7 +60,6 @@
       cursor: pointer;
       margin-right: 10px;
     }
-    /* Pinned Apps on Taskbar */
     #taskbar-pinned {
       display: flex;
       align-items: center;
@@ -77,7 +72,6 @@
       font-size: 18px;
       cursor: pointer;
     }
-    /* Running Apps: प्रत्येक running window का अलग tab – केवल icon */
     #taskbar-windows {
       display: flex;
       align-items: center;
@@ -98,7 +92,6 @@
       display: inline-block;
     }
-    /* Start Menu */
     #start-menu {
       position: absolute;
       bottom: 45px;
@@ -117,7 +110,6 @@
     }
     #start-menu li:hover { background: #f0f0f0; }
-    /* Window Styles */
     .window {
       position: absolute;
       width: 400px;
@@ -137,16 +129,13 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      position: relative;
     }
     .window-header .app-icon {
       font-size: 16px;
       margin-right: 5px;
-      display: inline-block;
     }
     .window-header .title {
       font-weight: bold;
-      display: inline-block;
     }
     .window-header .controls button {
       background: transparent;
@@ -162,7 +151,6 @@
       max-height: calc(100% - 40px);
     }
-    /* Resizer Styles */
     .resizer {
       position: absolute;
       background: transparent;
@@ -177,8 +165,7 @@
     .resizer.bottom-left { bottom: -5px; left: -5px; width: 10px; height: 10px; cursor: nesw-resize; }
     .resizer.bottom-right { bottom: -5px; right: -5px; width: 10px; height: 10px; cursor: nwse-resize; }
-    /* Custom Context Menu */
-    #custom-context-menu {
       position: absolute;
       display: none;
       background: #fff;
@@ -186,550 +173,592 @@
       z-index: 5000;
       box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
     }
-    #custom-context-menu ul { list-style: none; }
-    #custom-context-menu li {
       padding: 8px 12px;
       cursor: pointer;
     }
-    #custom-context-menu li:hover {
       background: #f0f0f0;
     }
-    /* Customizer Form */
-    .customizer-form label {
-      display: block;
-      margin: 5px 0 2px;
-    }
-    .customizer-form input,
-    .customizer-form textarea {
-      width: 100%;
-      padding: 5px;
-      margin-bottom: 10px;
-    }
-    .customizer-form button {
-      padding: 5px 10px;
-      cursor: pointer;
-    }
   </style>
 </head>
 <body>
-  <!-- A style element for custom CSS -->
   <style id="custom-css"></style>
-  <!-- Desktop -->
   <div id="desktop">
-    <div id="desktop-icons">
-      <!-- Built-In App Icons (updated via JS) -->
-    </div>
   </div>
-  <!-- Taskbar -->
   <div id="taskbar">
     <div id="taskbar-left">
       <button id="start-button">Start</button>
-      <div id="taskbar-pinned">
-        <!-- Built-In Pinned Apps -->
-      </div>
-      <div id="taskbar-windows">
-        <!-- Running windows: प्रत्येक window का एक अलग tab (केवल icon) -->
-      </div>
     </div>
   </div>
-  <!-- Start Menu -->
   <div id="start-menu">
-    <ul id="start-menu-list">
-      <!-- Built-In Start Menu Items -->
-    </ul>
   </div>
-  <!-- Custom Context Menu (Right-Click on Desktop) -->
   <div id="custom-context-menu">
     <ul>
       <li data-custom="openCustomizer">Open Customizer</li>
       <li data-custom="reset">Reset Customizations</li>
     </ul>
   </div>
   <script>
-    /***** Global Variables *****/
-    let windowCounter = 1;
-    let runningWindows = {};  // Mapping windowId -> window element
-    let zIndexCounter = 300;  // For layering windows
-    // Built-In Apps Array (always present)
-    const builtInApps = [
-      { id: "appInstaller", name: "App Installer", icon: "🛠" },
-      { id: "customizer", name: "Customizer", icon: "🎨" }
-    ];
-    /***** Utility Functions *****/
-    // Retrieve installed apps from localStorage (excluding built-ins)
-    function getInstalledApps() {
-      let apps = [];
-      for (let i = 0; i < localStorage.length; i++) {
-        let key = localStorage.key(i);
-        if (key.startsWith("app_")) {
-          try { apps.push(JSON.parse(localStorage.getItem(key))); }
-          catch(e) { console.error(e); }
         }
-      }
-      return apps;
-    }
-    // Update Desktop Icons: built-in apps first, then installed apps
-    function updateDesktopIcons() {
-      const container = document.getElementById("desktop-icons");
-      container.innerHTML = "";
-      builtInApps.forEach(app => {
-        let icon = document.createElement("div");
-        icon.className = "icon";
-        icon.setAttribute("data-app", app.id);
-        icon.innerHTML = `${app.icon}<br>${app.name}`;
-        icon.onclick = () => openApp(app.id);
-        container.appendChild(icon);
-      });
-      let apps = getInstalledApps();
-      apps.forEach(app => {
-        if (!builtInApps.find(b => b.id === app.id)) {
           let icon = document.createElement("div");
           icon.className = "icon";
           icon.setAttribute("data-app", app.id);
           icon.innerHTML = `${app.icon || '🔳'}<br>${app.name}`;
-          icon.onclick = () => launchInstalledApp(app.id);
-          container.appendChild(icon);
-        }
-      });
-    }
-    // Update Start Menu Items
-    function updateStartMenuApps() {
-      const list = document.getElementById("start-menu-list");
-      list.innerHTML = "";
-      builtInApps.forEach(app => {
-        let li = document.createElement("li");
-        li.setAttribute("data-app", app.id);
-        li.innerHTML = `${app.icon} ${app.name}`;
-        li.onclick = () => { openApp(app.id); hideStartMenu(); };
-        list.appendChild(li);
-      });
-      let apps = getInstalledApps();
-      apps.forEach(app => {
-        if (!builtInApps.find(b => b.id === app.id)) {
           let li = document.createElement("li");
           li.setAttribute("data-app", app.id);
           li.innerHTML = `${app.icon || '🔳'} ${app.name}`;
-          li.onclick = () => { launchInstalledApp(app.id); hideStartMenu(); };
-          list.appendChild(li);
-        }
-      });
-    }
-    // Update Pinned Apps in Taskbar (built-in apps)
-    function updateTaskbarPinned() {
-      const container = document.getElementById("taskbar-pinned");
-      container.innerHTML = "";
-      builtInApps.forEach(app => {
-        let btn = document.createElement("button");
-        btn.setAttribute("data-app", app.id);
-        btn.title = app.name;
-        btn.innerHTML = `${app.icon}`;
-        btn.onclick = () => openApp(app.id);
-        container.appendChild(btn);
-      });
-    }
-    // Update all system apps UI
-    function updateSystemAppsUI() {
-      updateDesktopIcons();
-      updateStartMenuApps();
-      updateTaskbarPinned();
-    }
-    function hideStartMenu() {
-      document.getElementById("start-menu").style.display = "none";
-    }
-    /***** Start Menu Toggle *****/
-    const startButton = document.getElementById("start-button");
-    const startMenu = document.getElementById("start-menu");
-    startButton.addEventListener("click", (e) => {
-      e.stopPropagation();
-      startMenu.style.display = startMenu.style.display === "block" ? "none" : "block";
-    });
-    document.addEventListener("click", (e) => {
-      if (!startMenu.contains(e.target) && e.target !== startButton) {
-        hideStartMenu();
-      }
-      document.getElementById("custom-context-menu").style.display = "none";
-    });
-    /***** Window Creation, Resizing & Controls *****/
-    function createWindow(title, contentHTML = "", customControls = null) {
-      const win = document.createElement("div");
-      win.classList.add("window");
-      win.style.top = "100px";
-      win.style.left = "100px";
-      win.style.width = "400px";
-      win.style.height = "300px";
-      win.dataset.windowId = windowCounter++;
-      win.dataset.maximized = "false";
-      // appId and appIcon can be set later
-      const header = document.createElement("div");
-      header.classList.add("window-header");
-      let iconHTML = "";
-      if(win.dataset.appIcon) {
-        iconHTML = `<span class="app-icon">${win.dataset.appIcon}</span>`;
       }
-      let controlsHTML = customControls ? customControls : "<button class='minimize-btn'>_</button><button class='maximize-btn'>[ ]</button><button class='close'>X</button>";
-      header.innerHTML = `${iconHTML}<span class="title">${title}</span><span class="controls">${controlsHTML}</span>`;
-      win.appendChild(header);
-      const content = document.createElement("div");
-      content.classList.add("window-content");
-      content.innerHTML = contentHTML;
-      win.appendChild(content);
-      // Add resizers for all edges/corners
-      makeResizable(win);
-      document.body.appendChild(win);
-      win.addEventListener("mousedown", () => bringToFront(win));
-      makeDraggable(win, header);
-      bringToFront(win);
-      const minimizeBtn = header.querySelector(".minimize-btn");
-      if(minimizeBtn) { minimizeBtn.addEventListener("click", () => minimizeWindow(win)); }
-      const maximizeBtn = header.querySelector(".maximize-btn");
-      if(maximizeBtn) { maximizeBtn.addEventListener("click", () => toggleMaximizeWindow(win, maximizeBtn)); }
-      const closeBtn = header.querySelector(".close");
-      if(closeBtn) { closeBtn.addEventListener("click", () => closeWindow(win)); }
-      // **Note:** हम createTaskbarWindowButton को बाद में call करेंगे, जब appIcon सेट हो जाए
-      runningWindows[win.dataset.windowId] = win;
-      return win;
-    }
-    function makeDraggable(win, handle) {
-      let offsetX = 0, offsetY = 0;
-      handle.addEventListener("mousedown", function(e) {
-        if(win.dataset.maximized === "true") return;
-        offsetX = e.clientX - win.offsetLeft;
-        offsetY = e.clientY - win.offsetTop;
-        document.addEventListener("mousemove", mouseMove);
-        document.addEventListener("mouseup", mouseUp);
-      });
-      function mouseMove(e) {
-        let newLeft = e.clientX - offsetX;
-        let newTop = e.clientY - offsetY;
-        const desktopRect = document.getElementById("desktop").getBoundingClientRect();
-        if(newLeft < 0) newLeft = 0;
-        if(newTop < 0) newTop = 0;
-        if(newLeft + win.offsetWidth > desktopRect.width) newLeft = desktopRect.width - win.offsetWidth;
-        if(newTop + win.offsetHeight > desktopRect.height) newTop = desktopRect.height - win.offsetHeight;
-        win.style.left = newLeft + "px";
-        win.style.top = newTop + "px";
-      }
-      function mouseUp() {
-        document.removeEventListener("mousemove", mouseMove);
-        document.removeEventListener("mouseup", mouseUp);
-      }
-    }
-    function makeResizable(win) {
-      const directions = ["top", "right", "bottom", "left", "top-left", "top-right", "bottom-left", "bottom-right"];
-      directions.forEach(direction => {
-        const resizer = document.createElement("div");
-        resizer.classList.add("resizer", direction);
-        win.appendChild(resizer);
-        resizer.addEventListener("mousedown", initResize);
-        function initResize(e) {
-          e.preventDefault();
-          e.stopPropagation();
-          const startX = e.clientX;
-          const startY = e.clientY;
-          const startWidth = parseInt(document.defaultView.getComputedStyle(win).width, 10);
-          const startHeight = parseInt(document.defaultView.getComputedStyle(win).height, 10);
-          const startLeft = win.offsetLeft;
-          const startTop = win.offsetTop;
-          const desktopRect = document.getElementById("desktop").getBoundingClientRect();
-          function doResize(e) {
-            let dx = e.clientX - startX;
-            let dy = e.clientY - startY;
-            let newWidth = startWidth;
-            let newHeight = startHeight;
-            let newLeft = startLeft;
-            let newTop = startTop;
-            if(direction.includes("right")) {
-              newWidth = startWidth + dx;
-            }
-            if(direction.includes("left")) {
-              newWidth = startWidth - dx;
-              newLeft = startLeft + dx;
-            }
-            if(direction.includes("bottom")) {
-              newHeight = startHeight + dy;
-            }
-            if(direction.includes("top")) {
-              newHeight = startHeight - dy;
-              newTop = startTop + dy;
-            }
-            if(newLeft < 0) { newWidth += newLeft; newLeft = 0; }
-            if(newTop < 0) { newHeight += newTop; newTop = 0; }
-            if(newLeft + newWidth > desktopRect.width) newWidth = desktopRect.width - newLeft;
-            if(newTop + newHeight > desktopRect.height) newHeight = desktopRect.height - newTop;
-            const minWidth = 100, minHeight = 50;
-            if(newWidth < minWidth) {
-              newWidth = minWidth;
-              if(direction.includes("left")) { newLeft = startLeft + (startWidth - minWidth); }
-            }
-            if(newHeight < minHeight) {
-              newHeight = minHeight;
-              if(direction.includes("top")) { newTop = startTop + (startHeight - minHeight); }
             }
-            win.style.width = newWidth + "px";
-            win.style.height = newHeight + "px";
-            win.style.left = newLeft + "px";
-            win.style.top = newTop + "px";
-          }
-          function stopResize() {
-            document.removeEventListener("mousemove", doResize);
-            document.removeEventListener("mouseup", stopResize);
           }
-          document.addEventListener("mousemove", doResize);
-          document.addEventListener("mouseup", stopResize);
         }
-      });
-    }
-    function bringToFront(win) {
-      zIndexCounter++;
-      win.style.zIndex = zIndexCounter;
-    }
-    function minimizeWindow(win) {
-      win.style.display = "none";
-    }
-    function restoreWindow(win) {
-      win.style.display = "block";
-      bringToFront(win);
-    }
-    function toggleMaximizeWindow(win, btn) {
-      if(win.dataset.maximized === "true") {
-        win.style.top = win.dataset.originalTop;
-        win.style.left = win.dataset.originalLeft;
-        win.style.width = win.dataset.originalWidth;
-        win.style.height = win.dataset.originalHeight;
-        win.dataset.maximized = "false";
-      } else {
-        win.dataset.originalTop = win.style.top;
-        win.dataset.originalLeft = win.style.left;
-        win.dataset.originalWidth = win.style.width;
-        win.dataset.originalHeight = win.style.height;
-        win.style.top = "0";
-        win.style.left = "0";
-        win.style.width = "100%";
-        win.style.height = "100%";
-        win.dataset.maximized = "true";
-      }
-    }
-    function closeWindow(win) {
-      const winId = win.dataset.windowId;
-      const taskbarWindows = document.getElementById("taskbar-windows");
-      const btn = taskbarWindows.querySelector(`button[data-window-id="${winId}"]`);
-      if(btn) { btn.remove(); }
-      delete runningWindows[winId];
-      win.remove();
-    }
-    // Create a taskbar button for each running window – only icon shown
-    function createTaskbarWindowButton(win) {
-      const taskbarWindows = document.getElementById("taskbar-windows");
-      let btn = document.createElement("button");
-      btn.classList.add("taskbar-window-btn");
-      btn.setAttribute("data-window-id", win.dataset.windowId);
-      let icon = win.dataset.appIcon || '🔳';
-      btn.innerHTML = `<span class="taskbar-icon">${icon}</span>`;
-      btn.onclick = () => {
-        if(win.style.display === "none") { restoreWindow(win); }
-        else { bringToFront(win); }
-      };
-      taskbarWindows.appendChild(btn);
-    }
-    // Update window header to include app icon if available
-    function updateWindowHeaderIcon(win) {
-      const header = win.querySelector('.window-header');
-      if(header && win.dataset.appIcon) {
-        if(!header.querySelector('.app-icon')) {
-          let iconSpan = document.createElement("span");
-          iconSpan.className = "app-icon";
-          iconSpan.style.marginRight = "5px";
-          iconSpan.innerText = win.dataset.appIcon;
-          const titleElem = header.querySelector(".title");
-          if(titleElem) { header.insertBefore(iconSpan, titleElem); }
         }
       }
-    }
-    /***** Built-In Apps & Open Functions *****/
-    // openApp: if built-in, call respective function; else launch installed app
-    function openApp(appId) {
-      if(appId === "appInstaller") {
-        createAppInstaller();
-      } else if(appId === "customizer") {
-        createCustomizerApp();
-      } else {
-        launchInstalledApp(appId);
-      }
-    }
-    // Built-In App: App Installer
-    function createAppInstaller() {
-      const win = createWindow("App Installer", "");
-      win.dataset.appId = "appInstaller";
-      win.dataset.appIcon = "🛠";
-      updateWindowHeaderIcon(win);
-      // अब taskbar button create करें
-      createTaskbarWindowButton(win);
-      const content = document.createElement("div");
-      content.innerHTML = `
-        <h3>Install App</h3>
-        <textarea id="app-json" placeholder="Paste App JSON here"></textarea><br>
-        <button id="install-app-btn">Install</button>
-        <hr>
-        <h3>Installed Apps (LocalStorage)</h3>
-        <div id="installed-apps-list"></div>
-      `;
-      win.querySelector(".window-content").appendChild(content);
-      win.querySelector("#install-app-btn").addEventListener("click", () => {
-        installApp();
-        updateSystemAppsUI();
-        loadInstalledAppsList();
-      });
-      loadInstalledAppsList();
-    }
-    // Built-In App: Customizer
-    function createCustomizerApp() {
-      const win = createWindow("Customizer", "");
-      win.dataset.appId = "customizer";
-      win.dataset.appIcon = "🎨";
-      updateWindowHeaderIcon(win);
-      createTaskbarWindowButton(win);
-      const content = document.createElement("div");
-      content.innerHTML = `
-        <h3>Customize System</h3>
-        <div class="customizer-form">
-          <label for="desktop-bg-color">Desktop Background Color:</label>
-          <input type="color" id="desktop-bg-color" value="#ffffff">
-          <label for="desktop-bg-image">Desktop Background Image URL:</label>
-          <input type="text" id="desktop-bg-image" placeholder="Image URL">
-          <hr>
-          <label for="taskbar-bg-color">Taskbar Background Color:</label>
-          <input type="color" id="taskbar-bg-color" value="#0078d7">
-          <label for="taskbar-height">Taskbar Height (px):</label>
-          <input type="number" id="taskbar-height" value="40">
-          <hr>
-          <label for="startmenu-bg-color">Start Menu Background Color:</label>
-          <input type="color" id="startmenu-bg-color" value="#ffffff">
-          <label for="startmenu-text-color">Start Menu Text Color:</label>
-          <input type="color" id="startmenu-text-color" value="#000000">
-          <hr>
-          <label for="custom-css-input">Custom CSS:</label>
-          <textarea id="custom-css-input" placeholder="Enter your custom CSS here"></textarea><br>
-          <button onclick="applyAllCustomizations()">Apply Customizations</button>
-        </div>
-      `;
-      win.querySelector(".window-content").appendChild(content);
-    }
-    // Apply customizations from Customizer app
-    function applyAllCustomizations() {
-      const desktopBgColor = document.getElementById("desktop-bg-color").value;
-      const desktopBgImage = document.getElementById("desktop-bg-image").value;
-      let desktopBgStyle = desktopBgColor;
-      if(desktopBgImage.trim() !== "") { desktopBgStyle = `url('${desktopBgImage}')`; }
-      document.getElementById("desktop").style.background = desktopBgStyle;
-      document.getElementById("desktop").style.backgroundSize = "cover";
-      const taskbarBgColor = document.getElementById("taskbar-bg-color").value;
-      const taskbarHeight = document.getElementById("taskbar-height").value;
-      document.getElementById("taskbar").style.background = taskbarBgColor;
-      document.getElementById("taskbar").style.height = taskbarHeight + "px";
-      const startmenuBgColor = document.getElementById("startmenu-bg-color").value;
-      const startmenuTextColor = document.getElementById("startmenu-text-color").value;
-      document.getElementById("start-menu").style.background = startmenuBgColor;
-      document.getElementById("start-menu").style.color = startmenuTextColor;
-      const customCss = document.getElementById("custom-css-input").value;
-      document.getElementById("custom-css").innerHTML = customCss;
-      alert("Customizations applied!");
-    }
-    // Launch Installed App (from localStorage)
-    function launchInstalledApp(appId) {
-      const key = "app_" + appId;
-      let appData = JSON.parse(localStorage.getItem(key));
-      if (!appData) return;
-      const win = createWindow(appData.name, appData.ui, appData.windowControls);
-      win.dataset.appId = appData.id;
-      win.dataset.appIcon = appData.icon || '🔳';
-      updateWindowHeaderIcon(win);
-      createTaskbarWindowButton(win);
-      if(appData.methods) {
-        let appMethods = {};
-        for(let method in appData.methods) {
-          try {
-            appMethods[method] = new Function("return " + appData.methods[method])();
-          } catch(e) {
-            console.error("Error in method", method, e);
-          }
-        }
-        window.app = { methods: appMethods };
       }
-    }
-    // Load Installed Apps List in App Installer
-    function loadInstalledAppsList() {
-      const container = document.getElementById("installed-apps-list");
-      if(container) {
-        let apps = getInstalledApps();
-        container.innerHTML = apps.map(app => `<div>${app.icon || '🔳'} ${app.name}</div>`).join("");
       }
-    }
-    // Install App from JSON input in App Installer
-    function installApp() {
-      let appData;
-      const jsonText = document.getElementById("app-json").value;
-      try { appData = JSON.parse(jsonText); }
-      catch (error) { alert("Invalid JSON. Please check your syntax."); return; }
-      if (!appData.id) { alert("App JSON must contain an 'id' property."); return; }
-      localStorage.setItem("app_" + appData.id, JSON.stringify(appData));
-      alert("App installed successfully!");
-      document.getElementById("app-json").value = "";
-    }
-    /***** Custom Context Menu & Shortcut *****/
-    const customContextMenu = document.getElementById("custom-context-menu");
     document.getElementById("desktop").addEventListener("contextmenu", function(e) {
       e.preventDefault();
       customContextMenu.style.display = "block";
       customContextMenu.style.top = e.clientY + "px";
       customContextMenu.style.left = e.clientX + "px";
     });
-    customContextMenu.addEventListener("click", function(e) {
       const option = e.target.getAttribute("data-custom");
-      if(option === "openCustomizer") {
-        openApp("customizer");
-      } else if(option === "reset") {
         document.getElementById("desktop").style.background = "url('background.jpg') no-repeat center center fixed";
         document.getElementById("desktop").style.backgroundSize = "cover";
         document.getElementById("taskbar").style.background = "rgba(0,0,0,0.8)";
@@ -739,13 +768,60 @@
         document.getElementById("custom-css").innerHTML = "";
         alert("Customizations reset to default!");
       }
-      customContextMenu.style.display = "none";
     });
-    /***** Attach Static Events for Built-In Apps *****/
     document.addEventListener("DOMContentLoaded", () => {
-      updateSystemAppsUI();
     });
   </script>
 </body>
-</html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Custom OS with Fixed FileSystem CRUD</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body, html { width: 100%; height: 100%; overflow: hidden; font-family: Arial, sans-serif; }
     #desktop {
       position: absolute;
       width: 100%;
       font-size: 14px;
     }
     #taskbar {
       position: absolute;
       bottom: 0;
       background: rgba(0,0,0,0.8);
       z-index: 1000;
     }
     #taskbar-left {
       display: flex;
       align-items: center;
       cursor: pointer;
       margin-right: 10px;
     }
     #taskbar-pinned {
       display: flex;
       align-items: center;
       font-size: 18px;
       cursor: pointer;
     }
     #taskbar-windows {
       display: flex;
       align-items: center;
       display: inline-block;
     }
     #start-menu {
       position: absolute;
       bottom: 45px;
     }
     #start-menu li:hover { background: #f0f0f0; }
     .window {
       position: absolute;
       width: 400px;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
     .window-header .app-icon {
       font-size: 16px;
       margin-right: 5px;
     }
     .window-header .title {
       font-weight: bold;
     }
     .window-header .controls button {
       background: transparent;
       max-height: calc(100% - 40px);
     }
     .resizer {
       position: absolute;
       background: transparent;
     .resizer.bottom-left { bottom: -5px; left: -5px; width: 10px; height: 10px; cursor: nesw-resize; }
     .resizer.bottom-right { bottom: -5px; right: -5px; width: 10px; height: 10px; cursor: nwse-resize; }
+    #custom-context-menu, #file-context-menu {
       position: absolute;
       display: none;
       background: #fff;
       z-index: 5000;
       box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
     }
+    #custom-context-menu ul, #file-context-menu ul { list-style: none; }
+    #custom-context-menu li, #file-context-menu li {
       padding: 8px 12px;
       cursor: pointer;
     }
+    #custom-context-menu li:hover, #file-context-menu li:hover {
       background: #f0f0f0;
     }
   </style>
 </head>
 <body>
   <style id="custom-css"></style>
   <div id="desktop">
+    <div id="desktop-icons"></div>
   </div>
   <div id="taskbar">
     <div id="taskbar-left">
       <button id="start-button">Start</button>
+      <div id="taskbar-pinned"></div>
+      <div id="taskbar-windows"></div>
     </div>
   </div>
   <div id="start-menu">
+    <ul id="start-menu-list"></ul>
   </div>
   <div id="custom-context-menu">
     <ul>
       <li data-custom="openCustomizer">Open Customizer</li>
       <li data-custom="reset">Reset Customizations</li>
     </ul>
   </div>
+  <div id="file-context-menu">
+    <ul>
+      <li data-action="open">Open</li>
+      <li data-action="rename">Rename</li>
+      <li data-action="delete">Delete</li>
+    </ul>
+  </div>
   <script>
+    /***** Core OS Object *****/
+    const OS = {
+      windowCounter: 1,
+      runningWindows: {},
+      zIndexCounter: 300,
+      eventListeners: {},
+      // File System API
+      FileSystem: {
+        init: function() {
+          if (!localStorage.getItem('fs_root')) {
+            localStorage.setItem('fs_root', JSON.stringify({
+              name: "Root",
+              type: "directory",
+              contents: []
+            }));
+          }
+        },
+        getRoot: function() {
+          return JSON.parse(localStorage.getItem('fs_root'));
+        },
+        saveRoot: function(root) {
+          console.log("Saving root:", JSON.stringify(root));
+          localStorage.setItem('fs_root', JSON.stringify(root));
+          OS.triggerEvent('fileSystemChanged', root);
+        },
+        addItem: function(name, type, content = "", appId = null, parentPath = "/") {
+          console.log(`Adding ${type}: ${name} to ${parentPath}`);
+          const root = this.getRoot();
+          let parent = parentPath === "/" ? root : this.findItem(parentPath);
+          if (!parent || parent.type !== "directory") {
+            console.error(`Invalid parent directory: ${parentPath}`);
+            return false;
+          }
+          if (parent.contents.some(item => item.name === name)) {
+            console.error(`Item ${name} already exists in ${parentPath}`);
+            return false;
+          }
+          const newItem = {
+            name: name,
+            type: type,
+            created: new Date().toISOString()
+          };
+          if (type === "file") {
+            newItem.content = content;
+            newItem.fileType = "text";
+            newItem.associatedAppId = appId;
+          } else if (type === "directory") {
+            newItem.contents = [];
+          }
+          parent.contents.push(newItem);
+          this.saveRoot(root);
+          OS.triggerEvent('itemAdded', { path: `${parentPath}${name}${type === 'directory' ? '/' : ''}`, item: newItem });
+          return true;
+        },
+        findItem: function(path) {
+          console.log(`Finding item at: ${path}`);
+          if (path === "/") return this.getRoot();
+          const parts = path.split('/').filter(p => p);
+          let current = this.getRoot();
+          for (let part of parts) {
+            current = current.contents.find(item => item.name === part);
+            if (!current) {
+              console.error(`Item not found: ${path}`);
+              return null;
+            }
+          }
+          return current;
+        },
+        removeItem: function(path) {
+          console.log(`Removing item: ${path}`);
+          const parent = this.getParent(path);
+          if (!parent) {
+            console.error(`Parent not found for: ${path}`);
+            return false;
+          }
+          const itemName = path.split('/').filter(p => p).pop();
+          const index = parent.contents.findIndex(item => item.name === itemName);
+          if (index === -1) {
+            console.error(`Item ${itemName} not found in parent`);
+            return false;
+          }
+          parent.contents.splice(index, 1);
+          this.saveRoot(this.getRoot());
+          OS.triggerEvent('itemRemoved', { path });
+          return true;
+        },
+        renameItem: function(oldPath, newName) {
+          console.log(`Renaming ${oldPath} to ${newName}`);
+          const item = this.findItem(oldPath);
+          if (!item) {
+            console.error(`Item not found: ${oldPath}`);
+            return false;
+          }
+          const parent = this.getParent(oldPath);
+          if (!parent) {
+            console.error(`Parent not found for: ${oldPath}`);
+            return false;
+          }
+          if (parent.contents.some(i => i.name === newName && i !== item)) {
+            console.error(`Name ${newName} already exists in directory`);
+            return false;
+          }
+          item.name = newName;
+          this.saveRoot(this.getRoot());
+          const newPath = `${parentPath(oldPath)}${newName}${item.type === 'directory' ? '/' : ''}`;
+          OS.triggerEvent('itemRenamed', { oldPath, newPath });
+          return true;
+        },
+        getParent: function(path) {
+          console.log(`Getting parent of: ${path}`);
+          if (path === "/") return null;
+          const parts = path.split('/').filter(p => p);
+          parts.pop();
+          return parts.length === 0 ? this.getRoot() : this.findItem("/" + parts.join('/'));
+        },
+        readFile: function(path) {
+          console.log(`Reading file: ${path}`);
+          const file = this.findItem(path);
+          if (file && file.type === "file") {
+            return file.content;
+          }
+          console.error(`File not found or not a file: ${path}`);
+          return null;
+        },
+        writeFile: function(path, content) {
+          console.log(`Writing to file: ${path}`);
+          const file = this.findItem(path);
+          if (!file || file.type !== "file") {
+            console.error(`File not found or not a file: ${path}`);
+            return false;
+          }
+          file.content = content;
+          this.saveRoot(this.getRoot());
+          OS.triggerEvent('fileWritten', { path, content });
+          return true;
         }
+      },
+      // Window Management API (unchanged for brevity, assumed working)
+      WindowManager: {
+        createWindow: function(title, contentHTML = "", options = {}) {
+          const win = document.createElement("div");
+          win.classList.add("window");
+          win.style.top = options.top || "100px";
+          win.style.left = options.left || "100px";
+          win.style.width = options.width || "400px";
+          win.style.height = options.height || "300px";
+          win.dataset.windowId = OS.windowCounter++;
+          win.dataset.maximized = "false";
+          win.dataset.appId = options.appId || '';
+          const header = document.createElement("div");
+          header.classList.add("window-header");
+          const controlsHTML = options.controls || "<button class='minimize-btn'>_</button><button class='maximize-btn'>[ ]</button><button class='close'>X</button>";
+          header.innerHTML = `<span class="app-icon">${options.icon || ''}</span><span class="title">${title}</span><span class="controls">${controlsHTML}</span>`;
+          win.appendChild(header);
+          const content = document.createElement("div");
+          content.classList.add("window-content");
+          content.innerHTML = contentHTML;
+          win.appendChild(content);
+          OS.makeResizable(win);
+          document.body.appendChild(win);
+          win.addEventListener("mousedown", () => OS.WindowManager.bringToFront(win));
+          OS.makeDraggable(win, header);
+          OS.WindowManager.bringToFront(win);
+          const minimizeBtn = header.querySelector(".minimize-btn");
+          if(minimizeBtn) minimizeBtn.addEventListener("click", () => OS.WindowManager.minimizeWindow(win));
+          const maximizeBtn = header.querySelector(".maximize-btn");
+          if(maximizeBtn) maximizeBtn.addEventListener("click", () => OS.WindowManager.toggleMaximizeWindow(win));
+          const closeBtn = header.querySelector(".close");
+          if(closeBtn) closeBtn.addEventListener("click", () => OS.WindowManager.closeWindow(win));
+          OS.runningWindows[win.dataset.windowId] = win;
+          OS.createTaskbarWindowButton(win);
+          OS.triggerEvent('windowCreated', { windowId: win.dataset.windowId });
+          return win;
+        },
+        minimizeWindow: function(win) { win.style.display = "none"; OS.triggerEvent('windowMinimized', { windowId: win.dataset.windowId }); },
+        maximizeWindow: function(win) {
+          if (win.dataset.maximized === "true") {
+            win.style.top = win.dataset.originalTop;
+            win.style.left = win.dataset.originalLeft;
+            win.style.width = win.dataset.originalWidth;
+            win.style.height = win.dataset.originalHeight;
+            win.dataset.maximized = "false";
+          } else {
+            win.dataset.originalTop = win.style.top;
+            win.dataset.originalLeft = win.style.left;
+            win.dataset.originalWidth = win.style.width;
+            win.dataset.originalHeight = win.style.height;
+            win.style.top = "0";
+            win.style.left = "0";
+            win.style.width = "100%";
+            win.style.height = "100%";
+            win.dataset.maximized = "true";
+          }
+          OS.triggerEvent('windowMaximized', { windowId: win.dataset.windowId, maximized: win.dataset.maximized === "true" });
+        },
+        toggleMaximizeWindow: function(win) { this.maximizeWindow(win); },
+        closeWindow: function(win) {
+          const winId = win.dataset.windowId;
+          const taskbarWindows = document.getElementById("taskbar-windows");
+          const btn = taskbarWindows.querySelector(`button[data-window-id="${winId}"]`);
+          if(btn) btn.remove();
+          delete OS.runningWindows[winId];
+          win.remove();
+          OS.triggerEvent('windowClosed', { windowId: winId });
+        },
+        bringToFront: function(win) {
+          OS.zIndexCounter++;
+          win.style.zIndex = OS.zIndexCounter;
+          OS.triggerEvent('windowFocused', { windowId: win.dataset.windowId });
+        },
+        getWindow: function(windowId) { return OS.runningWindows[windowId]; }
+      },
+      // App Management API (unchanged for brevity)
+      AppManager: {
+        apps: {},
+        registerApp: function(appId, appDef) {
+          this.apps[appId] = appDef;
+          localStorage.setItem(`app_${appId}`, JSON.stringify(appDef));
+          OS.triggerEvent('appRegistered', { appId });
+          OS.updateSystemAppsUI();
+        },
+        launchApp: function(appId, options = {}) {
+          const appDef = this.apps[appId] || JSON.parse(localStorage.getItem(`app_${appId}`));
+          if (!appDef) return null;
+          const win = OS.WindowManager.createWindow(appDef.name, appDef.ui || '', {
+            appId: appId,
+            icon: appDef.icon || '🔳',
+            controls: appDef.windowControls
+          });
+          if (appDef.init) appDef.init(win, options);
+          OS.triggerEvent('appLaunched', { appId, windowId: win.dataset.windowId });
+          return win;
+        }
+      },
+      // Event System
+      on: function(eventName, callback) {
+        if (!this.eventListeners[eventName]) this.eventListeners[eventName] = [];
+        this.eventListeners[eventName].push(callback);
+      },
+      triggerEvent: function(eventName, data) {
+        if (this.eventListeners[eventName]) {
+          this.eventListeners[eventName].forEach(callback => callback(data));
+        }
+      },
+      // Utility Functions (unchanged for brevity)
+      makeDraggable: function(win, handle) {
+        let offsetX = 0, offsetY = 0;
+        handle.addEventListener("mousedown", function(e) {
+          if (win.dataset.maximized === "true") return;
+          offsetX = e.clientX - win.offsetLeft;
+          offsetY = e.clientY - win.offsetTop;
+          document.addEventListener("mousemove", mouseMove);
+          document.addEventListener("mouseup", mouseUp);
+        });
+        function mouseMove(e) {
+          let newLeft = e.clientX - offsetX;
+          let newTop = e.clientY - offsetY;
+          const desktopRect = document.getElementById("desktop").getBoundingClientRect();
+          newLeft = Math.max(0, Math.min(newLeft, desktopRect.width - win.offsetWidth));
+          newTop = Math.max(0, Math.min(newTop, desktopRect.height - win.offsetHeight));
+          win.style.left = newLeft + "px";
+          win.style.top = newTop + "px";
+        }
+        function mouseUp() {
+          document.removeEventListener("mousemove", mouseMove);
+          document.removeEventListener("mouseup", mouseUp);
+        }
+      },
+      makeResizable: function(win) {
+        const directions = ["top", "right", "bottom", "left", "top-left", "top-right", "bottom-left", "bottom-right"];
+        directions.forEach(direction => {
+          const resizer = document.createElement("div");
+          resizer.classList.add("resizer", direction);
+          win.appendChild(resizer);
+          resizer.addEventListener("mousedown", initResize);
+          function initResize(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const startWidth = parseInt(document.defaultView.getComputedStyle(win).width, 10);
+            const startHeight = parseInt(document.defaultView.getComputedStyle(win).height, 10);
+            const startLeft = win.offsetLeft;
+            const startTop = win.offsetTop;
+            const desktopRect = document.getElementById("desktop").getBoundingClientRect();
+            function doResize(e) {
+              let dx = e.clientX - startX;
+              let dy = e.clientY - startY;
+              let newWidth = startWidth;
+              let newHeight = startHeight;
+              let newLeft = startLeft;
+              let newTop = startTop;
+              if(direction.includes("right")) newWidth = startWidth + dx;
+              if(direction.includes("left")) { newWidth = startWidth - dx; newLeft = startLeft + dx; }
+              if(direction.includes("bottom")) newHeight = startHeight + dy;
+              if(direction.includes("top")) { newHeight = startHeight - dy; newTop = startTop + dy; }
+              if(newLeft < 0) { newWidth += newLeft; newLeft = 0; }
+              if(newTop < 0) { newHeight += newTop; newTop = 0; }
+              if(newLeft + newWidth > desktopRect.width) newWidth = desktopRect.width - newLeft;
+              if(newTop + newHeight > desktopRect.height) newHeight = desktopRect.height - newTop;
+              const minWidth = 100, minHeight = 50;
+              newWidth = Math.max(minWidth, newWidth);
+              newHeight = Math.max(minHeight, newHeight);
+              win.style.width = newWidth + "px";
+              win.style.height = newHeight + "px";
+              win.style.left = newLeft + "px";
+              win.style.top = newTop + "px";
+            }
+            function stopResize() {
+              document.removeEventListener("mousemove", doResize);
+              document.removeEventListener("mouseup", stopResize);
+            }
+            document.addEventListener("mousemove", doResize);
+            document.addEventListener("mouseup", stopResize);
+          }
+        });
+      },
+      createTaskbarWindowButton: function(win) {
+        const taskbarWindows = document.getElementById("taskbar-windows");
+        let btn = document.createElement("button");
+        btn.classList.add("taskbar-window-btn");
+        btn.setAttribute("data-window-id", win.dataset.windowId);
+        let icon = win.querySelector('.app-icon')?.innerText || '🔳';
+        btn.innerHTML = `<span class="taskbar-icon">${icon}</span>`;
+        btn.onclick = () => {
+          if(win.style.display === "none") {
+            win.style.display = "block";
+            OS.WindowManager.bringToFront(win);
+          } else {
+            OS.WindowManager.bringToFront(win);
+          }
+        };
+        taskbarWindows.appendChild(btn);
+      },
+      updateSystemAppsUI: function() {
+        const desktopIcons = document.getElementById("desktop-icons");
+        const startMenuList = document.getElementById("start-menu-list");
+        const taskbarPinned = document.getElementById("taskbar-pinned");
+        desktopIcons.innerHTML = startMenuList.innerHTML = taskbarPinned.innerHTML = "";
+        const allApps = { ...builtInApps.reduce((acc, app) => ({ ...acc, [app.id]: app }), {}), ...OS.AppManager.apps };
+        Object.values(allApps).forEach(app => {
           let icon = document.createElement("div");
           icon.className = "icon";
           icon.setAttribute("data-app", app.id);
           icon.innerHTML = `${app.icon || '🔳'}<br>${app.name}`;
+          icon.onclick = () => OS.AppManager.launchApp(app.id);
+          desktopIcons.appendChild(icon);
           let li = document.createElement("li");
           li.setAttribute("data-app", app.id);
           li.innerHTML = `${app.icon || '🔳'} ${app.name}`;
+          li.onclick = () => { OS.AppManager.launchApp(app.id); hideStartMenu(); };
+          startMenuList.appendChild(li);
+          let btn = document.createElement("button");
+          btn.setAttribute("data-app", app.id);
+          btn.title = app.name;
+          btn.innerHTML = `${app.icon || '🔳'}`;
+          btn.onclick = () => OS.AppManager.launchApp(app.id);
+          taskbarPinned.appendChild(btn);
+        });
       }
+    };
+    /***** Built-in Apps *****/
+    const builtInApps = [
+      {
+        id: "appInstaller",
+        name: "App Installer",
+        icon: "🛠",
+        init: function(win) {
+          win.querySelector(".window-content").innerHTML = `
+            <h3>Install App</h3>
+            <textarea id="app-json" placeholder="Paste App JSON here"></textarea><br>
+            <button id="install-app-btn">Install</button>
+            <hr>
+            <h3>Installed Apps</h3>
+            <div id="installed-apps-list"></div>
+          `;
+          win.querySelector("#install-app-btn").addEventListener("click", () => {
+            const jsonText = win.querySelector("#app-json").value;
+            try {
+              const appData = JSON.parse(jsonText);
+              if (!appData.id) throw new Error("App JSON must contain an 'id'");
+              OS.AppManager.registerApp(appData.id, appData);
+              win.querySelector("#app-json").value = "";
+              updateInstalledAppsList();
+            } catch (e) {
+              alert("Invalid JSON: " + e.message);
             }
+          });
+          function updateInstalledAppsList() {
+            const list = win.querySelector("#installed-apps-list");
+            list.innerHTML = Object.values(OS.AppManager.apps).map(app => `<div>${app.icon || '🔳'} ${app.name}</div>`).join("");
           }
+          updateInstalledAppsList();
         }
+      },
+      {
+        id: "fileExplorer",
+        name: "File Explorer",
+        icon: "📁",
+        init: function(win) {
+          win.dataset.currentPath = "/";
+          win.querySelector(".window-content").innerHTML = `
+            <div style="margin-bottom: 10px;">
+              <button id="new-file-btn">New File</button>
+              <button id="new-folder-btn">New Folder</button>
+              <button id="up-btn">Up</button>
+              <span id="current-path" style="margin-left: 10px;">/</span>
+            </div>
+            <div id="file-list"></div>
+          `;
+          win.querySelector("#new-file-btn").addEventListener("click", () => createNewFile());
+          win.querySelector("#new-folder-btn").addEventListener("click", () => createNewFolder());
+          win.querySelector("#up-btn").addEventListener("click", () => navigateUp());
+          win.querySelector("#file-list").addEventListener("contextmenu", showContextMenu);
+          updateFileList();
+          function updateFileList() {
+            const currentPath = win.dataset.currentPath;
+            console.log(`Updating file list for: ${currentPath}`);
+            const currentDir = OS.FileSystem.findItem(currentPath) || OS.FileSystem.getRoot();
+            win.querySelector("#current-path").textContent = currentPath;
+            const fileList = win.querySelector("#file-list");
+            fileList.innerHTML = currentDir.contents.map(item => `
+              <div style="padding: 5px; cursor: pointer;" data-path="${currentPath}${item.name}${item.type === 'directory' ? '/' : ''}">
+                ${item.type === "file" ? "📄" : "📁"} ${item.name}
+                ${item.type === "file" ? `<button class="open-btn" data-path="${currentPath}${item.name}">Open</button>` :
+                `<button class="enter-btn" data-path="${currentPath}${item.name}/">Enter</button>`}
+              </div>
+            `).join("");
+            fileList.querySelectorAll(".open-btn").forEach(btn => btn.addEventListener("click", () => OS.AppManager.launchApp("textViewer", { filePath: btn.dataset.path })));
+            fileList.querySelectorAll(".enter-btn").forEach(btn => btn.addEventListener("click", () => { win.dataset.currentPath = btn.dataset.path; updateFileList(); }));
+          }
+          function createNewFile() {
+            const filename = prompt("Enter file name:");
+            if (filename && OS.FileSystem.addItem(filename, "file", "New file content", null, win.dataset.currentPath)) {
+              updateFileList();
+            } else {
+              alert("Failed to create file!");
+            }
+          }
+          function createNewFolder() {
+            const foldername = prompt("Enter folder name:");
+            if (foldername && OS.FileSystem.addItem(foldername, "directory", "", null, win.dataset.currentPath)) {
+              updateFileList();
+            } else {
+              alert("Failed to create folder!");
+            }
+          }
+          function navigateUp() {
+            if (win.dataset.currentPath === "/") return;
+            const parts = win.dataset.currentPath.split('/').filter(p => p);
+            parts.pop();
+            win.dataset.currentPath = parts.length ? `/${parts.join('/')}/` : "/";
+            updateFileList();
+          }
+          function showContextMenu(e) {
+            e.preventDefault();
+            const target = e.target.closest("[data-path]");
+            if (target) {
+              const path = target.dataset.path;
+              const contextMenu = document.getElementById("file-context-menu");
+              contextMenu.style.top = e.clientY + "px";
+              contextMenu.style.left = e.clientX + "px";
+              contextMenu.style.display = "block";
+              contextMenu.querySelector("ul").dataset.path = path;
+              contextMenu.querySelector("[data-action='open']").style.display = OS.FileSystem.findItem(path)?.type === "file" ? "block" : "none";
+            }
+          }
+          OS.on('fileSystemChanged', updateFileList);
+          OS.on('itemAdded', updateFileList);
+          OS.on('itemRemoved', updateFileList);
+          OS.on('itemRenamed', updateFileList);
+          OS.on('fileWritten', updateFileList);
+        }
+      },
+      {
+        id: "textViewer",
+        name: "Text Viewer",
+        icon: "📄",
+        init: function(win, options) {
+          const filePath = options.filePath;
+          const content = OS.FileSystem.readFile(filePath) || "";
+          win.querySelector(".window-content").innerHTML = `<textarea style="width: 100%; height: 100%;">${content}</textarea>`;
+          win.querySelector("textarea").addEventListener("change", () => {
+            const newContent = win.querySelector("textarea").value;
+            if (OS.FileSystem.writeFile(filePath, newContent)) {
+              console.log(`Content updated for ${filePath}`);
+            } else {
+              alert("Failed to save file content!");
+            }
+          });
         }
       }
+    ];
+    /***** System Initialization *****/
+    builtInApps.forEach(app => OS.AppManager.registerApp(app.id, app));
+    document.getElementById("start-button").addEventListener("click", (e) => {
+      e.stopPropagation();
+      const startMenu = document.getElementById("start-menu");
+      startMenu.style.display = startMenu.style.display === "block" ? "none" : "block";
+    });
+    document.addEventListener("click", (e) => {
+      if (!document.getElementById("start-menu").contains(e.target) && e.target !== document.getElementById("start-button")) {
+        hideStartMenu();
       }
+      if (!e.target.closest('#file-context-menu')) {
+        document.getElementById("file-context-menu").style.display = "none";
       }
+      document.getElementById("custom-context-menu").style.display = "none";
+    });
     document.getElementById("desktop").addEventListener("contextmenu", function(e) {
       e.preventDefault();
+      const customContextMenu = document.getElementById("custom-context-menu");
       customContextMenu.style.display = "block";
       customContextMenu.style.top = e.clientY + "px";
       customContextMenu.style.left = e.clientX + "px";
     });
+    document.getElementById("custom-context-menu").addEventListener("click", function(e) {
       const option = e.target.getAttribute("data-custom");
+      if (option === "openCustomizer") {
+        // Placeholder for customizer app
+      } else if (option === "reset") {
         document.getElementById("desktop").style.background = "url('background.jpg') no-repeat center center fixed";
         document.getElementById("desktop").style.backgroundSize = "cover";
         document.getElementById("taskbar").style.background = "rgba(0,0,0,0.8)";
         document.getElementById("custom-css").innerHTML = "";
         alert("Customizations reset to default!");
       }
+      document.getElementById("custom-context-menu").style.display = "none";
+    });
+    document.getElementById("file-context-menu").addEventListener("click", (e) => {
+      const action = e.target.dataset.action;
+      const path = e.target.closest("ul").dataset.path;
+      const fileExplorerWin = OS.WindowManager.getWindow(Object.keys(OS.runningWindows).find(id => OS.runningWindows[id].dataset.appId === "fileExplorer"));
+      if (action === "open") {
+        OS.AppManager.launchApp("textViewer", { filePath: path });
+      } else if (action === "rename") {
+        const newName = prompt("Enter new name:");
+        if (newName && OS.FileSystem.renameItem(path, newName)) {
+          if (fileExplorerWin) updateFileExplorer(fileExplorerWin);
+        } else {
+          alert("Failed to rename item!");
+        }
+      } else if (action === "delete") {
+        if (confirm("Are you sure you want to delete this item?") && OS.FileSystem.removeItem(path)) {
+          if (fileExplorerWin) updateFileExplorer(fileExplorerWin);
+        } else {
+          alert("Failed to delete item!");
+        }
+      }
+      document.getElementById("file-context-menu").style.display = "none";
     });
+    function updateFileExplorer(win) {
+      const updateFileList = () => {
+        const currentPath = win.dataset.currentPath;
+        const currentDir = OS.FileSystem.findItem(currentPath) || OS.FileSystem.getRoot();
+        win.querySelector("#current-path").textContent = currentPath;
+        const fileList = win.querySelector("#file-list");
+        fileList.innerHTML = currentDir.contents.map(item => `
+          <div style="padding: 5px; cursor: pointer;" data-path="${currentPath}${item.name}${item.type === 'directory' ? '/' : ''}">
+            ${item.type === "file" ? "📄" : "📁"} ${item.name}
+            ${item.type === "file" ? `<button class="open-btn" data-path="${currentPath}${item.name}">Open</button>` :
+            `<button class="enter-btn" data-path="${currentPath}${item.name}/">Enter</button>`}
+          </div>
+        `).join("");
+        fileList.querySelectorAll(".open-btn").forEach(btn => btn.addEventListener("click", () => OS.AppManager.launchApp("textViewer", { filePath: btn.dataset.path })));
+        fileList.querySelectorAll(".enter-btn").forEach(btn => btn.addEventListener("click", () => { win.dataset.currentPath = btn.dataset.path; updateFileList(); }));
+      };
+      updateFileList();
+    }
+    function hideStartMenu() {
+      document.getElementById("start-menu").style.display = "none";
+    }
     document.addEventListener("DOMContentLoaded", () => {
+      OS.FileSystem.init();
+      OS.updateSystemAppsUI();
     });
   </script>
 </body>
+</html>