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

Feat: Update UI with GTmetrix dashboard and filmstrip checkbox

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 05:08:20 +11:00
parent 50dcf9b498
commit 3797a45628
1 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@@ -97,23 +97,54 @@
<!-- Live Results --> <!-- Live Results -->
<div id="results-area" class="results-container"> <div id="results-area" class="results-container">
<h3>Latest Results</h3> <h3>Latest Results</h3>
<div class="metrics-grid"> <div class="gtmetrix-dashboard">
<div class="metric-card"> <!-- Grade Section -->
<div class="metric-value" id="score-perf">-</div> <div class="dashboard-card grade-card">
<div class="metric-label">Performance</div> <h3>GTmetrix Grade</h3>
<div class="grade-container">
<div id="overall-grade" class="grade-circle">
<span class="grade-letter">-</span>
</div> </div>
<div class="metric-card">
<div class="metric-value" id="metric-lcp">-</div>
<div class="metric-label">LCP (ms)</div>
</div> </div>
<div class="metric-card">
<div class="metric-value" id="metric-cls">-</div>
<div class="metric-label">CLS</div>
</div> </div>
<div class="metric-card">
<div class="metric-value" id="metric-tbt">-</div> <!-- Scores Section -->
<div class="metric-label">TBT (ms)</div> <div class="dashboard-card scores-card">
<div class="score-item">
<div class="score-label">Performance</div>
<div class="score-value" id="performance-score">-</div>
</div> </div>
<div class="score-divider"></div>
<div class="score-item">
<div class="score-label">Structure</div>
<div class="score-value" id="structure-score">-</div>
</div>
</div>
<!-- Vitals Section -->
<div class="dashboard-card vitals-card">
<h3>Web Vitals</h3>
<div class="vitals-grid">
<div class="vital-item">
<div class="vital-label">LCP</div>
<div class="vital-value" id="vital-lcp">-</div>
</div>
<div class="vital-item">
<div class="vital-label">TBT</div>
<div class="vital-value" id="vital-tbt">-</div>
</div>
<div class="vital-item">
<div class="vital-label">CLS</div>
<div class="vital-value" id="vital-cls">-</div>
</div>
</div>
</div>
</div>
<!-- Filmstrip Section -->
<div id="filmstrip-section" style="display: none; margin-top: 2rem;">
<h3>Speed Visualization</h3>
<div id="filmstrip-container" class="filmstrip-container"></div>
</div> </div>
<!-- Performance Grades --> <!-- Performance Grades -->