Windows 98 Simulator

\n openWindow('my-computer')} />\n openWindow('notepad')} />\n openWindow('paint')} />\n {windows.map(window => (\n closeWindow(window.id)}\n onMinimize={() => minimizeWindow(window.id)}\n isMinimized={minimizedWindows.includes(window.id)}\n onFocus={() => bringToFront(window.id)}\n updatePosition={(newPosition) => updateWindowPosition(window.id, newPosition)}\n />\n ))}\n

\n setStartMenuOpen(!startMenuOpen)}\n openWindow={openWindow}\n onInstagramClick={handleInstagramRedirect}\n time={time}\n windows={windows}\n minimizedWindows={minimizedWindows}\n restoreWindow={restoreWindow}\n />\n {showRedirectPrompt && (\n

External Link

You are about to leave the Windows 98 simulator and go to Instagram.com. Do you want to continue?

\n \n \n

\n )}\n

\n View Source\n

\n );\n}\n\nfunction DesktopIcon({ icon, label, onClick }) {\n return (\n

\n {icon}\n {label}\n

\n );\n}\n\nfunction Window({ window, isActive, onClose, onMinimize, isMinimized, onFocus, updatePosition }) {\n const [isDragging, setIsDragging] = useState(false);\n const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });\n const windowRef = useRef(null);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n const rect = windowRef.current.getBoundingClientRect();\n setDragOffset({\n x: e.clientX - rect.left,\n y: e.clientY - rect.top\n });\n onFocus();\n };\n\n const handleMouseMove = (e) => {\n if (isDragging) {\n updatePosition({\n x: e.clientX - dragOffset.x,\n y: e.clientY - dragOffset.y\n });\n }\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n } else {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n }\n return () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging]);\n\n return (\n isMinimized ? null : (\n \n

{window.title}

\n \n \n \n

\n {window.type === 'notepad' && (\n window.content = e.target.value}\n style={{ width: '100%', height: 'calc(100% - 20px)', resize: 'none', border: 'none' }}\n />\n )}\n {window.type === 'paint' && (\n \n )}\n {window.type === 'my-computer' && (\n

\n \n \n \n

\n )}\n

\n \n )\n );\n}\n\nfunction Taskbar({ startMenuOpen, toggleStartMenu, openWindow, onInstagramClick, time, windows, minimizedWindows, restoreWindow }) {\n return (\n

\n \n {startMenuOpen && (\n

openWindow('my-computer')}>🖥️ My Computer

openWindow('notepad')}>📝 Notepad

openWindow('paint')}>🎨 Paint

📸 Instagram

\n )}\n

\n {windows.map(window => (\n restoreWindow(window.id)}\n >\n {window.type === 'my-computer' ? '🖥️' : window.type === 'notepad' ? '📝' : '🎨'} {window.title}\n \n ))}\n

\n {time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Windows 98 Simulator\n \n \n \n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" },\n });\n}\n\nconst css = `\nbody, html {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden;\n}\n\n.windows-98 {\n background-color: #008080;\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.desktop {\n flex-grow: 1;\n position: relative;\n padding: 20px;\n overflow: hidden;\n}\n\n.desktop-icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 64px;\n margin-bottom: 20px;\n color: white;\n text-shadow: 1px 1px 1px black;\n cursor: pointer;\n}\n\n.desktop-icon .icon {\n font-size: 32px;\n}\n\n.desktop-icon .label {\n text-align: center;\n word-wrap: break-word;\n max-width: 64px;\n}\n\n.taskbar {\n height: 28px;\n background-color: #c0c0c0;\n border-top: 1px solid #ffffff;\n display: flex;\n align-items: center;\n padding: 0 2px;\n}\n\n.start-button {\n font-weight: bold;\n padding: 2px 5px;\n margin-right: 10px;\n}\n\n.start-menu {\n position: absolute;\n bottom: 28px;\n left: 0;\n background-color: #c0c0c0;\n border: 1px solid #000000;\n border-bottom: none;\n}\n\n.menu-item {\n padding: 5px 10px;\n cursor: pointer;\n}\n\n.menu-item:hover {\n background-color: #000080;\n color: white;\n}\n\n.taskbar-time {\n margin-left: auto;\n padding: 0 10px;\n border-left: 1px solid #808080;\n border-right: 1px solid #ffffff;\n}\n\n.taskbar-windows {\n display: flex;\n flex-grow: 1;\n overflow-x: auto;\n margin: 0 10px;\n}\n\n.taskbar-window {\n background-color: #c0c0c0;\n border: 1px solid #808080;\n margin-right: 2px;\n padding: 2px 5px;\n min-width: 100px;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.taskbar-window.minimized {\n background-color: #d4d0c8;\n}\n\n.window {\n position: absolute;\n background-color: #c0c0c0;\n border: 1px solid #000000;\n box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;\n}\n\n.window.active {\n z-index: 10;\n}\n\n.window-content {\n padding: 5px;\n height: calc(100% - 33px);\n overflow: auto;\n}\n\n.my-computer-content {\n display: flex;\n flex-wrap: wrap;\n}\n\n.my-computer-content .desktop-icon {\n color: black;\n text-shadow: none;\n margin: 10px;\n}\n\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.modal-content {\n background-color: #c0c0c0;\n border: 1px solid #000000;\n box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;\n padding: 20px;\n max-width: 400px;\n}\n\n.modal-buttons {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n}\n\n.modal-buttons button {\n margin-left: 10px;\n}\n\n.view-source {\n position: fixed;\n bottom: 40px;\n right: 10px;\n background-color: #c0c0c0;\n padding: 5px 10px;\n border: 1px solid #000000;\n box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;\n font-size: 12px;\n z-index: 1000;\n}\n`;\n\nexport default server;","deleted","label","children",[],[152],"files",[150],"counts",{"_173":32,"_174":175,"_176":32,"_177":32},"pulls","branches",1,"forks","envVars","contents",[180],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":181,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":182},["D",1725454320151],[152],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":192,"_178":197,"_200":-7,"_201":-5,"_202":-5,"_169":203,"_207":208},{"_102":103,"_95":96,"_104":193,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":194,"_132":195,"_135":196,"_147":22},["D",1746136585728],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[198],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":181,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":199},[152],"readme","upstream","pull",[204],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":158,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_166":205,"_98":206},[],[152],"previews",[204],"actionData","errors"]

xpapla

windowsXpSimulator