Skip to content

Commit 6d77eae

Browse files
StevenVrpStevenVrp
authored
Initial Release
1 parent c2b419a commit 6d77eae

File tree

7 files changed

+1427
-0
lines changed

7 files changed

+1427
-0
lines changed

‎homework_tracker/beach.png‎

21 KB
Loading

‎homework_tracker/description.html‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
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>Productivity Suite Documentation</title>
7+
<style>
8+
:root {
9+
--primary: #4361ee;
10+
--secondary: #3f37c9;
11+
--accent: #4895ef;
12+
--light: #f8f9fa;
13+
--dark: #212529;
14+
--success: #4cc9f0;
15+
--warning: #f72585;
16+
--text: #495057;
17+
--gradient: linear-gradient(135deg, var(--primary), var(--secondary));
18+
}
19+
20+
* {
21+
margin: 0;
22+
padding: 0;
23+
box-sizing: border-box;
24+
}
25+
26+
body {
27+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28+
line-height: 1.6;
29+
color: var(--text);
30+
background-color: var(--light);
31+
padding: 0;
32+
}
33+
34+
.container {
35+
max-width: 1200px;
36+
margin: 0 auto;
37+
padding: 2rem;
38+
}
39+
40+
header {
41+
background: var(--gradient);
42+
color: white;
43+
padding: 3rem 2rem;
44+
text-align: center;
45+
margin-bottom: 2rem;
46+
border-radius: 0 0 20px 20px;
47+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
48+
}
49+
50+
h1 {
51+
font-size: 2.5rem;
52+
margin-bottom: 1rem;
53+
font-weight: 700;
54+
}
55+
56+
.subtitle {
57+
font-size: 1.2rem;
58+
opacity: 0.9;
59+
max-width: 800px;
60+
margin: 0 auto;
61+
}
62+
63+
h2 {
64+
color: var(--secondary);
65+
margin: 2rem 0 1rem;
66+
font-size: 1.8rem;
67+
position: relative;
68+
padding-bottom: 0.5rem;
69+
}
70+
71+
h2::after {
72+
content: '';
73+
position: absolute;
74+
bottom: 0;
75+
left: 0;
76+
width: 60px;
77+
height: 3px;
78+
background: var(--accent);
79+
}
80+
81+
h3 {
82+
color: var(--primary);
83+
margin: 1.5rem 0 0.5rem;
84+
font-size: 1.4rem;
85+
}
86+
87+
.card-container {
88+
display: grid;
89+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
90+
gap: 2rem;
91+
margin: 2rem 0;
92+
}
93+
94+
.card {
95+
background: white;
96+
border-radius: 10px;
97+
padding: 1.5rem;
98+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
99+
transition: transform 0.3s, box-shadow 0.3s;
100+
border-top: 4px solid var(--accent);
101+
}
102+
103+
.card:hover {
104+
transform: translateY(-5px);
105+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
106+
}
107+
108+
.card h3 {
109+
margin-top: 0;
110+
display: flex;
111+
align-items: center;
112+
}
113+
114+
.card h3 i {
115+
margin-right: 0.5rem;
116+
color: var(--accent);
117+
}
118+
119+
ul.features {
120+
list-style-type: none;
121+
margin: 1rem 0;
122+
}
123+
124+
ul.features li {
125+
padding: 0.5rem 0;
126+
position: relative;
127+
padding-left: 1.5rem;
128+
}
129+
130+
ul.features li::before {
131+
content: '✓';
132+
position: absolute;
133+
left: 0;
134+
color: var(--success);
135+
font-weight: bold;
136+
}
137+
138+
.tech-badge {
139+
display: inline-block;
140+
background: var(--light);
141+
color: var(--primary);
142+
padding: 0.3rem 0.8rem;
143+
border-radius: 20px;
144+
font-size: 0.8rem;
145+
margin: 0.2rem;
146+
border: 1px solid rgba(67, 97, 238, 0.2);
147+
}
148+
149+
.requirements {
150+
background: white;
151+
padding: 1.5rem;
152+
border-radius: 10px;
153+
margin: 2rem 0;
154+
border-left: 4px solid var(--accent);
155+
}
156+
157+
footer {
158+
text-align: center;
159+
margin-top: 3rem;
160+
padding: 2rem;
161+
color: var(--text);
162+
font-size: 0.9rem;
163+
border-top: 1px solid rgba(0, 0, 0, 0.1);
164+
}
165+
166+
@media (max-width: 768px) {
167+
h1 {
168+
font-size: 2rem;
169+
}
170+
171+
.container {
172+
padding: 1rem;
173+
}
174+
}
175+
</style>
176+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
177+
</head>
178+
<body>
179+
<header>
180+
<div class="container">
181+
<h1>Productivity Suite</h1>
182+
<p class="subtitle">Homework Tracker with Integrated Focus Tools</p>
183+
<p>Version 1.0 | Last Updated 2025-04-11</p>
184+
<p>By Steven Hsieh</p>
185+
</div>
186+
</header>
187+
188+
<div class="container">
189+
<section>
190+
<h2>Program Description</h2>
191+
<p>This productivity suite consists of three integrated web applications designed to enhance study efficiency and time management. All components are built using modern web technologies with responsive design principles.</p>
192+
193+
<div class="card-container">
194+
<div class="card">
195+
<h3><i class="fas fa-tasks"></i> Homework Tracker</h3>
196+
<p>The main application featuring task management with progress analytics.</p>
197+
<ul class="features">
198+
<li>Add, complete, and delete tasks</li>
199+
<li>Visual feedback with animations</li>
200+
<li>Productivity analytics dashboard</li>
201+
<li>Data export capability</li>
202+
<li>Integrated access to other tools</li>
203+
</ul>
204+
</div>
205+
206+
<div class="card">
207+
<h3><i class="fas fa-bullseye"></i> Focus Animation</h3>
208+
<p>A visual concentration aid for mindfulness and focus.</p>
209+
<ul class="features">
210+
<li>Pulsing visual element</li>
211+
<li>Interactive toggle control</li>
212+
<li>Synchronized text effects</li>
213+
<li>Minimalist distraction-free design</li>
214+
</ul>
215+
</div>
216+
217+
<div class="card">
218+
<h3><i class="fas fa-clock"></i> Pomodoro Timer</h3>
219+
<p>Customizable countdown timer with immersive feedback.</p>
220+
<ul class="features">
221+
<li>1-60 minute range</li>
222+
<li>Visual progress indicator</li>
223+
<li>Floating particle effects</li>
224+
<li>Celebration animations</li>
225+
<li>Audio integration</li>
226+
</ul>
227+
</div>
228+
</div>
229+
</section>
230+
231+
<section>
232+
<h2>Technical Implementation</h2>
233+
234+
<h3>Homework Tracker</h3>
235+
<div>
236+
<span class="tech-badge">HTML5</span>
237+
<span class="tech-badge">CSS3</span>
238+
<span class="tech-badge">JavaScript</span>
239+
<span class="tech-badge">Chart.js</span>
240+
<span class="tech-badge">LocalStorage</span>
241+
</div>
242+
<ul class="features">
243+
<li>Clean, minimalist UI with gradient buttons and card-based layout</li>
244+
<li>CSS animations for visual feedback</li>
245+
<li>Mobile-first responsive design</li>
246+
<li>Efficiency algorithm: (Target Time / Actual Time) * 100</li>
247+
<li>Automatic data updates every 5 minutes</li>
248+
</ul>
249+
250+
<h3>Focus Animation</h3>
251+
<div>
252+
<span class="tech-badge">CSS Animations</span>
253+
<span class="tech-badge">@keyframes</span>
254+
</div>
255+
<ul class="features">
256+
<li>Pure CSS animations for pulse and fade effects</li>
257+
<li>JavaScript click handler for animation control</li>
258+
<li>Centered, responsive layout</li>
259+
</ul>
260+
261+
<h3>Pomodoro Timer</h3>
262+
<div>
263+
<span class="tech-badge">RequestAnimationFrame</span>
264+
<span class="tech-badge">CSS Transforms</span>
265+
<span class="tech-badge">DOM Manipulation</span>
266+
</div>
267+
<ul class="features">
268+
<li>Canvas-free animations using CSS transforms</li>
269+
<li>Smooth timing with RequestAnimationFrame</li>
270+
<li>Programmatic DOM manipulation for visual effects</li>
271+
</ul>
272+
</section>
273+
274+
<section class="requirements">
275+
<h2>System Requirements</h2>
276+
<ul class="features">
277+
<li>Modern web browser (Chrome, Firefox, Edge, Safari)</li>
278+
<li>JavaScript enabled</li>
279+
<li>LocalStorage support for data persistence</li>
280+
<li>Internet connection for external resources</li>
281+
</ul>
282+
283+
<h3>Deployment</h3>
284+
<p>All components are client-side only and can be deployed to any static web hosting service. No server-side components required.</p>
285+
</section>
286+
287+
<section>
288+
<h2>Conclusion</h2>
289+
<p>This suite provides a comprehensive productivity solution for students and professionals, combining task management with focused work sessions and time tracking. The integrated approach helps users maintain concentration while tracking their progress toward completion goals.</p>
290+
</section>
291+
</div>
292+
293+
<footer>
294+
<div class="container">
295+
<p>Productivity Suite Documentation | Built with HTML, CSS, and JavaScript</p>
296+
<p>Homework Tracker | Copyright (c) 2025 Steven Hsieh (StevenVrp) | Licensed under the MIT License.</p>
297+
</div>
298+
</footer>
299+
</body>
300+
</html>

‎homework_tracker/focus_animation.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Focus Animation for Reviewing</title>
6+
<style>
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
background-color: #f5f5f5;
13+
font-family: Arial, sans-serif;
14+
}
15+
16+
.focus-container {
17+
text-align: center;
18+
}
19+
20+
.focus-circle {
21+
width: 150px;
22+
height: 150px;
23+
border-radius: 50%;
24+
background-color: #4a89dc;
25+
margin: 0 auto 30px;
26+
box-shadow: 0 0 20px rgba(74, 137, 220, 0.5);
27+
animation: pulse 4s ease-in-out infinite;
28+
}
29+
30+
.focus-text {
31+
font-size: 24px;
32+
color: #333;
33+
animation: fade 4s ease-in-out infinite;
34+
}
35+
36+
@keyframes pulse {
37+
0% {
38+
transform: scale(1);
39+
opacity: 0.7;
40+
background-color: #4a89dc;
41+
}
42+
50% {
43+
transform: scale(1.1);
44+
opacity: 1;
45+
background-color: #5d9cec;
46+
}
47+
100% {
48+
transform: scale(1);
49+
opacity: 0.7;
50+
background-color: #4a89dc;
51+
}
52+
}
53+
54+
@keyframes fade {
55+
0%, 100% {
56+
opacity: 0.7;
57+
}
58+
50% {
59+
opacity: 1;
60+
}
61+
}
62+
</style>
63+
<script>
64+
const circle = document.querySelector('.focus-circle');
65+
circle.addEventListener('click', () => {
66+
circle.style.animationPlayState = circle.style.animationPlayState === 'paused' ? 'running' : 'paused';
67+
});
68+
</script>
69+
</head>
70+
<body>
71+
<div class="focus-container">
72+
<div class="focus-circle"></div>
73+
<div class="focus-text">Stay Focused</div>
74+
</div>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)