index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="First Commit — a free interactive Git course for complete beginners. Type real git commands in a safe in-browser sandbox and watch the commit graph redraw after every one.">
  <meta name="color-scheme" content="dark">
  <meta property="og:title" content="First Commit — Git, made visible">
  <meta property="og:description" content="A free interactive Git course with a simulated terminal and a live commit-graph visualization. No installs, no account needed, nothing you can break.">
  <title>First Commit — Git, made visible</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='7' fill='%2334d07a'/%3E%3Crect x='14.75' y='2' width='2.5' height='8' rx='1.25' fill='%2334d07a'/%3E%3Crect x='14.75' y='22' width='2.5' height='8' rx='1.25' fill='%2334d07a'/%3E%3C/svg%3E">
  <link rel="preload" href="./assets/fonts/archivo-latin-var.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="./css/tokens.css">
  <link rel="stylesheet" href="./css/landing.css">
</head>
<body>
  <header class="site-header">
    <span class="wordmark">First Commit</span>
    <span class="header-spacer"></span>
    <!-- Filled by ui/landing.js only when an accounts server answers, so the
         static build shows nothing here and promises nothing it cannot do. -->
    <span id="landing-account" hidden></span>
    <a class="btn btn-solid btn-sm" href="./app.html">Open the course</a>
  </header>

  <main>
    <!-- ================================ HERO ============================== -->
    <section class="hero">
      <div class="hero-copy">
        <p class="hero-kicker">A course for people who have never opened a terminal</p>
        <h1>Git, made visible.</h1>
        <p class="hero-sub">
          Branches and commits are invisible in real Git. Here they are not. Type a real command and
          watch the history redraw, files move between the working directory, the staging area and the
          repository, and the terminal answer exactly as Git would.
        </p>
        <div class="hero-ctas">
          <a class="btn btn-solid btn-lg" href="./app.html">Start module 1</a>
          <a class="btn btn-lg" href="./app.html#/playground">Open the playground</a>
        </div>
      </div>
    </section>

    <!-- ============================== PREVIEWS ============================ -->
    <section class="preview" aria-label="What the course looks like">
      <div class="preview-grid">
        <div class="panel panel-inset preview-term">
          <span class="eyebrow">Terminal</span>
          <div class="preview-lines">
            <div class="p">~/pancakes (main) $ git commit -m "Add pancake recipe"</div>
            <div class="o">[main (root-commit) 3f9a1c2] Add pancake recipe</div>
            <div class="d"> 1 file in this snapshot</div>
            <div class="gap"></div>
            <div class="p">~/pancakes (main) $ git status</div>
            <div class="o">On branch main</div>
            <div class="ok">nothing to commit, working tree clean</div>
          </div>
        </div>

        <div class="panel panel-card preview-graph">
          <div class="panel-head"><span class="eyebrow">Commit graph</span></div>
          <div class="preview-graph-body">
            <!-- Static twin of what ui/graph.js draws, same classes and geometry. -->
            <svg viewBox="0 0 436 134" width="436" height="134" role="img"
                 aria-label="A commit graph: three commits on main with HEAD on its tip, and a feature branch of two commits diverging from the second commit.">
              <g>
                <path class="cg-edge lane-0" d="M 61 48 L 139 48"/>
                <path class="cg-edge lane-0" d="M 139 48 L 217 48"/>
                <path class="cg-edge lane-1" d="M 139 48 C 217 48, 217 100, 295 100"/>
                <path class="cg-edge lane-1" d="M 295 100 L 373 100"/>
              </g>
              <g>
                <line class="cg-stem" x1="217" y1="24" x2="217" y2="39"/>
                <line class="cg-stem" x1="373" y1="76" x2="373" y2="91"/>
              </g>
              <g class="graph-node" transform="translate(217,48)">
                <circle class="node-head-ring" r="12"/>
                <circle class="cg-node is-head" r="7"/>
              </g>
              <circle class="cg-node" cx="61" cy="48" r="7"/>
              <circle class="cg-node" cx="139" cy="48" r="7"/>
              <circle class="cg-node" cx="295" cy="100" r="7"/>
              <circle class="cg-node" cx="373" cy="100" r="7"/>
              <text class="cg-sha" x="61" y="70" text-anchor="middle">a3f9e21</text>
              <text class="cg-sha" x="139" y="70" text-anchor="middle">7c1d0b4</text>
              <text class="cg-sha is-head" x="217" y="70" text-anchor="middle">3f9a1c2</text>
              <text class="cg-sha" x="295" y="122" text-anchor="middle">91e4d77</text>
              <text class="cg-sha" x="373" y="122" text-anchor="middle">b52c8af</text>
              <g class="cg-pill kind-head" transform="translate(217,24)">
                <rect x="-47" y="-20" width="94" height="20" rx="10"/>
                <text y="-6" text-anchor="middle">HEAD → main</text>
              </g>
              <g class="cg-pill kind-branch" transform="translate(373,76)">
                <rect x="-34" y="-20" width="68" height="20" rx="10"/>
                <text y="-6" text-anchor="middle">feature</text>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================== FEATURES ============================ -->
    <section class="section" id="how">
      <div class="section-head">
        <h2 class="section-title">Three things this course does differently.</h2>
      </div>
      <div class="feature-grid">
        <div class="feature">
          <span class="f-num">01</span>
          <h3>Three views, one keystroke</h3>
          <p>Terminal output, the commit graph and the file state all answer the same command. Cause and effect, in the same frame.</p>
        </div>
        <div class="feature">
          <span class="f-num">02</span>
          <h3>A simulator, not a script</h3>
          <p>Commands run against a real Git model. Type something the lesson never mentioned and it still behaves — including the errors.</p>
        </div>
        <div class="feature">
          <span class="f-num">03</span>
          <h3>Nothing you can break</h3>
          <p>Reset the exercise, or the whole course. Nothing here can reach your real files, and no repository is at risk.</p>
        </div>
      </div>
    </section>

    <!-- ============================= CURRICULUM =========================== -->
    <section class="section" id="curriculum">
      <div class="section-head">
        <h2 class="section-title">The curriculum</h2>
      </div>
      <!-- Rendered from content/course.json by ui/landing.js — do not hand-edit.
           Add the module to course.json and it shows up here automatically. -->
      <ol class="module-grid" id="module-grid"></ol>
      <p class="curriculum-fallback" id="curriculum-fallback" hidden>
        The full module list lives inside the course —
        <a href="./app.html">open First Commit</a> to browse it.
      </p>
    </section>

    <!-- =============================== VIDEO ============================== -->
    <!-- Revealed by ui/landing.js only when meta.youtubeVideoId is set. -->
    <section class="section" id="video" hidden>
      <div class="section-head">
        <h2 class="section-title">Watch it once through</h2>
      </div>
      <!-- YOUTUBE EMBED SLOT — set meta.youtubeVideoId in content/course.json and
           ui/landing.js swaps this placeholder for the embed. Nothing to edit here. -->
      <div class="video-frame" id="video-frame">
        <div class="video-placeholder">
          <span class="vp-play" aria-hidden="true"></span>
          <p>Walkthrough not yet published</p>
        </div>
      </div>
    </section>

    <!-- =============================== CLOSING ============================ -->
    <section class="closing">
      <div class="closing-slab">
        <h2>Nothing to install. No account required. Works on phones.</h2>
        <p>Everything runs in the page, your progress is saved as you go, and the reset button on
          every exercise means there is nothing here you can break.</p>
        <a class="btn btn-solid btn-lg" href="./app.html">Start module 1</a>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <span class="wordmark">First Commit</span>
    <span class="footer-spacer"></span>
    <a class="footer-note" href="https://github.com/cwon-z/first-commit">Source</a>
    <span class="footer-note">MIT licensed</span>
  </footer>

  <script type="module" src="./ui/landing.js"></script>
</body>
</html>