${title}

\n \n \n \n

${content}

\n `;\n windowsRoot.appendChild(win);\n win.style.zIndex = ++zIndexCounter;\n state.windows.set(id, {el:win, appId: appId, min:false});\n\n```win.style.width\n```\n}\n\nfunction focusWindow(id){\n const info = state.windows.get(id);\n if(!info) return;\n info.el.style.zIndex = ++zIndexCounter;\n if(info.min){ restoreWindow(id); }\n }\n\nfunction closeWindow(id){\n const info = state.windows.get(id); if(!info) return;\n info.el.remove();\n if(info.taskButton) info.taskButton.remove();\n state.windows.delete(id);\n }\n\nfunction minimizeWindow(id){\n const info = state.windows.get(id); if(!info) return;\n info.el.style.display = 'none'; info.min = true; if(info.taskButton) info.taskButton.classList.add('minimized');\n }\n\nfunction restoreWindow(id){\n const info = state.windows.get(id); if(!info) return;\n info.el.style.display = ''; info.min = false; if(info.taskButton) info.taskButton.classList.remove('minimized');\n focusWindow(id);\n }\n\nfunction toggleMinimize(id){ const info=state.windows.get(id); if(!info) return; info.min ? restoreWindow(id) : minimizeWindow(id); }\n\nfunction toggleFullscreen(id){\n const info = state.windows.get(id);\n if(!info) return;\n const el = info.el;\n if(el.dataset.max === '1'){\n try {\n const prev = JSON.parse(el.dataset.prev || '{}');\n el.style.left = prev.left || '60px';\n el.style.top = prev.top || '60px';\n el.style.width = prev.width || '360px';\n el.style.height = prev.height || '220px';\n } catch(e){}\n delete el.dataset.max;\n if(info.taskButton) info.taskButton.classList.remove('maximized');\n } else {\n el.dataset.prev = JSON.stringify({left:el.style.left, top:el.style.top, width:el.style.width, height:el.style.height});\n const left = 6;\n const top = 6;\n const width = window.innerWidth - 12;\n const height = window.innerHeight - 64;\n el.style.left = left + 'px';\n el.style.top = top + 'px';\n el.style.width = width + 'px';\n el.style.height = height + 'px';\n el.dataset.max = '1';\n if(info.taskButton) info.taskButton.classList.add('maximized');\n }\n focusWindow(id);\n }\n\n// Dragging\n let dragState = null;\n function startDrag(e, win){\n e.preventDefault(); win.setPointerCapture(e.pointerId);\n dragState = {id: win.dataset.id, startX: e.clientX, startY: e.clientY, origX: parseInt(win.style.left||0), origY: parseInt(win.style.top||0), pointerId: e.pointerId};\n const move = ev=>{\n if(!dragState) return;\n if(ev.pointerId !== dragState.pointerId) return;\n const dx = ev.clientX - dragState.startX, dy = ev.clientY - dragState.startY;\n const nx = Math.max(6, Math.min(window.innerWidth - 60, dragState.origX + dx));\n const ny = Math.max(6, Math.min(window.innerHeight - 100, dragState.origY + dy));\n win.style.left = nx + 'px'; win.style.top = ny + 'px';\n };\n const up = ev=>{\n if(ev.pointerId !== dragState.pointerId) return;\n win.releasePointerCapture(dragState.pointerId);\n window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up);\n dragState = null;\n };\n window.addEventListener('pointermove', move);\n window.addEventListener('pointerup', up);\n }\n\n// double-click maximize on titlebars\n windowsRoot.addEventListener('dblclick', (e)=>{\n const title = e.target.closest('.titlebar');\n if(title){\n const win = title.parentElement;\n if(!win) return;\n if(!win.dataset.max){\n win.dataset.prev = JSON.stringify({left:win.style.left,top:win.style.top,width:win.style.width,height:win.style.height});\n win.style.left='6px'; win.style.top='6px'; win.style.width = (window.innerWidth - 12)+'px'; win.style.height = (window.innerHeight - 64)+'px';\n win.dataset.max = '1';\n } else {\n const prev = JSON.parse(win.dataset.prev||'{}');\n win.style.left = prev.left || '60px'; win.style.top = prev.top || '60px';\n win.style.width = prev.width || '360px'; win.style.height = prev.height || '220px';\n delete win.dataset.max;\n }\n }\n });\n\nreturn {\n makeWindow,\n focusWindow,\n closeWindow,\n minimizeWindow,\n restoreWindow,\n toggleFullscreen,\n state,\n windowsRoot\n };\n}\n```\n\ncore/apps.js\n```\n```\n/* new file: core/apps.js\n Responsibilities: define and export openApp, createIcon, and app implementations (notepad, control-panel, browser, minesweeper, program-manager content).\n This module depends on a makeWindow function passed at init.\n*/\nexport function initApps({ makeWindow, state }) {\n\n function createIcon(label, app){\n const icons = document.querySelector('#icons');\n const el=document.createElement('div'); el.className='icon'; el.tabIndex=0;\n el.innerHTML = ` $\"\"$ ${label}`;\n el.addEventListener('click',()=> openApp(app));\n icons.appendChild(el);\n }\n\n function programManagerContent(){\n return `\n

Accessories

\n \n \n

Games

\n \n

Entertainment

\n \n

\n `;\n }\n\n function openApp(name){\n if(name === 'notepad') {\n makeWindow({title:'Notepad', content: ``, w:340,h:260,x:40,y:40,appId:'notepad'});\n } else if(name === 'program-manager'){\n const id = makeWindow({title:'Program Manager', content: programManagerContent(), w:420,h:300,x:30,y:30,appId:'pm'});\n // pm-launch buttons will be wired by UI observer\n } else if(name === 'control-panel'){\n const id = makeWindow({\n title: 'Control Panel',\n content: `\n

\n Wallpaper color:\n \n \n

Presets:

\n `,\n w:380,h:220,x:50,y:50,appId:'control-panel'\n });\n // attach behavior after creation\n const winInfo = state.windows.get(id);\n if(winInfo){\n const el = winInfo.el;\n const colorInput = el.querySelector('#wall-color');\n const resetBtn = el.querySelector('#wall-reset');\n const thumbs = el.querySelectorAll('.wall-thumb');\n\n function applyColor(hex){\n document.body.style.background = `linear-gradient(180deg, ${hex}, ${hex === '#C0C0C0' ? 'var(--bg2)' : hex})`;\n }\n\n colorInput.addEventListener('input', (e)=> applyColor(e.target.value));\n resetBtn.addEventListener('click', ()=>{\n colorInput.value = '#c0c0c0';\n document.body.style.background = 'linear-gradient(180deg,var(--bg1),var(--bg2))';\n });\n thumbs.forEach(t=>{\n t.addEventListener('click', ()=> {\n const c = t.dataset.color;\n colorInput.value = c.toLowerCase();\n applyColor(c);\n });\n });\n }\n } else if(name === 'browser'){\n const id = makeWindow({\n title: 'Web Browser',\n content: `\n

\n \n \n \n \n \n \n

\n\n

\n \n \n \n

\n\n

\n \n

\n `,\n w:640,h:420,x:40,y:40,appId:'browser'\n });\n\n const winInfo = state.windows.get(id);\n if(winInfo){\n const el = winInfo.el;\n const backBtn = el.querySelector('#b-back');\n const fwdBtn = el.querySelector('#b-forward');\n const reloadBtn = el.querySelector('#b-reload');\n const urlInput = el.querySelector('#b-url');\n const goBtn = el.querySelector('#b-go');\n const homeBtn = el.querySelector('#b-home');\n const frame = el.querySelector('#b-frame');\n\n el.querySelectorAll('.shortcut-button').forEach(btn=>{\n btn.addEventListener('click', ()=> {\n const u = btn.dataset.url;\n navigateTo(u);\n });\n });\n\n const history = {stack: ['https://websim.app'], idx:0};\n function updateButtons(){\n backBtn.disabled = history.idx <= 0;\n fwdBtn.disabled = history.idx >= history.stack.length -1;\n }\n function navigateTo(u, push=true){\n try{\n if(!/^https?:\\/\\//i.test(u)) u = 'http://' + u;\n frame.src = u;\n urlInput.value = u;\n if(push){\n if(history.idx < history.stack.length-1) history.stack = history.stack.slice(0, history.idx+1);\n history.stack.push(u); history.idx = history.stack.length-1;\n }\n }catch(e){}\n updateButtons();\n }\n backBtn.addEventListener('click', ()=>{ if(history.idx>0){ history.idx--; navigateTo(history.stack[history.idx], false); }});\n fwdBtn.addEventListener('click', ()=>{ if(history.idx < history.stack.length-1){ history.idx++; navigateTo(history.stack[history.idx], false); }});\n reloadBtn.addEventListener('click', ()=>{ frame.src = frame.src; });\n goBtn.addEventListener('click', ()=> navigateTo(urlInput.value));\n urlInput.addEventListener('keypress', (e)=>{ if(e.key==='Enter') navigateTo(urlInput.value); });\n homeBtn.addEventListener('click', ()=> navigateTo('https://websim.app'));\n updateButtons();\n frame.addEventListener('load', ()=>{\n try{\n const u = frame.contentWindow.location.href;\n urlInput.value = u;\n if(history.stack[history.idx] !== u) { history.stack.push(u); history.idx = history.stack.length-1; updateButtons(); }\n }catch(e){}\n });\n }\n } else if(name === 'minesweeper'){\n // Minesweeper - kept in this module for cohesion\n const id = makeWindow({\n title: 'Minesweeper',\n content: `\n

\n Size:\n \n \n

\n `,\n w:420,h:420,x:60,y:60,appId:'minesweeper'\n });\n\n const winInfo = state.windows.get(id);\n if(!winInfo) return;\n const el = winInfo.el;\n const boardEl = el.querySelector('#ms-board');\n const newBtn = el.querySelector('#ms-new');\n const sizeSelect = el.querySelector('#ms-size');\n const statusEl = el.querySelector('#ms-status');\n\n let cols=9, rows=9, mines=10;\n let grid = [];\n function setDifficultyFromSize(s){\n if(s==9){ cols=9; rows=9; mines=10; }\n else if(s==16){ cols=16; rows=16; mines=40; }\n else { cols=22; rows=16; mines=99; }\n }\n function createCells(){\n grid = new Array(rows*cols).fill(0).map(()=>({mine:false,revealed:false,flagged:false,adj:0}));\n }\n function index(r,c){ return r*cols + c; }\n function inBounds(r,c){ return r>=0 && c>=0 && r{ if(c.mine) c.revealed = true; });\n renderBoard();\n statusEl.textContent = 'BOOM! You hit a mine.';\n return;\n }\n remaining--;\n if(cell.adj===0) flood(idx);\n renderBoard();\n if(remaining===0){\n statusEl.textContent = 'You win!';\n grid.forEach((c)=>{ if(!c.revealed) c.revealed = true; });\n renderBoard();\n }\n }\n function flood(startIdx){\n const q=[startIdx];\n while(q.length){\n const cur=q.shift();\n const r=Math.floor(cur/cols), c=cur%cols;\n for(let dr=-1;dr<=1;dr++) for(let dc=-1;dc<=1;dc++){\n const nr=r+dr, nc=c+dc;\n if(inBounds(nr,nc)){\n const ni=index(nr,nc);\n const ncCell = grid[ni];\n if(!ncCell.revealed && !ncCell.flagged && !ncCell.mine){\n ncCell.revealed=true;\n remaining--;\n if(ncCell.adj===0) q.push(ni);\n }\n }\n }\n }\n }\n function toggleFlag(idx){\n const cell = grid[idx];\n if(cell.revealed) return;\n cell.flagged = !cell.flagged;\n renderBoard();\n }\n function renderBoard(){\n boardEl.innerHTML = '';\n boardEl.style.gridTemplateColumns = `repeat(${cols}, 28px)`;\n boardEl.style.gridAutoRows = `28px`;\n for(let r=0;r0){\n btn.textContent = cell.adj;\n btn.style.color = '#0000AA';\n } else {\n btn.textContent = '';\n }\n } else if(cell.flagged){\n btn.textContent = '⚑';\n btn.style.background = '#ffd';\n } else {\n btn.textContent = '';\n }\n btn.addEventListener('pointerdown', (ev)=>{\n ev.preventDefault();\n const idx = Number(btn.dataset.idx);\n if(ev.button===2 || ev.ctrlKey || ev.metaKey){\n toggleFlag(idx);\n } else {\n if(!started) startGame(idx);\n revealCell(idx);\n }\n });\n btn.addEventListener('contextmenu', (e)=> e.preventDefault());\n boardEl.appendChild(btn);\n }\n }\n }\n\n function newGame(){\n setDifficultyFromSize(Number(sizeSelect.value));\n createCells();\n started=false;\n statusEl.textContent = `Mines: ${mines}`;\n boardEl.style.gridTemplateColumns = `repeat(${cols}, 28px)`;\n boardEl.style.width = Math.min(window.innerWidth - 120, cols*34) + 'px';\n boardEl.style.height = Math.min(window.innerHeight - 200, rows*34) + 'px';\n renderBoard();\n }\n\n sizeSelect.addEventListener('change', ()=> newGame());\n newBtn.addEventListener('click', ()=> newGame());\n newGame();\n } else {\n // default demo window\n makeWindow({title: name, content:`

App: ${name}

`, w:300,h:180});\n }\n }\n\n return { openApp, createIcon };\n}\n```\n\ncore/ui.js\n```core/ui.js\n```\n/* new file: core/ui.js\n Responsibilities: wire up desktop icons, program manager dock, observer for pm-launch buttons, keyboard shortcuts.\n*/\nexport function initUI({ createIcon, openApp, pmButtonSelector = '#pm-button', iconsRootSelector = '#icons', windowsRoot }) {\n const pmButton = document.querySelector(pmButtonSelector);\n const iconsRoot = document.querySelector(iconsRootSelector);\n\n// create initial icons\n createIcon('Program Manager','program-manager');\n createIcon('Notepad','notepad');\n createIcon('Control Panel','control-panel');\n createIcon('Minesweeper','minesweeper');\n\nif(pmButton){\n pmButton.addEventListener('click', ()=> openApp('program-manager'));\n }\n\n// observe windowsRoot for .pm-launch buttons and wire them\n const observer = new MutationObserver(m=>{\n m.forEach(rec=>{\n rec.addedNodes.forEach(n=>{\n if(n.nodeType===1){\n n.querySelectorAll('.pm-launch').forEach(btn=>{\n btn.addEventListener('click', ()=> {\n const app = btn.dataset.app;\n openApp(app);\n });\n });\n }\n });\n });\n });\n if(windowsRoot) observer.observe(windowsRoot, {childList:true, subtree:true});\n\n// desktop keyboard shortcuts\n const desktop = document.querySelector('#desktop');\n if(desktop){\n desktop.addEventListener('keydown', (e)=>{\n if((e.ctrlKey||e.metaKey) && e.key.toLowerCase()==='n'){ openApp('notepad'); }\n });\n }\n}\n```e.ctrlKey\n```","page_description","This is a web-based mock “desktop” that recreates a Windows 3.1–style interface. The page includes a desktop area with an icon region, a container for…","cursor","eyJpZCI6Ijc1OGxkc3JreXR3dzBoYTh0MGkwIn0","token","included",[],"about",{"_188":-5},"parent","routes/browser/layout","actionData","errors"]

Win3.1 Mock