Skip to content

README.md

Latest commit

 

History

History
220 lines (165 loc) · 5.92 KB

README.md

File metadata and controls

220 lines (165 loc) · 5.92 KB
Raw

Windows 7 Desktop Interface

A clean, maintainable Windows 7 desktop interface built with vanilla HTML, CSS, and JavaScript (ES6 modules).

Features

  • Desktop Icons: 6 customizable desktop icons (Computer, Recycle Bin, File Explorer, Steam, Photos, Movies)
  • Drag & Drop: Free-form icon positioning with boundary checking
  • Left-Click Menus: Dropdown menus with customizable options for each icon
  • Taskbar: Full Windows 7 style taskbar with:
    • Start button
    • Pinned applications
    • Real-time clock
    • System tray icons
  • S3-Ready Asset Management: Centralized asset configuration for easy CDN/S3 migration
  • Windows 7 Aesthetic: Authentic glass effect and beautiful gradient background

Project Structure

portfolio/
├── index.html                      # Main entry point
├── assets/
│   ├── icons/                      # Desktop & taskbar icons
│   └── wallpapers/                 # Background images
├── css/
│   ├── main.css                    # CSS variables & global styles
│   ├── reset.css                   # CSS reset
│   ├── components/                 # Component-specific styles
│   └── utilities/                  # Reusable animations
└── js/
    ├── main.js                     # Application initialization
    ├── config/
    │   └── desktop-config.js       # Icon configurations
    ├── components/                 # UI components
    ├── managers/                   # State, drag-drop, menu managers
    └── utils/                      # Utility functions

Architecture

Components

  • DesktopIcon: Individual desktop icon with drag & menu capabilities
  • Taskbar: Main taskbar container
  • StartButton: Windows Start button
  • TaskbarApp: Individual taskbar application icons
  • SystemTray: Clock and system icons
  • DropdownMenu: Context menu component

Managers

  • StateManager: Centralized in-memory state management
  • DragDropManager: Handles drag & drop operations
  • MenuManager: Manages dropdown menus (singleton pattern)

Technology Stack

  • JavaScript: ES6 classes and modules (no build tools required)
  • CSS: BEM methodology with CSS custom properties
  • HTML5: Semantic markup with native drag & drop API

Getting Started

Local Development

Since this project uses ES6 modules, you must serve it via HTTP (not file://):

# Using Python
python3 -m http.server 8080

# Using Node.js
npx serve

# Using PHP
php -S localhost:8080

Then open http://localhost:8080 in your browser.

Note: Opening index.html directly in a browser won't work due to CORS restrictions on ES6 modules.

Usage

Desktop Icons

  • Single Click: Shows dropdown menu with options
  • Double Click: Reserved for future "exciting" functionality
  • Drag & Drop: Click and drag to reposition icons freely

Taskbar

  • Start Button: Click to open Start menu (coming soon)
  • App Icons: Click to launch/activate applications (coming soon)
  • Clock: Displays current time and date in real-time
  • System Tray: Volume and network icons (placeholders)

Dropdown Menus

  • Open: Left-click on any icon
  • Close: Click outside menu or select an option
  • Navigate: Hover over items to highlight

Customization

Adding Desktop Icons

Edit js/config/desktop-config.js:

export const DESKTOP_ICONS = [
  {
    id: 'my-app',
    name: 'My Application',
    icon: 'assets/icons/my-app.svg',
    position: { x: 20, y: 20 },
    menuItems: [
      { id: 'open', label: 'Open', action: 'open' },
      { id: 'settings', label: 'Settings', action: 'settings' }
    ]
  }
];

Changing Theme Colors

Edit CSS variables in css/main.css:

:root {
  --win7-blue: #3C89D2;
  --desktop-bg: linear-gradient(...);
  /* etc */
}

Adding Taskbar Apps

Edit js/config/desktop-config.js:

export const TASKBAR_APPS = [
  {
    id: 'my-app',
    name: 'My App',
    icon: 'assets/icons/my-app.svg',
    pinned: true,
    running: false
  }
];

Migrating Assets to S3 or CDN

This project is designed for easy asset migration to AWS S3, CloudFront, or any CDN. All asset paths are centralized in js/config/assets.js.

Steps to Migrate:

  1. Upload Assets to S3:

    # Upload all assets to your S3 bucket
aws s3 sync assets/ s3://your-bucket-name/assets/ --acl public-read

  2. Update the Base URL:

    Edit js/config/assets.js:

    // Change from:
export const BASE_URL = '';

// To your S3/CDN URL:
export const BASE_URL = 'https://your-bucket.s3.amazonaws.com/';
// or CloudFront:
export const BASE_URL = 'https://d1234567890.cloudfront.net/';

  3. That's it! All icons and images will now load from S3/CDN.

Why This Approach?

  • Single Point of Change: Update one line to switch all assets
  • No Code Refactoring: All components automatically use the new URLs
  • Easy Rollback: Simply change the BASE_URL back
  • Version Control: Easy to manage different environments (dev/staging/prod)

Browser Compatibility

  • Chrome/Edge: ✅ Full support
  • Firefox: ✅ Full support
  • Safari: ✅ Full support
  • IE11: ❌ Not supported (requires ES6 modules)

Future Enhancements

  • Window management (draggable, resizable windows)
  • Start menu
  • File system simulation
  • Context menu customization
  • Theme switcher
  • Settings panel
  • Keyboard shortcuts

Development

No build tools required. Simply edit the files and refresh your browser.

Debugging

The application instance is available globally:

console.log(window.desktopApp);

File Structure

See the project structure section above for a complete overview of how files are organized.

License

MIT License - Feel free to use this project for personal or commercial purposes.

Credits

Created with clean, maintainable architecture for easy extension and learning.