70c46277c4
- Generate app icon via AI image gen (shield with circuit board + arrow) - Convert to .ico with 256/128/64/48/32/16px sizes via ImageMagick - Create winres config with IMTAQIN company info, version 1.0.0 - Embed icon + manifest + version info into exe via go-winres - Add 48px icon-app.png for UI title bar - exe now shows custom icon in taskbar, explorer, and title bar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
231 lines
12 KiB
HTML
231 lines
12 KiB
HTML
<!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">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<!-- Title Bar -->
|
|
<div class="titlebar">
|
|
<div class="titlebar-left">
|
|
<img src="icon-app.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">
|
|
<div class="status-led"></div>
|
|
<span>System Protected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toolbar Tabs -->
|
|
<div class="toolbar">
|
|
<button class="toolbar-tab active" data-tab="scan">
|
|
<img src="icon-scan.png" class="tab-img" alt="">
|
|
<span>Scan</span>
|
|
</button>
|
|
<button class="toolbar-tab" data-tab="drivers">
|
|
<img src="icon-cpu.png" class="tab-img" alt="">
|
|
<span>Drivers</span>
|
|
</button>
|
|
<button class="toolbar-tab" data-tab="updates">
|
|
<img src="icon-download.png" class="tab-img" alt="">
|
|
<span>Download</span>
|
|
</button>
|
|
<button class="toolbar-tab" data-tab="system">
|
|
<img src="icon-settings.png" class="tab-img" alt="">
|
|
<span>System</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content Area -->
|
|
<div class="content-area">
|
|
|
|
<!-- ====== SCAN TAB ====== -->
|
|
<div class="tab-page active" id="tab-scan">
|
|
<div class="scan-hero">
|
|
<div class="scan-illustration">
|
|
<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">
|
|
<div class="mini-stat">
|
|
<img src="icon-cpu.png" class="mini-icon" alt="">
|
|
<span id="scan-stat-total">--</span>
|
|
<label>Drivers</label>
|
|
</div>
|
|
<div class="mini-stat warn">
|
|
<img src="icon-warning.png" class="mini-icon" alt="">
|
|
<span id="scan-stat-outdated">--</span>
|
|
<label>Outdated</label>
|
|
</div>
|
|
<div class="mini-stat danger">
|
|
<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" 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">
|
|
<div class="step-num">1</div>
|
|
<span>Scan Devices</span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step" id="step-2">
|
|
<div class="step-num">2</div>
|
|
<span>Review Drivers</span>
|
|
</div>
|
|
<div class="step-line"></div>
|
|
<div class="step" id="step-3">
|
|
<div class="step-num">3</div>
|
|
<span>Install Updates</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== DRIVERS TAB ====== -->
|
|
<div class="tab-page" id="tab-drivers">
|
|
<div class="tab-header">
|
|
<div class="tab-header-left">
|
|
<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 •
|
|
<span class="warn-text" id="drv-outdated-2">0</span> outdated •
|
|
scanned in <span id="drv-time-2">--</span>
|
|
</div>
|
|
</div>
|
|
<button class="header-btn" onclick="App.scanDrivers()">
|
|
<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"><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">
|
|
<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()">
|
|
<img src="icon-install.png" class="cta-icon" alt="">
|
|
<span>Update All Drivers</span>
|
|
<span class="cta-count" id="cta-count">0</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== UPDATES TAB ====== -->
|
|
<div class="tab-page" id="tab-updates">
|
|
<div class="tab-header">
|
|
<div class="tab-header-left">
|
|
<h2><img src="icon-cloud.png" class="h2-icon" alt=""> Windows Update</h2>
|
|
</div>
|
|
<button class="header-btn" onclick="App.checkUpdates()">
|
|
<img src="icon-refresh.png" class="hdr-icon" alt=""> Check Now
|
|
</button>
|
|
</div>
|
|
<div class="driver-scroll" id="update-list">
|
|
<div class="placeholder-msg">
|
|
<img src="icon-cloud.png" class="placeholder-img" alt="">
|
|
<p>Click <strong>Check Now</strong> to search for updates</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== SYSTEM TAB ====== -->
|
|
<div class="tab-page" id="tab-system">
|
|
<div class="tab-header">
|
|
<div class="tab-header-left">
|
|
<h2><img src="icon-settings.png" class="h2-icon" alt=""> System Information</h2>
|
|
</div>
|
|
<button class="header-btn" onclick="App.refreshSysInfo()">
|
|
<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"><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>
|
|
<div class="sys-row"><span>Build</span><span id="sys-build">--</span></div>
|
|
<div class="sys-row"><span>Arch</span><span id="sys-arch">--</span></div>
|
|
</div>
|
|
<div class="sys-card">
|
|
<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"><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>
|
|
<div class="sys-row"><span>Usage</span><span id="sys-ram-pct">--</span></div>
|
|
<div class="sys-bar-wrap">
|
|
<div class="sys-bar"><div class="sys-bar-fill ram-bar" id="sys-ram-bar" style="width:0%"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="sys-card">
|
|
<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>
|
|
<div class="sys-row"><span>Usage</span><span id="sys-disk-pct">--</span></div>
|
|
<div class="sys-bar-wrap">
|
|
<div class="sys-bar"><div class="sys-bar-fill disk-bar" id="sys-disk-bar" style="width:0%"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="app-footer">
|
|
<span>Driver Booster Pro v1.0.0 — 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()"><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>
|
|
|
|
<!-- 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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|