Use PNG icon assets + Windows 11 WinUI3 native design

- Download 27 fluency-style PNG icons (shield, cpu, monitor, wifi, etc.)
- Replace Lucide CDN with embedded PNG <img> tags throughout UI
- Redesign CSS with Windows 11 Mica/Acrylic dark theme:
  - WinUI3 color palette (Segoe UI Variable font)
  - NavigationView-style toolbar tabs with accent indicator bar
  - Subtle borders matching Win11 material layering
  - Accent button style (#0078d4) matching Windows 11 controls
  - Card/surface hierarchy matching WinUI3 specs
- Add IMTAQIN credit in footer with link to https://imtaqin.id
- Fix embed directive for flat icon layout (no subdirectories)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/app.js

@@ -1,6 +1,5 @@
 /* ============================================================
-   Driver Booster Pro - Application Logic
-   Driver Navigator Style: tabs, driver rows, action buttons
+   Driver Booster Pro - PNG Icons Edition
    ============================================================ */
 
 var App = {
@@ -10,16 +9,9 @@ var App = {
         this.setupTabs();
         this.setupFilters();
         this.refreshSysInfo();
-        this.refreshIcons();
     },
 
-    refreshIcons: function() {
-        if (window.lucide) lucide.createIcons();
-    },
-
-    // ---- Tab Navigation ----
     setupTabs: function() {
-        var self = this;
         document.querySelectorAll('.toolbar-tab').forEach(function(tab) {
             tab.addEventListener('click', function() {
                 var id = tab.dataset.tab;
@@ -32,7 +24,6 @@ var App = {
         });
     },
 
-    // ---- Filter Pills ----
     setupFilters: function() {
         var self = this;
         document.querySelectorAll('.pill').forEach(function(btn) {
@@ -54,17 +45,15 @@ var App = {
         });
     },
 
-    // ---- Loading ----
     showLoading: function(text) {
         document.getElementById('loading-text').textContent = text;
         document.getElementById('loading-overlay').style.display = 'flex';
-        this.refreshIcons();
     },
     hideLoading: function() {
         document.getElementById('loading-overlay').style.display = 'none';
     },
 
-    // ---- System Info ----
+    // System Info
     refreshSysInfo: function() {
         var self = this;
         this.showLoading('Collecting system information...');
@@ -72,10 +61,7 @@ var App = {
             self.state.sysInfo = info;
             self.renderSysInfo(info);
             self.hideLoading();
-        }).catch(function(e) {
-            console.error(e);
-            self.hideLoading();
-        });
+        }).catch(function(e) { console.error(e); self.hideLoading(); });
     },
 
     renderSysInfo: function(d) {
@@ -100,17 +86,15 @@ var App = {
         if(db) db.style.width = (d.diskPercent||0)+'%';
     },
 
-    // ---- Driver Scan ----
+    // Driver Scan
     scanDrivers: function() {
         var self = this;
-        this.showLoading('Scanning drivers... This may take a moment.');
+        this.showLoading('Scanning drivers...');
         // Switch to drivers tab
         document.querySelectorAll('.toolbar-tab').forEach(function(t){ t.classList.remove('active'); });
         document.querySelector('[data-tab="drivers"]').classList.add('active');
         document.querySelectorAll('.tab-page').forEach(function(p){ p.classList.remove('active'); });
         document.getElementById('tab-drivers').classList.add('active');
-
-        // Update steps
         this.setStep(2);
 
         fetch('/api/drivers/scan').then(function(r){ return r.json(); }).then(function(result) {
@@ -118,10 +102,7 @@ var App = {
             self.renderDrivers(result);
             self.updateScanStats(result);
             self.hideLoading();
-        }).catch(function(e) {
-            console.error(e);
-            self.hideLoading();
-        });
+        }).catch(function(e) { console.error(e); self.hideLoading(); });
     },
 
     updateScanStats: function(r) {
@@ -139,8 +120,7 @@ var App = {
 
         var list = document.getElementById('driver-list');
         if (!result.drivers || result.drivers.length === 0) {
-            list.innerHTML = '<div class="placeholder-msg"><i data-lucide="search-x"></i><p>No drivers found</p></div>';
-            this.refreshIcons();
+            list.innerHTML = '<div class="placeholder-msg"><img src="icon-scan.png" class="placeholder-img"><p>No drivers found</p></div>';
             return;
         }
 
@@ -150,32 +130,31 @@ var App = {
             if (d.needsUpdate) cls.push('outdated');
             if (d.status === 'Error' || d.status === 'Degraded') cls.push('error');
 
-            var icon = self.driverIcon(d.deviceClass);
+            var iconFile = self.driverIconFile(d.deviceClass);
             var barClass = d.needsUpdate ? 'warn' : (d.status === 'Error' ? 'err' : 'ok');
 
             var signBadge = d.isSigned
-                ? '<span class="drv-badge signed"><i data-lucide="shield-check"></i> Signed</span>'
-                : '<span class="drv-badge unsigned"><i data-lucide="shield-x"></i></span>';
+                ? '<span class="drv-badge signed"><img src="icon-shield.png" class="drv-badge-img" style="width:10px;height:10px"> Signed</span>'
+                : '<span class="drv-badge unsigned">Unsigned</span>';
 
             var actionBtn = d.needsUpdate
-                ? '<button class="drv-btn install-btn"><i data-lucide="download"></i> Download</button>' +
-                  '<button class="drv-btn"><i data-lucide="play"></i> Install</button>'
-                : '<button class="drv-btn installed-btn"><i data-lucide="circle-check"></i> Up to date</button>';
+                ? '<button class="drv-btn install-btn"><img src="icon-download.png" style="width:13px;height:13px"> Download</button>' +
+                  '<button class="drv-btn"><img src="icon-install.png" style="width:13px;height:13px"> Install</button>'
+                : '<button class="drv-btn ok-btn"><img src="icon-checkmark.png" style="width:13px;height:13px"> Up to date</button>';
 
             return '<div class="' + cls.join(' ') + '" data-signed="' + d.isSigned + '">' +
-                '<div class="drv-icon"><i data-lucide="' + icon + '"></i></div>' +
+                '<div class="drv-icon"><img src="icon-' + iconFile + '" class="drv-icon-img"></div>' +
                 '<div class="drv-info">' +
                     '<div class="drv-name">' + self.esc(d.deviceName) + '</div>' +
-                    '<div class="drv-meta">' + self.esc(d.manufacturer||'Unknown') + ' &middot; v' + self.esc(d.driverVersion||'?') + ' &middot; ' + self.esc(d.driverDate) + ' ' + signBadge + '</div>' +
-                '</div>' +
-                '<div class="drv-progress">' +
-                    '<div class="drv-bar"><div class="drv-bar-fill ' + barClass + '"></div></div>' +
+                    '<div class="drv-meta">' + self.esc(d.manufacturer||'Unknown') +
+                        ' &middot; v' + self.esc(d.driverVersion||'?') +
+                        ' &middot; ' + self.esc(d.driverDate) + ' ' + signBadge + '</div>' +
                 '</div>' +
+                '<div class="drv-progress"><div class="drv-bar"><div class="drv-bar-fill ' + barClass + '"></div></div></div>' +
                 '<div class="drv-actions">' + actionBtn + '</div>' +
             '</div>';
         }).join('');
 
-        // Show CTA if there are outdated drivers
         var cta = document.getElementById('cta-update-all');
         if (result.outdatedCount > 0) {
             cta.style.display = 'flex';
@@ -183,30 +162,27 @@ var App = {
         } else {
             cta.style.display = 'none';
         }
-
-        this.refreshIcons();
     },
 
-    driverIcon: function(cls) {
-        if (!cls) return 'package';
+    driverIconFile: function(cls) {
+        if (!cls) return 'package.png';
         var u = cls.toUpperCase();
         var m = {
-            'DISPLAY':'monitor','MEDIA':'volume-2','AUDIO':'volume-2','SOUND':'volume-2',
-            'NET':'wifi','NETWORK':'wifi','USB':'usb','HID':'mouse','KEYBOARD':'keyboard',
-            'DISK':'hard-drive','STORAGE':'hard-drive','PROCESSOR':'cpu','SYSTEM':'settings',
-            'BLUETOOTH':'bluetooth','CAMERA':'camera','IMAGE':'camera','PRINT':'printer',
-            'BATTERY':'battery-charging','FIRMWARE':'circuit-board','SECURITY':'shield',
-            'SENSOR':'thermometer'
+            'DISPLAY':'monitor.png','MEDIA':'speaker.png','AUDIO':'speaker.png','SOUND':'speaker.png',
+            'NET':'wifi.png','NETWORK':'wifi.png','USB':'usb.png','HID':'mouse.png',
+            'KEYBOARD':'keyboard.png','DISK':'harddrive.png','STORAGE':'harddrive.png',
+            'PROCESSOR':'cpu.png','SYSTEM':'settings.png','BLUETOOTH':'bluetooth.png',
+            'CAMERA':'camera.png','IMAGE':'camera.png','PRINT':'printer.png',
+            'BATTERY':'battery.png'
         };
         for (var k in m) { if (u.indexOf(k) !== -1) return m[k]; }
-        return 'package';
+        return 'package.png';
     },
 
-    // ---- Windows Update ----
+    // Windows Update
     checkUpdates: function() {
         var self = this;
         this.showLoading('Checking for Windows updates...');
-        // Switch to updates tab
         document.querySelectorAll('.toolbar-tab').forEach(function(t){ t.classList.remove('active'); });
         document.querySelector('[data-tab="updates"]').classList.add('active');
         document.querySelectorAll('.tab-page').forEach(function(p){ p.classList.remove('active'); });
@@ -216,24 +192,18 @@ var App = {
             self.state.updates = result;
             self.renderUpdates(result);
             self.hideLoading();
-        }).catch(function(e) {
-            console.error(e);
-            self.hideLoading();
-        });
+        }).catch(function(e) { console.error(e); self.hideLoading(); });
     },
 
     renderUpdates: function(result) {
         var list = document.getElementById('update-list');
 
         if (result.error) {
-            list.innerHTML = '<div class="placeholder-msg"><i data-lucide="alert-circle"></i><p style="color:var(--red)">' + this.esc(result.error) + '</p></div>';
-            this.refreshIcons();
+            list.innerHTML = '<div class="placeholder-msg"><img src="icon-error.png" class="placeholder-img"><p style="color:var(--red)">' + this.esc(result.error) + '</p></div>';
             return;
         }
-
         if (!result.updates || result.updates.length === 0) {
-            list.innerHTML = '<div class="placeholder-msg"><i data-lucide="circle-check"></i><p>Your system is fully up to date!</p></div>';
-            this.refreshIcons();
+            list.innerHTML = '<div class="placeholder-msg"><img src="icon-checkmark.png" class="placeholder-img"><p>Your system is fully up to date!</p></div>';
             return;
         }
 
@@ -243,32 +213,28 @@ var App = {
         var html = '';
 
         if (pending.length > 0) {
-            html += '<div class="upd-section pend"><i data-lucide="download"></i> Pending (' + pending.length + ')</div>';
+            html += '<div class="upd-section pend"><img src="icon-download.png" style="width:16px;height:16px"> Pending (' + pending.length + ')</div>';
             html += pending.map(function(u) {
                 return '<div class="upd-row pending">' +
                     '<div class="upd-title">' + self.esc(u.title) + '</div>' +
                     '<div class="upd-meta">' +
-                        (u.kbArticle ? '<span class="upd-tag"><i data-lucide="file-text"></i> '+self.esc(u.kbArticle)+'</span>' : '') +
-                        (u.category ? '<span class="upd-tag"><i data-lucide="folder"></i> '+self.esc(u.category)+'</span>' : '') +
-                        (u.size ? '<span class="upd-tag"><i data-lucide="hard-drive"></i> '+self.esc(u.size)+'</span>' : '') +
-                        (u.severity && u.severity !== 'Unspecified' ? '<span class="upd-tag"><i data-lucide="alert-triangle"></i> '+self.esc(u.severity)+'</span>' : '') +
-                    '</div>' +
-                '</div>';
+                        (u.kbArticle ? '<span class="upd-tag"><img src="icon-info.png" style="width:12px;height:12px"> '+self.esc(u.kbArticle)+'</span>' : '') +
+                        (u.category ? '<span class="upd-tag"><img src="icon-package.png" style="width:12px;height:12px"> '+self.esc(u.category)+'</span>' : '') +
+                        (u.size ? '<span class="upd-tag"><img src="icon-harddrive.png" style="width:12px;height:12px"> '+self.esc(u.size)+'</span>' : '') +
+                        (u.severity && u.severity !== 'Unspecified' ? '<span class="upd-tag"><img src="icon-warning.png" style="width:12px;height:12px"> '+self.esc(u.severity)+'</span>' : '') +
+                    '</div></div>';
             }).join('');
         }
 
         if (installed.length > 0) {
-            html += '<div class="upd-section inst"><i data-lucide="check-circle"></i> Recently Installed (' + installed.length + ')</div>';
+            html += '<div class="upd-section inst"><img src="icon-checkmark.png" style="width:16px;height:16px"> Recently Installed (' + installed.length + ')</div>';
             html += installed.map(function(u) {
                 return '<div class="upd-row done"><div class="upd-title">' + self.esc(u.title) + '</div></div>';
             }).join('');
         }
-
         list.innerHTML = html;
-        this.refreshIcons();
     },
 
-    // ---- Step bar ----
     setStep: function(n) {
         for (var i = 1; i <= 3; i++) {
             var el = document.getElementById('step-' + i);
@@ -279,7 +245,6 @@ var App = {
         }
     },
 
-    // ---- Helpers ----
     set: function(id, val) {
         var el = document.getElementById(id);
         if (el) el.textContent = (val != null && val !== '') ? val : '--';