fdciabdul/driver-booster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Use PNG icon assets + Windows 11 WinUI3 native design

Browse Source 
- 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>
This commit is contained in:
taqin
2026-04-12 21:06:53 +07:00
parent 83d7a24d1a
commit 4aa4310d7d
30 changed files with 341 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
ui/index.html
View File

@@ -5,23 +5,20 @@
<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>
<div class="app">
<!-- Title Bar -->
<div class="titlebar">
<div class="titlebar-left">
<div class="app-logo">
<i data-lucide="shield-check"></i>
</div>
<img src="icon-shield.png" class="app-logo-img" alt="">
<div class="app-title">
<span class="app-name">DRIVER BOOSTER</span>
<span class="app-edition">PRO</span>
</div>
</div>
<div class="titlebar-right">
<div class="sys-status" id="sys-status">
<div class="sys-status">
<div class="status-led"></div>
<span>System Protected</span>
</div>
@@ -31,27 +28,19 @@
<!-- Toolbar Tabs -->
<div class="toolbar">
<button class="toolbar-tab active" data-tab="scan">
<div class="tab-icon-wrap scan-icon-wrap">
<i data-lucide="scan-search"></i>
</div>
<img src="icon-scan.png" class="tab-img" alt="">
<span>Scan</span>
</button>
<button class="toolbar-tab" data-tab="drivers">
<div class="tab-icon-wrap drivers-icon-wrap">
<i data-lucide="cpu"></i>
</div>
<img src="icon-cpu.png" class="tab-img" alt="">
<span>Drivers</span>
</button>
<button class="toolbar-tab" data-tab="updates">
<div class="tab-icon-wrap updates-icon-wrap">
<i data-lucide="download-cloud"></i>
</div>
<img src="icon-download.png" class="tab-img" alt="">
<span>Download</span>
</button>
<button class="toolbar-tab" data-tab="system">
<div class="tab-icon-wrap settings-icon-wrap">
<i data-lucide="monitor-cog"></i>
</div>
<img src="icon-settings.png" class="tab-img" alt="">
<span>System</span>
</button>
</div>
@@ -63,72 +52,35 @@
<div class="tab-page active" id="tab-scan">
<div class="scan-hero">
<div class="scan-illustration">
<!-- Computer SVG Illustration -->
<svg viewBox="0 0 200 180" class="computer-svg">
<defs>
<linearGradient id="screen-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1e40af"/>
<stop offset="100%" stop-color="#3b82f6"/>
</linearGradient>
<linearGradient id="body-grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e2e8f0"/>
<stop offset="100%" stop-color="#cbd5e1"/>
</linearGradient>
<linearGradient id="shield-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#10b981"/>
<stop offset="100%" stop-color="#059669"/>
</linearGradient>
</defs>
<!-- Monitor -->
<rect x="30" y="10" width="140" height="100" rx="8" fill="url(#body-grad)" stroke="#94a3b8" stroke-width="2"/>
<rect x="38" y="18" width="124" height="76" rx="4" fill="url(#screen-grad)"/>
<!-- Screen content lines -->
<rect x="50" y="34" width="60" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
<rect x="50" y="44" width="80" height="4" rx="2" fill="rgba(255,255,255,0.2)"/>
<rect x="50" y="54" width="45" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
<rect x="50" y="64" width="70" height="4" rx="2" fill="rgba(255,255,255,0.2)"/>
<rect x="50" y="74" width="55" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
<!-- Check marks -->
<circle cx="46" cy="36" r="3" fill="#10b981"/>
<circle cx="46" cy="46" r="3" fill="#10b981"/>
<circle cx="46" cy="56" r="3" fill="#10b981"/>
<circle cx="46" cy="66" r="3" fill="#f59e0b"/>
<circle cx="46" cy="76" r="3" fill="#ef4444"/>
<!-- Stand -->
<rect x="85" y="110" width="30" height="12" rx="2" fill="#94a3b8"/>
<rect x="70" y="120" width="60" height="6" rx="3" fill="#94a3b8"/>
<!-- Shield overlay -->
<path d="M145 55 L145 35 C145 35 155 30 165 35 C175 30 185 35 185 35 L185 55 C185 70 165 82 165 82 C165 82 145 70 145 55Z" fill="url(#shield-grad)" opacity="0.9"/>
<polyline points="157,55 163,62 175,48" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<img src="icon-monitor.png" class="hero-img" alt="">
<img src="icon-shield.png" class="hero-shield" alt="">
</div>
<div class="scan-info">
<h2>Scan Your System</h2>
<p>Detect outdated, missing, and faulty drivers. Keep your PC running at peak performance.</p>
<div class="scan-stats" id="scan-stats">
<div class="scan-stats">
<div class="mini-stat">
<i data-lucide="cpu"></i>
<img src="icon-cpu.png" class="mini-icon" alt="">
<span id="scan-stat-total">--</span>
<label>Drivers</label>
</div>
<div class="mini-stat warn">
<i data-lucide="alert-triangle"></i>
<img src="icon-warning.png" class="mini-icon" alt="">
<span id="scan-stat-outdated">--</span>
<label>Outdated</label>
</div>
<div class="mini-stat danger">
<i data-lucide="x-circle"></i>
<img src="icon-error.png" class="mini-icon" alt="">
<span id="scan-stat-errors">--</span>
<label>Errors</label>
</div>
</div>
<button class="big-scan-btn" id="btn-scan" onclick="App.scanDrivers()">
<i data-lucide="scan-search"></i>
<button class="big-scan-btn" onclick="App.scanDrivers()">
<img src="icon-scan.png" class="btn-icon" alt="">
<span>SCAN NOW</span>
</button>
</div>
</div>
<!-- Step Indicator -->
<div class="step-bar">
<div class="step active" id="step-1">
@@ -152,7 +104,7 @@
<div class="tab-page" id="tab-drivers">
<div class="tab-header">
<div class="tab-header-left">
<h2><i data-lucide="cpu"></i> Installed Drivers</h2>
<h2><img src="icon-cpu.png" class="h2-icon" alt=""> Installed Drivers</h2>
<div class="result-count" id="driver-result-count" style="display:none">
<span id="drv-total-2">0</span> found &bull;
<span class="warn-text" id="drv-outdated-2">0</span> outdated &bull;
@@ -160,25 +112,25 @@
</div>
</div>
<button class="header-btn" onclick="App.scanDrivers()">
<i data-lucide="refresh-cw"></i> Rescan
<img src="icon-refresh.png" class="hdr-icon" alt=""> Rescan
</button>
</div>
<div class="filter-strip" id="driver-filter-strip" style="display:none">
<button class="pill active" data-filter="all">All</button>
<button class="pill" data-filter="outdated"><i data-lucide="alert-triangle"></i> Outdated</button>
<button class="pill" data-filter="error"><i data-lucide="x-circle"></i> Errors</button>
<button class="pill" data-filter="signed"><i data-lucide="shield-check"></i> Signed</button>
<button class="pill" data-filter="outdated"><img src="icon-warning.png" class="pill-icon" alt=""> Outdated</button>
<button class="pill" data-filter="error"><img src="icon-error.png" class="pill-icon" alt=""> Errors</button>
<button class="pill" data-filter="signed"><img src="icon-shield.png" class="pill-icon" alt=""> Signed</button>
</div>
<div class="driver-scroll" id="driver-list">
<div class="placeholder-msg">
<i data-lucide="scan-search"></i>
<img src="icon-scan.png" class="placeholder-img" alt="">
<p>Click <strong>Scan</strong> to detect your drivers</p>
</div>
</div>
<!-- Update All CTA -->
<div class="cta-bar" id="cta-update-all" style="display:none">
<button class="cta-btn" onclick="App.scanDrivers()">
<i data-lucide="download"></i>
<img src="icon-install.png" class="cta-icon" alt="">
<span>Update All Drivers</span>
<span class="cta-count" id="cta-count">0</span>
</button>
@@ -189,15 +141,15 @@
<div class="tab-page" id="tab-updates">
<div class="tab-header">
<div class="tab-header-left">
<h2><i data-lucide="download-cloud"></i> Windows Update</h2>
<h2><img src="icon-cloud.png" class="h2-icon" alt=""> Windows Update</h2>
</div>
<button class="header-btn" onclick="App.checkUpdates()">
<i data-lucide="refresh-cw"></i> Check Now
<img src="icon-refresh.png" class="hdr-icon" alt=""> Check Now
</button>
</div>
<div class="driver-scroll" id="update-list">
<div class="placeholder-msg">
<i data-lucide="cloud-download"></i>
<img src="icon-cloud.png" class="placeholder-img" alt="">
<p>Click <strong>Check Now</strong> to search for updates</p>
</div>
</div>
@@ -207,15 +159,15 @@
<div class="tab-page" id="tab-system">
<div class="tab-header">
<div class="tab-header-left">
<h2><i data-lucide="monitor-cog"></i> System Information</h2>
<h2><img src="icon-settings.png" class="h2-icon" alt=""> System Information</h2>
</div>
<button class="header-btn" onclick="App.refreshSysInfo()">
<i data-lucide="refresh-cw"></i> Refresh
<img src="icon-refresh.png" class="hdr-icon" alt=""> Refresh
</button>
</div>
<div class="sys-grid">
<div class="sys-card">
<div class="sys-card-head"><i data-lucide="laptop"></i> Computer</div>
<div class="sys-card-head"><img src="icon-laptop.png" class="sys-head-icon" alt=""> Computer</div>
<div class="sys-row"><span>Name</span><span id="sys-name">--</span></div>
<div class="sys-row"><span>OS</span><span id="sys-os">--</span></div>
<div class="sys-row"><span>Version</span><span id="sys-version">--</span></div>
@@ -223,12 +175,12 @@
<div class="sys-row"><span>Arch</span><span id="sys-arch">--</span></div>
</div>
<div class="sys-card">
<div class="sys-card-head"><i data-lucide="cpu"></i> Processor</div>
<div class="sys-card-head"><img src="icon-cpu.png" class="sys-head-icon" alt=""> Processor</div>
<div class="sys-row"><span>CPU</span><span id="sys-cpu">--</span></div>
<div class="sys-row"><span>Cores</span><span id="sys-cores">--</span></div>
</div>
<div class="sys-card">
<div class="sys-card-head"><i data-lucide="memory-stick"></i> Memory</div>
<div class="sys-card-head"><img src="icon-ram.png" class="sys-head-icon" alt=""> Memory</div>
<div class="sys-row"><span>Total</span><span id="sys-ram-total">--</span></div>
<div class="sys-row"><span>Used</span><span id="sys-ram-used">--</span></div>
<div class="sys-row"><span>Free</span><span id="sys-ram-free">--</span></div>
@@ -238,7 +190,7 @@
</div>
</div>
<div class="sys-card">
<div class="sys-card-head"><i data-lucide="hard-drive"></i> Storage (C:)</div>
<div class="sys-card-head"><img src="icon-harddrive.png" class="sys-head-icon" alt=""> Storage (C:)</div>
<div class="sys-row"><span>Total</span><span id="sys-disk-total">--</span></div>
<div class="sys-row"><span>Used</span><span id="sys-disk-used">--</span></div>
<div class="sys-row"><span>Free</span><span id="sys-disk-free">--</span></div>
@@ -253,10 +205,10 @@
<!-- Footer -->
<div class="app-footer">
<span>Driver Booster Pro v1.0.0</span>
<span>Driver Booster Pro v1.0.0 &mdash; Made by <a href="https://imtaqin.id" class="credit-link" target="_blank">IMTAQIN</a></span>
<span class="footer-right">
<button class="footer-btn" onclick="App.refreshSysInfo()"><i data-lucide="info"></i> About</button>
<button class="footer-btn"><i data-lucide="life-buoy"></i> Help</button>
<button class="footer-btn" onclick="App.refreshSysInfo()"><img src="icon-info.png" class="footer-icon" alt=""> About</button>
<button class="footer-btn"><img src="icon-help.png" class="footer-icon" alt=""> Help</button>
</span>
</div>
</div>
@@ -266,7 +218,7 @@
<div class="loading-card">
<div class="loading-spinner">
<div class="spinner-ring"></div>
<i data-lucide="shield-check" class="spinner-icon"></i>
<img src="icon-shield.png" class="spinner-img" alt="">
</div>
<p class="loading-title" id="loading-text">Scanning...</p>
<div class="loading-dots"><span></span><span></span><span></span></div>