<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CheckSpecs.ca | Quick Tech Specs</title>

    <style>

        body { font-family: system-ui, sans-serif; background: #121212; color: #e0e0e0; text-align: center; padding: 50px 20px; }

        .container { max-width: 500px; margin: auto; background: #1e1e1e; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid #333; }

        h1 { color: #f97316; margin-top: 0; }

        .spec-box { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #2a2a2a; font-size: 1.1rem; }

        .spec-box:last-child { border-bottom: none; }

        .label { font-weight: 600; color: #a3a3a3; }

        .value { color: #ffffff; font-weight: bold; text-align: right; max-width: 60%; }

    </style>

</head>

<body>

 

    <div class="container">

        <h1>System Spec Checker</h1>

        <p>Instant, non-invasive hardware detection.</p>

        

        <div class="spec-box"><span class="label">Operating System:</span> <span class="value" id="os">Detecting...</span></div>

        <div class="spec-box"><span class="label">Logical CPU Cores:</span> <span class="value" id="cpu">Detecting...</span></div>

        <div class="spec-box"><span class="label">Device Memory (RAM):</span> <span class="value" id="ram">Detecting...</span></div>

        <div class="spec-box"><span class="label">Graphics Card (GPU):</span> <span class="value" id="gpu">Detecting...</span></div>

        <div class="spec-box"><span class="label">Screen Resolution:</span> <span class="value" id="screen">Detecting...</span></div>

    </div>

 

    <script>

        // 1. Simple OS Detection

        let userAgent = navigator.userAgent;

        let os = "Unknown OS";

        if (userAgent.includes("Win")) os = "Windows";

        else if (userAgent.includes("Mac")) os = "macOS";

        else if (userAgent.includes("Linux")) os = "Linux";

        else if (userAgent.includes("Android")) os = "Android";

        else if (userAgent.includes("iPhone") || userAgent.includes("iPad")) os = "iOS";

        document.getElementById('os').innerText = os;

 

        // 2. Detect CPU Cores

        document.getElementById('cpu').innerText = navigator.hardwareConcurrency ? navigator.hardwareConcurrency + " Cores" : "Unknown";

 

        // 3. Detect RAM (Approximated)

        document.getElementById('ram').innerText = navigator.deviceMemory ? navigator.deviceMemory + " GB (Approx)" : "Unknown (>8GB)";

 

        // 4. Advanced GPU Detection via WebGL

        function getGraphicsCard() {

            try {

                const canvas = document.createElement('canvas');

                const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

                if (!gl) return "Not Supported";

                

                const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

                if (!debugInfo) return "Unknown (Blocked)";

                

                // This pulls the actual hardware string (e.g., "NVIDIA GeForce RTX 3060")

                const unmaskedRenderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

                

                // Clean up the string slightly for cleaner display if it's long

                return unmaskedRenderer.replace(/ANGLE \((.*)\)/, '$1');

            } catch (e) {

                return "Unknown Error";

            }

        }

        document.getElementById('gpu').innerText = getGraphicsCard();

 

        // 5. Detect Screen Resolution

        document.getElementById('screen').innerText = window.screen.width + " x " + window.screen.height;

    </script>

 

</body>

</html>