Windows 95 desktop · gemini-3.1-flash-lite-preview
Recreate a Windows 95 style desktop in a single page with draggable and closable windows, a Start button and taskbar, desktop icons, and a working clock.
transcript · 4 messages
Recreate a Windows 95 style desktop in a single page with draggable and closable windows, a Start button and taskbar, desktop icons, and a working clock.
thinking
**Designing Retro Desktop** I'm currently focused on replicating the classic Windows 95 desktop experience within a single HTML page. I've broken it down into draggable and closable windows, the Start button, a functional taskbar, desktop icons, and a working clock – all key components I want to implement. I'm prioritizing the core functionality of each element. **Defining Project Constraints** I've established key constraints: a single `index.html` file with inline CSS/JS and no external dependencies. I'm settling on Win95 Teal for the background and simple CSS shapes for icons to maintain self-containment. Simple blue-header frames for windows, a grey taskbar and CSS cursors will add to the retro feel. I'm focusing on defining the initial HTML structure.
index.html (5482 bytes)Successfully wrote 5482 bytes to index.html
The `index.html` file is ready. It contains the complete emulation of a Windows 95-style desktop with the following features: * **Desktop Icons:** Click "My Computer" or "Recycle Bin" to open windows. * **Draggable Windows:** Click and drag the blue title bar to move windows around. * **Closable Windows:** Click the 'X' button in the title bar to close windows. * **Taskbar:** Includes a placeholder Start button and a working digital clock. * **Style:** Retro Windows 95 color palette and UI elements (inset borders, standard grey background). You can open `index.html` in any web browser to view the desktop. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Windows 95 Desktop</title> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #008080; font-family: 'MS Sans Serif', 'Arial', sans-serif; font-size: 12px; user-select: none; } #desktop { width: 100vw; height: 100vh; position: relative; } .icon { width: 64px; text-align: center; margin: 20px; cursor: pointer; color: white; text-shadow: 1px 1px 1px black; } .icon-img { width: 32px; height: 32px; background: #c0c0c0; border: 1px solid #fff; border-right: 1px solid #000; border-bottom: 1px solid #000; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 20px; } #taskbar { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background-color: #c0c0c0; border-top: 2px solid #fff; display: flex; align-items: center; padding: 0 4px; box-sizing: border-box; z-index: 1000; } #start-button { background-color: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff; padding: 2px 8px; font-weight: bold; cursor: pointer; margin-right: 5px; } #clock { margin-left: auto; border: 2px solid; border-color: #000 #fff #fff #000; padding: 4px 8px; background: #c0c0c0; } .window { position: absolute; background: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff; width: 300px; height: 200px; display: flex; flex-direction: column; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); } .title-bar { background: #000080; color: white; padding: 3px 5px; display: flex; justify-content: space-between; align-items: center; cursor: move; } .close-btn { background: #c0c0c0; color: black; border: 2px solid; border-color: #fff #000 #000 #fff; width: 16px; height: 14px; font-size: 10px; text-align: center; line-height: 12px; cursor: pointer; } .window-content { padding: 10px; flex-grow: 1; overflow: auto; border: 1px inset #fff; margin: 4px; background: white; } </style> </head> <body> <div id="desktop"> <div class="icon" onclick="createWindow('My Computer')"> <div class="icon-img">💻</div> My Computer </div> <div class="icon" onclick="createWindow('Recycle Bin')"> <div class="icon-img">🗑️</div> Recycle Bin </div> </div> <div id="taskbar"> <div id="start-button">Start</div> <div id="clock">00:00</div> </div> <script> function updateClock() { const now = new Date(); document.getElementById('clock').innerText = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } setInterval(updateClock, 1000); updateClock(); function createWindow(title) { const win = document.createElement('div'); win.className = 'window'; win.style.left = (50 + document.getElementsByClassName('window').length * 20) + 'px'; win.style.top = (50 + document.getElementsByClassName('window').length * 20) + 'px'; win.innerHTML = ` <div class="title-bar" onmousedown="dragElement(this.parentElement)"> <span>${title}</span> <div class="close-btn" onclick="this.parentElement.parentElement.remove()">X</div> </div> <div class="window-content"> Welcome to ${title}! This is a simulated Windows 95 application window. </div> `; document.body.appendChild(win); } function dragElement(elmnt) { let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; elmnt.onmousedown = dragMouseDown; function dragMouseDown(e) { e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> ```
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Shows only a teal desktop with Recycle Bin icon, taskbar, and Start button; no windows open, no interactivity visible.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.