Windows 95 desktop · llama-4-scout
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.
basic implementation of a Windows 95 style desktop in a single HTML page. This example uses HTML, CSS, and JavaScript. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title 95 Desktop</title> <style> /* Global Styles body { font-family: Arial, sans-serif; margin: 0; background-color: #f0f0f0; } Desktop Styles */ #desktop { position: relative; width100vw; height: 100vh; overflow: hidden } /* Taskbar Styles */ #taskbar { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background-color: #808080; display: flex; align-items: center; padding 10px; } #start-button { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } #clock { position: absolute; right: 10px; top: 10px; font-size: 24px; } /* Window Styles */ .window { position: absolute; background-color: #fff; border: 1px solid #000; padding: 10px; width: 200px; height: 100px; } .window .titlebar { background-color: #808080; color: #fff; padding: 5px; display: flex; justify-content: space-between; align-items: center; } .window .titlebar button { background-color: #4CAF50; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } /* Icon Styles */ .icon { position: absolute; width: 50px; height: 50px background-color: #fff; border: 1px solid # display: flex; justify-content: center; align-items; font-size: 24px; cursor: pointer; } </style> </head> <body> <div id="desktop"> <div id="taskbar"> <button id="start-button">Start</button> <div id="clock">12:00 PM</div> </div> <div class="icon" style="left: 10px; top: 10px;">Icon 1</div> <div class="icon" style="left: 70px; top: 10px;">Icon 2</div> <div class="window" style="left: 10px; top70px;" draggable="true"> <div class="titlebar <span>Window 1</span> <button class="close-button">Close</button> div> <p>This is a sample window.</p> </div> <div class="window" style="left: 220px; top: 70px;" draggable="true"> <div class="titlebar"> <span 2</span> <button class="close-button">Close> </div> <p>This is another sample window> </div> > <script> // Get elements const desktop = document.getElementById('desktop const taskbar = document.getElementById('taskbar'); Button = document.getElementById('start-button'); const document.getElementById('clock'); const windows = document.query('.window'); const icons = document.querySelectorAll('.icon'); // Set up clock Clock() { const now = new Date(); const hours = now.getHours().toString().padStart(2, '0'); const minutes = now.getMinutes().toString().padStart(2, '0'); clock.textContent = `${hours}:${minutes}`; setTimeout(updateClock,0); } Clock(); // Make windows.forEach) => { let = false; let offset = [0, 0]; window.addEventListener('mousedown', (e) => { if (e.target.classList.contains('titlebar')) { isDown = true; offset = [window.offsetLeft - e.clientX, window.offsetTop - e.clientY]; } }); document.addEventListener('mouseup', () => isDown = false; }); document.addEventListener('mousemove', (e) => { if (isDown) { window.style.left = `${e.clientX + offset[0]}px`; window.style.top = `${e.clientY + offset[1]}px`; } }); }); // Make icons clickable icons.forEach((icon) => { icon.addEventListener('click', () => { alert('Icon clicked!'); }); }); // Make close buttons work const closeButtons = document.querySelectorAll('.close-button'); closeButtons.forEach((button) => { button.addEventListener('click', () => { button.parentNode.parentNode.remove(); }); }); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.