-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
165 lines (156 loc) · 8.77 KB
/
index.html
File metadata and controls
165 lines (156 loc) · 8.77 KB
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Git Map - Flow Map and Git Status Guide</title>
<meta name="description" content="Map where your Git work is, paste git status output, and follow command journeys across stash, workspace, staging, local history, and remote.">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<main>
<section class="topbar" aria-labelledby="page-title">
<div>
<h1 id="page-title">Flow Map</h1>
<p class="intro">See where your work is, what state Git thinks you are in, and which commands move changes between stash, workspace, staging, local history, and remote.</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? Follow the <a href="#daily-path">Beginner Daily Path</a> — pull, edit, add, commit, push.</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" aria-current="page">Flow Map</a>
<a href="branch-map.html">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="view-label">View</span>
<div class="segmented-control mode-switch" role="group" aria-labelledby="view-label">
<button type="button" data-mode="focused" aria-pressed="true">Focused</button>
<button type="button" data-mode="all" aria-pressed="false">Everything</button>
</div>
</div>
<div class="control-group">
<span class="control-label" id="risk-label">Risk</span>
<div class="segmented-control risk-switch" role="group" aria-labelledby="risk-label">
<button type="button" data-risk-filter="safe" aria-pressed="true">Safe first</button>
<button type="button" data-risk-filter="all" aria-pressed="false">Show risky</button>
</div>
</div>
<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>
<div class="map-frame">
<nav class="map-jumps" aria-label="Git area shortcuts"></nav>
<div class="map-shell">
<section class="git-map" aria-label="Git areas">
<svg class="flow-layer" viewBox="0 0 1400 735" preserveAspectRatio="none" aria-hidden="true">
</svg>
<div class="lifeline-labels" aria-hidden="true"></div>
</section>
</div>
</div>
<section class="workflow-console" aria-labelledby="workflow-title">
<div class="workflow-heading">
<h2 id="workflow-title">Situation Solver</h2>
<p>Paste real git status output and match the state to a next route.</p>
</div>
<div class="workflow-grid">
<section class="workflow-card status-lens" aria-labelledby="status-lens-title">
<div class="workflow-card-header">
<div>
<h2 id="status-lens-title">Paste git status</h2>
<p>Analyze branch state, staged files, workspace edits, conflicts, and remote drift.</p>
</div>
</div>
<label class="status-input-label" for="status-paste">Status output</label>
<textarea id="status-paste" rows="8" spellcheck="false" placeholder="On branch main Changes not staged for commit: modified: src/app.js"></textarea>
<div class="workflow-actions">
<button class="status-helper-action" type="button" id="analyze-status">Analyze</button>
<button type="button" id="load-status-sample">Sample</button>
<button type="button" id="clear-status">Clear</button>
</div>
<div class="status-analysis" id="status-analysis" aria-live="polite"></div>
</section>
<section class="workflow-card journey-panel" aria-labelledby="journey-title">
<div class="workflow-card-header">
<div>
<h2 id="journey-title">Scenario journeys</h2>
<p>Step through common Git situations and watch the map follow the command path.</p>
</div>
<label class="journey-select-label">
<span>Journey</span>
<select id="journey-choice"></select>
</label>
</div>
<div class="journey-current" id="journey-current" aria-live="polite"></div>
<div class="journey-controls">
<button type="button" id="journey-prev">Previous</button>
<button class="status-helper-action" type="button" id="journey-next">Next step</button>
</div>
<ol class="journey-steps" id="journey-steps"></ol>
<div class="journey-receipt" id="journey-receipt"></div>
</section>
</div>
</section>
<section class="details" aria-live="polite">
<aside class="legend">
<h2>How To Read It</h2>
<div class="legend-grid">
<div class="legend-item"><span class="legend-dot" style="--dot: var(--blue)"></span><span>Blue flows change files in the local workspace.</span></div>
<div class="legend-item"><span class="legend-dot" style="--dot: var(--amber)"></span><span>Amber flows prepare or unprepare changes for a commit.</span></div>
<div class="legend-item"><span class="legend-dot" style="--dot: var(--green)"></span><span>Green flows create, inspect, or reshape local history.</span></div>
<div class="legend-item"><span class="legend-dot" style="--dot: var(--red)"></span><span>Red flows exchange commits with the shared remote.</span></div>
<div class="legend-item"><span class="legend-dot" style="--dot: var(--violet)"></span><span>Violet flows temporarily store work without committing it.</span></div>
<div class="legend-item"><span class="legend-pill"><b>D</b> Daily</span><span>The daily marker highlights the common pull, add, commit, and push flow.</span></div>
</div>
<div class="learn-section" id="daily-path">
<h3>Beginner Daily Path</h3>
<ol class="path-steps">
<li><b>1</b><span>Sync first with <code>git pull</code>.</span></li>
<li><b>2</b><span>Edit files in your workspace.</span></li>
<li><b>3</b><span>Prepare changes with <code>git add</code>.</span></li>
<li><b>4</b><span>Save locally with <code>git commit</code>.</span></li>
<li><b>5</b><span>Share work with <code>git push</code>.</span></li>
</ol>
</div>
<div class="learn-section status-helper">
<h3>What State Am I In?</h3>
<label class="status-helper-select">
Git status says
<select id="status-helper-choice"></select>
</label>
<div class="status-helper-result" id="status-helper-result"></div>
</div>
</aside>
<section class="command-panel">
<h2 id="command-title">Hover an area</h2>
<p class="mode-note" id="mode-note" hidden></p>
<p class="area-summary" id="area-summary" hidden></p>
<p class="command-note"><strong>Commands are examples.</strong> Replace placeholders such as <code><file></code>, <code><branch></code>, and <code><commit></code> with real paths, branch names, or commit refs.</p>
<p class="empty-state" id="command-help"><strong>Start here:</strong> choose <strong>Local Workspace</strong> if you have edited files, or <strong>Remote Repo</strong> if you are cloning, pulling, or pushing. Focused mode keeps the map simple.</p>
<div class="command-spotlight" id="command-spotlight" hidden></div>
<ul class="command-list" id="command-list"></ul>
<div class="learn-section" id="tool-section" hidden>
<h3 id="tool-title">Useful checks</h3>
<ul class="tool-list" id="tool-list"></ul>
</div>
</section>
</section>
</main>
<script src="src/version.js"></script>
<script src="src/data.js"></script>
<script src="src/app.js"></script>
</body>
</html>