Skip to content

Commit 4ca8118

Browse files
phpfactphpfact
authored
Refactor index.html for style and functionality updates
Updated styles and removed unused button styles. Adjusted toast position and modified input placeholders for clarity.
1 parent 52762fe commit 4ca8118

File tree

1 file changed

+47
-121
lines changed

1 file changed

+47
-121
lines changed

‎index.html‎

Lines changed: 47 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,9 @@
6666
display: block;
6767
margin-bottom: 10px;
6868
color: #1a1a1a;
69-
font-size: 0.95rem;
69+
font-size: 0.85rem;
7070
letter-spacing: 0.2px;
7171
text-transform: uppercase;
72-
font-size: 0.85rem;
7372
}
7473

7574
select, input, textarea {
@@ -91,10 +90,6 @@
9190
background: #fafafa;
9291
}
9392

94-
select:hover, input:hover, textarea:hover {
95-
border-color: #cccccc;
96-
}
97-
9893
textarea {
9994
resize: none;
10095
height: 80px;
@@ -128,7 +123,6 @@
128123
text-transform: uppercase;
129124
letter-spacing: 0.5px;
130125
transition: all 0.3s ease;
131-
border: 1.5px solid transparent;
132126
}
133127

134128
.generate-btn {
@@ -143,32 +137,6 @@
143137
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
144138
}
145139

146-
.generate-btn:active {
147-
transform: translateY(0);
148-
}
149-
150-
.copy-btn {
151-
background: #ffffff;
152-
color: #000000;
153-
border: 1.5px solid #000000;
154-
display: none;
155-
}
156-
157-
.copy-btn:hover {
158-
background: #000000;
159-
color: #ffffff;
160-
transform: translateY(-2px);
161-
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
162-
}
163-
164-
.copy-btn:active {
165-
transform: translateY(0);
166-
}
167-
168-
.copy-btn.show {
169-
display: block;
170-
}
171-
172140
.output-section {
173141
margin-top: 30px;
174142
display: none;
@@ -185,7 +153,6 @@
185153
margin-bottom: 10px;
186154
font-size: 0.85rem;
187155
text-transform: uppercase;
188-
letter-spacing: 0.2px;
189156
}
190157

191158
.output {
@@ -199,11 +166,9 @@
199166
word-wrap: break-word;
200167
color: #1a1a1a;
201168
line-height: 1.6;
202-
margin-bottom: 12px;
203-
background: linear-gradient(135deg, #f9f9f9 0%, #f5f5f5 100%);
204169
}
205170

206-
/* Toast styles */
171+
/* Toast styles - TOP POSITION */
207172
#toast {
208173
visibility: hidden;
209174
min-width: 300px;
@@ -215,117 +180,86 @@
215180
position: fixed;
216181
z-index: 9999;
217182
left: 50%;
218-
bottom: 30px;
183+
top: 20px;
219184
font-size: 0.95rem;
220185
font-weight: 500;
221186
opacity: 0;
222-
transition: opacity 0.4s ease, bottom 0.4s ease;
223187
transform: translateX(-50%);
188+
transition: opacity 0.4s ease, top 0.4s ease;
224189
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
225-
letter-spacing: 0.3px;
226190
}
227191

228192
#toast.show {
229193
visibility: visible;
230194
opacity: 1;
231-
bottom: 50px;
195+
top: 40px;
232196
}
233197

234198
@keyframes fadeIn {
235-
from {
236-
opacity: 0;
237-
}
238-
to {
239-
opacity: 1;
240-
}
199+
from { opacity: 0; }
200+
to { opacity: 1; }
241201
}
242202

243203
@keyframes slideUp {
244-
from {
245-
opacity: 0;
246-
transform: translateY(30px);
247-
}
248-
to {
249-
opacity: 1;
250-
transform: translateY(0);
251-
}
204+
from { opacity: 0; transform: translateY(30px); }
205+
to { opacity: 1; transform: translateY(0); }
252206
}
253207

254208
@keyframes slideDown {
255-
from {
256-
opacity: 0;
257-
max-height: 0;
258-
}
259-
to {
260-
opacity: 1;
261-
max-height: 500px;
262-
}
263-
}
264-
265-
@media (max-width: 600px) {
266-
.header h1 {
267-
font-size: 2.5rem;
268-
margin-bottom: 8px;
269-
}
270-
271-
.container {
272-
padding: 30px 20px;
273-
}
274-
275-
.form-group {
276-
margin-bottom: 20px;
277-
}
209+
from { opacity: 0; max-height: 0; }
210+
to { opacity: 1; max-height: 500px; }
278211
}
279212
</style>
280213
</head>
281214
<body>
215+
282216
<div class="header">
283217
<h1>Git Commit</h1>
284218
<p>Professional commit message generator</p>
285219
</div>
286220

287221
<div class="container">
222+
288223
<div class="form-group">
289224
<label>Commit Type</label>
290225
<select id="type">
291-
<!-- 🔥 MAJOR UPDATE -->
292-
<optgroup label="🚀 MAJOR Update (Breaking Changes)">
293-
<option value="breaking">breaking - 💥 Major Update (Breaking Change)</option>
294-
</optgroup>
295-
296-
<!-- ✨ MINOR UPDATE -->
297-
<optgroup label="🌟 MINOR Update (New Features)">
298-
<option value="feat">feat - ✨ New Feature</option>
299-
</optgroup>
300-
301-
<!-- 🛠️ PATCH UPDATE -->
302-
<optgroup label="🔧 PATCH Update (Fixes & Maintenance)">
303-
<option value="fix">fix - 🐛 Bug Fix</option>
304-
<option value="hotfix">hotfix - 🚑 Critical Bug Fix</option>
305-
<option value="docs">docs - 📝 Documentation Update</option>
306-
<option value="style">style - 💅 Code Style Change</option>
307-
<option value="refactor">refactor - ♻️ Code Restructure (No behavior change)</option>
308-
<option value="perf">perf - ⚡ Performance Improvement</option>
309-
<option value="test">test - ✅ Add/Update Tests</option>
310-
<option value="chore">chore - 🔧 Build/Config Updates</option>
311-
<option value="ci">ci - 🤖 CI/CD Configuration</option>
312-
<option value="build">build - 🏗️ Build System / Dependency Updates</option>
313-
<option value="revert">revert - ⏪ Revert Commit</option>
314-
<option value="security">security - 🔒 Security Fix</option>
315-
<option value="deps">deps - 📦 Dependency Updates</option>
316-
<option value="merge">merge - 🔀 Merge Branch / Conflict Resolve</option>
317-
</optgroup>
226+
227+
<optgroup label="🚀 MAJOR Update (Breaking Changes)">
228+
<option value="breaking">breaking - 💥 Major Update (Breaking Change)</option>
229+
</optgroup>
230+
231+
<optgroup label="🌟 MINOR Update (New Features)">
232+
<option value="feat">feat - ✨ New Feature</option>
233+
</optgroup>
234+
235+
<optgroup label="🔧 PATCH Update (Fixes & Maintenance)">
236+
<option value="fix">fix - 🐛 Bug Fix</option>
237+
<option value="hotfix">hotfix - 🚑 Critical Bug Fix</option>
238+
<option value="docs">docs - 📝 Documentation Update</option>
239+
<option value="style">style - 💅 Code Style Change</option>
240+
<option value="refactor">refactor - ♻️ Code Restructure</option>
241+
<option value="perf">perf - ⚡ Performance Improvement</option>
242+
<option value="test">test - ✅ Add/Update Tests</option>
243+
<option value="chore">chore - 🔧 Build/Config Updates</option>
244+
<option value="ci">ci - 🤖 CI/CD Configuration</option>
245+
<option value="build">build - 🏗️ Build System</option>
246+
<option value="revert">revert - ⏪ Revert Commit</option>
247+
<option value="security">security - 🔒 Security Fix</option>
248+
<option value="deps">deps - 📦 Dependency Updates</option>
249+
<option value="merge">merge - 🔀 Merge Conflict Resolve</option>
250+
</optgroup>
251+
318252
</select>
319253
</div>
320254

321255
<div class="form-group">
322256
<label>Scope</label>
323-
<input type="text" id="scope" placeholder="e.g. login, auth, api, profile, dashboard">
257+
<input type="text" id="scope" placeholder="e.g. login, auth, api, dashboard">
324258
</div>
325259

326260
<div class="form-group">
327261
<label>Short Message</label>
328-
<textarea id="message" placeholder="e.g. add phone number field to authentication page"></textarea>
262+
<textarea id="message" placeholder="e.g. add phone number field"></textarea>
329263
</div>
330264

331265
<div class="form-group">
@@ -340,14 +274,13 @@ <h1>Git Commit</h1>
340274
<div class="output-section" id="outputSection">
341275
<div class="output-label">Generated Command</div>
342276
<div class="output" id="output"></div>
343-
<button class="copy-btn" id="copyBtn" onclick="copyCommand()">Copy Command</button>
344277
</div>
278+
345279
</div>
346280

347281
<div id="toast"></div>
348282

349283
<script>
350-
// Load data from localStorage on page load
351284
window.onload = function() {
352285
const fields = ['type','scope','message','version'];
353286
fields.forEach(f => {
@@ -360,7 +293,7 @@ <h1>Git Commit</h1>
360293
const toast = document.getElementById('toast');
361294
toast.innerText = message;
362295
toast.classList.add("show");
363-
setTimeout(() => { toast.classList.remove("show"); }, 3000);
296+
setTimeout(() => { toast.classList.remove("show"); }, 2500);
364297
}
365298

366299
function generateCommand() {
@@ -369,13 +302,11 @@ <h1>Git Commit</h1>
369302
const message = document.getElementById('message').value.trim();
370303
const version = document.getElementById('version').value.trim();
371304

372-
// Validate all fields
373305
if (!type || !scope || !message || !version) {
374306
showToast("❌ Please fill all required fields!");
375307
return;
376308
}
377309

378-
// Save to localStorage
379310
localStorage.setItem('type', type);
380311
localStorage.setItem('scope', scope);
381312
localStorage.setItem('message', message);
@@ -386,21 +317,16 @@ <h1>Git Commit</h1>
386317

387318
document.getElementById('output').innerText = command;
388319
document.getElementById('outputSection').classList.add('show');
389-
document.getElementById('copyBtn').classList.add('show');
390-
showToast("✅ Commit command generated!");
391-
}
392320

393-
function copyCommand() {
394-
const output = document.getElementById('output').innerText;
395-
navigator.clipboard.writeText(output).then(() => {
396-
showToast("✅ Command copied to clipboard!");
321+
navigator.clipboard.writeText(command).then(() => {
322+
showToast("📋 Commit copied to clipboard!");
397323
});
398324
}
399325

400-
// Allow Enter key to generate command
401326
document.getElementById('version').addEventListener('keypress', function(e) {
402-
if(e.key === 'Enter') generateCommand();
327+
if (e.key === 'Enter') generateCommand();
403328
});
404329
</script>
330+
405331
</body>
406332
</html>

0 commit comments

Comments
 (0)