Skip to content

Commit aa5d029

Browse files
phpfactphpfact
authored
Add Git commit generator interface in index.html
This HTML file implements a Git commit generator interface with a form for selecting commit type, scope, message, and version. It includes styles for layout and functionality for generating and copying the commit command.
0 parents  commit aa5d029

File tree

1 file changed

+159
-0
lines changed

1 file changed

+159
-0
lines changed

‎index.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Git Commit Generator</title>
6+
<style>
7+
body {
8+
font-family: "Segoe UI", sans-serif;
9+
background: #f7f9fc;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
margin: 0;
16+
}
17+
18+
h1 {
19+
color: #333;
20+
margin-bottom: 20px;
21+
}
22+
23+
.container {
24+
background: white;
25+
padding: 25px 30px;
26+
border-radius: 12px;
27+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
28+
width: 400px;
29+
}
30+
31+
label {
32+
font-weight: 600;
33+
margin-top: 10px;
34+
display: block;
35+
}
36+
37+
select, input, textarea {
38+
width: 100%;
39+
padding: 8px;
40+
margin-top: 5px;
41+
border-radius: 6px;
42+
border: 1px solid #ccc;
43+
font-size: 14px;
44+
box-sizing: border-box;
45+
}
46+
47+
textarea {
48+
resize: none;
49+
height: 60px;
50+
}
51+
52+
button {
53+
margin-top: 15px;
54+
width: 100%;
55+
background: #007bff;
56+
color: white;
57+
border: none;
58+
padding: 10px;
59+
border-radius: 6px;
60+
cursor: pointer;
61+
font-size: 15px;
62+
}
63+
64+
button:hover {
65+
background: #0056b3;
66+
}
67+
68+
.output {
69+
margin-top: 15px;
70+
background: #f1f1f1;
71+
padding: 10px;
72+
border-radius: 6px;
73+
font-family: monospace;
74+
font-size: 14px;
75+
white-space: pre-wrap;
76+
word-wrap: break-word;
77+
}
78+
79+
.copy-btn {
80+
background: #28a745;
81+
margin-top: 10px;
82+
}
83+
84+
.copy-btn:hover {
85+
background: #1e7e34;
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
<h1>Git Commit Generator</h1>
91+
92+
<div class="container">
93+
<label>1️⃣ Commit Type</label>
94+
<select id="type">
95+
<option value="feat">feat - ✨ New feature</option>
96+
<option value="fix">fix - 🐛 Bug fix</option>
97+
<option value="docs">docs - 📝 Documentation change</option>
98+
<option value="style">style - 💅 Code style change</option>
99+
<option value="refactor">refactor - ♻️ Code restructure</option>
100+
<option value="perf">perf - ⚡ Performance improvement</option>
101+
<option value="test">test - ✅ Add/modify test cases</option>
102+
<option value="chore">chore - 🔧 Build/config changes</option>
103+
<option value="ci">ci - 🤖 CI/CD configuration changes</option>
104+
<option value="build">build - 🏗️ Build system or dependency updates</option>
105+
<option value="revert">revert - ⏪ Revert a previous commit</option>
106+
<option value="security">security - 🔒 Security fixes</option>
107+
<option value="deps">deps - 📦 Update project dependencies</option>
108+
<option value="merge">merge - 🔀 Merge branch or resolve conflicts</option>
109+
<option value="hotfix">hotfix - 🚑 Critical production bug fix</option>
110+
</select>
111+
112+
<label>2️⃣ Scope (optional)</label>
113+
<input type="text" id="scope" placeholder="e.g. footer, auth, api, dashboard">
114+
115+
<label>3️⃣ Short Message</label>
116+
<textarea id="message" placeholder="e.g. add Layers version display in app footer"></textarea>
117+
118+
<label>4️⃣ Version (optional)</label>
119+
<input type="text" id="version" placeholder="e.g. 1.3.0">
120+
121+
<button onclick="generateCommand()">Generate Command</button>
122+
123+
<div class="output" id="output" style="display:none;"></div>
124+
<button class="copy-btn" id="copyBtn" style="display:none;" onclick="copyCommand()">Copy Command</button>
125+
</div>
126+
127+
<script>
128+
function generateCommand() {
129+
const type = document.getElementById('type').value;
130+
const scope = document.getElementById('scope').value.trim();
131+
const message = document.getElementById('message').value.trim();
132+
const version = document.getElementById('version').value.trim();
133+
134+
if (!message) {
135+
alert("Please enter a short message!");
136+
return;
137+
}
138+
139+
const scopePart = scope ? `(${scope})` : '';
140+
let command = `git commit -m "${type}${scopePart}: ${message}"`;
141+
142+
if (version) {
143+
command += ` \\\n-m "Version: ${version}"`;
144+
}
145+
146+
document.getElementById('output').style.display = 'block';
147+
document.getElementById('output').innerText = command;
148+
document.getElementById('copyBtn').style.display = 'block';
149+
}
150+
151+
function copyCommand() {
152+
const output = document.getElementById('output').innerText;
153+
navigator.clipboard.writeText(output).then(() => {
154+
alert("✅ Command copied to clipboard!");
155+
});
156+
}
157+
</script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)