mirror of
https://github.com/DeNNiiInc/Web-Page-Performance-Test.git
synced 2026-04-17 11:55:59 +00:00
264 lines
15 KiB
HTML
264 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Beyond Cloud Technology Project Base">
|
|
<title>Web Page Performance Test</title>
|
|
<link rel="icon" type="image/png" href="Logo.png">
|
|
<link rel="stylesheet" href="styles.css?v=2.2">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1 class="title">
|
|
<img src="Logo.png" alt="BCT Logo" class="title-icon">
|
|
Web Page Performance Test
|
|
</h1>
|
|
<p class="subtitle">Developed and maintained by Beyond Cloud Technology</p>
|
|
<a href="https://www.youtube.com/@beyondcloudtechnology" target="_blank" rel="noopener noreferrer"
|
|
class="youtube-link">
|
|
<svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
</svg>
|
|
Watch on YouTube @beyondcloudtechnology
|
|
</a>
|
|
<!-- Navigation -->
|
|
<nav style="margin-top: 0.5rem;">
|
|
<a href="traceroute.html" class="button" style="color:var(--color-text-primary); text-decoration:none; margin-right: 1rem;">🌍 Network Trace</a>
|
|
</nav>
|
|
</div>
|
|
<div class="header-controls">
|
|
<!-- Theme toggle or other controls can go here -->
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="main-content">
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<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" data-value="mobile" onclick="setDevice('mobile')">
|
|
📱 Mobile
|
|
</div>
|
|
<div class="toggle-option active" data-value="desktop" onclick="setDevice('desktop')">
|
|
💻 Desktop
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 1rem;">
|
|
<label class="checkbox-container">
|
|
<input type="checkbox" id="capture-filmstrip" checked>
|
|
<span class="checkmark"></span>
|
|
<span class="label-text">Capture Filmstrip (Screenshots)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button id="run-btn" class="btn-primary">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Live Results -->
|
|
<div id="results-area" class="results-container">
|
|
<h3>Latest Results</h3>
|
|
<div class="gtmetrix-dashboard">
|
|
<!-- Grade Section -->
|
|
<div class="dashboard-card grade-card">
|
|
<h3>Grade</h3>
|
|
<div class="grade-container">
|
|
<div id="overall-grade" class="grade-circle">
|
|
<span class="grade-letter">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scores Section -->
|
|
<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 class="score-divider"></div>
|
|
<div class="score-item">
|
|
<div class="score-label">Structure</div>
|
|
<div class="score-value" id="structure-score">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Carbon Section -->
|
|
<div id="carbon-card" class="dashboard-card carbon-card" style="display: none;">
|
|
<h3>Carbon Footprint</h3>
|
|
<div class="carbon-grid">
|
|
<div class="carbon-item">
|
|
<div class="carbon-label">CO2 per Visit</div>
|
|
<div class="carbon-value" id="carbon-co2">-</div>
|
|
</div>
|
|
<div class="carbon-item">
|
|
<div class="carbon-label">Eco Rating</div>
|
|
<div class="carbon-value" id="carbon-rating">-</div>
|
|
</div>
|
|
</div>
|
|
<div id="carbon-badge" class="carbon-badge">-</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>
|
|
|
|
<!-- Performance Grades -->
|
|
<div id="performanceGrades" style="display: none; margin-top: 2rem;">
|
|
<h3>Performance Grades</h3>
|
|
<div id="gradesContainer"></div>
|
|
</div>
|
|
|
|
<!-- Waterfall Link -->
|
|
<div style="margin-top: 1.5rem; display: none;" id="waterfall-link-container">
|
|
<a href="#" id="view-waterfall" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; margin-right: 1rem;">
|
|
📊 View Waterfall Chart
|
|
</a>
|
|
<a href="#" id="view-video" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; margin-right: 1rem;">
|
|
🎥 View Video
|
|
</a>
|
|
<a href="#" id="view-images" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
|
|
🖼️ View Image Gallery
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Content Breakdown -->
|
|
<div id="content-breakdown" style="margin-top: 2rem; display: none;">
|
|
<h3>Content Breakdown</h3>
|
|
<canvas id="breakdown-chart" style="max-width: 500px; margin: 0 auto;"></canvas>
|
|
<div id="breakdown-stats" style="margin-top: 1rem;"></div>
|
|
</div>
|
|
|
|
<!-- Optimization Checklist -->
|
|
<div id="optimization-checklist" style="margin-top: 2rem; display: none;">
|
|
<h3>Optimization Opportunities</h3>
|
|
<div id="optimization-score" style="font-size: 2rem; font-weight: bold; text-align: center; margin: 1rem 0;"></div>
|
|
<div id="optimization-items"></div>
|
|
</div>
|
|
|
|
<!-- Export Buttons -->
|
|
<div id="export-buttons" style="margin-top: 2rem; display: none; text-align: center;">
|
|
<h3>Export Results</h3>
|
|
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
|
<a id="export-har" href="#" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; border-radius: 8px; border: 2px solid var(--color-border);">
|
|
📦 Download HAR
|
|
</a>
|
|
<a id="export-csv" href="#" class="button" style="display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-bg-tertiary); color: var(--color-text-primary); text-decoration: none; border-radius: 8px; border: 2px solid var(--color-border);">
|
|
📊 Download CSV
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History -->
|
|
<div class="history-list" id="history-list">
|
|
<!-- History items will be populated here -->
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>© 2025 Beyond Cloud Technology. All rights reserved.</p>
|
|
|
|
<!-- GitHub Link -->
|
|
<a href="https://github.com/DeNNiiInc/Web-Page-Performance-Test" target="_blank" rel="noopener noreferrer" class="github-link">
|
|
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
<span>View on GitHub</span>
|
|
</a>
|
|
|
|
<!-- Git Version Badge -->
|
|
<div id="version-badge" class="version-badge">
|
|
<svg class="badge-icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M21.007 8.222A3.738 3.738 0 0 0 15.045 5.2a3.737 3.737 0 0 0 1.156 6.583 2.988 2.988 0 0 1-2.668 1.67h-2.99a4.456 4.456 0 0 0-2.989 1.165V7.4a3.737 3.737 0 1 0-1.494 0v9.117a3.776 3.776 0 1 0 1.816.099 2.99 2.99 0 0 1 2.668-1.667h2.99a4.484 4.484 0 0 0 4.223-3.039 3.736 3.736 0 0 0 3.25-3.687zM4.565 3.738a2.242 2.242 0 1 1 4.484 0 2.242 2.242 0 0 1-4.484 0zm4.484 16.441a2.242 2.242 0 1 1-4.484 0 2.242 2.242 0 0 1 4.484 0zm8.221-9.715a2.242 2.242 0 1 1 0-4.485 2.242 2.242 0 0 1 0 4.485z"/>
|
|
</svg>
|
|
<span id="commit-id" class="commit-id">Loading...</span>
|
|
<span class="version-separator">•</span>
|
|
<span id="commit-age" class="commit-age">Loading...</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
<!-- Video Player Modal -->
|
|
<div id="video-modal" class="modal">
|
|
<div class="modal-content video-modal-content">
|
|
<div class="modal-header">
|
|
<h2>Page Load Video</h2>
|
|
<button class="close-btn" onclick="closeVideoModal()">×</button>
|
|
</div>
|
|
<div class="video-player-container">
|
|
<div id="video-frame" class="video-frame">
|
|
<img id="video-img" src="" alt="Video Frame">
|
|
</div>
|
|
<div class="video-controls">
|
|
<button id="video-play-btn" onclick="toggleVideoPlay()">▶ Play</button>
|
|
<div class="video-progress-bar">
|
|
<div id="video-progress-fill" class="video-progress-fill"></div>
|
|
</div>
|
|
<span id="video-time">0.0s</span>
|
|
<button id="video-download-btn" onclick="downloadVideo()" style="background: var(--color-accent-success); margin-left: 0.5rem;">⬇ Download</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Git Badge Scripts global must be before main -->
|
|
<script src="whammy.js"></script>
|
|
<script src="git-badge.js"></script>
|
|
<script src="breakdown.js"></script>
|
|
<script src="grades.js"></script>
|
|
<script src="main.js?v=4.0"></script>
|
|
</body>
|
|
|
|
</html> |