fdciabdul/driver-booster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
8bf4c2ffdb13d9ae4fe2ccab4ac0c5341f69b332
driver-booster/ui/index.html
taqin 8bf4c2ffdb Hide native title bar, add custom frameless window controls 
- Remove WS_CAPTION via SetWindowLong to hide native Windows title bar
- Keep WS_THICKFRAME for window resizing from edges
- Add custom Win11-style window control buttons (minimize, maximize, close)
- Close button turns red on hover (#c42b1c) matching Windows 11
- Title bar is draggable via -webkit-app-region: drag
- Bind windowMinimize/windowMaximize/windowClose Go functions to JS
- Center system status indicator in title bar

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-12 21:20:43 +07:00

242 lines
13 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">
</head>
<body>
<div class="app">
<!-- Custom Title Bar (frameless window) -->
<div class="titlebar" id="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-center">
<div class="sys-status">
<div class="status-led"></div>
<span>System Protected</span>
</div>
</div>
<div class="titlebar-controls">
<button class="win-btn win-minimize" onclick="windowMinimize()" title="Minimize">
<svg width="10" height="1" viewBox="0 0 10 1"><rect width="10" height="1" fill="currentColor"/></svg>
</button>
<button class="win-btn win-maximize" onclick="windowMaximize()" title="Maximize">
<svg width="10" height="10" viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" stroke-width="1"/></svg>
</button>
<button class="win-btn win-close" onclick="windowClose()" title="Close">
<svg width="10" height="10" viewBox="0 0 10 10"><line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.2"/><line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.2"/></svg>
</button>
</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 &bull;
<span class="warn-text" id="drv-outdated-2">0</span> outdated &bull;
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 &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()"><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>
Reference in New Issue View Git Blame Copy Permalink