Spaces:

Ramesh-vani
/

nottri-os

Running

App Files Files Community

Ramesh-vani commited on Mar 6

Commit

a0d68c2

verified ·

1 Parent(s): 2c9d056

Update index.html

Browse files

Files changed (1) hide show

index.html +770 -18

index.html CHANGED Viewed

@@ -1,19 +1,771 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Advanced Windows-like System with App Icons and Time</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%;
+      height: 100%;
+      background: url('background.jpg') no-repeat center center fixed;
+      background-size: cover;
+    }
+    #desktop-icons {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .icon {
+      width: 80px;
+      height: 80px;
+      margin: 10px;
+      background: rgba(0,0,0,0.5);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      cursor: pointer;
+      border-radius: 5px;
+      font-size: 14px;
+    }
+    /* Taskbar */
+    #taskbar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 40px;
+      background: rgba(0,0,0,0.8);
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      padding: 0 5px;
+    }
+    /* Left side of Taskbar (Start button, pinned apps, running windows) */
+    #taskbar-left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+    #start-button {
+      background: #0078d7;
+      color: white;
+      border: none;
+      padding: 5px 10px;
+      cursor: pointer;
+      margin-right: 10px;
+    }
+    /* Pinned Apps on Taskbar */
+    #taskbar-pinned {
+      display: flex;
+      align-items: center;
+    }
+    #taskbar-pinned button {
+      background: transparent;
+      border: none;
+      color: white;
+      margin-right: 5px;
+      font-size: 18px;
+      cursor: pointer;
+    }
+    /* Running Apps: each window gets its own tab (only icon) */
+    #taskbar-windows {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+    }
+    #taskbar-windows button {
+      background: #555;
+      border: none;
+      color: white;
+      padding: 3px 8px;
+      margin: 0 2px;
+      cursor: pointer;
+      border-radius: 3px;
+      font-size: 13px;
+    }
+    .taskbar-icon {
+      font-size: 16px;
+      display: inline-block;
+    }
+    /* Right side of Taskbar: current time display */
+    #taskbar-right {
+      color: white;
+      font-size: 14px;
+      padding-right: 10px;
+      display: flex;
+      align-items: center;
+    }
+    /* Start Menu */
+    #start-menu {
+      position: absolute;
+      bottom: 45px;
+      left: 10px;
+      width: 200px;
+      background: #fff;
+      border: 1px solid #ccc;
+      display: none;
+      z-index: 1001;
+    }
+    #start-menu ul { list-style: none; }
+    #start-menu li {
+      padding: 10px;
+      cursor: pointer;
+      border-bottom: 1px solid #eee;
+    }
+    #start-menu li:hover { background: #f0f0f0; }
+    /* Window Styles */
+    .window {
+      position: absolute;
+      width: 400px;
+      height: 300px;
+      min-height: 200px;
+      background: #fff;
+      border: 1px solid #333;
+      box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
+      z-index: 200;
+      overflow: hidden;
+    }
+    .window-header {
+      background: #0078d7;
+      color: #fff;
+      padding: 5px;
+      cursor: move;
+      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;
+      border: none;
+      color: #fff;
+      cursor: pointer;
+      margin-left: 5px;
+      font-size: 14px;
+    }
+    .window-content {
+      padding: 10px;
+      overflow-y: auto;
+      max-height: calc(100% - 40px);
+    }
+    /* Resizer Styles */
+    .resizer {
+      position: absolute;
+      background: transparent;
+      z-index: 10;
+    }
+    .resizer.top { top: -5px; left: 0; width: 100%; height: 10px; cursor: ns-resize; }
+    .resizer.right { right: -5px; top: 0; width: 10px; height: 100%; cursor: ew-resize; }
+    .resizer.bottom { bottom: -5px; left: 0; width: 100%; height: 10px; cursor: ns-resize; }
+    .resizer.left { left: -5px; top: 0; width: 10px; height: 100%; cursor: ew-resize; }
+    .resizer.top-left { top: -5px; left: -5px; width: 10px; height: 10px; cursor: nwse-resize; }
+    .resizer.top-right { top: -5px; right: -5px; width: 10px; height: 10px; cursor: nesw-resize; }
+    .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;
+      border: 1px solid #ccc;
+      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: each window gets its own tab (only icon) -->
+      </div>
+    </div>
+    <div id="taskbar-right">
+      <!-- Current Time Display -->
+    </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";
+      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)); }
+      // Create taskbar button after appIcon is set (if not already created)
+      createTaskbarWindowButton(win);
+      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 is 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 *****/
+    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);
+      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 all 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)";
+        document.getElementById("taskbar").style.height = "40px";
+        document.getElementById("start-menu").style.background = "#fff";
+        document.getElementById("start-menu").style.color = "#000";
+        document.getElementById("custom-css").innerHTML = "";
+        alert("Customizations reset to default!");
+      }
+      customContextMenu.style.display = "none";
+    });
+    /***** Current Time Display *****/
+    function updateTime() {
+      const timeElem = document.getElementById("taskbar-right");
+      const now = new Date();
+      timeElem.innerText = now.toLocaleTimeString();
+    }
+    setInterval(updateTime, 1000);
+    updateTime();
+    /***** Attach Static Events for Built-In Apps *****/
+    document.addEventListener("DOMContentLoaded", () => {
+      updateSystemAppsUI();
+    });
+  </script>
+</body>
 </html>