Skip to content

Latest commit

 

History

History
163 lines (121 loc) · 5.29 KB

README.md

File metadata and controls

163 lines (121 loc) · 5.29 KB

Windows XP Simulator 🖥️

A love letter to the 2000s internet — recreated as a React component

npm version License: MIT React TypeScript

Live Demo | Documentation | Report Bug

English | 简体中文

🕰️ A Tribute to the 2000s Internet

Remember the sound of a dial-up modem connecting? The thrill of opening MSN Messenger, the bliss of a clean Luna desktop wallpaper, the hours lost to Minesweeper and Solitaire?

This project is a nostalgic tribute to that era — the early 2000s internet, when the web felt new, personal homepages were everywhere, and Windows XP was the backdrop to countless memories. Whether you grew up with it or just want to experience what it felt like, this component brings that world back to life in the browser.

Disclaimer: This project is an independent, fan-made recreation built purely for nostalgic and educational purposes. It is not affiliated with, endorsed by, or in any way connected to Microsoft Corporation or the Windows operating system. All trademarks belong to their respective owners.

✨ Features

  • 🎨 Authentic Y2K Aesthetic - Pixel-perfect recreation of the iconic Windows XP Luna theme
  • 🪟 Full Window Management - Draggable, resizable windows with minimize/maximize/close
  • 📁 Virtual File System - Browse folders, open files, and manage a simulated filesystem
  • 🌐 Internet Explorer - Built-in browser with history and iframe rendering
  • 📝 Rich Applications - Notepad, Paint, Calculator, Minesweeper, Solitaire, Media Player, and more
  • ❓ Help and Support Center - Built-in help documentation with multiple topics
  • 🔐 Complete Boot Flow - Authentic boot screen, login system, and screensaver
  • 💾 Persistent State - Windows and session state saved to localStorage
  • 🎵 XP Sounds - Authentic startup, shutdown, and UI sound effects via Web Audio API
  • ♻️ Recycle Bin - Delete and restore files with full functionality
  • 🖱️ Context Menus - Right-click menus throughout the interface
  • 🌍 Bilingual Support - English and Chinese language support
  • 🎮 Classic Games - Minesweeper and Solitaire included

📦 Installation

npm install @caoergou/windows-xp

🚀 Quick Start

import { WindowsXP } from '@caoergou/windows-xp';
import '@caoergou/windows-xp/style.css';

function App() {
  return <WindowsXP />;
}

Default Login Credentials

  • Live Demo: https://eric.run.place/windows-xp/

    • Username: User
    • Password: forthe2000s

  • Using as a Component: Customize via props

    <WindowsXP username="Admin" password="yourpassword" />

📖 Usage

Basic Configuration

<WindowsXP
  username="Admin"
  password="mypassword"
  language="en"
  skipBoot={false}
  autoLogin={false}
/>

Custom File System

const customFS = {
  "Desktop": {
    "type": "folder",
    "name": "Desktop",
    "children": {
      "MyApp.txt": {
        "type": "file",
        "name": "MyApp.txt",
        "app": "Notepad",
        "content": "Hello Windows XP!"
      }
    }
  }
};

<WindowsXP customFileSystem={customFS} />

For detailed usage and API reference, see USAGE.md.

🎨 Built-in Applications

Fully Implemented

  • 📝 Notepad - Text editor with file support
  • 🖼️ Photo Viewer - Image viewer
  • 🌐 Internet Explorer - Web browser with history
  • 📁 Explorer - File manager with navigation
  • 🎨 Paint - Drawing application
  • 🧮 Calculator - Basic calculator
  • 💣 Minesweeper - Classic game
  • 🃏 Solitaire - Card game
  • 💬 QQ Login - QQ login dialog
  • ❓ Help and Support - Help center
  • 🏃 Run Dialog - Run command dialog
  • 🔊 Volume Control - Volume settings

Basic UI (Limited Functionality)

  • 🎵 Windows Media Player - Media player UI with visualizations
  • ⚙️ Control Panel - System settings UI
  • 💻 Command Prompt - Terminal emulator with basic commands
  • 🖧 Network Connections - Network status UI

🛠️ Tech Stack

  • React 18 - UI framework with hooks
  • TypeScript 5 - Type-safe development
  • styled-components - CSS-in-JS styling solution
  • xp.css - Windows XP theme library
  • Framer Motion - Smooth animations
  • react-draggable - Window dragging
  • react-resizable - Window resizing
  • i18next - Internationalization

🌐 Browser Support

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+

📝 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • xp.css - Windows XP CSS framework
  • winXP - Inspiration
  • Microsoft - For creating the iconic Windows XP
Made with ❤️ and nostalgia for the millennium era