Force GitHub main to overwrite changes
📦 GitHub
✨ The Prompt Phrase
Git Force Synchronization What specific Git command is used to discard all local commits and uncommitted changes, effectively forcing your local branch to match the exact state of the main branch on the remote server? ~git reset --hard origin/main~
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Reset Hard - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-dark: #0f111a;
--bg-card: rgba(25, 28, 41, 0.7);
--bg-card-hover: rgba(35, 38, 55, 0.9);
--text-main: #e2e8f0;
--text-muted: #94a3b8;
--accent-primary: #8b5cf6;
--accent-secondary: #3b82f6;
--accent-tertiary: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--glass-border: rgba(255, 255, 255, 0.1);
--gradient-1: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
--gradient-2: linear-gradient(135deg, var(--accent-secondary), var(--accent-tertiary));
--gradient-danger: linear-gradient(135deg, #ef4444, #f97316);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg-dark);
color: var(--text-main);
line-height: 1.6;
overflow-x: hidden;
background-image:
radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
background-attachment: fixed;
scroll-behavior: smooth;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
}
/* Typography */
h1, h2, h3, h4 {
line-height: 1.2;
margin-bottom: 1rem;
}
h1 {
font-size: 3.5rem;
font-weight: 800;
background: var(--gradient-1);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
margin-bottom: 0.5rem;
animation: fadeInDown 1s ease-out;
}
h2 {
font-size: 2.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 3rem;
border-bottom: 2px solid var(--glass-border);
padding-bottom: 0.5rem;
}
p {
margin-bottom: 1rem;
font-size: 1.1rem;
}
/* Code Blocks */
code {
font-family: 'Fira Code', monospace;
background: rgba(0, 0, 0, 0.5);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-size: 0.9em;
color: #a78bfa;
}
pre {
background: #000;
padding: 1.5rem;
border-radius: 12px;
overflow-x: auto;
border: 1px solid var(--glass-border);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
margin: 1.5rem 0;
}
pre code {
background: none;
padding: 0;
color: #e2e8f0;
font-size: 1.1rem;
}
.highlight-red { color: var(--danger); }
.highlight-blue { color: #60a5fa; }
.highlight-green { color: var(--accent-tertiary); }
.highlight-purple { color: #c084fc; }
/* Glass Cards */
.card {
background: var(--bg-card);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
background: var(--bg-card-hover);
}
.card-danger {
border-left: 4px solid var(--danger);
}
.card-warning {
border-left: 4px solid var(--warning);
}
.card-success {
border-left: 4px solid var(--accent-tertiary);
}
/* Hero Section */
.hero {
text-align: center;
padding: 4rem 0;
animation: fadeIn 1.5s ease-out;
}
.subtitle {
font-size: 1.5rem;
color: var(--text-muted);
margin-bottom: 2rem;
}
.hero-code {
font-size: 1.8rem;
display: inline-block;
padding: 1rem 2rem;
background: rgba(0,0,0,0.6);
border: 2px solid var(--accent-primary);
border-radius: 12px;
box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
position: relative;
overflow: hidden;
}
.hero-code::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
transform: skewX(-20deg);
animation: shine 3s infinite;
}
/* Badges */
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.badge-pro { background: var(--gradient-1); color: white; }
.badge-danger { background: var(--gradient-danger); color: white; }
/* Accordion (Details/Summary) */
details {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--glass-border);
border-radius: 12px;
margin-bottom: 1rem;
overflow: hidden;
}
summary {
padding: 1.2rem;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 255, 255, 0.02);
transition: background 0.3s ease;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: '+';
font-size: 1.5rem;
color: var(--accent-primary);
transition: transform 0.3s ease;
}
details[open] summary::after {
content: '-';
transform: rotate(180deg);
}
details[open] summary {
background: rgba(139, 92, 246, 0.1);
border-bottom: 1px solid var(--glass-border);
}
.details-content {
padding: 1.5rem;
animation: slideDown 0.4s ease-out;
}
/* Tabs (CSS Only) */
.tabs {
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--glass-border);
}
.tab-input {
display: none;
}
.tab-label {
flex: 1;
padding: 1rem;
text-align: center;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
}
.tab-label:hover {
background: rgba(255, 255, 255, 0.05);
}
.tab-content {
width: 100%;
padding: 2rem;
background: rgba(0, 0, 0, 0.2);
display: none;
animation: fadeIn 0.5s ease;
}
#tab1:checked ~ .tabs .label1,
#tab2:checked ~ .tabs .label2,
#tab3:checked ~ .tabs .label3 {
background: rgba(139, 92, 246, 0.2);
border-bottom: 2px solid var(--accent-primary);
color: #fff;
}
#tab1:checked ~ .tab-content-container .content1,
#tab2:checked ~ .tab-content-container .content2,
#tab3:checked ~ .tab-content-container .content3 {
display: block;
}
/* Tooltips */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted var(--accent-secondary);
cursor: help;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-1);
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.9rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
z-index: 10;
}
.tooltip::before {
content: '';
position: absolute;
bottom: 105%;
left: 50%;
transform: translateX(-50%);
border-width: 8px;
border-style: solid;
border-color: var(--accent-primary) transparent transparent transparent;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10;
}
.tooltip:hover::after,
.tooltip:hover::before {
opacity: 1;
visibility: visible;
bottom: 135%;
}
/* Quiz Section */
.quiz-container {
background: rgba(0,0,0,0.3);
padding: 2rem;
border-radius: 12px;
border: 1px solid var(--glass-border);
}
.question {
margin-bottom: 2rem;
}
.question-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
}
.options {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.option-label {
display: block;
padding: 1rem 1.5rem;
background: rgba(255,255,255,0.05);
border: 1px solid var(--glass-border);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.option-label:hover {
background: rgba(255,255,255,0.1);
transform: translateX(5px);
}
.quiz-radio {
display: none;
}
.feedback {
display: none;
margin-top: 1rem;
padding: 1rem;
border-radius: 8px;
animation: slideDown 0.3s ease;
font-weight: 600;
}
/* Logic for Quiz 1 */
#q1-a:checked ~ .options label[for="q1-a"] { background: rgba(239, 68, 68, 0.2); border-color: var(--danger); }
#q1-b:checked ~ .options label[for="q1-b"] { background: rgba(16, 185, 129, 0.2); border-color: var(--accent-tertiary); }
#q1-c:checked ~ .options label[for="q1-c"] { background: rgba(239, 68, 68, 0.2); border-color: var(--danger); }
#q1-a:checked ~ .feedback-wrong-1,
#q1-c:checked ~ .feedback-wrong-2 {
display: block;
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid var(--danger);
color: #fca5a5;
}
#q1-b:checked ~ .feedback-correct {
display: block;
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-tertiary);
color: #6ee7b7;
animation: celebrate 0.5s ease;
}
/* Logic for Quiz 2 */
#q2-a:checked ~ .options label[for="q2-a"] { background: rgba(16, 185, 129, 0.2); border-color: var(--accent-tertiary); }
#q2-b:checked ~ .options label[for="q2-b"] { background: rgba(239, 68, 68, 0.2); border-color: var(--danger); }
#q2-c:checked ~ .options label[for="q2-c"] { background: rgba(239, 68, 68, 0.2); border-color: var(--danger); }
#q2-b:checked ~ .feedback-wrong-1,
#q2-c:checked ~ .feedback-wrong-2 {
display: block;
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid var(--danger);
color: #fca5a5;
}
#q2-a:checked ~ .feedback-correct {
display: block;
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent-tertiary);
color: #6ee7b7;
animation: celebrate 0.5s ease;
}
/* Step Indicators */
.step-container {
position: relative;
padding-left: 2rem;
margin: 2rem 0;
}
.step-container::before {
content: '';
position: absolute;
left: 0.5rem;
top: 0;
bottom: 0;
width: 2px;
background: var(--glass-border);
}
.step {
position: relative;
margin-bottom: 2rem;
}
.step::before {
content: attr(data-step);
position: absolute;
left: -2.5rem;
top: 0;
width: 2rem;
height: 2rem;
background: var(--gradient-1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
color: white;
box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
z-index: 2;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shine {
0% { left: -100%; }
20% { left: 200%; }
100% { left: 200%; }
}
@keyframes celebrate {
0% { transform: scale(0.95); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* Footer */
footer {
text-align: center;
padding: 3rem 0;
margin-top: 4rem;
border-top: 1px solid var(--glass-border);
color: var(--text-muted);
}
.heart {
color: var(--danger);
display: inline-block;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Responsive */
@media (max-width: 768px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
.hero-code { font-size: 1.2rem; padding: 0.8rem 1rem; }
.container { padding: 1rem; }
.card { padding: 1.5rem; }
.tab-label { font-size: 0.9rem; padding: 0.8rem 0.5rem; }
}
</style>
</head>
<body>
<div class="container">
<!-- Hero Section -->
<header class="hero">
<span class="badge badge-danger">🧨 Nuclear Option</span>
<h1>The "Reset Button" for Git</h1>
<p class="subtitle">Force your local branch to exactly match the remote branch</p>
<div class="hero-code">
<span class="highlight-purple">git</span>
<span class="highlight-blue">reset</span>
<span class="highlight-red">--hard</span>
<span class="highlight-green">origin/main</span>
</div>
</header>
<!-- PART A: Quick Overview -->
<section class="card">
<h2><span style="font-size: 2rem">🚀</span> Part A: Quick Overview</h2>
<p>Imagine you've been working on a painting, but it looks terrible. You've made so many mistakes that you just want to throw the canvas away and start fresh with an exact copy of the painting that's currently hanging in the gallery.</p>
<p>That's what this command does for your code.</p>
<details>
<summary>What exactly does it do?</summary>
<div class="details-content">
<p>It takes your current branch and forces it to look <strong>exactly</strong> like <code>origin/main</code> (the main branch on your remote repository, like GitHub).</p>
<ul>
<li>❌ It <strong>deletes</strong> any uncommitted changes you have.</li>
<li>❌ It <strong>deletes</strong> any local commits you've made that aren't on GitHub.</li>
<li>✅ It makes your local folder a 1:1 perfect clone of what is on GitHub's main branch.</li>
</ul>
</div>
</details>
<details>
<summary>Why use it?</summary>
<div class="details-content">
<p>Use it when your local code is completely messed up, you have merge conflicts you can't solve, or you just want to say <em>"I don't care about anything I've done locally, give me the fresh working code from the server!"</em></p>
</div>
</details>
</section>
<!-- PART B: In-Depth Comprehensive Guide -->
<h2 style="margin-top: 4rem; margin-bottom: 2rem;">
<span style="font-size: 2rem">📚</span> Part B: In-Depth Guide
</h2>
<!-- Interactive Tabs for Code Breakdown -->
<input type="radio" name="tabs" id="tab1" class="tab-input" checked>
<input type="radio" name="tabs" id="tab2" class="tab-input">
<input type="radio" name="tabs" id="tab3" class="tab-input">
<div class="tabs">
<label for="tab1" class="tab-label label1">🔍 Code Breakdown</label>
<label for="tab2" class="tab-label label2">⚙️ How it Works</label>
<label for="tab3" class="tab-label label3">⚠️ Common Mistakes</label>
</div>
<div class="tab-content-container">
<!-- Content 1: Code Breakdown -->
<div class="card tab-content content1" style="border-top-left-radius: 0; border-top-right-radius: 0;">
<h3>Let's dissect the command:</h3>
<div class="step-container">
<div class="step" data-step="1">
<h4><code>git</code></h4>
<p>The core command. Tells your terminal you want to use the Git version control system.</p>
</div>
<div class="step" data-step="2">
<h4><code>reset</code></h4>
<p>The action. Tells Git to move the current branch pointer backward or forward to a specific commit.</p>
</div>
<div class="step" data-step="3">
<h4><code class="highlight-red">--hard</code> <span class="badge badge-danger" style="margin-left: 10px;">Dangerous</span></h4>
<p>The "destroyer" flag. Tells Git: <em>"Don't just move the pointer. Actually modify the files on my hard drive to match that commit. Delete any unsaved work."</em></p>
</div>
<div class="step" data-step="4">
<h4><code class="highlight-green">origin/main</code></h4>
<p>The target. <code>origin</code> is usually your remote repository (GitHub, GitLab), and <code>main</code> is the primary branch. This means <em>"the main branch that exists on the server."</em></p>
</div>
</div>
</div>
<!-- Content 2: How it Works -->
<div class="card tab-content content2" style="border-top-left-radius: 0; border-top-right-radius: 0;">
<h3>The 3-Step Process</h3>
<p>When you run a hard reset, Git performs three actions simultaneously. This is why it's so powerful (and dangerous):</p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.5rem;">
<div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 8px;">
<h4 style="color: #60a5fa;">1. Moves HEAD</h4>
<p>It moves your branch pointer to exactly where <code>origin/main</code> is.</p>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 8px;">
<h4 style="color: #c084fc;">2. Updates Index</h4>
<p>It clears your staging area. Anything you <code>git add</code>ed is removed from staging.</p>
</div>
<div style="background: rgba(239, 68, 68, 0.1); padding: 1.5rem; border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.3);">
<h4 style="color: #ef4444;">3. Overwrites Files</h4>
<p>It completely rewrites your working directory files to match the target commit. <strong>Uncommitted changes are permanently lost.</strong></p>
</div>
</div>
<div class="card card-warning" style="margin-top: 2rem;">
<h4>Pro Tip: Prerequisites</h4>
<p>Before running this command, you usually need to run <code class="tooltip" data-tip="Downloads the latest info from the remote without merging">git fetch origin</code> first. <code>origin/main</code> is just a cached reference on your computer. If you don't fetch first, you might be resetting to an older version of the remote branch!</p>
</div>
</div>
<!-- Content 3: Common Mistakes -->
<div class="card tab-content content3" style="border-top-left-radius: 0; border-top-right-radius: 0;">
<h3>What NOT to do</h3>
<div class="card card-danger">
<h4>Mistake 1: Not saving your work first</h4>
<p>If you have changes you <em>might</em> want later, do not use <code>--hard</code>. Once you press Enter, uncommitted files are gone forever. No undo button.</p>
<p><strong>Fix:</strong> Use <code class="tooltip" data-tip="Temporarily saves your work in a clipboard">git stash</code> before resetting if you want to keep your messy code safely tucked away.</p>
</div>
<div class="card card-danger">
<h4>Mistake 2: Forgetting to fetch</h4>
<pre><code>git reset --hard origin/main
# Wait, why don't I have the latest code?</code></pre>
<p>Because your computer doesn't know what's on GitHub until you ask it! Always run <code>git fetch origin</code> immediately before the reset command.</p>
</div>
</div>
</div>
<!-- Real-World Example -->
<section class="card">
<h2><span style="font-size: 2rem">🎬</span> Real-World Scenario</h2>
<p>You pull code from GitHub, but you get a nasty merge conflict. You try to fix it, but you accidentally delete half the file. The app is broken. You are panicking.</p>
<div style="background: #1e1e2e; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; font-family: monospace;">
<span style="color: #fca5a5;">$ git pull</span><br>
<span style="color: #cbd5e1;">Auto-merging src/App.js</span><br>
<span style="color: #fca5a5;">CONFLICT (content): Merge conflict in src/App.js</span><br>
<span style="color: #cbd5e1;">Automatic merge failed; fix conflicts and then commit the result.</span><br>
<br>
<span style="color: #8b5cf6;"># You say: "Nope. I give up. Just give me what's on GitHub."</span><br>
<span style="color: #a78bfa;">$ git fetch origin</span><br>
<span style="color: #6ee7b7;">$ git reset --hard origin/main</span><br>
<span style="color: #cbd5e1;">HEAD is now at 8a2f4c3 Add new login button</span>
</div>
<p>Boom. All conflicts gone. Your local folder is pristine again.</p>
</section>
<!-- Interactive Quiz -->
<section class="card">
<h2><span style="font-size: 2rem">🎮</span> Practice Quiz</h2>
<p>Test your knowledge! Select the correct answers.</p>
<!-- Question 1 -->
<div class="quiz-container question">
<div class="question-title">1. What happens to files you haven't committed yet when you run <code>git reset --hard</code>?</div>
<input type="radio" name="q1" id="q1-a" class="quiz-radio">
<input type="radio" name="q1" id="q1-b" class="quiz-radio">
<input type="radio" name="q1" id="q1-c" class="quiz-radio">
<div class="options">
<label for="q1-a" class="option-label">They are moved to a temporary backup folder</label>
<label for="q1-b" class="option-label">They are permanently deleted/overwritten</label>
<label for="q1-c" class="option-label">Git asks you if you want to keep them</label>
</div>
<div class="feedback feedback-wrong-1">❌ Incorrect. Git shows no mercy here. No backups are made!</div>
<div class="feedback feedback-correct">✅ Correct! The `--hard` flag ruthlessly deletes uncommitted changes.</div>
<div class="feedback feedback-wrong-2">❌ Incorrect. The `--hard` flag means "don't ask questions, just destroy."</div>
</div>
<!-- Question 2 -->
<div class="quiz-container question">
<div class="question-title">2. What command should you ALMOST ALWAYS run right before <code>git reset --hard origin/main</code>?</div>
<input type="radio" name="q2" id="q2-a" class="quiz-radio">
<input type="radio" name="q2" id="q2-b" class="quiz-radio">
<input type="radio" name="q2" id="q2-c" class="quiz-radio">
<div class="options">
<label for="q2-a" class="option-label">git fetch origin</label>
<label for="q2-b" class="option-label">git push origin</label>
<label for="q2-c" class="option-label">git commit -m "backup"</label>
</div>
<div class="feedback feedback-correct">✅ Brilliant! You must fetch to ensure your computer has the latest info from GitHub before resetting to it!</div>
<div class="feedback feedback-wrong-1">❌ Oops! You don't want to push, you're trying to reset your local code to match the remote!</div>
<div class="feedback feedback-wrong-2">❌ Committing your broken code defeats the purpose of throwing it away to start fresh!</div>
</div>
</section>
<!-- Summary Cheat Sheet -->
<section class="card card-success">
<h2><span style="font-size: 2rem">📌</span> Summary Cheat Sheet</h2>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem;">
<strong>Update remote knowledge:</strong>
<code>git fetch origin</code>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem;">
<strong>Nuclear reset:</strong>
<code>git reset --hard origin/main</code>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem;">
<strong>Safer alternative (keeps files):</strong>
<code>git reset --soft origin/main</code>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<strong>Save work before reset:</strong>
<code>git stash</code>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>Made with <span class="heart">❤️</span> by AI Prompt Dictionary</p>
<p style="font-size: 0.8rem; margin-top: 0.5rem;">Interactive CSS-only tutorial • No JavaScript used</p>
</footer>
</div>
</body>
</html>
Live Preview