oneshotlm
Compare all models on this prompt →

Windows 95 desktop · gpt-oss-20b

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.

⛨ sandboxed Open in new tab ↗
transcript · 4 messages
user

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.

assistant
thinking
We need to produce index.html with all code. Should be fully client-side. Use CSS for styling. We need JavaScript for interaction: draggable windows, closable windows, start button/taskbar, desktop icons, working clock. It's complex but we can implement simplified. Use HTML structure: body containing desktop icons, taskbar, start menu.

We need draggable windows: use mouse events to drag, store positions in CSS absolute.

Draggable: For each window, we need header bar, close button, content area. We'll implement with vanilla JS.

Also have start button in taskbar. Clicking shows start menu with sample apps: e.g., "Text Editor" that opens a new window.

Also, icons on desktop – small clickable icons; clicking opens windows.

Clock in taskbar: shows time, updates each second.

No external resources.

We need single file index.html. Use <style> and <script> tags.

Simplify: No actual application windows: create generic window with title. For example, "My Application" if icon clicked.

Implement windows: create DIV with class "window", with class "active" maybe.

We need closable.

Taskbar has start button on left, clock on right.

Zombie: Manage z-index increments.

Implement draggable: mouse down on header, then track mousemove over document, update -> left/top.

Add event listeners.

Simplify: no preserving between sessions.

Implement close button: sets display none.

Implement start button: toggles menu.

Implement start menu: simple UL.

Implement desktop icons: each icon has image (maybe generic icons from emoji or base64). But as no external resources, we can use text icons or data URIs.

Simplify to text icons using <img src="data:image/svg+xml;base64,..."? But maybe just use text with emojis: e.g., 📄 for document, 🖥️ for computer, ⚙️ for settings.

We can use CSS to style icons.

Working clock: JS that updates innerText to current time.

Let's plan structure.

<html>
<head>
<title>Windows 95 Desktop</title>
<style> ... CSS ... </style>
</head>
<body>
<div class="desktop">
  <div class="icon" data-title="Text Editor" data-content="This is a simple text editor."><img src="data:image/svg+xml;base64,..."> <div class="icon-label">Text Editor</div></div>
  <!-- more icons -->
</div>
<div class="taskbar">
  <div class="start-button">Start</div>
  <div class="taskbar-actions"><div class="start-menu" style="display:none;"> ... </div></div>
  <div class="clock">12:00</div>
</div>
<script> JS ... </script>
</body>
</html>

But need Draggable windows: create window divs appended to body.

When icon clicked, call createWindow(appName, content).

Simplify: window header shows title, close button.

CSS for windows: background, border, etc. Use 95 UI style.

Define .window with fixed width/height; .window-header: cursor: move; .window-close: cursor: pointer okay.

Start menu: UL list of items; clicking 'A's open new window.

Also, taskbar icons: maybe show open windows icons.

But requirement: draggable, closable, start button and taskbar, desktop icons, working clock.

Goal: full testable ins.

Let's implement.

Now writing index.html does not need to create other files.

We'll need to implement base64 icons: for simplicity could use simple shapes or use standard unicode icons.

But we can avoid icons: just use text inside <div class="icon">DOCUMENT</div> with background.

Ok.

Let's design CSS.

Desktop: absolute full; background color.

Icons: .icon { display: inline-block; width: 64px; height: 80px; margin: 10px; text-align:center; color:white; font-family: "MS Sans Serif", sans-serif; cursor:pointer; }
. Each icon contains .icon-label below.

Taskbar: .taskbar { position:fixed; bottom:0; left:0; right:0; height:30px; background:#008080; display:flex; align-items:center; }
.start-button { background:#C0C0C0; border:2px solid #000; padding:0 10px; margin-left:5px; cursor:pointer; }
.clock { margin-left:auto; color:white; margin-right:10px; }
.start-menu: position:absolute bottom:30px left:5px; background:#C0C0C0; border:2px solid #000; width:150px; display:none;
.start-menu ul { list-style:none; padding:0; margin:0; }
.start-menu li { padding:2px 5px; }
.start-menu li:hover { background:#808080; color:white; }

Window: .window { position:absolute; width:300px; height:200px; border:2px solid #000; background:#C0C0C0; box-shadow:0 0 10px #000; }
.window-header { background:#000080; color:white; padding:3px; cursor:move; display:flex; justify-content:space-between; }
.close-btn { color:white; padding:0 5px; cursor:pointer; }
.window-content { padding:5px; overflow:auto; color:black; background:white; }

Make windows have z-index; default 1; set to top when clicked.

Now JavaScript:

- Create global zIndex counter starting at 2.

- function createWindow(title, content) { create div elements, set event listeners. Append to document.

- Add drag functionality: on mousedown on header, set dragging; store offset; on mousemove update position; on mouseup stop.

- On click of .window sets z-index to zIndex++ and bring to front.

- Close button handler: window.style.display='none'.

- Desktop icons: event listener; click open window.

- Start button: toggle start-menu display.

- Clock: setInterval update.

- Additionally, when start-menu items clicked, similar to desktop icons.

Example menu items: "Text Editor", "Browser" etc.

Simplify.

Implementation details: The start menu can have items with data-title and data-content attributes similar to icons. When clicked, call createWindow.

Also, icons may be inside .desktop; each icon may have data-title and data-content.

Style icons: We'll style simple squares with background color grey (#C0C0C0). For demonstration.

Now produce file.

Let's produce final index.html file with content.

We must not output shell commands? But we can just output the content using write().

Need to issue write: path: "index.html", content: <HTML..>.

Write multi-line string; ensuring escapes. Use triple quotes? But must within JSON string property. We'll just provide as string inside function call.

Let's first create content. Then call write.

Ok.

Make sure to escape newline properly? The tool expects content as string; inside Python we can send multi-line string.

Let's construct now.

We'll start writing content.

We'll use minimal indentation but okay.

Let's craft file content:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Windows 95 Desktop</title>
<style>
  body{margin:0; padding:0; font-family:"MS Sans Serif",sans-serif;}
  .desktop{position:fixed;top:0;left:0;width:100%;height:calc(100% - 30px);background:#008080;overflow:auto;cursor:default;}
  .icon{display:inline-block;width:64px;margin:10px;text-align:center;color:white;cursor:pointer;}
  .icon img{width:48px;height:48px;}
  .icon-label{font-size:12px;}
  .taskbar{position:fixed;bottom:0;left:0;right:0;height:30px;background:#008080;border-top:1px solid #000;display:flex;align-items:center;}
  .start-button{background:#C0C0C0;border:2px solid #000;padding:0 10px;margin-left:5px;cursor:pointer;}
  .clock{margin-left:auto;margin-right:10px;color:white;}
  .start-menu{position:absolute;bottom:30px;left:5px;background:#C0C0C0;border:2px solid #000;width:150px;display:none;}
  .start-menu ul{list-style:none;margin:0;padding:0;}
  .start-menu li{padding:5px;cursor:pointer;}
  .start-menu li:hover{background:#808080;color:white;}
  .window{position:absolute;width:300px;height:200px;border:2px solid #000;background:#C0C0C0;box-shadow:0 0 10px #000;z-index:1;overflow:hidden;}
  .window-header{background:#000080;color:white;padding:2px 5px;cursor:move;display:flex;justify-content:space-between;align-items:center;}
  .window-header .title{flex:1;}
  .close-btn{color:white;font-weight:bold;padding:0 5px;cursor:pointer;}
  .window-content{padding:5px;background:white;color:black;overflow:auto;height:calc(100% - 25px);}
</style>
</head>
<body>
<div class="desktop" id="desktop">
  <div class="icon" data-title="Text Editor" data-content="This is a simple text editor.">
    <div class="icon-label">Text&nbsp;Editor</div>
  </div>
  <div class="icon" data-title="Browser" data-content="This is a simple web browser placeholder.">
    <div class="icon-label">Browser</div>
  </div>
  <div class="icon" data-title="Settings" data-content="This is the settings window.">
    <div class="icon-label">Settings</div>
  </div>
</div>
<div class="taskbar">
  <div class="start-button" id="startBtn">Start</div>
  <div class="start-menu" id="startMenu">
    <ul>
      <li data-title="Text Editor" data-content="This is a simple text editor.">Text Editor</li>
      <li data-title="Browser" data-content="This is a simple web browser placeholder.">Browser</li>
      <li data-title="Settings" data-content="This is the settings window.">Settings</li>
    </ul>
  </div>
  <div class="clock" id="clock">00:00:00</div>
</div>
<script>
  // Global z-index counter
  let zIndex = 2;
  const desktop = document.getElementById('desktop');
  const startBtn = document.getElementById('startBtn');
  const startMenu = document.getElementById('startMenu');
  const clock = document.getElementById('clock');

  // Clock update
  function updateClock() {
    const now = new Date();
    const hh = String(now.getHours()).padStart(2,'0');
    const mm = String(now.getMinutes()).padStart(2,'0');
    const ss = String(now.getSeconds()).padStart(2,'0');
    clock.textContent = `${hh}:${mm}:${ss}`;
  }
  setInterval(updateClock,1000);
  updateClock();

  // Window creation
  function createWindow(title,text){
    const win = document.createElement('div');
    win.className='window';
    win.style.zIndex = zIndex++;
    win.innerHTML = \`
      <div class="window-header"><span class="title">\${title}</span><span class="close-btn">X</span></div>
      <div class="window-content">\${text}</div>
    \`;
    // Dragging
    const header = win.querySelector('.window-header');
    header.addEventListener('mousedown',function(e){
      e.preventDefault();
      const rect = win.getBoundingClientRect();
      const offsetX = e.clientX - rect.left;
      const offsetY = e.clientY - rect.top;
      function onMove(e2){
        win.style.left = (e2.clientX - offsetX)+'px';
        win.style.top = (e2.clientY - offsetY)+'px';
      }
      function onUp(){
        document.removeEventListener('mousemove',onMove);
        document.removeEventListener('mouseup',onUp);
      }
      document.addEventListener('mousemove',onMove);
      document.addEventListener('mouseup',onUp);
    });
    // Bring to front on click
    win.addEventListener('mousedown',()=>{
      win.style.zIndex = zIndex++;
    });
    // Close button
    win.querySelector('.close-btn').addEventListener('click',(e)=>{
      e.stopPropagation();
      win.style.display='none';
    });
    document.body.appendChild(win);
  }

  // Desktop icon click handler
  desktop.addEventListener('click',function(e){
    const icon = e.target.closest('.icon');
    if(icon){
      const title = icon.getAttribute('data-title');
      const content = icon.getAttribute('data-content');
      createWindow(title,content);
    }
  });

  // Start button toggle
  startBtn.addEventListener('click',function(e){
    e.stopPropagation();
    startMenu.style.display = startMenu.style.display=== 'block'?'none':'block';
  });

  // Start menu item click
  startMenu.addEventListener('click',function(e){
    const li = e.target.closest('li');
    if(li){
      const title = li.getAttribute('data-title');
      const content = li.getAttribute('data-content');
      createWindow(title,content);
      startMenu.style.display='none';
    }
  });

  // Click outside start menu closes it
  document.addEventListener('click',function(){
    if(startMenu.style.display==='block'){
      startMenu.style.display='none';
    }
  });
</script>
</body>
</html>

Make sure string escapes: we used template literal within JS createWindow for innerHTML. In the write content string, we need to include backticks correctly. But as chatGPT we just provide content as string. The tool will embed raw content string.

We must escape backticks inside JS string? Wait, the file content might include backticks for template string inside JS. Should be fine to write as literal backticks.

But the write tool expects JSON string; need to escape backslashes and quotes. Yet we send the content string as value; internal double quotes will be fine as we don't use them in the content string except inside the file. Provide as is.

But double quotes inside CSS etc will be in the HTML; they need to be preserved but not escape? According to tool spec, the content is a string; using quotes is fine because JSON will treat them as part of the string. The JSON string should be properly quoted with double quotes around entire content; internal double quotes need to be escaped. But the agent will generate JSON with proper escaping automatically. As long as we provide content as string inside the function call, the service likely handles that. We need to make the content string formatted such that tool interprets it correctly. Generally we can use the content in plain text, and the tool will encode.

But I'd better ensure minimal quoting confusion. Provide content as a plain string but probably via JSON, so double quotes inside content are okay.

But to be safe, maybe we avoid double quotes in the content and use single quotes where possible, but CSS uses quotes around URLs etc. Might be okay.

Let's send file.
→ write index.html (5505 bytes)
toolResult

Successfully wrote 5505 bytes to index.html

assistant

Here is the `index.html` file that creates a simple Windows‑95 style desktop with draggable, closable windows, a Start button and taskbar, desktop icons, and a live clock. It contains all HTML, CSS, and JavaScript in a single self‑contained file.

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

modelgpt-oss-20b
vendorOpenAI
harnesspi-agent
generated2026-07-22

EVALUATION

★★★★★ 1/5 broken

Only an empty teal desktop with taskbar, Start button, clock, and faint menu labels; no windows or icons appear, no reaction to any input.

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.

idle motion0.0%
on click0.0%
on drag0.0%
on wheel0.0%
on enter + space0.0%
on arrow keys0.0%
on w/a/s/d0.0%
frame spread3.2 / 255
console errors0
js errors none

METRICS

runtime67.8s
tokens in7.4k
tokens out5.0k
cached0
cost / run$0.0009