Web Desktop Experience with 98.css

{"name":"98 In A Browser","description":"Experience a nostalgic web desktop interface with icons that open different pages or applications. Enjoy the simplicity and user-friendly design of a web OS using 98.css.","photo":null,"view_count":5,"fork_count":0,"expires_at":null,"created_at":"2024-04-12T17:19:41.807096Z","updated_at":"2024-04-12T17:19:41.807099Z","user_id":5,"status":"PUBLIC","parent_id":1069,"id":1143,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"const openWindows = {};\r\ndocument.querySelector('.file-explorer-btn').addEventListener('click', function () {\r\n const windowId = 'fileExplorer' + Date.now(); // Generate a unique ID\r\n const windowElement = document.createElement('div');\r\n windowElement.classList.add('window');\r\n windowElement.style.cssText = \"width: 600px; position: absolute; top: 50px; left: 50px;\";\r\n windowElement.innerHTML = `\r\n

\r\n

File Explorer

\r\n

\r\n \r\n \r\n \r\n

\r\n

\r\n \r\n

Drive C:

\r\n

Drive D:

\r\n

Drive E:

\r\n \r\n

\r\n

\r\n
\r\n
C: Projects
\r\n
- Project1
- Project2
\r\n
\r\n
\r\n
\r\n
C: Documents
\r\n
- Doc1.txt
- Doc2.pdf
\r\n
\r\n

\r\n `;\r\n } else if (drive === 'D') {\r\n contentHTML = `\r\n

\r\n
\r\n
D: Music
\r\n
- Song1.mp3
- Song2.mp3
\r\n
\r\n
\r\n
\r\n
D: Pictures
\r\n
- Image1.png
- Image2.jpg
\r\n
\r\n

\r\n `;\r\n } else if (drive === 'E') {\r\n contentHTML = `\r\n

\r\n
\r\n
E: Videos
\r\n
- Video1.mp4
- Video2.avi
\r\n
\r\n
\r\n
\r\n
E: Archives
\r\n
- Archive1.zip
- Archive2.rar
\r\n
\r\n

\r\n `;\r\n }\r\n driveContents.innerHTML = contentHTML;\r\n }\r\n // Attach event listeners to tabs for changing drive contents\r\n document.querySelectorAll('[role=\"tab\"]').forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n document.querySelector('[role=\"tab\"][aria-selected=\"true\"]').removeAttribute('aria-selected');\r\n tab.setAttribute('aria-selected', 'true');\r\n changeDriveContent(tab.getAttribute('data-drive'));\r\n });\r\n });\r\n\r\n // Initially load content for Drive C:\r\n changeDriveContent('C');\r\n});\r\nfunction makeDraggable(element) {\r\n let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;\r\n const titleBar = element.querySelector(\".title-bar\");\r\n if (titleBar) {\r\n titleBar.onmousedown = dragMouseDown;\r\n }\r\n\r\n function dragMouseDown(e) {\r\n e.preventDefault();\r\n pos3 = e.clientX;\r\n pos4 = e.clientY;\r\n document.onmouseup = closeDragElement;\r\n document.onmousemove = elementDrag;\r\n }\r\n\r\n function elementDrag(e) {\r\n e.preventDefault();\r\n pos1 = pos3 - e.clientX;\r\n pos2 = pos4 - e.clientY;\r\n pos3 = e.clientX;\r\n pos4 = e.clientY;\r\n element.style.top = (element.offsetTop - pos2) + \"px\";\r\n element.style.left = (element.offsetLeft - pos1) + \"px\";\r\n }\r\n\r\n function closeDragElement() {\r\n document.onmouseup = null;\r\n document.onmousemove = null;\r\n }\r\n}\r\nfunction updateTaskManager() {\r\n const taskManagerBody = document.querySelector('.task-manager-window .window-body');\r\n\r\n if (taskManagerBody) {\r\n taskManagerBody.innerHTML = `\r\n

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n ${Object.keys(openWindows).map(windowId => `\r\n \r\n \r\n \r\n \r\n `).join('')}\r\n \r\n

Name	Action
${windowId}

\r\n

\r\n `;\r\n }\r\n}\r\ndocument.querySelector('.task-manager-btn').addEventListener('click', function () {\r\n const windowId = 'taskManager';\r\n if (openWindows[windowId]) return; // Prevent opening multiple instances\r\n\r\n const taskManagerWindow = document.createElement('div');\r\n taskManagerWindow.classList.add('window', 'task-manager-window'); // Adding unique class name\r\n taskManagerWindow.style.cssText = \"width: 400px; position: absolute; top: 100px; left: 100px;\";\r\n taskManagerWindow.innerHTML = `\r\n

\r\n

Task Manager

\r\n

\r\n \r\n \r\n \r\n

\r\n

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

Name	Action
File Explorer
Task Manager

\r\n

\r\n `;\r\n\r\n document.body.appendChild(taskManagerWindow);\r\n updateTaskManager(); // Refresh the Task Manager list\r\n\r\n // Reuse the makeDraggable function to make the task manager window draggable\r\n makeDraggable(taskManagerWindow);\r\n document.querySelectorAll('table.interactive').forEach(element => {\r\n element.addEventListener('click', (event) => {\r\n // Use event.composedPath() for broader compatibility\r\n const path = event.composedPath();\r\n const row = path.find(element => element.tagName === 'TR' && element.parentElement.tagName === 'TBODY');\r\n if (row) {\r\n row.classList.toggle('highlighted');\r\n }\r\n });\r\n\r\n });\r\n\r\n});\r\nfunction removeTask(windowId) {\r\n const windowElement = openWindows[windowId];\r\n if (windowElement) {\r\n windowElement.remove(); // Remove the window from the DOM\r\n delete openWindows[windowId]; // Remove the window from the registry\r\n updateTaskManager(); // Refresh the Task Manager list\r\n }\r\n}\r\nsetInterval(function () {\r\n updateTaskManager();\r\n}, 15); // Refreshes Task Manager every minute\r\ndocument.querySelector('.msn-explorer-btn').addEventListener('click', function () {\r\n const windowId = 'msnExplorer' + Date.now(); // Generate a unique ID\r\n const windowElement = document.createElement('div');\r\n windowElement.classList.add('window');\r\n windowElement.style.cssText = \"width: 800px; position: absolute; top: 100px; left: 100px;\";\r\n windowElement.innerHTML = `\r\n

\r\n

MSN Explorer

\r\n

\r\n \r\n \r\n \r\n

\r\n

\r\n \r\n

\r\n `;\r\n\r\n document.body.appendChild(windowElement);\r\n openWindows[windowId] = windowElement;\r\n updateTaskManager(); // Refresh the Task Manager list\r\n\r\n // Make the window draggable\r\n makeDraggable(windowElement);\r\n\r\n // Attach event listeners to the window controls\r\n const [minimizeButton, maximizeButton, closeButton] = windowElement.querySelectorAll('.title-bar-controls button');\r\n minimizeButton.onclick = () => windowElement.style.display = 'none';\r\n maximizeButton.onclick = () => {\r\n if (windowElement.classList.contains('maximized')) {\r\n windowElement.style.width = \"800px\";\r\n windowElement.style.height = \"\";\r\n windowElement.classList.remove('maximized');\r\n } else {\r\n windowElement.style.width = \"100%\";\r\n windowElement.style.height = \"100%\";\r\n windowElement.classList.add('maximized');\r\n }\r\n };\r\n closeButton.onclick = () => {\r\n windowElement.remove(); // Remove the window from the DOM\r\n delete openWindows[windowId]; // Remove the window from the registry\r\n updateTaskManager(); // Refresh the Task Manager list\r\n };\r\n});\r\ndocument.addEventListener('contextmenu', function (e) {\r\n e.preventDefault();\r\n const contextMenu = document.getElementById('contextMenu');\r\n contextMenu.style.top = `${e.pageY}px`;\r\n contextMenu.style.left = `${e.pageX}px`;\r\n contextMenu.style.display = 'block';\r\n});\r\n\r\ndocument.addEventListener('click', function () {\r\n const contextMenu = document.getElementById('contextMenu');\r\n if (contextMenu.style.display === 'block') {\r\n contextMenu.style.display = 'none';\r\n }\r\n});\r\n\r\ndocument.querySelector('img[alt=\"Volume Control\"]').addEventListener('click', function () {\r\n const volumeModal = document.getElementById('volumeControlModal');\r\n const isDisplayed = volumeModal.style.display === 'block';\r\n volumeModal.style.display = isDisplayed ? 'none' : 'block';\r\n});\r\ndocument.querySelector('.ms-office-btn').addEventListener('click', function () {\r\n const windowId = 'msOffice' + Date.now(); // Generate a unique ID\r\n const windowElement = document.createElement('div');\r\n windowElement.classList.add('window');\r\n windowElement.style.cssText = \"width: 800px; position: absolute; top: 50px; left: 50px;\";\r\n windowElement.innerHTML = `\r\n

\r\n

MS Office

\r\n

\r\n \r\n \r\n \r\n

\r\n

\r\n \r\n

\r\n `;\r\n\r\n document.body.appendChild(windowElement);\r\n openWindows[windowId] = windowElement;\r\n updateTaskManager(); // Refresh the Task Manager list\r\n\r\n // Make the window draggable\r\n makeDraggable(windowElement);\r\n\r\n // Attach event listeners to the window controls\r\n const closeButton = windowElement.querySelector('.title-bar-controls button[aria-label=\"Close\"]');\r\n closeButton.onclick = () => {\r\n windowElement.remove(); // Remove the window from the DOM\r\n delete openWindows[windowId]; // Remove the window from the registry\r\n updateTaskManager(); // Refresh the Task Manager list\r\n };\r\n});\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const trailLength = 5; // Number of trail elements\r\n const trailDelay = 0.1; // Delay in seconds between each trail element\r\n let trailElements = [];\r\n\r\n // Initialize trail elements\r\n for (let i = 0; i < trailLength; i++) {\r\n let trailElement = document.createElement('img');\r\n trailElement.src = 'https://win98icons.alexmeub.com/icons/png/mouse-2.png'; // Example cursor image\r\n trailElement.style.position = 'absolute';\r\n trailElement.style.width = '20px'; // Width of the trail element\r\n trailElement.style.height = '20px'; // Height of the trail element\r\n trailElement.style.pointerEvents = 'none'; // Ignore mouse events\r\n trailElement.style.zIndex = '1000'; // Ensure it's above most elements\r\n document.body.appendChild(trailElement);\r\n trailElements.push(trailElement);\r\n }\r\n\r\n // Update trail position\r\n document.addEventListener('mousemove', (e) => {\r\n let x = e.clientX;\r\n let y = e.clientY;\r\n trailElements.forEach((el, index) => {\r\n setTimeout(() => {\r\n el.style.left = `${x - 10}px`; // Center the trail image on cursor\r\n el.style.top = `${y - 10}px`; // Center the trail image on cursor\r\n }, index * trailDelay * 1000); // Apply delay based on element index\r\n });\r\n });\r\n});","style.css":"/* No custom CSS needed for 98.css framework */","index.html":"\n\n\n\n \n \n Web Desktop Experience with 98.css\n \n\n\n\n\n \n

\n \n \n \n \n

\n $\"Volume$ \n $\"Network$ \n \n

\n \n \n\n

Volume Control

\n \n

\n\n\n\n

Taskbar Settings

"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"instruction":"Add a start menu with basic functionalities like opening applications or navigating to different pages.","title":"Start Menu","created_at":"2024-04-06T22:15:15.932031","project_id":1143,"complete":false,"step_number":1,"updated_at":"2024-04-12T17:19:41.812486","id":5896},{"instruction":"Implement a taskbar for easy access to open applications.","title":"Taskbar","created_at":"2024-04-06T22:15:15.932112","project_id":1143,"complete":false,"step_number":2,"updated_at":"2024-04-12T17:19:41.812571","id":5897},{"instruction":"Enable clicking on icons to open corresponding applications or pages.","title":"Icon Click Functionality","created_at":"2024-04-06T22:15:15.932183","project_id":1143,"complete":false,"step_number":3,"updated_at":"2024-04-12T17:19:41.812646","id":5898},{"instruction":"Implement window management for opened applications or pages.","title":"Window Management","created_at":"2024-04-06T22:15:15.932253","project_id":1143,"complete":false,"step_number":4,"updated_at":"2024-04-12T17:19:41.812719","id":5899},{"instruction":"Create a desktop interface with icons that open different pages or applications.","title":"Classic Desktop Interface","created_at":"2024-04-06T22:15:15.931935","project_id":1143,"complete":false,"step_number":0,"updated_at":"2024-04-12T17:19:41.812328","id":5895}]}