<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple OS</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <style>#spreadsheet-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
}
#spreadsheet-content .file-details {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}
#spreadsheet-content .file-details input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
#spreadsheet-content .file-details button {
    padding: 8px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}

#spreadsheet-content .file-details button:hover {
    background-color: #0056b3;
}

.spreadsheet {
    display: grid;
    border: 1px solid #ccc;
    overflow: auto;
    flex: 1;
    box-sizing: border-box;
}
#paint-window .window-body{
  padding: 5px;
   display: flex;
   flex-direction: column;
}
 #paint-controls{
    margin-bottom: 8px;
      display:flex;
    align-items:center;
   gap: 6px;
 }

#paint-canvas {
    border: 1px solid #ccc;
    cursor: crosshair;
     background-color: #fff;
    flex: 1;
    box-sizing:border-box;
}
.spreadsheet-cell {
    border: 1px solid #ddd;
    padding: 5px;
    min-width: 80px;
     min-height: 20px;
    text-align: left;
    box-sizing: border-box;
    font-size: 13px;
      white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spreadsheet-cell:focus {
    outline: none;
    background-color: #f0f0f0;
}
        body{margin:0;font-family:'Roboto',sans-serif;background:linear-gradient(135deg,#e0eafc,#cfdef3);overflow:hidden;user-select:none}.desktop{position:relative;width:100%;height:100vh;box-sizing:border-box;overflow:hidden}.desktop-icons{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:10px;z-index:1}.desktop-icon{display:flex;flex-direction:column;align-items:center;color:#333;cursor:pointer;font-size:13px;padding:8px;border-radius:8px;transition:background-color .2s ease}.desktop-icon i{font-size:24px;margin-bottom:4px}.desktop-icon:hover{background-color:rgba(0,0,0,.07)}#notepad-text{white-space:pre-wrap;outline:none}.taskbar{position:absolute;bottom:0;left:0;width:100%;height:50px;background-color:rgba(255,255,255,.8);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;padding:0 15px;box-shadow:0 -2px 8px rgba(0,0,0,.15);transition:height .3s ease;z-index:100;box-sizing:border-box}.taskbar .start-menu{display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 10px;border-radius:10px;transition:background-color .2s ease}.taskbar .start-menu:hover{background-color:rgba(0,0,0,.07)}.taskbar .start-menu i{font-size:26px;color:#333;transition:transform .2s ease}.taskbar .start-menu:active i{transform:scale(.95)}.taskbar .start-dropdown{position:absolute;bottom:60px;left:15px;background-color:#fff;border-radius:12px;width:300px;padding:15px;box-shadow:0 4px 12px rgba(0,0,0,.2);display:none;flex-direction:column;gap:10px;z-index:101;transform-origin:bottom left;transition:transform .2s ease,opacity .2s ease}.taskbar .start-dropdown.active{display:flex;transform:scaleY(1);opacity:1}.taskbar .start-dropdown{transform:scaleY(0);opacity:0}.taskbar .start-dropdown .app-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.taskbar .start-dropdown .app-list div{display:flex;flex-direction:column;align-items:center;color:#333;font-size:13px;cursor:pointer;padding:8px;border-radius:8px;transition:background-color .2s ease}.taskbar .start-dropdown .app-list div:hover{background-color:rgba(0,0,0,.07)}.taskbar .start-dropdown .app-list div i{font-size:24px;margin-bottom:4px}.taskbar .clock{font-size:14px;color:#333;font-weight:500}.taskbar .apps-list{display:flex;gap:8px;overflow-x:auto;padding:0 8px}.taskbar .apps-list::-webkit-scrollbar{height:6px}.taskbar .apps-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:5px}.taskbar .apps-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:5px}.taskbar .apps-list::-webkit-scrollbar-thumb:hover{background:#bbb}.taskbar .apps-list .taskbar-app{background-color:rgba(0,0,0,.05);color:#333;padding:7px 10px;border-radius:10px;display:flex;align-items:center;gap:5px;cursor:pointer;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;flex-shrink:0;font-size:13px}.taskbar .apps-list .taskbar-app:hover{background-color:rgba(0,0,0,.1)}.taskbar .apps-list .taskbar-app .close-btn{background:none;border:none;color:#666;font-size:13px;cursor:pointer;opacity:0;transition:opacity .2s ease;margin-left:3px}.taskbar .apps-list .taskbar-app:hover .close-btn{opacity:1}.window{position:absolute;width:500px;height:350px;background:#fff;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.2);color:#333;display:none;transition:transform .2s ease,opacity .2s ease;z-index:10;box-sizing:border-box;border:1px solid rgba(0,0,0,.08)}.window.active{display:block}.window-header{background-color:#f8f9fa;color:#333;padding:8px 12px;border-radius:11px 11px 0 0;display:flex;justify-content:space-between;align-items:center;cursor:move;border-bottom:1px solid rgba(0,0,0,.08)}.window-header span{font-size:16px;font-weight:500}.window-header button{background:none;border:none;color:#666;font-size:16px;cursor:pointer;transition:color .2s ease,transform .1s ease;margin-left:6px}.window-header button:hover{color:#333}.window-header button:active{transform:scale(.9)}.window-body{padding:15px;text-align:center;overflow:hidden;display:flex;flex-direction:column;height:calc(100% - 40px);box-sizing:border-box}.window .resize-handle{position:absolute;bottom:0;right:0;width:12px;height:12px;background-color:#ddd;cursor:se-resize;border-radius:2px 0 0 0}.calculator{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;padding:8px}.calculator button{background-color:#eee;color:#333;font-size:18px;border:none;padding:10px;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.calculator button:hover{background-color:#ddd}.calculator input{grid-column:span 4;padding:10px;font-size:20px;text-align:right;border:1px solid #ccc;background-color:#fff;color:#333;border-radius:6px;margin-bottom:8px}#browser-toolbar{display:flex;gap:8px;margin-bottom:12px}#url-input{flex:1;padding:8px;border:1px solid #ccc;border-radius:6px;font-size:14px}#go-button{padding:8px 12px;background-color:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:background-color .2s ease}#go-button:hover{background-color:#0056b3}#browser-frame{flex:1;border:none;border-radius:6px}#games-content{display:flex;justify-content:center;align-items:center;height:100%}#games-content p{font-size:20px}#notepad-text{flex:1;border:none;outline:none;resize:none;padding:8px;box-sizing:border-box;font-size:14px}#code-editor-content{flex:1;padding:8px;display:flex;flex-direction:column;overflow:hidden}#code-editor-content .editor-textarea{flex:1;width:100%;height:100%;border:none;outline:none;resize:none;box-sizing:border-box;font-size:14px;font-family:monospace}#code-editor-content .file-details{display:flex;margin-bottom:10px;justify-content:space-between}#code-editor-content .file-details input{padding:5px;border:1px solid #ccc;border-radius:6px}#code-editor-content .file-details button{padding:8px;border:none;border-radius:4px;background-color:#007bff;color:#fff;cursor:pointer;transition:background-color .2s ease}#code-editor-content .file-details button:hover{background-color:#0056b3}#file-explorer-content{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;height:100%}.file-item{background-color:#eee;padding:8px;border-radius:6px;display:flex;align-items:center;gap:6px;cursor:pointer;transition:background-color .2s ease}.file-item:hover{background-color:#ddd}.file-item i{font-size:20px}#image-viewer-content{display:flex;justify-content:center;align-items:center;height:100%;padding:10px}#image-viewer-content img{max-width:90%;max-height:90%;border-radius:6px}#music-player-content{display:flex;flex-direction:column;align-items:center;padding:20px;gap:10px}#music-player-container{width:100%;overflow-y:auto}.soundcloud-player{margin-bottom:10px;width:100%;height:300px;border:none;border-radius:6px}#music-player-content button{background:none;border:1px solid #ccc;padding:8px;cursor:pointer;border-radius:4px}#search-input{margin-bottom:10px;padding:8px;border:1px solid #ccc;border-radius:4px}#search-results{display:flex;flex-direction:column;max-height:150px;overflow-y:auto}.search-item{padding:8px;border-radius:6px;cursor:pointer;background-color:#eee;transition:background-color .2s ease}.search-item:hover{background-color:#ddd}.context-menu{position:absolute;background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:2px 2px 5px rgba(0,0,0,.2);padding:5px 0;display:none;z-index:200}.context-menu.active{display:block}.context-menu-item{padding:8px 15px;cursor:pointer;transition:background-color .2s ease}.context-menu-item:hover{background-color:#f0f0f0}.context-menu-separator{border-bottom:1px solid #eee;margin:3px 0}
    </style>
</head>
<body>
    <div class="desktop" id="desktop">
        <div class="desktop-icons" id="desktop-icons">
        </div>
        <div class="context-menu" id="context-menu">
           <div class="context-menu-item" onclick="createFile('txt')"><i class="fa fa-file-alt"></i>New Text File</div>
           <div class="context-menu-item" onclick="createFile('spreadsheet')"><i class="fas fa-table"></i>New Spreadsheet File</div>
           <div class="context-menu-item" onclick="createFile('Paint')"><i class="fas fa-code"></i>New Paint File</div>
              <div class="context-menu-separator"></div>
             <div class="context-menu-item"> <i class="fa fa-info-circle"></i>  About </div>
        </div>
         <div class="window" id="spreadsheet-window">
    <div class="window-header" id="spreadsheet-header">
        <span>Spreadsheet</span>
        <div>
            <button onclick="minimizeWindow('spreadsheet-window')">_</button>
            <button onclick="closeWindow('spreadsheet-window')">X</button>
        </div>
    </div>
    <div class="window" id="paint-window">
    <div class="window-header" id="paint-header">
        <span>Paint</span>
        <div>
            <button onclick="minimizeWindow('paint-window')">_</button>
            <button onclick="closeWindow('paint-window')">X</button>
        </div>
    </div>
    <div class="window-body">
       <div id="paint-controls">
          <input type="color" id="paint-color" value="#000000"/>
            <input type="range" id="brush-size" min="1" max="20" value="5"/>
           <button onclick="savePaintFile()">Save Paint</button>
            <input type="text" placeholder="File Name" id="paint-file-name" value="new-paint" />
        </div>
         <canvas id="paint-canvas"></canvas>
    </div>
     <div class="resize-handle"></div>
</div>
    <div class="window-body">
         <div id="spreadsheet-content">
            <div class="file-details">
                <input type="text" placeholder="File Name" id="spreadsheet-file-name" value="new-spreadsheet" />
                <button onclick="saveSpreadsheetFile()">Save File</button>
            </div>
              <div class="spreadsheet" id="spreadsheet-table"></div>
         </div>
    </div>
     <div class="resize-handle"></div>
</div>
        <div class="window" id="browser-window">
           <div class="window-header" id="browser-header"><span>Browser</span><div><button onclick="minimizeWindow('browser-window')">_</button><button onclick="closeWindow('browser-window')">X</button></div></div><div class="window-body"><div id="browser-toolbar"><input type="text" id="url-input" placeholder="Enter website URL here" /><button id="go-button" onclick="loadWebsite()">GO</button></div><iframe id="browser-frame" src="https://example.com"></iframe></div><div class="resize-handle"></div></div><div class="window" id="calculator-window"><div class="window-header" id="calculator-header"><span>Calculator</span><div><button onclick="minimizeWindow('calculator-window')">_</button><button onclick="closeWindow('calculator-window')">X</button></div></div><div class="window-body"><div class="calculator"><input type="text" id="calculator-display" disabled /><button onclick="appendToDisplay('7')">7</button><button onclick="appendToDisplay('8')">8</button><button onclick="appendToDisplay('9')">9</button><button onclick="appendToDisplay('/')">/</button><button onclick="appendToDisplay('4')">4</button><button onclick="appendToDisplay('5')">5</button><button onclick="appendToDisplay('6')">6</button><button onclick="appendToDisplay('*')">*</button><button onclick="appendToDisplay('1')">1</button><button onclick="appendToDisplay('2')">2</button><button onclick="appendToDisplay('3')">3</button><button onclick="appendToDisplay('-')">-</button><button onclick="appendToDisplay('0')">0</button><button onclick="appendToDisplay('.')">.</button><button onclick="clearDisplay()">C</button><button onclick="appendToDisplay('+')">+</button><button onclick="calculate()">=</button></div></div><div class="resize-handle"></div></div><div class="window" id="settings-window"><div class="window-header" id="settings-header"><span>Settings</span><div><button onclick="minimizeWindow('settings-window')">_</button><button onclick="closeWindow('settings-window')">X</button></div></div><div class="window-body"><p>Settings Content</p></div><div class="resize-handle"></div></div><div class="window" id="games-window"><div class="window-header" id="games-header"><span>Games</span><div><button onclick="minimizeWindow('games-window')">_</button><button onclick="closeWindow('games-window')">X</button></div></div><div class="window-body"><div id="games-content"><p>Games content will appear here in the future</p></div></div><div class="resize-handle"></div></div><div class="window" id="notepad-window"><div class="window-header" id="notepad-header"><span>Notepad</span><div><button onclick="minimizeWindow('notepad-window')">_</button><button onclick="closeWindow('notepad-window')">X</button></div></div><div class="window-body"><textarea id="notepad-text"></textarea></div><div class="resize-handle"></div></div><div class="window" id="file-explorer-window"><div class="window-header" id="file-explorer-header"><span>File Explorer</span><div><button onclick="minimizeWindow('file-explorer-window')">_</button><button onclick="closeWindow('file-explorer-window')">X</button></div></div><div class="window-body"><div id="file-explorer-content"></div></div><div class="resize-handle"></div></div><div class="window" id="image-viewer-window"><div class="window-header" id="image-viewer-header"><span>Image Viewer</span><div><button onclick="minimizeWindow('image-viewer-window')">_</button><button onclick="closeWindow('image-viewer-window')">X</button></div></div><div class="window-body"><div id="image-viewer-content"><img src="https://placekitten.com/300/200" alt="Example Image" /></div></div><div class="resize-handle"></div></div><div class="window" id="music-player-window"><div class="window-header" id="music-player-header"><span>Music Player</span><div><button onclick="minimizeWindow('music-player-window')">_</button><button onclick="closeWindow('music-player-window')">X</button></div></div><div class="window-body"><div id="music-player-content"><input type="text" id="search-input" placeholder="Search SoundCloud Song or Artist" /><button onclick="searchSoundCloud()">Search</button><div id="search-results"></div><div id="music-player-container"></div></div></div><div class="resize-handle"></div></div>
    </div>
  <div class="taskbar" id="taskbar"><div class="start-menu" onclick="toggleStartMenu()"><i class="fa fa-bars"></i></div><div class="start-dropdown" id="start-dropdown"><div class="app-list"><div onclick="openWindow('calculator-window')"><i class="fa fa-calculator"></i><span>Calculator</span></div><div onclick="openWindow('settings-window')"><i class="fa fa-cogs"></i><span>Settings</span></div><div onclick="openWindow('browser-window')"><i class="fa fa-globe"></i><span>Browser</span></div><div onclick="openWindow('games-window')"><i class="fa fa-gamepad"></i><span>Games</span></div><div onclick="openWindow('notepad-window')"><i class="fa fa-file-alt"></i><span>Notepad</span></div><div onclick="openWindow('file-explorer-window')"><i class="fa fa-folder-open"></i><span>File Explorer</span></div><div onclick="openWindow('image-viewer-window')"><i class="fa fa-image"></i><span>Image Viewer</span></div><div onclick="openWindow('music-player-window')"><i class="fa fa-music"></i><span>Music Player</span></div><div onclick="openWindow('spreadsheet-window')"><i class="fas fa-table"></i><span>Spreadsheet</span></div></div></div><div class="clock" id="clock"></div><div class="apps-list" id="apps-list"></div></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  
  
  
  
<script>
        const fileSystem = { desktop: { type: 'folder', children: {} } };
      const fileIcons = {
        txt: '<i class="fa fa-file-alt"></i>',
        html: '<i class="fa fa-code"></i>',
        js: '<i class="fa fa-file-code"></i>',
        css: '<i class="fa fa-css3"></i>',
        python: '<i class="fab fa-python"></i>',
        folder:'<i class="fa fa-folder"></i>',
        image:'<i class="fa fa-file-image"></i>',
        audio:'<i class="fa fa-file-audio"></i>',
        spreadsheet: '<i class="fas fa-table"></i>',
        paint: '<i class="fas fa-paint-brush"></i>'
    };

    const updateFileExplorer = () => {
        let fileExplorerContent = document.getElementById('file-explorer-content');
        fileExplorerContent.innerHTML = '';
        for (const fileName in fileSystem.desktop.children) {
            const file = fileSystem.desktop.children[fileName];
            let fileItem = document.createElement('div');
            fileItem.classList.add('file-item');
            fileItem.innerHTML = getFileIcon(fileName)
            fileItem.innerHTML += `<span>${fileName}</span>`;
             fileItem.addEventListener('click', () => editFile(fileName));
            fileExplorerContent.appendChild(fileItem);
        }
    };

    const getFileIcon = (fileName) => {
      const extension = fileName.split(".").pop();
        return fileIcons[extension] || '<i class="fa fa-file"></i>';
      };

    const createFile = (extension, content = '') => {
      let baseFileName = `New File.${extension}`;
        let counter = 1;
        let fileName = baseFileName;
        while (fileSystem.desktop.children[fileName]) {
          fileName = `New File (${counter}).${extension}`;
          counter++;
        }
        fileSystem.desktop.children[fileName] = { type: 'file', content: content, extension: extension };
          updateFileExplorer();
            showContextMenu(false);
        createDesktopIcon(fileName);
    };

 const editFile = (fileName) => {
        const file = fileSystem.desktop.children[fileName];
        if (!file) return;
          activeFile = fileName;
         document.getElementById('spreadsheet-file-name').value = fileName;
       document.getElementById('paint-file-name').value = fileName;
      if (file.extension == 'txt') {
            document.getElementById('notepad-text').value = file.content;
           openWindow('notepad-window');
       } else if(file.extension == 'spreadsheet'){
          openSpreadsheet(fileName);
       }else if(file.extension == 'paint'){
          openPaint(fileName);
        }else if (['html', 'js', 'css', 'python'].includes(file.extension)) {
          let codeEditorText = document.getElementById('code-editor-text');
               codeEditorText.value = file.content;
                openWindow('code-editor-window');
                 codeEditorText.dispatchEvent(new Event('input'));
          }

};
    let activeFile = null;
    const updateClock = () => {
        const now = new Date();
          const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
       const date = now.toLocaleDateString();
       document.getElementById('clock').textContent = `${time} ${date}`;
      };
    setInterval(updateClock, 1000);
    const toggleStartMenu = () => {
    document.getElementById('start-dropdown').classList.toggle('active');
     };
    const windowData = {
         'paint-window':{ name:'Paint',width:600,height:500 },
          'spreadsheet-window': { name: 'Spreadsheet', width: 700, height: 500 },
            'browser-window': { name: 'Browser', width: 500, height: 350 },
            'calculator-window': { name: 'Calculator', width: 300, height: 400 },
            'settings-window': { name: 'Settings', width: 400, height: 300 },
            'games-window': { name: 'Games', width: 500, height: 300 },
            'notepad-window': { name: 'Notepad', width: 500, height: 400 },
            'file-explorer-window': { name: 'File Explorer', width: 500, height: 350 },
            'image-viewer-window': { name: 'Image Viewer', width: 500, height: 400 },
             'music-player-window': { name: 'Music Player', width: 500, height: 450 }
        };

    const openWindow = (windowId) => {
            let windowElement = document.getElementById(windowId);
            if (windowElement) {
                 windowElement.classList.add('active');
                 addAppToTaskbar(windowId);
            }
        };
        const closeWindow = (windowId) => {
            let windowElement = document.getElementById(windowId);
            if (windowElement) {
                windowElement.classList.remove('active');
                removeAppFromTaskbar(windowId);
            }
        };
       const minimizeWindow = (windowId) => {
            document.getElementById(windowId).style.display = 'none';
        };
      const addAppToTaskbar = (windowId) => {
           const appsList = document.getElementById('apps-list');
              if (document.getElementById(windowId + '-taskbar')) return;
            const taskbarApp = document.createElement('div');
           taskbarApp.classList.add('taskbar-app');
          taskbarApp.id = windowId + '-taskbar';
            taskbarApp.innerHTML = `<span>${windowData[windowId]?.name || windowId}</span><button class="close-btn" onclick="closeWindow('${windowId}')">X</button>`;
             appsList.appendChild(taskbarApp);
        };
     const removeAppFromTaskbar = (windowId) => {
           let taskbarApp = document.getElementById(windowId + '-taskbar');
              if (taskbarApp) {
               document.getElementById('apps-list').removeChild(taskbarApp);
             }
        };
        const appendToDisplay = (value) => {
            document.getElementById('calculator-display').value += value;
        };
        const clearDisplay = () => {
            document.getElementById('calculator-display').value = '';
        };
    const calculate = () => {
            try {
                document.getElementById('calculator-display').value = eval(document.getElementById('calculator-display').value) || 'Error';
           } catch (e) {
                document.getElementById('calculator-display').value = 'Error';
            }
        };
        const loadWebsite = () => {
              const urlInput = document.getElementById('url-input').value;
            const iframe = document.getElementById('browser-frame');
          const url = urlInput.startsWith('http://') || urlInput.startsWith('https://') ? urlInput : 'https://' + urlInput;
           iframe.src = url;
       };
        const searchSoundCloud = async () => {
            const searchInput = document.getElementById('search-input').value;
            const searchResultsContainer = document.getElementById('search-results');
             const musicPlayerContainer = document.getElementById('music-player-container');
              searchResultsContainer.innerHTML = '';
               musicPlayerContainer.innerHTML = '';
            if(!searchInput) return;
              try {
                const response = await fetch(`https://api.soundcloud.com/search?q=${encodeURIComponent(searchInput)}&client_id=YOUR_CLIENT_ID_HERE`);
            if (!response.ok) {searchResultsContainer.innerHTML = '<p style="color: red;">Error.</p>';return;  }
                 const data = await response.json();
             if(data && data.collection){ data.collection.forEach(item => {if (item.kind === 'track') {const searchItem = document.createElement('div');
             searchItem.classList.add('search-item');
                  searchItem.textContent = `${item.title} - ${item.user.username}`;
                   searchItem.addEventListener('click', () => {
                      loadSoundCloudTrack(item.permalink_url);searchResultsContainer.innerHTML = '';  });
                     searchResultsContainer.appendChild(searchItem);}});
                     if (searchResultsContainer.children.length === 0)  searchResultsContainer.innerHTML = '<p>Not Found</p>';
                } else searchResultsContainer.innerHTML = '<p>No results.</p>';
             } catch (error) { searchResultsContainer.innerHTML = '<p style="color: red;">Error:.</p>';}  };

            const loadSoundCloudTrack = (trackURL) => {
           const musicPlayerContainer = document.getElementById('music-player-container');
               const soundCloudIframe = document.createElement('iframe');
              soundCloudIframe.classList.add('soundcloud-player');
             soundCloudIframe.src = `https://w.soundcloud.com/player/?url=${encodeURIComponent(trackURL)}`;
            soundCloudIframe.frameborder = '0';soundCloudIframe.allowfullscreen = '';soundCloudIframe.loading = 'lazy';
             musicPlayerContainer.innerHTML = '';musicPlayerContainer.appendChild(soundCloudIframe);
         };
           document.getElementById('desktop').addEventListener('contextmenu', e => {e.preventDefault();showContextMenu(true, e.clientX, e.clientY)});
       const showContextMenu=(show,x=0,y=0)=>{const menu=document.getElementById('context-menu');if(show){menu.style.left=`${x}px`,menu.style.top=`${y}px`,menu.classList.add('active')}else menu.classList.remove('active')};document.addEventListener('click',e=>{showContextMenu(!1)}); updateFileExplorer()
        Object.keys(windowData).forEach(id=>{const windowElement=document.getElementById(id),header=windowElement.querySelector('.window-header');let offsetX,offsetY;header.addEventListener('mousedown',e=>{offsetX=e.clientX-windowElement.getBoundingClientRect().left,offsetY=e.clientY-windowElement.getBoundingClientRect().top;const onMouseMove=e=>{windowElement.style.left=`${e.clientX-offsetX}px`,windowElement.style.top=`${e.clientY-offsetY}px`},onMouseUp=()=>{document.removeEventListener('mousemove',onMouseMove),document.removeEventListener('mouseup',onMouseUp)};document.addEventListener('mousemove',onMouseMove),document.addEventListener('mouseup',onMouseUp)})
     const resizeHandle = windowElement.querySelector('.resize-handle'),
         makeResizable=()=>{ let isResizing=!1,offsetX,offsetY,initialWidth,initialHeight;resizeHandle.addEventListener('mousedown',e=>{isResizing=!0,offsetX=e.clientX,offsetY=e.clientY,initialWidth=windowElement.offsetWidth,initialHeight=windowElement.offsetHeight;const onMouseMove=e=>{if(!isResizing)return;const dx=e.clientX-offsetX,dy=e.clientY-offsetY;windowElement.style.width=`${initialWidth+dx}px`,windowElement.style.height=`${initialHeight+dy}px`},onMouseUp=()=>{isResizing=!1,document.removeEventListener('mousemove',onMouseMove),document.removeEventListener('mouseup',onMouseUp)};document.addEventListener('mousemove',onMouseMove),document.addEventListener('mouseup',onMouseUp)})
        };makeResizable(id)
       });

     const createDesktopIcon = (fileName) => {
          const desktopIcons = document.getElementById('desktop-icons');
          const icon = document.createElement('div');
           icon.classList.add('desktop-icon');
           icon.innerHTML = getFileIcon(fileName)
           icon.innerHTML += `<span>${fileName}</span>`;
           icon.draggable = true;
            icon.ondragstart = (event) => {
                event.dataTransfer.setData('text', fileName);
            };
          icon.addEventListener('dblclick',()=> editFile(fileName))
            desktopIcons.appendChild(icon);
            makeDesktopIconDraggable(icon);
    };

       const makeDesktopIconDraggable=(icon)=>{
        let offsetX,offsetY;
            icon.addEventListener('mousedown',e=>{
            offsetX = e.clientX - icon.getBoundingClientRect().left;
              offsetY = e.clientY - icon.getBoundingClientRect().top;

                const onMouseMove = (e) => {
                     icon.style.left = `${e.clientX - offsetX}px`;
                     icon.style.top = `${e.clientY - offsetY}px`;
                   };
              const onMouseUp = () => {
                 document.removeEventListener('mousemove', onMouseMove);
                  document.removeEventListener('mouseup', onMouseUp);
              };

            document.addEventListener('mousemove', onMouseMove);
             document.addEventListener('mouseup', onMouseUp);
        });
     }
   const removeDesktopIcon = (fileName) => {
        const desktopIcons = document.getElementById('desktop-icons');
       const iconToRemove = Array.from(desktopIcons.children).find(icon => icon.textContent.includes(fileName));
         if(iconToRemove){
           desktopIcons.removeChild(iconToRemove)
         }
    };
    //Initial Desktop Icons
    createDesktopIcon('Calculator')
    createDesktopIcon('Browser')
    createDesktopIcon('Notepad')
    createDesktopIcon('File Explorer')
    createDesktopIcon('Spreadsheet')
    createDesktopIcon('Paint')
    createDesktopIcon('Music Player')
    createDesktopIcon('Games')
    createDesktopIcon('Image Viewer')
    createDesktopIcon('Settings')

   //spreadsheet app
    const spreadsheetData = {};
    const rows = 20;
    const cols = 10;
    const createSpreadsheetTable = (tableId) => {
       const spreadsheetTable = document.getElementById(tableId);
        spreadsheetTable.innerHTML = '';
        spreadsheetTable.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
        for (let i = 0; i < rows; i++) {
             for (let j = 0; j < cols; j++) {
                 const cell = document.createElement('div');
                    cell.classList.add('spreadsheet-cell');
                     cell.contentEditable = true;
                   cell.dataset.row = i;
                     cell.dataset.col = j;
                   cell.addEventListener('blur', ()=> updateSpreadsheetData(cell));
                     spreadsheetTable.appendChild(cell);
                 }
         }
    };

 const updateSpreadsheetData = (cell) => {
    const row = cell.dataset.row;
        const col = cell.dataset.col;
         const fileName = document.getElementById('spreadsheet-file-name').value;
    if(!spreadsheetData[fileName]) spreadsheetData[fileName] = {};
       if(!spreadsheetData[fileName][row]) spreadsheetData[fileName][row] = {};
       spreadsheetData[fileName][row][col] = cell.textContent;

    };

 const saveSpreadsheetFile = () =>{
        if (!activeFile) return;
     const fileNameInput = document.getElementById('spreadsheet-file-name');
     const file = fileSystem.desktop.children[activeFile];
    file.content = spreadsheetData[fileNameInput.value] || {};
        fileSystem.desktop.children[fileNameInput.value] = file;
      if (fileNameInput.value !== activeFile) {
             delete fileSystem.desktop.children[activeFile];
            removeDesktopIcon(activeFile);
          createDesktopIcon(fileNameInput.value)
        }
         activeFile = fileNameInput.value;
            updateFileExplorer();
 }
    const openSpreadsheet = (fileName) => {
    openWindow('spreadsheet-window');
        const spreadsheetTable = document.getElementById('spreadsheet-table');
    createSpreadsheetTable('spreadsheet-table');

        if(spreadsheetData[fileName]) {
           for (const row in spreadsheetData[fileName]) {
             for(const col in spreadsheetData[fileName][row]) {
                const cell = spreadsheetTable.querySelector(`[data-row="${row}"][data-col="${col}"]`);
               if(cell) cell.textContent = spreadsheetData[fileName][row][col]
              }
           }
      }
};

  const canvasData = {};

    const openPaint=(fileName)=>{
       openWindow('paint-window')
     const canvas = document.getElementById('paint-canvas');
          const ctx = canvas.getContext('2d');

           const initialCanvasState = canvasData[fileName];
              if (initialCanvasState) {
                   const img = new Image();
                 img.onload = () => {ctx.drawImage(img,0,0)};
                  img.src= initialCanvasState;
          }

       let isDrawing = false;

        let lastX = 0;
           let lastY = 0;

             canvas.width = 400
             canvas.height= 300;
             canvas.addEventListener('mousedown',(e) => {
              isDrawing= true;
              lastX = e.offsetX;
                lastY = e.offsetY;
           });
             canvas.addEventListener('mousemove',(e) =>{
           if(!isDrawing)return;

           let color =  document.getElementById('paint-color').value;
            let brushSize= document.getElementById('brush-size').value;
            ctx.strokeStyle=color;
           ctx.lineWidth = brushSize;
             ctx.lineJoin ='round';
             ctx.lineCap = 'round';
             ctx.beginPath();
           ctx.moveTo(lastX,lastY)
             ctx.lineTo(e.offsetX,e.offsetY)
           ctx.stroke();

            lastX = e.offsetX;
            lastY = e.offsetY
            });
           canvas.addEventListener('mouseup', () =>{isDrawing =false});
         canvas.addEventListener('mouseout', () => {isDrawing = false;});

    }

    const savePaintFile = ()=>{
        if (!activeFile) return;
    const fileNameInput = document.getElementById('paint-file-name');
    const canvas = document.getElementById('paint-canvas');
     const file = fileSystem.desktop.children[activeFile];

         canvasData[fileNameInput.value] = canvas.toDataURL();

           file.content =  canvasData[fileNameInput.value];
            fileSystem.desktop.children[fileNameInput.value] = file;

      if (fileNameInput.value !== activeFile) {
         delete fileSystem.desktop.children[activeFile];
           removeDesktopIcon(activeFile);
           createDesktopIcon(fileNameInput.value)
            }

       activeFile = fileNameInput.value;
         updateFileExplorer();

}
</script>
</body>
</html>