Windows 95 desktop · deepseek-r1
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.
thinking
We are going to create a single HTML file (index.html) that contains all the HTML, CSS, and JavaScript for a Windows 95 style desktop.
The desktop should have:
- Draggable and closable windows
- A Start button and taskbar
- Desktop icons
- A working clock
We'll break it down into parts:
1. HTML structure:
- A desktop background (with a classic Win95 image or color)
- Desktop icons (represented as divs with images and text)
- A taskbar at the bottom (with Start button, clock, and area for open windows)
- Several windows (divs) that can be moved and closed.
2. CSS:
- Style the desktop, icons, taskbar, windows to look like Windows 95.
- Use absolute positioning for icons and windows.
- Style the window title bar, minimize/maximize/close buttons.
3. JavaScript:
- Implement dragging for windows (using mousedown, mousemove, mouseup).
- Implement closing windows (removing them from the DOM and the taskbar).
- Implement a clock that updates every second in the taskbar.
- Implement the Start button menu (show/hide a menu when clicked).
We'll create a single index.html file with:
- <style> tag for CSS
- <script> tag for JavaScript
Since we cannot use external resources, we'll use inline images (data URIs) for icons and window controls?
However, note: the problem says "NO external resources", so we can either use data URIs or simple CSS shapes.
We'll use:
- Simple CSS for window controls (close button as a red square, etc.)
- For desktop icons, we can use emoji or simple SVG in data URIs? But let's keep it simple and use emoji or CSS.
Alternatively, we can use very small inline base64 images for the classic icons? But to keep it self-contained and avoid large data URIs, we'll use simple CSS.
Steps:
Let's design:
Desktop Icons:
- Represent each icon as a div with an image (emoji or a small base64 image) and a label.
Taskbar:
- Fixed at the bottom, with a Start button (left) and clock (right). In between, a space for open window buttons.
Windows:
- Each window has a title bar (with title, and buttons: minimize, maximize, close) and content area.
- The close button will remove the window.
Start Menu:
- When Start button is clicked, show a menu (a div) above the taskbar.
Clock:
- A digital clock in the taskbar that updates every second.
Implementation:
We'll create a few sample windows and icons.
For dragging:
- On mousedown on the title bar, record the initial mouse position and the window's current position.
- On mousemove, update the window's position relative to the initial offset.
- On mouseup, stop dragging.
For closing:
- Attach an event to the close button to remove the window and also remove its button from the taskbar.
For the Start menu:
- Toggle a menu div when the Start button is clicked.
We'll use absolute positioning for windows and icons.
We'll write the entire HTML, CSS, and JS in one file.
Note: We are not allowed to create separate files, so we write everything in index.html.
Let's outline the HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>Windows 95 Desktop</title>
<style>
... all CSS ...
</style>
</head>
<body>
<div id="desktop">
<!-- Desktop icons -->
<div class="icon">
<div class="icon-image">📁</div>
<div class="icon-label">My Computer</div>
</div>
... more icons ...
<!-- Windows -->
<div class="window">
<div class="title-bar">
<div class="title-bar-text">My Window</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close" class="close-button"></button>
</div>
</div>
<div class="window-content">
Content goes here.
</div>
</div>
... more windows ...
</div>
<div id="taskbar">
<div id="start-button">Start</div>
<div id="taskbar-windows">
<!-- Buttons for open windows will be added here -->
</div>
<div id="clock">00:00:00</div>
</div>
<!-- Start Menu (hidden by default) -->
<div id="start-menu" style="display: none;">
... menu items ...
</div>
<script>
... all JavaScript ...
</script>
</body>
</html>
Now, we'll write the CSS to style it to look like Windows 95.
Then, we'll write the JavaScript for:
- Dragging windows
- Closing windows
- Updating the clock
- Toggling the start menu
We'll create a few windows and icons for demonstration.
Let's code accordingly.
I'll create a self-contained Windows 95 desktop simulation in a single HTML file. Here's the implementation: ```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> body { margin: 0; padding: 0; overflow: hidden; font-family: "MS Sans Serif", Arial, sans-serif; background-color: #008080; height: 100vh; display: flex; flex-direction: column; } #desktop { flex: 1; position: relative; background-color: #008080; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23008080"/><path d="M0 0L100 100" stroke="%23000000" stroke-opacity="0.1"/><path d="M100 0L0 100" stroke="%23000000" stroke-opacity="0.1"/></svg>'); background-size: 100px 100px; overflow: hidden; } .icon { position: absolute; width: 80px; text-align: center; cursor: pointer; user-select: none; } .icon img { width: 32px; height: 32px; display: block; margin: 0 auto; } .icon span { display: block; margin-top: 5px; color: white; text-shadow: 1px 1px 1px black; font-size: 12px; } .window { position: absolute; border: 2px solid; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #808080; border-bottom-color: #808080; background-color: #c0c0c0; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); display: none; min-width: 300px; min-height: 200px; } .title-bar { background: linear-gradient(to right, #000080, #1084d0); color: white; padding: 3px; display: flex; justify-content: space-between; align-items: center; cursor: move; font-weight: bold; font-size: 13px; } .title-bar-controls { display: flex; } .title-bar-button { width: 16px; height: 14px; margin-left: 2px; font-weight: bold; font-size: 11px; display: flex; justify-content: center; align-items: center; background-color: #c0c0c0; border: 1px solid; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #808080; border-bottom-color: #808080; cursor: pointer; } .window-content { padding: 10px; height: calc(100% - 25px); overflow: auto; } #taskbar { height: 30px; background-color: #c0c0c0; border-top: 2px solid #ffffff; display: flex; align-items: center; padding: 0 5px; z-index: 1000; } #start-button { height: 24px; padding: 0 10px; background: linear-gradient(to right, #808080, #c0c0c0); border: 2px solid; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #808080; border-bottom-color: #808080; font-weight: bold; display: flex; align-items: center; cursor: pointer; } #taskbar-windows { flex: 1; display: flex; margin: 0 10px; gap: 3px; } .taskbar-window { padding: 0 10px; height: 24px; background: linear-gradient(to right, #808080, #c0c0c0); border: 2px solid; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #808080; border-bottom-color: #808080; display: flex; align-items: center; font-size: 12px; cursor: pointer; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #clock { padding: 0 10px; height: 24px; background: linear-gradient(to right, #808080, #c0c0c0); border: 2px solid; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #808080; border-bottom-color: #808080; display: flex; align-items: center; font-size: 12px; } #start-menu { position: absolute; bottom: 30px; left: 2px; width: 200px; background-color: #c0c0c0; border: 2px solid; border-top-color: #ffffff; border-left-color: #ffffff; border-right-color: #000000; border-bottom-color: #000000; display: none; z-index: 999; } .start-menu-item { padding: 5px 10px; cursor: pointer; } .start-menu-item:hover { background-color: #000080; color: white; } .start-menu-divider { height: 2px; background: linear-gradient(to right, #ffffff, #808080); margin: 3px 0; } </style> </head> <body> <div id="desktop"> <!-- Desktop Icons --> <div class="icon" style="top: 20px; left: 20px;" onclick="openWindow('my-computer')"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='4' y='4' width='24' height='20' fill='%23000080'/><rect x='6' y='6' width='20' height='16' fill='%23008080'/><rect x='12' y='26' width='8' height='2' fill='%23000080'/><rect x='10' y='24' width='12' height='2' fill='%23000080'/></svg>" alt="My Computer"> <span>My Computer</span> </div> <div class="icon" style="top: 20px; left: 120px;" onclick="openWindow('documents')"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='6' y='4' width='20' height='24' fill='%23ffffff' stroke='%23000000' stroke-width='2'/><rect x='10' y='8' width='12' height='2' fill='%23000000'/><rect x='10' y='12' width='12' height='2' fill='%23000000'/><rect x='10' y='16' width='12' height='2' fill='%23000000'/></svg>" alt="Documents"> <span>My Documents</span> </div> <div class="icon" style="top: 100px; left: 20px;" onclick="openWindow('recycle-bin')"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='8' y='6' width='16' height='20' rx='2' fill='%23c0c0c0' stroke='%23000000' stroke-width='1'/><rect x='4' y='10' width='24' height='2' fill='%23000000'/><path d='M12 14 L12 24 M16 14 L16 24 M20 14 L20 24' stroke='%23000000' stroke-width='2'/></svg>" alt="Recycle Bin"> <span>Recycle Bin</span> </div> <!-- Windows --> <div id="my-computer" class="window"> <div class="title-bar"> <div class="title-bar-text">My Computer</div> <div class="title-bar-controls"> <button class="title-bar-button" aria-label="Minimize">_</button> <button class="title-bar-button" aria-label="Maximize">□</button> <button class="title-bar-button" aria-label="Close" onclick="closeWindow('my-computer')">×</button> </div> </div> <div class="window-content"> <p>Hard Drive (C:)</p> <p>CD-ROM Drive (D:)</p> <p>3½ Floppy (A:)</p> </div> </div> <div id="documents" class="window"> <div class="title-bar"> <div class="title-bar-text">My Documents</div> <div class="title-bar-controls"> <button class="title-bar-button" aria-label="Minimize">_</button> <button class="title-bar-button" aria-label="Maximize">□</button> <button class="title-bar-button" aria-label="Close" onclick="closeWindow('documents')">×</button> </div> </div> <div class="window-content"> <p>Budget.xls</p> <p>Letter.doc</p> <p>Resume.doc</p> </div> </div> <div id="recycle-bin" class="window"> <div class="title-bar"> <div class="title-bar-text">Recycle Bin</div> <div class="title-bar-controls"> <button class="title-bar-button" aria-label="Minimize">_</button> <button class="title-bar-button" aria-label="Maximize">□</button> <button class="title-bar-button" aria-label="Close" onclick="closeWindow('recycle-bin')">×</button> </div> </div> <div class="window-content"> <p>Empty</p> </div> </div> <!-- Start Menu --> <div id="start-menu"> <div class="start-menu-item">Programs</div> <div class="start-menu-item">Documents</div> <div class="start-menu-item">Settings</div> <div class="start-menu-item">Find</div> <div class="start-menu-item">Help</div> <div class="start-menu-divider"></div> <div class="start-menu-item">Run...</div> <div class="start-menu-divider"></div> <div class="start-menu-item">Shut Down...</div> </div> </div> <div id="taskbar"> <div id="start-button" onclick="toggleStartMenu()">Start</div> <div id="taskbar-windows"></div> <div id="clock">00:00:00</div> </div> <script> // Draggable windows functionality const windows = document.querySelectorAll('.window'); let activeWindow = null; let offsetX, offsetY; windows.forEach(window => { const titleBar = window.querySelector('.title-bar'); titleBar.addEventListener('mousedown', (e) => { activeWindow = window; offsetX = e.clientX - window.offsetLeft; offsetY = e.clientY - window.offsetTop; bringToFront(window); }); }); document.addEventListener('mousemove', (e) => { if (activeWindow) { activeWindow.style.left = (e.clientX - offsetX) + 'px'; activeWindow.style.top = (e.clientY - offsetY) + 'px'; } }); document.addEventListener('mouseup', () => { activeWindow = null; }); function bringToFront(window) { windows.forEach(w => { w.style.zIndex = 1; }); window.style.zIndex = 10; } // Window management function openWindow(id) { const window = document.getElementById(id); window.style.display = 'block'; bringToFront(window); // Add to taskbar if (!document.querySelector(`.taskbar-window[data-window="${id}"]`)) { const taskbarWindow = document.createElement('div'); taskbarWindow.className = 'taskbar-window'; taskbarWindow.setAttribute('data-window', id); taskbarWindow.textContent = window.querySelector('.title-bar-text').textContent; taskbarWindow.onclick = () => { bringToFront(window); }; document.getElementById('taskbar-windows').appendChild(taskbarWindow); } } function closeWindow(id) { const window = document.getElementById(id); window.style.display = 'none'; // Remove from taskbar const taskbarWindow = document.querySelector(`.taskbar-window[data-window="${id}"]`); if (taskbarWindow) { taskbarWindow.remove(); } } // Start menu functionality function toggleStartMenu() { const startMenu = document.getElementById('start-menu'); startMenu.style.display = startMenu.style.display === 'block' ? 'none' : 'block'; } document.addEventListener('click', (e) => { if (!e.target.closest('#start-button') && !e.target.closest('#start-menu')) { document.getElementById('start-menu').style.display = 'none'; } }); // Clock functionality function updateClock() { const now = new Date(); const timeString = now.toLocaleTimeString(); document.getElementById('clock').textContent = timeString; } setInterval(updateClock, 1000); updateClock(); // Initialize desktop window.onload = function() { // Position windows randomly on load windows.forEach(window => { window.style.left = Math.random() * 300 + 'px'; window.style.top = Math.random() * 200 + 'px'; }); }; </script> </body> </html> ``` This single-file implementation includes: 1. **Desktop Environment**: - Classic Windows 95 teal background with grid pattern - Desktop icons for My Computer, Documents, and Recycle Bin - SVG icons rendered inline 2. **Draggable Windows**: - Windows can be dragged by their title bars - Z-order management (clicked windows come to front) - Minimize/Maximize/Close buttons (functional close) 3. **Taskbar**: - Start button with dropdown menu - Taskbar window buttons for open applications - Working digital clock that updates every second 4. **Start Menu**: - Classic Windows 95 menu items - Toggle functionality - Auto-closes when clicking elsewhere 5. **Self-Contained**: - All CSS styles embedded in <style> tag - JavaScript functionality in <script> tag - SVG icons encoded as data URIs - No external dependencies or network requests The simulation includes three sample windows that can be opened by clicking desktop icons. Each window is draggable and closable, with taskbar integration showing active windows. The clock updates in real-time, and the Start menu shows/hides appropriately.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.