index.html

<!doctype html>
<!--
  Code Explorer uses semantic HTML so the page remains understandable before
  JavaScript loads and so assistive technology can identify its major regions.
-->
<html lang="en">
  <head>
    <!-- UTF-8 allows the interface to use symbols such as arrows and status glyphs safely. -->
    <meta charset="UTF-8" />
    <!-- The viewport declaration makes the responsive CSS use the device's real width. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Search engines and link previews use this short explanation of the application. -->
    <meta
      name="description"
      content="Explore Python programs, data structures, and algorithms visually in your browser."
    />
    <!-- This advertises that both theme families are supported by native browser controls. -->
    <meta name="color-scheme" content="dark light" />
    <!-- The title appears in the browser tab and in bookmarks. -->
    <title>Code Explorer | See Python Think</title>
    <!-- The small terminal mark gives the browser tab a recognizable project icon. -->
    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
    <!-- All application styling lives in one readable stylesheet. -->
    <!--
      The version query keeps the landing page synchronized with workspace
      styling when a browser or GitHub Pages has cached an earlier release.
    -->
    <link rel="stylesheet" href="styles.css?v=20260728-35" />
  </head>
  <body>
    <!-- This decorative grid sits behind the application and is hidden from screen readers. -->
    <div class="ambient-grid" aria-hidden="true"></div>

    <!--
      The persistent header provides project identity, a local-execution cue,
      theme control, and a path to the source repository.
    -->
    <header class="site-header">
      <!-- The brand is a normal page link, so it also works before JavaScript loads. -->
      <a class="brand" href="index.html" aria-label="Code Explorer home">
        <span class="brand-mark" aria-hidden="true">&gt;_</span>
        <span>CODE EXPLORER</span>
      </a>
      <!-- The landing page reports its browser-only model and exposes shared controls. -->
      <div class="header-actions">
        <!-- Text accompanies the dot so color is never the only privacy or readiness signal. -->
        <span class="runtime-status ready">
          <span class="status-dot"></span>
          <span>Browser based</span>
        </span>
        <!-- The visible action text removes any guesswork about what the theme control will do. -->
        <button class="icon-button theme-button" id="themeButton" type="button" aria-label="Switch to dark mode">
          <span id="themeLabel">Dark mode</span>
        </button>
        <!-- This external link lets contributors reach the open-source repository. -->
        <a class="icon-button" href="https://github.com/amanalip/code-explorer" target="_blank" rel="noreferrer" aria-label="Open Code Explorer on GitHub">
          <!-- The familiar GitHub mark provides a polished visual cue while the link retains a complete accessible name. -->
          <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
            <!-- This vector path uses the control's current text color, so it remains clear in both themes and hover states. -->
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82A7.65 7.65 0 0 1 8 4.58c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
          </svg>
        </a>
      </div>
    </header>

    <!-- The main element contains the landing page's introductory content. -->
    <main>
      <!--
        The welcome screen explains the learning promise before exposing the
        more complex execution workspace. It is visible on the first visit.
      -->
      <section class="welcome-screen" id="welcomeScreen">
        <!-- This column contains the primary message and entry actions. -->
        <div class="hero-copy">
          <div class="eyebrow"><span></span> Python, unpacked</div>
          <h1>Do not just run code.<br /><em>Watch it think.</em></h1>
          <p class="hero-description">
            Paste a Python program and follow every variable, loop, and output as it happens.
            Everything runs privately inside your browser.
          </p>
          <!-- Each explicit action opens one separate learning workspace. -->
          <div class="hero-actions">
            <!-- The existing workspace keeps the complete Python execution curriculum. -->
            <a class="primary-button" href="workspace.html">
              Start exploring Python <span aria-hidden="true">→</span>
            </a>
            <!-- The DSA action states both the invitation and the complete subject name. -->
            <a class="primary-button" href="data-structures.html">
              Start exploring Python Data Structures and Algorithms <span aria-hidden="true">→</span>
            </a>
          </div>
          <!-- These chips summarize the broader Python concepts and execution details learners can explore. -->
          <div class="feature-chips" aria-label="Supported topics and learning views">
            <!-- The first group names the fundamental language concepts most beginners learn first. -->
            <span>variables</span>
            <span>conditions</span>
            <span>loops</span>
            <span>functions</span>
            <!-- These data and interaction topics reflect the expanded example library and trace tools. -->
            <span>lists</span>
            <span>dictionaries</span>
            <span>input</span>
            <span>errors</span>
            <!-- These final concepts highlight the deeper runtime explanations unique to the workspace. -->
            <span>references</span>
            <span>call stack</span>
            <!-- The second workspace expands the project into visual DSA study. -->
            <span>data structures</span>
            <span>algorithms</span>
            <span>comparisons</span>
            <span>complexity</span>
          </div>
        </div>

        <!--
          This static terminal preview demonstrates the product visually before
          the heavier Python runtime is downloaded.
        -->
        <div class="hero-terminal" aria-label="Example execution preview">
          <!-- Familiar window controls and a file label establish the terminal metaphor. -->
          <div class="terminal-topbar">
            <div class="terminal-dots"><span></span><span></span><span></span></div>
            <span>trace_preview.py</span>
            <span>LIVE</span>
          </div>
          <!-- The terminal body pairs sample source code with a sample trace card. -->
          <div class="terminal-body">
            <!-- This small example highlights the line currently being explained. -->
            <div class="terminal-code">
              <span class="line-number">01</span><code><b>total</b> = 0</code>
              <span class="line-number">02</span><code><i>for</i> number <i>in</i> range(3):</code>
              <span class="line-number active">03</span><code class="active">&nbsp;&nbsp;<b>total</b> += number</code>
              <span class="line-number">04</span><code>print(<b>total</b>)</code>
            </div>
            <!-- The preview card demonstrates how variable changes will be narrated. -->
            <div class="trace-card-preview">
              <div class="trace-card-label">TRACE // STEP 03</div>
              <p>Python added <code>number</code> to <code>total</code>.</p>
              <div class="preview-change">
                <span>total</span><span>0</span><span>→</span><strong>1</strong>
              </div>
              <div class="preview-change">
                <span>number</span><span>0</span><span>→</span><strong>1</strong>
              </div>
            </div>
          </div>
          <!-- Footer labels reinforce loop progress and private client-side execution. -->
          <div class="terminal-footer">
            <span>● ITERATION 02 / 03</span>
            <span>100% CLIENT SIDE</span>
          </div>
        </div>
      </section>

    </main>

    <!-- The shared site footer records project ownership without competing with the learning interface. -->
    <footer class="site-footer">
      <!-- A short copyright line remains readable in both themes and at every responsive width. -->
      <small>&copy; 2026 Aman Ali Pogaku</small>
    </footer>

    <!-- The landing controller owns only the theme because catalogs now live inside their workspaces. -->
    <script type="module" src="landing.js?v=20260728-35"></script>
  </body>
</html>