From 472b5b3273e3749104b5e3c7a5264d2067a07bcf Mon Sep 17 00:00:00 2001 From: taqin Date: Sun, 12 Apr 2026 20:48:27 +0700 Subject: [PATCH] Redesign UI with Lucide icons and professional glassmorphism theme - Replace all inline SVGs and emojis with Lucide icon library (CDN) - Add animated grid background with floating glow orbs - Glassmorphism panels with backdrop-filter blur - Animated progress bars with shine effect - Professional loading overlay with spinner card - Sidebar with section labels, status indicator, and active indicator bar - Action buttons with icon containers, descriptions, and hover arrows - Driver cards use contextual Lucide icons (monitor, wifi, cpu, etc) - Update cards with tagged metadata (KB, category, size, severity) - System info rows with per-field icons - Smooth page transitions and hover micro-animations Co-Authored-By: Claude Opus 4.6 (1M context) --- ui/app.js | 291 ++++++++++------ ui/index.html | 313 ++++++++++++------ ui/style.css | 900 ++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 1127 insertions(+), 377 deletions(-) diff --git a/ui/app.js b/ui/app.js index 4dc4c24..e24a7dc 100644 --- a/ui/app.js +++ b/ui/app.js @@ -1,3 +1,7 @@ +/* ============================================================ + Driver Booster Pro - Application Logic + ============================================================ */ + const App = { state: { sysInfo: null, @@ -9,33 +13,45 @@ const App = { this.setupNavigation(); this.setupFilters(); this.refreshSysInfo(); + // Re-render Lucide icons after DOM mutations + this.refreshIcons(); }, + refreshIcons() { + if (window.lucide) { + lucide.createIcons(); + } + }, + + // ---- Navigation ---- setupNavigation() { - document.querySelectorAll('.nav-item').forEach(item => { - item.addEventListener('click', () => { - const page = item.dataset.page; - document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active')); + document.querySelectorAll('.nav-item[data-page]').forEach(function(item) { + item.addEventListener('click', function() { + var page = item.dataset.page; + document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); }); item.classList.add('active'); - document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); - document.getElementById('page-' + page).classList.add('active'); + document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); }); + var target = document.getElementById('page-' + page); + if (target) target.classList.add('active'); }); }); }, + // ---- Filters ---- setupFilters() { - document.querySelectorAll('.filter-btn').forEach(btn => { - btn.addEventListener('click', () => { - document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); + var self = this; + document.querySelectorAll('.filter-btn').forEach(function(btn) { + btn.addEventListener('click', function() { + document.querySelectorAll('.filter-btn').forEach(function(b) { b.classList.remove('active'); }); btn.classList.add('active'); - this.filterDrivers(btn.dataset.filter); + self.filterDrivers(btn.dataset.filter); }); }); }, filterDrivers(filter) { - document.querySelectorAll('.driver-card').forEach(card => { - const show = filter === 'all' || + document.querySelectorAll('.driver-card').forEach(function(card) { + var show = filter === 'all' || (filter === 'outdated' && card.classList.contains('outdated')) || (filter === 'error' && card.classList.contains('error')) || (filter === 'signed' && card.dataset.signed === 'true'); @@ -43,21 +59,23 @@ const App = { }); }, + // ---- Loading ---- showLoading(text) { document.getElementById('loading-text').textContent = text; document.getElementById('loading-overlay').style.display = 'flex'; + this.refreshIcons(); }, hideLoading() { document.getElementById('loading-overlay').style.display = 'none'; }, - // System Info + // ---- System Info ---- async refreshSysInfo() { this.showLoading('Collecting system information...'); try { - const res = await fetch('/api/sysinfo'); - const info = await res.json(); + var res = await fetch('/api/sysinfo'); + var info = await res.json(); this.state.sysInfo = info; this.renderSysInfo(info); this.updateDashboardResources(info); @@ -68,44 +86,51 @@ const App = { }, renderSysInfo(info) { - document.getElementById('sys-name').textContent = info.computerName || '--'; - document.getElementById('sys-os').textContent = info.osName || '--'; - document.getElementById('sys-version').textContent = info.osVersion || '--'; - document.getElementById('sys-build').textContent = info.osBuild || '--'; - document.getElementById('sys-arch').textContent = info.architecture || '--'; - document.getElementById('sys-cpu').textContent = info.cpuName || '--'; - document.getElementById('sys-cores').textContent = info.cpuCores || '--'; - document.getElementById('sys-ram-total').textContent = info.totalRam || '--'; - document.getElementById('sys-ram-used').textContent = info.usedRam || '--'; - document.getElementById('sys-ram-free').textContent = info.freeRam || '--'; - document.getElementById('sys-ram-pct').textContent = (info.ramPercent || 0) + '%'; - document.getElementById('sys-disk-total').textContent = info.diskTotal || '--'; - document.getElementById('sys-disk-used').textContent = info.diskUsed || '--'; - document.getElementById('sys-disk-free').textContent = info.diskFree || '--'; - document.getElementById('sys-disk-pct').textContent = (info.diskPercent || 0) + '%'; + this.setText('sys-name', info.computerName); + this.setText('sys-os', info.osName); + this.setText('sys-version', info.osVersion); + this.setText('sys-build', info.osBuild); + this.setText('sys-arch', info.architecture); + this.setText('sys-cpu', info.cpuName); + this.setText('sys-cores', info.cpuCores); + this.setText('sys-ram-total', info.totalRam); + this.setText('sys-ram-used', info.usedRam); + this.setText('sys-ram-free', info.freeRam); + this.setText('sys-ram-pct', (info.ramPercent || 0) + '%'); + this.setText('sys-disk-total', info.diskTotal); + this.setText('sys-disk-used', info.diskUsed); + this.setText('sys-disk-free', info.diskFree); + this.setText('sys-disk-pct', (info.diskPercent || 0) + '%'); }, updateDashboardResources(info) { - document.getElementById('dash-ram-percent').textContent = (info.ramPercent || 0) + '%'; - document.getElementById('dash-ram-detail').textContent = (info.usedRam || '--') + ' / ' + (info.totalRam || '--'); + this.setText('dash-ram-percent', (info.ramPercent || 0) + '%'); + this.setText('dash-ram-detail', (info.usedRam || '--') + ' / ' + (info.totalRam || '--')); document.getElementById('dash-ram-bar').style.width = (info.ramPercent || 0) + '%'; - document.getElementById('dash-disk-detail').textContent = (info.diskUsed || '--') + ' / ' + (info.diskTotal || '--'); + this.setText('dash-disk-detail', (info.diskUsed || '--') + ' / ' + (info.diskTotal || '--')); document.getElementById('dash-disk-bar').style.width = (info.diskPercent || 0) + '%'; + // Warn color for high usage + var ramBar = document.getElementById('dash-ram-bar'); + var diskBar = document.getElementById('dash-disk-bar'); if (info.ramPercent > 80) { - document.getElementById('dash-ram-bar').style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)'; + ramBar.style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)'; + } else { + ramBar.style.background = ''; } if (info.diskPercent > 85) { - document.getElementById('dash-disk-bar').style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)'; + diskBar.style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)'; + } else { + diskBar.style.background = ''; } }, - // Drivers + // ---- Drivers ---- async scanDrivers() { this.showLoading('Scanning drivers... This may take a moment.'); try { - const res = await fetch('/api/drivers/scan'); - const result = await res.json(); + var res = await fetch('/api/drivers/scan'); + var result = await res.json(); this.state.drivers = result; this.renderDrivers(result); this.updateDashboardDrivers(result); @@ -118,77 +143,107 @@ const App = { renderDrivers(result) { document.getElementById('driver-summary').style.display = 'flex'; document.getElementById('driver-filters').style.display = 'flex'; - document.getElementById('drv-total').textContent = result.totalCount; - document.getElementById('drv-outdated').textContent = result.outdatedCount; - document.getElementById('drv-errors').textContent = result.errorCount; - document.getElementById('drv-time').textContent = result.scanTime; + this.setText('drv-total', result.totalCount); + this.setText('drv-outdated', result.outdatedCount); + this.setText('drv-errors', result.errorCount); + this.setText('drv-time', result.scanTime); - const list = document.getElementById('driver-list'); + var list = document.getElementById('driver-list'); if (!result.drivers || result.drivers.length === 0) { - list.innerHTML = '

No drivers found.

'; + list.innerHTML = + '
' + + '
' + + '

No Drivers Found

' + + '

No driver information was returned.

' + + '
'; + this.refreshIcons(); return; } - list.innerHTML = result.drivers.map(d => { - const classes = ['driver-card']; + var self = this; + list.innerHTML = result.drivers.map(function(d) { + var classes = ['driver-card']; if (d.needsUpdate) classes.push('outdated'); if (d.status === 'Error' || d.status === 'Degraded') classes.push('error'); - const icon = this.getClassIcon(d.deviceClass); - const badges = []; - if (d.isSigned) badges.push('Signed'); - else badges.push('Unsigned'); - if (d.needsUpdate) badges.push('Outdated'); - else badges.push('OK'); + var iconName = self.getClassIconName(d.deviceClass); + + var badges = ''; + if (d.isSigned) { + badges += ' Signed'; + } else { + badges += ' Unsigned'; + } + if (d.needsUpdate) { + badges += ' Outdated'; + } else { + badges += ' OK'; + } return '
' + - '
' + icon + '
' + + '
' + '
' + - '
' + this.esc(d.deviceName) + '
' + - '
' + this.esc(d.manufacturer || 'Unknown') + ' • v' + this.esc(d.driverVersion || '?') + ' • ' + this.esc(d.driverDate) + '
' + + '
' + self.esc(d.deviceName) + '
' + + '
' + + self.esc(d.manufacturer || 'Unknown') + + ' · v' + self.esc(d.driverVersion || '?') + + ' · ' + self.esc(d.driverDate) + + '
' + '
' + - '
' + badges.join('') + '
' + + '
' + badges + '
' + '
'; }).join(''); + + this.refreshIcons(); }, updateDashboardDrivers(result) { - document.getElementById('dash-driver-count').textContent = result.totalCount; - document.getElementById('dash-outdated-count').textContent = result.outdatedCount; + this.setText('dash-driver-count', result.totalCount); + this.setText('dash-outdated-count', result.outdatedCount); }, - getClassIcon(cls) { - const icons = { - 'DISPLAY': '\uD83D\uDDA5', - 'MEDIA': '\uD83D\uDD0A', - 'NET': '\uD83C\uDF10', - 'USB': '\uD83D\uDD0C', - 'HIDCLASS': '\uD83D\uDDB1', - 'KEYBOARD': '\u2328', - 'DISKDRIVE': '\uD83D\uDCBE', - 'PROCESSOR': '\u26A1', - 'SYSTEM': '\u2699', - 'BLUETOOTH': '\uD83D\uDCE1', - 'CAMERA': '\uD83D\uDCF7', - 'PRINTER': '\uD83D\uDDA8', - }; - if (!cls) return '\uD83D\uDCE6'; + getClassIconName(cls) { + if (!cls) return 'package'; var upper = cls.toUpperCase(); - for (var key in icons) { - if (upper.indexOf(key) !== -1) return icons[key]; + var map = { + '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', + 'BIOMETRIC': 'fingerprint', + 'FIRMWARE': 'circuit-board', + 'SECURITY': 'shield', + 'SENSOR': 'thermometer', + }; + for (var key in map) { + if (upper.indexOf(key) !== -1) return map[key]; } - return '\uD83D\uDCE6'; + return 'package'; }, - // Updates + // ---- Updates ---- async checkUpdates() { this.showLoading('Checking for Windows updates...'); try { - const res = await fetch('/api/updates/check'); - const result = await res.json(); + var res = await fetch('/api/updates/check'); + var result = await res.json(); this.state.updates = result; this.renderUpdates(result); - document.getElementById('dash-update-count').textContent = result.pendingCount; + this.setText('dash-update-count', result.pendingCount); } catch (e) { console.error('Failed to check updates:', e); } @@ -196,57 +251,79 @@ const App = { }, renderUpdates(result) { - const list = document.getElementById('update-list'); + var list = document.getElementById('update-list'); if (result.error) { - list.innerHTML = '

' + this.esc(result.error) + '

'; + list.innerHTML = + '
' + + '
' + + '

Error

' + + '

' + this.esc(result.error) + '

' + + '
'; + this.refreshIcons(); return; } if (!result.updates || result.updates.length === 0) { - list.innerHTML = '

Your system is up to date!

'; + list.innerHTML = + '
' + + '
' + + '

All Up to Date

' + + '

Your system is fully updated.

' + + '
'; + this.refreshIcons(); return; } - const pending = result.updates.filter(u => !u.isInstalled); - const installed = result.updates.filter(u => u.isInstalled); - - let html = ''; + var pending = result.updates.filter(function(u) { return !u.isInstalled; }); + var installed = result.updates.filter(function(u) { return u.isInstalled; }); + var self = this; + var html = ''; if (pending.length > 0) { - html += '

Pending Updates (' + pending.length + ')

'; - html += pending.map(u => - '
' + - '
' + this.esc(u.title) + '
' + + html += '
Pending Updates (' + pending.length + ')
'; + html += pending.map(function(u) { + return '
' + + '
' + self.esc(u.title) + '
' + '
' + - (u.kbArticle ? '' + this.esc(u.kbArticle) + '' : '') + - (u.category ? '' + this.esc(u.category) + '' : '') + - (u.size ? '' + this.esc(u.size) + '' : '') + - (u.severity && u.severity !== 'Unspecified' ? '' + this.esc(u.severity) + '' : '') + - (u.isMandatory ? 'Mandatory' : '') + + (u.kbArticle ? ' ' + self.esc(u.kbArticle) + '' : '') + + (u.category ? ' ' + self.esc(u.category) + '' : '') + + (u.size ? ' ' + self.esc(u.size) + '' : '') + + (u.severity && u.severity !== 'Unspecified' ? ' ' + self.esc(u.severity) + '' : '') + + (u.isMandatory ? ' Mandatory' : '') + '
' + - '
' - ).join(''); + '
'; + }).join(''); } if (installed.length > 0) { - html += '

Recently Installed (' + installed.length + ')

'; - html += installed.map(u => - '
' + - '
' + this.esc(u.title) + '
' + - '
' - ).join(''); + html += '
Recently Installed (' + installed.length + ')
'; + html += installed.map(function(u) { + return '
' + + '
' + self.esc(u.title) + '
' + + '
'; + }).join(''); } list.innerHTML = html; + this.refreshIcons(); + }, + + // ---- Utility ---- + setText(id, value) { + var el = document.getElementById(id); + if (el) el.textContent = (value != null && value !== '') ? value : '--'; }, esc(str) { if (!str) return ''; - const div = document.createElement('div'); + var div = document.createElement('div'); div.textContent = str; return div.innerHTML; }, }; -document.addEventListener('DOMContentLoaded', function() { App.init(); }); +// Boot +document.addEventListener('DOMContentLoaded', function() { + App.init(); +}); diff --git a/ui/index.html b/ui/index.html index b952866..43dade2 100644 --- a/ui/index.html +++ b/ui/index.html @@ -5,40 +5,66 @@ Driver Booster Pro + + +
+
+
+
@@ -48,89 +74,142 @@
-

Dashboard

-

System health overview

+
+

Dashboard

+

Monitor your system health at a glance

+
+
+ +
+
-
-
- +
+
+
+
-- Total Drivers
+
+ +
-
-
- +
+
+
+
-- - Outdated Drivers + Outdated +
+
+
-
-
- +
+
+
+
-- Pending Updates
+
+ +
-
-
- +
+
+
+
-- RAM Usage
+
+ +
-
+
-

Quick Actions

+
+ +

Quick Actions

+
- -
-
+ +
-

System Resources

+
+ +

System Resources

+
-
- RAM - -- / -- +
+
+ + Memory (RAM) +
+ -- / --
-
+
+
+
-
- Disk (C:) - -- / -- +
+
+ + Storage (C:) +
+ -- / --
-
+
+
+
@@ -141,29 +220,45 @@
-

Driver Manager

-
-
-