index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#101116">
  <title>Explain My Computer — System diagnostics</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar">
      <a class="brand" href="#" aria-label="Explain My Computer home">
        <span class="brand-mark"><span></span><span></span><span></span><span></span></span>
        <span class="brand-name">explain<span>my</span>computer</span>
      </a>

      <div class="nav-label">WORKSPACE</div>
      <nav aria-label="Main navigation">
        <a class="nav-item active" href="#overview"><span class="nav-icon">◫</span> Overview</a>
        <a class="nav-item" href="#metrics"><span class="nav-icon">⌁</span> Performance</a>
        <a class="nav-item" href="#insights"><span class="nav-icon">✳</span> Insights</a>
        <a class="nav-item" href="#access"><span class="nav-icon">◉</span> Data access</a>
      </nav>

      <div class="sidebar-bottom">
        <div class="privacy-card">
          <span class="privacy-icon">⌑</span>
          <div><strong>Your data stays yours</strong><p>Diagnostics run locally in your browser. Nothing is uploaded.</p></div>
        </div>
        <div class="sidebar-profile">
          <div class="profile-avatar">EC</div>
          <div class="profile-copy"><strong>Local session</strong><span>Browser diagnostics</span></div>
          <span class="online-dot" aria-label="Online"></span>
        </div>
      </div>
    </aside>

    <main class="main-content" id="overview">
      <header class="topbar">
        <div class="breadcrumb">Workspace <span>/</span> <strong>System overview</strong></div>
        <div class="topbar-right"><span class="live-indicator"><i></i> LIVE MONITORING</span><span class="topbar-divider"></span><span class="top-date" id="top-date">--</span></div>
      </header>

      <section class="welcome-row">
        <div>
          <div class="eyebrow"><span class="eyebrow-line"></span> YOUR DEVICE, DECODED</div>
          <h1>Good to see you<span class="title-period">.</span></h1>
          <p class="subtitle">A clearer picture of what’s happening under the hood.</p>
        </div>
        <button class="diagnose-button" id="diagnose-button" type="button">
          <span class="button-spark">✳</span><span class="button-label">Diagnose my computer</span><span class="button-arrow">↗</span>
        </button>
      </section>

      <section class="system-banner" aria-label="Device summary">
        <div class="device-symbol"><span>⌘</span></div>
        <div class="device-info">
          <div class="device-title"><h2 id="device-name">Your device</h2><span class="status-pill"><i></i> <span id="device-status">Monitoring</span></span></div>
          <p id="device-description">Getting to know this browser session…</p>
        </div>
        <div class="banner-meta"><span class="meta-label">BROWSER</span><strong id="browser-name">Detecting…</strong></div>
        <div class="banner-meta"><span class="meta-label">PLATFORM</span><strong id="platform-name">Detecting…</strong></div>
        <div class="banner-meta last-meta"><span class="meta-label">LAST CHECK</span><strong id="last-check">Just now</strong></div>
      </section>

      <section class="section-block" id="metrics">
        <div class="section-heading">
          <div><div class="section-kicker">AT A GLANCE</div><h2>Performance snapshot</h2></div>
          <span class="section-note"><span class="pulse-dot"></span> Updates automatically</span>
        </div>
        <div class="metric-grid">
          <article class="metric-card" data-metric="cpu">
            <div class="metric-top"><span class="metric-label">CPU ACTIVITY</span><span class="metric-icon icon-violet">⌁</span></div>
            <div class="metric-value-row"><strong class="metric-value" id="cpu-value">—</strong><span class="metric-unit">browser response</span></div>
            <div class="chart-wrap"><canvas id="cpu-chart" aria-label="Browser responsiveness history"></canvas></div>
            <div class="metric-foot"><span class="metric-foot-dot violet-dot"></span><span id="cpu-foot">Measuring this tab’s responsiveness</span></div>
          </article>
          <article class="metric-card" data-metric="memory">
            <div class="metric-top"><span class="metric-label">MEMORY</span><span class="metric-icon icon-blue">▤</span></div>
            <div class="metric-value-row"><strong class="metric-value" id="memory-value">—</strong><span class="metric-unit">JavaScript heap</span></div>
            <div class="chart-wrap"><canvas id="memory-chart" aria-label="JavaScript heap usage history"></canvas></div>
            <div class="metric-foot"><span class="metric-foot-dot blue-dot"></span><span id="memory-foot">Checking browser memory access</span></div>
          </article>
          <article class="metric-card" data-metric="storage">
            <div class="metric-top"><span class="metric-label">DISK &amp; STORAGE</span><span class="metric-icon icon-teal">▱</span></div>
            <div class="metric-value-row"><strong class="metric-value" id="storage-value">—</strong><span class="metric-unit">browser storage used</span></div>
            <div class="storage-track"><span id="storage-bar"></span></div>
            <div class="metric-foot"><span class="metric-foot-dot teal-dot"></span><span id="storage-foot">Checking available storage estimate</span></div>
          </article>
        </div>
      </section>

      <div class="content-grid">
        <section class="panel insights-panel" id="insights">
          <div class="panel-heading">
            <div><div class="section-kicker">WHAT WE FOUND</div><h2>System health</h2></div>
            <span class="health-label" id="health-label">Checking</span>
          </div>
          <div class="health-layout">
            <div class="health-score-wrap">
              <svg class="health-ring" viewBox="0 0 140 140" role="img" aria-label="System health score">
                <circle class="ring-track" cx="70" cy="70" r="59"></circle>
                <circle class="ring-progress" id="health-ring" cx="70" cy="70" r="59"></circle>
              </svg>
              <div class="health-score"><strong id="health-score">—</strong><span>HEALTH</span></div>
            </div>
            <div class="health-copy"><h3 id="health-title">A quick check is underway</h3><p id="health-description">We’re checking the signals your browser can safely share.</p><div class="health-legend"><span><i class="legend-good"></i> Looking good</span><span><i class="legend-limited"></i> Limited access</span></div></div>
          </div>
          <div class="findings-heading"><h3>Detected signals</h3><span id="finding-count">0 items</span></div>
          <div class="finding-list" id="finding-list"><div class="empty-state">Run a diagnostic to see what we find.</div></div>
        </section>

        <section class="panel recommendations-panel">
          <div class="panel-heading">
            <div><div class="section-kicker">SMALL STEPS, BIG DIFFERENCE</div><h2>What you can try</h2></div>
            <span class="recommendation-icon">✳</span>
          </div>
          <p class="recommendation-intro">A few practical ways to keep things feeling snappy.</p>
          <div class="recommendation-list" id="recommendation-list">
            <div class="recommendation-item"><span class="recommendation-number">01</span><div><strong>Close tabs you’re not using</strong><p>Each open tab can use memory and keep background work running.</p></div><span class="recommendation-arrow">↗</span></div>
            <div class="recommendation-item"><span class="recommendation-number">02</span><div><strong>Give your browser a fresh start</strong><p>Restarting can clear temporary work and resolve sluggish pages.</p></div><span class="recommendation-arrow">↗</span></div>
            <div class="recommendation-item"><span class="recommendation-number">03</span><div><strong>Check your available storage</strong><p>Free space can help your operating system and apps work comfortably.</p></div><span class="recommendation-arrow">↗</span></div>
          </div>
          <div class="recommendation-foot"><span class="sparkle">✳</span> Recommendations are based on browser-visible signals.</div>
        </section>
      </div>

      <section class="lower-grid" id="access">
        <article class="panel detail-panel">
          <div class="panel-heading compact-heading"><div><div class="section-kicker">CONNECTION</div><h2>Network &amp; battery</h2></div><span class="mini-live"><i></i> LIVE</span></div>
          <div class="detail-stats">
            <div class="detail-stat"><span class="detail-icon network-icon">⌁</span><div><span class="detail-label">NETWORK</span><strong id="network-value">Checking…</strong><small id="network-detail">Connection details</small></div></div>
            <div class="detail-stat"><span class="detail-icon battery-icon">▰</span><div><span class="detail-label">BATTERY</span><strong id="battery-value">Checking…</strong><small id="battery-detail">Battery status</small></div></div>
          </div>
          <div class="detail-disclaimer" id="network-disclaimer">Network speed and traffic for other apps aren’t exposed to web pages.</div>
        </article>

        <article class="panel access-panel">
          <div class="panel-heading compact-heading"><div><div class="section-kicker">TRANSPARENCY</div><h2>What this browser can see</h2></div><span class="access-lock">⌑</span></div>
          <div class="access-list">
            <div class="access-row"><span class="access-check">✓</span><span>Browser session &amp; connection</span><span class="access-state available">Available</span></div>
            <div class="access-row"><span class="access-check">✓</span><span>Battery &amp; site storage estimate</span><span class="access-state available" id="access-battery">Checking</span></div>
            <div class="access-row restricted-row"><span class="access-cross">–</span><span>System CPU, RAM &amp; disk space</span><span class="access-state restricted">Restricted</span></div>
            <div class="access-row restricted-row"><span class="access-cross">–</span><span>Processes, startup apps &amp; other tabs</span><span class="access-state restricted">Restricted</span></div>
            <div class="access-row restricted-row"><span class="access-cross">–</span><span>Browser extensions &amp; system traffic</span><span class="access-state restricted">Restricted</span></div>
          </div>
        </article>
      </section>
      <footer class="page-footer"><span>Made to make computers make sense.</span><span><i></i> Private by design <b>·</b> No data leaves this device</span></footer>
    </main>
  </div>
</body>
</html>