Windows 95 desktop · deepseek-chat
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.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 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.
Here is a single-page `index.html` file that recreates a Windows 95-style desktop with draggable and closable windows, a Start button and taskbar, desktop icons, and a working clock: 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</title> <style> body { margin: 0; padding: 0; background-color: #008080; font-family: "MS Sans Serif", Arial, sans-serif; user-select: none; overflow: hidden; height: 100vh; } .desktop { width: 100%; height: calc(100% - 30px); position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; } .icon { width: 80px; margin: 10px; text-align: center; font-size: 12px; color: white; cursor: pointer; } .icon img { width: 32px; height: 32px; margin-bottom: 5px; } .taskbar { background: #C0C0C0; height: 30px; width: 100%; position: fixed; bottom: 0; display: flex; align-items: center; border-top: 2px solid #FFFFFF; justify-content: space-between; z-index: 1000; } .start-button { background: #C0C0C0; height: 24px; margin-left: 2px; display: flex; align-items: center; padding: 0 8px; border: 2px solid; border-color: #FFFFFF #808080 #808080 #FFFFFF; font-weight: bold; cursor: pointer; } .start-button:active { border-color: #808080 #FFFFFF #FFFFFF #808080; } .clock { margin-right: 10px; font-size: 12px; } .window { position: absolute; background: #C0C0C0; border: 2px solid; border-color: #FFFFFF #808080 #808080 #FFFFFF; min-width: 200px; min-height: 150px; display: none; } .window-title { background: linear-gradient(90deg, #00007F, #1084D0); color: white; padding: 2px 5px; display: flex; justify-content: space-between; font-size: 12px; } .window-title-text { flex-grow: 1; } .window-close { cursor: pointer; } .window-content { padding: 10px; font-size: 12px; } .window-active { border-color: #FFFFFF #808080 #808080 #FFFFFF; } .desktop-icon { margin: 10px; text-align: center; font-size: 12px; color: white; cursor: pointer; } .desktop-icon img { width: 32px; height: 32px; margin-bottom: 5px; } </style> </head> <body> <div class="desktop"> <div class="desktop-icon" onclick="openWindow('my-computer')"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkEEjUWm0vJVwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAA90lEQVRYw+3XMQrCQBCF4S9pLAwtbIS0FnYWFnYWHsDTOFrY2lhYWQkpqXIGFySEZXezCYHAX3zwwjx43ywzc7BFi1+hvXM8S4z2XmJBgG9Zg4lZwGMn3gAccQPKdoFjbYdzcXYEbgwA4O4AYBEXADLOn89q9NMlqkQKcUcAACSFusWUcPEoVEXSHYCk1YWlqbjzVqoKFe8ESFOs6FclywZJxgHIzQKYanQxiADMjcyw2HOahYGlXBWBxYALgIsAFwAXAC4AXAC4AHAB4CIgBsAFgAsAFwAuAFwAuABwAeACwAWAiwAXAC4AXPTjk2wBC0mPwrJE2gAAAABJRU5ErkJggg==" alt="My Computer"> <div>My Computer</div> </div> <div class="desktop-icon" onclick="openWindow('recycle-bin')"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AkEEjUWm0vJVwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABYklEQVRYw+3XIQ7CQBCF4W/bWBha2AhpLewsLOwsPIAH4GgcbWwtrKyEhJQoe4OFTWBDyIaw4M/yJDP5mJlMZqNFiz+hvXM8S4z2XmJBgG9Zg4lZwGMn3gAccQPKdoFjbYdzcXYEbgwA4O4AYBEXADLOn89q9NMlqkQKcUcAACSFusWUcPEoVEXSHYCk1YWlqbjzVqoKFe8ESFOs6FclywZJxgHIzQKYanQxiADMjcyw2HOahYGlXBWBxYALgIsAFwAuAFwAuABwAeACwAWAiwAXAC4AXAC4AHAB4ALABYALABcALgJcALgAcNH/AJzRUZlRBhpxAAAAAElFTkSuQmCC" alt="Recycle Bin"> <div>Recycle Bin</div> </div> </div> <div id="my-computer" class="window"> <div class="window-title"> <div class="window-title-text">My Computer</div> <div class="window-close" onclick="closeWindow('my-computer')">X</div> </div> <div class="window-content"> <p>This is My Computer window.</p> </div> </div> <div id="recycle-bin" class="window"> <div class="window-title"> <div class="window-title-text">Recycle Bin</div> <div class="window-close" onclick="closeWindow('recycle-bin')">X</div> </div> <div class="window-content"> <p>This is Recycle Bin window.</p> </div> </div> <div class="taskbar"> <div class="start-button" onclick="toggleStartMenu()"> Start </div> <div id="clock" class="clock">12:00 PM</div> </div> <script> function openWindow(id) { const window = document.getElementById(id); window.style.display = 'block'; makeDraggable(window); bringToFront(window); } function closeWindow(id) { document.getElementById(id).style.display = 'none'; } function toggleStartMenu() { alert('Start Menu would open here!'); } function updateClock() { const now = new Date(); const timeString = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); document.getElementById('clock').textContent = timeString; } function makeDraggable(element) { const header = element.querySelector('.window-title'); header.onmousedown = function(e) { const startX = e.clientX; const startY = e.clientY; const startLeft = element.offsetLeft; const startTop = element.offsetTop; document.onmousemove = function(e) { element.style.left = (startLeft + e.clientX - startX) + 'px'; element.style.top = (startTop + e.clientY - startY) + 'px'; bringToFront(element); }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; } function bringToFront(element) { const windows = document.querySelectorAll('.window'); windows.forEach(window => { window.style.zIndex = '1'; }); element.style.zIndex = '2'; } // Initialize clock updateClock(); setInterval(updateClock, 1000); </script> </body> </html> ### Key Features: 1. **Draggable Windows**: Click and drag the title bar of any window to move it. 2. **Closable Windows**: Click the "X" button to close a window. 3. **Start Button**: Clicking it shows an alert (could be extended to show a menu). 4. **Working Clock**: Updates every second. 5. **Desktop Icons**: Clicking "My Computer" or "Recycle Bin" opens respective windows. Let me know if you'd like any modifications or additions!
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.