git-map/branch-map.html at main · ikelaiah/git-map · 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Git Map - Branch Sandbox</title>
  <meta name="description" content="Create branches from commits, add commits, merge, simulate conflicts, undo, reset, and copy the Git commands that produce the graph.">
  <link rel="stylesheet" href="src/styles.css">
</head>
<body>
  <main>
    <section class="topbar branch-topbar" aria-labelledby="page-title">
      <div>
        <h1 id="page-title">Branch Map</h1>
        <p class="intro">Experiment safely: create branches from commits, add commits, switch, merge, simulate conflicts, and copy the Git commands that would produce the graph.</p>
        <aside class="start-here" id="start-here" role="note" hidden>
          <span class="start-here-icon" aria-hidden="true">👉</span>
          <p class="start-here-text">New here? Click a commit in the graph, then <strong>Create from selected commit</strong> to make your first branch.</p>
          <button class="start-here-dismiss" type="button" id="start-here-dismiss" aria-label="Dismiss start here callout">×</button>
        </aside>
        <nav class="page-tabs" aria-label="Git map pages">
          <a href="index.html">Flow Map</a>
          <a href="branch-map.html" aria-current="page">Branch Map</a>
          <a href="panic.html">Panic Recovery</a>
          <a href="https://github.com/ikelaiah/git-map" target="_blank" rel="noopener noreferrer">GitHub</a>
          <span class="app-version"></span>
        </nav>
      </div>
      <div class="control-stack">
        <div class="control-group">
          <span class="control-label" id="theme-label">Appearance</span>
          <div class="segmented-control theme-switch" role="group" aria-labelledby="theme-label">
            <button type="button" data-theme-choice="light" aria-pressed="false">Light</button>
            <button type="button" data-theme-choice="dark" aria-pressed="false">Dark</button>
            <button type="button" data-theme-choice="system" aria-pressed="true">System</button>
          </div>
        </div>
      </div>
    </section>

    <section class="branch-workbench" aria-label="Interactive Git branch sandbox">
      <section class="branch-stage" aria-labelledby="stage-title">
        <div class="branch-stage-header">
          <div>
            <h2 id="stage-title">Branch Graph</h2>
            <p id="stage-hint">Click any commit to create a branch from that point, then add commits or merge it back.</p>
          </div>
          <div class="branch-current" aria-live="polite">
            <span>Current branch</span>
            <strong id="current-branch">main</strong>
          </div>
        </div>
        <div class="branch-graph-shell">
          <svg class="branch-graph" id="branch-graph" viewBox="0 0 980 420" role="img" aria-labelledby="graph-title graph-desc">
            <title id="graph-title">Interactive Git branch graph</title>
            <desc id="graph-desc">A visual Git graph with clickable commits and branch lanes.</desc>
          </svg>
        </div>
      </section>

      <aside class="branch-controls" aria-label="Git branch actions">
        <section class="branch-panel">
          <h2>Actions</h2>

          <div class="action-section">
            <div class="section-title-row">
              <h3>Branch</h3>
              <span id="selected-base">From c2 on main</span>
            </div>
            <label>
              New branch name
              <input id="branch-name" type="text" value="feature-a" autocomplete="off" spellcheck="false">
            </label>
            <button class="primary-action" type="button" id="create-branch">Create from selected commit</button>
          </div>

          <div class="action-section">
            <div class="section-title-row">
              <h3>Commit</h3>
              <span id="commit-target">On main</span>
            </div>
            <label>
              Commit message
              <input id="commit-message" type="text" value="Add first change" autocomplete="off">
            </label>
            <button type="button" id="add-commit">Add commit to current branch</button>
          </div>

          <div class="action-section">
            <div class="section-title-row">
              <h3>Merge</h3>
              <span id="merge-helper">Create a branch first</span>
            </div>
            <button type="button" id="merge-to-main">Merge current branch into main</button>
            <div class="merge-row">
              <label>
                Source
                <select id="merge-source"></select>
              </label>
              <label>
                Into
                <select id="merge-target"></select>
              </label>
              <button type="button" id="merge-selected">Merge</button>
            </div>
          </div>

          <div class="action-section">
            <div class="section-title-row">
              <h3>Conflict</h3>
              <span id="conflict-helper">Same-file edits</span>
            </div>
            <button type="button" id="simulate-conflict">Create conflict scenario</button>
          </div>

          <div class="utility-row">
            <button type="button" id="undo-action">Undo</button>
            <button type="button" id="reset-map">Reset</button>
          </div>
        </section>

        <section class="branch-panel command-history-panel">
          <div class="panel-title-row">
            <h2>Commands</h2>
            <button class="copy-button" type="button" id="copy-history">Copy</button>
          </div>
          <p class="command-note"><strong>Commands are examples.</strong> Commit IDs like <code>c2</code> represent the selected commit SHA or ref in a real repository.</p>
          <ol class="command-history" id="command-history" aria-live="polite"></ol>
        </section>
      </aside>
    </section>
  </main>

  <script src="src/version.js"></script>
  <script src="src/branch-map-model.js"></script>
  <script src="src/branch-map.js"></script>
</body>
</html>