Git Master 🐙

Git Master is an interactive, responsive, and bilingual (PT/EN) platform created for developers who want to learn, consult, and review essential Git commands. Built purely with HTML, CSS (Glassmorphism), and Vanilla JavaScript, the tool focuses on ergonomics, accessibility, and dynamic learning.

---

🎯 Key Features

📖 Study Mode

• Filters and Search: Quickly find the command you need using the search bar (shortcut Ctrl+K) or by browsing the categories (Basics, Branches, Remote, Undo, Advanced).
• Practical Context: In addition to the command description, each item features a real-world "Scenario" of use (e.g., "Did your boss ask you to check an urgent bug in main? Put your unfinished code away in the drawer with git stash").
• Smart Link to Documentation: The 🤔 Didn't understand button opens the official documentation (git-scm.com) directly on the page of the command in question, matching the current language of the interface.
• Quick Copy: A copy-to-clipboard button with toast notifications for quick use in the terminal.

🧠 Review Mode (Quiz)

• Test your knowledge by answering which command performs a specific action.
• Real-time scoring system and error feedback showing the correct syntax.

⚙️ User Experience (UX/UI)

• Bilingual (PT / EN): Instant language switching that translates text, commands, documentation, and even the page <title>, with automatic preference saving in localStorage.
• Themes (Dark / Light): Smooth transition between light and dark modes, also persisted locally.
• Total Responsiveness: A Mobile-First interface that breaks into columns and adjusts buttons for thumb use on small screens (up to 480px).
• Keyboard Shortcuts:
  • Ctrl + K (Focus search)
  • M (Toggle between Study/Review Mode)
  • T (Toggle Light/Dark Theme)

👾 Easter Egg

• The platform features a hidden Easter Egg. Want to discover it? Try clicking the language toggle button (PT/EN) frenetically more than 10 times. Do so at your own risk of corrupting the Matrix.

---

🚀 How to Run the Project

This project does not rely on Node.js, frameworks, or external packages (npm). It runs entirely in the browser.

1. Clone the repository:

   git clone https://github.com/your-username/git-master.git

2. Open the project: Go to the project folder and open the index.html file in any web browser of your choice.

   If you use VS Code, you can use the Live Server extension to quickly run a local server.

---

🛠️ Technologies Used

• HTML5: Semantic and accessible structure.
• CSS3: CSS variables, Flexbox, Grid, responsive media queries, and keyframe animations. The modern visual style is based on the Glassmorphism technique.
• JavaScript (Vanilla): Event-driven logic (addEventListener), dynamic DOM manipulation, recursive mapping for the Easter Egg, and localStorage handling.

---

🎨 Adopted Design Principles

The website was built avoiding generic "AI looks":

• Title using the official Git solid color (#F1502F) to maintain proper hierarchy and contrast.
• Refined animations limited to necessary components, avoiding visual fatigue (interactive title requiring inline-flex for the correct bounding box).
• Conversational copywriting that contextualizes technical commands in the developer's daily routine.

---

📝 License

This project is licensed under the MIT License. Developed for educational and practical purposes.

---

⚠️ Known Bugs Note: There are reports that the platform's language translation engine may suffer a critical breakdown (Matrix Crash) if the language is changed aggressively and consecutively. If you encounter visual anomalies or unknown dialects, a simple F5 should stabilize the system.

(Project generated and refined with the help of Artificial Intelligence)