fdciabdul/driver-booster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
472b5b3273e3749104b5e3c7a5264d2067a07bcf
driver-booster/ui/index.html
taqin 472b5b3273 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) <noreply@anthropic.com>
2026-04-12 20:48:27 +07:00

365 lines
19 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Driver Booster Pro</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
</head>
<body>
<!-- Animated background -->
<div class="bg-grid"></div>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<div class="app">
<!-- Sidebar -->
<nav class="sidebar">
<div class="sidebar-header">
<div class="logo">
<div class="logo-icon">
<i data-lucide="shield-check"></i>
</div>
<div class="logo-text-wrap">
<span class="logo-text">Driver Booster</span>
<span class="logo-sub">System Toolkit</span>
</div>
</div>
</div>
<div class="nav-section-label">Main</div>
<ul class="nav-items">
<li class="nav-item active" data-page="dashboard">
<i data-lucide="layout-dashboard"></i>
<span>Dashboard</span>
<div class="nav-indicator"></div>
</li>
<li class="nav-item" data-page="drivers">
<i data-lucide="cpu"></i>
<span>Drivers</span>
<div class="nav-indicator"></div>
</li>
<li class="nav-item" data-page="updates">
<i data-lucide="download-cloud"></i>
<span>Windows Update</span>
<div class="nav-indicator"></div>
</li>
<li class="nav-item" data-page="system">
<i data-lucide="monitor"></i>
<span>System Info</span>
<div class="nav-indicator"></div>
</li>
</ul>
<div class="nav-section-label">Tools</div>
<ul class="nav-items">
<li class="nav-item" data-page="dashboard" onclick="App.scanDrivers()">
<i data-lucide="scan-search"></i>
<span>Quick Scan</span>
</li>
</ul>
<div class="sidebar-footer">
<div class="app-status" id="app-status">
<div class="status-dot online"></div>
<span>System Online</span>
</div>
<div class="version-badge">v1.0.0</div>
</div>
</nav>
<!-- Main Content -->
<main class="content">
<!-- Dashboard Page -->
<div class="page active" id="page-dashboard">
<div class="page-header">
<div>
<h1><i data-lucide="layout-dashboard" class="page-icon"></i> Dashboard</h1>
<p class="subtitle">Monitor your system health at a glance</p>
</div>
<div class="header-actions">
<button class="icon-btn" onclick="App.refreshSysInfo()" title="Refresh">
<i data-lucide="refresh-cw"></i>
</button>
</div>
</div>
<div class="stats-grid">
<div class="stat-card stat-drivers">
<div class="stat-card-bg"></div>
<div class="stat-icon">
<i data-lucide="cpu"></i>
</div>
<div class="stat-info">
<span class="stat-value" id="dash-driver-count">--</span>
<span class="stat-label">Total Drivers</span>
</div>
<div class="stat-trend">
<i data-lucide="layers"></i>
</div>
</div>
<div class="stat-card stat-outdated">
<div class="stat-card-bg"></div>
<div class="stat-icon">
<i data-lucide="alert-triangle"></i>
</div>
<div class="stat-info">
<span class="stat-value" id="dash-outdated-count">--</span>
<span class="stat-label">Outdated</span>
</div>
<div class="stat-trend">
<i data-lucide="triangle-alert"></i>
</div>
</div>
<div class="stat-card stat-updates">
<div class="stat-card-bg"></div>
<div class="stat-icon">
<i data-lucide="download-cloud"></i>
</div>
<div class="stat-info">
<span class="stat-value" id="dash-update-count">--</span>
<span class="stat-label">Pending Updates</span>
</div>
<div class="stat-trend">
<i data-lucide="cloud-download"></i>
</div>
</div>
<div class="stat-card stat-ram">
<div class="stat-card-bg"></div>
<div class="stat-icon">
<i data-lucide="memory-stick"></i>
</div>
<div class="stat-info">
<span class="stat-value" id="dash-ram-percent">--</span>
<span class="stat-label">RAM Usage</span>
</div>
<div class="stat-trend">
<i data-lucide="activity"></i>
</div>
</div>
</div>
<div class="dashboard-panels">
<div class="panel glass-panel">
<div class="panel-header">
<div class="panel-title">
<i data-lucide="zap"></i>
<h3>Quick Actions</h3>
</div>
</div>
<div class="quick-actions">
<button class="action-btn primary" onclick="App.scanDrivers()">
<div class="action-btn-icon"><i data-lucide="scan-search"></i></div>
<div class="action-btn-text">
<span class="action-btn-title">Scan Drivers</span>
<span class="action-btn-desc">Detect outdated & missing drivers</span>
</div>
<i data-lucide="chevron-right" class="action-arrow"></i>
</button>
<button class="action-btn blue" onclick="App.checkUpdates()">
<div class="action-btn-icon"><i data-lucide="cloud-download"></i></div>
<div class="action-btn-text">
<span class="action-btn-title">Check Updates</span>
<span class="action-btn-desc">Search for Windows updates</span>
</div>
<i data-lucide="chevron-right" class="action-arrow"></i>
</button>
<button class="action-btn green" onclick="App.refreshSysInfo()">
<div class="action-btn-icon"><i data-lucide="monitor-check"></i></div>
<div class="action-btn-text">
<span class="action-btn-title">System Health</span>
<span class="action-btn-desc">Refresh system information</span>
</div>
<i data-lucide="chevron-right" class="action-arrow"></i>
</button>
</div>
</div>
<div class="panel glass-panel">
<div class="panel-header">
<div class="panel-title">
<i data-lucide="gauge"></i>
<h3>System Resources</h3>
</div>
</div>
<div class="resource-bars">
<div class="resource-item">
<div class="resource-header">
<div class="resource-label-group">
<i data-lucide="memory-stick" class="resource-icon"></i>
<span class="resource-name">Memory (RAM)</span>
</div>
<span class="resource-value" id="dash-ram-detail">-- / --</span>
</div>
<div class="progress-bar">
<div class="progress-fill ram-fill" id="dash-ram-bar" style="width: 0%">
<div class="progress-shine"></div>
</div>
</div>
</div>
<div class="resource-item">
<div class="resource-header">
<div class="resource-label-group">
<i data-lucide="hard-drive" class="resource-icon"></i>
<span class="resource-name">Storage (C:)</span>
</div>
<span class="resource-value" id="dash-disk-detail">-- / --</span>
</div>
<div class="progress-bar">
<div class="progress-fill disk-fill" id="dash-disk-bar" style="width: 0%">
<div class="progress-shine"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Drivers Page -->
<div class="page" id="page-drivers">
<div class="page-header">
<div>
<h1><i data-lucide="cpu" class="page-icon"></i> Driver Manager</h1>
<p class="subtitle">Scan and manage your system drivers</p>
</div>
<div class="header-actions">
<button class="action-btn primary compact" onclick="App.scanDrivers()">
<i data-lucide="scan-search"></i>
<span>Scan Now</span>
</button>
</div>
</div>
<div class="driver-summary glass-panel" id="driver-summary" style="display:none">
<div class="summary-item">
<i data-lucide="layers" class="sum-icon"></i>
<strong id="drv-total">0</strong> <span>Total</span>
</div>
<div class="summary-item warning">
<i data-lucide="alert-triangle" class="sum-icon"></i>
<strong id="drv-outdated">0</strong> <span>Outdated</span>
</div>
<div class="summary-item error">
<i data-lucide="alert-circle" class="sum-icon"></i>
<strong id="drv-errors">0</strong> <span>Errors</span>
</div>
<div class="summary-item muted">
<i data-lucide="timer" class="sum-icon"></i>
<span id="drv-time">--</span>
</div>
</div>
<div class="filter-bar" id="driver-filters" style="display:none">
<button class="filter-btn active" data-filter="all"><i data-lucide="list"></i> All</button>
<button class="filter-btn" data-filter="outdated"><i data-lucide="alert-triangle"></i> Outdated</button>
<button class="filter-btn" data-filter="error"><i data-lucide="x-circle"></i> Errors</button>
<button class="filter-btn" data-filter="signed"><i data-lucide="shield-check"></i> Signed</button>
</div>
<div id="driver-list" class="driver-list">
<div class="empty-state">
<div class="empty-icon"><i data-lucide="cpu"></i></div>
<h3>No Scan Results</h3>
<p>Click <strong>Scan Now</strong> to detect installed drivers</p>
</div>
</div>
</div>
<!-- Updates Page -->
<div class="page" id="page-updates">
<div class="page-header">
<div>
<h1><i data-lucide="download-cloud" class="page-icon"></i> Windows Update</h1>
<p class="subtitle">Keep your system up to date</p>
</div>
<div class="header-actions">
<button class="action-btn primary compact" onclick="App.checkUpdates()">
<i data-lucide="refresh-cw"></i>
<span>Check Now</span>
</button>
</div>
</div>
<div id="update-list" class="update-list">
<div class="empty-state">
<div class="empty-icon"><i data-lucide="cloud-download"></i></div>
<h3>No Updates Checked</h3>
<p>Click <strong>Check Now</strong> to search for Windows updates</p>
</div>
</div>
</div>
<!-- System Info Page -->
<div class="page" id="page-system">
<div class="page-header">
<div>
<h1><i data-lucide="monitor" class="page-icon"></i> System Information</h1>
<p class="subtitle">Detailed hardware and software overview</p>
</div>
<div class="header-actions">
<button class="action-btn primary compact" onclick="App.refreshSysInfo()">
<i data-lucide="refresh-cw"></i>
<span>Refresh</span>
</button>
</div>
</div>
<div class="sysinfo-grid" id="sysinfo-grid">
<div class="info-card glass-panel">
<div class="info-card-header">
<i data-lucide="laptop"></i>
<h4>Computer</h4>
</div>
<div class="info-row"><span class="info-key"><i data-lucide="tag"></i> Name</span><span class="info-val" id="sys-name">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="app-window"></i> OS</span><span class="info-val" id="sys-os">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="hash"></i> Version</span><span class="info-val" id="sys-version">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="wrench"></i> Build</span><span class="info-val" id="sys-build">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="boxes"></i> Architecture</span><span class="info-val" id="sys-arch">--</span></div>
</div>
<div class="info-card glass-panel">
<div class="info-card-header">
<i data-lucide="cpu"></i>
<h4>Processor</h4>
</div>
<div class="info-row"><span class="info-key"><i data-lucide="microchip"></i> CPU</span><span class="info-val" id="sys-cpu">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="layers"></i> Cores</span><span class="info-val" id="sys-cores">--</span></div>
</div>
<div class="info-card glass-panel">
<div class="info-card-header">
<i data-lucide="memory-stick"></i>
<h4>Memory</h4>
</div>
<div class="info-row"><span class="info-key"><i data-lucide="database"></i> Total</span><span class="info-val" id="sys-ram-total">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="flame"></i> Used</span><span class="info-val" id="sys-ram-used">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="leaf"></i> Free</span><span class="info-val" id="sys-ram-free">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="percent"></i> Usage</span><span class="info-val" id="sys-ram-pct">--</span></div>
</div>
<div class="info-card glass-panel">
<div class="info-card-header">
<i data-lucide="hard-drive"></i>
<h4>Storage (C:)</h4>
</div>
<div class="info-row"><span class="info-key"><i data-lucide="database"></i> Total</span><span class="info-val" id="sys-disk-total">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="flame"></i> Used</span><span class="info-val" id="sys-disk-used">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="leaf"></i> Free</span><span class="info-val" id="sys-disk-free">--</span></div>
<div class="info-row"><span class="info-key"><i data-lucide="percent"></i> Usage</span><span class="info-val" id="sys-disk-pct">--</span></div>
</div>
</div>
</div>
</main>
</div>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loading-overlay" style="display:none">
<div class="loading-card">
<div class="loading-spinner">
<div class="spinner-ring"></div>
<i data-lucide="shield-check" class="spinner-icon"></i>
</div>
<p class="loading-title" id="loading-text">Scanning...</p>
<p class="loading-sub">Please wait while we analyze your system</p>
<div class="loading-dots"><span></span><span></span><span></span></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink