oneshotlm
Compare all models on this prompt →

Windows 95 desktop · deepseek-v4-pro

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 · 6 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
The user wants me to create a single-page web app that recreates a Windows 95 style desktop. This needs to be a complete, self-contained HTML file with inline CSS and JS. Let me plan the features:

1. **Desktop background** - Teal/classic Windows 95 green-blue color
2. **Desktop icons** - My Computer, Recycle Bin, etc. with classic Win95 icons (using emoji/unicode/text)
3. **Taskbar** - Bottom bar with Start button, window buttons, and clock
4. **Start Menu** - Pops up when clicking Start, with Programs, Documents, Settings, etc.
5. **Draggable windows** - With title bar, minimize/maximize/close buttons
6. **Closable windows** - Can open/close windows
7. **Working clock** - In the taskbar (system tray area)

Let me build this comprehensively with the classic Win95 look:
- Classic gray (#c0c0c0) for window chrome
- Navy blue title bars with white text
- Raised/sunken 3D borders
- MS Sans Serif style fonts
- Teal desktop (#008080)

I'll create:
- Desktop with icons
- Taskbar with Start button, task buttons, and system tray with clock
- Start menu that appears on click
- A few pre-opened draggable windows (My Computer, perhaps)
- Ability to double-click icons to open new windows
- Window management: drag, close, minimize, bring to front

Let me code this up carefully. I'll use CSS for the Win95 look with box-shadow tricks for the 3D borders, and vanilla JS for all interactivity.

Let me think about the window implementation:
- Each window has: title bar with icon, title, minimize/maximize/close buttons
- Windows can be dragged by the title bar
- Windows can be resized (maybe, but it's complex - I'll stick with draggable and closable)
- Clicking a window brings it to front (z-index management)
- Close button closes the window
- Minimize button hides the window (and shows in taskbar)

For the Start menu:
- Shutdown option at bottom
- Programs, Documents, Settings, Find, Help, Run
- Separator lines

Let me build this now.

I'll create the complete HTML file with all the Win95 styling. Let me think about how to handle the icon and layout:

Desktop icons: I'll use a grid-like layout on the left side of the desktop with:
- My Computer (🖥️)
- Recycle Bin (🗑️)
- My Documents (📁)
- Internet Explorer (🌐)

Windows I can pre-create:
- A "My Computer" window
- Maybe a "Welcome to Windows 95" window

Let me code this up now. I want to make it look really authentic.

Key CSS details for Win95 look:
- Button face: #c0c0c0
- Button highlight: #ffffff
- Button shadow: #808080
- Button dark shadow: #000000
- Title bar active: #000080 (navy)
- Title bar inactive: #808080
- Title bar text: white
- Desktop: #008080
- Font: "MS Sans Serif", "Microsoft Sans Serif", sans-serif

The 3D border effect is created with:
- Top/left: white/light gray (highlight)
- Bottom/right: dark gray/black (shadow)
- For sunken: reverse it

Let me write comprehensive code now.

I think I'll structure it as:
- #desktop - the main area
- #taskbar - bottom bar
- #start-menu - the popup menu
- .window - individual windows
- .desktop-icon - icons on the desktop

For the JS:
- Window manager that tracks all windows
- z-index management (highest z-index wins)
- Drag functionality
- Start menu toggle
- Clock update every second
- Double-click icons to open windows

Let me think about how windows work:
- Each window is a div with position: absolute
- Title bar is draggable
- Close button removes/hides the window
- Minimize hides it but keeps in taskbar
- I'll store window state

For the taskbar, clicking a window button restores it.

Let me also add the classic Win95 window controls: minimize (underscore), maximize (square), close (X).

Here's my plan for the complete implementation:

Desktop icons:
1. My Computer
2. Recycle Bin  
3. My Documents
4. Internet Explorer
5. Notepad

Windows:
- Create window templates for My Computer, Notepad, etc.
- Pre-open a "Welcome" window or My Computer

Start Menu structure:
- Windows 95 banner on the side
- Programs > (submenu? maybe too complex)
- Documents
- Settings
- Find
- Help
- Run...
- Separator
- Shut Down...

Let me keep it manageable but impressive.

Actually, let me think about making the icons look good. I can use simple CSS shapes or Unicode/emoji characters. For authenticity, I'll use simple text-based icons or CSS-drawn icons.

For the window content:
- My Computer: show drives (A:, C:, D:) with icons
- Notepad: a simple text area
- Welcome: some text

Let me write this now. I'll go all out on the Win95 aesthetic.

One thing - for the Start button, I should include the classic Windows logo. I can approximate it with a small colored square or just use text "Start" with the flag.

Let me write the full code now. I'll make it really detailed.

Actually, I want to make sure this is really good. Let me think about the structure carefully.

HTML Structure:
```
#desktop
  .desktop-icon (several)
  .window (several, positioned absolutely)
#taskbar
  #start-button
  #taskbar-windows (container for window buttons)
  #system-tray (clock)
#start-menu (hidden by default, absolutely positioned)
```

CSS:
- Full viewport, no scroll
- Classic Win95 colors and borders
- Pixel-perfect(ish) 3D borders

JS:
- Window manager object/class
- Drag handler
- Start menu toggle
- Clock
- Icon double-click handlers
- Taskbar button management

Let me write this now comprehensively. I want to make the windows properly draggable with good UX - click to bring to front, drag by title bar.

For the Win95 window controls, I'll use special styling on the buttons:
- The minimize button has a flat line at the bottom
- The maximize button has a thick top border
- The close button has an X

Let me use simple CSS for these. Actually, let me use the Unicode characters or just CSS shapes.

OK, enough planning. Let me write the code.

I need to be careful about the window z-index. I'll use a global counter that increments each time a window is focused.

For dragging, I'll use mousedown/mousemove/mouseup on the title bar. I need to account for the offset between the mouse position and the window's top-left corner.

Let me also handle the Start menu closing when clicking outside it.

I think for the taskbar, I'll have it fixed at the bottom. The clock will update every second showing HH:MM AM/PM format (classic Win95 style).

Let me also add the date in the tooltip of the clock (which shows when hovering, but since this is a web app I'll just show time).

Actually, in Win95, clicking the clock shows the date. I'll keep it simple - just show the time updating.

Now let me write all the code. This will be a substantial single file.

For the desktop icon selection (click once to select, double-click to open), I'll implement basic selection highlighting if possible, or just double-click to open.

Let me keep it functional but not over-engineer.

One more thing - I need the window minimize animation. In Win95, minimizing shows an animation of the window shrinking to the taskbar. I'll skip that for simplicity - just hide the window and show its taskbar button as "pressed".

For window buttons in the taskbar - they should show the window title, be pressable (to restore/minimize), and have a pressed state when the window is active.

OK now let me write this. I'll be very thorough.

Actually for desktop icons, let me use simple colored SVG-like icons drawn with CSS or just use large text characters. I think I'll use a combination - a colored square with a simple icon drawn via CSS or just use emoji-like characters.

Wait, the user says "Use NO external resources, CDNs or network requests" - so emoji should be fine as they're built into the system font. But to look truly Win95, I should try to use the classic icons. Let me use simple CSS shapes or text representations.

For "My Computer" - I can draw a simple monitor shape
For "Recycle Bin" - a trash can shape
For "My Documents" - a folder shape
For "Notepad" - a notepad/paper shape

Actually, the simplest approach that still looks good is to use large Unicode characters or simple emoji. But pure Win95 didn't have emoji icons. Let me try to create simple CSS icon representations.

Hmm, let me use a mix. I'll create icon-like divs with a simple colored background and a letter or simple shape. For the windows themselves, the title bar will have a small icon too.

Actually, let me just use text labels with simple colored box icons. The Win95 desktop icons were 32x32 pixel art. I can approximate with some CSS shapes or colored boxes with letters.

Let me simplify: I'll use Unicode/dingbat-style characters that look somewhat like the original icons, or just use colored rectangles with simple designs. The key is the Win95 chrome (window borders, taskbar, start menu) looking authentic.

Let me now actually write the code. I've been planning long enough.

For desktop icons, I'll create simple DIV-based icons:
- A small colored box (blue for My Computer, etc.)
- Text label below

For the My Computer window content, I'll show a list of drives with floppy/CD/hard drive icons.

Let me structure this:

```html
<!DOCTYPE html>
<html>
...
```

I'll write the complete file now.

Let me think about the window minimize/maximize/close buttons. In Win95:
- They're in the top-right corner
- Each is a small square button (16x14 or so)
- Minimize: a flat line at the bottom
- Maximize: a square outline at the top
- Close: an X

I can create these with CSS borders and pseudo-elements or just simple characters.

Let me use simple inner spans with appropriate characters/styling.

OK, writing now. I want to get the 3D border effects right. In Win95:
- Raised: outer top/left = white, outer bottom/right = dark gray, inner top/left = light gray, inner bottom/right = black
- Sunken: reverse
- Actually the classic approach is: top-left border = highlight color (#dfdfdf or white), bottom-right border = shadow (#808080 or #404040)

For simplicity, I'll use box-shadow or multiple borders, or just border styles.

Actually, the simplest way to get the Win95 3D look is using outline/box-shadow or double-border with different colors. Let me use the `border-style: outset` and `border-style: inset` combined with the right colors, or manually set borders.

The classic Win95 raised effect:
- border-top: 2px solid #ffffff
- border-left: 2px solid #ffffff  
- border-bottom: 2px solid #808080
- border-right: 2px solid #808080

For the outer edge of a window frame:
- border-top: 1px solid #dfdfdf
- border-left: 1px solid #dfdfdf
- border-bottom: 1px solid #000000
- border-right: 1px solid #000000
- Then inner: border-top: 1px solid #ffffff, border-left: 1px solid #ffffff, border-bottom: 1px solid #808080, border-right: 1px solid #808080

I'll use `box-shadow` or multiple elements to achieve this. Actually, the classic approach in CSS is to use `border` with different colors on each side, plus an `outline`, but `outline` doesn't support per-side coloring.

An easier approach: I'll use a container div for the window frame (with the outer border) and inner elements. But that adds complexity.

Simpler approach: use `border: 2px solid` and then `box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080` or similar.

Actually the most common CSS-only Win95 approach I've seen uses:
- For raised: `border-top: 2px solid #dfdfdf; border-left: 2px solid #dfdfdf; border-bottom: 2px solid #0a0a0a; border-right: 2px solid #0a0a0a; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;`
- For sunken: flip the colors

Let me just use a practical implementation. I'll use borders for the outer bevel and box-shadow for the inner bevel.

Alright, I'm going to write the complete HTML file now. Let me make it excellent.

One thing about window dragging - I should handle it carefully:
1. mousedown on title bar: record offset, set dragging flag
2. mousemove: update window position
3. mouseup: stop dragging
4. Also handle window focus on any click within the window

I also need to handle windows going off-screen. I'll clamp positions.

For the Start menu:
- Positioned above the taskbar
- Has the "Windows 95" sidebar text (rotated or vertical)
- Menu items with hover highlight
- Clicking outside closes it

Let me write the complete implementation now. This will be long but comprehensive.

I'll also add a right-click context menu on the desktop (very simple, just for show), and the ability to open multiple windows.

Actually, to keep things manageable, let me focus on the core requirements:
- Draggable windows ✓
- Closable windows ✓
- Start button and taskbar ✓
- Desktop icons ✓
- Working clock ✓

And add niceties:
- Minimize/maximize buttons
- Taskbar window buttons
- Start menu with items
- Multiple window types

Let me now write the complete code. I want to make several desktop icons that each open different types of windows.

Desktop icon ideas:
1. My Computer - opens file explorer
2. Recycle Bin - opens recycle bin window
3. My Documents - opens documents folder
4. Internet Explorer - opens a simple browser-like window
5. Notepad - opens a text editor

Window contents:
- My Computer: shows drives (A: 3½ Floppy, C: Hard Drive, D: CD-ROM)
- Recycle Bin: shows deleted items (or empty message)
- My Documents: shows some pretend files
- Internet Explorer: shows a simple "web page"
- Notepad: textarea for editing

This will be really cool!

Now let me actually write it. I'll organize the JS carefully.

For the z-index management, I'll use a global `zIndexCounter` that increments each time a window gets focus.

Let me also handle the taskbar window buttons properly:
- When a window is created, add a button
- When clicked, restore/bring to front
- When minimized, show as not-pressed
- When active, show as pressed
- When closed, remove the button

I need to make sure the Start menu closes when clicking elsewhere on the page.

Let me also make the desktop respond to the window being dragged - I'll attach the mousemove/mouseup to the document for reliable drag handling.

OK, writing the code now for real.

Actually, one consideration: since this is a desktop simulation, I should probably make the body fill the entire viewport without scrolling. I'll use `overflow: hidden` on the body and make the desktop fill 100vh/100vw.

The taskbar should be at the bottom, always visible. The desktop fills the rest.

Let me structure:

```
body (margin: 0, overflow: hidden, height: 100vh)
  #desktop (height: calc(100vh - 28px or similar), background: #008080)
    .desktop-icons-container
      .desktop-icon (x4-5)
    .window (x several)
  #taskbar (position: fixed, bottom: 0, height: ~28px)
    #start-button
    #taskbar-window-buttons
    #tray (clock)
  #start-menu (hidden, positioned above taskbar)
```

The taskbar in Win95 was about 28px tall. Let me use that.

Now let me write the whole thing. I'm going to produce a very comprehensive implementation.

For the window buttons (minimize, maximize, close), I'll use simple character glyphs styled appropriately:
- Minimize: a flat underscore-like bar
- Maximize: a square outline
- Close: × character

Each button is a small 16x14 box with the classic Win95 raised look.

In active windows, the title bar is navy (#000080) with white text. In inactive, it's gray (#808080) with white text (or #c0c0c0 with black text? Actually inactive title bars in Win95 were gray with light gray/dark gray gradient or just solid #808080).

Let me be accurate: Inactive title bar in Win95:
- Background: #808080 (gray)
- Text: #c0c0c0 (light gray) or white

Active title bar:
- Left side: #000080 (navy blue) gradient to #1084d0 on the right
- Text: white
- For simplicity, I'll use solid #000080 for active

Alright, I'm coding now! For real this time. Let me produce the full file.

I need to handle the maximize button somewhat. In Win95, maximize toggles between full-screen and restored size. For simplicity, I might just implement a basic maximize that makes the window fill the desktop. Or I could skip maximize and just have minimize and close work. But the user asked for draggable and closable windows, so maximize is a nice bonus.

Let me implement maximize: it toggles between the window's "normal" size/position and filling the desktop area. I'll store the previous position and restore on un-maximize.

OK here goes. Writing the complete file now.

Let me think about one more thing: the desktop icons should be selectable (single click highlights, double-click opens). In Win95, you click once to select (icon text gets highlighted), and double-click to open. I'll implement basic selection highlighting.

For the icon text labels, when selected, the text background becomes navy blue with white text, and the icon gets a slight tint.

I'll track the currently selected icon.

OK, truly starting the code now. I'll write it all out.

Let me also think about how to handle opening/closing windows through code. I'll create a window manager object that:
- Has a `windows` array
- `createWindow(title, content, icon, width, height)` - creates a new window
- `closeWindow(id)` - removes a window
- `focusWindow(id)` - brings to front
- `minimizeWindow(id)` - hides window, updates taskbar
- Handles z-index

Each window will have a unique ID and stored state (position, size, minimized, maximized).

For the initial state, I'll pre-open a "Welcome to Windows 95" window and maybe My Computer.

Let me plan the desktop icons and what they open:
1. My Computer → File explorer window with drives
2. Recycle Bin → Recycle Bin window
3. My Documents → Documents folder window  
4. Internet Explorer → Simple browser window
5. Notepad → Text editor window

And I'll pre-open the Welcome window.

Alright, I'm going to code this now. For real. No more planning.

One thing about the window Z-ordering: I need to ensure clicking on any part of a window (not just the title bar) brings it to the front. I'll add an event listener for this.

Also, when minimizing, the window should just disappear (and reappear when the taskbar button is clicked). The taskbar button for the active window should appear "pressed" (sunken 3D effect).

For the Start menu header, Win95 had a vertical "Windows 95" text on the left side in a dark gray/navy stripe. I'll create this with a rotated text element.

Now writing:

I should note that I need to be careful about the CSS for the Win95 controls. Let me use specific pixel values.

Window structure:
```
.window (position: absolute)
  .window-titlebar (cursor: move, height: 18px)
    .window-title-icon (small icon)
    .window-title-text
    .window-controls
      button.minimize
      button.maximize
      button.close
  .window-body
    content area
```

For the 3D border around the whole window frame, I'll use a combination of border and box-shadow.

Taskbar height: 28px (classic)

Alright, I'm actually going to write this now. I'm going to produce a very detailed, complete implementation.

The file will be quite long (probably 500+ lines), but that's expected for this kind of comprehensive desktop simulation.

Let me structure my code:

1. CSS (in <style>)
   - Reset/base styles
   - Desktop background
   - Desktop icons
   - Window frame & title bar
   - Window controls (buttons)
   - Taskbar
   - Start menu
   - Various window content styles

2. HTML (body content)
   - Desktop div with icons
   - Taskbar
   - Start menu (hidden)
   - Window templates? Or create windows via JS

3. JS (in <script>)
   - Window manager
   - Drag handler
   - Start menu behavior
   - Clock update
   - Desktop icon interaction

Actually, for the HTML, I'll create the desktop and taskbar structure statically, and generate windows dynamically via JS. I'll pre-create the Welcome window in the initial JS setup.

Let me write it all now. Here we go.

I realize I should also think about mobile responsiveness briefly - but since this is a desktop simulation, I'll target desktop screens. I'll use vh/vw units to fill the screen.

Now truly writing...

For the icon labels on the desktop - in Win95, when an icon is selected, the label has a navy background with white text. I'll implement this.

Let me also handle the start menu sub-items click behavior:
- Programs: could show a submenu
- Documents: open My Documents
- Settings: open a settings window (or show submenu)
- Find: open a find window
- Help: open a help window
- Run: open a run dialog
- Shut Down: show a shutdown dialog

Some of these can just open windows, others can be simple alerts or smaller dialogs.

For the "Shut Down" option, I'll show a simple modal-like overlay saying "It is now safe to turn off your computer." - classic Win95!

Let me add that as a fun Easter egg. Actually, the Win95 shutdown dialog had options: Stand by, Shut down, Restart. Let me create a simple modal with "Shut Down" that shows the orange shutdown screen.

OK, I need to STOP planning and START coding. Here's the complete implementation:

I'll aim for about 600-800 lines of well-organized code. Let me produce it now.

Actually, for efficiency, let me think about what's really needed and avoid over-engineering. The user asked for:
1. Draggable and closable windows ✓
2. Start button and taskbar ✓
3. Desktop icons ✓
4. Working clock ✓

Everything else is bonus. Let me make the core really solid and add reasonable extras.

Let me write the file now.
write /workspace/index.html (34464 bytes)
toolResult

Successfully wrote 34464 bytes to /workspace/index.html

assistant
thinking
The file has been written. Let me verify it looks right by checking the file size and making sure it's complete. Let me also check if there are any issues. Let me also make sure the file is valid by checking the last few lines.
bash {"command":"wc -l /workspace/index.html && tail -5 /workspace/index.html"}
toolResult

1202 /workspace/index.html console.log('Windows 95 Desktop ready! 🖥️'); })(); </script> </body> </html>

assistant
thinking
Good, the file is 1202 lines and ends properly. Let me now verify that the file is well-formed by checking for basic HTML structure. Let me also consider if there are any issues I should fix:

1. The file is self-contained with CSS in `<style>` and JS in `<script>`
2. No external resources or CDNs
3. All the required features are implemented

Let me do a quick sanity check on the features:
- Draggable windows ✓ (mousedown/mousemove/mouseup on titlebar)
- Closable windows ✓ (close button in window controls)
- Start button and taskbar ✓ 
- Desktop icons ✓
- Working clock ✓ (updates every 5 seconds)

I think the implementation is solid. Let me also check if there's anything I might have missed or could improve. The file looks complete and functional. Let me provide a summary to the user.

The complete Windows 95 desktop simulation is at `/workspace/index.html` — 1202 lines, fully self-contained with no external dependencies. **What's included:** | Feature | Details | |---|---| | **Desktop** | Teal background (`#008080`) with 5 classic icons (My Computer, Recycle Bin, My Documents, Internet Explorer, Notepad) | | **Taskbar** | Start button with Windows flag icon, window task buttons, system tray with working clock (updates every 5s) | | **Start Menu** | Vertical "Windows 95" sidebar, Programs/Documents/Settings/Find/Help/Run/Shut Down items with hover highlighting | | **Draggable Windows** | Click and drag any title bar to move windows; double-click title bar to maximize/restore | | **Window Controls** | Minimize (hides to taskbar), Maximize (fills desktop), Close (removes window) | | **Window Content** | My Computer shows drives, Notepad has an editable textarea, Internet Explorer has an address bar + fake page, etc. | | **Window Management** | Click any window to bring it to front; taskbar buttons toggle minimize/restore; staggered new window positions | | **Shut Down** | Shows the classic "It is now safe to turn off your computer" overlay | | **Run Dialog** | Type `notepad`, `explorer`, or `iexplore` to open windows | | **Keyboard** | `Ctrl+Esc` or `Meta` key opens the Start menu; `Esc` dismisses shutdown screen | Open `index.html` in any browser to try it out.

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

modeldeepseek-v4-pro
vendorDeepSeek
harnesspi-agent
generated2026-07-08

EVALUATION

3/5 working

Windows 95 desktop with icons, taskbar, Start button, and a welcome window; static since interactions like center-click/drag/scroll/keys didn't hit interactive elements.

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 spread50.7 / 255
console errors0
js errors none

METRICS

runtime310.7s
tokens in18k
tokens out16k
cached19k
cost / run$0.0220