Skip to content

Commit b02a2a8

Browse files
StevenVrpStevenVrp
authored
v1.1.0
1 parent 21daa2c commit b02a2a8

File tree

10 files changed

+2949
-0
lines changed

10 files changed

+2949
-0
lines changed

‎Homework-Tracker/beach.png‎

21 KB
Loading

‎Homework-Tracker/description.html‎

Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
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 | Product Description</title>
7+
<link href="https://fonts.loli.net/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9+
<style>
10+
:root {
11+
--primary: #4361ee;
12+
--secondary: #3f37c9;
13+
--accent: #4895ef;
14+
--light: #f8f9fa;
15+
--dark: #212529;
16+
--success: #4cc9f0;
17+
--warning: #f72585;
18+
--text: #495057;
19+
--gradient: linear-gradient(135deg, var(--primary), var(--secondary));
20+
}
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
body {
29+
font-family: 'Poppins', sans-serif;
30+
line-height: 1.6;
31+
color: var(--text);
32+
background-color: var(--light);
33+
padding: 0;
34+
}
35+
36+
.container {
37+
max-width: 1200px;
38+
margin: 0 auto;
39+
padding: 2rem;
40+
}
41+
42+
header {
43+
background: var(--gradient);
44+
color: white;
45+
padding: 3rem 2rem;
46+
text-align: center;
47+
margin-bottom: 2rem;
48+
border-radius: 0 0 20px 20px;
49+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
50+
}
51+
52+
h1 {
53+
font-size: 2.5rem;
54+
margin-bottom: 1rem;
55+
font-weight: 700;
56+
}
57+
58+
.subtitle {
59+
font-size: 1.2rem;
60+
opacity: 0.9;
61+
max-width: 800px;
62+
margin: 0 auto;
63+
}
64+
65+
h2 {
66+
color: var(--secondary);
67+
margin: 2rem 0 1rem;
68+
font-size: 1.8rem;
69+
position: relative;
70+
padding-bottom: 0.5rem;
71+
}
72+
73+
h2::after {
74+
content: '';
75+
position: absolute;
76+
bottom: 0;
77+
left: 0;
78+
width: 60px;
79+
height: 3px;
80+
background: var(--accent);
81+
}
82+
83+
h3 {
84+
color: var(--primary);
85+
margin: 1.5rem 0 0.5rem;
86+
font-size: 1.4rem;
87+
}
88+
89+
.card-container {
90+
display: grid;
91+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
92+
gap: 2rem;
93+
margin: 2rem 0;
94+
}
95+
96+
.card {
97+
background: white;
98+
border-radius: 10px;
99+
padding: 1.5rem;
100+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
101+
transition: transform 0.3s, box-shadow 0.3s;
102+
border-top: 4px solid var(--accent);
103+
}
104+
105+
.card:hover {
106+
transform: translateY(-5px);
107+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
108+
}
109+
110+
.card h3 {
111+
margin-top: 0;
112+
display: flex;
113+
align-items: center;
114+
}
115+
116+
.card h3 i {
117+
margin-right: 0.5rem;
118+
color: var(--accent);
119+
}
120+
121+
ul.features {
122+
list-style-type: none;
123+
margin: 1rem 0;
124+
}
125+
126+
ul.features li {
127+
padding: 0. 0;
128+
position: relative;
129+
padding-left: 1.5rem;
130+
}
131+
132+
ul.features li::before {
133+
content: '✓';
134+
position: absolute;
135+
left: 0;
136+
color: var(--success);
137+
font-weight: bold;
138+
}
139+
140+
.tech-badge {
141+
display: inline-block;
142+
background: var(--light);
143+
color: var(--primary);
144+
padding: 0.3rem 0.8rem;
145+
border-radius: 20px;
146+
font-size: 0.8rem;
147+
margin: 0.2rem;
148+
border: 1px solid rgba(67, 97, 238, 0.2);
149+
}
150+
151+
.requirements {
152+
background: white;
153+
padding: 1.5rem;
154+
border-radius: 10px;
155+
margin: 2rem 0;
156+
border-left: 4px solid var(--accent);
157+
}
158+
159+
footer {
160+
text-align: center;
161+
margin-top: 3rem;
162+
padding: 2rem;
163+
color: var(--text);
164+
font-size: 0.9rem;
165+
border-top: 1px solid rgba(0, 0, 0, 0.1);
166+
}
167+
168+
@media (max-width: 768px) {
169+
h1 {
170+
font-size: 2rem;
171+
}
172+
173+
.container {
174+
padding: 1rem;
175+
}
176+
}
177+
.home-btn {
178+
position: absolute;
179+
top: 20px;
180+
left: 20px;
181+
width: 40px;
182+
height: 40px;
183+
background: linear-gradient(45deg, #ff9966, #ff5e62);
184+
border-radius: 50%;
185+
display: flex;
186+
justify-content: center;
187+
align-items: center;
188+
text-decoration: none;
189+
z-index: 100;
190+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
191+
transition: transform 0.3s;
192+
}
193+
194+
.home-btn:hover {
195+
transform: scale(1.1);
196+
}
197+
198+
.home-icon {
199+
color: white;
200+
font-size: 20px;
201+
font-weight: bold;
202+
}
203+
</style>
204+
</head>
205+
<body>
206+
<header>
207+
<div class="container">
208+
<a href="index.html" class="home-btn" title="Home">
209+
<span class="home-icon">⌂</span>
210+
</a>
211+
<h1><i class="fas fa-book"></i> Homework Tracker</h1>
212+
<p class="subtitle">Your all-in-one productivity suite for managing tasks, time, and focus</p>
213+
<p>Version 2.0.0 | Last Updated 2025-04-12</p>
214+
<p>By Steven Hsieh</p>
215+
</div>
216+
</header>
217+
218+
<div class="container">
219+
<section>
220+
<h2>Program Description</h2>
221+
<p>This comprehensive productivity suite combines task management with powerful focus tools to enhance your study efficiency and time management. All components are built using modern web technologies with responsive design principles.</p>
222+
223+
<div class="card-container">
224+
<div class="card">
225+
<h3><i class="fas fa-tasks"></i> Homework Tracker</h3>
226+
<p>The central hub for managing your tasks with insightful progress analytics.</p>
227+
<ul class="features">
228+
<li>Add, complete, and delete tasks with ease</li>
229+
<li>Visual feedback with completion animations</li>
230+
<li>Interactive productivity analytics dashboard</li>
231+
<li>Data export capability for tracking progress</li>
232+
<li>One-click access to all integrated tools</li>
233+
<li>Reset functionality for fresh starts</li>
234+
</ul>
235+
</div>
236+
237+
<div class="card">
238+
<h3><i class="fas fa-robot"></i> Nim Game</h3>
239+
<p>A strategic mathematical game for mental exercise and entertainment.</p>
240+
<ul class="features">
241+
<li>Intelligent AI opponent with optimal strategy</li>
242+
<li>Customizable game settings (1-100 piles)</li>
243+
<li>Visual feedback with flash animations</li>
244+
<li>Choose who starts first (player or AI)</li>
245+
<li>Interactive controls and intuitive interface</li>
246+
</ul>
247+
</div>
248+
249+
<div class="card">
250+
<h3><i class="fas fa-clock"></i> Focus Timer</h3>
251+
<p>Customizable countdown timer with immersive visual feedback.</p>
252+
<ul class="features">
253+
<li>1-120 minute range for flexible sessions</li>
254+
<li>Visual progress indicator with circular countdown</li>
255+
<li>Multiple modes (Space and Beach themes)</li>
256+
<li>Celebration animations when timer completes</li>
257+
<li>Background tab support for accurate timing</li>
258+
<li>Reset button for quick adjustments</li>
259+
</ul>
260+
</div>
261+
</div>
262+
</section>
263+
264+
<section>
265+
<h2>Technical Implementation</h2>
266+
267+
<h3>Homework Tracker</h3>
268+
<div>
269+
<span class="tech-badge">HTML5</span>
270+
<span class="tech-badge">CSS3</span>
271+
<span class="tech-badge">JavaScript</span>
272+
<span class="tech-badge">LocalStorage</span>
273+
<span class="tech-badge">Chart.js</span>
274+
</div>
275+
<ul class="features">
276+
<li>Clean, minimalist UI with gradient buttons and card-based layout</li>
277+
<li>CSS animations for visual feedback on task completion</li>
278+
<li>Mobile-first responsive design that works on all devices</li>
279+
<li>Efficiency algorithm: (Target Time / Actual Time) * 100</li>
280+
<li>Automatic data updates every 5 minutes</li>
281+
<li>Data persistence using browser localStorage</li>
282+
</ul>
283+
284+
<h3>Nim Game</h3>
285+
<div>
286+
<span class="tech-badge">CSS3 Animations</span>
287+
<span class="tech-badge">Game Theory</span>
288+
<span class="tech-badge">Dynamic UI</span>
289+
<span class="tech-badge">AI Logic</span>
290+
</div>
291+
<ul class="features">
292+
<li>Smooth transitions and animations using pure CSS</li>
293+
<li>JavaScript event handlers for interactive gameplay</li>
294+
<li>Responsive layout that adapts to screen size</li>
295+
<li>AI uses Nim-sum algorithm for optimal play</li>
296+
<li>Visual feedback with flash animations on AI moves</li>
297+
<li>Customizable game settings via URL parameters</li>
298+
299+
<h3>Focus Timer</h3>
300+
<div>
301+
<span class="tech-badge">Web Workers</span>
302+
<span class="tech-badge">CSS Transforms</span>
303+
<span class="tech-badge">RequestAnimationFrame</span>
304+
<span class="tech-badge">Theme Switching</span>
305+
</div>
306+
<ul class="features">
307+
<li>Web Worker ensures accurate timing in background tabs</li>
308+
<li>Smooth animations using CSS transforms and RequestAnimationFrame</li>
309+
<li>Interactive theme switching between Space and Beach modes</li>
310+
<li>Visual fireworks celebration when timer completes</li>
311+
<li>Dynamic particle effects for Space mode</li>
312+
<li>Background image cycling for Beach mode</li>
313+
</ul>
314+
</section>
315+
316+
<section class="requirements">
317+
<h2>System Requirements</h2>
318+
<ul class="features">
319+
<li>Modern web browser (Chrome, Firefox, Edge, Safari)</li>
320+
<li>JavaScript enabled</li>
321+
<li>LocalStorage support for data persistence</li>
322+
<li>Internet connection for external resources</li>
323+
</ul>
324+
325+
<h3>Deployment</h3>
326+
<p>All components are client-side only and can be deployed to any static web hosting service. No server-side components required.</p>
327+
</section>
328+
329+
<section>
330+
<h2>What's New in Version 2.0.0</h2>
331+
<ul class="features">
332+
<li>Fixed timer accuracy in background tabs using Web Workers</li>
333+
<li>Added reset functionality to all components</li>
334+
<li>Improved navigation with home buttons on all pages</li>
335+
<li>Enhanced Nim Game with better visual feedback</li>
336+
<li>Added multiple modes to the Focus Timer</li>
337+
<li>Improved overall performance and stability</li>
338+
</ul>
339+
</section>
340+
341+
<section>
342+
<h2>Conclusion</h2>
343+
<p>This suite provides a comprehensive productivity solution for students and professionals, combining task management with focused work sessions and strategic mental exercises. The integrated approach helps users maintain concentration while tracking their progress toward completion goals, with all tools accessible from a central hub.</p>
344+
</section>
345+
</div>
346+
347+
<footer>
348+
<div class="container">
349+
<p>Homework Tracker | Copyright&copy; 2025 Steven Hsieh (StevenVrp) | Licensed under the MIT License.</p>
350+
</div>
351+
</footer>
352+
</body>
353+
</html>

0 commit comments

Comments
 (0)