Windows 95 desktop · mistral-large-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.
transcript · 18 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.
/tmp/ws/index.html (8830 bytes)Successfully wrote 8830 bytes to /tmp/ws/index.html
/tmp/ws/index.html (9250 bytes)Successfully wrote 9250 bytes to /tmp/ws/index.html
/tmp/ws/index.html (9322 bytes)Successfully wrote 9322 bytes to /tmp/ws/index.html
/tmp/ws/index.html (9330 bytes)Successfully wrote 9330 bytes to /tmp/ws/index.html
/tmp/ws/index.html (9347 bytes)Successfully wrote 9347 bytes to /tmp/ws/index.html
/tmp/ws/index.html (9368 bytes)Successfully wrote 9368 bytes to /tmp/ws/index.html
/tmp/ws/index.html (9367 bytes)Successfully wrote 9367 bytes to /tmp/ws/index.html
/tmp/ws/index.html (9367 bytes)Successfully wrote 9367 bytes to /tmp/ws/index.html
Here is the complete, self-contained **Windows 95-style desktop** in a single `index.html` file. It includes: - **Draggable and closable windows** - **Start button and taskbar** - **Desktop icons** (My Computer, Recycle Bin) - **Working clock** (updates in real-time) - **Start menu** (click the Start button to toggle) - **Fully sandboxed** (no external resources or network requests) --- ### **Final `index.html`** ```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 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; } /* Desktop Icons */ .desktop-icon { width: 80px; margin: 10px; text-align: center; position: absolute; color: white; text-shadow: 1px 1px 1px black; cursor: pointer; } .desktop-icon img { width: 32px; height: 32px; display: block; margin: 0 auto 5px; } .desktop-icon span { font-size: 12px; word-break: break-word; } /* Taskbar */ .taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background-color: #c0c0c0; border-top: 2px solid #dfdfdf; display: flex; align-items: center; padding: 0 5px; gap: 2px; } /* Start Button */ .start-button { background-color: #c0c0c0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; padding: 2px 8px; height: 24px; display: flex; align-items: center; gap: 5px; cursor: pointer; font-weight: bold; } .start-button:hover { background-color: #000080; color: white; border-color: #808080 #ffffff #ffffff #808080; } .start-button img { width: 16px; height: 16px; } /* Taskbar Clock */ .taskbar-clock { margin-left: auto; background-color: #c0c0c0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; padding: 2px 5px; height: 24px; display: flex; align-items: center; font-size: 12px; } /* Window Styles */ .window { position: absolute; width: 300px; background-color: #c0c0c0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); display: none; flex-direction: column; font-size: 12px; } .window.active { display: flex; } .window-header { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 3px 5px; display: flex; justify-content: space-between; align-items: center; cursor: move; border-bottom: 1px solid #808080; } .window-title { font-weight: bold; } .window-controls { display: flex; gap: 3px; } .window-control { width: 20px; height: 20px; background-color: #c0c0c0; border: 2px solid; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; } .window-control.minimize { border-color: #ffffff #808080 #808080 #ffffff; } .window-control.maximize { border-color: #ffffff #808080 #808080 #ffffff; } .window-control.close { border-color: #808080 #ffffff #ffffff #808080; } .window-content { padding: 10px; flex: 1; background-color: #ffffff; border-top: 1px solid #ffffff; border-bottom: 1px solid #808080; } .window-status-bar { background-color: #c0c0c0; padding: 2px 5px; border-top: 1px solid #808080; font-size: 11px; } /* Start Menu */ .start-menu { position: absolute; width: 200px; height: 300px; bottom: 30px; left: 0; display: none; flex-direction: column; background-color: #c0c0c0; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); } .start-menu .window-header { background: linear-gradient(90deg, #000080, #1084d0); color: white; padding: 3px 5px; font-weight: bold; } .start-menu .window-content { padding: 0; flex: 1; background-color: #ffffff; border-top: 1px solid #ffffff; border-bottom: 1px solid #808080; } .start-menu-item { padding: 5px 10px; display: flex; align-items: center; gap: 5px; cursor: pointer; border-bottom: 1px solid #c0c0c0; } .start-menu-item:hover { background-color: #000080; color: white; } </style> </head> <body> <!-- Desktop Icons --> <div class="desktop-icon" style="top: 10px; left: 10px;" onclick="openWindow('my-computer')"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTAgNkg0VjI2aDZ2MmgxMHYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg0VjZ6Ii8+CiAgPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTI4IDI2djJoLTJ2LTJoLTJ2LTjoLTJ2LTjoLTJ2LTJMMTQgMjZ6Ii8+CiAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTTI4IDI2djJoLTJ2LTjoLTJ2LTjoLTJ2LTJMMTQgMjZ6Ii8+CiAgPHBhdGggZmlsbD0iIzgwMDAwMCIgZD0iTTI4IDI2djJoLTJ2LTjoLTJ2LTjoLTJ2LTJMMTQgMjZ6Ii8+Cjwvc3ZnPgo=" alt="My Computer"> <span>My Computer</span> </div> <div class="desktop-icon" style="top: 10px; left: 100px;" onclick="openWindow('recycle-bin')"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTAgNkg0VjI2aDZ2MmgxMHYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg2VjZoMnYyaDZWMmg0VjZ6Ii8+CiAgPHBhdGggZmlsbD0iIzAwODAwMCIgZD0iTTIwIDVINlY5aDZWNWg2VjloLTZWNWg2VjloLTZWNWg2VjExSDIwIi8+CiAgPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIwIDdoNlY5SDIwIi8+CiAgPHBhdGggZmlsbD0iIzAwODAwMCIgZD0iTTIwIDloNlYxMUgyMCIvPgogIDxwYXRoIGZpbGw9IiNGRkZGRkZGIiBkPSJNMjAgMTFoNlYxM0gyMCIvPgogIDxwYXRoIGZpbGw9IiMwMDgwMDAiIGQ9Ik0yMCAxM3g2VjE1SDIwIi8+CiAgPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIwIDE1aDZWMTdIMjAiLz4KICA8cGF0aCBmaWxsPSIjMDA4MDAwIiBkPSJNMjAgMTdoNlYxOUgyMCIvPgogIDxwYXRoIGZpbGw9IiNGRkZGRkZGIiBkPSJNMjAgMTloNlYyMUgyMCIvPgogIDxwYXRoIGZpbGw9IiMwMDgwMDAiIGQ9Ik0yMCAyMUgyNlYyM0gyMCIvPgogIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0yMCAyM0gyOFYyNUgyMCIvPgogIDxwYXRoIGZpbGw9IiM4MDAwMDAiIGQ9Ik0yMCAyNUgyNlYyN0gyMCIvPgogIDxwYXRoIGZpbGw9IiNDMEMwMDAiIGQ9Ik0yMCAyN0gyOFYyOUgyMCIvPgo8L3N2Zz4K" alt="Recycle Bin"> <span>Recycle Bin</span> </div> <!-- Taskbar --> <div class="taskbar"> <div class="start-button" onclick="toggleStartMenu()"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiMwMDAwODAiLz4KICA8cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iNiIgIGhlaWdodD0iNiIgZmlsbD0iI0ZGRkZGRiIvPgogIDxyZWN0IHg9IjgiIHk9IjEiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIGZpbGw9IiNGRkZGRkYiLz4KICA8cmVjdCB4PSIxIiB5PSI4IiB3aWR0aD0iNiIgIGhlaWdodD0iNiIgZmlsbD0iI0ZGRkZGRiIvPgogIDxyZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIGZpbGw9IiNGRkZGRkYiLz4KPC9zdmc+Cg==" alt="Start"> <span>Start</span> </div> <div class="taskbar-clock" id="taskbar-clock">12:00 PM</div> </div> <!-- Start Menu --> <div class="start-menu" id="start-menu"> <div class="window-header"> <span class="window-title">Start Menu</span> </div> <div class="window-content"> <div class="start-menu-item" onclick="openWindow('programs')"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiMwMDAwODAiLz4KICA8cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iNiIgIGhlaWdodD0iNiIgZmlsbD0iI0ZGRkZGRiIvPgogIDxyZWN0IHg9IjgiIHk9IjEiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIGZpbGw9IiNGRkZGRkYiLz4KICA8cmVjdCB4PSIxIiB5PSI4IiB3aWR0aD0iNiIgIGhlaWdodD0iNiIgZmlsbD0iI0ZGRkZGRiIvPgogIDxyZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIGZpbGw9IiNGRkZGRkYiLz4KPC9zdmc+Cg==" alt="Programs" style="width: 16px; height: 16px;"> <span>Programs</span> </div> <div class="start-menu-item" onclick="openWindow('documents')"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij4KICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiMwMDAwODAiLz4KICA8cmVjdCB4PSIxIiB5PSIx
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
Only a teal background, taskbar with Start button and clock, and two barely visible desktop icons; no windows or content render.
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.