Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hardware Performance Analyzer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gauge { | |
| --percentage: 0; | |
| --fill: #4ade80; | |
| position: relative; | |
| width: 160px; | |
| height: 80px; | |
| margin: 0 auto; | |
| filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05)); | |
| } | |
| .gauge::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 160px 160px 0 0; | |
| background: conic-gradient( | |
| from 0.25turn at 50% 100%, | |
| var(--fill) calc(var(--percentage) * 1%), | |
| #f3f4f6 calc(var(--percentage) * 1%) | |
| ); | |
| mask-image: radial-gradient( | |
| circle at 50% 100%, | |
| transparent 25%, | |
| #000 25.5% | |
| ); | |
| transform: rotate(180deg); | |
| transition: background 0.3s ease; | |
| } | |
| .gauge::after { | |
| content: attr(data-value) "%"; | |
| position: absolute; | |
| bottom: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-weight: bold; | |
| color: var(--fill); | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e5e7eb; | |
| overflow: hidden; | |
| } | |
| .progress-bar-fill { | |
| height: 100%; | |
| background-color: #3b82f6; | |
| transition: width 0.5s ease; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .testing { | |
| animation: pulse 1.5s infinite; | |
| } | |
| .flip-in { | |
| animation: flipIn 0.5s ease-out forwards; | |
| } | |
| @keyframes flipIn { | |
| from { | |
| transform: rotateX(90deg); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: rotateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2">Hardware Performance Analyzer</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Test your computer's performance and view detailed hardware specifications in real-time.</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Hardware Specifications --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-microchip text-blue-500 text-2xl mr-3"></i> | |
| <h2 class="text-xl font-semibold text-gray-800">Hardware Specifications</h2> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Processor</h3> | |
| <p id="cpu-info" class="text-gray-800">Detecting...</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Graphics</h3> | |
| <p id="gpu-info" class="text-gray-800">Detecting...</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Memory</h3> | |
| <p id="ram-info" class="text-gray-800">Detecting...</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Operating System</h3> | |
| <p id="os-info" class="text-gray-800">Detecting...</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Browser</h3> | |
| <p id="browser-info" class="text-gray-800">Detecting...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Tests --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-tachometer-alt text-purple-500 text-2xl mr-3"></i> | |
| <h2 class="text-xl font-semibold text-gray-800">Performance Tests</h2> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">CPU Benchmark</span> | |
| <span id="cpu-score" class="text-sm font-medium">-</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="cpu-progress" class="progress-bar-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">GPU Benchmark</span> | |
| <span id="gpu-score" class="text-sm font-medium">-</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="gpu-progress" class="progress-bar-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Memory Benchmark</span> | |
| <span id="ram-score" class="text-sm font-medium">-</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="ram-progress" class="progress-bar-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Storage Benchmark</span> | |
| <span id="storage-score" class="text-sm font-medium">-</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="storage-progress" class="progress-bar-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <button id="run-tests" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Run All Tests | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Real-time Monitoring --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-chart-line text-green-500 text-2xl mr-3"></i> | |
| <h2 class="text-xl font-semibold text-gray-800">Real-time Monitoring</h2> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="text-center"> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">CPU Usage</h3> | |
| <div class="gauge" id="cpu-gauge" data-value="0"></div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">Memory Usage</h3> | |
| <div class="gauge" id="ram-gauge" data-value="0"></div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">GPU Usage</h3> | |
| <div class="gauge" id="gpu-gauge" data-value="0"></div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">Battery</h3> | |
| <div class="gauge" id="battery-gauge" data-value="0"></div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-medium text-gray-500 mb-2">System Temperature</h3> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="temp-bar" class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <span id="temp-value" class="ml-2 text-sm font-medium text-gray-700">0°C</span> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button id="start-monitoring" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center shadow-md hover:shadow-lg"> | |
| <i class="fas fa-sync-alt mr-2"></i> Start Monitoring | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Test Results --> | |
| <div id="test-results" class="bg-white rounded-xl shadow-lg p-6 mt-8 hidden flip-in"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-medal text-yellow-500 text-2xl mr-3"></i> | |
| <h2 class="text-xl font-semibold text-gray-800">Test Results</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="text-center p-4 bg-blue-50 rounded-lg"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2" id="overall-score">0</div> | |
| <div class="text-sm font-medium text-blue-800">OVERALL SCORE</div> | |
| <div class="mt-2 text-xs text-gray-600">Higher is better</div> | |
| </div> | |
| <div class="text-center p-4 bg-purple-50 rounded-lg"> | |
| <div class="text-4xl font-bold text-purple-600 mb-2" id="cpu-result">0</div> | |
| <div class="text-sm font-medium text-purple-800">CPU SCORE</div> | |
| <div class="mt-2 text-xs text-gray-600">Calculations per second</div> | |
| </div> | |
| <div class="text-center p-4 bg-green-50 rounded-lg"> | |
| <div class="text-4xl font-bold text-green-600 mb-2" id="gpu-result">0</div> | |
| <div class="text-sm font-medium text-green-800">GPU SCORE</div> | |
| <div class="mt-2 text-xs text-gray-600">Rendering performance</div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-sm font-medium text-gray-500 mb-3">Performance Comparison</h3> | |
| <div class="bg-gray-100 rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-24 text-xs text-gray-500">Your System</div> | |
| <div class="flex-1"> | |
| <div class="bg-blue-500 h-4 rounded-full" id="your-system-bar" style="width: 0%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs font-medium" id="your-system-percent">0%</div> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-24 text-xs text-gray-500">Average PC</div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-400 h-4 rounded-full" style="width: 50%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs font-medium">50%</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-24 text-xs text-gray-500">High-end PC</div> | |
| <div class="flex-1"> | |
| <div class="bg-gray-400 h-4 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div class="w-16 text-right text-xs font-medium">85%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Detect hardware specifications | |
| function detectHardware() { | |
| // CPU info | |
| const cpuCores = navigator.hardwareConcurrency || "Unknown"; | |
| document.getElementById('cpu-info').textContent = `${cpuCores} cores`; | |
| // GPU info | |
| const canvas = document.createElement('canvas'); | |
| const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); | |
| if (gl) { | |
| const debugInfo = gl.getExtension('WEBGL_debug_renderer_info'); | |
| if (debugInfo) { | |
| const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL); | |
| document.getElementById('gpu-info').textContent = renderer; | |
| } else { | |
| document.getElementById('gpu-info').textContent = "WebGL detected (specifics unavailable)"; | |
| } | |
| } else { | |
| document.getElementById('gpu-info').textContent = "WebGL not supported"; | |
| } | |
| // RAM info | |
| const ram = performance.memory ? | |
| `${Math.round(performance.memory.jsHeapSizeLimit / (1024 * 1024))} MB available` : | |
| "Unknown (enable Chrome flags for precise measurement)"; | |
| document.getElementById('ram-info').textContent = ram; | |
| // OS info | |
| const platform = navigator.platform; | |
| let os = "Unknown OS"; | |
| if (platform.indexOf("Win") !== -1) os = "Windows"; | |
| else if (platform.indexOf("Mac") !== -1) os = "MacOS"; | |
| else if (platform.indexOf("Linux") !== -1) os = "Linux"; | |
| document.getElementById('os-info').textContent = os; | |
| // Browser info | |
| document.getElementById('browser-info').textContent = `${navigator.userAgent.split(') ')[0].split('/')[0]})`; | |
| } | |
| // Run performance tests | |
| function runPerformanceTests() { | |
| const runTestsBtn = document.getElementById('run-tests'); | |
| runTestsBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Testing...'; | |
| runTestsBtn.classList.add('testing'); | |
| runTestsBtn.disabled = true; | |
| // CPU test | |
| setTimeout(() => { | |
| const cpuStartTime = performance.now(); | |
| let sum = 0; | |
| for (let i = 0; i < 10000000; i++) { | |
| sum += Math.sqrt(i) * Math.random(); | |
| } | |
| const cpuEndTime = performance.now(); | |
| const cpuTime = cpuEndTime - cpuStartTime; | |
| const cpuScore = Math.round(10000 / cpuTime); | |
| document.getElementById('cpu-score').textContent = cpuScore; | |
| document.getElementById('cpu-progress').style.width = `${Math.min(100, cpuScore / 100)}%`; | |
| // GPU test | |
| setTimeout(() => { | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = 1000; | |
| canvas.height = 1000; | |
| const ctx = canvas.getContext('2d'); | |
| let frames = 0; | |
| const testDuration = 2000; // 2 seconds test | |
| const startTime = performance.now(); | |
| function renderFrame() { | |
| // Clear canvas | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw 100 random rectangles | |
| for (let i = 0; i < 100; i++) { | |
| ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`; | |
| ctx.fillRect(Math.random() * 800, Math.random() * 800, 200, 200); | |
| } | |
| frames++; | |
| // Continue test if time remains | |
| if (performance.now() - startTime < testDuration) { | |
| requestAnimationFrame(renderFrame); | |
| } else { | |
| const fps = Math.round(frames / (testDuration / 1000)); | |
| const gpuScore = Math.min(1000, fps * 2); // Scale FPS to score | |
| document.getElementById('gpu-score').textContent = gpuScore; | |
| document.getElementById('gpu-progress').style.width = `${Math.min(100, gpuScore / 10)}%`; | |
| // Continue with RAM test | |
| setTimeout(() => { | |
| const ramStartTime = performance.now(); | |
| const array = new Array(1000000); | |
| for (let i = 0; i < array.length; i++) { | |
| array[i] = new Array(100).fill(Math.random()); | |
| } | |
| const ramEndTime = performance.now(); | |
| const ramTime = ramEndTime - ramStartTime; | |
| const ramScore = Math.round(10000 / ramTime); | |
| document.getElementById('ram-score').textContent = ramScore; | |
| document.getElementById('ram-progress').style.width = `${Math.min(100, ramScore / 100)}%`; | |
| // Storage test (simulated) | |
| setTimeout(() => { | |
| const storageScore = Math.round(Math.random() * 500 + 300); | |
| document.getElementById('storage-score').textContent = storageScore; | |
| document.getElementById('storage-progress').style.width = `${Math.min(100, storageScore / 10)}%`; | |
| // Show results | |
| showTestResults(cpuScore, gpuScore, ramScore, storageScore); | |
| runTestsBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Run All Tests'; | |
| runTestsBtn.classList.remove('testing'); | |
| runTestsBtn.disabled = false; | |
| }, 1000); | |
| }, 1000); | |
| } | |
| } | |
| // Start the FPS test | |
| renderFrame(); | |
| document.getElementById('gpu-score').textContent = gpuScore; | |
| document.getElementById('gpu-progress').style.width = `${Math.min(100, gpuScore / 100)}%`; | |
| // RAM test | |
| setTimeout(() => { | |
| const ramStartTime = performance.now(); | |
| const array = new Array(1000000); | |
| for (let i = 0; i < array.length; i++) { | |
| array[i] = new Array(100).fill(Math.random()); | |
| } | |
| const ramEndTime = performance.now(); | |
| const ramTime = ramEndTime - ramStartTime; | |
| const ramScore = Math.round(10000 / ramTime); | |
| document.getElementById('ram-score').textContent = ramScore; | |
| document.getElementById('ram-progress').style.width = `${Math.min(100, ramScore / 100)}%`; | |
| // Storage test (simulated) | |
| setTimeout(() => { | |
| const storageScore = Math.round(Math.random() * 500 + 300); | |
| document.getElementById('storage-score').textContent = storageScore; | |
| document.getElementById('storage-progress').style.width = `${Math.min(100, storageScore / 10)}%`; | |
| // Show results | |
| showTestResults(cpuScore, gpuScore, ramScore, storageScore); | |
| runTestsBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Run All Tests'; | |
| runTestsBtn.classList.remove('testing'); | |
| runTestsBtn.disabled = false; | |
| }, 1000); | |
| }, 1000); | |
| }, 1000); | |
| }, 100); | |
| } | |
| // Show test results | |
| function showTestResults(cpuScore, gpuScore, ramScore, storageScore) { | |
| const overallScore = Math.round((cpuScore * 0.4 + gpuScore * 0.3 + ramScore * 0.2 + storageScore * 0.1) / 10); | |
| document.getElementById('overall-score').textContent = overallScore; | |
| document.getElementById('cpu-result').textContent = cpuScore; | |
| document.getElementById('gpu-result').textContent = gpuScore; | |
| const yourSystemPercent = Math.min(100, overallScore); | |
| document.getElementById('your-system-bar').style.width = `${yourSystemPercent}%`; | |
| document.getElementById('your-system-percent').textContent = `${yourSystemPercent}%`; | |
| const resultsDiv = document.getElementById('test-results'); | |
| resultsDiv.classList.remove('hidden'); | |
| resultsDiv.classList.add('flip-in'); | |
| } | |
| // Real-time monitoring | |
| function startMonitoring() { | |
| const startMonitoringBtn = document.getElementById('start-monitoring'); | |
| startMonitoringBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Monitoring...'; | |
| startMonitoringBtn.disabled = true; | |
| // Simulate monitoring | |
| let monitoringInterval = setInterval(() => { | |
| // CPU usage | |
| const cpuUsage = Math.min(100, Math.random() * 30 + 10); | |
| const cpuGauge = document.getElementById('cpu-gauge'); | |
| cpuGauge.style.setProperty('--percentage', cpuUsage); | |
| cpuGauge.style.setProperty('--fill', getColorForPercentage(cpuUsage)); | |
| cpuGauge.setAttribute('data-value', Math.round(cpuUsage)); | |
| // RAM usage | |
| const ramUsage = Math.min(100, Math.random() * 40 + 20); | |
| const ramGauge = document.getElementById('ram-gauge'); | |
| ramGauge.style.setProperty('--percentage', ramUsage); | |
| ramGauge.style.setProperty('--fill', getColorForPercentage(ramUsage)); | |
| ramGauge.setAttribute('data-value', Math.round(ramUsage)); | |
| // GPU usage | |
| const gpuUsage = Math.min(100, Math.random() * 25 + 5); | |
| const gpuGauge = document.getElementById('gpu-gauge'); | |
| gpuGauge.style.setProperty('--percentage', gpuUsage); | |
| gpuGauge.style.setProperty('--fill', getColorForPercentage(gpuUsage)); | |
| gpuGauge.setAttribute('data-value', Math.round(gpuUsage)); | |
| // Battery (if available) | |
| if (navigator.getBattery) { | |
| navigator.getBattery().then(battery => { | |
| const batteryGauge = document.getElementById('battery-gauge'); | |
| batteryGauge.style.setProperty('--percentage', battery.level * 100); | |
| batteryGauge.style.setProperty('--fill', getColorForPercentage(battery.level * 100, true)); | |
| batteryGauge.setAttribute('data-value', Math.round(battery.level * 100)); | |
| }); | |
| } else { | |
| const batteryGauge = document.getElementById('battery-gauge'); | |
| batteryGauge.style.setProperty('--percentage', 100); | |
| batteryGauge.style.setProperty('--fill', getColorForPercentage(100)); | |
| batteryGauge.setAttribute('data-value', "N/A"); | |
| } | |
| // Temperature (simulated) | |
| const temp = Math.round(Math.random() * 30 + 40); | |
| document.getElementById('temp-bar').style.width = `${Math.min(100, temp)}%`; | |
| document.getElementById('temp-value').textContent = `${temp}°C`; | |
| // Change color based on temperature | |
| const tempBar = document.getElementById('temp-bar'); | |
| if (temp > 70) tempBar.style.backgroundColor = '#ef4444'; | |
| else if (temp > 50) tempBar.style.backgroundColor = '#f59e0b'; | |
| else tempBar.style.backgroundColor = '#10b981'; | |
| }, 1500); | |
| // Change button to stop monitoring | |
| startMonitoringBtn.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Monitoring'; | |
| startMonitoringBtn.onclick = function() { | |
| clearInterval(monitoringInterval); | |
| startMonitoringBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Start Monitoring'; | |
| startMonitoringBtn.disabled = false; | |
| startMonitoringBtn.onclick = startMonitoring; | |
| // Reset gauges | |
| document.getElementById('cpu-gauge').style.setProperty('--percentage', 0); | |
| document.getElementById('ram-gauge').style.setProperty('--percentage', 0); | |
| document.getElementById('gpu-gauge').style.setProperty('--percentage', 0); | |
| document.getElementById('temp-bar').style.width = '0%'; | |
| document.getElementById('temp-value').textContent = '0°C'; | |
| }; | |
| } | |
| // Helper function to get color based on percentage | |
| function getColorForPercentage(percent, isBattery = false) { | |
| if (isBattery) { | |
| if (percent > 70) return '#4ade80'; // green when high | |
| if (percent > 30) return '#fbbf24'; // yellow when medium | |
| return '#ef4444'; // red when low | |
| } | |
| if (percent < 30) return '#4ade80'; // green | |
| if (percent < 70) return '#fbbf24'; // yellow | |
| return '#ef4444'; // red | |
| } | |
| // Event listeners | |
| document.addEventListener('DOMContentLoaded', () => { | |
| detectHardware(); | |
| document.getElementById('run-tests').addEventListener('click', runPerformanceTests); | |
| document.getElementById('start-monitoring').addEventListener('click', startMonitoring); | |
| document.getElementById('share-results').addEventListener('click', () => { | |
| alert('Results shared! (This is a simulation)'); | |
| }); | |
| document.getElementById('save-results').addEventListener('click', () => { | |
| alert('Report saved! (This is a simulation)'); | |
| }); | |
| }); | |
| </script> | |
| </html> |