dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-17 20:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feature Complete: WebPageTest Clone

Browse Source 
- Implemented Test Launcher UI (index.html)
- Added 'View Full Report' functionality using Lighthouse HTML reports
- Configured runner.js for robust Headless Chrome execution on Linux
- Updated styles for form and results dashboard
This commit is contained in:
DeNNiiInc
2025-12-27 22:21:17 +11:00
parent 264325112e
commit f253b8678f
4 changed files with 460 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
index.html
View File

@@ -38,11 +38,65 @@
<main class="main-content">
<div class="panel">
<div class="panel-header">
<div class="panel-icon">🚀</div>
<h2 class="panel-title">Project Content</h2>
<div class="panel-icon">⚡</div>
<h2 class="panel-title">Start Performance Test</h2>
</div>
<!-- Test Launcher Form -->
<div class="launcher-form">
<div class="form-group">
<label class="form-label" for="test-url">Enter Website URL</label>
<input type="url" id="test-url" class="form-input" placeholder="https://example.com" required>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Device Emulation</label>
<div class="toggle-group">
<div class="toggle-option active" data-value="mobile" onclick="setDevice('mobile')">
📱 Mobile
</div>
<div class="toggle-option" data-value="desktop" onclick="setDevice('desktop')">
💻 Desktop
</div>
</div>
</div>
</div>
<button id="run-btn" class="btn-primary" onclick="runTest()">
<span>Run Test</span>
<div id="loading-spinner" class="loading-spinner" style="display: none;"></div>
</button>
<p id="error-msg" style="color: var(--color-accent-danger); display: none;"></p>
</div>
<!-- Live Results -->
<div id="results-area" class="results-container">
<h3>Latest Results</h3>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-value" id="score-perf">-</div>
<div class="metric-label">Performance</div>
</div>
<div class="metric-card">
<div class="metric-value" id="metric-lcp">-</div>
<div class="metric-label">LCP (ms)</div>
</div>
<div class="metric-card">
<div class="metric-value" id="metric-cls">-</div>
<div class="metric-label">CLS</div>
</div>
<div class="metric-card">
<div class="metric-value" id="metric-tbt">-</div>
<div class="metric-label">TBT (ms)</div>
</div>
</div>
</div>
<!-- History -->
<div class="history-list" id="history-list">
<!-- History items will be populated here -->
</div>
<p>This is the base template. Add your project content here.</p>
</div>
</main>
<!-- Footer -->