Hugging Face's logo

Spaces:
Jausing
/
git-basics
Running

App Files Community
git-basics / index.html
Jausing's picture
Jausing
Add 3 files
6996588 verified
raw
history blame contribute delete
42.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Git Basics - Interactive Learning</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .command-box {
 font-family: 'Courier New', monospace;
 background-color: #2d3748;
 color: #f7fafc;
 border-left: 4px solid #4299e1;
 }
 .terminal {
 background-color: #1a202c;
 color: #f7fafc;
 font-family: 'Courier New', monospace;
 height: 300px;
 overflow-y: auto;
 }
 .terminal-line {
 margin-bottom: 0.5rem;
 }
 .terminal-prompt {
 color: #48bb78;
 }
 .terminal-command {
 color: #f7fafc;
 }
 .terminal-output {
 color: #a0aec0;
 }
 .tab-active {
 border-bottom: 3px solid #4299e1;
 }
 .animation-pulse {
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
 .branch-visualization {
 height: 300px;
 position: relative;
 }
 .branch-line {
 position: absolute;
 width: 2px;
 background-color: #4299e1;
 left: 50px;
 }
 .commit-circle {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #4299e1;
 left: 41px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-weight: bold;
 font-size: 0.75rem;
 }
 .branch-label {
 position: absolute;
 left: 80px;
 font-family: 'Courier New', monospace;
 font-size: 0.9rem;
 }
 </style>
</head>
<body class="bg-gray-100">
 <header class="bg-blue-600 text-white shadow-lg">
 <div class="container mx-auto px-4 py-6">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-3">
 <i class="fas fa-code-branch text-3xl"></i>
 <h1 class="text-2xl font-bold">Git Basics</h1>
 </div>
 <nav>
 <ul class="flex space-x-6">
 <li><a href="#intro" class="hover:text-blue-200 transition">Introduction</a></li>
 <li><a href="#commands" class="hover:text-blue-200 transition">Commands</a></li>
 <li><a href="#workflow" class="hover:text-blue-200 transition">Workflow</a></li>
 <li><a href="#practice" class="hover:text-blue-200 transition">Practice</a></li>
 </ul>
 </nav>
 </div>
 </div>
 </header>
<main class="container mx-auto px-4 py-8">
 <!-- Introduction Section -->
 <section id="intro" class="mb-16">
 <div class="bg-white rounded-lg shadow-md p-6">
 <h2 class="text-2xl font-bold text-blue-700 mb-4">Introduction to Git</h2>
 <div class="grid md:grid-cols-2 gap-8">
 <div>
 <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>
 <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
 <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>
 </div>
 <div class="flex items-center mb-4">
 <div class="bg-blue-100 p-3 rounded-full mr-4">
 <i class="fas fa-question-circle text-blue-600 text-xl"></i>
 </div>
 <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>
 </div>
 </div>
 <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
 <h3 class="font-bold text-lg mb-3">Git vs GitHub</h3>
 <div class="mb-4">
 <p class="font-medium text-gray-800">Git:</p>
 <p class="text-gray-600 ml-4">Version control system that runs locally on your machine</p>
 </div>
 <div>
 <p class="font-medium text-gray-800">GitHub:</p>
 <p class="text-gray-600 ml-4">Cloud-based hosting service that uses Git for version control</p>
 </div>
 <div class="mt-6 p-4 bg-blue-50 rounded-lg">
 <p class="text-blue-800">This tutorial focuses on Git commands you can use locally before pushing to services like GitHub.</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Commands Section -->
 <section id="commands" class="mb-16">
 <div class="bg-white rounded-lg shadow-md p-6">
 <h2 class="text-2xl font-bold text-blue-700 mb-6">Essential Git Commands</h2>
<div class="mb-8">
 <div class="flex border-b border-gray-200 mb-6">
 <button onclick="showTab('basic')" class="tab-button py-2 px-4 font-medium text-gray-700 hover:text-blue-600 tab-active">Basic</button>
 <button onclick="showTab('branching')" class="tab-button py-2 px-4 font-medium text-gray-700 hover:text-blue-600">Branching</button>
 <button onclick="showTab('remote')" class="tab-button py-2 px-4 font-medium text-gray-700 hover:text-blue-600">Remote</button>
 </div>
<div id="basic" class="tab-content">
 <div class="grid md:grid-cols-2 gap-6">
 <div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
 <i class="fas fa-folder-open"></i>
 </span>
 Initialize a Repository
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git init</code>
 </div>
 <p class="text-gray-600">Creates a new Git repository in your current directory.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-green-100 text-green-700 p-2 rounded-full mr-3">
 <i class="fas fa-plus-circle"></i>
 </span>
 Stage Changes
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git add &lt;file&gt;</code><br>
 <code>git add .</code>
 </div>
 <p class="text-gray-600">Prepares changes for commit (staging area).</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-purple-100 text-purple-700 p-2 rounded-full mr-3">
 <i class="fas fa-save"></i>
 </span>
 Commit Changes
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git commit -m "Your message"</code>
 </div>
 <p class="text-gray-600">Takes a snapshot of your staged changes with a descriptive message.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-yellow-100 text-yellow-700 p-2 rounded-full mr-3">
 <i class="fas fa-history"></i>
 </span>
 Check Status
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git status</code>
 </div>
 <p class="text-gray-600">Shows which files are modified, staged, or untracked.</p>
 </div>
 </div>
 </div>
<div id="branching" class="tab-content hidden">
 <div class="grid md:grid-cols-2 gap-6">
 <div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
 <i class="fas fa-code-branch"></i>
 </span>
 Create Branch
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git branch &lt;branch-name&gt;</code>
 </div>
 <p class="text-gray-600">Creates a new branch at your current commit.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-green-100 text-green-700 p-2 rounded-full mr-3">
 <i class="fas fa-exchange-alt"></i>
 </span>
 Switch Branch
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git checkout &lt;branch-name&gt;</code><br>
 <code>git switch &lt;branch-name&gt;</code>
 </div>
 <p class="text-gray-600">Moves you to the specified branch.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-purple-100 text-purple-700 p-2 rounded-full mr-3">
 <i class="fas fa-code-merge"></i>
 </span>
 Merge Branches
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git merge &lt;branch-name&gt;</code>
 </div>
 <p class="text-gray-600">Combines changes from the specified branch into your current branch.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-yellow-100 text-yellow-700 p-2 rounded-full mr-3">
 <i class="fas fa-list-ul"></i>
 </span>
 List Branches
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git branch</code><br>
 <code>git branch -a</code>
 </div>
 <p class="text-gray-600">Shows all local (and remote with -a) branches.</p>
 </div>
 </div>
 </div>
<div id="remote" class="tab-content hidden">
 <div class="grid md:grid-cols-2 gap-6">
 <div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-blue-100 text-blue-700 p-2 rounded-full mr-3">
 <i class="fas fa-cloud-upload-alt"></i>
 </span>
 Connect to Remote
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git remote add origin &lt;url&gt;</code>
 </div>
 <p class="text-gray-600">Links your local repo to a remote repository.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-green-100 text-green-700 p-2 rounded-full mr-3">
 <i class="fas fa-cloud-download-alt"></i>
 </span>
 Push Changes
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git push -u origin &lt;branch&gt;</code>
 </div>
 <p class="text-gray-600">Uploads your commits to the remote repository.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-purple-100 text-purple-700 p-2 rounded-full mr-3">
 <i class="fas fa-download"></i>
 </span>
 Pull Changes
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git pull</code>
 </div>
 <p class="text-gray-600">Downloads changes from the remote repository.</p>
 </div>
<div class="command-card">
 <h3 class="font-bold text-lg mb-2 flex items-center">
 <span class="bg-yellow-100 text-yellow-700 p-2 rounded-full mr-3">
 <i class="fas fa-clone"></i>
 </span>
 Clone Repository
 </h3>
 <div class="command-box p-4 rounded mb-3">
 <code>git clone &lt;url&gt;</code>
 </div>
 <p class="text-gray-600">Creates a local copy of a remote repository.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Workflow Section -->
 <section id="workflow" class="mb-16">
 <div class="bg-white rounded-lg shadow-md p-6">
 <h2 class="text-2xl font-bold text-blue-700 mb-6">Git Workflow</h2>
<div class="grid md:grid-cols-2 gap-8">
 <div>
 <h3 class="text-xl font-semibold mb-4">Basic Workflow</h3>
 <ol class="space-y-4">
 <li class="flex items-start">
 <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>
 <div>
 <p class="font-medium">Initialize or clone a repository</p>
 <p class="text-gray-600 text-sm">Start tracking your project or get a copy of an existing one</p>
 </div>
 </li>
 <li class="flex items-start">
 <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>
 <div>
 <p class="font-medium">Create a branch for your changes</p>
 <p class="text-gray-600 text-sm">Keep your work isolated from the main codebase</p>
 </div>
 </li>
 <li class="flex items-start">
 <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>
 <div>
 <p class="font-medium">Make changes and commit them</p>
 <p class="text-gray-600 text-sm">Stage and save your work with descriptive messages</p>
 </div>
 </li>
 <li class="flex items-start">
 <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>
 <div>
 <p class="font-medium">Push your branch to the remote</p>
 <p class="text-gray-600 text-sm">Share your work with others</p>
 </div>
 </li>
 <li class="flex items-start">
 <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>
 <div>
 <p class="font-medium">Create a pull/merge request</p>
 <p class="text-gray-600 text-sm">Propose your changes to be merged into the main branch</p>
 </div>
 </li>
 </ol>
 </div>
<div>
 <h3 class="text-xl font-semibold mb-4">Branch Visualization</h3>
 <div class="branch-visualization bg-gray-50 p-4 rounded-lg border border-gray-200">
 <div class="branch-line" style="height: 250px; top: 20px;"></div>
<!-- Main branch -->
 <div class="commit-circle" style="top: 40px;">C1</div>
 <div class="branch-label" style="top: 35px;">main</div>
<div class="commit-circle" style="top: 90px;">C2</div>
 <div class="commit-circle" style="top: 140px;">C3</div>
<!-- Feature branch -->
 <div class="commit-circle bg-green-500" style="top: 90px; left: 100px;">F1</div>
 <div class="branch-label" style="top: 85px; left: 130px;">feature/login</div>
<div class="commit-circle bg-green-500" style="top: 140px; left: 100px;">F2</div>
<!-- Merge commit -->
 <div class="commit-circle bg-purple-500" style="top: 190px;">C4</div>
 <div class="branch-label" style="top: 185px;">Merge: feature/login → main</div>
<!-- Branch line for feature -->
 <div class="branch-line bg-green-500" style="height: 60px; top: 90px; left: 100px;"></div>
 <div class="branch-line" style="width: 50px; height: 2px; top: 90px; left: 50px;"></div>
 </div>
 </div>
 </div>
<div class="mt-8 bg-blue-50 p-6 rounded-lg">
 <h3 class="text-lg font-semibold text-blue-800 mb-3">Best Practices</h3>
 <ul class="space-y-2 text-blue-700">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
 <span>Commit often with meaningful messages</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
 <span>Create branches for new features or bug fixes</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
 <span>Pull changes frequently to stay up-to-date</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
 <span>Review changes before merging</span>
 </li>
 </ul>
 </div>
 </div>
 </section>
<!-- Practice Section -->
 <section id="practice" class="mb-16">
 <div class="bg-white rounded-lg shadow-md p-6">
 <h2 class="text-2xl font-bold text-blue-700 mb-6">Interactive Terminal</h2>
<div class="grid md:grid-cols-2 gap-8">
 <div>
 <h3 class="text-xl font-semibold mb-4">Try Git Commands</h3>
 <p class="text-gray-600 mb-4">Type basic Git commands below to see simulated output:</p>
<div class="mb-4">
 <div class="flex items-center bg-gray-800 text-white px-4 py-2 rounded-t-lg">
 <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
 <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
 <div class="w-3 h-3 bg-green-500 rounded-full"></div>
 <div class="ml-auto text-sm">Git Terminal</div>
 </div>
 <div class="terminal p-4 rounded-b-lg">
 <div id="terminal-output">
 <div class="terminal-line">
 <span class="terminal-prompt">$ </span>
 <span class="terminal-command">git init</span>
 </div>
 <div class="terminal-line terminal-output">
 Initialized empty Git repository in /projects/learn-git/.git/
 </div>
 <div class="terminal-line">
 <span class="terminal-prompt">$ </span>
 <span class="terminal-command">git status</span>
 </div>
 <div class="terminal-line terminal-output">
 On branch main<br>
 No commits yet<br>
 nothing to commit (create/copy files and use "git add" to track)
 </div>
 </div>
 <div class="terminal-line mt-4">
 <span class="terminal-prompt">$ </span>
 <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">
 </div>
 </div>
 </div>
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
 <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>
 </div>
 </div>
<div>
 <h3 class="text-xl font-semibold mb-4">Common Scenarios</h3>
<div class="space-y-4">
 <div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('undo')">
 <h4 class="font-medium flex items-center">
 <i class="fas fa-undo-alt text-blue-600 mr-2"></i>
 Undo the last commit
 </h4>
 <p class="text-gray-600 text-sm mt-1">Keep changes but undo the commit</p>
 </div>
<div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('discard')">
 <h4 class="font-medium flex items-center">
 <i class="fas fa-trash-alt text-red-600 mr-2"></i>
 Discard local changes
 </h4>
 <p class="text-gray-600 text-sm mt-1">Revert files to last committed state</p>
 </div>
<div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('merge')">
 <h4 class="font-medium flex items-center">
 <i class="fas fa-code-merge text-purple-600 mr-2"></i>
 Resolve merge conflicts
 </h4>
 <p class="text-gray-600 text-sm mt-1">What to do when Git can't auto-merge</p>
 </div>
<div class="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer" onclick="showScenario('stash')">
 <h4 class="font-medium flex items-center">
 <i class="fas fa-archive text-green-600 mr-2"></i>
 Temporarily save changes
 </h4>
 <p class="text-gray-600 text-sm mt-1">When you need to switch branches but aren't ready to commit</p>
 </div>
 </div>
<div id="scenario-info" class="mt-6 p-4 bg-gray-50 rounded-lg hidden">
 <h4 id="scenario-title" class="font-bold mb-2"></h4>
 <div id="scenario-solution" class="command-box p-4 rounded mb-2"></div>
 <p id="scenario-explanation" class="text-gray-600 text-sm"></p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Cheat Sheet -->
 <section class="mb-16">
 <div class="bg-white rounded-lg shadow-md p-6">
 <h2 class="text-2xl font-bold text-blue-700 mb-6">Git Cheat Sheet</h2>
<div class="grid md:grid-cols-3 gap-6">
 <div class="bg-blue-50 p-4 rounded-lg">
 <h3 class="font-bold text-blue-800 mb-3 flex items-center">
 <i class="fas fa-bookmark text-blue-600 mr-2"></i>
 Setup & Config
 </h3>
 <ul class="space-y-2">
 <li class="flex">
 <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>
 <span class="text-sm text-blue-700">Set your username</span>
 </li>
 <li class="flex">
 <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>
 <span class="text-sm text-blue-700">Set your email</span>
 </li>
 <li class="flex">
 <span class="font-mono bg-blue-100 text-blue-800 px-2 py-1 rounded mr-2">git config --list</span>
 <span class="text-sm text-blue-700">View configuration</span>
 </li>
 </ul>
 </div>
<div class="bg-green-50 p-4 rounded-lg">
 <h3 class="font-bold text-green-800 mb-3 flex items-center">
 <i class="fas fa-history text-green-600 mr-2"></i>
 Inspection
 </h3>
 <ul class="space-y-2">
 <li class="flex">
 <span class="font-mono bg-green-100 text-green-800 px-2 py-1 rounded mr-2">git log</span>
 <span class="text-sm text-green-700">Show commit history</span>
 </li>
 <li class="flex">
 <span class="font-mono bg-green-100 text-green-800 px-2 py-1 rounded mr-2">git log --oneline</span>
 <span class="text-sm text-green-700">Compact commit history</span>
 </li>
 <li class="flex">
 <span class="font-mono bg-green-100 text-green-800 px-2 py-1 rounded mr-2">git diff</span>
 <span class="text-sm text-green-700">Show unstaged changes</span>
 </li>
 </ul>
 </div>
<div class="bg-purple-50 p-4 rounded-lg">
 <h3 class="font-bold text-purple-800 mb-3 flex items-center">
 <i class="fas fa-fire-extinguisher text-purple-600 mr-2"></i>
 Undoing
 </h3>
 <ul class="space-y-2">
 <li class="flex">
 <span class="font-mono bg-purple-100 text-purple-800 px-2 py-1 rounded mr-2">git reset &lt;file&gt;</span>
 <span class="text-sm text-purple-700">Unstage a file</span>
 </li>
 <li class="flex">
 <span class="font-mono bg-purple-100 text-purple-800 px-2 py-1 rounded mr-2">git checkout -- &lt;file&gt;</span>
 <span class="text-sm text-purple-700">Discard changes</span>
 </li>
 <li class="flex">
 <span class="font-mono bg-purple-100 text-purple-800 px-2 py-1 rounded mr-2">git revert &lt;commit&gt;</span>
 <span class="text-sm text-purple-700">Create new commit that undoes a previous commit</span>
 </li>
 </ul>
 </div>
 </div>
<div class="mt-6 text-center">
 <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">
 <i class="fas fa-download mr-2"></i>
 Download Full Cheat Sheet
 </button>
 </div>
 </div>
 </section>
 </main>
<footer class="bg-gray-800 text-white py-8">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <div class="flex items-center">
 <i class="fas fa-code-branch text-2xl mr-2 text-blue-400"></i>
 <span class="text-xl font-bold">Git Basics</span>
 </div>
 <p class="text-gray-400 mt-1">Learn version control the interactive way</p>
 </div>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord text-xl"></i></a>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
 <p>© 2023 Git Basics Interactive Tutorial. All content is for educational purposes.</p>
 </div>
 </div>
 </footer>
<script>
 // Tab switching functionality
 function showTab(tabId) {
 // Hide all tab contents
 document.querySelectorAll('.tab-content').forEach(tab => {
 tab.classList.add('hidden');
 });
// Remove active class from all tab buttons
 document.querySelectorAll('.tab-button').forEach(button => {
 button.classList.remove('tab-active');
 });
// Show selected tab content
 document.getElementById(tabId).classList.remove('hidden');
// Add active class to clicked button
 event.target.classList.add('tab-active');
 }
// Scenario display functionality
 function showScenario(scenario) {
 const scenarioInfo = document.getElementById('scenario-info');
 const title = document.getElementById('scenario-title');
 const solution = document.getElementById('scenario-solution');
 const explanation = document.getElementById('scenario-explanation');
scenarioInfo.classList.remove('hidden');
switch(scenario) {
 case 'undo':
 title.innerHTML = '<i class="fas fa-undo-alt text-blue-600 mr-2"></i> Undo the last commit';
 solution.innerHTML = '<code>git reset --soft HEAD~1</code>';
 explanation.textContent = 'This keeps your changes staged but removes the last commit. Use --hard instead of --soft to also unstage changes.';
 break;
 case 'discard':
 title.innerHTML = '<i class="fas fa-trash-alt text-red-600 mr-2"></i> Discard local changes';
 solution.innerHTML = '<code>git checkout -- .</code><br><code>git clean -fd</code>';
 explanation.textContent = 'The first command discards changes to tracked files. The second removes untracked files and directories.';
 break;
 case 'merge':
 title.innerHTML = '<i class="fas fa-code-merge text-purple-600 mr-2"></i> Resolve merge conflicts';
 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>';
 explanation.textContent = 'Git marks conflicts in files. Edit them to keep the desired changes, then add and commit to complete the merge.';
 break;
 case 'stash':
 title.innerHTML = '<i class="fas fa-archive text-green-600 mr-2"></i> Temporarily save changes';
 solution.innerHTML = '<code>git stash<br># Do other work...<br>git stash pop</code>';
 explanation.textContent = 'Stash saves uncommitted changes so you can switch branches. Pop reapplies them when you\'re ready.';
 break;
 }
 }
// Terminal simulation
 document.getElementById('command-input').addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 const command = this.value.trim();
 this.value = '';
if (!command) return;
const outputDiv = document.getElementById('terminal-output');
 const promptLine = document.createElement('div');
 promptLine.className = 'terminal-line';
 promptLine.innerHTML = `<span class="terminal-prompt">$ </span><span class="terminal-command">${command}</span>`;
 outputDiv.appendChild(promptLine);
// Simulate command output
 const responseLine = document.createElement('div');
 responseLine.className = 'terminal-line terminal-output';
// Basic command responses
 if (command.startsWith('git init')) {
 responseLine.textContent = 'Initialized empty Git repository in /projects/learn-git/.git/';
 } else if (command.startsWith('git add')) {
 responseLine.textContent = 'Changes staged for commit';
 } else if (command.startsWith('git commit')) {
 responseLine.textContent = `[main abc1234] ${command.replace('git commit -m ', '').replace(/"/g, '')}\n 1 file changed, 2 insertions(+)`;
 } else if (command.startsWith('git status')) {
 responseLine.innerHTML = 'On branch main<br>Changes to be committed:<br> (use "git restore --staged &lt;file&gt;..." to unstage)<br> modified: index.html';
 } else if (command.startsWith('git branch')) {
 const branchName = command.replace('git branch ', '');
 if (branchName === 'git branch') {
 responseLine.innerHTML = '* main<br> new-feature';
 } else {
 responseLine.textContent = `Created branch '${branchName}'`;
 }
 } else if (command.startsWith('git checkout') || command.startsWith('git switch')) {
 const branchName = command.replace('git checkout ', '').replace('git switch ', '');
 responseLine.textContent = `Switched to branch '${branchName}'`;
 } else {
 responseLine.textContent = `Command '${command.split(' ')[0]}' not recognized in this simulation. Try basic Git commands like init, add, commit, status, branch.`;
 }
outputDiv.appendChild(responseLine);
// Scroll to bottom
 outputDiv.parentNode.scrollTop = outputDiv.parentNode.scrollHeight;
 }
 });
// Cheat sheet download
 function downloadCheatSheet() {
 alert('In a real implementation, this would download a PDF cheat sheet. This is just a simulation.');
 }
 </script>
<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>
</html>