Skip to content

Commit 6215844

Browse files
Hrishikesh-DalalHrishikesh-Dalal
authored
Merge pull request #129 from DinethShakya23/feature/hangman
feat: implement Hangman game UI and gameplay logic with DOM interaction
2 parents 11a9c54 + fe33078 commit 6215844

6 files changed

Lines changed: 1171 additions & 379 deletions

File tree

‎assets/styles.css‎

Lines changed: 122 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,204 +1,206 @@
11
:root {
2-
--bg: #0f0f12;
3-
--card: #17171c;
4-
--text: #eef1f8;
5-
--muted: #a6adbb;
6-
--accent: #6ee7b7;
7-
--accent-2: #93c5fd
2+
--bg: #0f0f12;
3+
--card: #17171c;
4+
--text: #eef1f8;
5+
--muted: #a6adbb;
6+
--accent: #6ee7b7;
7+
--accent-2: #93c5fd;
88
}
99

10-
1110
body:not(.dark-mode) {
12-
--bg: #f8f9fa;
13-
--card: #ffffff;
14-
--text: #1a1a1a;
15-
--muted: #6b7280;
16-
--bg-gradient-start: #f0f4f8;
17-
--bg-gradient-end: #e2e8f0;
18-
--border: #e5e7eb;
19-
--input-bg: #ffffff;
11+
--bg: #f8f9fa;
12+
--card: #ffffff;
13+
--text: #1a1a1a;
14+
--muted: #6b7280;
15+
--bg-gradient-start: #f0f4f8;
16+
--bg-gradient-end: #e2e8f0;
17+
--border: #e5e7eb;
18+
--input-bg: #ffffff;
2019
}
2120

22-
2321
body.dark-mode {
24-
--bg: #0f0f12;
25-
--card: #17171c;
26-
--text: #eef1f8;
27-
--muted: #a6adbb;
28-
--bg-gradient-start: #0b0b0e;
29-
--bg-gradient-end: #121217;
30-
--border: #262631;
31-
--input-bg: #0e0e13;
22+
--bg: #0f0f12;
23+
--card: #17171c;
24+
--text: #eef1f8;
25+
--muted: #a6adbb;
26+
--bg-gradient-start: #0b0b0e;
27+
--bg-gradient-end: #121217;
28+
--border: #262631;
29+
--input-bg: #0e0e13;
3230
}
3331

3432
* {
35-
box-sizing: border-box
33+
box-sizing: border-box;
3634
}
3735

3836
html,
3937
body {
40-
margin: 0;
41-
height: 100%
38+
margin: 0;
39+
height: 100%;
4240
}
4341

4442
body {
45-
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
46-
background: linear-gradient(180deg, var(--bg-gradient-start, #0b0b0e), var(--bg-gradient-end, #121217));
47-
color: var(--text);
48-
transition: background 0.3s ease, color 0.3s ease;
43+
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
44+
Noto Sans, sans-serif;
45+
background: linear-gradient(
46+
180deg,
47+
var(--bg-gradient-start, #0b0b0e),
48+
var(--bg-gradient-end, #121217)
49+
);
50+
color: var(--text);
51+
transition: background 0.3s ease, color 0.3s ease;
4952
}
5053

5154
.site-header {
52-
padding: 2rem 1rem;
53-
text-align: center;
54-
position: relative;
55+
padding: 2rem 1rem;
56+
text-align: center;
57+
position: relative;
5558
}
5659

5760
.site-header h1 {
58-
margin: 0 0 .5rem;
59-
font-size: 2rem
61+
margin: 0 0 0.5rem;
62+
font-size: 2rem;
6063
}
6164

6265
.site-header p {
63-
margin: .25rem 0 1rem;
64-
color: var(--muted)
66+
margin: 0.25rem 0 1rem;
67+
color: var(--muted);
6568
}
6669

6770
.controls {
68-
display: flex;
69-
gap: .5rem;
70-
justify-content: center;
71-
flex-wrap: wrap;
72-
align-items: center;
71+
display: flex;
72+
gap: 0.5rem;
73+
justify-content: center;
74+
flex-wrap: wrap;
75+
align-items: center;
7376
}
7477

7578
.controls input,
7679
.controls select {
77-
padding: .5rem .75rem;
78-
border-radius: .5rem;
79-
border: 1px solid var(--border, #2a2a33);
80-
background: var(--input-bg, #0e0e13);
81-
color: var(--text);
82-
transition: background 0.3s ease, border-color 0.3s ease;
80+
padding: 0.5rem 0.75rem;
81+
border-radius: 0.5rem;
82+
border: 1px solid var(--border, #2a2a33);
83+
background: var(--input-bg, #0e0e13);
84+
color: var(--text);
85+
transition: background 0.3s ease, border-color 0.3s ease;
8386
}
8487

85-
8688
.theme-toggle {
87-
background: var(--card);
88-
border: 2px solid var(--border, #262631);
89-
border-radius: 50%;
90-
width: 50px;
91-
height: 50px;
92-
cursor: pointer;
93-
display: flex;
94-
align-items: center;
95-
justify-content: center;
96-
transition: all 0.3s ease;
97-
position: fixed;
98-
top: 1rem;
99-
right: 1rem;
100-
z-index: 1000;
101-
color: var(--text);
102-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
89+
background: var(--card);
90+
border: 2px solid var(--border, #262631);
91+
border-radius: 50%;
92+
width: 50px;
93+
height: 50px;
94+
cursor: pointer;
95+
display: flex;
96+
align-items: center;
97+
justify-content: center;
98+
transition: all 0.3s ease;
99+
position: fixed;
100+
top: 1rem;
101+
right: 1rem;
102+
z-index: 1000;
103+
color: var(--text);
104+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
103105
}
104106

105107
.theme-toggle:hover {
106-
transform: rotate(15deg) scale(1.1);
107-
border-color: var(--accent);
108-
box-shadow: 0 6px 16px rgba(110, 231, 183, 0.2);
108+
transform: rotate(15deg) scale(1.1);
109+
border-color: var(--accent);
110+
box-shadow: 0 6px 16px rgba(110, 231, 183, 0.2);
109111
}
110112

111113
.theme-toggle svg {
112-
position: absolute;
113-
transition: all 0.3s ease;
114+
position: absolute;
115+
transition: all 0.3s ease;
114116
}
115117

116118
.theme-toggle .sun-icon {
117-
opacity: 0;
118-
transform: rotate(90deg);
119+
opacity: 0;
120+
transform: rotate(90deg);
119121
}
120122

121123
.theme-toggle .moon-icon {
122-
opacity: 1;
123-
transform: rotate(0deg);
124+
opacity: 1;
125+
transform: rotate(0deg);
124126
}
125127

126128
body:not(.dark-mode) .theme-toggle .sun-icon {
127-
opacity: 1;
128-
transform: rotate(0deg);
129+
opacity: 1;
130+
transform: rotate(0deg);
129131
}
130132

131133
body:not(.dark-mode) .theme-toggle .moon-icon {
132-
opacity: 0;
133-
transform: rotate(-90deg);
134+
opacity: 0;
135+
transform: rotate(-90deg);
134136
}
135137

136138
.project-grid {
137-
display: grid;
138-
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
139-
gap: 1rem;
140-
padding: 1rem;
141-
max-width: 1100px;
142-
margin: 0 auto 3rem
139+
display: grid;
140+
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
141+
gap: 1rem;
142+
padding: 1rem;
143+
max-width: 1100px;
144+
margin: 0 auto 3rem;
143145
}
144146

145147
.card {
146-
background: var(--card);
147-
border: 1px solid var(--border, #262631);
148-
border-radius: .75rem;
149-
padding: 1rem;
150-
box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset;
151-
transition: background 0.3s ease, border-color 0.3s ease;
148+
background: var(--card);
149+
border: 1px solid var(--border, #262631);
150+
border-radius: 0.75rem;
151+
padding: 1rem;
152+
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
153+
transition: background 0.3s ease, border-color 0.3s ease;
152154
}
153155

154156
.card h3 {
155-
margin: .25rem 0 .25rem;
156-
font-size: 1.05rem
157+
margin: 0.25rem 0 0.25rem;
158+
font-size: 1.05rem;
157159
}
158160

159161
.card p {
160-
margin: .25rem 0 .75rem;
161-
color: var(--muted);
162-
font-size: .9rem;
163-
min-height: 2.6em
162+
margin: 0.25rem 0 0.75rem;
163+
color: var(--muted);
164+
font-size: 0.9rem;
165+
min-height: 2.6em;
164166
}
165167

166168
.card .meta {
167-
display: flex;
168-
gap: .5rem;
169-
flex-wrap: wrap;
170-
color: var(--muted);
171-
font-size: .8rem
169+
display: flex;
170+
gap: 0.5rem;
171+
flex-wrap: wrap;
172+
color: var(--muted);
173+
font-size: 0.8rem;
172174
}
173175

174176
.card a {
175-
display: inline-block;
176-
margin-top: .75rem;
177-
padding: .5rem .75rem;
178-
border-radius: .5rem;
179-
background: linear-gradient(135deg, var(--accent), var(--accent-2));
180-
color: #0b1020;
181-
text-decoration: none;
182-
font-weight: 600
177+
display: inline-block;
178+
margin-top: 0.75rem;
179+
padding: 0.5rem 0.75rem;
180+
border-radius: 0.5rem;
181+
background: linear-gradient(135deg, var(--accent), var(--accent-2));
182+
color: #0b1020;
183+
text-decoration: none;
184+
font-weight: 600;
183185
}
184186

185187
.card a:hover {
186-
filter: brightness(1.05)
188+
filter: brightness(1.05);
187189
}
188190

189191
.site-footer {
190-
padding: 2rem 1rem;
191-
text-align: center;
192-
color: var(--muted);
193-
border-top: 1px solid var(--border, #22222b);
194-
transition: border-color 0.3s ease;
192+
padding: 2rem 1rem;
193+
text-align: center;
194+
color: var(--muted);
195+
border-top: 1px solid var(--border, #22222b);
196+
transition: border-color 0.3s ease;
195197
}
196198

197199
.site-footer a {
198-
color: var(--accent);
199-
text-decoration: none;
200+
color: var(--accent);
201+
text-decoration: none;
200202
}
201203

202204
.site-footer a:hover {
203-
text-decoration: underline;
204-
}
205+
text-decoration: underline;
206+
}

0 commit comments

Comments
 (0)