Windows 95 desktop · gpt-4.1-mini
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.
Here's a complete self-contained Windows 95 style desktop implemented in a single `index.html` file. It includes draggable and closable windows, a Start button with a menu, desktop icons, a taskbar that shows open windows, and a working clock. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Windows 95 Style Desktop</title> <style> /* Reset & basics */ * { box-sizing: border-box; user-select: none; } body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: "MS Sans Serif", Geneva, sans-serif; background: #008080 url('') repeat; /*classic teal background color*/ } #desktop { position: relative; width: 100%; height: 100%; background: #008080; padding: 8px 8px 40px 8px; } #desktop::before { content: ""; position: absolute; left: 16px; top: 16px; width: 64px; height: 64px; background: linear-gradient(45deg, #ffffff 25%, transparent 25%), linear-gradient(-45deg, #000000 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #000000 75%), linear-gradient(-45deg, transparent 75%, #ffffff 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; opacity: 0.05; pointer-events: none; } /* Desktop icons */ .desktop-icon { width: 72px; text-align: center; color: white; font-size: 11px; line-height: 1.2; margin: 0 0 20px 0; cursor: default; user-select: none; } .desktop-icon img { width: 48px; height: 48px; display: block; margin: 0 auto 4px auto; filter: drop-shadow(1px 1px 0 #000); } .desktop-icons { display: flex; flex-wrap: wrap; width: fit-content; gap: 0 16px; } /* Taskbar */ #taskbar { position: fixed; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, #C0C0C0 0%, #808080 100%); border-top: 2px solid #fff; border-bottom: 2px solid #404040; display: flex; align-items: center; font-size: 12px; } /* Start button */ #start-button { width: 70px; height: 32px; margin-left: 4px; margin-right: 8px; border: 2px solid #fff; border-right-color: #404040; border-bottom-color: #404040; background: linear-gradient(to bottom, #C0C0C0 0%, #808080 100%); font-weight: bold; color: black; cursor: pointer; display: flex; align-items: center; justify-content: center; user-select: none; position: relative; } #start-button:active { border: 2px solid #404040; border-right-color: #fff; border-bottom-color: #fff; background: linear-gradient(to bottom, #808080 0%, #C0C0C0 100%); } #start-button span.start-flag { width: 16px; height: 16px; background: linear-gradient(to bottom, #0000ff 0%, #000080 100%); margin-right: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 4px 1px rgba(0,0,255,0.7); clip-path: polygon( 0 0, 12px 2px, 4px 8px, 12px 14px, 0 16px, 0 0 ); } /* Start menu */ #start-menu { position: fixed; bottom: 40px; left: 4px; width: 200px; background: linear-gradient(to bottom, #C0C0C0 0%, #808080 100%); border: 2px solid #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 2px 2px 0 #404040; font-size: 13px; color: black; display: none; user-select: none; z-index: 9999; } #start-menu:focus { outline: none; } #start-menu ul { list-style: none; padding: 4px 0; margin: 0; } #start-menu li { padding: 4px 10px; cursor: default; display: flex; align-items: center; } #start-menu li:hover { background: #000080; color: white; } #start-menu li img { width: 16px; height: 16px; margin-right: 8px; } /* Taskbar window buttons */ #taskbar-windows { flex: 1; display: flex; align-items: center; overflow-x: auto; scrollbar-width: thin; } #taskbar-windows::-webkit-scrollbar { height: 6px; } #taskbar-windows::-webkit-scrollbar-thumb { background: #666; } .taskbar-button { border: 2px solid #fff; border-right-color: #404040; border-bottom-color: #404040; background: linear-gradient(to bottom, #C0C0C0 0%, #808080 100%); height: 28px; min-width: 100px; margin: 0 2px; padding: 2px 8px; line-height: 20px; font-size: 12px; cursor: pointer; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .taskbar-button.active { border: 2px solid #404040; border-right-color: #fff; border-bottom-color: #fff; background: linear-gradient(to bottom, #000080 0%, #0000ff 100%); color: white; } .taskbar-button:hover { background: linear-gradient(to bottom, #0000ff 0%, #000080 100%); color: white; } /* Clock */ #clock { width: 70px; height: 32px; margin-right: 4px; border: 2px solid #fff; border-right-color: #404040; border-bottom-color: #404040; background: linear-gradient(to bottom, #C0C0C0 0%, #808080 100%); font-size: 12px; color: black; display: flex; align-items: center; justify-content: center; user-select: none; font-variant-numeric: tabular-nums; } /* Window frames */ .window { position: absolute; width: 320px; height: 200px; border: 2px solid #fff; border-right-color: #404040; border-bottom-color: #404040; box-shadow: 3px 3px 0 #404040; background: #c0c0c0; display: flex; flex-direction: column; font-size: 13px; color: black; user-select: text; overflow: hidden; z-index: 10; } .window.active { border-color: #000080; border-right-color: #0000ff; border-bottom-color: #0000ff; box-shadow: 3px 3px 0 #000080; background: linear-gradient(to bottom, #c0d0ff 0%, #a0b0ff 100%); } /* Title bar */ .title-bar { background: linear-gradient(to bottom, #000080, #0000ff); color: white; font-weight: bold; padding: 2px 5px; height: 24px; display: flex; align-items: center; cursor: move; user-select: none; } .title-bar.inactive { background: linear-gradient(to bottom, #808080, #a0a0a0); color: #404040; } .title-bar .title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 4px; } .title-bar button { width: 20px; height: 18px; margin-left: 4px; background: linear-gradient(to bottom, #c0c0c0 0%, #808080 100%); border: 2px solid #fff; border-right-color: #404040; border-bottom-color: #404040; cursor: pointer; font-weight: bold; color: black; line-height: 14px; padding: 0; } .title-bar button:active { border: 2px solid #404040; border-right-color: #fff; border-bottom-color: #fff; background: linear-gradient(to bottom, #808080 0%, #c0c0c0 100%); } .title-bar button:hover { background: linear-gradient(to bottom, #000080 0%, #0000ff 100%); color: white; } /* Window content */ .window-content { background: white; padding: 8px; flex: 1; overflow: auto; font-family: "MS Sans Serif", Geneva, sans-serif; } </style> </head> <body> <div id="desktop" tabindex="0"> <div class="desktop-icons" aria-label="Desktop Icons"> <div class="desktop-icon" data-app="my-computer" tabindex="0" role="button" aria-pressed="false" aria-label="My Computer"> <img src="data:image/svg+xml,%3csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='20' height='16' x='2' y='4' rx='2' ry='2'/%3e%3cpath d='M6 4v16'/%3e%3cpath d='M18 4v16M10 8h4'/%3e%3c/svg%3e" alt="" /> My Computer </div> <div class="desktop-icon" data-app="documents" tabindex="0" role="button" aria-pressed="false" aria-label="My Documents"> <img src="data:image/svg+xml,%3csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 4h16v16H4z'/%3e%3cpath d='M8 4v16M16 4v16'/%3e%3c/svg%3e" alt="" /> My Documents </div> <div class="desktop-icon" data-app="recycle-bin" tabindex="0" role="button" aria-pressed="false" aria-label="Recycle Bin"> <img src="data:image/svg+xml,%3csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='8' y='6' width='8' height='12' rx='2' ry='2'/%3e%3cpath d='M10 6v-2h4v2'/%3e%3cpath d='M8 6h8'/%3e%3c/svg%3e" alt="" /> Recycle Bin </div> </div> </div> <div id="taskbar" role="toolbar" aria-label="Taskbar"> <button id="start-button" aria-haspopup="true" aria-expanded="false" aria-controls="start-menu" aria-label="Start Menu"> <span class="start-flag" aria-hidden="true"></span>Start </button> <div id="taskbar-windows" role="tablist" aria-live="polite" aria-label="Open Windows"></div> <div id="clock" aria-live="polite" aria-atomic="true"></div> </div> <div id="start-menu" role="menu" tabindex="-1" aria-label="Start Menu"> <ul> <li role="menuitem" data-app="my-computer"><img src="data:image/svg+xml,%3csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='20' height='16' x='2' y='4' rx='2' ry='2'/%3e%3cpath d='M6 4v16'/%3e%3cpath d='M18 4v16M10 8h4'/%3e%3c/svg%3e" alt="" />My Computer</li> <li role="menuitem" data-app="documents"><img src="data:image/svg+xml,%3csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 4h16v16H4z'/%3e%3cpath d='M8 4v16M16 4v16'/%3e%3c/svg%3e" alt="" />My Documents</li> <li role="menuitem" data-app="recycle-bin"><img src="data:image/svg+xml,%3csvg fill='none' stroke='%23000' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='8' y='6' width='8' height='12' rx='2' ry='2'/%3e%3cpath d='M10 6v-2h4v2'/%3e%3cpath d='M8 6h8'/%3e%3c/svg%3e" alt="" />Recycle Bin</li> <li role="separator" style="border-top:1px solid #404040; margin:4px 0;"></li> <li role="menuitem" id="start-shutdown" tabindex="0">Shutdown...</li> </ul> </div> <script> (() => { const desktop = document.getElementById("desktop"); const startButton = document.getElementById("start-button"); const startMenu = document.getElementById("start-menu"); const taskbarWindows = document.getElementById("taskbar-windows"); const clockElem = document.getElementById("clock"); let zIndexCounter = 20; let windowCount = 0; const openWindows = new Map(); // Apps content dictionary const apps = { "my-computer": { title: "My Computer", content: `<p>Windows 95 My Computer window.<br>Here you can browse drives, devices, and system properties.</p> <ul> <li>3½ Floppy (A:)</li> <li>Local Disk (C:)</li> <li>CD Drive (D:)</li> <li>System Properties</li> </ul>` }, "documents": { title: "My Documents", content: `<p>My Documents - Here are your personal files.</p> <ul> <li>Resume.doc</li> <li>Budget.xls</li> <li>Photo.jpg</li> <li>Notes.txt</li> </ul>` }, "recycle-bin": { title: "Recycle Bin", content: `<p>Recycle Bin - Files you've deleted are listed here.</p> <p>The Recycle Bin is currently empty.</p>` }, "shutdown": { title: "Shut Down", content: `<p>Shut down your computer?</p> <button id="btn-shutdown-yes" style="margin-right:8px;">Yes</button> <button id="btn-shutdown-no">No</button>` } }; // Utility to create a window function createWindow(appKey) { if (!apps[appKey]) { alert("App not found!"); return; } const app = apps[appKey]; const id = `window-${++windowCount}`; // Create window element const win = document.createElement("div"); win.className = "window active"; win.style.top = "100px"; win.style.left = "100px"; win.style.zIndex = ++zIndexCounter; win.setAttribute("role", "dialog"); win.setAttribute("aria-label", app.title); win.id = id; // Title bar const titleBar = document.createElement("div"); titleBar.className = "title-bar"; titleBar.tabIndex = 0; const title = document.createElement("div"); title.className = "title"; title.textContent = app.title; titleBar.appendChild(title); // Close button const btnClose = document.createElement("button"); btnClose.title = "Close"; btnClose.setAttribute("aria-label", "Close"); btnClose.innerHTML = "×"; titleBar.appendChild(btnClose); // Content const content = document.createElement("div"); content.className = "window-content"; content.innerHTML = app.content; win.appendChild(titleBar); win.appendChild(content); desktop.appendChild(win); // Make this the active window and unfocus others setActiveWindow(win); // Draggability makeDraggable(win, titleBar); // Close button btnClose.addEventListener("click", () => { closeWindow(id); }); // For shutdown prompt buttons if (appKey === "shutdown") { document.getElementById("btn-shutdown-yes").addEventListener("click", () => { alert("This is a demo. Shutting down would power off your PC."); closeWindow(id); startMenu.style.display = "none"; }); document.getElementById("btn-shutdown-no").addEventListener("click", () => { closeWindow(id); }); } // Add taskbar button addTaskbarButton(id, app.title); // Map entry openWindows.set(id, win); // Focusable accessibility win.tabIndex = -1; // Focus window on click win.addEventListener("mousedown", () => { setActiveWindow(win); }); // Focus on creation win.focus(); return id; } // Close window by id function closeWindow(id) { const win = openWindows.get(id); if (!win) return; win.remove(); openWindows.delete(id); removeTaskbarButton(id); if (openWindows.size > 0) { // Set last opened window active let lastWin = Array.from(openWindows.values()).pop(); setActiveWindow(lastWin); } } // Set a window active and unfocus others function setActiveWindow(win) { if (!win) return; openWindows.forEach(w => { if (w === win) { w.classList.add("active"); w.querySelector(".title-bar").classList.remove("inactive"); w.style.zIndex = ++zIndexCounter; highlightTaskbarButton(w.id, true); w.focus(); } else { w.classList.remove("active"); w.querySelector(".title-bar").classList.add("inactive"); highlightTaskbarButton(w.id, false); } }); } // Make windows draggable by their title bars function makeDraggable(win, handle) { let offsetX = 0; let offsetY = 0; let dragging = false; function onMouseDown(e) { dragging = true; offsetX = e.clientX - win.offsetLeft; offsetY = e.clientY - win.offsetTop; document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); // Bring to front setActiveWindow(win); } function onMouseMove(e) { if (!dragging) return; let newX = e.clientX - offsetX; let newY = e.clientY - offsetY; // Keep window inside desktop boundaries const desktopRect = desktop.getBoundingClientRect(); newX = Math.max(0, Math.min(newX, desktopRect.width - win.offsetWidth)); newY = Math.max(0, Math.min(newY, desktopRect.height - win.offsetHeight - 40)); // avoid taskbar win.style.left = newX + "px"; win.style.top = newY + "px"; } function onMouseUp() { dragging = false; document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mouseup", onMouseUp); } handle.addEventListener("mousedown", onMouseDown); // Also support keyboard moving while focused on title bar handle.addEventListener("keydown", e => { if (!win.classList.contains("active")) return; const step = 10; let left = parseInt(win.style.left, 10) || 0; let top = parseInt(win.style.top, 10) || 0; switch(e.key) { case "ArrowLeft": e.preventDefault(); left = Math.max(0, left - step); break; case "ArrowRight": e.preventDefault(); left = Math.min(desktop.clientWidth - win.offsetWidth, left + step); break; case "ArrowUp": e.preventDefault(); top = Math.max(0, top - step); break; case "ArrowDown": e.preventDefault(); top = Math.min(desktop.clientHeight - win.offsetHeight - 40, top + step); break; default: return; } win.style.left = left + "px"; win.style.top = top + "px"; }); } // Taskbar button management function addTaskbarButton(winId, title) { const btn = document.createElement("button"); btn.className = "taskbar-button active"; btn.id = `taskbar-${winId}`; btn.textContent = title; btn.setAttribute("role", "tab"); btn.setAttribute("aria-selected", "true"); btn.tabIndex = 0; taskbarWindows.appendChild(btn); btn.addEventListener("click", () => { const win = openWindows.get(winId); if (!win) return; if (win.classList.contains("active")) { // Minimize (hide) window win.style.display = "none"; btn.classList.remove("active"); btn.setAttribute("aria-selected", "false"); win.classList.remove("active"); // Activate another window if any let otherWin = Array.from(openWindows.values()).find(w => w !== win && w.style.display !== "none"); if (otherWin) setActiveWindow(otherWin); } else { // Show and activate window win.style.display = "flex"; setActiveWindow(win); btn.classList.add("active"); btn.setAttribute("aria-selected", "true"); } }); btn.addEventListener("keydown", e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); btn.click(); } }); } function highlightTaskbarButton(winId, isActive) { const btn = document.getElementById(`taskbar-${winId}`); if (!btn) return; if (isActive) { btn.classList.add("active"); btn.setAttribute("aria-selected", "true"); } else { btn.classList.remove("active"); btn.setAttribute("aria-selected", "false"); } } function removeTaskbarButton(winId) { const btn = document.getElementById(`taskbar-${winId}`); if (btn) btn.remove(); } // Handle Start button toggling and keyboard startButton.addEventListener("click", () => { toggleStartMenu(); }); function toggleStartMenu() { if (startMenu.style.display === "block") { closeStartMenu(); } else { openStartMenu(); } } function openStartMenu() { startMenu.style.display = "block"; startButton.setAttribute("aria-expanded", "true"); startMenu.focus(); } function closeStartMenu() { startMenu.style.display = "none"; startButton.setAttribute("aria-expanded", "false"); startButton.focus(); } // Close start menu if clicking outside document.addEventListener("mousedown", (e) => { if (!startMenu.contains(e.target) && e.target !== startButton) { closeStartMenu(); } }); // Open apps from start menu or desktop icons function openApp(appKey) { createWindow(appKey); closeStartMenu(); } startMenu.querySelectorAll("li[role=menuitem]").forEach(item => { item.addEventListener("click", () => { const appKey = item.getAttribute("data-app"); if (appKey) openApp(appKey); else if (item.id === "start-shutdown") openApp("shutdown"); }); item.addEventListener("keydown", e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); item.click(); } }); }); desktop.querySelectorAll(".desktop-icon").forEach(icon => { icon.addEventListener("dblclick", () => { openApp(icon.getAttribute("data-app")); }); icon.addEventListener("keydown", e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openApp(icon.getAttribute("data-app")); } }); }); // Keyboard shortcuts desktop.addEventListener("keydown", e => { if (e.key === "Escape") { if (startMenu.style.display === "block") { closeStartMenu(); e.preventDefault(); } } }); // Clock update function updateClock() { const now = new Date(); let h = now.getHours(); let m = now.getMinutes(); let s = now.getSeconds(); const ampm = h >= 12 ? "PM" : "AM"; h = h % 12; h = h ? h : 12; // 0 => 12 const timeStr = h.toString().padStart(2, " ") + ":" + m.toString().padStart(2, "0") + " " + ampm; clockElem.textContent = timeStr; } updateClock(); setInterval(updateClock, 1000); // Accessibility: focus outline for taskbar buttons & start menu items function focusVisible() { document.body.classList.add('focus-visible'); } function focusBlur() { document.body.classList.remove('focus-visible'); } document.addEventListener('keydown', focusVisible); document.addEventListener('mousedown', focusBlur); })(); </script> </body> </html> ``` Open this file in a modern browser and you'll get a nostalgic Windows 95 style desktop with: - Draggable windows with title bars and close buttons - A Start button that toggles a menu with apps (My Computer, My Documents, Recycle Bin, Shutdown) - Double click desktop icons or select apps from the Start menu to open windows - Taskbar showing open windows, where clicking toggles minimize/restore - A live clock on the right side of the taskbar - Keyboard accessibility with tab focus and keyboard controls Let me know if you'd like me to add anything else!
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.