Skip to content

Commit 7b11e96

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request #239 from C4aZy/feature/category-page-backgrounds
feat: add category pages with unique backgrounds
2 parents d09c1a4 + 0ebfadd commit 7b11e96

8 files changed

Lines changed: 672 additions & 0 deletions

File tree

‎.DS_Store‎

8 KB
Binary file not shown.

‎web-app/.DS_Store‎

8 KB
Binary file not shown.

‎web-app/assets/games-bg.jpg‎

144 KB
Loading

‎web-app/assets/math-bg.jpg‎

182 KB
Loading

‎web-app/assets/utilities-bg.jpg‎

159 KB
Loading

‎web-app/games.html‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Play beginner-friendly Python game projects in your browser—arcade games, puzzles, and more.">
8+
<meta name="color-scheme" content="dark light">
9+
<meta id="themeColorMeta" name="theme-color" content="#0f172a">
10+
<meta property="og:title" content="Games — Python Mini Projects">
11+
<meta property="og:description" content="Interactive games—no install required.">
12+
<meta property="og:type" content="website">
13+
<title>🎮 Games - Python Mini Projects</title>
14+
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
15+
<link rel="stylesheet" href="css/styles.css">
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
17+
<style>
18+
/* ── Page background ── */
19+
body[data-page="games"] {
20+
background-image: url('assets/games-bg.jpg');
21+
background-size: cover;
22+
background-attachment: fixed;
23+
background-position: center;
24+
}
25+
26+
/* Overlay so cards stay readable */
27+
body[data-page="games"]::before {
28+
content: '';
29+
position: fixed;
30+
inset: 0;
31+
background: rgba(10, 4, 30, 0.72);
32+
z-index: 0;
33+
pointer-events: none;
34+
}
35+
36+
body[data-page="games"] .navbar,
37+
body[data-page="games"] main,
38+
body[data-page="games"] .footer {
39+
position: relative;
40+
z-index: 1;
41+
}
42+
43+
/* Light mode overlay */
44+
[data-theme="light"] body[data-page="games"]::before {
45+
background: rgba(237, 233, 254, 0.80);
46+
}
47+
48+
/* Active tab highlight for this page */
49+
.tab[data-category="games"] {
50+
background: var(--primary-color);
51+
border-color: var(--primary-color);
52+
color: white;
53+
}
54+
</style>
55+
</head>
56+
57+
<body data-page="games">
58+
<a href="#main-content" class="skip-link">🚀 Skip to main content</a>
59+
60+
<!-- Navigation -->
61+
<nav class="navbar" aria-label="Primary">
62+
<div class="container">
63+
<div class="logo">
64+
<h1>🎮 Python Mini Projects</h1>
65+
</div>
66+
<div class="nav-controls">
67+
<button type="button" class="sound-toggle" id="soundToggle" aria-label="Mute sounds">
68+
<i class="fas fa-volume-up" aria-hidden="true"></i>
69+
</button>
70+
<button type="button" class="theme-toggle" id="themeToggle" aria-label="Switch to light mode">
71+
<i class="fas fa-moon" aria-hidden="true"></i>
72+
</button>
73+
</div>
74+
</div>
75+
</nav>
76+
77+
<main id="main-content" tabindex="-1">
78+
79+
<!-- Category Tabs -->
80+
<section class="tabs-section" aria-label="Project categories">
81+
<div class="container">
82+
<div class="tabs-wrapper">
83+
<div class="tabs" role="tablist" aria-label="Project categories">
84+
<a href="index.html" class="tab" role="tab">🌟 All Projects</a>
85+
<a href="games.html" class="tab active" role="tab" aria-selected="true">🎮 Games</a>
86+
<a href="math.html" class="tab" role="tab">🔢 Math</a>
87+
<a href="utilities.html" class="tab" role="tab">🔐 Utilities</a>
88+
</div>
89+
</div>
90+
</div>
91+
</section>
92+
93+
<!-- Projects Grid — Games only -->
94+
<section class="projects-section" aria-label="Game Projects">
95+
<div class="container">
96+
<div class="projects-grid" id="projectsGrid">
97+
98+
<div class="project-card" data-category="games" data-project="rock-paper-scissor">
99+
<div class="card-icon">🪨</div>
100+
<h3>Rock Paper Scissors</h3>
101+
<p>Battle against the computer!</p>
102+
<button class="btn-play">Try It</button>
103+
</div>
104+
105+
<div class="project-card" data-category="games" data-project="dice-rolling">
106+
<div class="card-icon">🎲</div>
107+
<h3>Dice Rolling</h3>
108+
<p>Roll the dice with 3D animation!</p>
109+
<button class="btn-play">Try It</button>
110+
</div>
111+
112+
<div class="project-card" data-category="games" data-project="coin-flip">
113+
<div class="card-icon">🪙</div>
114+
<h3>Coin Flip</h3>
115+
<p>Heads or tails with spinning animation!</p>
116+
<button class="btn-play">Try It</button>
117+
</div>
118+
119+
<div class="project-card" data-category="games" data-project="number-guessing">
120+
<div class="card-icon">🎯</div>
121+
<h3>Number Guessing</h3>
122+
<p>Guess the secret number!</p>
123+
<button class="btn-play">Try It</button>
124+
</div>
125+
126+
<div class="project-card" data-category="games" data-project="hangman">
127+
<div class="card-icon">🎮</div>
128+
<h3>Hangman</h3>
129+
<p>Classic word-guessing game!</p>
130+
<button class="btn-play">Try It</button>
131+
</div>
132+
133+
<div class="project-card" data-category="games" data-project="word-scramble">
134+
<div class="card-icon">🔤</div>
135+
<h3>Word Scramble</h3>
136+
<p>Unscramble words before attempts run out!</p>
137+
<button class="btn-play">Play Now</button>
138+
</div>
139+
140+
<div class="project-card" data-category="games" data-project="flames">
141+
<div class="card-icon">💖</div>
142+
<h3>FLAMES Game</h3>
143+
<p>Discover your relationship status!</p>
144+
<button class="btn-play">Play Now</button>
145+
</div>
146+
147+
<div class="project-card" data-category="games" data-project="dots-boxes">
148+
<div class="card-icon">🔲</div>
149+
<h3>Dots &amp; Boxes AI</h3>
150+
<p>Challenge friends or AI in this strategy game!</p>
151+
<button class="btn-play">Play Now</button>
152+
</div>
153+
154+
<div class="project-card" data-category="games" data-project="password-forge">
155+
<div class="card-icon">🔐</div>
156+
<h3>Password Forge</h3>
157+
<p>Survive evolving firewall password rules!</p>
158+
<button class="btn-play">Try It</button>
159+
</div>
160+
161+
<div class="project-card" data-category="games" data-project="math-quiz">
162+
<div class="card-icon">🧠</div>
163+
<h3>Math Quiz</h3>
164+
<p>MCQ quiz with lives, streaks & difficulty levels!</p>
165+
<button class="btn-play">Try It</button>
166+
</div>
167+
168+
<div class="project-card" data-category="games" data-project="snake-game">
169+
<div class="card-icon">🐍</div>
170+
<h3>Snake Game</h3>
171+
<p>Classic snake game!</p>
172+
<button class="btn-play">Try It</button>
173+
</div>
174+
175+
<div class="project-card" data-category="games" data-project="emoji-memory">
176+
<div class="card-icon">🧠</div>
177+
<h3>Emoji Memory Game</h3>
178+
<p>Test your memory with matching emojis!</p>
179+
<button class="btn-play">Try It</button>
180+
</div>
181+
182+
<div class="project-card" data-category="games" data-project="whack-a-mole">
183+
<div class="card-icon">🔨</div>
184+
<h3>Whack-a-Mole</h3>
185+
<p>Hit the moles before they disappear!</p>
186+
<button class="btn-play">Try It</button>
187+
</div>
188+
189+
<div class="project-card" data-category="games" data-project="flappy-game">
190+
<div class="card-icon">🐦</div>
191+
<h3>Flappy Game</h3>
192+
<p>Dodge the incoming balls and survive!</p>
193+
<button class="btn-play">Try It</button>
194+
</div>
195+
196+
<div class="project-card" data-category="games" data-project="game2048">
197+
<div class="card-icon">🟦</div>
198+
<h3>2048 Game</h3>
199+
<p>Combine tiles and reach 2048!</p>
200+
<button class="btn-play">Try It</button>
201+
</div>
202+
203+
</div><!-- /projects-grid -->
204+
</div>
205+
</section>
206+
207+
</main>
208+
209+
<!-- Project Modal -->
210+
<div class="modal" id="projectModal" role="dialog" aria-modal="true"
211+
aria-labelledby="modalDialogTitle" aria-hidden="true">
212+
<div class="modal-content">
213+
<h2 id="modalDialogTitle" class="modal-dialog-title visually-hidden" tabindex="-1">Interactive project</h2>
214+
<button type="button" class="modal-close" id="modalClose"
215+
aria-label="Close project dialog">&times;</button>
216+
<div id="modalBody"></div>
217+
</div>
218+
</div>
219+
220+
<button type="button" class="back-to-top" id="backToTop" aria-label="Back to top" title="Back to top">
221+
<i class="fas fa-arrow-up" aria-hidden="true"></i>
222+
</button>
223+
224+
<footer class="footer">
225+
<div class="container">
226+
<p>Made with ❤️ for Python learners everywhere</p>
227+
<p>
228+
<a href="https://github.com/steam-bell-92/python-mini-project"
229+
target="_blank" rel="noopener noreferrer">
230+
<i class="fab fa-github" aria-hidden="true"></i> View on GitHub
231+
</a>
232+
</p>
233+
</div>
234+
</footer>
235+
236+
<script src="js/audio.js"></script>
237+
<script src="js/projects/rock-paper-scissor.js"></script>
238+
<script src="js/projects/dice-rolling.js"></script>
239+
<script src="js/projects/coin-flip.js"></script>
240+
<script src="js/projects/number-guessing.js"></script>
241+
<script src="js/projects/hangman.js"></script>
242+
<script src="js/projects/flames.js"></script>
243+
<script src="js/projects/fibonacci.js"></script>
244+
<script src="js/projects/pascal-triangle.js"></script>
245+
<script src="js/projects/calculator.js"></script>
246+
<script src="js/projects/collatz.js"></script>
247+
<script src="js/projects/armstrong.js"></script>
248+
<script src="js/projects/prime-analyzer.js"></script>
249+
<script src="js/projects/projectile-motion.js"></script>
250+
<script src="js/projects/progression-recognizer.js"></script>
251+
<script src="js/projects/coordinate-polar-transform.js"></script>
252+
<script src="js/projects/derivative-calculator.js"></script>
253+
<script src="js/projects/morse-code.js"></script>
254+
<script src="js/projects/tower-of-hanoi.js"></script>
255+
<script src="js/projects/math-quiz.js"></script>
256+
<script src="js/projects/simon-says.js"></script>
257+
<script src="js/projects.js"></script>
258+
<script src="js/main.js"></script>
259+
260+
</body>
261+
</html>

0 commit comments

Comments
 (0)