first-commit/app.html at main · cwon-z/first-commit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn Git from zero in an interactive, in-browser sandbox with a live commit graph.">
  <meta name="color-scheme" content="dark">
  <title>First Commit — interactive Git course</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="preload" href="./assets/fonts/jetbrains-mono-latin-400.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="./css/tokens.css">
  <link rel="stylesheet" href="./css/app.css">
</head>
<body data-mode="read" data-layout="split" data-tab="steps">
  <header id="topbar">
    <button id="menu-btn" class="btn btn-icon" type="button" aria-label="Toggle course navigation" aria-controls="sidebar" aria-expanded="false"><svg class="icon" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg></button>
    <a class="topbar-brand" href="./index.html" title="Back to the landing page">
      <span class="wordmark" id="brand-name">First Commit</span>
    </a>
    <span class="topbar-div" aria-hidden="true"></span>
    <span id="crumb"></span>
    <span class="topbar-spacer"></span>
    <div class="progress-wrap" title="Course progress">
      <div id="progress-bar"><div id="progress-bar-fill"></div></div>
      <span id="progress-pill">0/0</span>
    </div>
    <span id="save-note" hidden>Not saved</span>
    <span id="account" hidden></span>
    <div class="pilltabs" id="layout-tabs" role="group" aria-label="Workspace layout">
      <button type="button" data-layout="split" aria-pressed="true">Split</button>
      <button type="button" data-layout="focus" aria-pressed="false">Focus</button>
    </div>
  </header>

  <div id="layout">
    <nav id="sidebar" aria-label="Course modules">
      <div class="sidebar-metric">
        <span class="eyebrow">Course progress</span>
        <div class="metric-row">
          <span id="progress-metric">0</span>
          <span class="metric-pct">%</span>
          <span id="progress-units">0/0 units</span>
        </div>
      </div>
      <div id="module-nav"></div>
      <div id="sidebar-foot">
        <a class="btn btn-sm btn-block" id="playground-link" href="#/playground">Playground</a>
        <a class="btn btn-sm btn-block btn-ghost" id="states-link" href="#/states">State reference</a>
        <button id="reset-progress" class="btn btn-sm btn-block btn-ghost" type="button">Reset progress</button>
      </div>
    </nav>
    <div id="sidebar-scrim"></div>

    <main id="main">
      <div id="ex-toolbar">
        <span id="ex-title"></span>
        <span id="ex-meter">
          <span class="tick-row" id="ex-ticks" aria-hidden="true"></span>
          <span id="ex-progress"></span>
        </span>
        <span class="topbar-spacer"></span>
        <div class="pilltabs" id="work-tabs" role="tablist" aria-label="Exercise panel">
          <button type="button" role="tab" data-tab="steps" aria-controls="lesson-pane" aria-selected="true">Steps</button>
          <button type="button" role="tab" data-tab="graph" aria-controls="graph-panel" aria-selected="false">Graph</button>
          <button type="button" role="tab" data-tab="files" aria-controls="files-wrap" aria-selected="false">Files</button>
        </div>
        <button id="files-btn" class="btn btn-sm" type="button" aria-pressed="false"><svg class="icon" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M9 3.5h5l4.5 4.5V17H9z"/><path d="M14 3.5V8h4.5"/><path d="M5.5 8v12.5H16"/></svg>Files<span id="files-count"></span></button>
        <button id="reset-btn" class="btn btn-sm btn-ghost" type="button" title="Restore this exercise's starting state"><svg class="icon" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4.5 11a7.5 7.5 0 1 1 1.9 5.6"/><path d="M4 5.5V11h5.5"/></svg>reset</button>
      </div>

      <div id="main-body">
        <section id="lesson-pane">
          <div id="read-progress" aria-hidden="true"><span id="read-progress-fill"></span></div>
          <article id="lesson-article">
            <p class="lesson-p">Loading course…</p>
          </article>
          <div id="exercise-panel"></div>
        </section>

        <section id="workspace" class="hidden">
          <div id="viz-col">
            <div id="graph-panel" class="panel">
              <div class="panel-head">
                <span class="eyebrow">Commit graph</span>
                <span id="graph-headline"></span>
              </div>
              <div id="graph-scroll">
                <svg id="graph-svg" role="img" aria-label="Commit graph visualization"></svg>
              </div>
              <p id="graph-a11y" class="sr-only" aria-live="polite"></p>
            </div>

            <aside id="files-wrap" class="panel" aria-label="File state">
              <div class="panel-head">
                <span class="eyebrow">File state — the three areas</span>
                <span class="topbar-spacer"></span>
                <button id="files-close" class="btn btn-icon" type="button" aria-label="Close the file state panel"><svg class="icon" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12"/><path d="M18 6L6 18"/></svg></button>
              </div>
              <div id="files-panel"></div>
            </aside>
          </div>

          <button id="now-bar" type="button">
            <span class="eyebrow">Now</span>
            <span id="now-text"></span>
            <span id="now-more">more</span>
          </button>

          <div id="terminal-wrap">
            <div id="terminal" role="log"></div>
          </div>
        </section>
      </div>
    </main>
  </div>

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