Skip to content

Commit c63675c

Browse files
StevenVrpStevenVrp
authored
Add v2.0.1 files
1 parent 9bb9d41 commit c63675c

File tree

9 files changed

+2467
-0
lines changed

9 files changed

+2467
-0
lines changed

‎Homework Tracker.lnk

1.65 KB
Binary file not shown.

‎Pages/beach.png

21 KB
Loading

‎Pages/game.html

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Homework Tracker | Nim Game</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
8+
<style>
9+
:root {
10+
--primary-color: #3498db;
11+
--secondary-color: #2c3e50;
12+
--accent-color: #e74c3c;
13+
--light-color: #ecf0f1;
14+
--dark-color: #2c3e50;
15+
--success-color: #2ecc71;
16+
}
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
}
23+
24+
body {
25+
font-family: 'Roboto', sans-serif;
26+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
27+
color: var(--dark-color);
28+
min-height: 100vh;
29+
position: relative;
30+
padding-bottom: 60px;
31+
}
32+
33+
/* Watermark */
34+
body::after {
35+
content: "March 2025, Steven Hsieh";
36+
position: fixed;
37+
opacity: 0.08;
38+
font-size: 4rem;
39+
font-weight: 700;
40+
font-family: 'Montserrat', sans-serif;
41+
transform: rotate(-30deg) translate(-50%, -50%);
42+
pointer-events: none;
43+
z-index: -1;
44+
top: 50%;
45+
left: 50%;
46+
color: var(--dark-color);
47+
animation: watermark 20s infinite ease-in-out;
48+
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
49+
}
50+
51+
@keyframes watermark {
52+
0% { transform: rotate(-30deg) translate(-50%, -50%) scale(1); opacity: 0.08; }
53+
50% { transform: rotate(-25deg) translate(-50%, -50%) scale(1.05); opacity: 0.12; }
54+
100% { transform: rotate(-30deg) translate(-50%, -50%) scale(1); opacity: 0.08; }
55+
}
56+
57+
.container {
58+
max-width: 900px;
59+
margin: 40px auto;
60+
padding: 30px;
61+
background: rgba(255, 255, 255, 0.95);
62+
border-radius: 16px;
63+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
64+
backdrop-filter: blur(5px);
65+
border: 1px solid rgba(255, 255, 255, 0.3);
66+
position: relative;
67+
z-index: 1;
68+
text-align: center;
69+
}
70+
71+
h1 {
72+
font-family: 'Montserrat', sans-serif;
73+
color: var(--secondary-color);
74+
font-size: 2.5rem;
75+
margin-bottom: 30px;
76+
position: relative;
77+
padding-bottom: 15px;
78+
}
79+
80+
h1::after {
81+
content: '';
82+
position: absolute;
83+
bottom: 0;
84+
left: 50%;
85+
transform: translateX(-50%);
86+
width: 100px;
87+
height: 4px;
88+
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
89+
border-radius: 2px;
90+
}
91+
92+
h3 {
93+
font-family: 'Montserrat', sans-serif;
94+
color: var(--secondary-color);
95+
margin-bottom: 20px;
96+
font-size: 1.5rem;
97+
}
98+
99+
#turnSelection {
100+
background: white;
101+
padding: 30px;
102+
border-radius: 12px;
103+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
104+
margin-bottom: 30px;
105+
}
106+
107+
#gameBoard {
108+
background: white;
109+
padding: 30px;
110+
border-radius: 12px;
111+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
112+
margin-bottom: 30px;
113+
}
114+
115+
.heaps {
116+
display: grid;
117+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
118+
gap: 25px;
119+
margin-top: 20px;
120+
}
121+
122+
button {
123+
background: var(--primary-color);
124+
color: white;
125+
border: none;
126+
padding: 12px 30px;
127+
border-radius: 8px;
128+
cursor: pointer;
129+
font-weight: 600;
130+
font-size: 1rem;
131+
transition: all 0.3s;
132+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
133+
margin: 0 10px;
134+
min-width: 150px;
135+
}
136+
137+
button:hover {
138+
background: #2980b9;
139+
transform: translateY(-2px);
140+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
141+
}
142+
143+
button:active {
144+
transform: translateY(0);
145+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
146+
}
147+
148+
#resultPanel {
149+
background: #f8f9fa;
150+
padding: 20px;
151+
border-radius: 10px;
152+
border-left: 5px solid var(--accent-color);
153+
font-size: 1.2rem;
154+
margin-top: 20px;
155+
display: none;
156+
}
157+
158+
footer {
159+
position: fixed;
160+
bottom: 0;
161+
width: 100%;
162+
text-align: center;
163+
background: rgba(0,0,0,0.9);
164+
color: white;
165+
padding: 15px;
166+
font-size: 0.9rem;
167+
z-index: 10;
168+
}
169+
170+
footer::before {
171+
content: '';
172+
position: absolute;
173+
top: 0;
174+
left: 0;
175+
width: 100%;
176+
height: 3px;
177+
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
178+
}
179+
180+
@media (max-width: 768px) {
181+
.container {
182+
margin: 20px;
183+
padding: 20px;
184+
}
185+
186+
.heaps {
187+
grid-template-columns: 1fr;
188+
}
189+
190+
button {
191+
display: block;
192+
width: 100%;
193+
margin: 10px 0;
194+
}
195+
}
196+
.home-btn {
197+
position: absolute;
198+
top: 20px;
199+
left: 20px;
200+
width: 40px;
201+
height: 40px;
202+
background: linear-gradient(45deg, #ff9966, #ff5e62);
203+
border-radius: 50%;
204+
display: flex;
205+
justify-content: center;
206+
align-items: center;
207+
text-decoration: none;
208+
z-index: 100;
209+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
210+
transition: transform 0.3s;
211+
}
212+
213+
.home-btn:hover {
214+
transform: scale(1.1);
215+
}
216+
217+
.home-icon {
218+
color: white;
219+
font-size: 20px;
220+
font-weight: bold;
221+
}
222+
</style>
223+
</head>
224+
<body>
225+
<div class="container">
226+
<h1>Nim Game</h1>
227+
<!-- Pure HTML Home Button -->
228+
<a href="index.html" class="home-btn" title="Home">
229+
<span class="home-icon">⌂</span>
230+
</a>
231+
<div id="turnSelection">
232+
<h3>Who starts the game?</h3>
233+
<button onclick="initGame(true)">Player First</button>
234+
<button onclick="initGame(false)">AI First</button>
235+
</div>
236+
237+
<div id="gameBoard" style="display:none;">
238+
<div class="heaps" id="heapsContainer"></div>
239+
</div>
240+
241+
<div id="resultPanel"></div>
242+
</div>
243+
244+
<footer>
245+
Homework Tracker | Nim Game | Copyright&copy; 2025 Steven Hsieh (StevenVrp) | Licensed under the MIT License.
246+
</footer>
247+
248+
<script src="game.js"></script>
249+
</body>
250+
</html>

0 commit comments

Comments
 (0)