The user wants a single-page web application that recreates a Windows 95 style desktop.
It must be a single `index.html` file containing all CSS and JS.
No external resources, CDNs, or network requests (fully sandboxed).

Features required:
1. Draggable and closable windows.
2. Start button and taskbar.
3. Desktop icons.
4. Working clock.

Design elements:
- Classic Windows 95 aesthetic (grey colors, beveled borders, specific fonts).
- Taskbar at the bottom.
- Start button on the left of the taskbar.
- Desktop icons on the desktop.
- Windows with title bars, close buttons, and content area.

Plan:
1.  **HTML Structure**:
    *   Container for the desktop.
    *   Desktop area for icons.
    *   Taskbar area.
        *   Start button.
        *   Taskbar items (active windows).
        *   Clock (on the right).
    *   Window templates (will be created dynamically via JS).

2.  **CSS Styles**:
    *   Use specific colors: `#c0c0c0` for the main grey, `#ffffff` for highlights, `#808080` for shadows.
    *   Beveled borders using `border-style: outset` and `inset`.
    *   Fonts: `MS Sans Serif`, `Tahoma`, or generic `sans-serif`.
    *   Layout using `position: absolute` for windows and icons.
    *   Taskbar fixed at bottom.

3.  **JavaScript Functionality**:
    *   Window management: Create, open, close, drag, focus, minimize (maybe just close/maximize for simplicity, but let's try to make it decent).
    *   Dragging: Handle `mousedown`, `mousemove`, `mouseup`.
    *   Start Menu: Toggle visibility.
    *   Clock: `setInterval` to update time.
    *   Taskbar: Update based on open windows.
    *   Desktop Icons: Click to open windows.

Let's refine the "no external resources" constraint. I can't use Google Fonts or FontAwesome. I'll have to use standard web-safe fonts and maybe emoji or simple CSS shapes for icons if I can't find a way to include small base64 images. Actually, for icons, I can use emoji as a fallback or very simple SVG. SVGs are perfect because I can embed them directly.

Let's draft the implementation.

**Windowing System**:
- `windows` array to keep track of open windows.
- `zIndex` management to bring the active window to the front.
- Dragging logic:
    - Select the title bar.
    - Track mouse movement.
    - Update window `left` and `top`.

**Taskbar**:
- `startMenu` as a div that toggles.
- `taskbar` container.

**Icons**:
- Array of icon objects `{ name, icon, content }`.

**Detailed CSS approach**:
- Classic 3D effect:
    - `border: 2px solid;`
    - `border-color: #ffffff #808080 #808080 #ffffff;` (outset)
    - `border-color: #808080 #ffffff #ffffff #808080;` (inset)

Let's start writing.

```html <script> // Since I cannot use external resources, I will use SVG for icons to ensure it looks good. // I'll embed the SVGs directly in the JS or HTML. </script> ``` I will now write the full `index.html` file.

The user wants a single-page web app that mimics a Windows 95 desktop.
Key requirements:
- Single file `index.html`.
- CSS in `<style>`, JS in `<script>`.
- No external resources/CDNs/network requests.
- Draggable and closable windows.
- Start button and taskbar.
- Desktop icons.
- Working clock.
- Windows 95 aesthetic (gray colors, bevels, classic fonts).

Plan:
1.  **HTML Structure**:
    - A main `#desktop` container.
    - A `#taskbar` at the bottom.
    - `#start-menu` (hidden by default).
    - Desktop icons.
    - Window templates (or dynamically created).

2.  **CSS (Windows 95 Style)**:
    - Colors: `#c0c0c0` (classic gray), `#ffffff` (highlight), `#808080` (shadow).
    - Bevels: `border-top: 2px solid #fff`, `border-left: 2px solid #fff`, `border-right: 2px solid #808080`, `border-bottom: 2px solid #808080`.
    - Fonts: `MS Sans Serif`, `Tahoma`, `Arial`, sans-serif.
    - Taskbar: Fixed at bottom.
    - Icons: Grid layout on desktop.

3.  **JavaScript**:
    - Window management:
        - Creating windows.
        - Dragging windows (mousedown, mousemove, mouseup).
        - Z-index management (bringing window to front).
        - Minimizing/Closing/Maximizing (maybe just Close and Drag for now, or full functionality).
    - Start Menu: Toggle visibility.
    - Clock: `setInterval` to update time.
    - Taskbar: Showing active windows? Maybe just a simple version.
    - Desktop icons: Double-click to open a window.

Let's refine the Window implementation.
Each window will be a `div` with:
- `.window-frame` (the bevelled border).
- `.title-bar` (draggable area).
- `.title-bar-text`.
- `.title-bar-buttons` (close button).
- `.window-content`.

Implementation details:
- Use `mousedown` on the title bar to initiate drag.
- Use `mousemove` on `document` to update position.
- Use `mouseup` on `document` to stop drag.
- Z-index: Keep track of the highest z-index and increment it when a window is clicked/focused.

Wait, "No external resources". I should use standard system fonts.

Let's start coding.

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Windows 95 Desktop</title> <style> :root { --bg-color: #008080; /* Classic Teal */ --win-gray: #c0c0c0; --win-white: #ffffff; --win-dark-gray: #808080; --win-black: #000000; --win-blue: #000080; } * { box-sizing: border-box; user-select: none; } body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Tahoma', 'Arial', sans-serif; background-color: var(--bg-color); } #desktop { position: relative; width: 100%; height: calc(100% - 40px); padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, 80px); grid-template-rows: repeat(auto-fill, 90px); grid-auto-flow: column; gap: 10px; } /* Icon Styling */ .icon { width: 70px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; color: white; font-size: 12px; text-shadow: 1px 1px black; } .icon:active .icon-img { filter: brightness(0.7); } .icon-img { width: 32px; height: 32px; background-color: #ccc; /* Placeholder for icons */ margin-bottom: 5px; border: 1px solid white; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: #000; background: linear-gradient(135deg, #fff 0%, #c0c0c0 100%); } /* Window Styling */ .window { position: absolute; background-color: var(--win-gray); border: 2px solid; border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white); box-shadow: 1px 1px 0 0 var(--win-black); min-width: 200px; min-height: 150px; display: flex; flex-direction: column; z-index: 10; } .window.active { z-index: 100 !important; } .title-bar { background-color: var(--win-blue); color: white; padding: 3px 5px; display: flex; justify-content: space-between; align-items: center; cursor: default; } .title-bar-text { font-weight: bold; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title-bar-buttons { display: flex; gap: 2px; } .win-btn { width: 16px; height: 14px; background-color: var(--win-gray); border: 1px solid; border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white); display: flex; align-items: center; justify-content: center; font-size: 10px; color: black; cursor: pointer; font-weight: bold; } .win-btn:active { border-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray); padding: 1px 0 0 1px; } .window-content { flex-grow: 1; padding: 10px; background-color: var(--win-white); margin: 2px; border: 2px inset var(--win-gray); overflow: auto; font-size: 13px; color: black; } /* Taskbar */ #taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; background-color: var(--win-gray); border-top: 2px solid var(--win-white); display: flex; align-items: center; padding: 2px; z-index: 1000; } #start-button { height: 30px; padding: 0 10px; display: flex; align-items: center; font-weight: bold; border: 2px solid; border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white); cursor: default; gap: 5px; } #start-button:active { border-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray); padding: 1px 9px 0 11px; } #start-menu { position: absolute; bottom: 40px; left: 0; width: 200px; background-color: var(--win-gray); border: 2px solid; border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white); display: none; flex-direction: column; z-index: 1001; } #start-menu.visible { display: flex; } .start-menu-item { padding: 10px 15px; display: flex; align-items: center; gap: 10px; cursor: default; } .start-menu-item:hover { background-color: var(--win-blue); color: white; } .start-menu-side { width: 25px; background-color: var(--win-dark-gray); position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; } .start-menu-side span { transform: rotate(-90deg); white-space: nowrap; font-weight: bold; color: #c0c0c0; text-shadow: 1px 1px black; font-size: 18px; } #taskbar-items { flex-grow: 1; display: flex; align-items: center; gap: 5px; margin-left: 10px; } .taskbar-item { height: 30px; padding: 0 10px; border: 2px solid; border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white); background-color: var(--win-gray); display: flex; align-items: center; font-size: 12px; min-width: 100px; cursor: default; } .taskbar-item.active { border-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray); padding: 1px 9px 0 11px; background-color: #e0e0e0; } #clock { height: 30px; padding: 0 10px; border: 2px inset var(--win-gray); border-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray); display: flex; align-items: center; font-size: 12px; padding-left: 5px; padding-right: 5px; } /* Utility */ .hidden { display: none; } </style> </head> <body> <div id="desktop"> <!-- Icons will be generated by JS --> </div> <div id="start-menu"> <div class="start-menu-side"><span>Windows 95</span></div> <div class="start-menu-item">📁 Programs</div> <div class="start-menu-item">📂 Documents</div> <div class="start-menu-item">⚙️ Settings</div> <div class="start-menu-item" onclick="location.reload()">🔄 Restart</div> <div class="start-menu-item" onclick="window.close()">❌ Shut Down...</div> </div> <div id="taskbar"> <div id="start-button"> <span style="font-size: 18px;">🪟</span> Start </div> <div id="taskbar-items"></div> <div id="clock"></div> </div> <script> const desktop = document.getElementById('desktop'); const startButton = document.getElementById('start-button'); const startMenu = document.getElementById('start-menu'); const taskbarItems = document.getElementById('taskbar-items'); const clockElement = document.getElementById('clock'); let zIndexCounter = 10; let activeWindow = null; const apps = [ { name: 'My Computer', icon: '💻', content: '<h1>My Computer</h1><p>C: Drive (Local Disk)<br>D: CD-ROM</p>' }, { name: 'Notepad', icon: '📝', content: '<textarea style="width:100%; height:100%; border:none; outline:none; font-family:monospace; resize:none;">Hello, world!</textarea>' }, { name: 'Recycle Bin', icon: '🗑️', content: '<p>The Recycle Bin is empty.</p>' }, { name: 'Internet Explorer', icon: '🌐', content: '<h1>Internet Explorer</h1><p>Cannot connect to the internet. (No network access allowed in this sandbox)</p>' }, { name: 'Paint', icon: '🎨', content: '<div style="width:100%; height:100%; background:white; border:1px solid #000; cursor: crosshair;" id="paint-canvas"></div>' } ]; // Initialize function init() { // Create desktop icons apps.forEach(app => { const icon = document.createElement('div'); icon.className = 'icon'; icon.innerHTML = ` <div class="icon-img">${app.icon}</div> <div class="icon-text">${app.name}</div> `; icon.ondblclick = () => createWindow(app); desktop.appendChild(icon); }); // Clock setInterval(updateClock, 1000); updateClock(); // Start Menu Toggle startButton.onclick = (e) => { e.stopPropagation(); startMenu.classList.toggle('visible'); }; document.onclick = () => { startMenu.classList.remove('visible'); }; startMenu.onclick = (e) => e.stopPropagation(); } function updateClock() { const now = new Date(); clockElement.textContent = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } function createWindow(app) { const win = document.createElement('div'); win.className = 'window'; win.style.left = (50 + (zIndexCounter % 10) * 20) + 'px'; win.style.top = (50 + (zIndexCounter % 10) * 20) + 'px'; win.style.zIndex = ++zIndexCounter; win.innerHTML = ` <div class="title-bar"> <div class="title-bar-text">${app.name}</div> <div class="title-bar-buttons"> <div class="win-btn" style="margin-right: 2px;">_</div> <div class="win-btn" style="margin-right: 2px;">□</div> <div class="win-btn close-btn">X</div> </div> </div> <div class="window-content">${app.content}</div> `; desktop.appendChild(win); // Title bar dragging const titleBar = win.querySelector('.title-bar'); titleBar.onmousedown = (e) => { if (e.target.classList.contains('win-btn')) return; focusWindow(win); let offsetX = e.clientX - win.offsetLeft; let offsetY = e.clientY - win.offsetTop; function mouseMoveHandler(e) { win.style.left = (e.clientX - offsetX) + 'px'; win.style.top = (e.clientY - offsetY) + 'px'; } function mouseUpHandler() { document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); } document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('mouseup', mouseUpHandler); }; // Close button win.querySelector('.close-btn').onclick = () => { win.remove(); updateTaskbar(); }; // Focus on click win.onmousedown = () => focusWindow(win); focusWindow(win); updateTaskbar(); } function focusWindow(win) { // Remove active class from all document.querySelectorAll('.window').forEach(w => w.classList.remove('active')); document.querySelectorAll('.taskbar-item').forEach(t => t.classList.remove('active')); win.classList.add('active'); win.style.zIndex = ++zIndexCounter; // Mark taskbar item as active const taskItem = win.getAttribute('data-taskbar-id'); if (taskItem) { const item = document.querySelector(`[data-taskbar-id="${taskItem}"]`); if (item) item.classList.add('active'); } } function updateTaskbar() { taskbarItems.innerHTML = ''; const windows = document.querySelectorAll('.window'); windows.forEach((win, index) => { const winName = win.querySelector('.title-bar-text').textContent; const taskId = `win-${index}`; win.setAttribute('data-taskbar-id', taskId); const item = document.createElement('div'); item.className = 'taskbar-item'; if (win.classList.contains('active')) item.classList.add('active'); item.textContent = winName; item.onclick = () => { if (win.classList.contains('active')) { // Minimize (just hide for simplicity in this demo) win.style.display = 'none'; } else { win.style.display = 'flex'; focusWindow(win); } }; taskbarItems.appendChild(item); }); } init(); </script> </body> </html> ```