Skip to content

Commit 144cd71

Browse files
nur-hasinnur-hasin
committed
feat(pomodoro-timer): add task, stats, history, settings, notifications and improved UI/UX
1 parent bbb7bb2 commit 144cd71

3 files changed

Lines changed: 1845 additions & 167 deletions

File tree

‎projects/pomodoro/index.html‎

Lines changed: 186 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,200 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33

44
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width,initial-scale=1">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Pomodoro Timer</title>
8-
<link rel="stylesheet" href="./styles.css">
8+
<link rel="stylesheet" href="styles.css">
99
</head>
1010

1111
<body>
12-
<main>
13-
<h1>Pomodoro Timer</h1>
14-
<div class="timer"><span id="time">25:00</span></div>
15-
<div class="controls">
16-
<button id="start">Start</button>
17-
<button id="reset">Reset</button>
18-
</div>
19-
<p class="notes">Add custom intervals, notifications, and stats.</p>
20-
21-
<!-- Link timer to current task -->
22-
<div class="current-task">
23-
<label for="current-task-select">Working on:</label>
24-
<select id="current-task-select">
25-
<option value="">-- Select task --</option>
26-
</select>
27-
</div>
12+
<div class="app-container">
13+
<!-- Header -->
14+
<header class="header">
15+
<h1 class="app-title">Pomodoro Timer</h1>
16+
<div class="header-actions">
17+
<button class="icon-btn" id="dashboard-btn" title="Dashboard">
18+
<svg viewBox="0 0 24 24" fill="currentColor">
19+
<path d="M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z" />
20+
</svg>
21+
</button>
22+
<button class="icon-btn" id="settings-btn" title="Settings">
23+
<svg viewBox="0 0 24 24" fill="currentColor">
24+
<path
25+
d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
26+
</svg>
27+
</button>
28+
</div>
29+
</header>
30+
31+
<!-- Timer Section -->
32+
<section class="timer-section">
33+
<div class="session-toggle">
34+
<button class="toggle-btn active" data-type="work">Work</button>
35+
<button class="toggle-btn" data-type="short-break">Short Break</button>
36+
<button class="toggle-btn" data-type="long-break">Long Break</button>
37+
</div>
38+
39+
<div class="timer-display" id="timer-display">25:00</div>
40+
<div class="session-info" id="session-info">Session 1</div>
41+
42+
<div class="timer-controls">
43+
<button class="btn" id="toggle-timer">Start</button>
44+
<button class="btn btn-secondary" id="reset-timer">Reset</button>
45+
</div>
46+
47+
<div class="current-task">
48+
<label>Working on</label>
49+
<select id="current-task-select">
50+
<option value="">Select a task</option>
51+
</select>
52+
<div class="current-task-info" id="current-task-info" style="display: none;">
53+
<p id="current-task-name">Current Task: </p>
54+
<p id="current-task-pomodoros">Pomodoros completed: 0</p>
55+
</div>
56+
</div>
57+
</section>
2858

29-
<!-- TASK PANEL -->
59+
<!-- Task Panel -->
3060
<section class="task-panel">
31-
<h2>Tasks</h2>
32-
<form id="task-form">
33-
<input type="text" id="task-name" placeholder="Task name" required>
34-
<input type="text" id="task-desc" placeholder="Description (optional)">
35-
<button type="submit">Add Task</button>
61+
<div class="panel-header">
62+
<h2 class="panel-title">Task Management</h2>
63+
</div>
64+
65+
<form class="task-form" id="task-form">
66+
<input type="text" name="name" class="form-input" placeholder="Task name" required>
67+
<input type="text" name="description" class="form-input" placeholder="Description (optional)">
68+
<button type="submit" class="btn">Add Task</button>
3669
</form>
37-
<ul id="task-list"></ul>
70+
71+
<div class="task-list" id="task-list">
72+
<div class="empty-state">
73+
<p>No tasks yet. Add your first task above!</p>
74+
</div>
75+
</div>
3876
</section>
39-
</main>
4077

41-
<script src="./main.js"></script>
78+
<!-- Dashboard Modal -->
79+
<div class="modal-overlay" id="dashboard-modal" style="display: none;">
80+
<div class="modal modal-large">
81+
<div class="modal-header">
82+
<h2 class="modal-title">Dashboard</h2>
83+
<button class="modal-close" id="close-dashboard">
84+
<svg viewBox="0 0 24 24" fill="currentColor">
85+
<path
86+
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
87+
</svg>
88+
</button>
89+
</div>
90+
91+
<div class="overview-stats">Overview Stats</div>
92+
<div class="stats-grid" id="stats-grid">
93+
<div class="stat-card">
94+
<div class="stat-value" id="total-pomodoros">0</div>
95+
<div class="stat-label">Total Pomodoros</div>
96+
</div>
97+
<div class="stat-card">
98+
<div class="stat-value" id="total-tasks">0</div>
99+
<div class="stat-label">Total Tasks</div>
100+
</div>
101+
<div class="stat-card">
102+
<div class="stat-value" id="today-pomodoros">0</div>
103+
<div class="stat-label">Today's Sessions</div>
104+
</div>
105+
<div class="stat-card">
106+
<div class="stat-value" id="current-streak">0</div>
107+
<div class="stat-label">Current Streak</div>
108+
</div>
109+
</div>
110+
111+
<div class="task-performance">
112+
<h3 class="performance-title">Task Performance</h3>
113+
<div class="performance-list" id="performance-list">
114+
<div class="empty-state">
115+
<p>No task performance data yet.</p>
116+
</div>
117+
</div>
118+
</div>
119+
120+
<div class="session-history">
121+
<h3 class="history-title">Recent Session History</h3>
122+
<div class="history-list" id="history-list">
123+
<div class="empty-state">
124+
<p>No session history yet. Complete some pomodoros to see your history!</p>
125+
</div>
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
131+
<!-- Settings Modal -->
132+
<div class="modal-overlay" id="settings-modal" style="display: none;">
133+
<div class="modal">
134+
<div class="modal-header">
135+
<h2 class="modal-title">Settings</h2>
136+
<button class="modal-close" id="close-settings">
137+
<svg viewBox="0 0 24 24" fill="currentColor">
138+
<path
139+
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
140+
</svg>
141+
</button>
142+
</div>
143+
144+
<form id="settings-form">
145+
<div class="settings-grid">
146+
<div class="setting-group">
147+
<label class="setting-label">Work Duration (minutes)</label>
148+
<input type="number" name="workDuration" class="setting-input" min="1" max="60" value="25"
149+
required>
150+
</div>
151+
152+
<div class="setting-group">
153+
<label class="setting-label">Short Break Duration (minutes)</label>
154+
<input type="number" name="breakDuration" class="setting-input" min="1" max="30" value="5"
155+
required>
156+
</div>
157+
158+
<div class="setting-group">
159+
<label class="setting-label">Long Break Duration (minutes)</label>
160+
<input type="number" name="longBreakDuration" class="setting-input" min="1" max="60"
161+
value="15" required>
162+
</div>
163+
164+
<div class="setting-group">
165+
<label class="setting-label">Long Break Interval</label>
166+
<input type="number" name="longBreakInterval" class="setting-input" min="1" max="10"
167+
value="4" required>
168+
</div>
169+
</div>
170+
171+
<div class="checkbox-container">
172+
<label class="checkbox-group">
173+
<input type="checkbox" name="notifications" checked>
174+
Enable Notifications
175+
</label>
176+
<label class="checkbox-group">
177+
<input type="checkbox" name="autoStartBreaks">
178+
Auto-start Breaks
179+
</label>
180+
<label class="checkbox-group">
181+
<input type="checkbox" name="autoStartPomodoros">
182+
Auto-start Pomodoros
183+
</label>
184+
</div>
185+
186+
<div class="save-button-container">
187+
<button type="submit" class="btn">Save Changes</button>
188+
</div>
189+
</form>
190+
</div>
191+
</div>
192+
193+
<!-- Notification -->
194+
<div class="notification" id="notification"></div>
195+
</div>
196+
197+
<script src="main.js"></script>
42198
</body>
43199

44-
</html>
200+
</html>

0 commit comments

Comments
 (0)