Skip to content

Commit bc67ead

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request steam-bell-92#1083 from Alvi24-hub/fix/button-styling
Fix: Buttons in some projects are now identifiable as clickable
2 parents 3caa124 + 71cd394 commit bc67ead

11 files changed

Lines changed: 589 additions & 51 deletions

‎web-app/js/projects.js‎

Lines changed: 346 additions & 30 deletions
Large diffs are not rendered by default.

‎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/rock-paper-scissor.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
function getRockPaperScissorHTML() {
22
return `
3+
<div class="project-content">
4+
<h2>✊ Rock Paper Scissors ✌️</h2>
35
<div class="rps-game">
46
<!-- Difficulty Tabs -->
57
<div class="rps-difficulty-tabs">
@@ -77,6 +79,7 @@ function getRockPaperScissorHTML() {
7779
7880
<button class="rps-reset-btn" id="resetRPS">↺ Reset</button>
7981
</div>
82+
</div>
8083
8184
<style>
8285
.rps-game {

‎web-app/js/projects/simon-says.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
function getSimonSaysHTML() {
22
return `
3-
3+
<div class="project-content">
44
<div class="game-container ui-panel">
55
6-
<h1>🧠 Simon Says</h1>
6+
<h2>🧠 Simon Says</h2>
77
88
<p class="subtitle">
99
Only follow commands that start with “Simon says”!
@@ -99,7 +99,8 @@ function getSimonSaysHTML() {
9999
<p id="message"></p>
100100
101101
</div>
102-
102+
</div>
103+
103104
<style>
104105
105106
.game-container{

0 commit comments

Comments
 (0)