Windows 95 desktop · llama-3.1-8b-instruct
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 · 6 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.
{"content":"<!DOCTYPE html><html><head><title>Windows 95 Desktop</title><style>/* Global styles */ * { box-sizing: border-box; margin: 0; paValidation failed for tool "write": - path: must have required properties path Received arguments: { "content": "<!DOCTYPE html><html><head><title>Windows 95 Desktop</title><style>/* Global styles */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; background-color: #6495ED; } /* Desktop styles */ #desktop { position: relative; height: 100vh; overflow: hidden; } #desktop-icons { position: absolute; top: 1rem; left: 1rem; } #desktop-icons li { list-style: none; margin: 0.5rem; padding: 0.5rem; border: 1px solid #333; border-radius: 5px; background-color: #F0F0F0; } /* Window styles */ .window { position: absolute; top: 10vh; left: 10vw; width: 50vw; height: 30vh; background-color: #FFFFFF; border: 1px solid #333; border-radius: 5px; padding: 1rem; box-shadow: 0 0 10px rgba(0,0,0,0.2); } /* Start button styles */ #start { position: absolute; top: 1rem; right: 1rem; padding: 1rem; border: 1px solid #333; border-radius: 5px; background-color: #F0F0F0; cursor: pointer; } #start:hover { background-color: #CCE5FF; } /* Taskbar styles */ #taskbar { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background-color: #333; color: #FFFFFF; } #taskbar li { list-style: none; margin: 0 10px; padding: 0 10px; font-size: 14px; } /* Clock styles */ #clock { position: absolute; top: 1rem; right: 1rem; padding: 1rem; border: 1px solid #333; border-radius: 5px; background-color: #F0F0F0; cursor: pointer; } #clock:hover { background-color: #CCE5FF; } /* Draggable styles */ .draggable { cursor: move; } /* Closable styles */ .closable { position: absolute; top: 0; right: 0; padding: 0.5rem; background-color: transparent; border: none; font-size: 16px; } #x { content: \"\\00D7\"; } /* Taskbar buttons */ #taskbar-buttons { position: absolute; top: 1rem; right: 1rem; padding: 0.5rem; background-color: #333; border: 1px solid #333; border-radius: 5px; } #taskbar-buttons li { list-style: none; margin: 0 1rem; padding: 0 1rem; } </style></head><body><div id=\"desktop\"><ul id=\"desktop-icons\"><li>My Computer</li><li>Documents</li><li>Desktop</li></ul><button id=\"start\">Start</button><div id=\"taskbar\"><ul id=\"taskbar-list\"><li>Windows Explorer</li><li>File Manager</li></ul><div id=\"taskbar-buttons\"><ul><li>Close All</li><li>Minimize All</li></ul></div></div><div id=\"clock\"><button id=\"clock-btn\">Time</button></div><div id=\"window-1\" class=\"window draggable closable\"><h1>Window 1</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><button id=\"x-1\">></button></div><div id=\"window-2\" class=\"window draggable closable\"><h1>Window 2</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><button id=\"x-2\">></button></div><script>document.addEventListener(\"DOMContentLoaded\", function(event) { const startButton = document.getElementById(\"start\"); startButton.addEventListener(\"click\", function() { const startMenu = document.createElement(\"ul\"); startMenu.innerHTML = \"<li>Shut Down Windows</li><li>Restart Windows</li><li>Log Off</li><li>Control Panel</li><li>Device Manager</li>\"; startMenu.style.position = \"absolute\"; startMenu.style.top = \"10vh\"; startMenu.style.left = \"20vw\"; startMenu.style.background = \"#F0F0F0\"; startMenu.style.border = \"1px solid #333\"; startMenu.style.borderRadius = \"5px\"; const startContainer = document.createElement(\"div\"); startContainer.appendChild(startMenu); document.body.appendChild(startContainer); }); const clockButton = document.getElementById(\"clock-btn\"); clockButton.addEventListener(\"click\", function() { const clock = document.createElement(\"div\"); clock.innerHTML = `<h1 id=\"clock-header\">Time: ${new Date().toLocaleTimeString()}</h1><button id=\"clock-refresh\">Refresh</button>`; clock.style.position = \"absolute\"; clock.style.top = \"15vh\"; clock.style.right = \"15vw\"; clock.style.border = \"1px solid #333\"; clock.style.borderRadius = \"5px\"; clock.style.background = \"#F0F0F0\"; const clockContainer = document.createElement(\"div\"); clockContainer.appendChild(clock); document.body.appendChild(clockContainer); }); const closeButton1 = document.getElementById(\"x-1\"); closeButton1.addEventListener(\"click\", function() { const window1 = document.getElementById(\"window-1\"); window1.remove(); }); const closeButton2 = document.getElementById(\"x-2\"); closeButton2.addEventListener(\"click\", function() { const window2 = document.getElementById(\"window-2\"); window2.remove(); }); const taskbarList = document.getElementById(\"taskbar-list\"); taskbarList.addEventListener(\"click\", function(e) { if (e.target.tagName === \"LI\") { const button = document.createElement(\"button\"); button.innerHTML = e.target.textContent; button.style.background = \"#CCE5FF\"; button.style.border = \"2px solid #333\"; button.style.borderRadius = \"5px\"; const taskbarContainer = document.createElement(\"div\"); taskbarContainer.appendChild(button); const taskbarContainerDiv = document.createElement(\"div\"); taskbarContainerDiv.appendChild(taskbarContainer); document.body.appendChild(taskbarContainerDiv); } }); const taskbarButtons = document.getElementById(\"taskbar-buttons\"); taskbarButtons.addEventListener(\"click\", function(e) { if (e.target.tagName === \"LI\") { if (e.target.textContent === \"Close All\") { alert(\"Closing all windows\"); } else if (e.target.textContent === \"Minimize All\") { alert(\"Minimizing all windows\"); } } }); const clockRefreshButton = document.getElementById(\"clock-refresh\"); clockRefreshButton.addEventListener(\"click\", function() { const clockHeader = document.getElementById(\"clock-header\"); clockHeader.textContent = `Time: ${new Date().toLocaleTimeString()}`; }); const clockElement = document.getElementById(\"clock\"); clockElement.addEventListener(\"mouseover\", function() { clockElement.style.background = \"#CCE5FF\"; }); const clockElement2 = document.getElementById(\"clock\"); clockElement2.addEventListener(\"mouseout\", function() { clockElement.style.background = \"#F0F0F0\"; }); });</script></div></body></html>" }
/tmp/ws/index.html (5844 bytes)Successfully wrote 5844 bytes to /tmp/ws/index.html
This function call should create the index.html file in the current directory (/tmp/ws) with the provided content.
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
JS error breaks the page; only a generic blue 'Window 2' box with taskbar shows, no Start button or icons, no interactivity.
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.
- Cannot read properties of null (reading 'addEventListener')