// This approach creates a Windows 98-style simulator using React for the UI and CSS for styling. // We'll implement a desktop with icons, a start menu, and multiple application windows including // My Computer, Notepad, and Paint (using jspaint.app). /** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [startMenuOpen, setStartMenuOpen] = useState(false); const [windows, setWindows] = useState([]); const [showRedirectPrompt, setShowRedirectPrompt] = useState(false); const [activeWindow, setActiveWindow] = useState(null); const [minimizedWindows, setMinimizedWindows] = useState([]); const [time, setTime] = useState(new Date()); const openWindow = (type) => { const newWindow = { id: Date.now(), type, title: type === 'notepad' ? 'Untitled - Notepad' : type === 'paint' ? 'Untitled - Paint' : 'My Computer', content: type === 'notepad' ? '' : null, position: { x: 50 + windows.length * 20, y: 50 + windows.length * 20 }, size: type === 'paint' ? { width: 800, height: 600 } : { width: 400, height: 300 }, }; setWindows([...windows, newWindow]); setActiveWindow(newWindow.id); setStartMenuOpen(false); }; const closeWindow = (id) => { setWindows(windows.filter(w => w.id !== id)); if (activeWindow === id) { setActiveWindow(null); } }; const minimizeWindow = (id) => { setMinimizedWindows([...minimizedWindows, id]); setActiveWindow(null); }; const restoreWindow = (id) => { setMinimizedWindows(minimizedWindows.filter(winId => winId !== id)); setActiveWindow(id); }; const bringToFront = (id) => { setActiveWindow(id); setMinimizedWindows(minimizedWindows.filter(winId => winId !== id)); }; const updateWindowPosition = (id, newPosition) => { setWindows(windows.map(w => w.id === id ? { ...w, position: newPosition } : w)); }; useEffect(() => { const timer = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(timer); }, []); const handleInstagramRedirect = () => { setShowRedirectPrompt(true); setStartMenuOpen(false); }; const confirmRedirect = () => { setShowRedirectPrompt(false); window.location.href = 'https://www.instagram.com'; }; return (

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

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

External Link

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

)}

View Source

); } function DesktopIcon({ icon, label, onClick }) { return (

{icon} {label}

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

{window.title}

{window.type === 'notepad' && (

window.content = e.target.value}
            style={{ width: '100%', height: 'calc(100% - 20px)', resize: 'none', border: 'none' }}
          />
        )}
        {window.type === 'paint' && (
          <iframe
            src="https://jspaint.app"
            style={{ width: '100%', height: 'calc(100% - 20px)', border: 'none' }}
          />
        )}
        {window.type === 'my-computer' && (
          <div className="my-computer-content">
            <DesktopIcon icon="💾" label="3½ Floppy (A:)" />
            <DesktopIcon icon="💽" label="Local Disk (C:)" />
            <DesktopIcon icon="📀" label="CD Drive (D:)" />
          </div>
        )}
      </div>
    </div>
    )
  );
}

function Taskbar({ startMenuOpen, toggleStartMenu, openWindow, onInstagramClick, time, windows, minimizedWindows, restoreWindow }) {
  return (
    <div className="taskbar">
      <button className="start-button" onClick={toggleStartMenu}>
        Start
      </button>
      {startMenuOpen && (
        <div className="start-menu">
          <div className="menu-item" onClick={() => openWindow('my-computer')}>🖥️ My Computer</div>
          <div className="menu-item" onClick={() => openWindow('notepad')}>📝 Notepad</div>
          <div className="menu-item" onClick={() => openWindow('paint')}>🎨 Paint</div>
          <div className="menu-item" onClick={onInstagramClick}>📸 Instagram</div>
        </div>
      )}
      <div className="taskbar-windows">
        {windows.map(window => (
          <button
            key={window.id}
            className={`taskbar-window ${minimizedWindows.includes(window.id) ? 'minimized' : ''}`}
            onClick={() => restoreWindow(window.id)}
          >
            {window.type === 'my-computer' ? '🖥️' : window.type === 'notepad' ? '📝' : '🎨'} {window.title}
          </button>
        ))}
      </div>
      <div className="taskbar-time">
        {time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

async function server(request: Request): Promise<Response> {
  return new Response(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Windows 98 Simulator</title>
        <link rel="stylesheet" href="https://unpkg.com/98.css" />
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "content-type": "text/html" },
  });
}

const css = `
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.windows-98 {
  background-color: #008080;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.desktop {
  flex-grow: 1;
  position: relative;
  padding: 20px;
  overflow: hidden;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  margin-bottom: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
  cursor: pointer;
}

.desktop-icon .icon {
  font-size: 32px;
}

.desktop-icon .label {
  text-align: center;
  word-wrap: break-word;
  max-width: 64px;
}

.taskbar {
  height: 28px;
  background-color: #c0c0c0;
  border-top: 1px solid #ffffff;
  display: flex;
  align-items: center;
  padding: 0 2px;
}

.start-button {
  font-weight: bold;
  padding: 2px 5px;
  margin-right: 10px;
}

.start-menu {
  position: absolute;
  bottom: 28px;
  left: 0;
  background-color: #c0c0c0;
  border: 1px solid #000000;
  border-bottom: none;
}

.menu-item {
  padding: 5px 10px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #000080;
  color: white;
}

.taskbar-time {
  margin-left: auto;
  padding: 0 10px;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
}

.taskbar-windows {
  display: flex;
  flex-grow: 1;
  overflow-x: auto;
  margin: 0 10px;
}

.taskbar-window {
  background-color: #c0c0c0;
  border: 1px solid #808080;
  margin-right: 2px;
  padding: 2px 5px;
  min-width: 100px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.taskbar-window.minimized {
  background-color: #d4d0c8;
}

.window {
  position: absolute;
  background-color: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
}

.window.active {
  z-index: 10;
}

.window-content {
  padding: 5px;
  height: calc(100% - 33px);
  overflow: auto;
}

.my-computer-content {
  display: flex;
  flex-wrap: wrap;
}

.my-computer-content .desktop-icon {
  color: black;
  text-shadow: none;
  margin: 10px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #c0c0c0;
  border: 1px solid #000000;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  padding: 20px;
  max-width: 400px;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-buttons button {
  margin-left: 10px;
}

.view-source {
  position: fixed;
  bottom: 40px;
  right: 10px;
  background-color: #c0c0c0;
  padding: 5px 10px;
  border: 1px solid #000000;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
  font-size: 12px;
  z-index: 1000;
}
`;

export default server;</article></body></html>

xpapla