Skip to content

Commit b7ca95d

Browse files
Alvi24-hubAlvi24-hub
committed
Fix: Many buttons look like plain text — now identifiable as clickable
1 parent 2309a6e commit b7ca95d

8 files changed

Lines changed: 236 additions & 18 deletions

File tree

‎web-app/js/projects/collatz.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,28 @@ function getCollatzHTML() {
135135
display: block;
136136
margin: 0 auto;
137137
}
138+
/* Fix for Generate Sequence button */
139+
.btn-generate {
140+
background: var(--primary-color);
141+
color: white;
142+
border: none;
143+
padding: 10px 24px;
144+
border-radius: 8px;
145+
cursor: pointer;
146+
font-weight: 600;
147+
font-size: 1rem;
148+
transition: all 0.2s ease;
149+
}
150+
151+
.btn-generate:hover {
152+
transform: translateY(-2px);
153+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
154+
filter: brightness(1.05);
155+
}
156+
157+
.btn-generate:active {
158+
transform: translateY(0);
159+
}
138160
</style>
139161
`;
140162
}

‎web-app/js/projects/coordinate-polar-transform.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,26 @@ function getCoordinatePolarTransformHTML() {
9595
border:1px solid white;
9696
color: var(--text-color);
9797
}
98-
.btn-primary{
99-
padding:15px;
100-
border-radius:30px;
98+
.btn-primary {
99+
background: var(--primary-color);
100+
color: white;
101+
border: none;
102+
padding: 12px 28px;
103+
border-radius: 30px;
104+
cursor: pointer;
105+
font-weight: 600;
106+
font-size: 1rem;
107+
transition: all 0.2s ease;
108+
}
109+
110+
.btn-primary:hover {
111+
transform: translateY(-2px);
112+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
113+
filter: brightness(1.05);
114+
}
115+
116+
.btn-primary:active {
117+
transform: translateY(0);
101118
}
102119
</style>
103120
`;

‎web-app/js/projects/derivative-calculator.js‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,36 @@ function getDerivativeCalculatorHTML() {
7070
min-height: 110px;
7171
line-height: 1.7;
7272
}
73-
input{
74-
padding:15px;
75-
border-radius:30px;
76-
background-color:var(--bg-color);
77-
outline:none;
78-
border:1px solid white;
73+
input {
74+
padding: 15px;
75+
border-radius: 30px;
76+
background-color: var(--bg-color);
77+
outline: none;
78+
border: 1px solid var(--border-color);
7979
color: var(--text-color);
80+
width: 100%;
81+
}
82+
83+
button {
84+
background: var(--primary-color);
85+
color: white;
86+
border: none;
87+
padding: 12px 24px;
88+
border-radius: 30px;
89+
cursor: pointer;
90+
font-weight: 600;
91+
font-size: 0.95rem;
92+
transition: all 0.2s ease;
8093
}
81-
button{
82-
padding:15px;
83-
border-radius:30px;
94+
95+
button:hover {
96+
transform: translateY(-2px);
97+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
98+
filter: brightness(1.05);
99+
}
100+
101+
button:active {
102+
transform: translateY(0);
84103
}
85104
</style>
86105
`;

‎web-app/js/projects/fibonacci.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,27 @@ function getFibonacciHTML() {
6767
font-weight:bold;
6868
margin-top:1rem;
6969
}
70+
.btn-generate {
71+
background: var(--primary-color);
72+
color: white;
73+
border: none;
74+
padding: 12px 28px;
75+
border-radius: 30px;
76+
cursor: pointer;
77+
font-weight: 600;
78+
font-size: 1rem;
79+
transition: all 0.2s ease;
80+
}
81+
82+
.btn-generate:hover {
83+
transform: translateY(-2px);
84+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
85+
filter: brightness(1.05);
86+
}
87+
88+
.btn-generate:active {
89+
transform: translateY(0);
90+
}
7091
</style>
7192
`;
7293
}

‎web-app/js/projects/number-converter.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,27 @@ function getNumberConverterHTML() {
3535
.converter-row label { font-weight: 600; }
3636
.converter-row input, .converter-row select { padding: 0.9rem; border-radius: 10px; border: 2px solid var(--border-color); background: var(--surface-color); color: var(--text-color); }
3737
.converter-result { min-height: 2rem; padding: 0.9rem 1rem; border-radius: 10px; background: var(--surface-color); border: 1px solid var(--border-color); font-weight: 700; }
38-
.btn-primary{
39-
padding:15px;
40-
border-radius:30px;
38+
.btn-primary {
39+
background: var(--primary-color);
40+
color: white;
41+
border: none;
42+
padding: 12px 28px;
43+
border-radius: 30px;
44+
cursor: pointer;
45+
font-weight: 600;
46+
font-size: 1rem;
47+
transition: all 0.2s ease;
48+
width: 100%;
49+
}
50+
51+
.btn-primary:hover {
52+
transform: translateY(-2px);
53+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
54+
filter: brightness(1.05);
55+
}
56+
57+
.btn-primary:active {
58+
transform: translateY(0);
4159
}
4260
</style>
4361
`;

‎web-app/js/projects/number-guessing.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,82 @@ function getNumberGuessingHTML() {
229229
.btn-reset { background: var(--primary-color); }
230230
.btn-change-diff { background: var(--surface-color); color: var(--text-color); border: 2px solid var(--border-color); }
231231
.btn-change-diff:hover { border-color: var(--primary-color); }
232+
233+
/* Guess button */
234+
.btn-guess {
235+
background: var(--primary-color);
236+
color: white;
237+
border: none;
238+
padding: 1rem 2rem;
239+
border-radius: 10px;
240+
cursor: pointer;
241+
font-size: 1.2rem;
242+
font-weight: 600;
243+
transition: all 0.2s ease;
244+
}
245+
246+
.btn-guess:hover {
247+
transform: translateY(-2px);
248+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
249+
filter: brightness(1.05);
250+
}
251+
252+
.btn-guess:active {
253+
transform: translateY(0);
254+
}
255+
256+
.btn-guess:disabled {
257+
opacity: 0.5;
258+
cursor: not-allowed;
259+
transform: none;
260+
}
261+
262+
/* Reset / New Game button */
263+
.btn-reset {
264+
background: var(--primary-color);
265+
color: white;
266+
border: none;
267+
padding: 0.85rem 1.75rem;
268+
border-radius: 10px;
269+
cursor: pointer;
270+
font-size: 1rem;
271+
font-weight: 600;
272+
transition: all 0.2s ease;
273+
}
274+
275+
.btn-reset:hover {
276+
transform: translateY(-2px);
277+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
278+
filter: brightness(1.05);
279+
}
280+
281+
.btn-reset:active {
282+
transform: translateY(0);
283+
}
284+
285+
/* Change Difficulty button */
286+
.btn-change-diff {
287+
background: var(--surface-color);
288+
color: var(--text-color);
289+
border: 2px solid var(--border-color);
290+
padding: 0.85rem 1.75rem;
291+
border-radius: 10px;
292+
cursor: pointer;
293+
font-size: 1rem;
294+
font-weight: 600;
295+
transition: all 0.2s ease;
296+
}
297+
298+
.btn-change-diff:hover {
299+
border-color: var(--primary-color);
300+
transform: translateY(-2px);
301+
background: var(--primary-color);
302+
color: white;
303+
}
304+
305+
.btn-change-diff:active {
306+
transform: translateY(0);
307+
}
232308
</style>
233309
`;
234310
}

‎web-app/js/projects/pascal-triangle.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,28 @@ function getPascalTriangleHTML() {
336336
padding: 0.75rem 0.5rem;
337337
}
338338
}
339+
.btn-generate {
340+
background: var(--accent, #22c55e);
341+
color: white;
342+
border: none;
343+
padding: 0.55rem 1rem;
344+
border-radius: 6px;
345+
cursor: pointer;
346+
font-size: 0.85rem;
347+
font-weight: 700;
348+
transition: all 0.2s ease;
349+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
350+
}
351+
352+
.btn-generate:hover {
353+
background: var(--accent-hover, #16a34a);
354+
transform: translateY(-2px);
355+
box-shadow: 0 4px 8px rgba(34, 197, 94, 0.3);
356+
}
357+
358+
.btn-generate:active {
359+
transform: translateY(0);
360+
}
339361
</style>
340362
`;
341363
}

‎web-app/js/projects/whack-a-mole.js‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,32 @@ function getWhackAMoleHTML() {
2323
.whack-hole.active { background: linear-gradient(135deg, #f59e0b, #ef4444); color: white; }
2424
.whack-actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
2525
.whack-message { margin-top: 1rem; font-weight: 600; min-height: 1.5rem; }
26-
.btn-primary{
27-
padding:15px;
28-
border-radius:30px;
26+
.btn-primary {
27+
background: var(--primary-color, #6366f1);
28+
color: white;
29+
border: none;
30+
padding: 12px 24px;
31+
border-radius: 30px;
32+
cursor: pointer;
33+
font-weight: 600;
34+
font-size: 1rem;
35+
transition: all 0.2s ease;
36+
}
37+
38+
.btn-primary:hover {
39+
transform: translateY(-2px);
40+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
41+
filter: brightness(1.05);
42+
}
43+
44+
.btn-primary:active {
45+
transform: translateY(0);
46+
}
47+
48+
.btn-primary:disabled {
49+
opacity: 0.5;
50+
cursor: not-allowed;
51+
transform: none;
2952
}
3053
</style>
3154
`;

0 commit comments

Comments
 (0)