Skip to content

Commit 4443263

Browse files
EonflexxEonflexx
committed
2 parents 62b62fe + ff5b0bd commit 4443263

1 file changed

Lines changed: 87 additions & 11 deletions

File tree

‎README.md‎

Lines changed: 87 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,94 @@
1-
General info:
2-
Git Commands Guide with AI AssistanceProject OverviewThis project provides an interactive and comprehensive guide to essential Git commands, designed for developers using VS Code and GitHub. Beyond just explanations, it integrates AI capabilities to help users generate effective commit messages and understand complex Git commands, enhancing their version control workflow. The guide is presented as a modal interface, ensuring it can be easily integrated into existing web projects without disrupting the main page content.FeaturesInteractive Flowchart: Navigate through common Git workflows with a clear, step-by-step visual guide.Essential Commands Shortlist: A quick reference for the most frequently used Git commands, along with their use cases.System-Specific Commands: Toggle between Windows (PowerShell) and Bash/Linux commands for platform-specific guidance.One-Click Copy: Easily copy Git commands to your clipboard for direct use in your terminal.✨ AI Commit Message Generator: Describe your code changes in plain English, and the integrated AI (powered by Gemini) will suggest concise and conventional Git commit messages.✨ AI Git Command Explainer: Input any Git command, and receive a clear, simple explanation, including its purpose, common use cases, and potential pitfalls.Theme Toggle: Switch between a modern "dark glass" theme and a "light" theme to match your preference.Modular Design: Built with separate HTML, CSS, and JavaScript files for easy integration and maintainability.Responsive Layout: Optimized for seamless viewing and interaction across various devices (desktop, tablet, mobile).Custom Scrollbars: Subtle, theme-matching "dot" style scrollbars for a polished look.Technologies UsedHTML5: Structure of the web application.CSS3: Styling, including custom properties (CSS variables) for robust theming, responsive design, and glassmorphism effects.JavaScript (ES6+): Core logic for modal interactions, dynamic content loading, theme toggling, and AI API calls.Gemini API (gemini-2.0-flash): For AI-powered commit message generation and Git command explanations.Marked.js: A lightweight library used for parsing Markdown content (specifically for the AI explanations) into HTML.How to Use / InstallationThis project is designed to be easily integrated into any existing web project.Download Files:index.html (or integrate its content into your main HTML file)style.cssscript.jsProject Setup:Place style.css and script.js in appropriate directories within your project (e.g., css/ and js/).HTML Integration:Copy the content from the provided git-commands-guide-html artifact.In your main index.html (or target HTML file), ensure you have a <button> element that will launch the guide modal. The example uses:<button class="launch-button" onclick="openMainGuideModal()">Open Git Guide</button>
3-
Paste the entire <div id="mainGuideModal" ...> block (which contains the full guide structure) right before your closing </body> tag.Link CSS: In your <head> section, link to the style.css file:<link rel="stylesheet" href="path/to/your/style.css">
4-
Link JavaScript: Before your closing </body> tag, link to the script.js file:<script src="path/to/your/script.js"></script>
5-
(Replace path/to/your/ with the actual path in your project.)Run Locally:Simply open your index.html file in a web browser. The "Open Git Guide" button should be visible, and clicking it will launch the interactive modal.CustomizationThe project leverages CSS variables for easy theming and customization. All key colors, spacing, and effects are defined in the :root pseudo-class within style.css.You can modify these variables to match your project's aesthetic::root {
1+
# Git Commands Guide with AI Assistance
2+
3+
This project provides an interactive and comprehensive guide to essential Git commands, designed for developers using VS Code and GitHub. It enhances the version control workflow by integrating AI capabilities for generating commit messages and explaining complex Git commands. The guide is presented as a modular modal interface, ensuring seamless integration into existing web projects.
4+
5+
## Features
6+
7+
* **Interactive Flowchart:** A step-by-step visual guide for common Git workflows.
8+
* **Essential Commands Shortlist:** A quick reference for frequently used Git commands and their use cases.
9+
* **System-Specific Commands:** Toggle between Windows (PowerShell) and Bash/Linux commands.
10+
* **One-Click Copy:** Easily copy Git commands to the clipboard.
11+
* **✨ AI Commit Message Generator:** Describe code changes in plain English, and the integrated AI (powered by Gemini) suggests concise and conventional Git commit messages.
12+
* **✨ AI Git Command Explainer:** Input any Git command to receive a clear, simple explanation, including its purpose, common use cases, and potential pitfalls.
13+
* **Theme Toggle:** Switch between a "dark glass" theme and a "light" theme.
14+
* **Modular Design:** Built with separate HTML, CSS, and JavaScript files for easy integration and maintainability.
15+
* **Responsive Layout:** Optimized for seamless viewing and interaction across various devices.
16+
* **Custom Scrollbars:** Subtle, theme-matching "dot" style scrollbars.
17+
18+
## Technologies Used
19+
20+
* **HTML5:** Structures the web application.
21+
* **CSS3:** Provides styling, including custom properties (CSS variables) for robust theming, responsive design, and glassmorphism effects.
22+
* **JavaScript (ES6+):** Handles core logic for modal interactions, dynamic content loading, theme toggling, and AI API calls.
23+
* **Gemini API (gemini-2.0-flash):** Powers the AI commit message generation and Git command explanations.
24+
* **Marked.js:** A lightweight library for parsing Markdown content (specifically for AI explanations) into HTML.
25+
26+
## How to Use / Project Integration
27+
28+
This project is designed for easy integration into any existing web project.
29+
30+
### 1. Download Files
31+
32+
* `index.html` (or integrate its content into your main HTML file)
33+
* `style.css`
34+
* `script.js`
35+
36+
### 2. Project Setup
37+
38+
Place `style.css` and `script.js` in appropriate directories within your project (e.g., `css/` and `js/`).
39+
40+
### 3. HTML Integration
41+
42+
* **Launch Button:** In your main `index.html` (or target HTML file), ensure you have an element that will launch the guide modal. An example is:
43+
```html
44+
<button id="openGitGuide">Open Git Guide</button>
45+
```
46+
* **Modal Structure:** Paste the entire `<div id="mainGuideModal" ...>` block (which contains the full guide structure) right before your closing `</body>` tag.
47+
48+
### 4. Link CSS
49+
50+
In your `<head>` section, link to the `style.css` file:
51+
52+
```html
53+
<link rel="stylesheet" href="path/to/your/style.css">
54+
```
55+
56+
(Replace `path/to/your/` with the actual path in your project.)
57+
58+
### 5. Link JavaScript
59+
60+
Before your closing `</body>` tag, link to the `script.js` file:
61+
62+
```html
63+
<script src="path/to/your/script.js"></script>
64+
```
65+
66+
(Replace `path/to/your/` with the actual path in your project.)
67+
68+
### 6. Run Locally
69+
70+
Simply open your `index.html` file in a web browser. The "Open Git Guide" button should be visible, and clicking it will launch the interactive modal.
71+
72+
## Customization
73+
74+
The project leverages CSS variables for easy theming and customization. All key colors, spacing, and effects are defined in the `:root` pseudo-class within `style.css`.
75+
76+
You can modify these variables to match your project's aesthetic:
77+
78+
```css
79+
:root {
680
/* === Dark Theme === */
7-
--Eigengrau: #16161d; /* Main dark background */
81+
--Eigengrau: #16161d; /* Main dark background */
882
--transparent-dark-glass: rgba(18, 18, 18, 0.7); /* Modal overlay/card background */
9-
--text-color: #f2f2f2; /* Primary text color */
10-
--accent-color: #CBFFFA; /* Highlight/accent color */
11-
--input-bg: rgba(0, 0, 0, 0.3); /* Background for inputs/code blocks */
12-
--button-bg: rgba(0, 0, 0, 0.5); /* Default button background */
83+
--text-color: #f2f2f2; /* Primary text color */
84+
--accent-color: #CBFFFA; /* Highlight/accent color */
85+
--input-bg: rgba(0, 0, 0, 0.3); /* Background for inputs/code blocks */
86+
--button-bg: rgba(0, 0, 0, 0.5); /* Default button background */
1387
--button-hover-bg: rgba(203, 255, 250, 0.2); /* Button hover state */
1488
--border-color: rgba(203, 255, 250, 0.3); /* Borders and subtle lines */
1589
--digital-font: 'Orbitron', sans-serif; /* Specific font for digital elements */
90+
}
91+
```
1692

1793
/* Glass & Glow Effects */
1894
--frost-glow: rgba(203, 255, 250, 0.05); /* Subtle inner glow */
@@ -44,7 +120,7 @@ Link JavaScript: Before your closing </body> tag, link to the script.js file:<sc
44120
--light-frost-glow: rgba(0, 123, 255, 0.05);
45121
--light-shadow-glow: 0 0 15px rgba(0, 123, 255, 0.3);
46122
}
47-
ContributingContributions are welcome! If you have suggestions for new features, improvements, or bug fixes, please feel free to contribute.LicenseThis project is open-source and available under the MIT License.
123+
Contributions are welcome! If you have suggestions for new features, improvements, or bug fixes, please feel free to contribute. This project is open-source and available under the MIT License.
48124

49125

50126
REACT Implimentatian notes:

0 commit comments

Comments
 (0)