Windows 95 desktop · ministral-3b-2512
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's a self-contained `index.html` file that recreates a Windows 95-style desktop with draggable and closable windows, a Start button, 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 Style Desktop</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "MS Sans Serif", Arial, sans-serif; } body { background-color: #008080; height: 100vh; overflow: hidden; position: relative; } /* Taskbar */ .taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background-color: #C0C0C0; display: flex; align-items: center; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; overflow-x: auto; } .taskbar::-webkit-scrollbar { display: none; } .taskbar-content { display: flex; align-items: center; padding: 0 10px; width: calc(100% - 20px); } .start-button { background-color: #008080; color: white; border: none; border-radius: 3px; padding: 3px 8px; font-size: 12px; cursor: pointer; margin-right: 5px; font-weight: bold; } .start-button:hover { background-color: #006666; } .taskbar-icons { display: flex; gap: 5px; margin-left: auto; } .taskbar-icon { width: 16px; height: 16px; cursor: pointer; } /* Desktop */ .desktop { position: relative; height: calc(100vh - 30px); background-color: #008080; padding: 20px; overflow-y: auto; } /* Desktop Icons */ .desktop-icon { position: absolute; background-color: #C0C0C0; border-radius: 3px; padding: 5px; margin: 10px; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 5px; user-select: none; } .desktop-icon:hover { background-color: #D0D0D0; } .desktop-icon img { width: 24px; height: 24px; } /* Windows */ .window { position: absolute; background-color: white; border: 1px solid #CCCCCC; border-radius: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding: 10px; min-width: 200px; min-height: 100px; display: flex; flex-direction: column; overflow: hidden; z-index: 100; resize: both; resize: none; resize-grip: none; cursor: move; user-select: none; } .window-header { background-color: #C0C0C0; padding: 5px 10px; display: flex; align-items: center; gap: 5px; cursor: move; } .window-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .window-close { background-color: #FF0000; color: white; border: none; border-radius: 3px; width: 16px; height: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .window-close:hover { background-color: #FF5555; } .window-content { flex-grow: 1; padding: 10px; background-color: #F0F0F0; } /* Clock */ .clock { position: absolute; top: 10px; right: 10px; font-family: "MS Sans Serif", Arial, sans-serif; font-size: 14px; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 3px; } /* Drag Handle */ .drag-handle { position: absolute; top: -10px; left: 0; right: 0; height: 10px; background-color: #C0C0C0; cursor: move; } /* Start Menu */ .start-menu { position: absolute; background-color: white; border: 1px solid #CCCCCC; border-radius: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); min-width: 120px; display: none; z-index: 1001; top: 35px; left: 10px; } .start-menu-item { padding: 8px 10px; cursor: pointer; display: block; border-bottom: 1px solid #E0E0E0; } .start-menu-item:hover { background-color: #F0F0F0; } .start-menu-item:last-child { border-bottom: none; } /* Drag and Drop */ .window-dragging { opacity: 0.5; } .window-closed { display: none; } /* Icons */ .desktop-icon-my-computer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='%23000'/%3E%3C/svg%3E"); } .desktop-icon-recycle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z' fill='%23000'/%3E%3C/svg%3E"); } .desktop-icon-recycle:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z' fill='%23000' opacity='0.7'/%3E%3C/svg%3E"); } </style> </head> <body> <div class="clock" id="clock">Clock: 00:00</div> <div class="taskbar"> <div class="taskbar-content"> <button class="start-button" id="startButton">Start</button> <div class="taskbar-icons"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z' fill='%23000'/%3E%3C/svg%3E" class="taskbar-icon" title="Recycle Bin"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='%23000'/%3E%3C/svg%3E" class="taskbar-icon" title="My Computer"> </div> </div> </div> <div class="desktop" id="desktop"> <div class="desktop-icon" id="myComputerIcon"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='%23000'/%3E%3C/svg%3E" alt="My Computer"> <span>My Computer</span> </div> <div class="desktop-icon" id="recycleBinIcon"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z' fill='%23000'/%3E%3C/svg%3E" alt="Recycle Bin"> <span>Recycle Bin</span> </div> <div class="window" id="notepadWindow" draggable="true"> <div class="drag-handle"></div> <div class="window-header"> <span class="window-title">Notepad</span> <button class="window-close" title="Close">X</button> </div> <div class="window-content"> <p>This is a sample window from Windows 95 style desktop.</p> </div> </div> <div class="window" id="explorerWindow" draggable="true"> <div class="drag-handle"></div> <div class="window-header"> <span class="window-title">Windows Explorer</span> <button class="window-close" title="Close">X</button> </div> <div class="window-content"> <p>File Explorer interface would appear here.</p> </div> </div> </div> <div class="start-menu" id="startMenu"> <div class="start-menu-item" onclick="openProgram('notepad')">Notepad</div> <div class="start-menu-item" onclick="openProgram('explorer')">Windows Explorer</div> <div class="start-menu-item" onclick="openProgram('calc')">Calculator</div> <div class="start-menu-item" onclick="openProgram('ms Paint')">Paint</div> </div> <script> // Clock functionality function updateClock() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); document.getElementById('clock').textContent = `Clock: ${hours}:${minutes}`; } setInterval(updateClock, 1000); updateClock(); // Window management let draggedWindow = null; let startMenuOpen = false; // Drag and drop for windows document.querySelectorAll('.window').forEach(window => { window.addEventListener('mousedown', startDrag); window.addEventListener('mouseup', stopDrag); }); function startDrag(e) { draggedWindow = this; e.preventDefault(); this.classList.add('window-dragging'); document.body.style.cursor = 'grabbing'; const startX = e.clientX; const startY = e.clientY; function moveWindow(e) { const deltaX = e.clientX - startX; const deltaY = e.clientY - startY; this.style.left = (parseInt(this.style.left) || 0) + deltaX + 'px'; this.style.top = (parseInt(this.style.top) || 0) + deltaY + 'px'; } function stopDrag() { this.classList.remove('window-dragging'); document.body.style.cursor = ''; document.removeEventListener('mousemove', moveWindow); document.removeEventListener('mouseup', stopDrag); draggedWindow = null; } document.addEventListener('mousemove', moveWindow); document.addEventListener('mouseup', stopDrag); } // Window close functionality document.querySelectorAll('.window-close').forEach(button => { button.addEventListener('click', function() { const windowId = this.closest('.window').id; const window = document.getElementById(windowId); window.classList.add('window-closed'); window.style.display = 'none'; }); }); // Start button functionality document.getElementById('startButton').addEventListener('click', function() { startMenuOpen = !startMenuOpen; const startMenu = document.getElementById('startMenu'); if (startMenuOpen) { startMenu.style.display = 'block'; } else { startMenu.style.display = 'none'; } }); // Close start menu when clicking outside document.addEventListener('click', function(e) { if (!e.target.closest('.start-button') && !e.target.closest('.start-menu')) { startMenuOpen = false; document.getElementById('startMenu').style.display = 'none'; } }); // Open programs from start menu function openProgram(program) { startMenuOpen = false; document.getElementById('startMenu').style.display = 'none'; // Hide all windows document.querySelectorAll('.window').forEach(window => { window.classList.add('window-closed'); window.style.display = 'none'; }); // Show the selected window
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.