Update js/app.js

js/app.js

@@ -0,0 +1,933 @@
+/**
+ * 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>
+        </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;
+}