83d7a24d1a
UI changes: - Top title bar with logo, app name, and system status LED - Toolbar with 4 icon tabs: Scan, Drivers, Download, System - Scan page with computer SVG illustration, stats, and big SCAN NOW button - Step indicator bar: Scan Devices > Review Drivers > Install Updates - Driver list with per-row progress bars, Download + Install buttons - "Update All Drivers" CTA bar at bottom when outdated drivers found - Windows Update tab with pending/installed sections - System Info tab with resource bars - Footer with About/Help buttons Backend fixes: - Add cmdutil.HiddenCommand() using CREATE_NO_WINDOW (0x08000000) - All PowerShell subprocesses now run without visible console window - Build with -ldflags "-H windowsgui" to hide main CMD window Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
279 lines
14 KiB
HTML
279 lines
14 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">
|
|
<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>
|
|
<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="status-led"></div>
|
|
<span>System Protected</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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">
|
|
<!-- 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>
|
|
</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="mini-stat">
|
|
<i data-lucide="cpu"></i>
|
|
<span id="scan-stat-total">--</span>
|
|
<label>Drivers</label>
|
|
</div>
|
|
<div class="mini-stat warn">
|
|
<i data-lucide="alert-triangle"></i>
|
|
<span id="scan-stat-outdated">--</span>
|
|
<label>Outdated</label>
|
|
</div>
|
|
<div class="mini-stat danger">
|
|
<i data-lucide="x-circle"></i>
|
|
<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>
|
|
<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><i data-lucide="cpu"></i> 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()">
|
|
<i data-lucide="refresh-cw"></i> 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>
|
|
</div>
|
|
<div class="driver-scroll" id="driver-list">
|
|
<div class="placeholder-msg">
|
|
<i data-lucide="scan-search"></i>
|
|
<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>
|
|
<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><i data-lucide="download-cloud"></i> Windows Update</h2>
|
|
</div>
|
|
<button class="header-btn" onclick="App.checkUpdates()">
|
|
<i data-lucide="refresh-cw"></i> Check Now
|
|
</button>
|
|
</div>
|
|
<div class="driver-scroll" id="update-list">
|
|
<div class="placeholder-msg">
|
|
<i data-lucide="cloud-download"></i>
|
|
<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><i data-lucide="monitor-cog"></i> System Information</h2>
|
|
</div>
|
|
<button class="header-btn" onclick="App.refreshSysInfo()">
|
|
<i data-lucide="refresh-cw"></i> 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-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"><i data-lucide="cpu"></i> 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-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"><i data-lucide="hard-drive"></i> 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</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>
|
|
</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>
|
|
<i data-lucide="shield-check" class="spinner-icon"></i>
|
|
</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>
|