Windows 95 desktop · qwen3.5-9b

I need to build a Windows 95-style desktop interface in a single HTML file with inline CSS and JavaScript. Let me break down the requirements:

1. Desktop icons for Notepad and About
2. Taskbar with Start button/menu and clock
3. Windows that can be:
   - Dragged by title bars
   - Focused by clicking
   - Closed
   - Z-index management (focused window in front)
4. Each open app appears in taskbar
5. Clicking taskbar entry brings window to front
6. Start menu opens/closes and dismisses after launching
7. Retro chrome styling with inline drawings (no external assets)

Let me create a comprehensive implementation:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Windows 95</title>
    <style>
        /* Windows 95 styling */
        body {
            margin: 0;
            padding: 0;
            background: #008080;
            font-family: 'MS Sans Serif', 'Segoe UI', sans-serif;
            font-size: 11px;
            overflow: hidden;
            user-select: none;
        }
        
        /* Desktop */
        #desktop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 40px; /* Taskbar height */
            padding: 10px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        /* Desktop icons */
        .desktop-icon {
            width: 80px;
            text-align: center;
            cursor: pointer;
            padding: 5px;
        }
        
        .desktop-icon:hover {
            background: #000080;
        }
        
        .desktop-icon.selected {
            background: #000080;
        }
        
        /* Icon box with retro chrome */
        .icon-box {
            width: 32px;
            height: 32px;
            border: 2px solid;
            border-color: #808080 #ffffff #808080 #808080;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 5px auto;
        }
        
        /* Retro chrome drawing using CSS */
        .chrome {
            border: 2px solid;
            border-color: #808080 #ffffff #808080 #808080;
            background: #c0c0c0;
        }
        
        .chrome-inset {
            border: 2px solid;
            border-color: #ffffff #808080 #ffffff #808080;
        }
        
        /* Window */
        .window {
            position: absolute;
            background: #c0c0c0;
            border: 3px solid;
            border-color: #808080 #ffffff #808080 #808080;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
            min-width: 200px;
            min-height: 100px;
        }
        
        /* Title bar */
        .title-bar {
            background: linear-gradient(90deg, #000080 0%, #1084d0 10%, #000080 100%);
            padding: 4px 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: move;
        }
        
        /* Title bar gradient */
        .title-bar {
            background: #000080;
        }
        
        .title-bar .title-text {
            color: white;
            font-weight: bold;
        }
        
        /* Window controls */
        .window-controls {
            display: flex;
            gap: 2px;
        }
        
        .window-btn {
            width: 20px;
            height: 18px;
            border: 2px solid;
            border-color: #ffffff #808080 #ffffff #808080;
            background: #c0c0c0;
            font-size: 10px;
            cursor: pointer;
        }
        
        .window-btn:active {
            border-color: #808080 #ffffff #808080 #ffffff;
        }
        
        /* Window content */
        .window-content {
            padding: 10px;
        }
        
        /* Taskbar */
        #taskbar {
            position: absolute;
            top: auto;
            left: 0;
            right: 0;
            bottom: 0;
            height: 28px;
            background: #c0c0c0;
            border: 3px solid;
            border-color: #808080 #ffffff #808080 #808080;
            display: flex;
            align-items: center;
            padding: 2px;
            gap: 2px;
        }
        
        /* Start button */
        #start-btn {
            padding: 4px 12px;
            border: 2px solid;
            border-color: #ffffff #808080 #ffffff #808080;
            background: #c0c0c0;
            font-weight: bold;
            cursor: pointer;
        }
        
        #start-btn:active {
            border-color: #808080 #ffffff #808080 #ffffff;
        }
        
        /* Start menu */
        #start-menu {
            position: absolute;
            top: 28px;
            left: 0;
            width: 200px;
            background: #c0c0c0;
            border: 3px solid;
            border-color: #808080 #ffffff #808080 #808080;
            display: none;
            flex-direction: column;
            padding: 2px;
        }
        
        .menu-item {
            padding: 4px 10px;
            cursor: pointer;
        }
        
        .menu-item:hover {
            background: #000080;
            color: white;
        }
        
        /* Taskbar buttons */
        .taskbar-btn {
            padding: 4px 8px;
            border: 2px solid;
            border-color: #808080 #ffffff #808080 #808080;
            background: #c0c0c0;
            cursor: pointer;
            margin-right: 2px;
        }
        
        .taskbar-btn.active {
            border-color: #000080 #ffffff #000080 #000080;
            background: #000080;
            color: white;
        }
        
        /* Clock */
        #clock {
            margin-left: auto;
            padding: 4px 10px;
            border: 2px solid;
            border-color: #808080 #ffffff #808080 #808080;
            background: #c0c0c0;
            font-size: 11px;
        }
        
        /* Notepad specific */
        .notepad textarea {
            width: 100%;
            height: 300px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            border: 2px solid;
            border-color: #808080 #ffffff #808080 #808080;
            resize: both;
        }
        
        /* About specific */
        .about-content {
            text-align: center;
        }
        
        .about-logo {
            width: 64px;
            height: 64px;
            margin: 0 auto 10px auto;
            border: 2px solid;
            border-color: #808080 #ffffff #808080 #808080;
            background: #c0c0c0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
        
        /* Scrollbar */
        .scrollbar {
            width: 16px;
            background: #c0c0c0;
            border: 2px solid;
            border-color: #808080 #ffffff #808080 #808080;
        }
        
        .scrollbar-thumb {
            background: #ffffff;
            border: 1px solid;
            border-color: #808080 #808080 #808080 #ffffff;
        }
    </style>
</head>
<body>
    <div id="desktop">
        <!-- Desktop icons will be added here -->
    </div>
    
    <div id="taskbar">
        <button id="start-btn">Start</button>
        <div id="taskbar-apps"></div>
        <div id="clock"></div>
    </div>
    
    <div id="start-menu"></div>
    
    <script>
        // Window management
        let windows = [];
        let zIndex = 100;
        let draggedWindow = null;
        let dragOffset = { x: 0, y: 0 };
        
        // App data
        const apps = {
            notepad: {
                name: 'Notepad',
                icon: '📝',
                type: 'notepad',
                content: ''
            },
            about: {
                name: 'About',
                icon: 'ℹ️',
                type: 'about'
            }
        };
        
        // Desktop icons
        const desktopIcons = [
            { id: 'notepad', name: 'Notepad', app: 'notepad' },
            { id: 'about', name: 'About', app: 'about' }
        ];
        
        // Create desktop icons
        desktopIcons.forEach(icon => {
            const iconEl = document.createElement('div');
            iconEl.className = 'desktop-icon';
            iconEl.id = 'icon-' + icon.id;
            iconEl.innerHTML = `
                <div class="icon-box chrome">
                    ${icon.icon}
                </div>
                <div>${icon.name}</div>
            `;
            iconEl.onclick = () => openApp(icon.app);
            document.getElementById('desktop').appendChild(iconEl);
        });
        
        // Open app function
        function openApp(appId) {
            const app = apps[appId];
            const winId = 'win-' + Date.now();
            
            const win = document.createElement('div');
            win.className = 'window';
            win.id = winId;
            win.style.left = (100 + windows.length * 20) + 'px';
            win.style.top = (100 + windows.length * 20) + 'px';
            win.style.zIndex = ++zIndex;
            
            win.innerHTML = `
                <div class="title-bar chrome">
                    <span class="title-text">${app.name}</span>
                    <div class="window-controls">
                        <button class="window-btn" onclick="minimizeWindow('${winId}')">_</button>
                        <button class="window-btn" onclick="maximizeWindow('${winId}')">□</button>
                        <button class="window-btn" onclick="closeWindow('${winId}')">X</button>
                    </div>
                </div>
                <div class="window-content">
                    ${app.type === 'notepad' ? '<textarea placeholder="Type here..."></textarea>' : '<div class="about-content">Windows 95<br><br>Version 4.0<br><br>© Microsoft Corp.</div>'}
                </div>
            `;
            
            // Add to DOM
            document.body.appendChild(win);
            
            // Add to taskbar
            const taskbarBtn = document.createElement('button');
            taskbarBtn.className = 'taskbar-btn';
            taskbarBtn.id = 'taskbar-' + winId;
            taskbarBtn.innerHTML = app.icon + ' ' + app.name;
            taskbarBtn.onclick = () => focusWindow(winId);
            document.getElementById('taskbar-apps').appendChild(taskbarBtn);
            
            // Store window
            windows.push({
                id: winId,
                app: app,
                element: win,
                content: app.type === 'notepad' ? win.querySelector('textarea').value : ''
            });
            
            // Focus
            focusWindow(winId);
        }
        
        // Focus window
        function focusWindow(winId) {
            const win = document.getElementById(winId);
            if (win) {
                win.style.zIndex = ++zIndex;
                win.style.display = 'block';
            }
        }
        
        // Close window
        function closeWindow(winId) {
            const win = document.getElementById(winId);
            if (win) {
                win.style.display = 'none';
                win.remove();
                
                // Remove from taskbar
                const taskbarBtn = document.getElementById('taskbar-' + winId);
                if (taskbarBtn) {
                    taskbarBtn.remove();
                }
                
                // Remove from windows array
                windows = windows.filter(w => w.id !== winId);
            }
        }
        
        // Drag window
        function dragWindow(winId) {
            const win = document.getElementById(winId);
            if (draggedWindow !== winId) {
                draggedWindow = winId;
                dragOffset = {
                    x: win.offsetLeft,
                    y: win.offsetTop
                };
            }
        }
        
        // Move window
        function moveWindow(e) {
            if (draggedWindow) {
                const win = document.getElementById(draggedWindow);
                win.style.left = (e.clientX - dragOffset.x) + 'px';
                win.style.top = (e.clientY - dragOffset.y) + 'px';
            }
        }
        
        // Stop drag
        function stopDrag() {
            draggedWindow = null;
        }
        
        // Clock update
        function updateClock() {
            const now = new Date();
            const timeStr = now.toLocaleTimeString();
            document.getElementById('clock').textContent = timeStr;
        }
        
        // Event listeners
        document.getElementById('start-btn').onclick = () => {
            document.getElementById('start-menu').style.display = 'flex';
        };
        
        document.getElementById('start-menu').onclick = () => {
            document.getElementById('start-menu').style.display = 'none';
        };
        
        document.addEventListener('mousedown', (e) => {
            if (e.target.id === 'start-btn') {
                document.getElementById('start-menu').style.display = 'flex';
            }
        });
        
        document.addEventListener('click', (e) => {
            if (!e.target.closest('#start-menu')) {
                document.getElementById('start-menu').style.display = 'none';
            }
        });
        
        document.addEventListener('mousemove', moveWindow);
        document.addEventListener('mouseup', stopDrag);
        
        // Clock interval
        setInterval(updateClock, 1000);
        
        // Initialize
        updateClock();
    </script>
</body>
</html>
```

I'll now write this to index.html and test it.