Upload 5 files

README.md

@@ -1,12 +1,172 @@
----
-title: piflash
-emoji: 🐳
-colorFrom: blue
-colorTo: blue
-sdk: static
-pinned: false
-tags:
-  - deepsite
+# PiFlash - Raspberry Pi Image Flasher Web Application
+
+A modern, web-based tool for flashing Raspberry Pi OS images to SD cards. Built with vanilla JavaScript, HTML5, and Tailwind CSS for maximum compatibility and ease of use.
+
+## Features
+
+- **Device Detection**: Automatically detects available storage devices
+- **OS Image Library**: Browse recommended and community OS images
+- **Custom Image Support**: Upload and flash your own image files
+- **Progress Tracking**: Real-time progress monitoring with detailed status
+- **Configuration Options**: Pre-configure Wi-Fi, SSH, and hostname settings
+- **Responsive Design**: Works on desktop and mobile devices
+- **No Installation Required**: Runs directly in your web browser
+
+## Quick Start
+
+1. **Clone or download** this repository
+2. **Open index.html** in your web browser
+3. **Select a storage device** (SD card or USB drive)
+4. **Choose an OS image** from the library or upload your own
+5. **Configure settings** (optional): Wi-Fi, SSH, hostname
+6. **Click Flash** to start the process
+
+## Development Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Run tests
+npm test
+```
+
+## Browser Compatibility
+
+- Chrome 80+
+- Firefox 75+
+- Safari 13+
+- Edge 80+
+
+## Supported File Formats
+
+- `.img` - Raw disk images
+- `.zip` - Compressed disk images
+- `.gz` - Gzip compressed images
+- `.xz` - XZ compressed images
+
+## Security Considerations
+
+⚠️ **Important**: This application requires access to storage devices, which may require elevated permissions or browser API access. Always verify the source and integrity of image files before flashing.
+
+### Web API Requirements
+
+This application uses the following web APIs:
+- **File System Access API** (Chrome 86+) - For device access
+- **Web USB API** (Experimental) - For USB device communication
+- **File API** - For reading uploaded files
+
+## Configuration Options
+
+### Wi-Fi Setup
+- **SSID**: Network name (max 32 characters)
+- **Password**: Network password (WPA/WPA2)
+
+### SSH Configuration
+- **Disabled**: SSH access turned off (default)
+- **Password**: Enable SSH with password authentication
+- **Key**: Enable SSH with public key authentication only
+
+### System Settings
+- **Hostname**: Custom device name (default: raspberrypi)
+- **Validation**: Verify write after flashing
+- **Compression**: Auto-detect and handle compressed images
+
+## Flashing Process
+
+1. **Device Selection**: Choose target storage device
+2. **Image Preparation**: Download or prepare the OS image
+3. **Unmounting**: Safely unmount the device
+4. **Writing**: Write the image data to the device
+5. **Verification**: Verify the written data (if enabled)
+6. **Ejection**: Safely eject the device when complete
+
+## File Structure
+
+```
+piflash-web-app/
+├── index.html          # Main application interface
+├── styles.css          # Custom CSS styles and animations
+├── js/
+│   └── app.js         # Main application logic
+├── package.json        # Project configuration
+├── README.md          # This file
+├── .gitignore         # Git ignore rules
+└── pre-commit.sh      # Pre-commit hooks
+```
+
+## Contributing
+
+1. **Fork** the repository
+2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)
+3. **Commit** your changes (`git commit -m 'Add amazing feature'`)
+4. **Push** to the branch (`git push origin feature/amazing-feature`)
+5. **Open** a Pull Request
+
+### Development Guidelines
+
+- Use **ES6+** JavaScript features
+- Follow **responsive design** principles
+- Add **comprehensive comments** for complex logic
+- Include **unit tests** for new functionality
+- Maintain **cross-browser compatibility**
+
+## Testing
+
+The application includes unit tests for core functionality:
+
+```bash
+# Run all tests
+npm test
+
+# Test specific components
+npm test -- --testNamePattern="device"
+```
+
+## Troubleshooting
+
+### Common Issues
+
+**Device not detected**
+- Ensure the SD card is properly inserted
+- Try refreshing the device list
+- Check browser permissions for device access
+
+**Flash process fails**
+- Verify the image file is not corrupted
+- Ensure sufficient space on the target device
+- Try using a different SD card
+
+**Browser compatibility**
+- Use a modern browser with File System Access API support
+- Enable experimental web platform features if required
+- Clear browser cache and cookies
+
+### Browser Permissions
+
+Some browsers may require explicit permission to access storage devices:
+1. Navigate to browser settings
+2. Find "Site permissions" or "Privacy and security"
+3. Allow file system access for this application
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- **Raspberry Pi Foundation** for the excellent hardware and documentation
+- **Tailwind CSS** for the utility-first CSS framework
+- **Font Awesome** for the comprehensive icon library
+- **Community contributors** who help improve this tool
+
+## Disclaimer
+
+This tool is provided as-is without warranty. Always backup important data before flashing storage devices. The authors are not responsible for data loss or hardware damage.
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+**Happy Flashing!** 🥧✨

index.html

@@ -1,933 +1,234 @@
-/**
- * PiFlash - Raspberry Pi Image Flasher
- * Main application logic and UI interactions
- */
-
-class PiFlashApp {
-  constructor() {
-    this.selectedDevice = null;
-    this.selectedOS = null;
-    this.flashingProgress = null;
-    this.flashingInterval = null;
-    this.currentTab = 'recommended';
-    
-    // Mock data for demonstration
-    this.mockDevices = [
-      {
-        id: 'sdb',
-        name: 'SanDisk Ultra 32GB',
-        path: '/dev/sdb',
-        size: '29.8GB',
-        sizeBytes: 32000000000,
-        type: 'sd'
-      },
-      {
-        id: 'sdc',
-        name: 'Samsung EVO 64GB',
-        path: '/dev/sdc',
-        size: '59.5GB',
-        sizeBytes: 64000000000,
-        type: 'sd'
-      },
-      {
-        id: 'sdd',
-        name: 'Kingston Canvas 16GB',
-        path: '/dev/sdd',
-        size: '14.9GB',
-        sizeBytes: 16000000000,
-        type: 'usb'
-      }
-    ];
-
-    this.osImages = {
-      recommended: [
-        {
-          id: 'rpi-os-64',
-          name: 'Raspberry Pi OS (64-bit)',
-          description: 'Recommended for most users',
-          version: 'v2023-05-03',
-          size: '1.2GB',
-          sizeBytes: 1200000000,
-          category: 'official',
-          image: 'https://www.raspberrypi.com/app/uploads/2022/02/COLOUR-Raspberry-Pi-Symbol-Registered.png'
-        },
-        {
-          id: 'rpi-os-lite-32',
-          name: 'Raspberry Pi OS Lite (32-bit)',
-          description: 'Minimal image for headless setups',
-          version: 'v2023-05-03',
-          size: '450MB',
-          sizeBytes: 450000000,
-          category: 'official',
-          image: 'https://www.raspberrypi.com/app/uploads/2022/02/COLOUR-Raspberry-Pi-Symbol-Registered.png'
-        },
-        {
-          id: 'ubuntu-server',
-          name: 'Ubuntu Server 22.04 LTS',
-          description: 'Official Ubuntu for Raspberry Pi',
-          version: 'v22.04.2',
-          size: '1.8GB',
-          sizeBytes: 1800000000,
-          category: 'ubuntu',
-          image: 'https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png'
-        }
-      ],
-      all: [
-        {
-          id: 'rpi-os-64',
-          name: 'Raspberry Pi OS (64-bit)',
-          description: 'Recommended for most users',
-          version: 'v2023-05-03',
-          size: '1.2GB',
-          sizeBytes: 1200000000,
-          category: 'official',
-          image: 'https://www.raspberrypi.com/app/uploads/2022/02/COLOUR-Raspberry-Pi-Symbol-Registered.png'
-        },
-        {
-          id: 'rpi-os-lite-32',
-          name: 'Raspberry Pi OS Lite (32-bit)',
-          description: 'Minimal image for headless setups',
-          version: 'v2023-05-03',
-          size: '450MB',
-          sizeBytes: 450000000,
-          category: 'official',
-          image: 'https://www.raspberrypi.com/app/uploads/2022/02/COLOUR-Raspberry-Pi-Symbol-Registered.png'
-        },
-        {
-          id: 'ubuntu-server',
-          name: 'Ubuntu Server 22.04 LTS',
-          description: 'Official Ubuntu for Raspberry Pi',
-          version: 'v22.04.2',
-          size: '1.8GB',
-          sizeBytes: 1800000000,
-          category: 'ubuntu',
-          image: 'https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png'
-        },
-        {
-          id: 'retropie',
-          name: 'RetroPie 4.8',
-          description: 'Turn your Pi into a retro gaming machine',
-          version: 'v4.8',
-          size: '2.5GB',
-          sizeBytes: 2500000000,
-          category: 'gaming',
-          image: 'https://retropie.org.uk/wp-content/uploads/2017/07/cropped-RetroPieLogo-32x32.png'
-        },
-        {
-          id: 'libreelec',
-          name: 'LibreELEC 11.0',
-          description: 'Kodi media center OS',
-          version: 'v11.0.3',
-          size: '350MB',
-          sizeBytes: 350000000,
-          category: 'media',
-          image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzAwN0ZGRiIvPgo8cGF0aCBkPSJNMTAgMTBoMjB2MjBIMTBWMTB6IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'
-        },
-        {
-          id: 'kali-linux',
-          name: 'Kali Linux 2023.2',
-          description: 'Security testing and penetration testing',
-          version: 'v2023.2',
-          size: '3.1GB',
-          sizeBytes: 3100000000,
-          category: 'security',
-          image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzAwMDAwMCIvPgo8cGF0aCBkPSJNMTAgMTBoMjB2MjBIMTBWMTB6IiBmaWxsPSIjRkYwMDAwIi8+Cjwvc3ZnPgo='
-        }
-      ],
-      other: []
-    };
-
-    this.init();
-  }
-
-  /**
-   * Initialize the application
-   */
-  init() {
-    console.log('Initializing PiFlash application...');
-    this.setupEventListeners();
-    this.loadDevices();
-    this.loadOSImages();
-    this.updateFlashButton();
-  }
-
-  /**
-   * Set up all event listeners
-   */
-  setupEventListeners() {
-    // Device refresh button
-    document.getElementById('refreshDevices').addEventListener('click', () => {
-      this.refreshDevices();
-    });
-
-    // OS image tabs
-    document.getElementById('tabRecommended').addEventListener('click', () => {
-      this.switchTab('recommended');
-    });
-    document.getElementById('tabAll').addEventListener('click', () => {
-      this.switchTab('all');
-    });
-    document.getElementById('tabOther').addEventListener('click', () => {
-      this.switchTab('other');
-    });
-
-    // Search functionality
-    document.getElementById('searchOS').addEventListener('input', (e) => {
-      this.filterOSImages(e.target.value);
-    });
-
-    // Custom image upload
-    document.getElementById('customImageUpload').addEventListener('click', () => {
-      document.getElementById('customImageFile').click();
-    });
-
-    document.getElementById('customImageFile').addEventListener('change', (e) => {
-      this.handleCustomImageUpload(e.target.files[0]);
-    });
-
-    // Flash button
-    document.getElementById('flashButton').addEventListener('click', () => {
-      this.startFlashing();
-    });
-
-    // Cancel flash button
-    document.getElementById('cancelFlash').addEventListener('click', () => {
-      this.cancelFlashing();
-    });
-
-    // Flash another button
-    document.getElementById('flashAnother').addEventListener('click', () => {
-      this.resetApplication();
-    });
-
-    // Form validation
-    this.setupFormValidation();
-  }
-
-  /**
-   * Set up form validation
-   */
-  setupFormValidation() {
-    const inputs = ['wifiSSID', 'wifiPassword', 'hostname'];
-    inputs.forEach(id => {
-      const input = document.getElementById(id);
-      input.addEventListener('input', () => {
-        this.validateInput(input);
-      });
-    });
-  }
-
-  /**
-   * Validate input fields
-   */
-  validateInput(input) {
-    const value = input.value.trim();
-    
-    if (input.id === 'hostname') {
-      // Validate hostname format
-      const hostnameRegex = /^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*$/;
-      if (value && !hostnameRegex.test(value)) {
-        input.classList.add('border-red-500');
-        this.showTooltip(input, 'Invalid hostname format');
-      } else {
-        input.classList.remove('border-red-500');
-        this.hideTooltip(input);
-      }
-    }
-
-    if (input.id === 'wifiSSID') {
-      // Basic SSID validation
-      if (value && value.length > 32) {
-        input.classList.add('border-red-500');
-        this.showTooltip(input, 'SSID too long (max 32 characters)');
-      } else {
-        input.classList.remove('border-red-500');
-        this.hideTooltip(input);
-      }
-    }
-  }
-
-  /**
-   * Show tooltip for validation errors
-   */
-  showTooltip(element, message) {
-    // Remove existing tooltip
-    this.hideTooltip(element);
-    
-    const tooltip = document.createElement('div');
-    tooltip.className = 'absolute z-10 px-2 py-1 text-xs text-white bg-red-600 rounded shadow-lg tooltip';
-    tooltip.textContent = message;
-    tooltip.style.top = '-30px';
-    tooltip.style.left = '0';
-    
-    element.parentElement.style.position = 'relative';
-    element.parentElement.appendChild(tooltip);
-  }
-
-  /**
-   * Hide tooltip
-   */
-  hideTooltip(element) {
-    const tooltip = element.parentElement.querySelector('.tooltip');
-    if (tooltip) {
-      tooltip.remove();
-    }
-  }
-
-  /**
-   * Load and display available devices
-   */
-  loadDevices() {
-    console.log('Loading devices...');
-    const deviceList = document.getElementById('deviceList');
-    
-    // Show loading state
-    deviceList.innerHTML = '<div class="skeleton h-16 rounded-lg"></div>';
-    
-    // Simulate loading delay
-    setTimeout(() => {
-      deviceList.innerHTML = '';
-      
-      if (this.mockDevices.length === 0) {
-        deviceList.innerHTML = `
-          <div class="text-center py-8 text-gray-500">
-            <i class="fas fa-exclamation-circle text-2xl mb-2"></i>
-            <p class="text-sm">No storage devices found</p>
-            <p class="text-xs mt-1">Insert an SD card or USB drive</p>
-          </div>
-        `;
-        return;
-      }
-
-      this.mockDevices.forEach(device => {
-        const deviceElement = this.createDeviceElement(device);
-        deviceList.appendChild(deviceElement);
-      });
-    }, 1000);
-  }
-
-  /**
-   * Create device element
-   */
-  createDeviceElement(device) {
-    const deviceDiv = document.createElement('div');
-    deviceDiv.className = 'device-card p-3 border border-gray-200 rounded-lg cursor-pointer';
-    deviceDiv.setAttribute('data-device-id', device.id);
-    
-    const icon = device.type === 'sd' ? 'fas fa-sd-card' : 'fas fa-usb';
-    const iconColor = device.type === 'sd' ? 'text-blue-500' : 'text-green-500';
-    
-    deviceDiv.innerHTML = `
-      <div class="flex items-center justify-between">
-        <div class="flex items-center">
-          <i class="${icon} ${iconColor} mr-3"></i>
-          <div>
-            <h3 class="font-medium text-gray-800">${device.name}</h3>
-            <p class="text-sm text-gray-600">${device.path} • ${device.size}</p>
-          </div>
-        </div>
-        <div class="flex items-center">
-          <i class="fas fa-check text-green-500 hidden device-selected-icon"></i>
-        </div>
-      </div>
-    `;
-
-    deviceDiv.addEventListener('click', () => {
-      this.selectDevice(device);
-    });
-
-    return deviceDiv;
-  }
-
-  /**
-   * Select a device
-   */
-  selectDevice(device) {
-    console.log('Selecting device:', device.name);
-    
-    // Remove previous selection
-    document.querySelectorAll('.device-card').forEach(card => {
-      card.classList.remove('selected');
-      card.querySelector('.device-selected-icon').classList.add('hidden');
-    });
-
-    // Add selection to current device
-    const deviceElement = document.querySelector(`[data-device-id="${device.id}"]`);
-    deviceElement.classList.add('selected');
-    deviceElement.querySelector('.device-selected-icon').classList.remove('hidden');
-
-    this.selectedDevice = device;
-    this.updateFlashSummary();
-    this.updateFlashButton();
-  }
-
-  /**
-   * Refresh devices list
-   */
-  refreshDevices() {
-    console.log('Refreshing devices...');
-    const refreshButton = document.getElementById('refreshDevices');
-    const icon = refreshButton.querySelector('i');
-    
-    icon.classList.add('rotate-animation');
-    
-    setTimeout(() => {
-      this.loadDevices();
-      icon.classList.remove('rotate-animation');
-    }, 1000);
-  }
-
-  /**
-   * Switch between OS image tabs
-   */
-  switchTab(tab) {
-    console.log('Switching to tab:', tab);
-    
-    // Update tab buttons
-    document.querySelectorAll('.tab-button').forEach(button => {
-      button.classList.remove('active');
-    });
-    document.getElementById(`tab${tab.charAt(0).toUpperCase() + tab.slice(1)}`).classList.add('active');
-
-    this.currentTab = tab;
-    this.loadOSImages();
-  }
-
-  /**
-   * Load and display OS images
-   */
-  loadOSImages() {
-    console.log('Loading OS images for tab:', this.currentTab);
-    const osImageList = document.getElementById('osImageList');
-    
-    // Show loading state
-    osImageList.innerHTML = '<div class="skeleton h-20 rounded-lg mb-3"></div>'.repeat(3);
-    
-    setTimeout(() => {
-      osImageList.innerHTML = '';
-      const images = this.osImages[this.currentTab] || [];
-      
-      if (images.length === 0) {
-        osImageList.innerHTML = `
-          <div class="text-center py-8 text-gray-500">
-            <i class="fas fa-image text-2xl mb-2"></i>
-            <p class="text-sm">No images available</p>
-          </div>
-        `;
-        return;
-      }
-
-      images.forEach(osImage => {
-        const imageElement = this.createOSImageElement(osImage);
-        osImageList.appendChild(imageElement);
-      });
-    }, 500);
-  }
-
-  /**
-   * Create OS image element
-   */
-  createOSImageElement(osImage) {
-    const imageDiv = document.createElement('div');
-    imageDiv.className = 'os-image-card p-3 border border-gray-200 rounded-lg cursor-pointer fade-in';
-    imageDiv.setAttribute('data-os-id', osImage.id);
-    
-    imageDiv.innerHTML = `
-      <div class="flex items-start">
-        <img src="${osImage.image}" alt="${osImage.name}" class="w-10 h-10 rounded mr-3 flex-shrink-0" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzZCNzI4MCIvPgo8cGF0aCBkPSJNMTIgMTVoMTZ2MkgxMnYtMnptMCA0aDE2djJIMTJ2LTJ6bTAgNGgxMnYySDE2di0yeiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=='">
-        <div class="flex-1 min-w-0">
-          <h3 class="font-medium text-gray-800 truncate">${osImage.name}</h3>
-          <p class="text-sm text-gray-600 mb-1">${osImage.description}</p>
-          <div class="flex items-center justify-between text-xs text-gray-500">
-            <span>${osImage.version}</span>
-            <span>${osImage.size}</span>
-          </div>
-        </div>
-        <div class="ml-2 flex items-center">
-          <i class="fas fa-check text-green-500 hidden os-selected-icon"></i>
-        </div>
-      </div>
-    `;
-
-    imageDiv.addEventListener('click', () => {
-      this.selectOSImage(osImage);
-    });
-
-    return imageDiv;
-  }
-
-  /**
-   * Select an OS image
-   */
-  selectOSImage(osImage) {
-    console.log('Selecting OS image:', osImage.name);
-    
-    // Remove previous selection
-    document.querySelectorAll('.os-image-card').forEach(card => {
-      card.classList.remove('selected');
-      const icon = card.querySelector('.os-selected-icon');
-      if (icon) icon.classList.add('hidden');
-    });
-
-    // Add selection to current image
-    const imageElement = document.querySelector(`[data-os-id="${osImage.id}"]`);
-    if (imageElement) {
-      imageElement.classList.add('selected');
-      const icon = imageElement.querySelector('.os-selected-icon');
-      if (icon) icon.classList.remove('hidden');
-    }
-
-    this.selectedOS = osImage;
-    this.updateFlashSummary();
-    this.updateFlashButton();
-  }
-
-  /**
-   * Filter OS images based on search
-   */
-  filterOSImages(searchTerm) {
-    const searchLower = searchTerm.toLowerCase();
-    const images = this.osImages[this.currentTab] || [];
-    const filteredImages = images.filter(image => 
-      image.name.toLowerCase().includes(searchLower) ||
-      image.description.toLowerCase().includes(searchLower)
-    );
-
-    const osImageList = document.getElementById('osImageList');
-    osImageList.innerHTML = '';
-
-    if (filteredImages.length === 0) {
-      osImageList.innerHTML = `
-        <div class="text-center py-8 text-gray-500">
-          <i class="fas fa-search text-2xl mb-2"></i>
-          <p class="text-sm">No images found for "${searchTerm}"</p>
-        </div>
-      `;
-      return;
-    }
-
-    filteredImages.forEach(osImage => {
-      const imageElement = this.createOSImageElement(osImage);
-      osImageList.appendChild(imageElement);
-    });
-  }
-
-  /**
-   * Handle custom image upload
-   */
-  handleCustomImageUpload(file) {
-    if (!file) return;
-
-    console.log('Handling custom image upload:', file.name);
-    
-    const customOS = {
-      id: 'custom-' + Date.now(),
-      name: file.name,
-      description: 'Custom image file',
-      version: 'Custom',
-      size: this.formatFileSize(file.size),
-      sizeBytes: file.size,
-      category: 'custom',
-      file: file,
-      image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iOCIgZmlsbD0iIzEwQjk4MSIvPgo8cGF0aCBkPSJNMTYgMTJsOCA4LTggOHYtNEgxMnYtOGg0di00eiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=='
-    };
-
-    this.selectOSImage(customOS);
-    
-    // Update the upload area to show selected file
-    const uploadArea = document.getElementById('customImageUpload');
-    uploadArea.innerHTML = `
-      <div class="flex items-center justify-center">
-        <i class="fas fa-file-check text-2xl text-green-600 mr-2"></i>
-        <div class="text-left">
-          <h3 class="font-medium text-gray-700">${file.name}</h3>
-          <p class="text-sm text-gray-500">${this.formatFileSize(file.size)}</p>
-        </div>
-      </div>
-    `;
-    uploadArea.classList.add('border-green-400', 'bg-green-50');
-  }
-
-  /**
-   * Format file size
-   */
-  formatFileSize(bytes) {
-    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-    let size = bytes;
-    let unitIndex = 0;
-    
-    while (size >= 1024 && unitIndex < units.length - 1) {
-      size /= 1024;
-      unitIndex++;
-    }
-    
-    return `${size.toFixed(1)}${units[unitIndex]}`;
-  }
-
-  /**
-   * Update flash summary
-   */
-  updateFlashSummary() {
-    const summaryDiv = document.getElementById('flashSummary');
-    
-    if (!this.selectedDevice && !this.selectedOS) {
-      summaryDiv.innerHTML = `
-        <div class="flex items-center mb-2">
-          <i class="fas fa-info-circle text-gray-500 mr-2"></i>
-          <h3 class="font-medium text-gray-700">Select Image and Device</h3>
-        </div>
-        <p class="text-sm text-gray-600">
-          Choose an OS image and storage device to get started.
-        </p>
-      `;
-      return;
-    }
-
-    if (this.selectedOS && !this.selectedDevice) {
-      summaryDiv.innerHTML = `
-        <div class="flex items-center mb-2">
-          <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
-          <h3 class="font-medium text-gray-700">Select Storage Device</h3>
-        </div>
-        <p class="text-sm text-gray-600">
-          <strong>Image:</strong> ${this.selectedOS.name}<br>
-          Choose a storage device to continue.
-        </p>
-      `;
-      return;
-    }
-
-    if (!this.selectedOS && this.selectedDevice) {
-      summaryDiv.innerHTML = `
-        <div class="flex items-center mb-2">
-          <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
-          <h3 class="font-medium text-gray-700">Select OS Image</h3>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PiFlash - Raspberry Pi Image Flasher</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="mb-10 text-center">
+            <div class="flex justify-center items-center mb-4">
+                <i class="fas fa-raspberry-pi text-4xl text-red-600 mr-3"></i>
+                <h1 class="text-4xl font-bold text-gray-800">PiFlash</h1>
+            </div>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+                A simple web-based tool to flash Raspberry Pi OS images to your SD cards. No additional software required!
+            </p>
+        </header>
+
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Column - Device Selection -->
+            <div class="lg:col-span-1 space-y-6">
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
+                    <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-sd-card mr-2 text-blue-500"></i> Select Storage Device
+                    </h2>
+                    <div id="deviceList" class="space-y-3">
+                        <!-- Devices will be populated by JavaScript -->
+                    </div>
+                    <button id="refreshDevices" class="w-full mt-2 flex items-center justify-center text-blue-500 hover:text-blue-700">
+                        <i class="fas fa-sync-alt mr-2"></i> Refresh Devices
+                    </button>
+                </div>
+
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
+                    <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-cog mr-2 text-purple-500"></i> Flash Options
+                    </h2>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Validation</label>
+                            <select id="validationOption" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                                <option value="verify">Verify after writing</option>
+                                <option value="skip">Skip verification</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Compression</label>
+                            <select id="compressionOption" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                                <option value="auto">Auto (recommended)</option>
+                                <option value="always">Always decompress</option>
+                                <option value="never">Never decompress</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="unmount" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
+                            <label for="unmount" class="ml-2 block text-sm text-gray-700">Unmount before writing</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="checkbox" id="eject" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
+                            <label for="eject" class="ml-2 block text-sm text-gray-700">Eject when complete</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Middle Column - OS Selection -->
+            <div class="lg:col-span-1 space-y-6">
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover h-full">
+                    <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-download mr-2 text-green-500"></i> Select OS Image
+                    </h2>
+                    
+                    <div class="mb-4">
+                        <div class="flex space-x-2 mb-3">
+                            <button id="tabRecommended" class="tab-button px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">Recommended</button>
+                            <button id="tabAll" class="tab-button px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">All</button>
+                            <button id="tabOther" class="tab-button px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">Other</button>
+                        </div>
+                        <div class="relative">
+                            <input type="text" id="searchOS" placeholder="Search OS images..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                            <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                        </div>
+                    </div>
+
+                    <div id="osImageList" class="space-y-3 overflow-y-auto max-h-96">
+                        <!-- OS images will be populated by JavaScript -->
+                    </div>
+
+                    <!-- Custom Image Upload -->
+                    <div class="mt-4">
+                        <input type="file" id="customImageFile" accept=".img,.zip,.gz,.xz" class="hidden">
+                        <div id="customImageUpload" class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-blue-400 cursor-pointer">
+                            <i class="fas fa-file-upload text-3xl text-gray-400 mb-2"></i>
+                            <h3 class="font-medium text-gray-700">Use Custom Image</h3>
+                            <p class="text-sm text-gray-500">Upload your own .img or .zip file</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Column - Flash Progress -->
+            <div class="lg:col-span-1 space-y-6">
+                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
+                    <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-bolt mr-2 text-yellow-500"></i> Flash Summary
+                    </h2>
+                    
+                    <div id="flashSummary" class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4">
+                        <div class="flex items-center mb-2">
+                            <i class="fas fa-info-circle text-gray-500 mr-2"></i>
+                            <h3 class="font-medium text-gray-700">Select Image and Device</h3>
+                        </div>
+                        <p class="text-sm text-gray-600">
+                            Choose an OS image and storage device to get started.
+                        </p>
+                    </div>
+
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Wi-Fi Configuration (Optional)</label>
+                            <input type="text" id="wifiSSID" placeholder="SSID" class="w-full p-2 border border-gray-300 rounded-md mb-2 focus:ring-blue-500 focus:border-blue-500">
+                            <input type="password" id="wifiPassword" placeholder="Password" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Hostname (Optional)</label>
+                            <input type="text" id="hostname" placeholder="raspberrypi" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Enable SSH</label>
+                            <select id="sshOption" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
+                                <option value="disabled">Disabled</option>
+                                <option value="password">Enabled with password authentication</option>
+                                <option value="key">Enabled with public key only</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <button id="flashButton" class="w-full mt-6 py-3 px-4 bg-gray-400 text-white font-semibold rounded-lg shadow-md transition duration-300 flex items-center justify-center cursor-not-allowed" disabled>
+                        <i class="fas fa-bolt mr-2"></i> Select Image and Device
+                    </button>
+                </div>
+
+                <!-- Progress Section (Initially Hidden) -->
+                <div id="progressSection" class="bg-white rounded-xl shadow-md p-6 card-hover hidden">
+                    <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-spinner fa-spin mr-2 text-blue-500"></i> Flashing in Progress
+                    </h2>
+
+                    <div class="space-y-4">
+                        <div>
+                            <div class="flex justify-between text-sm text-gray-600 mb-1">
+                                <span id="progressStatus">Preparing...</span>
+                                <span id="progressPercent">0%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div id="progressBar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
+                            </div>
+                        </div>
+
+                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                            <div class="flex items-center">
+                                <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
+                                <h3 class="font-medium text-yellow-800">Important</h3>
+                            </div>
+                            <p class="text-sm text-yellow-700 mt-1">
+                                Do not remove the SD card or close this browser tab during the flashing process.
+                            </p>
+                        </div>
+
+                        <div id="progressSteps" class="space-y-2 text-sm">
+                            <!-- Progress steps will be populated by JavaScript -->
+                        </div>
+
+                        <div class="pt-4 border-t border-gray-200">
+                            <p class="text-sm text-gray-500">
+                                <i class="fas fa-clock mr-1"></i> Estimated time remaining: <span id="timeRemaining">Calculating...</span>
+                            </p>
+                        </div>
+
+                        <button id="cancelFlash" class="w-full py-2 px-4 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg">
+                            Cancel Flashing
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Completion Section (Initially Hidden) -->
+                <div id="completionSection" class="bg-white rounded-xl shadow-md p-6 card-hover hidden">
+                    <div class="text-center">
+                        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
+                            <i class="fas fa-check text-green-600 text-xl"></i>
+                        </div>
+                        <h3 class="text-lg font-medium text-gray-900 mb-2">Flash Complete!</h3>
+                        <p class="text-sm text-gray-500 mb-4" id="completionMessage">
+                            Your SD card is ready to use.
+                        </p>
+                        <div class="bg-gray-50 p-3 rounded-lg text-left mb-4">
+                            <p class="text-sm font-medium text-gray-700 mb-1">Next Steps:</p>
+                            <ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
+                                <li>Insert the SD card into your Raspberry Pi</li>
+                                <li>Connect power to boot the device</li>
+                                <li>Follow the setup instructions</li>
+                            </ul>
+                        </div>
+                        <button id="flashAnother" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
+                            Flash Another Card
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
-        <p class="text-sm text-gray-600">
-          <strong>Device:</strong> ${this.selectedDevice.name}<br>
-          Choose an OS image to continue.
-        </p>
-      `;
-      return;
-    }
-
-    // Both selected
-    const isDeviceCompatible = this.selectedDevice.sizeBytes >= this.selectedOS.sizeBytes;
-    const statusIcon = isDeviceCompatible ? 'fas fa-check-circle text-green-500' : 'fas fa-exclamation-triangle text-red-500';
-    const statusText = isDeviceCompatible ? 'Ready to Flash' : 'Size Mismatch';
-    
-    summaryDiv.innerHTML = `
-      <div class="flex items-center mb-2">
-        <i class="${statusIcon} mr-2"></i>
-        <h3 class="font-medium text-gray-700">${statusText}</h3>
-      </div>
-      <div class="text-sm text-gray-600 space-y-1">
-        <p><strong>Image:</strong> ${this.selectedOS.name} (${this.selectedOS.size})</p>
-        <p><strong>Device:</strong> ${this.selectedDevice.name} (${this.selectedDevice.size})</p>
-        ${!isDeviceCompatible ? '<p class="text-red-600 mt-2"><strong>Warning:</strong> Device is too small for this image.</p>' : ''}
-      </div>
-    `;
-  }
-
-  /**
-   * Update flash button state
-   */
-  updateFlashButton() {
-    const flashButton = document.getElementById('flashButton');
-    const canFlash = this.selectedDevice && this.selectedOS && 
-                     this.selectedDevice.sizeBytes >= this.selectedOS.sizeBytes;
-
-    if (canFlash) {
-      flashButton.disabled = false;
-      flashButton.className = 'w-full mt-6 py-3 px-4 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-md transition duration-300 flex items-center justify-center';
-      flashButton.innerHTML = '<i class="fas fa-bolt mr-2"></i> Flash!';
-    } else {
-      flashButton.disabled = true;
-      flashButton.className = 'w-full mt-6 py-3 px-4 bg-gray-400 text-white font-semibold rounded-lg shadow-md transition duration-300 flex items-center justify-center cursor-not-allowed';
-      
-      if (!this.selectedDevice && !this.selectedOS) {
-        flashButton.innerHTML = '<i class="fas fa-bolt mr-2"></i> Select Image and Device';
-      } else if (!this.selectedDevice) {
-        flashButton.innerHTML = '<i class="fas fa-bolt mr-2"></i> Select Storage Device';
-      } else if (!this.selectedOS) {
-        flashButton.innerHTML = '<i class="fas fa-bolt mr-2"></i> Select OS Image';
-      } else {
-        flashButton.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i> Device Too Small';
-      }
-    }
-  }
-
-  /**
-   * Start the flashing process
-   */
-  startFlashing() {
-    if (!this.selectedDevice || !this.selectedOS) return;
-
-    console.log('Starting flash process...');
-    
-    // Show confirmation dialog
-    const confirmed = confirm(
-      `Are you sure you want to flash "${this.selectedOS.name}" to "${this.selectedDevice.name}"?\n\n` +
-      `This will PERMANENTLY erase all data on the device!\n\n` +
-      `Device: ${this.selectedDevice.path} (${this.selectedDevice.size})\n` +
-      `Image: ${this.selectedOS.name} (${this.selectedOS.size})`
-    );
-
-    if (!confirmed) return;
-
-    // Hide flash summary and show progress
-    document.getElementById('flashSummary').parentElement.classList.add('hidden');
-    document.getElementById('progressSection').classList.remove('hidden');
-    document.getElementById('progressSection').classList.add('slide-up');
-
-    // Initialize progress
-    this.flashingProgress = {
-      stage: 'preparing',
-      percent: 0,
-      speed: 0,
-      eta: 0,
-      startTime: Date.now()
-    };
-
-    this.updateProgress();
-    this.simulateFlashingProcess();
-  }
-
-  /**
-   * Simulate the flashing process
-   */
-  simulateFlashingProcess() {
-    const stages = [
-      { name: 'preparing', duration: 2000, message: 'Preparing device...' },
-      { name: 'unmounting', duration: 1000, message: 'Unmounting device...' },
-      { name: 'writing', duration: 15000, message: 'Writing image...' },
-      { name: 'verifying', duration: 8000, message: 'Verifying write...' },
-      { name: 'ejecting', duration: 1000, message: 'Ejecting device...' }
-    ];
-
-    let currentStageIndex = 0;
-    let stageStartTime = Date.now();
-    let totalDuration = stages.reduce((sum, stage) => sum + stage.duration, 0);
-    let elapsedTotal = 0;
-
-    this.flashingInterval = setInterval(() => {
-      const now = Date.now();
-      const currentStage = stages[currentStageIndex];
-      const stageElapsed = now - stageStartTime;
-      const stageProgress = Math.min(stageElapsed / currentStage.duration, 1);
-
-      // Update progress
-      const overallProgress = (elapsedTotal + (stageProgress * currentStage.duration)) / totalDuration;
-      this.flashingProgress.percent = Math.round(overallProgress * 100);
-      this.flashingProgress.stage = currentStage.name;
-      this.flashingProgress.message = currentStage.message;
-
-      // Calculate speed and ETA (simulation)
-      if (currentStage.name === 'writing') {
-        const bytesWritten = stageProgress * this.selectedOS.sizeBytes;
-        const timeElapsed = stageElapsed / 1000; // seconds
-        this.flashingProgress.speed = bytesWritten / timeElapsed; // bytes per second
-        this.flashingProgress.eta = (this.selectedOS.sizeBytes - bytesWritten) / this.flashingProgress.speed * 1000; // ms
-      }
-
-      this.updateProgress();
-
-      // Move to next stage
-      if (stageProgress >= 1) {
-        elapsedTotal += currentStage.duration;
-        currentStageIndex++;
-        stageStartTime = now;
-
-        if (currentStageIndex >= stages.length) {
-          clearInterval(this.flashingInterval);
-          this.completeFlashing();
-        }
-      }
-    }, 100);
-  }
-
-  /**
-   * Update progress display
-   */
-  updateProgress() {
-    const progress = this.flashingProgress;
-    
-    // Update progress bar
-    document.getElementById('progressBar').style.width = `${progress.percent}%`;
-    document.getElementById('progressPercent').textContent = `${progress.percent}%`;
-    document.getElementById('progressStatus').textContent = progress.message || 'Processing...';
-
-    // Update time remaining
-    const timeRemaining = document.getElementById('timeRemaining');
-    if (progress.eta && progress.eta > 0) {
-      const minutes = Math.floor(progress.eta / 60000);
-      const seconds = Math.floor((progress.eta % 60000) / 1000);
-      timeRemaining.textContent = `${minutes}m ${seconds}s`;
-    } else {
-      timeRemaining.textContent = 'Calculating...';
-    }
-
-    // Update progress steps
-    const stepsDiv = document.getElementById('progressSteps');
-    const steps = [
-      { id: 'preparing', name: 'Preparing device', icon: 'fas fa-cog' },
-      { id: 'unmounting', name: 'Unmounting device', icon: 'fas fa-eject' },
-      { id: 'writing', name: 'Writing image', icon: 'fas fa-pen' },
-      { id: 'verifying', name: 'Verifying write', icon: 'fas fa-check-double' },
-      { id: 'ejecting', name: 'Ejecting device', icon: 'fas fa-sign-out-alt' }
-    ];
-
-    stepsDiv.innerHTML = steps.map(step => {
-      let statusClass = 'text-gray-400';
-      let statusIcon = 'far fa-circle';
-      
-      if (step.id === progress.stage) {
-        statusClass = 'text-blue-600';
-        statusIcon = 'fas fa-spinner fa-spin';
-      } else if (steps.findIndex(s => s.id === step.id) < steps.findIndex(s => s.id === progress.stage)) {
-        statusClass = 'text-green-600';
-        statusIcon = 'fas fa-check-circle';
-      }
-
-      return `
-        <div class="flex items-center ${statusClass}">
-          <i class="${statusIcon} mr-2"></i>
-          <span>${step.name}</span>
-        </div>
-      `;
-    }).join('');
-  }
-
-  /**
-   * Cancel flashing process
-   */
-  cancelFlashing() {
-    const confirmed = confirm('Are you sure you want to cancel the flashing process?\n\nThis may leave your device in an unusable state.');
-    
-    if (!confirmed) return;
-
-    console.log('Cancelling flash process...');
-    
-    if (this.flashingInterval) {
-      clearInterval(this.flashingInterval);
-      this.flashingInterval = null;
-    }
-
-    // Show cancellation message
-    document.getElementById('progressStatus').textContent = 'Cancelled by user';
-    document.getElementById('progressBar').classList.add('bg-red-600');
-    
-    setTimeout(() => {
-      this.resetApplication();
-    }, 2000);
-  }
-
-  /**
-   * Complete flashing process
-   */
-  completeFlashing() {
-    console.log('Flash process completed successfully!');
-    
-    // Hide progress section and show completion
-    document.getElementById('progressSection').classList.add('hidden');
-    document.getElementById('completionSection').classList.remove('hidden');
-    document.getElementById('completionSection').classList.add('slide-up');
-
-    // Update completion message
-    const completionMessage = document.getElementById('completionMessage');
-    completionMessage.textContent = `Successfully flashed ${this.selectedOS.name} to ${this.selectedDevice.name}. Your SD card is ready to use!`;
-
-    // Play success sound (if available)
-    this.playSuccessSound();
-  }
-
-  /**
-   * Play success sound
-   */
-  playSuccessSound() {
-    try {
-      // Create a simple success tone
-      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-      const oscillator = audioContext.createOscillator();
-      const gainNode = audioContext.createGain();
-      
-      oscillator.connect(gainNode);
-      gainNode.connect(audioContext.destination);
-      
-      oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
-      oscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1);
-      gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
-      
-      oscillator.start(audioContext.currentTime);
-      oscillator.stop(audioContext.currentTime + 0.3);
-    } catch (error) {
-      console.log('Could not play success sound:', error);
-    }
-  }
-
-  /**
-   * Reset application to initial state
-   */
-  resetApplication() {
-    console.log('Resetting application...');
-    
-    // Reset selections
-    this.selectedDevice = null;
-    this.selectedOS = null;
-    this.flashingProgress = null;
-    
-    if (this.flashingInterval) {
-      clearInterval(this.flashingInterval);
-      this.flashingInterval = null;
-    }
-
-    // Reset UI
-    document.querySelectorAll('.device-card').forEach(card => {
-      card.classList.remove('selected');
-      card.querySelector('.device-selected-icon').classList.add('hidden');
-    });
-
-    document.querySelectorAll('.os-image-card').forEach(card => {
-      card.classList.remove('selected');
-      const icon = card.querySelector('.os-selected-icon');
-      if (icon) icon.classList.add('hidden');
-    });
-
-    // Reset custom upload
-    const uploadArea = document.getElementById('customImageUpload');
-    uploadArea.innerHTML = `
-      <i class="fas fa-file-upload text-3xl text-gray-400 mb-2"></i>
-      <h3 class="font-medium text-gray-700">Use Custom Image</h3>
-      <p class="text-sm text-gray-500">Upload your own .img or .zip file</p>
-    `;
-    uploadArea.classList.remove('border-green-400', 'bg-green-50');
-
-    // Reset form fields
-    document.getElementById('wifiSSID').value = '';
-    document.getElementById('wifiPassword').value = '';
-    document.getElementById('hostname').value = '';
-    document.getElementById('sshOption').value = 'disabled';
-    document.getElementById('customImageFile').value = '';
-
-    // Hide sections
-    document.getElementById('progressSection').classList.add('hidden');
-    document.getElementById('completionSection').classList.add('hidden');
-    document.getElementById('flashSummary').parentElement.classList.remove('hidden');
-
-    // Update UI
-    this.updateFlashSummary();
-    this.updateFlashButton();
-  }
-}
-
-// Initialize the application when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-  console.log('DOM loaded, initializing PiFlash...');
-  new PiFlashApp();
-});
 
-// Unit tests for key functions
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = PiFlashApp;
-}
+        <!-- Footer -->
+        <footer class="mt-16 text-center text-sm text-gray-500">
+            <p>PiFlash is an open-source tool. Use at your own risk.</p>
+            <p class="mt-1">Not affiliated with the Raspberry Pi Foundation.</p>
+            <div class="flex justify-center space-x-4 mt-3">
+                <a href="https://github.com/your-org/piflash" class="text-blue-500 hover:text-blue-700"><i class="fab fa-github"></i> GitHub</a>
+                <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-question-circle"></i> Help</a>
+                <a href="#" class="text-blue-500 hover:text-blue-700"><i class="fas fa-bug"></i> Report Issue</a>
+            </div>
+        </footer>
+    </div>
+
+    <script src="js/app.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "piflash-web-app",
+  "version": "1.0.0",
+  "description": "A web-based Raspberry Pi image flasher application",
+  "main": "index.html",
+  "scripts": {
+    "start": "serve -s . -p 3000",
+    "build": "echo 'Static files - no build required'",
+    "test": "jest",
+    "dev": "live-server --port=3000 --open=index.html"
+  },
+  "keywords": [
+    "raspberry-pi",
+    "flasher",
+    "web-app",
+    "sd-card",
+    "imaging"
+  ],
+  "author": "PiFlash Development Team",
+  "license": "MIT",
+  "devDependencies": {
+    "jest": "^29.5.0",
+    "live-server": "^1.2.2",
+    "serve": "^14.2.0"
+  },
+  "dependencies": {},
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

pre-commit.sh

@@ -0,0 +1,248 @@
+#!/usr/bin/env bash
+
+# PiFlash Pre-commit Hook
+# Ensures code quality and consistency before commits
+
+set -euo pipefail
+
+echo "🔍 Running pre-commit checks for PiFlash..."
+
+# Color codes for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Helper function to print colored output
+print_status() {
+    echo -e "${BLUE}[PiFlash]${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}✅${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}⚠️${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}❌${NC} $1"
+}
+
+# Check if we're in a git repository
+if ! git rev-parse --git-dir > /dev/null 2>&1; then
+    print_error "Not in a git repository"
+    exit 1
+fi
+
+# Get list of staged files
+STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM)
+
+if [ -z "$STAGED_FILES" ]; then
+    print_warning "No staged files found"
+    exit 0
+fi
+
+print_status "Staged files: $(echo $STAGED_FILES | wc -w)"
+
+# Check 1: Validate HTML files
+print_status "Validating HTML files..."
+HTML_FILES=$(echo "$STAGED_FILES" | grep -E '\.(html|htm)$' || true)
+if [ -n "$HTML_FILES" ]; then
+    for file in $HTML_FILES; do
+        if [ -f "$file" ]; then
+            # Basic HTML validation
+            if ! grep -q "<!DOCTYPE html>" "$file"; then
+                print_error "Missing DOCTYPE in $file"
+                exit 1
+            fi
+            
+            # Check for basic structure
+            if ! grep -q "<html" "$file" || ! grep -q "</html>" "$file"; then
+                print_error "Invalid HTML structure in $file"
+                exit 1
+            fi
+            
+            print_success "HTML validation passed for $file"
+        fi
+    done
+else
+    print_status "No HTML files to validate"
+fi
+
+# Check 2: Validate CSS files
+print_status "Validating CSS files..."
+CSS_FILES=$(echo "$STAGED_FILES" | grep -E '\.(css|scss|sass)$' || true)
+if [ -n "$CSS_FILES" ]; then
+    for file in $CSS_FILES; do
+        if [ -f "$file" ]; then
+            # Basic CSS syntax check
+            if ! node -e "
+                const fs = require('fs');
+                const css = fs.readFileSync('$file', 'utf8');
+                const openBraces = (css.match(/\{/g) || []).length;
+                const closeBraces = (css.match(/\}/g) || []).length;
+                if (openBraces !== closeBraces) {
+                    console.error('Mismatched braces in CSS');
+                    process.exit(1);
+                }
+            " 2>/dev/null; then
+                print_error "CSS syntax error in $file"
+                exit 1
+            fi
+            
+            print_success "CSS validation passed for $file"
+        fi
+    done
+else
+    print_status "No CSS files to validate"
+fi
+
+# Check 3: Validate JavaScript files
+print_status "Validating JavaScript files..."
+JS_FILES=$(echo "$STAGED_FILES" | grep -E '\.(js|jsx|ts|tsx)$' || true)
+if [ -n "$JS_FILES" ]; then
+    for file in $JS_FILES; do
+        if [ -f "$file" ]; then
+            # Check for basic syntax using Node.js
+            if ! node -c "$file" 2>/dev/null; then
+                print_error "JavaScript syntax error in $file"
+                exit 1
+            fi
+            
+            # Check for console.log statements (optional warning)
+            if grep -q "console\.log" "$file"; then
+                print_warning "console.log found in $file - consider removing for production"
+            fi
+            
+            # Check for TODO comments
+            if grep -qi "TODO\|FIXME\|HACK" "$file"; then
+                print_warning "TODO/FIXME/HACK comments found in $file"
+            fi
+            
+            print_success "JavaScript validation passed for $file"
+        fi
+    done
+else
+    print_status "No JavaScript files to validate"
+fi
+
+# Check 4: Validate JSON files
+print_status "Validating JSON files..."
+JSON_FILES=$(echo "$STAGED_FILES" | grep -E '\.(json)$' || true)
+if [ -n "$JSON_FILES" ]; then
+    for file in $JSON_FILES; do
+        if [ -f "$file" ]; then
+            if ! node -e "JSON.parse(require('fs').readFileSync('$file', 'utf8'))" 2>/dev/null; then
+                print_error "Invalid JSON in $file"
+                exit 1
+            fi
+            
+            print_success "JSON validation passed for $file"
+        fi
+    done
+else
+    print_status "No JSON files to validate"
+fi
+
+# Check 5: File size limits
+print_status "Checking file sizes..."
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        file_size=$(stat -f%z "$file" 2>/dev/null || stat -c%s "$file" 2>/dev/null || echo 0)
+        max_size=1048576  # 1MB in bytes
+        
+        if [ "$file_size" -gt "$max_size" ]; then
+            print_error "File $file is too large ($(($file_size / 1024))KB > 1MB)"
+            exit 1
+        fi
+    fi
+done
+print_success "File size check passed"
+
+# Check 6: Line ending consistency
+print_status "Checking line endings..."
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        # Check for mixed line endings
+        if file "$file" | grep -q "CRLF"; then
+            print_warning "CRLF line endings found in $file - consider using LF"
+        fi
+    fi
+done
+print_success "Line ending check completed"
+
+# Check 7: Trailing whitespace
+print_status "Checking for trailing whitespace..."
+WHITESPACE_FILES=""
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        if grep -q '[[:space:]]$' "$file"; then
+            WHITESPACE_FILES="$WHITESPACE_FILES $file"
+        fi
+    fi
+done
+
+if [ -n "$WHITESPACE_FILES" ]; then
+    print_warning "Trailing whitespace found in:$WHITESPACE_FILES"
+    print_status "Attempting to fix trailing whitespace..."
+    
+    for file in $WHITESPACE_FILES; do
+        # Remove trailing whitespace
+        sed -i 's/[[:space:]]*$//' "$file"
+        git add "$file"
+    done
+    
+    print_success "Trailing whitespace fixed and re-staged"
+fi
+
+# Check 8: Commit message format (if available)
+if [ -n "${1:-}" ]; then
+    COMMIT_MSG_FILE="$1"
+    if [ -f "$COMMIT_MSG_FILE" ]; then
+        commit_msg=$(head -n1 "$COMMIT_MSG_FILE")
+        
+        # Check commit message length
+        if [ ${#commit_msg} -gt 72 ]; then
+            print_warning "Commit message is longer than 72 characters"
+        fi
+        
+        # Check for conventional commit format (optional)
+        if echo "$commit_msg" | grep -qE '^(feat|fix|docs|style|refactor|test|chore)(\(.+\))?: .+'; then
+            print_success "Conventional commit format detected"
+        else
+            print_warning "Consider using conventional commit format (feat:, fix:, docs:, etc.)"
+        fi
+    fi
+fi
+
+# Check 9: Security scan for sensitive data
+print_status "Scanning for sensitive data..."
+SENSITIVE_PATTERNS=(
+    "password\s*=\s*['\"][^'\"]*['\"]"
+    "api[_-]?key\s*=\s*['\"][^'\"]*['\"]"
+    "secret\s*=\s*['\"][^'\"]*['\"]"
+    "token\s*=\s*['\"][^'\"]*['\"]"
+    "private[_-]?key"
+)
+
+for file in $STAGED_FILES; do
+    if [ -f "$file" ]; then
+        for pattern in "${SENSITIVE_PATTERNS[@]}"; do
+            if grep -iE "$pattern" "$file" >/dev/null 2>&1; then
+                print_error "Potential sensitive data found in $file: $pattern"
+                print_error "Please review and remove sensitive information before committing"
+                exit 1
+            fi
+        done
+    fi
+done
+print_success "Security scan completed"
+
+# Final success message
+print_success "All pre-commit checks passed!"
+print_status "Ready to commit $(echo $STAGED_FILES | wc -w) files"
+
+exit 0

styles.css

@@ -0,0 +1,139 @@
+.progress-bar {
+  transition: width 0.3s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.card-hover {
+  transition: all 0.3s ease;
+}
+
+.flashing-animation {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+.tab-button.active {
+  background-color: rgb(219 234 254);
+  color: rgb(29 78 216);
+}
+
+.tab-button:not(.active) {
+  background-color: rgb(243 244 246);
+  color: rgb(55 65 81);
+}
+
+.tab-button:hover {
+  background-color: rgb(229 231 235);
+}
+
+.os-image-card {
+  transition: all 0.2s ease;
+}
+
+.os-image-card:hover {
+  border-color: rgb(147 197 253);
+  background-color: rgb(248 250 252);
+}
+
+.os-image-card.selected {
+  border-color: rgb(59 130 246);
+  background-color: rgb(239 246 255);
+}
+
+.device-card {
+  transition: all 0.2s ease;
+}
+
+.device-card:hover {
+  background-color: rgb(243 244 246);
+}
+
+.device-card.selected {
+  background-color: rgb(219 234 254);
+  border-color: rgb(59 130 246);
+}
+
+.rotate-animation {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.bounce-animation {
+  animation: bounce 1s ease-in-out infinite;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+/* Custom scrollbar for OS list */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 6px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Loading skeleton animations */
+.skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-up {
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}