Hugging Face's logo

Spaces:
Jausing
/
git-basics
Running

App Files Community
Jausing commited on
Commit
6996588
·
verified ·
1 Parent(s): e31b0b3

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +724 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Git Basics
3
- emoji: 🐨
4
- colorFrom: red
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: git-basics
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,724 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Git Basics - Interactive Learning</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .command-box {
11
+ font-family: 'Courier New', monospace;
12
+ background-color: #2d3748;
13
+ color: #f7fafc;
14
+ border-left: 4px solid #4299e1;
15
+ }
16
+ .terminal {
17
+ background-color: #1a202c;
18
+ color: #f7fafc;
19
+ font-family: 'Courier New', monospace;
20
+ height: 300px;
21
+ overflow-y: auto;
22
+ }
23
+ .terminal-line {
24
+ margin-bottom: 0.5rem;
25
+ }
26
+ .terminal-prompt {
27
+ color: #48bb78;
28
+ }
29
+ .terminal-command {
30
+ color: #f7fafc;
31
+ }
32
+ .terminal-output {
33
+ color: #a0aec0;
34
+ }
35
+ .tab-active {
36
+ border-bottom: 3px solid #4299e1;
37
+ }
38
+ .animation-pulse {
39
+ animation: pulse 2s infinite;
40
+ }
41
+ @keyframes pulse {
42
+ 0% { transform: scale(1); }
43
+ 50% { transform: scale(1.05); }
44
+ 100% { transform: scale(1); }
45
+ }
46
+ .branch-visualization {
47
+ height: 300px;
48
+ position: relative;
49
+ }
50
+ .branch-line {
51
+ position: absolute;
52
+ width: 2px;
53
+ background-color: #4299e1;
54
+ left: 50px;
55
+ }
56
+ .commit-circle {
57
+ position: absolute;
58
+ width: 20px;
59
+ height: 20px;
60
+ border-radius: 50%;
61
+ background-color: #4299e1;
62
+ left: 41px;
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ color: white;
67
+ font-weight: bold;
68
+ font-size: 0.75rem;
69
+ }
70
+ .branch-label {
71
+ position: absolute;
72
+ left: 80px;
73
+ font-family: 'Courier New', monospace;
74
+ font-size: 0.9rem;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-100">
79
+ <header class="bg-blue-600 text-white shadow-lg">
80
+ <div class="container mx-auto px-4 py-6">
81
+ <div class="flex justify-between items-center">
82
+ <div class="flex items-center space-x-3">
83
+ <i class="fas fa-code-branch text-3xl"></i>
84
+ <h1 class="text-2xl font-bold">Git Basics</h1>
85
+ </div>
86
+ <nav>
87
+ <ul class="flex space-x-6">
88
+ <li><a href="#intro" class="hover:text-blue-200 transition">Introduction</a></li>
89
+ <li><a href="#commands" class="hover:text-blue-200 transition">Commands</a></li>
90
+ <li><a href="#workflow" class="hover:text-blue-200 transition">Workflow</a></li>
91
+ <li><a href="#practice" class="hover:text-blue-200 transition">Practice</a></li>
92
+ </ul>
93
+ </nav>
94
+ </div>
95
+ </div>
96
+ </header>
97
+
98
+ <main class="container mx-auto px-4 py-8">
99
+ <!-- Introduction Section -->
100
+ <section id="intro" class="mb-16">
101
+ <div class="bg-white rounded-lg shadow-md p-6">
102
+ <h2 class="text-2xl font-bold text-blue-700 mb-4">Introduction to Git</h2>
103
+ <div class="grid md:grid-cols-2 gap-8">
104
+ <div>
105
+ <p class="mb-4 text-gray-700">Git is a distributed version control system that helps developers track changes in their code and collaborate with others.</p>
106
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
107
+ <p class="text-yellow-700"><strong>Key Concept:</strong> Git takes snapshots of your project called "commits" that you can revert to at any time.</p>
108
+ </div>
109
+ <div class="flex items-center mb-4">
110
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
111
+ <i class="fas fa-question-circle text-blue-600 text-xl"></i>
112
+ </div>
113
+ <p class="text-gray-700">Why use Git? It allows you to track changes, experiment with new features safely, and collaborate efficiently with teams.</p>
114
+ </div>
115
+ </div>
116
+ <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
117
+ <h3 class="font-bold text-lg mb-3">Git vs GitHub</h3>
118
+ <div class="mb-4">
119
+ <p class="font-medium text-gray-800">Git:</p>
120
+ <p class="text-gray-600 ml-4">Version control system that runs locally on your machine</p>
121
+ </div>
122
+ <div>
123
+ <p class="font-medium text-gray-800">GitHub:</p>
124
+ <p class="text-gray-600 ml-4">Cloud-based hosting service that uses Git for version control</p>
125
+ </div>
126
+ <div class="mt-6 p-4 bg-blue-50 rounded-lg">
127
+ <p class="text-blue-800">This tutorial focuses on Git commands you can use locally before pushing to services like GitHub.</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Commands Section -->
135
+ <section id="commands" class="mb-16">
136
+ <div class="bg-white rounded-lg shadow-md p-6">
137
+ <h2 class="text-2xl font-bold text-blue-700 mb-6">Essential Git Commands</h2>
138
+
139
+ <div class="mb-8">
140
+ <div class="flex border-b border-gray-200 mb-6">
141
+ <button onclick="showTab('basic')" class="tab-button py-2 px-4 font-medium text-gray-700 hover:text-blue-600 tab-active">Basic</button>
142
+ <button onclick="showTab('branching')" class="tab-button py-2 px-4 font-medium text-gray-700 hover:text-blue-600">Branching</button>
143
+ <button onclick="showTab('remote')" class="tab-button py-2 px-4 font-medium text-gray-700 hover:text-blue-600">Remote</button>
144
+ </div>
145
+
146
+ <div id="basic" class="tab-content">
147
+ <div class="grid md:grid-cols-2 gap-6">
148
+ <div class="command-card">
149
+ <h3 class="font-bold text-lg mb-2 flex items-center">
150
+ <span class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
151
+ <i class="fas fa-folder-open"></i>
152
+ </span>
153
+ Initialize a Repository
154
+ </h3>
155
+ <div class="command-box p-4 rounded mb-3">
156
+ <code>git init</code>
157
+ </div>
158
+ <p class="text-gray-600">Creates a new Git repository in your current directory.</p>
159
+ </div>
160
+
161
+ <div class="command-card">
162
+ <h3 class="font-bold text-lg mb-2 flex items-center">
163
+ <span class="bg-green-100 text-green-700 p-2 rounded-full mr-3">
164
+ <i class="fas fa-plus-circle"></i>
165
+ </span>
166
+ Stage Changes
167
+ </h3>
168
+ <div class="command-box p-4 rounded mb-3">
169
+ <code>git add &lt;file&gt;</code><br>
170
+ <code>git add .</code>
171
+ </div>
172
+ <p class="text-gray-600">Prepares changes for commit (staging area).</p>
173
+ </div>
174
+
175
+ <div class="command-card">
176
+ <h3 class="font-bold text-lg mb-2 flex items-center">
177
+ <span class="bg-purple-100 text-purple-700 p-2 rounded-full mr-3">
178
+ <i class="fas fa-save"></i>
179
+ </span>
180
+ Commit Changes
181
+ </h3>
182
+ <div class="command-box p-4 rounded mb-3">
183
+ <code>git commit -m "Your message"</code>
184
+ </div>
185
+ <p class="text-gray-600">Takes a snapshot of your staged changes with a descriptive message.</p>
186
+ </div>
187
+
188
+ <div class="command-card">
189
+ <h3 class="font-bold text-lg mb-2 flex items-center">
190
+ <span class="bg-yellow-100 text-yellow-700 p-2 rounded-full mr-3">
191
+ <i class="fas fa-history"></i>
192
+ </span>
193
+ Check Status
194
+ </h3>
195
+ <div class="command-box p-4 rounded mb-3">
196
+ <code>git status</code>
197
+ </div>
198
+ <p class="text-gray-600">Shows which files are modified, staged, or untracked.</p>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <div id="branching" class="tab-content hidden">
204
+ <div class="grid md:grid-cols-2 gap-6">
205
+ <div class="command-card">
206
+ <h3 class="font-bold text-lg mb-2 flex items-center">
207
+ <span class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
208
+ <i class="fas fa-code-branch"></i>
209
+ </span>
210
+ Create Branch
211
+ </h3>
212
+ <div class="command-box p-4 rounded mb-3">
213
+ <code>git branch &lt;branch-name&gt;</code>
214
+ </div>
215
+ <p class="text-gray-600">Creates a new branch at your current commit.</p>
216
+ </div>
217
+
218
+ <div class="command-card">
219
+ <h3 class="font-bold text-lg mb-2 flex items-center">
220
+ <span class="bg-green-100 text-green-700 p-2 rounded-full mr-3">
221
+ <i class="fas fa-exchange-alt"></i>
222
+ </span>
223
+ Switch Branch
224
+ </h3>
225
+ <div class="command-box p-4 rounded mb-3">
226
+ <code>git checkout &lt;branch-name&gt;</code><br>
227
+ <code>git switch &lt;branch-name&gt;</code>
228
+ </div>
229
+ <p class="text-gray-600">Moves you to the specified branch.</p>
230
+ </div>
231
+
232
+ <div class="command-card">
233
+ <h3 class="font-bold text-lg mb-2 flex items-center">
234
+ <span class="bg-purple-100 text-purple-700 p-2 rounded-full mr-3">
235
+ <i class="fas fa-code-merge"></i>
236
+ </span>
237
+ Merge Branches
238
+ </h3>
239
+ <div class="command-box p-4 rounded mb-3">
240
+ <code>git merge &lt;branch-name&gt;</code>
241
+ </div>
242
+ <p class="text-gray-600">Combines changes from the specified branch into your current branch.</p>
243
+ </div>
244
+
245
+ <div class="command-card">
246
+ <h3 class="font-bold text-lg mb-2 flex items-center">
247
+ <span class="bg-yellow-100 text-yellow-700 p-2 rounded-full mr-3">
248
+ <i class="fas fa-list-ul"></i>
249
+ </span>
250
+ List Branches
251
+ </h3>
252
+ <div class="command-box p-4 rounded mb-3">
253
+ <code>git branch</code><br>
254
+ <code>git branch -a</code>
255
+ </div>
256
+ <p class="text-gray-600">Shows all local (and remote with -a) branches.</p>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div id="remote" class="tab-content hidden">
262
+ <div class="grid md:grid-cols-2 gap-6">
263
+ <div class="command-card">
264
+ <h3 class="font-bold text-lg mb-2 flex items-center">
265
+ <span class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
266
+ <i class="fas fa-cloud-upload-alt"></i>
267
+ </span>
268
+ Connect to Remote
269
+ </h3>
270
+ <div class="command-box p-4 rounded mb-3">
271
+ <code>git remote add origin &lt;url&gt;</code>
272
+ </div>
273
+ <p class="text-gray-600">Links your local repo to a remote repository.</p>
274
+ </div>
275
+
276
+ <div class="command-card">
277
+ <h3 class="font-bold text-lg mb-2 flex items-center">
278
+ <span class="bg-green-100 text-green-700 p-2 rounded-full mr-3">
279
+ <i class="fas fa-cloud-download-alt"></i>
280
+ </span>
281
+ Push Changes
282
+ </h3>
283
+ <div class="command-box p-4 rounded mb-3">
284
+ <code>git push -u origin &lt;branch&gt;</code>
285
+ </div>
286
+ <p class="text-gray-600">Uploads your commits to the remote repository.</p>
287
+ </div>
288
+
289
+ <div class="command-card">
290
+ <h3 class="font-bold text-lg mb-2 flex items-center">
291
+ <span class="bg-purple-100 text-purple-700 p-2 rounded-full mr-3">
292
+ <i class="fas fa-download"></i>
293
+ </span>
294
+ Pull Changes
295
+ </h3>
296
+ <div class="command-box p-4 rounded mb-3">
297
+ <code>git pull</code>
298
+ </div>
299
+ <p class="text-gray-600">Downloads changes from the remote repository.</p>
300
+ </div>
301
+
302
+ <div class="command-card">
303
+ <h3 class="font-bold text-lg mb-2 flex items-center">
304
+ <span class="bg-yellow-100 text-yellow-700 p-2 rounded-full mr-3">
305
+ <i class="fas fa-clone"></i>
306
+ </span>
307
+ Clone Repository
308
+ </h3>
309
+ <div class="command-box p-4 rounded mb-3">
310
+ <code>git clone &lt;url&gt;</code>
311
+ </div>
312
+ <p class="text-gray-600">Creates a local copy of a remote repository.</p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </section>
319
+
320
+ <!-- Workflow Section -->
321
+ <section id="workflow" class="mb-16">
322
+ <div class="bg-white rounded-lg shadow-md p-6">
323
+ <h2 class="text-2xl font-bold text-blue-700 mb-6">Git Workflow</h2>
324
+
325
+ <div class="grid md:grid-cols-2 gap-8">
326
+ <div>
327
+ <h3 class="text-xl font-semibold mb-4">Basic Workflow</h3>
328
+ <ol class="space-y-4">
329
+ <li class="flex items-start">
330
+ <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</span>
331
+ <div>
332
+ <p class="font-medium">Initialize or clone a repository</p>
333
+ <p class="text-gray-600 text-sm">Start tracking your project or get a copy of an existing one</p>
334
+ </div>
335
+ </li>
336
+ <li class="flex items-start">
337
+ <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</span>
338
+ <div>
339
+ <p class="font-medium">Create a branch for your changes</p>
340
+ <p class="text-gray-600 text-sm">Keep your work isolated from the main codebase</p>
341
+ </div>
342
+ </li>
343
+ <li class="flex items-start">
344
+ <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</span>
345
+ <div>
346
+ <p class="font-medium">Make changes and commit them</p>
347
+ <p class="text-gray-600 text-sm">Stage and save your work with descriptive messages</p>
348
+ </div>
349
+ </li>
350
+ <li class="flex items-start">
351
+ <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">4</span>
352
+ <div>
353
+ <p class="font-medium">Push your branch to the remote</p>
354
+ <p class="text-gray-600 text-sm">Share your work with others</p>
355
+ </div>
356
+ </li>
357
+ <li class="flex items-start">
358
+ <span class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">5</span>
359
+ <div>
360
+ <p class="font-medium">Create a pull/merge request</p>
361
+ <p class="text-gray-600 text-sm">Propose your changes to be merged into the main branch</p>
362
+ </div>
363
+ </li>
364
+ </ol>
365
+ </div>
366
+
367
+ <div>
368
+ <h3 class="text-xl font-semibold mb-4">Branch Visualization</h3>
369
+ <div class="branch-visualization bg-gray-50 p-4 rounded-lg border border-gray-200">
370
+ <div class="branch-line" style="height: 250px; top: 20px;"></div>
371
+
372
+ <!-- Main branch -->
373
+ <div class="commit-circle" style="top: 40px;">C1</div>
374
+ <div class="branch-label" style="top: 35px;">main</div>
375
+
376
+ <div class="commit-circle" style="top: 90px;">C2</div>
377
+ <div class="commit-circle" style="top: 140px;">C3</div>
378
+
379
+ <!-- Feature branch -->
380
+ <div class="commit-circle bg-green-500" style="top: 90px; left: 100px;">F1</div>
381
+ <div class="branch-label" style="top: 85px; left: 130px;">feature/login</div>
382
+
383
+ <div class="commit-circle bg-green-500" style="top: 140px; left: 100px;">F2</div>
384
+
385
+ <!-- Merge commit -->
386
+ <div class="commit-circle bg-purple-500" style="top: 190px;">C4</div>
387
+ <div class="branch-label" style="top: 185px;">Merge: feature/login → main</div>
388
+
389
+ <!-- Branch line for feature -->
390
+ <div class="branch-line bg-green-500" style="height: 60px; top: 90px; left: 100px;"></div>
391
+ <div class="branch-line" style="width: 50px; height: 2px; top: 90px; left: 50px;"></div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="mt-8 bg-blue-50 p-6 rounded-lg">
397
+ <h3 class="text-lg font-semibold text-blue-800 mb-3">Best Practices</h3>
398
+ <ul class="space-y-2 text-blue-700">
399
+ <li class="flex items-start">
400
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
401
+ <span>Commit often with meaningful messages</span>
402
+ </li>
403
+ <li class="flex items-start">
404
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
405
+ <span>Create branches for new features or bug fixes</span>
406
+ </li>
407
+ <li class="flex items-start">
408
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
409
+ <span>Pull changes frequently to stay up-to-date</span>
410
+ </li>
411
+ <li class="flex items-start">
412
+ <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
413
+ <span>Review changes before merging</span>
414
+ </li>
415
+ </ul>
416
+ </div>
417
+ </div>
418
+ </section>
419
+
420
+ <!-- Practice Section -->
421
+ <section id="practice" class="mb-16">
422
+ <div class="bg-white rounded-lg shadow-md p-6">
423
+ <h2 class="text-2xl font-bold text-blue-700 mb-6">Interactive Terminal</h2>
424
+
425
+ <div class="grid md:grid-cols-2 gap-8">
426
+ <div>
427
+ <h3 class="text-xl font-semibold mb-4">Try Git Commands</h3>
428
+ <p class="text-gray-600 mb-4">Type basic Git commands below to see simulated output:</p>
429
+
430
+ <div class="mb-4">
431
+ <div class="flex items-center bg-gray-800 text-white px-4 py-2 rounded-t-lg">
432
+ <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
433
+ <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
434
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
435
+ <div class="ml-auto text-sm">Git Terminal</div>
436
+ </div>
437
+ <div class="terminal p-4 rounded-b-lg">
438
+ <div id="terminal-output">
439
+ <div class="terminal-line">
440
+ <span class="terminal-prompt">$ </span>
441
+ <span class="terminal-command">git init</span>
442
+ </div>
443
+ <div class="terminal-line terminal-output">
444
+ Initialized empty Git repository in /projects/learn-git/.git/
445
+ </div>
446
+ <div class="terminal-line">
447
+ <span class="terminal-prompt">$ </span>
448
+ <span class="terminal-command">git status</span>
449
+ </div>
450
+ <div class="terminal-line terminal-output">
451
+ On branch main<br>
452
+ No commits yet<br>
453
+ nothing to commit (create/copy files and use "git add" to track)
454
+ </div>
455
+ </div>
456
+ <div class="terminal-line mt-4">
457
+ <span class="terminal-prompt">$ </span>
458
+ <input type="text" id="command-input" class="terminal-command bg-transparent border-none outline-none w-4/5" placeholder="Type a git command..." autocomplete="off">
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
464
+ <p class="text-yellow-700">Try these commands: <span class="font-mono bg-yellow-100 px-2 py-1 rounded">git add .</span>, <span class="font-mono bg-yellow-100 px-2 py-1 rounded">git commit -m "message"</span>, <span class="font-mono bg-yellow-100 px-2 py-1 rounded">git branch new-feature</span></p>
465
+ </div>
466
+ </div>
467
+
468
+ <div>
469
+ <h3 class="text-xl font-semibold mb-4">Common Scenarios</h3>
470
+
471
+ <div class="space-y-4">
472
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('undo')">
473
+ <h4 class="font-medium flex items-center">
474
+ <i class="fas fa-undo-alt text-blue-600 mr-2"></i>
475
+ Undo the last commit
476
+ </h4>
477
+ <p class="text-gray-600 text-sm mt-1">Keep changes but undo the commit</p>
478
+ </div>
479
+
480
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('discard')">
481
+ <h4 class="font-medium flex items-center">
482
+ <i class="fas fa-trash-alt text-red-600 mr-2"></i>
483
+ Discard local changes
484
+ </h4>
485
+ <p class="text-gray-600 text-sm mt-1">Revert files to last committed state</p>
486
+ </div>
487
+
488
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('merge')">
489
+ <h4 class="font-medium flex items-center">
490
+ <i class="fas fa-code-merge text-purple-600 mr-2"></i>
491
+ Resolve merge conflicts
492
+ </h4>
493
+ <p class="text-gray-600 text-sm mt-1">What to do when Git can't auto-merge</p>
494
+ </div>
495
+
496
+ <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('stash')">
497
+ <h4 class="font-medium flex items-center">
498
+ <i class="fas fa-archive text-green-600 mr-2"></i>
499
+ Temporarily save changes
500
+ </h4>
501
+ <p class="text-gray-600 text-sm mt-1">When you need to switch branches but aren't ready to commit</p>
502
+ </div>
503
+ </div>
504
+
505
+ <div id="scenario-info" class="mt-6 p-4 bg-gray-50 rounded-lg hidden">
506
+ <h4 id="scenario-title" class="font-bold mb-2"></h4>
507
+ <div id="scenario-solution" class="command-box p-4 rounded mb-2"></div>
508
+ <p id="scenario-explanation" class="text-gray-600 text-sm"></p>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </section>
514
+
515
+ <!-- Cheat Sheet -->
516
+ <section class="mb-16">
517
+ <div class="bg-white rounded-lg shadow-md p-6">
518
+ <h2 class="text-2xl font-bold text-blue-700 mb-6">Git Cheat Sheet</h2>
519
+
520
+ <div class="grid md:grid-cols-3 gap-6">
521
+ <div class="bg-blue-50 p-4 rounded-lg">
522
+ <h3 class="font-bold text-blue-800 mb-3 flex items-center">
523
+ <i class="fas fa-bookmark text-blue-600 mr-2"></i>
524
+ Setup & Config
525
+ </h3>
526
+ <ul class="space-y-2">
527
+ <li class="flex">
528
+ <span class="font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded mr-2">git config --global user.name "Your Name"</span>
529
+ <span class="text-sm text-blue-700">Set your username</span>
530
+ </li>
531
+ <li class="flex">
532
+ <span class="font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded mr-2">git config --global user.email "email@example.com"</span>
533
+ <span class="text-sm text-blue-700">Set your email</span>
534
+ </li>
535
+ <li class="flex">
536
+ <span class="font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded mr-2">git config --list</span>
537
+ <span class="text-sm text-blue-700">View configuration</span>
538
+ </li>
539
+ </ul>
540
+ </div>
541
+
542
+ <div class="bg-green-50 p-4 rounded-lg">
543
+ <h3 class="font-bold text-green-800 mb-3 flex items-center">
544
+ <i class="fas fa-history text-green-600 mr-2"></i>
545
+ Inspection
546
+ </h3>
547
+ <ul class="space-y-2">
548
+ <li class="flex">
549
+ <span class="font-mono bg-green-100 text-green-800 px-2 py-1 rounded mr-2">git log</span>
550
+ <span class="text-sm text-green-700">Show commit history</span>
551
+ </li>
552
+ <li class="flex">
553
+ <span class="font-mono bg-green-100 text-green-800 px-2 py-1 rounded mr-2">git log --oneline</span>
554
+ <span class="text-sm text-green-700">Compact commit history</span>
555
+ </li>
556
+ <li class="flex">
557
+ <span class="font-mono bg-green-100 text-green-800 px-2 py-1 rounded mr-2">git diff</span>
558
+ <span class="text-sm text-green-700">Show unstaged changes</span>
559
+ </li>
560
+ </ul>
561
+ </div>
562
+
563
+ <div class="bg-purple-50 p-4 rounded-lg">
564
+ <h3 class="font-bold text-purple-800 mb-3 flex items-center">
565
+ <i class="fas fa-fire-extinguisher text-purple-600 mr-2"></i>
566
+ Undoing
567
+ </h3>
568
+ <ul class="space-y-2">
569
+ <li class="flex">
570
+ <span class="font-mono bg-purple-100 text-purple-800 px-2 py-1 rounded mr-2">git reset &lt;file&gt;</span>
571
+ <span class="text-sm text-purple-700">Unstage a file</span>
572
+ </li>
573
+ <li class="flex">
574
+ <span class="font-mono bg-purple-100 text-purple-800 px-2 py-1 rounded mr-2">git checkout -- &lt;file&gt;</span>
575
+ <span class="text-sm text-purple-700">Discard changes</span>
576
+ </li>
577
+ <li class="flex">
578
+ <span class="font-mono bg-purple-100 text-purple-800 px-2 py-1 rounded mr-2">git revert &lt;commit&gt;</span>
579
+ <span class="text-sm text-purple-700">Create new commit that undoes a previous commit</span>
580
+ </li>
581
+ </ul>
582
+ </div>
583
+ </div>
584
+
585
+ <div class="mt-6 text-center">
586
+ <button onclick="downloadCheatSheet()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg inline-flex items-center animation-pulse">
587
+ <i class="fas fa-download mr-2"></i>
588
+ Download Full Cheat Sheet
589
+ </button>
590
+ </div>
591
+ </div>
592
+ </section>
593
+ </main>
594
+
595
+ <footer class="bg-gray-800 text-white py-8">
596
+ <div class="container mx-auto px-4">
597
+ <div class="flex flex-col md:flex-row justify-between items-center">
598
+ <div class="mb-4 md:mb-0">
599
+ <div class="flex items-center">
600
+ <i class="fas fa-code-branch text-2xl mr-2 text-blue-400"></i>
601
+ <span class="text-xl font-bold">Git Basics</span>
602
+ </div>
603
+ <p class="text-gray-400 mt-1">Learn version control the interactive way</p>
604
+ </div>
605
+ <div class="flex space-x-6">
606
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
607
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
608
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord text-xl"></i></a>
609
+ </div>
610
+ </div>
611
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
612
+ <p>© 2023 Git Basics Interactive Tutorial. All content is for educational purposes.</p>
613
+ </div>
614
+ </div>
615
+ </footer>
616
+
617
+ <script>
618
+ // Tab switching functionality
619
+ function showTab(tabId) {
620
+ // Hide all tab contents
621
+ document.querySelectorAll('.tab-content').forEach(tab => {
622
+ tab.classList.add('hidden');
623
+ });
624
+
625
+ // Remove active class from all tab buttons
626
+ document.querySelectorAll('.tab-button').forEach(button => {
627
+ button.classList.remove('tab-active');
628
+ });
629
+
630
+ // Show selected tab content
631
+ document.getElementById(tabId).classList.remove('hidden');
632
+
633
+ // Add active class to clicked button
634
+ event.target.classList.add('tab-active');
635
+ }
636
+
637
+ // Scenario display functionality
638
+ function showScenario(scenario) {
639
+ const scenarioInfo = document.getElementById('scenario-info');
640
+ const title = document.getElementById('scenario-title');
641
+ const solution = document.getElementById('scenario-solution');
642
+ const explanation = document.getElementById('scenario-explanation');
643
+
644
+ scenarioInfo.classList.remove('hidden');
645
+
646
+ switch(scenario) {
647
+ case 'undo':
648
+ title.innerHTML = '<i class="fas fa-undo-alt text-blue-600 mr-2"></i> Undo the last commit';
649
+ solution.innerHTML = '<code>git reset --soft HEAD~1</code>';
650
+ explanation.textContent = 'This keeps your changes staged but removes the last commit. Use --hard instead of --soft to also unstage changes.';
651
+ break;
652
+ case 'discard':
653
+ title.innerHTML = '<i class="fas fa-trash-alt text-red-600 mr-2"></i> Discard local changes';
654
+ solution.innerHTML = '<code>git checkout -- .</code><br><code>git clean -fd</code>';
655
+ explanation.textContent = 'The first command discards changes to tracked files. The second removes untracked files and directories.';
656
+ break;
657
+ case 'merge':
658
+ title.innerHTML = '<i class="fas fa-code-merge text-purple-600 mr-2"></i> Resolve merge conflicts';
659
+ solution.innerHTML = '<code># After merge conflict occurs:<br>git status # See conflicted files<br># Edit files to resolve conflicts<br>git add .<br>git commit</code>';
660
+ explanation.textContent = 'Git marks conflicts in files. Edit them to keep the desired changes, then add and commit to complete the merge.';
661
+ break;
662
+ case 'stash':
663
+ title.innerHTML = '<i class="fas fa-archive text-green-600 mr-2"></i> Temporarily save changes';
664
+ solution.innerHTML = '<code>git stash<br># Do other work...<br>git stash pop</code>';
665
+ explanation.textContent = 'Stash saves uncommitted changes so you can switch branches. Pop reapplies them when you\'re ready.';
666
+ break;
667
+ }
668
+ }
669
+
670
+ // Terminal simulation
671
+ document.getElementById('command-input').addEventListener('keypress', function(e) {
672
+ if (e.key === 'Enter') {
673
+ const command = this.value.trim();
674
+ this.value = '';
675
+
676
+ if (!command) return;
677
+
678
+ const outputDiv = document.getElementById('terminal-output');
679
+ const promptLine = document.createElement('div');
680
+ promptLine.className = 'terminal-line';
681
+ promptLine.innerHTML = `<span class="terminal-prompt">$ </span><span class="terminal-command">${command}</span>`;
682
+ outputDiv.appendChild(promptLine);
683
+
684
+ // Simulate command output
685
+ const responseLine = document.createElement('div');
686
+ responseLine.className = 'terminal-line terminal-output';
687
+
688
+ // Basic command responses
689
+ if (command.startsWith('git init')) {
690
+ responseLine.textContent = 'Initialized empty Git repository in /projects/learn-git/.git/';
691
+ } else if (command.startsWith('git add')) {
692
+ responseLine.textContent = 'Changes staged for commit';
693
+ } else if (command.startsWith('git commit')) {
694
+ responseLine.textContent = `[main abc1234] ${command.replace('git commit -m ', '').replace(/"/g, '')}\n 1 file changed, 2 insertions(+)`;
695
+ } else if (command.startsWith('git status')) {
696
+ responseLine.innerHTML = 'On branch main<br>Changes to be committed:<br> (use "git restore --staged &lt;file&gt;..." to unstage)<br> modified: index.html';
697
+ } else if (command.startsWith('git branch')) {
698
+ const branchName = command.replace('git branch ', '');
699
+ if (branchName === 'git branch') {
700
+ responseLine.innerHTML = '* main<br> new-feature';
701
+ } else {
702
+ responseLine.textContent = `Created branch '${branchName}'`;
703
+ }
704
+ } else if (command.startsWith('git checkout') || command.startsWith('git switch')) {
705
+ const branchName = command.replace('git checkout ', '').replace('git switch ', '');
706
+ responseLine.textContent = `Switched to branch '${branchName}'`;
707
+ } else {
708
+ responseLine.textContent = `Command '${command.split(' ')[0]}' not recognized in this simulation. Try basic Git commands like init, add, commit, status, branch.`;
709
+ }
710
+
711
+ outputDiv.appendChild(responseLine);
712
+
713
+ // Scroll to bottom
714
+ outputDiv.parentNode.scrollTop = outputDiv.parentNode.scrollHeight;
715
+ }
716
+ });
717
+
718
+ // Cheat sheet download
719
+ function downloadCheatSheet() {
720
+ alert('In a real implementation, this would download a PDF cheat sheet. This is just a simulation.');
721
+ }
722
+ </script>
723
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jausing/git-basics" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
724
+ </html>
prompts.txt ADDED
File without changes